@font-face {
  font-family: logoFont;
  src: url(Roustel.ttf);
}



* {
  margin: 0; padding: 0; border: none;
  box-sizing: border-box;
}

body {
	font-size: 100%;
	font-family: Garamond;
	font-family: Verdana;

	background-color: #0b3131;
	color: #;

	text-align: center;
}

img {
  width: 100%;
}




.grid-container {
  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto ;
	column-gap: 28px;
	row-gap: 7px;
  grid-template-areas:
	'menu logo logo logo news '
	'main main main main main '
	;
		
	max-width: 1186px;
	margin: auto;
	padding: 14px;
	
	
	/*background-image: linear-gradient(180deg,  #edfbfb, #b5ecec);*/
	background-color: #edfbfb;
}

.grid-container > div {
  padding: 14px;
}



.grid-logo {
  grid-area: logo;
  
}
	.grid-logo a img {
			width: 66%;
			object-fit: contain;

	}

	
.grid-menu {
  grid-area: menu; 
}
	.grid-menu ul {
		width: 100%;
		height: 100%;
		
		font-family: logoFont;
	}
	
	.grid-menu ul li {
		list-style: none;
		height: 20%;
	}
	
		.grid-menu ul li a {
			border-radius: 6px;
			text-align: right;
			text-decoration: none;

			font-size: 2.4em;
			vertical-align: middle;
			text-transform: lowercase;
			color: #008080;
			text-shadow: 4px 4px 6px #888;
						
			display: block;

			padding-left: 14px;
			padding-right: 14px;
			
		}
			.grid-menu ul li a:hover {
					color: #800000;
					text-shadow: 4px 4px 6px #444;
			}
			.grid-menu ul li a:active {
					color: #edfbfb;
					background-color: #800000;
					text-shadow: none;
			}


.grid-news {
	grid-area: news;

	border-left: 1px solid #edfbfb;
}
	.grid-news h1 {
			text-align: left;
		font-size: 1.0em;
		font-weight: bold;
		text-decoration: underline;
				color: #008080;
		
		margin-bottom: 14px;
	}
	.grid-news p {
		font-size: 1.0em;
		text-align: left;
				color: #0b3131;
	}



.grid-content {
  grid-area: main;
  
  text-align: left;
	
	margin-top: 56px;
}

	.grid-content > div {
		
		
		&:first-child {
			margin-top: 0;
			border: none;
		}
		&:last-child {
				margin-bottom: 42px;
		}
	}


	.grid-content h1 {
		font-family: logoFont;
		font-size: 2.4em;
		
		color: #008080;
		border-top: 6px dotted #008080;
		
		margin-top: 42px;
		margin-bottom: 21px;
		padding-top:21px;
		
		
		clear: both;
	}
			
			
	.grid-content p {
		text-indent: 28px;		
		
		color: #0b3131;
		afont-family: Verdana;

		padding-left: 10%;
		padding-right: 10%;
		margin-bottom: 14px;	
	
		& > a {
			color: #800000;
			& > a:active {
				color: #edfbfb;
				background-color: #800000; 
			}			
		}
	}



	.grid-content img {

		width: 30%;
	  
	  border-radius: 30%;
	  border: none;
	}
		.grid-content img.img-right {
			float: right;
		}
		.grid-content img.img-left {
			float: left;
		}


			.grid-content h1#imp ~ p{
				text-indent: 0;
			}


/*
###################################
##################################
##################################
*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 430px) {
	.grid-container {
		  grid-template-columns: 1fr 1fr 1fr;
		  grid-template-rows: 300px auto auto auto;
			column-gap: 7px;
			row-gap: 7px;
		  grid-template-areas:
			'logo logo logo'
			'menu menu menu'
			'news news news'
			'main main main'
			;
	}
	
	
.grid-logo a {
	
  height: 100%;
	
}
	
	.grid-logo a img {
			height: 100%;
	}


	
	.grid-menu ul li {
			width: 16%;
			float: left;
			
			border-right: 1px solid #000;
			
		&:last-child {
			border: none;
		} 
		
		/* a&:nth-child(4) { */
			/* clear: both; */
		/* } */
		
	& a {
		font-size: 1.4em;
	}
	}
	

	
	.grid-content h1 {
		font-size: 1.6em;
	}
	.grid-content p {
		font-size: 1.0em;
	  line-height: 1.2em;
	}
	.grid-content p img {
		width: 50%;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 431px) and (max-width: 1334px) and (orientation: portrait) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 431px) and (max-width: 1334px) and (orientation: landscape) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1335px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1335px) {
	
	.grid-container {
		padding-top: 67px;
		padding-bottom: 67px;
		
	}
	.grid-content p {
		font-size: 1.2em;
		line-height: 1.5em;
		
	}
}