@charset "utf-8";

/*code pour RESET le navigateur par Eric MEYER */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*fin du reset*/

header{
	/*overflow:hidden;*/
			}


.
/* on prédéfinit des classes qui permettent d'aligner des blocs de différentes tailles */
/*grille*/
.row{
	overflow:hidden; 
	margin-right:-15px;
	margin-left:-15px;
			}

	
.w100{
	width:100%;
}

.w40{
	width:40%;
}

.w50{
	width:50%;
}

.w33{
	width:33.33%;
}
.w25{
	width:25%;
}

.w20{width:20%;
}

.w16{width:16.66%;
}

.w11{
	width:11.11%;
}


.w66{
	width:66.66%;
}

.w80{
	width:80%;	
}



.w50,.w40, .w66,.w33,.w25,.w20,.w80,.w16,.w11{
	float:left;
	box-sizing:border-box;
}

.w100,.w40, .w66,.w33,.w25,.w20,.w80,.w16,.w11{
	padding-left:15px;
	padding-right:15px;
	box-sizing:border-box;
	padding-top:50px;
	}
	
.w50{
	padding-left:15px;
	padding-right:15px;
	box-sizing:border-box;
	padding-top:35px;
		}


/*custom page*/

html {font-size:100%;}


#player {
  height: 0;
  width: 0
}

/*
.speaker {
  background-image: url("image/notemusic2.png");
  background-repeat: no-repeat;
  background-size: 200%;
  background-position: 100% 0;
  height: 64px;
  width: 60px;
  cursor: pointer;
  display: block;
  position: relative;
  top: 150px;
  left: 200px;
  display: block;
  border: solid red;
}

.speakerplay {
  background-position: 0 0;
}
*/

#merci{
	width:100%;
	padding-top:50px;
	padding-bottom:50px;
	text-align:center;	
}

#merci p{
	font-size:1.5rem;
}

.trigram{
	display: block;
	position:fixed;
	top:2px;
	left:20px;
	z-index:1;
    width: 16px;
    height: 0;
    -webkit-box-shadow: 1px 10px 1px 1px rgb(120,120,120),1px 16px 1px 1px rgb(120,120,120),1px 22px 1px 1px rgb(120,120,120);
    box-shadow: 0 10px 0 1px rgb(120,120,120),0 16px 0 1px rgb(120,120,120),0 22px 0 1px rgb(120,120,120);
	-moz-box-shadow: 1px 10px 1px 1px rgb(120,120,120),1px 16px 1px 1px rgb(120,120,120),1px 22px 1px 1px rgb(120,120,120);
	color:rgb(120,120,120);
	cursor:pointer;
}
.trigram p{
opacity:0;
color:white;
}

#menuaccueil{
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	font-size:1.1rem;
	/*font-size:30px;*/
	color:white;
	cursor:pointer;
	position:fixed;
	top:15px;
	left:20px;
	z-index:1;
	display:none;
}

.closebtn{
	font-size:2rem !important;
}



#sectionportfolio{
	width:100%;
	min-height:100vh;
	margin-bottom:0px;
	background-image:url("media/papillon.gif");
	background-size:100vw auto;
	background-repeat:no-repeat;
	padding-bottom:0px;
	}

#portfolio{
	width:100%;
	margin-bottom: 50px;
	/*height:120vh;*/	
}

#contenttravaux{
	background-image:url("images/fondtexturepapier1bleu.jpg");
	/*background-size:100vw auto;*/
	background-size: cover;
	background-repeat:no-repeat;
}

#contenttravaux .w20, #contentexploration .w20{
	padding-top:100px;	
}

#contenttravaux .w16, #contentexploration .w16{
	padding-top:100px;	
}

#contentexploration{
	background-image:url("images/fondexploration.jpg");
	background-size: cover;
	background-repeat:no-repeat;
}

#pictovide{
	opacity:0;
}
#pictoanim{
	position: absolute;
 /* En fixant la distance avec le bas à 0, on force le contenu à être aligné vers le bas */
	bottom: 0;
}

/*#contentexploration{
	background-image:url("images/fondtexturepapier3a.jpg");
	background-size:100vw auto;
	background-repeat:no-repeat;
}*/

#titretravaux, #titreexploration{
	padding-top:70px;
	padding-left:30px;
	font-size:1.2rem;
	letter-spacing: 0.1rem;
	text-transform:uppercase;
	/*padding-bottom:10px;*/
	/*font-family: 'Yanone Kaffeesatz', sans-serif;*/
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	font-weight:bold;
	padding-bottom:10px;
	
}

#titretravaux{
	color:white;
}

	/*text-align:right;
	padding-right:30px;*/
}


#ct{
	width:100%;
	margin:0 auto;
	/*border:solid thin blue;*/
	
	/*background-color:white;*/
	/*overflow:hidden;*/
	padding-bottom:20px;
}

#titresignaletique h1, #titrepedagogique h1, #titreparticuliers h1, #titrelogo h1, #titrewebdesign h1, #titreanimation h1{
	font-size:1.3rem;
	text-align:left;
	line-height: 1.4rem;
	text-transform:none;
	padding-top:20px;
	padding-bottom:20px;
	padding-left:50px;
	width:80%;
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
    color:rgb(130,130,130);   
}

.presentation{
	display:inline-block;
	padding-left:50px;
	width:70%;
	color:rgb(180,180,180);
	font-size:1rem;
	line-height: 1.1rem;
	padding-bottom:20px;
}

h1{
	text-align:center;
	font-size:2rem;
	text-transform:uppercase;
	padding-top:50px;
	padding-bottom:20px;
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	color:#75D2DC;
	/*color:rgb(130,130,130);*/
}

