/*************CSS pour le CV*************/

@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%;
}

.w20{width:20%;
}

.w25{
	width:25%;
}

.w11{
	width:11.11%;
}


.w66{
	width:66.66%;
}

.w80{
	width:80%;	
}



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

.w100,.w40, .w66,.w33,.w25,.w20,.w80,.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;
		}

		.row{
	overflow:hidden; 
	margin-right:-15px;
	margin-left:-15px;
			}


/*custom page*/

html {font-size:100%;}

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



.expe{
	width:100vw;
	overflow:hidden;
	padding-left:10vw;
}
.h1cvaccueil{
	text-align:center;
	font-weight:bold;
	font-size:2rem;
	letter-spacing: 0.1rem;
	padding-top:30vh;
	padding-bottom:20px;
	font-family: 'Quicksand', sans-serif;	
	color:white;	
}

#soustitreaccueil{
	text-align:center;
	font-size:1.2rem;
	letter-spacing: 0.1rem;
	padding-top:15px;
	padding-bottom:20px;
	font-family: 'Quicksand', sans-serif;	
	color:white;
	
}

.h2cv{
	text-align:center;
	font-weight:bold;
	font-size:1.3rem;
	letter-spacing: 0.1rem;
	padding-top:50px;
	padding-bottom:20px;
	/*text-transform:uppercase;*/
	font-family: 'Quicksand', sans-serif;	
		/*color:#0C91A4;*/
		color:#011219;
		
}
.h3cv{
	padding-left:40px;
	padding-top:30px;
	padding-bottom:20px;
	font-weight:bold;
	line-height: 1.7rem;
	font-size:1.5rem;
	letter-spacing: 0rem;
	/*text-transform:uppercase;*/
	/*font-family: 'Oswald', sans-serif;*/	
	font-family: 'Quicksand', sans-serif;
	color:rgb(150,150,150);
	color:#0C91A7;
	}

#missions, #formations, #competence,#communications{
	text-align:center;
}
	
#missions .h2cv, #formations .h2cv, #competence .h2cv, #communications .h2cv{
	display:inline-block;
	padding-top:22px;
	padding-bottom:22px;
	padding-left:20px;
	padding-right:20px;		
	border: solid 2px black;	
	border-radius: 40px;
	}

	#formations .h2cv, #communications .h2cv{		
	border: solid 2px white;	
	}

#champ{
	margin-top:20px;
}

#champ1 p{
	padding-left:20px;
	padding-top:0px;
	padding-bottom:10px;
	/*font-weight:bold;*/
	line-height: 1.9rem;
	font-size:1.2rem;
	letter-spacing: 0rem;
	/*text-transform:uppercase;*/
	/*font-family: 'Oswald', sans-serif;*/	
	font-family: 'Quicksand', sans-serif;
	color:white;	
}
#champ1{
	width:20%;
	padding-top:20px;
	padding-bottom:30px;
	float:left;
	background-color:#0C91A7;
	border-radius: 50% 20% / 10% 40%;	
}

#champ2{
	width:30%;
	padding-top:0px;
	padding-bottom:30px;
	float:left;
	
}

#champ2 p{
	margin-top:5px; /*pour éviter que le texte soit collé sous l'image */
	font-family: 'Quicksand', sans-serif;
	font-weight:bold;
	font-size:16px;/*pour les vieux navigateurs qui ne lisent pas les rem*/
	font-size:1rem;
	line-height:20px;
	line-height:1.4rem;
	color:rgb(130,130,130);	
}

#champ2 i{
	color:#75D2DC;
	padding-left:40px;
	padding-right:10px;
}


p{
	margin-top:5px; /*pour éviter que le texte soit collé sous l'image */
	font-family: 'Anaheim', sans-serif;
	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);
}




.mission p{
font-family: 'Quicksand', sans-serif;
}


#recherche .expe .w40, #recherche .expe .w20, #recherche .expe .w11 {
	padding-top:20px !important;
}

