@charset "UTF-8";
/* CSS Document */

*{
	margin:0;
	padding:0;
}

html{
	height:100%;
	width:100%;
	font-size:62.5%;
}

a{
	text-decoration:none;
	/*color:#C1272D;*/
	color:#00A995;
}

html body{
	font-family:"Lato", sans-serif;
	color:black;
}

body{
	height:100%;
	width:100%;
	background-color: rgb(240,240,240);
	font-family:"Lato", sans-serif;
	font-weight:300;
}

/*head***************************************
********************************************
*******************************************/

/*header************************************/

header{
	width:100%;
	height:100%;
	/*border-bottom:2px solid rgb(200,200,200);*/
	/*background-color: rgb(240,240,240);*/
	background-color:#00A995;
	position:fixed;
	top:0;
	z-index:100;
	transition-duration:1s;
}

header figure{
	text-align:center;
	margin-top:10%;
	transition-duration:1s;
}

header figure img{
	width:17rem;
	height:auto;
	transition-duration:1s;
}

header figure h1{
	font-weight:900;
	font-size:6rem;
	font-style:italic;
	text-transform:uppercase;
	color:rgb(60,60,60);
	text-align:center;
	transition-duration:1s;
}

header h2{
	text-align:center;
	font-size:3rem;
	font-weight:300;
	color:rgb(60,60,60);
	margin-top:4rem;
}

/*animation logo************************************/
/*
@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 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: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  25% {
    opacity: 1;
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
            transform: scale3d(1.5, 1.5, 1.5);
  }

  50% {
  	opacity:1;
    transform:rotateX(-90deg);	
	transform-origin:bottom;

	-webkit-transform:rotateX(-90deg);
	-webkit-transform-origin:bottom;
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

header figure img{
	-webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1;
}
*/

@keyframes wink{
  0% {
    transform:rotateX(0deg);
	transform-origin:bottom;

	-webkit-transform:rotateX(0deg);
	-webkit-transform-origin:bottom;
  }

  50% {
    transform:rotateX(-90deg);	
	transform-origin:bottom;

	-webkit-transform:rotateX(-90deg);
	-webkit-transform-origin:bottom;
  }

  100% {
    transform:rotateX(0deg);
	transform-origin:bottom;

	-webkit-transform:rotateX(0deg);
	-webkit-transform-origin:bottom;
  }
}

header figure img{
	-webkit-animation-name: wink;
    animation-name: wink;
   
    -webkit-animation-duration: 0.25s;
    animation-duration: 0.25s;
   
    -webkit-animation-delay: 2s;
    animation-delay: 2s;

    -webkit-animation-iteration-count: 2;
    animation-iteration-count: 2;

    transition-duration:0.25s;
}
/*
header figure img:hover{
	-webkit-animation-name: wink;
    animation-name: wink;
    
    -webkit-animation-duration: 0.25s;
    animation-duration: 0.25s;

    -webkit-animation-iteration-count: 2;
    animation-iteration-count: 2;
}
*/

header figure img:hover{
	transform:rotateX(-90deg);	
	transform-origin:bottom;
	transition-duration:0.25s;
}

/*infos**************************************/

.info{
	position:absolute;
	top:0;
	padding:1rem 0 0 0.5rem;
	width:2rem;
}

.txt-info{
	display:block;
	position:absolute;
	left:0;
	width:22rem;
	font-size:1.5rem;
	font-weight:400;
	background-color:#00A995;
	padding:1rem;
	text-align:justify;
	/*color:rgb(60,60,60);*/	
    color:rgb(240,240,240);
	transform:translateX(-300px);
	transition-duration:0.3s;
    transition-timing-function:ease-out;
    animation-fill-mode:none;
}

.info span:hover span{
	transform:translateX(0px);
}

.txt-info img{
	width:32px;
	height:auto;
	vertical-align:middle;
	margin:0 0 0 1rem;
}


/*navigation*****************************/

header nav{
	margin-top:8rem;
	text-align:center;
	transition-duration:1s;
}