h2{
	font-size:1rem;
	/*font-size:0.8rem;*/
	line-height: 1.2rem;
	letter-spacing: 0.1rem;
	text-transform:uppercase;
	padding-top:20px;
	/*padding-bottom:10px;*/
	/*font-family: 'Yanone Kaffeesatz', sans-serif;*/
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	/*font-family:Arial;*/
	/*font-weight:bold;*/
	/*color:rgb(180,180,180);*/
	color:rgb(130,130,130);
}

h3{
	/*font-size:0.7rem;*/
	font-size:14px;/*pour les vieux navigateurs qui ne lisent pas les rem*/
	font-size:0.85rem;
	/*font-weight:bold;*/
	padding-top:15px;
	padding-bottom:1px;
	font-family: 'Anaheim', sans-serif, Arial;
	color:rgb(180,180,180);
}
#presta2 h3{
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	font-size:1rem;
	/*font-size:0.8rem;*/
	color:white;
	line-height: 1.2rem;
	letter-spacing: 0.1rem;
	text-transform:uppercase;
	padding-bottom:10px;
	text-align:center;
}

h4{
	/*font-size:0.7rem;*/
	font-size:14px;/*pour les vieux navigateurs qui ne lisent pas les rem*/
	font-size:0.85rem;
	letter-spacing: 0.05rem;
	/*font-weight:bold;*/
	padding-top:0px;
	padding-bottom:15px;
	/*font-family: 'Anaheim', sans-serif, Arial;*/
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	color:rgb(50,50,50);
	/*text-transform:uppercase;	*/
	/*color:#75D2DC;*/
	text-align:center;
}

#presta2 .w33{
	padding-top:0px;
}

p{
	margin-top:5px; /*pour éviter que le texte soit collé sous l'image */
	font-family: 'Anaheim', sans-serif;
	/*font-family: Helvetica, Arial, sans-serif;*/
	/*font-size:0.7rem;
	line-height: 1.1rem;*/
	font-size:14px;/*pour les vieux navigateurs qui ne lisent pas les rem*/
	font-size:0.85rem;
	line-height:18px;
	line-height:1.2rem;
	color:rgb(130,130,130);
}

section{
	position:relative;
}

.w33,.w66,.w80{
	overflow:hidden;
}

.bloctexte{
padding-right:10px;
padding-bottom:50px;
position:absolute;/*pour pouvoir aligner le texte en bas*/
bottom:0px;/*pour pouvoir aligner le texte en bas*/
/*background-color:blue;*/
/*width:30%;/*comme on passe en position absolute, on sort du flux, du coup sort de la boite, je retablis la largeur*/
width:15%;
}

#nom{
	position:fixed;
	left:10%;	
	z-index:5;
	padding:5px;
}

#nom p{
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	font-size:1rem;
	letter-spacing:8px;
	color:white;
}

.tab li p{
	margin-top:0;/*pour éviter décalage des images qui apparaissent au survol*/
}

.red{
	color: red;
}
#guepard{	
	position:fixed;
	top:-5px;
	left:150px;
	/*background-image:url("media/guepard.gif");
	background-size:150px auto;
	background-repeat:no-repeat;*/
	filter: grayscale(100%);
	height:200px;	
	z-index:3;	
}
#guepard img {
	width:100px;
}

#insectebleu{
	position:absolute;
	width:15%;
	top:25%;
	right:8%;		
	z-index:4;
	opacity:0.7;
	filter: grayscale(55%);
	transform:rotate(-10deg);
	transition: all 0.5s ease;
}

#insectebleu:hover{
	transform:rotate(-80deg);
}

#panthere{
	padding-top:0px;
	width:100%;
	height:100vh;	
	margin:0 auto;	
}

/*#titre{
	position:absolute;
	top:60vh;
	right:17vw;
	opacity:0;
	transition:all 3s ease;
}*/

#titre{
	position:absolute;
	top:65vh;
	right:17vw;
	opacity:0;
	transition:all 3s ease;
}

#titre p, #titre h1{
	/*font-family: 'Barlow Semi Condensed', sans-serif, Arial;*/
	font-size:1.2rem;
	letter-spacing:0.6rem;
	color:rgb(160,160,160);
	padding-top:8px;
	/*font-weight:bold;*/
	text-transform:uppercase;
	
	/*
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-size:1rem;
	letter-spacing:0.5rem;
	color:rgb(160,160,160);
	padding-top:8px;
	
	text-transform:uppercase;*/
}

#titre p span, #titre h1 span{
	color:#75D2DC;
	text-transform:uppercase;
}

#sectionaccueil:hover #titre{
	opacity:1;
}
	
	
.ef2  img{
  display: block;
  max-width:70%;
  position: relative;
   /*filter: grayscale(80%);/*en noir et blanc*/   
   filter: hue-rotate(-180deg);/*on change la couleur*/   
     -webkit-transition: all 4s;
  transition: all 4s;
  -webkit-transform:  scale(0.9);
  -ms-transform:  scale(0.9);
  transform:  scale(0.9);
  margin: 0 auto;
  opacity:0.4; 
 }
 
.ef2:hover img{
	 /*filter: grayscale(0%);/*on remet la couleur*/
	 filter: hue-rotate(0deg);/*on change la couleur*/
	  -webkit-transform: scale(1) ;
  -ms-transform: scale(1) ;
  transform: scale(1) ;
  opacity:1; 
    }

#accueil{
	padding-left:30px;
	width:50% !important;
	margin: 0 auto;
}

