html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
border:0;
font:inherit;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;
}
em{}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}

html, body {background: #181818; font-family: 'Lato', helvetica, arial, sans-serif; font-size: 15px; color: #222;}

.clear {clear: both;}

p {
	font-size: 1em;
	line-height: 1.4em;
	margin-bottom: 20px;
	color: #444;
}

#cv {
	width: 90%;
	max-width: 900px;
	background: #f3f3f3;
	margin: 30px auto;
}




/*https://cssdeck.com/labs/css3-range-slider-graphical*/

.color1 {
		height: 17px;
color:#585858;padding-left:5px;font-size: 0.8em;
	font-style: italic;margin-bottom:0;
			margin: 1px auto 1px 0;}
	
	.avantslider {
	width: 19%;
	position: relative;
		float: left;
			}
.slider {
	width: 80%;
	height: 17px;
	position: relative;
		float: right;
	margin: 1px auto 1px 0;/*100px auto*/
	/*background: #E6E6E6;*/
	
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	border-color: #E6E6E6;/*background:*/
	-webkit-box-shadow: inset 0px 0px 1px 1px rgba(190, 190, 190, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
	-moz-box-shadow: inset 0px 0px 1px 1px rgba(190, 190, 190, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
	box-shadow: inset 0px 0px 1px 1px rgba(190, 190, 190, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
}

.slider .bar {
	width: 96%;
	height: 9px;
	background: #848484;
	position: relative;float: left;
	top: 4px;
	left: 2%;	
	
	/*background: #1d2e38;
	background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d2e38), color-stop(50%,#2b4254), color-stop(100%,#2b4254));
	background: -webkit-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
	background: -o-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
	background: -ms-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
	background: linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2e38', endColorstr='#2b4254',GradientType=1 );*/
	
	background: #848484;
	background: -moz-linear-gradient(left, #BDBDBD 0%, #848484 50%, #585858 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#BDBDBD), color-stop(50%,#848484), color-stop(100%,#585858));
	background: -webkit-linear-gradient(left, #BDBDBD 0%,#848484 50%,#585858 100%);
	background: -o-linear-gradient(left, #BDBDBD 0%,#848484 50%,#585858 100%);
	background: -ms-linear-gradient(left, #BDBDBD 0%,#848484 50%,#585858 100%);
	background: linear-gradient(left, #BDBDBD 0%,#848484 50%,#585858 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BDBDBD', endColorstr='#585858',GradientType=1 );	
	
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
}

.slider .bar .highlight {
	height: 2px;
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
		
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	
	background: rgba(255, 255, 255, 0.25);
}
.l00 {left: 2%;}
.l10 {left: 10%;}
.l20 {left: 37%;}
.l40 {left: 52%;}
.l60 {left: 69%;}
.l80 {left: 81%;}
.l100 {left: 95%;}
.slider .knob {
	position: relative;
	width: 11px;
	height: 11px;
	display: block;
	top: 2px;
	text-decoration: none;
	color: white;
	font-size: 10px;
	font-family:  Arial, sans-serif;
	
	-webkit-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.6);
	box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.6);
		
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	
	background: #ebf1f6;
	background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb));
	background: -webkit-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%);
	background: -o-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%);
	background: -ms-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%);
	background: linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 );
}