header nav ul li{
	list-style-type:none;
	display:inline-block;
	margin:3rem;
	transition-duration:1s;
}

header nav ul li a{
	font-weight:700;
	font-size:2rem;
	text-transform:uppercase;
	width:15rem;
	/*border:solid 5px #C1272D;*/
	/*border:solid 5px #00A995;*/
	border:solid 5px rgb(240,240,240);
	/*background-color: rgb(240,240,240);*/
	background-color:#00A995;
	color:rgb(240,240,240);
	padding:0.5rem;
}

header nav ul li a:hover{
	/*color:white;*/
	color:#00A995;
	/*background-color:#C1272D;*/
	/*background-color: #00A995;*/
	background-color:rgb(240,240,240);
	transition-duration:0.3s;
}

.waypointMenuLinks{
	font-weight:700;
	font-size:1.5rem;
	text-transform:uppercase;
	width:15rem;
	/*border:solid 3px #C1272D;*/
	/*border:solid 3px #00A995;*/
	border:solid 3px rgb(240,240,240);
	/*background-color: rgb(240,240,240);*/
	background-color:rgb(240,240,240);
	color:#00A995;
	padding:0.5rem;
}

header nav ul li ul{
	display:none;	
	position:absolute;
	/*border:solid 5px #00A995;*/
	border:solid 5px rgb(240,240,240);
	/*background-color:rgb(240,240,240);*/
	background-color:#00A995;
	margin-top:0.5rem;
}

header nav ul li:hover ul{
	display:block;
}

header nav ul li:hover ul li{
	display:block;
	margin:0.8rem 0 1.6rem 0;
	text-align:left;
}

header nav ul li:hover ul li:last-child{
	margin:0.8rem 0 0.75rem 0;
}

header nav ul li ul li a{
	font-size:1.65rem;
}

header nav ul li:hover ul li a{
	border:none;
	margin:0;	
	padding:0.8rem 0.5rem 0.75rem 0.5rem;
}

@keyframes Upup{
  0% {
    transform:translateY(0rem);
	transform-origin:bottom;

	-webkit-transform:translateY(0rem);
	-webkit-transform-origin:bottom;
  }

  50% {
    transform:translateY(-2rem);	
	transform-origin:bottom;

	-webkit-transform:translateY(-2rem);
	-webkit-transform-origin:bottom;
  }

  100% {
    transform:translateY(0rem);
	transform-origin:bottom;

	-webkit-transform:translateY(0rem);
	-webkit-transform-origin:bottom;
  }
}

#ancre-bottom:hover{
	width:4rem;
	height:auto;
	position:fixed;
	bottom:0;
	right:0;
	margin:0 2rem 2rem 0;
		
	-webkit-animation-name: Upup;
    animation-name: Upup;
   
    -webkit-animation-duration: 1s;
    animation-duration: 1s;

    -webkit-animation-iteration-count: 2;
    animation-iteration-count: 2;
}

/*navigation au scroll**************************/

.fixHeader{
	/*width:100%;
	height:80%;
	border-bottom:2px solid rgb(200,200,200);
	background-color: rgb(240,240,240);
	position:fixed;
	top:0;
	z-index:100;*/
	
	width:100%;
	height:11rem;
	transition-duration:1s;
	/*border-bottom:2px solid rgb(200,200,200);*/
	/*background-color: rgb(240,240,240);*/
	background-color:#00A995;
	position:fixed;
	top:0;
	z-index:100;
}

.fixHeaderFigure{
	/*text-align:center;
	margin-top:20%;*/
	
	text-align:center;
	margin-top:0;
	transition-duration:1s;
}

.fixHeaderFigureImg{
	/*width:17rem;
	height:auto;*/

	width:4rem;
	height:auto;
	margin-top:1rem;
	transition-duration:0.25s;
}

.fixHeaderFigureH1{
	/*font-weight:900;
	font-size:6rem;
	font-style:italic;
	text-transform:uppercase;
	color:rgb(60,60,60);
	text-align:center;*/

	font-weight:900;
	font-size:2rem;
	font-style:italic;
	text-transform:uppercase;
	color:rgb(60,60,60);
	text-align:center;
	transition-duration:1s;
}