#hello,#contact, #liens, #mentions{
	padding-top:70px;
	padding-left:30px;
	width:33.33%;
	}

#hello{
	padding-bottom:30px;
}


#hello{
	background: -moz-linear-gradient(left, rgb(50,50,50), rgba(0,255,0,0));
	background: -webkit-linear-gradient(left, rgb(50,50,50), rgba(0,255,0,0));
	background: -ms-linear-gradient(left, rgb(50,50,50), rgba(0,255,0,0));
	background: -o-linear-gradient(left, rgb(50,50,50), rgba(0,255,0,0));
}




#accueil; #hello, #sectioncontact, #liens, #mentions{
	padding-bottom:50px;
	overflow:hidden;
	box-sizing:border-box;
}
#hello p, #presta2 p, #hellomobile p, #contact p{
	font-size:14px;/*pour les vieux navigateurs qui ne lisent pas les rem*/
	font-size:0.85rem;
	line-height:1.2rem;	
	color:white;
	margin-bottom:20px;
}




#sectionportfolio h2, #accueil h2, #presta2 h2, #hello h2, #bichromie h2, #contact h2, #liens h2{
	font-size:1.5rem;
	letter-spacing: 0.1rem;
	text-transform:uppercase;
	/*padding-bottom:10px;*/
	/*font-family: 'Yanone Kaffeesatz', sans-serif;*/
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	color:white;	
	font-weight:bold;
	padding-bottom:20px;
}

#sectionportfolio #titreexploration, #liens h2, #mentions h2{
	color:#75D2DC;
}

/*#portfolio h2{
	display:none;
}*/

#salamblanche{
	min-height:50vh;
	width:100vw;
	background-image:url("images/salamblanche.jpg");
	/*background-image:url("images/moijunglebleu
	line-height:18px;sombrebichromie.jpg");*/
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	background-repeat:no-repeat;
		}
		
#salamblanche2{
	min-height:100vh;
	width:100vw;
	background-image:url("images/salamblanche2.jpg");
	/*background-image:url("images/moijunglebleusombrebichromie.jpg");*/
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	background-repeat:no-repeat;
		}
		
#salambleue{
	min-height:100vh;
	width:100vw;
	background-image:url("images/salambleue.jpg");
	/*background-image:url("images/moijunglebleusombrebichromie.jpg");*/
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	background-repeat:no-repeat;
		}


#apropos1{
	min-height:100vh;
	width:100%;
	background-image:url("images/moijunglebleusombredessin.jpg");
	/*background-image:url("images/moijunglebleusombrebichromie.jpg");*/
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	background-repeat:no-repeat;
		}


.parallax{
	min-height:100vh;
	width:100%;
	background-image:url("images/moijunglebleusombreduo1.jpg");
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	background-repeat:no-repeat;
		}
		
#sectionhellomobile{
		display:none;		
			}

#bichromie{
	min-height:100vh;
	width:100%;
	background-image:url("images/moijunglebleusombrebichromie.jpg");
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	background-repeat:no-repeat;
		}
#aproposmobile{
	min-height:100vh;
	width:100%;
	
	background: -moz-linear-gradient(top, rgba(6, 123, 135,0.50), rgba(0,255,0,0) 50%);
	background: -webkit-linear-gradient(top, rgba(6, 123, 135,0.50), rgba(0,255,0,0) 50%);
	background: -ms-linear-gradient(top, rgba(6, 123, 135,0.50), rgba(0,255,0,0) 50%);
	background: -o-linear-gradient(top, rgba(6, 123, 135,0.50), rgba(0,255,0,0) 50%);	
}		
			
			
#papillonvole{
	position:absolute;
	bottom:-30vh;
	right:0vw;
	width:50%;
	height:85vh;
	/*background-color:black;*/
}			

#presta{
	/*border:solid thin white;*/
	padding:10px;
	background-color:rgba(255,255,255,0.15);
		}

		
#presta2 , #exergue{
	/*border:solid thin white;*/
	/*margin:30px;*/
	padding-top:10vh;
	padding-bottom:5vh;
	padding-left:5vw;
	padding-right:5vw;
	/*background-color:rgba(150,150,150,0.65);*/
	/*background-color:rgba(117,210,220,0.55);*/
	background-color:rgba(7,141,155,0.72);
	overflow: hidden;
	width:85%;
	margin:0 auto;
	border:solid thin rgb(113, 190, 198);
		}



#apropos2{
	padding-top:50px;
}

#liens li{
	display:inline-block;
	padding-left:20px;
	}

	
#liens ul{
	padding-top:10px;
}	
#liens li a{
	text-decoration:none;
	text-align:center;
	/*font-family: 'Saira Condensed', sans-serif;*/
	/*font-size:1.1rem;*/	
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	font-size:0.9rem;
	line-height:1.5rem;	
}

#liens li a:hover{
	color:#75D2DC;
}
		
/*#presta2 .w33{
	background-color:rgba(117,210,220,1);
		}*/

#diots{
	width:50%;
}
.page1{
	padding:0;
	margin:0;
}

#sectioncontact{
	/*height:100vh;*/
	width:100%;
	background-color:#75D2DC;	
}


#CV{
	color:#75D2DC;
}
img{
	max-width:100%;
	/*max-height:500px;*/
	}
	
	#alixH{
		width:70%;
	}
	
figure{
		text-align:center;/*pour centrer les images*/
}

section{
margin:0 auto;
overflow:hidden;
font-size:0;/*pour éviter décalage des images qui apparaissent au survol*/
padding-bottom:50px;
box-sizing:border-box;
	}
	
	
	
figcaption{
	font-size:1rem;
}