.datemission{
	box-sizing:border-box;
}

.mission p{
font-family: 'Quicksand', sans-serif;
}

figure{
	position:relative;
	display:inline-block;
	overflow:hidden;/*tout ce qui dépasse du bloc figure n'apparait pas*/
		}
img{
	max-width:100%;
	/*max-height:500px;*/
	}		
.organisme img{
	display:block;
	width:40px;
	padding-bottom:15px;
	padding-left:10px;
}

.organisme .size{
	width:70px !important;
}

.hauteurmax{
	max-height:11vw !important;
	overflow:hidden;
}

.gras{	
	font-weight:bold;
	color:#0C91A4;
	color:rgb(135,135,135);
}

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;
	}
	
#sectionaccueil{
	position:relative;
	background-image:url("images/fondnzbleu.jpg");
	background-size: 100vw;
	height:75vh;
	background-position:0 -25vh;
	background-attachment: fixed;
	background-repeat:no-repeat;
	z-index:0;
		}
		
#flechebas{
	position:absolute;
	display:block;
	bottom:30px;
	width:100vw;
	text-align:center;
	opacity:0.5;
	margin:0 auto;
	overflow:hidden;
}

#flechebas img{
	width:20px;}
	
#papillonvole{
	position:absolute;
	bottom:0vh;
	right:0vw;
	width:40%;
	height:85vh;
	opacity:0.5;
	/*background-color:black;*/
	z-index:1;
}
	
a{
		text-decoration:none;
		color:#0C91A4;
	}

#logoCV{
	padding-top:20px;
	padding-left:30px;
	position:fixed;
	left:0;
	font-family: 'Quicksand', sans-serif;
	font-size:3rem;
	font-weight:bold;
	color:white;
	z-index:3;
}
	
	


#menucv{
	width:100%;
	padding-top:20px;
	padding-bottom:20px;
	padding-right:30px;
	position:fixed;
	right:0;
	text-align:right;
	font-size:0px;
	overflow:hidden;
	z-index:2;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#165463+0,165463+75,ffffff+100&1+0,0.67+41,0+100 */
background: -moz-linear-gradient(top, rgba(22,84,99,1) 0%, rgba(22,84,99,0.67) 41%, rgba(22,84,99,0.28) 75%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(22,84,99,1) 0%,rgba(22,84,99,0.67) 41%,rgba(22,84,99,0.28) 75%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(22,84,99,1) 0%,rgba(22,84,99,0.67) 41%,rgba(22,84,99,0.28) 75%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#165463', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
	
#menucv ul li a{
		font-family: 'Quicksand', sans-serif;
		font-size:0.9rem;
		color:white;
	padding-right:12px;
	padding-left:12px;
-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;	
	}
	
	#menucv li {
	padding-top:5px;
	padding-bottom:5px;
	display: inline-block;
	margin-bottom: 0;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
			}

#menucv li a:hover{
	/*background-color:silver;*/
	color:orange;
}



#menucv a{
	/*padding-top:5px;
	padding-bottom:5px;*/
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	}
	
.current, .active{
	color:#75D2DC!important;
	font-weight:bold;
}
			
#missions{
	padding-bottom:50px;
}
#intromissions{
	position:relative;
	overflow:hidden;
	min-height:100vh;
	margin-bottom:50px;
}	

#intromissions div .w50{
	text-align:center;	
}

.rond{
	display:flex;
	-webkit-border-radius:100px;
    -moz-border-radius:100px;
    border-radius:190px;
    width:190px;
    height:190px;	
	/*border-style:solid;
	border-width:5px;
	border-color:#75D2DC;*/
	box-sizing:border-box;
	margin:0 auto;	
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.recherche, #formation{
	background-color:#195B6B;	
}



.recherche:hover{
	background-color:orange;	
}
.recherche a, .capacites a{
	color:white !important;
	}

.capacites{
	background-color:#75D2DC;
}

