@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro&display=swap');

@media only screen and (max-width: 1024px) {





/* --- HEADER / LOGO / NAVIGATION --- */

header{
	display: flex;
	flex-wrap: wrap;
	top:0;
	position:fixed;
	width:100%;
	border:#e5ee3c 3px solid;

	z-index: 1;
	
	
}
/* LOGO*/
header .logo{
	
	width:100%;
    background-color:#026838;
    /*border:2px solid rgb(225, 153, 38);*/    
    grid-area:logo;

}

header .logo img{
	padding-top: 20px;
	height:110px;
    width:100%;

}
    


/* NAVIGATION */	
header nav{
    display:flex;
    flex-wrap: wrap;
    
    width:100%;
    /*border:1px solid blue;*/
    grid-area:nav;
 
    
}

header nav ul{

		
    background-color:#026838;

    width:100%;
	margin:0;
    padding:0;	
    padding-bottom: 15px;
			
}

header nav ul li{
	background-color: #7AD299;
		margin-top:0.6em;
        margin-right:0.6em;
		width:100%;
		list-style:none;
		font-family: 'Source Serif Pro', serif;
		font-weight:300;
		font-size:1.5em;
			
        text-align: center;
}

header nav ul li a{
		
		text-decoration:none;
		color:#ffffff;
		

}

header nav ul li a:visited{
		text-decoration:none;
		color:#ffffff;
} 

header nav ul li a:hover,
header nav ul li a:focus{
		background-color:  #e5ee3c;
		color: #41538e;

		border-bottom-color:#ffffff;
		
		
		
		
				
}
/* FIN HEADER / LOGO / NAVIGATION  */	






/* CONTENU SECTION 1  */
section.contenu{

	grid-area: contenu;
	background-color: #7AD299;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: rgb(0, 0, 0);
	font-size:1.1em;
	margin-bottom: 25px;
	margin-top: 200px;

}


.contenu h2{
	width:75%;
	margin:auto;
	margin-top: 100px;
}
.calltoaction{
	font-size: 1.4em;
	padding-bottom: 15px;
	width:75%;
	margin:auto;
}

.calltoaction form input{
	background-color: #e5ee3c;
	margin-bottom: 25px;;
	padding:15px;
	border-radius: 40%;
	font-size: 1.2em;
		-webkit-animation-name: bounceInDown;
		animation-name: bounceInDown;
		-webkit-animation-duration: 2s;
		animation-duration: 2s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		}
		@-webkit-keyframes bounceInDown {
		0%, 60%, 75%, 90%, 100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		}
		
		0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0);
		}
		
		60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
		}
		
		75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
		}
		
		90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
		}
		
		100% {
		-webkit-transform: none;
		transform: none;
		}
		}
		
		@keyframes bounceInDown {
		0%, 60%, 75%, 90%, 100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		}
		
		0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0);
		}
		
		60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
		}
		
		75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
		}
		
		90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
		}
		
		100% {
		-webkit-transform: none;
		transform: none;
		}
		} 
	
}
/* FIN DE SECTION 1  */

/* MAIN */ 
main{
	
	font-family: 'Source Serif Pro', serif;
	grid-area: main;  
	height: 100%;
	display:flex;
	flex-direction:row;
	flex-flow: row wrap;
	justify-content:space-around;

	font-size:1.2em;
	/* border: 2px solid black;*/
	text-align: center;
	color:#026838;
	margin-bottom: 50px;

}

main figure{
	  padding:25px;
	  width:250px;
}
main figure p{
	color:dimgrey;
	font-size: 1.1em;
	margin-top: -50px;
	padding:25px;
}
main figure img{ 

	max-width: 250px;
	height:175px;
	box-shadow: 1px 1px 1px 1px rgb(47, 47, 47);
	border-radius: 40%;
}
main figure h2{
	font-weight: bold;
	color: rgb(0, 0, 0);
	padding:10px;
	font-size: 1.5em;
}

/* MAIN */ 

/* SECTION 2 */ 
section h2{
	margin-top: 100px;
	
}

section.contenu2{
	grid-area:contenu2;
	background-color: #00b551;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 1.5em;
	color: rgb(0, 0, 0);
	font-family: 'Source Serif Pro', serif;
	border:#e5ee3c 3px solid;
}

.calltoaction2{
width:75%;
margin:auto;
}
.contenu2 .calltoaction2 form input{
	background-color: #e5ee3c;
	margin-bottom: 25px;;
	padding:15px;
	border-radius: 40%;
	font-size: 1.4em;
		-webkit-animation-name: bounceInDown;
		animation-name: bounceInDown;
		-webkit-animation-duration: 2s;
		animation-duration: 2s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		}
		@-webkit-keyframes bounceInDown {
		0%, 60%, 75%, 90%, 100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		}
		
		0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0);
		}
		
		60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
		}
		
		75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
		}
		
		90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
		}
		
		100% {
		-webkit-transform: none;
		transform: none;
		}
		}
		
		@keyframes bounceInDown {
		0%, 60%, 75%, 90%, 100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		}
		
		0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0);
		}
		
		60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0);
		}
		
		75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0);
		}
		
		90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
		}
		
		100% {
		-webkit-transform: none;
		transform: none;
		}
		} 
	

	
.calltoaction2{
	width:75%;


			
}
.calltoaction2 h2 {

	padding: 25px;
	font-size: 1.3em;
	
	
}
.contenu2 .calltoaction2 p{
	font-size: 1.1em ;
	padding: 15px;

	
	
}
/* FIN DE SECTION 2 */ 

/* FOOTER */
footer{		
	grid-area: footer;
	background-color: rgb(17, 16, 16);
	text-align: center;
	font-size: 1.2em;
	padding:15px;

	/*border: 2px solid black;*/

}

footer cite{
	margin:15px;
	font-family: 'colibri','Lora', serif;
	color: white;
	text-align: center;
}
p.copyright{
	color: #ffffff;
}
/* FIN DE FOOTER */