#section22, #section25{
	height:120vh;
}


#canvas{
	width:100%;
	/*width:1200px;
	height:800px;*/
}

#planetes{
width:100%;
}

#grue{
width:80%;
}


/*mise en lumière moyen-âge*/
#moyenage{
	background-color:black;
	width:100%;
	text-align:center;
}

#moyenagegif { 
width:50%;
display:inline-block;
margin-bottom:50px;
}

/*faire apparaitre légende au survol de la photo*/
figure,.bloc{
	position:relative;
	display:inline-block;
	overflow:hidden;/*tout ce qui dépasse du bloc figure n'apparait pas*/
		}

		
		
	#menugalerie section{/*moins d'espace entre les sections*/
		margin-bottom:5px;
		margin-top:5px;
		
	}
	
	.sectiongalerie{
		min-height:100vh;
	}

	.sectiongalerie .w20 {
		padding-top:0px;
		position:relative;
	}
	
	 .sectiongalerie .w80 {
		padding-top:0px;
	}
	
#menugalerie .rubrique{	/* texte :"dessins et peintures"*/
	text-align:center;
	font-family: 'Open Sans', sans-serif;
	font-size:1rem;
	line-height: 2rem;
	color:rgb(120,120,120);
	
}			
	
#travo, #explo{
	display:inline;
	}
#travomob, #explomob{
	display:none;	
}

#contenttravaux .legende{
	padding-top:10px;
}
			
 .legende{
	opacity:1;
	color:rgb(140,140,140);
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	font-size:0.9rem;
	line-height:1.6;
	transition:all 0.8s ease;
}

 figure:hover .legende{ /*au survol de figure*/
	opacity:1;
			}

	#contenttravaux	.legende{
		color:white;
	}

			
.zonediapo{/* pour ne pas qu'on voie les vignettes des images de la galerie*/
	display:none;
}


			
	#elephantCNRS{
		padding:0;
	}	
			
.aplat{
	position:absolute; /*ainsi les effets graphiques s'ajusteront à l'espace de l'élement parent également positionné, c'est à dire à celui de figure*/
	bottom:0;
	width:100%;/*pour que la légende s'ajuste à toute la largeur du bloc figure*/
	left:-100%;/*on met ça pour que la légende soit complètement à gauche de l'image 
	et invisible car on a un overflow hidden sur le contenant figure ; elle n'apparaitra que quand on survolera la figure, en demandant left:0*/
	box-sizing:border-box; /*pour éviter gonflement dû au padding*/
	height:100%;
	opacity:0;
	transition:all 0.8s ease;
	background-color:rgb(200,200,200);
}

.bloc2,.bloc222b,.bloc255b{
	position:relative;
	display:inline-block;
}

.aplat2{
	position:absolute; /*ainsi les effets graphiques s'ajusteront à l'espace de l'élement parent également positionné, c'est à dire à celui de figure*/
	bottom:0;
	width:150%;/*pour que la légende s'ajuste à toute la largeur du bloc figure*/
	left:-150%;/*on met ça pour que la légende soit complètement à gauche de l'image 
	et invisible car on a un overflow hidden sur le contenant figure ; elle n'apparaitra que quand on survolera la figure, en demandant left:0*/
	box-sizing:border-box; /*pour éviter gonflement dû au padding*/
	height:100%;
	opacity:0;
	transition:all 0.8s ease;
	background-color:rgb(200,200,200);
	}

	.aplat22b,.aplat25b{
	position:absolute; /*ainsi les effets graphiques s'ajusteront à l'espace de l'élement parent également positionné, c'est à dire à celui de figure*/
	top:0;
	width:0%;
	/*pour que la légende s'ajuste à toute la largeur du bloc figure*/
	left:0%;/*on met ça pour que la légende soit complètement à gauche de l'image 
	et invisible car on a un overflow hidden sur le contenant figure ; elle n'apparaitra que quand on survolera la figure, en demandant left:0*/
	box-sizing:border-box; /*pour éviter gonflement dû au padding*/
	opacity:0;
	transition:all 0.8s ease;
	background-color:rgb(200,200,200);
	/*display:none;*/
	}


/*.bloc{
	background-color:rgb(100,100,100);
	
}
*/



.bloc:hover .aplat{ /*au survol de figure*/
	left:0;
	opacity:1;
			}
			
.bloc2:hover .aplat2{ /*au survol de figure*/
	left:-50%;
	opacity:1;
			}
			
.bloc222b:hover .aplat22b{ /*au survol de figure*/
	left:0;
	opacity:1;
	width:100%;
	/*display:inline-block;*/
			}

		
.bloc255b:hover .aplat25b{ /*au survol de figure*/
	left:0;
	opacity:1;
	width:100%;
	/*display:inline-block;*/
			}			

#espaceheader{
	height:50px;
}

#espaceheader2{
	/*height:100px;*/
margin-bottom:50px;	
}

#chevaux{
	width:500px;
	opacity:0.5;
}

/*ul{
	float:left;
	overflow:hidden;
	position:relative;
	left:50px;
	}
	*/

	/*POUR MENU Principal SANDWICH QUI SE DEPLOIE*/
.sidenav,.sidenavgris {
    height: 100vh; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 2; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    /*background-color:rgb(120,120,120); */
	/*background-image:linear-gradient(#75D2DC, white);*/
	/*background-color:#75D2DC;*/
	overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.sidenav{
	background-image:linear-gradient(#75D2DC, white);
}
.sidenavgris{
background-image:linear-gradient(#c4c4c4, white);
}

/* The navigation menu links */
.sidenav a, .sidenavgris a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
	font-family:Arial;
	/*text-transform:uppercase;*/
    font-size: 0.9rem;
	/*font-weight:bold;*/
    color: white;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    background-color:silver;
}

.sidenavgris a:hover {
    background-color:#75D2DC;
}


/* Position and style the close button (top right corner) */
.sidenav .closebtn, .sidenavgris .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
	
}

#ocelotbleu, #ocelotgris{
	position:absolute;
	bottom:55px;	
	width:210px;
	left:-70px;
	}
	