.capacites:hover{
	background-color:#195B6B;;
}

.com{
	background-color:orange;
}

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

.assistance{
	/*border-style:solid;
	border-width:2px;
	border-color:#195B6B;*/
	background-color:rgb(200,200,200);
}

.assistance:hover{
	/*border-style:solid;
	border-width:2px;
	border-color:#75D2DC;*/
	background-color:#75D2DC;
}


#conteneurpictos{
	width:72vw;
	margin:0 auto;
}	
#intromissions a{
	color:#195B6B;
	font-weight:bold;
	font-family: 'Quicksand', sans-serif;
	font-size:1.2rem;
	text-align:left;
	line-height:1.4rem;
	margin:auto;
	text-align:center;
	/*text-transform:uppercase;*/	
	/*padding-right:12px;
	padding-left:12px;*/
-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;	
			}
			
#intromissions a span{
	font-size:0.8rem;
}
			

#carte{
	display:block;
	position:absolute;
	top:50%;
	left:0;
	right:0;
	width:25vw;
	margin:0 auto;
	}



#formation h2, #formation p, #formation .gras{
	color:white;
	}	
.institut{
	
}

#shortmissions h3{
	color:rgb(150,150,150);
	text-align:right;
	padding-right:40px;
}

#encadrement h3{
	color:#75D2DC;
}
/*#communication{
	background-color:orange;
}*/
#communication h3{
	color:orange;
	text-align:right;
	padding-right:40px;
}

#formation{
	padding-bottom:100px;
}

#competence{
	margin-bottom:80px;
}

#competences .rond{
	margin-bottom:20px;
}
#competences .rond p{
	flex-wrap: wrap;
	color:#195B6B;
	color:white;
	font-weight:bold;
	font-family: 'Quicksand', sans-serif;
	font-size:1.2rem;
	text-align:left;
	line-height:1.7rem;
	margin:auto;
	text-align:center;
	/*text-transform:uppercase;*/	
	padding-right:12px;
	padding-left:12px;
-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;	
			}
	

	
#competences .suivi{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#72bf49+0,95d175+59,aede94+100 */
background: #72bf49; /* Old browsers */
background: -moz-linear-gradient(top, #72bf49 0%, #95d175 59%, #aede94 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #72bf49 0%,#95d175 59%,#aede94 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #72bf49 0%,#95d175 59%,#aede94 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72bf49', endColorstr='#aede94',GradientType=0 ); /* IE6-9 */
}

	
#competences .bdd{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#49a5bf+0,75bdd1+59,93cede+100 */
background: #49a5bf; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #49a5bf 0%, #75bdd1 59%, #93cede 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #49a5bf 0%,#75bdd1 59%,#93cede 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #49a5bf 0%,#75bdd1 59%,#93cede 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49a5bf', endColorstr='#93cede',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#competences  .com{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fea40a+0,febb48+59,fecc74+100 */
background: #fea40a; /* Old browsers */
background: -moz-linear-gradient(top, #fea40a 0%, #febb48 59%, #fecc74 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fea40a 0%,#febb48 59%,#fecc74 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fea40a 0%,#febb48 59%,#fecc74 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fea40a', endColorstr='#fecc74',GradientType=0 ); /* IE6-9 */
}

#competences .dev{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7249bf+0,9575d1+60,ae94de+100 */
background: #7249bf; /* Old browsers */
background: -moz-linear-gradient(top, #7249bf 0%, #9575d1 60%, #ae94de 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #7249bf 0%,#9575d1 60%,#ae94de 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #7249bf 0%,#9575d1 60%,#ae94de 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7249bf', endColorstr='#ae94de',GradientType=0 ); /* IE6-9 */
}