.fixHeaderH2{
	display:none;
}

.fixHeaderNav{
	/*margin-top:8rem;
	text-align:center;*/

	margin-top:1rem;
	text-align:center;
	transition-duration:1s;
}

.fixHeaderNavUlLi{
	/*list-style-type:none;
	display:inline-block;
	margin:3rem;*/

	list-style-type:none;
	display:inline-block;
	margin:1rem;
	transition-duration:1s;
}

.fixHeaderNavUlLiA{
	/*font-weight:700;
	font-size:2rem;
	text-transform:uppercase;
	width:15rem;
	border:solid 5px white;
	background-color:#00A995;
	color:white;
	padding:0.5rem;*/

	font-weight:700;
	font-size:1.5rem;
	text-transform:uppercase;
	width:15rem;
	/*border:solid 3px #C1272D;*/
	/*border:solid 3px #00A995;*/
	border:solid 3px rgb(240,240,240);
	/*background-color: rgb(240,240,240);*/
	background-color:#00A995;
	padding:0.5rem;
}

.fixHeaderNavUlLiUl{
	/*border:solid 3px #00A995;*/
	border:solid 3px rgb(240,240,240);
}


.fixHeaderNavUlLiUlLiA{
	font-size:1.23rem;
}

.fixAncre-Bottom{
	width:4rem;
	height:auto;
	position:fixed;
	bottom:0;
	right:0;
	margin:0 2rem 2rem 0;
	transition-duration:1s;
	background-color:rgb(240,240,240);
	padding:0 0.5rem 0 0.5rem;
}

/*fin head**********************************
********************************************
*******************************************/

/*veilles***********************************
********************************************
*******************************************/

/*probleme du header qui mange le debut********/

@media screen and (min-width:1681px) and (max-width:1920px){

	#debut-veilles{
		margin-top:80%;
	}
	
}

@media screen and (min-width:1601px) and (max-width:1680px){

	#debut-veilles{
		margin-top:85%;
	}
	
}

@media screen and (min-width:1441px) and (max-width:1600px){

	#debut-veilles{
		margin-top:90%;
	}
	
}

@media screen and (min-width:1281px) and (max-width:1440px){

	#debut-veilles{
		margin-top:100%;
	}
	
}

@media screen and (min-width:1025px) and (max-width:1280px){

	#debut-veilles{
		margin-top:110%;
	}
	
}

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

	#debut-veilles{
		margin-top:140%;
	}
	
}



/*fin probleme du header qui mange le debut********/

#debut-veilles{
	width:30%;
	height:auto;
	margin-left:35%;
	margin-right:35%;
}

.categories{
	width:100%;
	height:auto;
}

h3{
	font-weight:400;
	font-size:3rem;
	text-transform:uppercase;;
	text-align:center;
	/*color:#C1272D;*/
	color: #00A995;
	width:100%;
	margin-top:10rem;
}

.article{
	width:100%;
	height:auto;
	text-justify:inter-word;
	font-weight:400;
	font-size:1.8rem;
	line-height:2.6rem;
	margin-top:10rem;
	color:rgb(60,60,60);
	padding-bottom:10rem;
	border-bottom:solid 1px rgb(60,60,60);
}

h4{
	font-weight:700;
	font-size:2rem;
	margin-bottom:2rem;
}

.images{
	width:100%;
	height:auto;
	margin-top:2rem;
}

.images-images{
	width:100%;
	height:auto;
	margin-bottom:2rem;
}

article figure figcaption{
	font-style:italic;
	font-size:1.6rem;
	margin-bottom:2rem;
}

.article a{
	color:rgb(60,60,60);
	font-weight:700;
	border-bottom:1px solid rgb(60,60,60);
}

.article a:hover{
	/*color:#C1272D;*/
	color:#00A995;
	/*border-bottom:1px solid #C1272D;*/
	border-bottom:1px solid #00A995;
	transition-duration:0.25s;
}