#travauxlien{
	color:rgb(110,110,110) !important;
}
	
#main {
    transition: margin-left .5s;
    padding-left: 20px;
	padding-right:20px;
}	
	/*FIN MENU SANDWICH*/	
	
	
/*MENU SECONDAIRE TRAVAUX*/
 

/* Hide the link that should open and close the topnav on small screens */
#icon {
	color:white;
}
#menu #icon {
    display: none;
}


/*FIN MENU SECONDAIRE*/



	
	
#menu{
	font-size:0px} /*comme les li du menu sont mis en inline-block on a un petit espace entre les éléments pour éviter cela on met la police à 0px, par contre on remet la plice des éléments en rem : voir le font-size de #menu a*/
	
	
	
li{display:inline-block;
	/*float:left;*/
}

a{
	text-decoration:none;
	color:rgb(120,120,120);
}

#mySidenav  a, #mySidenavgris  a{
	display:block;
	/*padding:5px;
	border-right:solid;*/
	text-decoration:none;
	text-align:center;
	/*font-family: 'Amiko', sans-serif;*/
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	font-size:1.2rem;
	color:white;
}

.tab{
	text-align:center;
}
/*.tab li {
	padding-left:15px;
	padding-right:15px;
}*/

#menu  a{
	display:block;	
	/*border-right:solid;*/
	text-decoration:none;
	text-align:center;
	/*font-family: 'Saira Condensed', sans-serif;*/
	/*font-size:1.1rem;*/	
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	font-size:0.9rem;
	line-height:0;
	/*font-family: 'Share Tech', sans-serif;
	font-size:0.8rem;*/
	/*text-transform:uppercase;*/
	/*letter-spacing:0.1rem;*/
	/*font-weight:bold;*/

}

#nav{		
	margin:0;
	text-align:right;
	font-size:0px;
	}

#nav a{
	text-decoration: none;		
  display: block;
  float: left;
  text-align:center;
	/*font-family: 'Saira Condensed', sans-serif;*/
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	font-size:1.1rem;
  padding: 10px;
  transition : all 0.5s ease;
	color: white;	
}

#nav li {
	padding-top:5px;
	padding-bottom:5px;
	display: inline-block;
	margin-bottom: 0;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
			}

#nav li:hover, .tab li:hover{
	background-color:silver;
	color:white;
}

#nav .current a {
	color:#75D2DC;
			}

header{
	position:fixed;	
	width:100%;
		/*margin:0 auto;*/
	left:0;
	right:0;
	z-index:1;
	/*height:40px;
	background-image:url("images/fondheader.jpg");
	background-size: 100vw;
	background-position:bottom;*/	
	background-color:rgb(120,120,120);	
	/*overflow:hidden;	*/
}

#headertravaux{
	position:static;
		}

#confirmenvoi{
	background-color:white;
	padding:5px;
}

#menu{
	padding:0;
	margin:0;
	text-align:right;	
}

#menu{
	position: -webkit-sticky; /*ou also have to be careful with the parent elements. position: sticky can stop working if it's inside a flexbox unless you're careful and will also fail if there's an overflow: hidden or overflow: auto between it and whatever it scrolls inside (body root or nearest ancestor with overflow: scroll)*/
	position: sticky;
	top:0px;
	z-index:5;
}

#menu a{
	padding:15px 30px;
	/*border-right:solid silver;*/
	box-sizing:border-box;	
}

/*
#menu a:hover{
	background-color:silver;
}*/

#gallerieillustrations a {
	padding:10px 15px;
	box-sizing:border-box;
	
}

.relatif{
	position:relative;
}
.trait{	
	height:25px;
	width:100vw;	
}

.ef1,.ef3{
  display: inline-block;
  -webkit-transform-origin : 0 0;
  -ms-transform-origin : 0 0;
  transform-origin : 0 0;
  overflow: hidden;
 position: relative;
  /*width: 100%; */ 
}

.ef1 a{
	display:block;
	padding:10px;
}

.ef1  img{
  display: block;
  max-width:100%;
  /*position: relative;*/
  filter: grayscale(65%);/*en noir et blanc*/
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform:  scale(1);
  -ms-transform:  scale(1);
  transform:  scale(1);
  margin: 0 auto;
 /* box-shadow: 3px 3px 10px #555;/*ombrage pour donner aspect bouton*/ 
  }
  
  
  .ef3 img{
  display: block;
  max-width:100%;
  /*position: relative;*/
  filter: grayscale(10%);/*en noir et blanc*/
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform:  scale(1);
  -ms-transform:  scale(1);
  transform:  scale(1);
  margin: 0 auto;
 /* box-shadow: 3px 3px 10px #555;/*ombrage pour donner aspect bouton*/ 
  }
  
  
  
.ef1:hover img, .ef3:hover img{
	 filter: grayscale(0%);/*on remet la couleur*/	 
  -webkit-transform: scale(1.05) rotate(-0.5deg);
  -ms-transform: scale(1.05) rotate(-0.5deg);
  transform: scale(1.05) rotate(-0.5deg);
}

#envoi{
	-webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform:  scale(1);
  -ms-transform:  scale(1);
  transform:  scale(1);
}