#competences .stat{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#69879f+0,8ea5b8+67,a8bbca+100 */
background: #69879f; /* Old browsers */
background: -moz-linear-gradient(top, #69879f 0%, #8ea5b8 67%, #a8bbca 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #69879f 0%,#8ea5b8 67%,#a8bbca 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #69879f 0%,#8ea5b8 67%,#a8bbca 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69879f', endColorstr='#a8bbca',GradientType=0 ); /* IE6-9 */
}

#competences .redac{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bc6f4c+0,cf9377+67,dcac96+100 */
background: #bc6f4c; /* Old browsers */
background: -moz-linear-gradient(top, #bc6f4c 0%, #cf9377 67%, #dcac96 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #bc6f4c 0%,#cf9377 67%,#dcac96 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #bc6f4c 0%,#cf9377 67%,#dcac96 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bc6f4c', endColorstr='#dcac96',GradientType=0 ); /* IE6-9 */
}

#competences .anim{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b5af11+0,dfd815+59,ede629+100 */
background: #b5af11; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #b5af11 0%, #dfd815 59%, #ede629 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #b5af11 0%,#dfd815 59%,#ede629 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #b5af11 0%,#dfd815 59%,#ede629 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5af11', endColorstr='#ede629',GradientType=1 ); /* IE6-9 fallback on horizontal gradient *//
}

#competences .dessin{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#db4598+0,e573b2+59,ed93c4+100 */
background: #db4598; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #db4598 0%, #e573b2 59%, #ed93c4 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #db4598 0%,#e573b2 59%,#ed93c4 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #db4598 0%,#e573b2 59%,#ed93c4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db4598', endColorstr='#ed93c4',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#competences .lang{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#497abf+0,759bd1+59,94b3de+100 */
background: #497abf; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #497abf 0%, #759bd1 59%, #94b3de 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #497abf 0%,#759bd1 59%,#94b3de 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #497abf 0%,#759bd1 59%,#94b3de 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#497abf', endColorstr='#94b3de',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#compflex{
	display:flex;
	flex-wrap:wrap;
	padding-left:80px;
}

.competencebloc {
	text-align:center;	
	padding-left:40px;
	padding-right:40px;
	padding-bottom:40px;
	/*display:inline-block;
	float:left;*/
}

.competencebloc img{
	max-width:250px;}

.competencebloc span{
	font-style:italic;
}

 #lang span{
	font-weight:bold;
	font-style:normal;
}

.ital{
	font-style:italic;
}

#communications{
	position:relative;
	background-image:url("images/elephantvert.jpg");
	background-size: 100vw;
	
	background-position:0 -25vh;
	background-attachment: fixed;
	background-repeat:no-repeat;
	z-index:0;
		}
		
#communications h2, #communications p, #communications p  a , #communications .gras{
	color:white;
	}

#communications p{ 
	padding-left:20px;
	padding-top:0px;
	padding-bottom:15px;
	/*font-weight:bold;*/
	text-align:left;
	line-height: 1.3rem;
	font-size:0.9rem;
	letter-spacing: 0rem;
	/*text-transform:uppercase;*/
	/*font-family: 'Oswald', sans-serif;*/	
	font-family: 'Quicksand', sans-serif;
	color:white;
}

#pubecrit{
	padding-left:15vw;
	padding-right:15vw;
	padding-top:20px;
}
#pubecrit h3{
	text-align:center;
	line-height: 1.8rem;
	font-size:0.9rem;
	letter-spacing: 0rem;
	/*text-transform:uppercase;*/
	/*font-family: 'Oswald', sans-serif;*/	
	font-family: 'Quicksand', sans-serif;
	font-family: 'Anaheim', sans-serif;
	font-weight:bold;
	color:white;
	padding-bottom:20px;
	padding-top:30px;
}

.gras1{	
	color:#75D2DC;
	/*font-weight:bold;*/
}

.gras2{
	color:#DF9B0F;
	/*font-weight:bold;*/
}

#xavier{
	color:#E1DA18;
}

#ML{
		padding-top:20px;	
		width:100%;
		text-align:center;
		}
	#ML p{
		font-size:0.6rem;
	}