/*contact***********************************
********************************************
*******************************************/

#contact{
	width:100%;
	text-align:center;
	background-color:#00A995;
	padding-top:1rem;
}

#contact section article h3{
	margin-bottom:3rem;
	color:rgb(240,240,240);
}

#contact section article p{
	width:30%;
	height:auto;
	margin-left:35%;
	margin-right:35%;
	margin-bottom:5rem;
	color:rgb(240,240,240);
}

#contact section article a{
	font-weight:700;
	font-size:2rem;
	text-transform:uppercase;
	/*color:#C1272D;*/
	color:rgb(240,240,240);
	/*border:solid 5px #C1272D;*/
	border:solid 5px rgb(240,240,240);
	background-color:#00A995;
	padding:0.5rem;
}

#contact section article a:hover{
	color:#00A995;
	/*background-color:#C1272D;*/
	background-color:rgb(240,240,240);
	transition-duration:0.25s
}

/*fin contact***********************************
********************************************
*******************************************/

/*medias queries tablette***********************************
********************************************
*******************************************/

@media screen and (min-width:454px) and (max-width:805px){

@keyframes splash-header{
	0%{
		height:100%;
		width:100%;		
	}

	100%{
		height:6rem;
		width:100%;
	}
}

	header{
		-webkit-animation-name: splash-header;
		animation-name: splash-header;

		-webkit-animation-duration: 5s;
		animation-duration: 5s;

		animation-fill-mode: forwards;
	}

@keyframes splash-figure{
	0%{	
		width:100%;
		margin:0%;
		padding-top:30%;
	}

	80%{
		width:100%;
		margin:0%;
	}

	100%{
		width:25%;
		margin:1rem 37.5% 0 37.5%;
	}
}

	header figure{		
		-webkit-animation-name: splash-figure;
		animation-name: splash-figure;

		-webkit-animation-duration: 5s;
		animation-duration: 5s;

		-webkit-animation-iteration-count:1;
		animation-iteration-count:1;

		transition-duration:5s;

		animation-fill-mode: forwards;
	}

@keyframes splash-img{
	0%{	
		width:17rem;
		height:auto;

		transform:rotateX(0deg);
		transform-origin:bottom;

		-webkit-transform:rotateX(0deg);
		-webkit-transform-origin:bottom;
	}

	5%{
		transform:rotateX(-90deg);	
		transform-origin:bottom;

		-webkit-transform:rotateX(-90deg);
		-webkit-transform-origin:bottom;
	}

	15%{
		transform:rotateX(0deg);
		transform-origin:bottom;

		-webkit-transform:rotateX(0deg);
		-webkit-transform-origin:bottom;
	}

    25% {
		transform:rotateX(-90deg);	
		transform-origin:bottom;

		-webkit-transform:rotateX(-90deg);
		-webkit-transform-origin:bottom;
    }

	100%{
		width:3rem;
		height:auto;

	    transform:rotateX(0deg);
		transform-origin:bottom;

		-webkit-transform:rotateX(0deg);
		-webkit-transform-origin:bottom;
	}
}

	header figure img{
		-webkit-animation-name: splash-img;
		animation-name: splash-img;

		-webkit-animation-duration: 5s;
		animation-duration: 5s;

		-webkit-animation-iteration-count:1;
		animation-iteration-count:1;

		transition-duration:5s;

		animation-fill-mode: forwards;
	}
	
@keyframes splash-h1{
	0%{	
		font-size:6rem;
	}

	100%{
		font-size:2rem;
	}
}	

	h1{
		-webkit-animation-name: splash-h1;
		animation-name: splash-h1;

		-webkit-animation-duration: 5s;
		animation-duration: 5s;

		-webkit-animation-iteration-count:1;
		animation-iteration-count:1;

		transition-duration:5s;

		animation-fill-mode: forwards;

		text-align:left;
	}

@keyframes splash-h2{
	0%{	opacity:100;
	}

	100%{
		opacity:0;
	}
}	

	h2{
		-webkit-animation-name: splash-h2;
		animation-name: splash-h2;

		-webkit-animation-duration: 5s;
		animation-duration: 5s;

		transition-duration:5s;

		animation-fill-mode: forwards;
	}

	.info{
		position:absolute;
		top:0;
		padding:1.3rem 0 0 0.5rem;	
		width:2rem;
		height:auto;
	}

	.info-active{
		width:100%;
	}

	.txt-info{
		display:none;
		width:inherit;
		height:auto;
		position:absolute;
		transform:translateX(0px);
		margin-top:1.2rem;
		text-align:center;
		padding:2rem;
	}

	.txt-info-active{
		display:block;
		position:absolute;
	}

/*burger*************************************************/

	.burger span{
		width:40px;
		height:7px;
		background:white;
		position:absolute;
		right:0;
		margin:1.5rem 1rem 0 0;

		transition-duration:0.3s;
	}

	.burger span:nth-child(1){
		top:0px;
		transition-duration:0.3s;
	}
		
	.selected1{
		transform:rotate(-45deg) translate(-8px,9px);
		transition-duration:0.3s;
	}	

	.burger span:nth-child(2){
		top:12px;
		transition-duration:0.3s;
	}

	.selected2{
		opacity:0;
		transition-duration:0.3s;
	}

	.burger span:nth-child(3){
		top:24px;
		transition-duration:0.3s;
	}
	
	.selected3{
		transform:rotate(45deg) translate(-8px,-9px);
		transition-duration:0.3s;
	}

	.nav{
		display:none;
	}

	.nav-selected{
		display:block;
		position:fixed;
		background-color:#00A995;
		width:100%;
		height:100%;
		margin-top:-7rem;
	}
	
	.fixHeaderNavUlLi-selected{
		display:block;
		width:100%;
		margin:8rem 0 8rem 0;
	}
	
	header nav ul li:hover ul{
		display:none;
	}

	header nav ul li:hover ul li{
		display:none;
	}
		
}