#envoi:hover{
-webkit-transform: scale(1.5) rotate(-0.5deg);
  -ms-transform: scale(1.5) rotate(-0.5deg);
  transform: scale(1.5) rotate(-0.5deg);
}


#menugalerie {
		/*background-color:white;*/
}
.tab{
  overflow: hidden;   
  /*background-image:url(images/fondlichen1.jpg);*/
/*background-color:rgb(120,120,120);*/
/*background-color:#75D2DC;*/
background-image:linear-gradient(to right, white, #75D2DC 15%, #75D2DC 85%, white );
/*background-image:linear-gradient(to right, rgb(120,120,120), rgb(200,200,200) 10%, rgb(120,120,120));*/
  /*margin: 5px;*/
 }

.tab li{
	/*padding-top:5px;
	padding-bottom:5px;*/
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	}
	
.tab a{
	padding-top:5px;
	padding-bottom:5px;
	padding-right:15px;
	padding-left:15px;
  text-decoration: none;
  display: block;
  float: left;
  padding: 10px;
  transition : all 0.5s ease;
 color: white; 
  /*color:rgb(120,120,120);*/
}

	
.tab .active , .active a{
  background-color: rgb(200,200,200);
 color: white; 
 /*color:#75D2DC;*/
 /*font-size:1rem !important;*/
/*font-weight:bold;*/
}



.tab .active img{
	filter: grayscale(0%);
	-webkit-transform:  scale(1.1);
  -ms-transform:  scale(1.1);
  transform:  scale(1.1);
}



.content{
  display: none;
   animation : fade 2s;
 
}

@keyframes fade {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

/*effet scroll to top */
button{
  position: relative;
}
.scrollToTop{
    color: #444;
    text-decoration: none;
    position:fixed;
  z-index: 9999;
    bottom:5%;
  left: 90%;
  background-color: rgba(50,50,50,0.8);
  color: white;
    display:none;
  border: none;
  padding: 5px;
  cursor: pointer;
}

/*pour faire apparaitre les légends des figures (textes explicatifs) doucement au passage de la souris
.bloctexte{
	opacity:0;
	transition:all 2s ease;
}

section:hover .bloctexte{
	opacity:1;
}
*/

/* séparation par ligne bleue des sections en mode mobile, mais pas en mode grand écran*/
.separation{
	display:none;
}


	.clearfix1,.clearfix2{
	clear:both;
	display:none; /* cet élément n'apparait pas (et n'est pas actif) sauf en mode tablette (clearfix1) ou en mode mobile (clearfix2)
	, cf. ci-dessous, 
	sinon ça empêche les autres blocs de se remettre à côté quand on est en écran d'une autre taille*/
	}
	

/*
#papillonbleu{
	position:relative;
	z-index:0;
}

#menugalerie{
	position:relative;
	z-index:1;
}

*/
	
	input,textarea, form span{
	/*padding-top:15px; /*pour éviter que le texte soit collé sous l'image 
	padding-bottom:15px;
	padding-top:1rem; /*pour éviter que le texte soit collé sous l'image 
	padding-bottom:1rem;*/
	/*font-size:0.7rem;
	line-height: 1.1rem;*/
	font-size:14px;/*pour les vieux navigateurs qui ne lisent pas les rem*/
	font-size:1.2rem;
	line-height:16px;
	line-height:1.6rem;
	color:#0C91A4;
	display:block;
	box-sizing: border-box;	
	font-family: 'Satisfy', cursive;
	border  : none;
	background: none;
	/*padding-bottom:15px;*/
	display:inline-block;
	  /*background-color:transparent;*/
		}
	
	label{
	font-size:14px;/*pour les vieux navigateurs qui ne lisent pas les rem*/
	font-size:0.85rem;
	line-height:18px;
	line-height:1.2rem;
	font-family: 'Inconsolata', monospace;
	padding-top:5px;
	}
	
	textarea{
		resize:none;
		width:100%;
		height:8rem;			
	}
	
	form{
		margin:0 auto;
		width:80%;
		height:100vh;
		background-image:url("images/cartepostaleNB.png");
		background-size:cover;
		background-repeat:no-repeat;
		box-sizing:border-box;
			}
	form section{
		width:100%;
		padding-top:20%;
		padding-bottom:100px;
		overflow:hidden;
	}
	form div{		
		box-sizing:border-box;
		padding-left:5%;
			}
	form section div{
		padding-top:1rem;		
	}
	
	
	#envoi{	
	font-size:14px;/*pour les vieux navigateurs qui ne lisent pas les rem*/
	font-size:1.2rem;
	line-height:18px;
	line-height:1.2rem;
	color:#0C91A4;
	display:block;
	box-sizing: border-box;	
	font-family: 'Inconsolata', monospace;
	  border       : 2px solid #333;
	  border-color:white;
	  border-radius: 5px;
	  background   : none;
	  cursor       : pointer;
	  margin-left:50%;
	  margin-top:3rem;
	-webkit-transform: rotate(-4deg);
	   -moz-transform: rotate(-4deg);
		-ms-transform: rotate(-4deg);
		 -o-transform: rotate(-4deg);
			transform: rotate(-4deg);
}
	
	
	#telephone {
		width:100%;
		text-align:center;
		padding-top:40px;
		padding-bottom:40px;		
			}
			
	#mel {
		width:100%;
		text-align:center;
		padding-top:5px;
		padding-bottom:5px;
	}
		#mel p{
			font-family: 'Barlow Semi Condensed', sans-serif, Arial;
		color:white;
	font-weight:bold;
	font-size:1.2rem;
		}	
			
	#mel p:before {
    content: 'fabricehibert';	
}

	#mel p:after {
    content: '@protonmail.com';
	}

	#telephone h2, #telephone p a{
		color:white;
	}
	#telephone p a{
		font-weight:bold;
		font-size:1rem;
	}
	
	#liensartistes, #mentions{
		padding-bottom:70px;
	}
	
	#liens, #mentions{
		float:left;
	}
	
	#facebook{
		position:absolute;
		right:0px;
		bottom:50px;
		/*display:block;
		float:right;*/
		margin-right:10vw;
		width:10vw;
	}
	
	#ML{
		padding-top:20px;	
		width:100%;
		text-align:center;
		}
	#ML p{
		font-size:0.6rem;
	}
	
	
	
	
	
	
	
	
	
	
	
	


	