.slider .knob .tip {
	position: absolute;
	top: -50px;
	width: auto;
	padding: 6px 12px;
	left: -22px;
	opacity: 0;
	visibility: hidden;
	
	-webkit-transition: all .15s ease-in;
	-moz-transition: all .15s ease-in;
	-ms-transition: all .15s ease-in;
	-o-transition: all .15s ease-in;
	transition: all .15s ease-in;
	
	border: 1px solid black;
	
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	
	-webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0,0,0,0.4);
	box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0,0,0,0.4);	
	
	background: #222931;
	background: -moz-linear-gradient(top, #222931 0%, #181d21 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222931), color-stop(100%,#181d21));
	background: -webkit-linear-gradient(top, #222931 0%,#181d21 100%);
	background: -o-linear-gradient(top, #222931 0%,#181d21 100%);
	background: -ms-linear-gradient(top, #222931 0%,#181d21 100%);
	background: linear-gradient(top, #222931 0%,#181d21 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222931', endColorstr='#181d21',GradientType=0 );
}

.slider .knob:hover .tip {
	visibility: visible;
	opacity: 1;
	top: -35px;
}



/*		*/


.sectionContent h2,p.section {	float: left;	width: 80%;}
.sectionContent h2 {	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
	font-size: 1.25em;
	margin-bottom: -2px;
}
.sectionContent article p{display:inline-block;}
.petit , .subDetails{
	font-size: 0.8em;
	font-style: italic;}
.subDetails, .drapeaux {	float: right;	width: 18%;text-align:right;
	margin-bottom: 3px;
}
.drapeaux{padding-top:7px}
.gauche{float:left; 	font-size: 0.8em;	font-style: italic; margin:0}
/*h2.gauche{	float: left;	width: 18%;}*/


/* entire container, keeps perspective *//* https://davidwalsh.name/css-flip */
.flip-container {	perspective: 1000px; display:inline-block; }
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {transform: rotateY(180deg);}
.flip-container, .front, .back {	width: 160px;	height: 155px;}
/* flip speed goes here */
.flipper {	transition: 0.6s;	transform-style: preserve-3d;	position: in-line;}
/* hide back of pane during swap */
.front, .back {	backface-visibility: hidden;	position: absolute;	top: 0;	left: 0; }
/* front pane, placed above back */
.front {background:#f3f3f3;	z-index: 2;	/* for firefox 31 */	transform: rotateY(0deg);}
/* back, initially hidden pane */
.back {	transform: rotateY(180deg);color: #444;color:rgba(128, 128, 128, 0.7);font-size: 0.72em;}
.back .petit{	font-size: 0.8em;
	font-style: italic;}

.ond {background-image:url(img/OND.jpg) }
.bnu {background-image:url(img/escalier-bnu.png) }
.oeuf {background-image:url(img/capitalisez.jpg) }
.lvmh {background-image:url(img/rendu.jpg) }
.aubette {background-image:url(img/.jpg) }
.mof {background-image:url(img/mof-escalier.png) }
.grange {background-image:url(img/grange.png) }
.jeu {/* background-color:black; */background-image:url(img/graphisme-naval.jpg) }
.vancleef {background-image:url(img/van-cleef.jpg) }
.vnf {background-image:url(img/vnf.png) }

.mainDetails {
	padding: 25px 35px 5px 35px;
	border-bottom: 2px solid #cf8a05;
	background: #ededed;
}
a > h1 {
	text-decoration: none;	color: #cf8a05;
}

h1 > a {
	text-decoration: none;	color: #cf8a05;
}

#name h1 {
	font-size: 2.5em;
	font-weight: 700;
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
	margin-bottom: -6px;
}

#name2 h2 {
	font-size: 2em;
	margin-left: 2px;
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
}

#mainArea {
	padding: 0 40px;
}

#headshot {
	width: 12.5%;
	float: left;
	margin-right: 30px;
}

#headshot img {
	width: 100%;
	height: auto;
	-webkit-border-radius: 9px;
	border-radius: 9px;
}

.cv img , .front img{
	max-width: 150px;
	height: auto;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

#name, #name2 {
	float: left;
}

#lien{	text-decoration: none;font-size: 0.9em;color: #444;}

#contactDetails {
	float: right;
}
 li {list-style-type: disc; list-style-position: inside;}
#contactDetails ul {
	list-style-type: none;
	font-size: 0.9em;
	margin-top: 2px;
}

#contactDetails ul li {
	list-style-type: none;
	margin-bottom: 3px;
	color: #444;
}

#contactDetails ul li a, a[href^=tel] {
	color: #444; 
	text-decoration: none;
	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	-ms-transition: all .3s ease-in;
	transition: all .3s ease-in;
}

#contactDetails ul li a:hover { 
	color: #cf8a05;
}