/*medias queries mobile***********************************
********************************************
*******************************************/


@media screen and (min-width:150px) and (max-width:453px){  /*453 pour un bug*/

@keyframes splash-header{
	0%{
		height:100%;
		width:100%;
		padding-top:30%;
	}

	100%{
		height:6rem;
		width:100%;
	}
}

	header{
		-webkit-animation-name: splash-header;
		animation-name: splash-header;

		-webkit-animation-duration: 5s;
		animation-duration: 5s;

		animation-fill-mode: forwards;
	}

@keyframes splash-figure{
	0%{	
		width:100%;
		margin:0%;
	}

	80%{
		width:100%;
		margin:0%;
	}

	100%{
		width:25%;
		margin:1rem 37.5% 0 37.5%;
	}
}

	header figure{		
		-webkit-animation-name: splash-figure;
		animation-name: splash-figure;

		-webkit-animation-duration: 5s;
		animation-duration: 5s;

		-webkit-animation-iteration-count:1;
		animation-iteration-count:1;

		transition-duration:5s;

		animation-fill-mode: forwards;
	}

@keyframes splash-img{
	0%{	
		width:17rem;
		height:auto;

		transform:rotateX(0deg);
		transform-origin:bottom;

		-webkit-transform:rotateX(0deg);
		-webkit-transform-origin:bottom;
	}

	5%{
		transform:rotateX(-90deg);	
		transform-origin:bottom;

		-webkit-transform:rotateX(-90deg);
		-webkit-transform-origin:bottom;
	}

	15%{
		transform:rotateX(0deg);
		transform-origin:bottom;

		-webkit-transform:rotateX(0deg);
		-webkit-transform-origin:bottom;
	}

    25% {
		transform:rotateX(-90deg);	
		transform-origin:bottom;

		-webkit-transform:rotateX(-90deg);
		-webkit-transform-origin:bottom;
    }

	100%{
		width:3rem;
		height:auto;

	    transform:rotateX(0deg);
		transform-origin:bottom;

		-webkit-transform:rotateX(0deg);
		-webkit-transform-origin:bottom;
	}
}

	header figure img{
		-webkit-animation-name: splash-img;
		animation-name: splash-img;

		-webkit-animation-duration: 5s;
		animation-duration: 5s;

		-webkit-animation-iteration-count:1;
		animation-iteration-count:1;

		transition-duration:5s;

		animation-fill-mode: forwards;
	}
	
@keyframes splash-h1{
	0%{	
		font-size:6rem;
	}
		
	100%{
		font-size:2rem;
	}
}	

	h1{
		-webkit-animation-name: splash-h1;
		animation-name: splash-h1;

		-webkit-animation-duration: 5s;
		animation-duration: 5s;

		-webkit-animation-iteration-count:1;
		animation-iteration-count:1;

		transition-duration:5s;

		animation-fill-mode: forwards;

		text-align:left;
	}

@keyframes splash-h2{
	0%{	opacity:100;
	}

	100%{
		opacity:0;
	}
}	

	h2{
		-webkit-animation-name: splash-h2;
		animation-name: splash-h2;

		-webkit-animation-duration: 5s;
		animation-duration: 5s;

		transition-duration:5s;

		animation-fill-mode: forwards;
	}
	
	.info{
		position:absolute;
		top:0;
		padding:1.3rem 0 0 0.5rem;	
		width:2rem;
		height:auto;
	}

	.info-active{
		width:100%;
	}

	.txt-info{
		display:none;
		width:inherit;
		height:auto;
		position:absolute;
		transform:translateX(0px);
		margin-top:1.2rem;
		text-align:center;
		padding:1rem;
	}

	.txt-info-active{
		display:block;
		position:absolute;
	}



/*burger*************************************************/

	.burger span{
		width:40px;
		height:7px;
		background:white;
		position:absolute;
		right:0;
		margin:1.5rem 1rem 0 0;

		transition-duration:0.3s;
	}

	.burger span:nth-child(1){
		top:0px;
		transition-duration:0.3s;
	}
		
	.selected1{
		transform:rotate(-45deg) translate(-8px,9px);
		transition-duration:0.3s;
	}	

	.burger span:nth-child(2){
		top:12px;
		transition-duration:0.3s;
	}

	.selected2{
		opacity:0;
		transition-duration:0.3s;
	}

	.burger span:nth-child(3){
		top:24px;
		transition-duration:0.3s;
	}
	
	.selected3{
		transform:rotate(45deg) translate(-8px,-9px);
		transition-duration:0.3s;
	}

	.nav{
		display:none;
	}

	.nav-selected{
		display:block;
		position:fixed;
		background-color:#00A995;
		width:100%;
		height:100%;
		margin-top:-11rem;
	}
	
	.fixHeaderNavUlLi-selected{
		display:block;
		width:100%;
		margin:8rem 0 8rem 0;
	}
	
	header nav ul li:hover ul{
		display:none;
	}

	header nav ul li:hover ul li{
		display:none;
	}
		


/*reduction du titre pour garder en une ligne******************************/

@media screen and (min-width:150px) and (max-width:375px){
	
@keyframes splash-figure{
	0%{	
		width:100%;
		margin:0%;
	}

	80%{
		width:100%;
		margin:0%;
	}

	100%{
		width:25%;
		margin:1rem 37.5% 0 37.5%;
	}
}

	header figure{		
		-webkit-animation-name: splash-figure;
		animation-name: splash-figure;

		-webkit-animation-duration: 5s;
		animation-duration: 5s;

		-webkit-animation-iteration-count:1;
		animation-iteration-count:1;

		transition-duration:5s;

		animation-fill-mode: forwards;
	}

@keyframes splash-h1{
	0%{	
		font-size:6rem;
	}

	100%{
		font-size:1.5rem;
	}
}	

	h1{
		-webkit-animation-name: splash-h1;
		animation-name: splash-h1;

		-webkit-animation-duration: 5s;
		animation-duration: 5s;

		-webkit-animation-iteration-count:1;
		animation-iteration-count:1;

		transition-duration:5s;

		animation-fill-mode: forwards;

		text-align:left;
	}

}