/*******************************************************************************/
									/* RESPONSIVE*/
/******************************************************************************/

/* pour écran taille tablette*/
@media screen and (min-width:768px) and (max-width:991px){
	/*.w33,.w66{
		width:50%;
	}*/
	
	#titre{
	opacity:1;
	}
	
	.ef2 img{/*pour la tablette pas d'effet au survol de la panthere car pas de souris*/
	 filter: grayscale(0%);/*on remet la couleur*/
	  -webkit-transform: scale(1) ;
	  -ms-transform: scale(1) ;
	  transform: scale(1) ;
	  opacity:1; 
		}
	
	.bloctexte{
padding-right:10px;
position:static;
width:100%;
opacity:1;
}
		
	#bloc3{
		width:100%;
	}
	
	figcaption{
		padding-top:2px;
	}
		
	h2{
		font-size:0.6rem;
		line-height: 1rem;
		text-transform:uppercase;
		padding-top:20px;
		padding-bottom:10px;
		font-size:0.8rem;
		/*color:rgb(120,120,120);*/
		color:rgb(180,180,180);		
	}

	h3{
		font-size:0.6rem;
		font-weight:bold;
		padding-top:15px;
		padding-bottom:1px;
		font-family:Arial;
		color:rgb(120,120,120);
	}

	p{
		margin-top:5px; /*pour éviter que le texte soit collé sous l'image */
		font-family:Arial;
		font-size:0.6rem;
		line-height: 1rem;
		color:rgb(120,120,120);
	}

	
	#hello{
	padding-top:30px;	
	padding-left:20px;
	width:55%;
	}
	
	.parallax{
	min-height:100vh;
	width:100%;
	background-image:url("images/moijunglebleusombre.jpg");
	background-attachment: fixed;
	background-size: 120% auto;
	background-position: center center;
	background-repeat:no-repeat;
		}


	.legende{
		opacity:1;
	}
.separation{
	display:none;
}
	
	
	.clearfix1{
		display:block; /*apparaît seulement en mode tablette  et de type block */
		}
	.clearfix2{
		display:none; /*disparait en mode tablette  */
		}		
	}


/********************************mode taille d'écran de mobile ************************/


@media screen and (max-width: 767px){
	#headergalerie{
		position:static;
	}
	
	#menu{
	top:0px;
	width:100%;
	right:0;
	z-index:5;
	position:static;
	}
	
	
	
	.tab li {
		width:100%;
			}
			
	
	
	#menu #icon{	 
	float: right;
    display: block;
	color:rgb(100,100,100);
	position:fixed;
	top:5px;
	right:0;
	z-index:5;
  }
	
	/*#menuaccueil{
		font-family: 'Barlow Semi Condensed', sans-serif, Arial;
		font-size:1.1rem;
		/*font-size:30px;
		color:white;
		background-color:rgb(150,150,150);
		cursor:pointer;
		position:fixed;
		top:15px;
		left:20px;
		z-index:1;
		display:block;
	}*/
	
	#nav{
		display:none;
	}
	
	#nom{
		text-align:center;
		position:static;
		left:0;
		padding-top:40px;
		padding-bottom:10px;
		width:100vw;
		box-sizing:border-box;
		background-color:white;
	}
	#nom p{
		color:rgb(160,160,160);		
		}
		
	.page1{
		min-height:100vh;
	}
	
	#panthere{
	padding-top:10vh;
	width:200%;
	height:100vh;
	margin-left:-50vw;	
	}
	
	.ef2  img{
		opacity:0.2;
	}
	
	#titre{
	right:0;
	left:0;
	top:70vh;
	opacity:1;
	}

	#titre p, #titre h1{
	/*font-family: 'Barlow Semi Condensed', sans-serif, Arial;*/
	font-size:1rem;
	line-height:0.4rem;
	letter-spacing:0.4rem;
	color:rgb(140,140,140);
	/*font-weight:bold;*/
	text-transform:none;
	text-align:center;	
	}
	
	#travo, #explo{
		display:none;
	}
	#travomob, #explomob{
		display:inline-block;
		border:solid #75D2DC;
	}

	#main {
    padding-left: 0px;
	padding-right:0px;
	}	
	
	.parallax{
		display:none;
	}
		
	.presentation{
		display:none;
	}
	
	#salamblanche,#salamblanche2,#salambleue{
		display:none;
	}
	
	#facebook{
		width:60vw;
		position:static;
		margin-left: 20vw;
		margin-top:100px;		
	}


	
	#sectionhellomobile{
		display:block;
		min-height:100vh;
		width:100%;
		background-image:url("images/moijunglebleusombre.jpg");
		background-size: cover;
		background-position: center center;
		background-repeat:no-repeat;		
		}
		
	#hellomobile{
	padding:60px 20px;	
	text-align:center;
	margin:0 auto;
	background: -moz-linear-gradient(top, rgb(50,50,50), rgba(0,255,0,0));
	background: -webkit-linear-gradient(top, rgb(50,50,50), rgba(0,255,0,0));
	background: -ms-linear-gradient(top, rgb(50,50,50), rgba(0,255,0,0));
	background: -o-linear-gradient(top, rgb(50,50,50), rgba(0,255,0,0));
	}
	
	
	
	#contact{
		width:80vw;
	padding:60px 20px 0 20px;	
	text-align:center;
	margin:0 auto;
	}
	
	#bichromie h2{
	padding-top:60px;	
	text-align:center;
		}
	
	
 .w66,.w20,.w80,.w16{
    width: 100%;
	/*text-align:center;*/
  }
  #sectioncontact{
	  	display:block;
		min-height:100vh;
		box-sizing:border-box;
  }
  #sectioncontact form .w50{
	  width:100%;
  }
  
  form section{
		width:100%;
		padding-top:0%;
		padding-bottom:100px;
		overflow:hidden;
	}
	
	#envoi{
		margin-top:0;
		margin-left:0;
	}
  
  
  .w33{
	  width:50%;
  }
  
  .w11{
	  display:none;
  }
  
  #portfolio h2{
	 display:block;
	 margin: 0 auto;
	 text-align:center;
	letter-spacing: 0.1rem;
	text-transform:uppercase;
	/*padding-bottom:10px;*/
	/*font-family: 'Yanone Kaffeesatz', sans-serif;*/
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	color:rgb(130,130,130);	
	font-size:1rem;
	font-weight:bold;
	padding-bottom:10px;
}
  
  #sectionportfolio{
	width:100%;	
	margin-bottom:0px;
	background-image:url("media/papillon.gif");
	background-size:cover;
	background-repeat:no-repeat;
	padding-bottom:0px !important;
	}
	
	#contentexploration .w20, #contenttravaux .w20{
		width:100%;
		margin-bottom:10px;
	}
	
	
	.legende{
	opacity:1;
	/*color:rgb(140,140,140);*/
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	font-size:1.1rem;
	line-height:1.8;
	transition:all 0.8s ease;
}