section {
	border-top: 1px solid #dedede;
	padding: 20px 0 0;
}

section:first-child {
	border-top: 0;
}

section:last-child {
	padding: 20px 0 10px;
}

.sectionTitle {
	float: left;
	width: 16%;/* 25 */
}

.sectionTitle2 {
	float: left;
	width: 2%;/* 25 */
}
.sectionContent {
	float: right;
	width: 79.5%;/* 72.5 */
}

.sectionTitle h1 {
	font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
	font-style: italic;
	font-size: 1.5em;
	color: #cf8a05;
}


.keylogiciels {
	list-style-type: none;
	-moz-column-count:2;
	-webkit-column-count:2;
	column-count:2;
	margin-bottom: 5px;
	font-size: 1em;
	color: #444;
}
.keySkills {
	list-style-type: none;
	-moz-column-count:3;
	-webkit-column-count:3;
	column-count:3;
	margin-bottom: 20px;
	font-size: 1em;
	color: #444;
}
.keystages {	margin-bottom: 0px;}
.keySkills ul li {
	margin-bottom: 3px;
}

@media all and (min-width: 602px) and (max-width: 800px) {
	#headshot {
		display: none;
	}
	
	.keySkills {
	-moz-column-count:2;
	-webkit-column-count:2;
	column-count:2;
	}
}

@media all and (max-width: 601px) {
	#cv {
		width: 95%;
		margin: 10px auto;
		min-width: 280px;
	}
	
	#headshot {
		display: none;
	}
	
	#name, #contactDetails {
		float: none;
		width: 100%;
		text-align: center;
	}
	
	.sectionTitle, .sectionContent {
		float: none;
		width: 100%;
	}
	
	.sectionTitle {
		margin-left: -2px;
		font-size: 1.25em;
	}
	
	.keySkills {
		-moz-column-count:2;
		-webkit-column-count:2;
		column-count:2;
	}
}

@media all and (max-width: 480px) {
	.mainDetails {
		padding: 15px 15px;
	}
	
	section {
		padding: 15px 0 0;
	}
	
	#mainArea {
		padding: 0 25px;
	}

	
	.keySkills {
	-moz-column-count:1;
	-webkit-column-count:1;
	column-count:1;
	}
	
	#name h1 {
		line-height: .8em;
		margin-bottom: 4px;
	}
}

@media print {
    #cv {
        width: 100%;
    }
}

@-webkit-keyframes reset {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes reset {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@-moz-keyframes fade-in {
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes reset {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

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

.instaFade {
    -webkit-animation-name: reset, fade-in;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-timing-function: ease-in;
	
	-moz-animation-name: reset, fade-in;
    -moz-animation-duration: 1.5s;
    -moz-animation-timing-function: ease-in;
	
	animation-name: reset, fade-in;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
}

.quickFade {
    -webkit-animation-name: reset, fade-in;
    -webkit-animation-duration: 2.5s;
    -webkit-animation-timing-function: ease-in;
	
	-moz-animation-name: reset, fade-in;
    -moz-animation-duration: 2.5s;
    -moz-animation-timing-function: ease-in;
	
	animation-name: reset, fade-in;
    animation-duration: 2.5s;
    animation-timing-function: ease-in;
}
 
.delayOne {
	-webkit-animation-delay: 0, 1s;
	-moz-animation-delay: 0, 1s;
	animation-delay: 0, 1s;
}

.delayTwo {
	-webkit-animation-delay: 0, 1.5s;
	-moz-animation-delay: 0, 1.5s;
	animation-delay: 0, 1.5s;
}

.delayThree {
	-webkit-animation-delay: 0, 2.5s;
	-moz-animation-delay: 0, 2.5s;
	animation-delay: 0, 2.5s;
}

.delayFour {
	-webkit-animation-delay: 0, 6s;
	-moz-animation-delay: 0, 6s;
	animation-delay: 0, 6s;
}

.delayFive {
	-webkit-animation-delay: 0, 20s;
	-moz-animation-delay: 0, 20s;
	animation-delay: 0, 20s;
}