#hellomobile p, #contact p{
	font-size:1.1rem;
	line-height:1.4;
}

#papillonvole{
	position:absolute;
	bottom:-30vh;
	right:0vw;
	width:100%;
	height:85vh;
	/*background-color:black;*/
}
  
  figcaption{
		padding-top:2px;
	}
	 /*.bloctexte{
	padding-right:10px;
	position:static;
	width:100%;
	}*/
	
	.bloctexte{
		display:none;
	}
  
  /*pour centrer le menu et l'étendre sur toute la largeur de la page en mode mobile : */
    
	.aplat2{
		width:100%;}
		
	.bloc2:hover .aplat2{ /*au survol de figure*/
		left:0%;
		opacity:1;
				}
#section22,#section25{
	height:200vh;
}

/*
	li{
		display:inline;
		float:none;
		}

	#menu a{
		display:block;
		padding:5px;
		text-decoration:none;
		text-align:center;
	}
*/
	/*section{/*moins d'espace entre les sections
		margin-bottom:30px;
		margin-top:20px;
	}*/
	
	.w100,.w66,.w33,.w25,.w80,.w20,.w11{/*moins d'espace entre image et légende*/
		padding-top:10px;
	}
	
	#titretravaux, #titreexploration{
		text-align:center;
	}
	
	h2{
		font-size:0.6rem;
		line-height: 1rem;
		text-transform:uppercase;
		padding-top:0px;
		padding-bottom:5px;
		font-family:Arial;
		font-weight:bold;
		/*color:rgb(180,180,180);*/
		color:#75D2DC;
		}

	h3{
		font-size:0.6rem;
		font-weight:bold;
		padding-top:5px;
		padding-bottom:1px;
		font-family:Arial;
		color:rgb(120,120,120);
	}

	p{
		margin-top:5px; /*pour éviter que le texte soit collé sous l'image */
		font-family:Arial;
		font-size:0.6rem;
		line-height: 1rem;
		color:rgb(120,120,120);
	}

	
	/*gestion du menu principal*/
	/*
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
	*/

	#ocelotbleu,#ocelotgris{
		position:absolute;
		width:100px;
		left:-10px;
		bottom:0vh;	
		}
		
		
	#menugalerie .w20{
		float: none;
    display: block;
    text-align:center;
	width:100%;
	}
		
		
		/*gestion du menu travaux*/
		 /* When the screen is less than XXX pixels wide, hide all links. Show the link that contains should open and close the topnav (.icon) */

  /*.topnav  a:not(:first-child) {display: none;}*/
 .topnav li {display: none;}
 /*.topnav a #icon {*/
 
  
#guepard{
	position:fixed;
	top:-5px;
	left:70px;
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

.topnav.responsive ul{
	/*position: relative;*/
	margin-top:60px;
	 }
  
 
  .topnav.responsive #icon {
    position: absolute;
    right: 0;
    top: 0px;
	 }

	 	 
	.topnav.responsive span {
		font-size:1.5rem;
		font-weight:bold;
		color:#75D2DC;}

	  
	  
  .topnav.responsive li {
	float: none;
    display: block;
    text-align:left;
			  }
		  
.topnav.responsive li a{	 
    float: none;
    display: block;
    text-align:left;
			  }
 
				
	
	.separation{
	display:inline;
	}
  
  .clearfix1{
		display:block; /*disparaît en mode tablette  */
		}
  .clearfix2{
		display:block; /*apparaît seulement en mode mobile et de type block */
		}	
	}