@font-face {
    font-family: 'mulibold';
    src: url('../fonts/muli/muli-bold-webfont.eot');
    src: url('../fonts/muli/muli-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/muli/muli-bold-webfont.woff2') format('woff2'),
         url('../fonts/muli/muli-bold-webfont.woff') format('woff'),
         url('../fonts/muli/muli-bold-webfont.ttf') format('truetype'),
         url('../fonts/muli/muli-bold-webfont.svg#mulibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mulibolditalic';
    src: url('../fonts/muli/muli-bolditalic-webfont.eot');
    src: url('../fonts/muli/muli-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/muli/muli-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/muli/muli-bolditalic-webfont.woff') format('woff'),
         url('../fonts/muli/muli-bolditalic-webfont.ttf') format('truetype'),
         url('../fonts/muli/muli-bolditalic-webfont.svg#mulibolditalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mulisemibolditalic';
    src: url('../fonts/muli/muli-semi-bolditalic-webfont.eot');
    src: url('../fonts/muli/muli-semi-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/muli/muli-semi-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/muli/muli-semi-bolditalic-webfont.woff') format('woff'),
         url('../fonts/muli/muli-semi-bolditalic-webfont.ttf') format('truetype'),
         url('../fonts/muli/muli-semi-bolditalic-webfont.svg#mulisemibolditalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mulisemibold';
    src: url('../fonts/muli/muli-semibold-webfont.eot');
    src: url('../fonts/muli/muli-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/muli/muli-semibold-webfont.woff2') format('woff2'),
         url('../fonts/muli/muli-semibold-webfont.woff') format('woff'),
         url('../fonts/muli/muli-semibold-webfont.ttf') format('truetype'),
         url('../fonts/muli/muli-semibold-webfont.svg#mulisemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'muliextralight';
    src: url('../fonts/muli/muli-extralight-webfont.eot');
    src: url('../fonts/muli/muli-extralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/muli/muli-extralight-webfont.woff2') format('woff2'),
         url('../fonts/muli/muli-extralight-webfont.woff') format('woff'),
         url('../fonts/muli/muli-extralight-webfont.ttf') format('truetype'),
         url('../fonts/muli/muli-extralight-webfont.svg#muliextralight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'muliextralightitalic';
    src: url('../fonts/muli/muli-extralightitalic-webfont.eot');
    src: url('../fonts/muli/muli-extralightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/muli/muli-extralightitalic-webfont.woff2') format('woff2'),
         url('../fonts/muli/muli-extralightitalic-webfont.woff') format('woff'),
         url('../fonts/muli/muli-extralightitalic-webfont.ttf') format('truetype'),
         url('../fonts/muli/muli-extralightitalic-webfont.svg#muliextralightitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mulilight';
    src: url('../fonts/muli/muli-light-webfont.eot');
    src: url('../fonts/muli/muli-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/muli/muli-light-webfont.woff2') format('woff2'),
         url('../fonts/muli/muli-light-webfont.woff') format('woff'),
         url('../fonts/muli/muli-light-webfont.ttf') format('truetype'),
         url('../fonts/muli/muli-light-webfont.svg#mulilight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mulilightitalic';
    src: url('../fonts/muli/muli-lightitalic-webfont.eot');
    src: url('../fonts/muli/muli-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/muli/muli-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/muli/muli-lightitalic-webfont.woff') format('woff'),
         url('../fonts/muli/muli-lightitalic-webfont.ttf') format('truetype'),
         url('../fonts/muli/muli-lightitalic-webfont.svg#mulilightitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'muliregular';
    src: url('../fonts/muli/muli-webfont.eot');
    src: url('../fonts/muli/muli-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/muli/muli-webfont.woff2') format('woff2'),
         url('../fonts/muli/muli-webfont.woff') format('woff'),
         url('../fonts/muli/muli-webfont.ttf') format('truetype'),
         url('../fonts/muli/muli-webfont.svg#muliregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'muliregularitalic';
    src: url('../fonts/muli/muli-italic-webfont.eot');
    src: url('../fonts/muli/muli-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/muli/muli-italic-webfont.woff2') format('woff2'),
         url('../fonts/muli/muli-italic-webfont.woff') format('woff'),
         url('../fonts/muli/muli-italic-webfont.ttf') format('truetype'),
         url('../fonts/muli/muli-italic-webfont.svg#muliregularitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'josefin_sansbold';
    src: url('../fonts/josefin-sans/josefinsans-bold-webfont.woff2') format('woff2'),
         url('../fonts/josefin-sans/josefinsans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'josefin_sanslight';
    src: url('../fonts/josefin-sans/josefinsans-light-webfont.woff2') format('woff2'),
         url('../fonts/josefin-sans/josefinsans-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'josefin_sansregular';
    src: url('../fonts/josefin-sans/josefinsans-regular-webfont.woff2') format('woff2'),
         url('../fonts/josefin-sans/josefinsans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'josefin_sansthin';
    src: url('../fonts/josefin-sans/josefinsans-thin-webfont.woff2') format('woff2'),
         url('../fonts/josefin-sans/josefinsans-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


*{
	margin: 0px;
	padding: 0px;
}

body{
	display: flex;
	flex-direction: column;
	background-color: #F8F8F8;
	font-family: "muliregular";
	font-size: 14px;
}

strong{
	font-family: "mulibold";
}

h1{
	margin: 15px 0px 20px 0px;
	font-family: "mulibold";
	font-size: 2.4em;
	color: #137FEB;
	text-align: center;

}

h2{
	margin: 0px 0px 25px 0px;
	font-family: "josefin_sanslight";
	font-size: 2em;
	color: #000;
}

a{
	color: #666;
}

p{
	margin: 10px 0px 10px 0px;
}

ul{
	list-style-type: none;
}

.italic{
	font-family: "muliregularitalic";
}
.light{
	font-family: "mulilight";
}
.light-italic{
	font-family: "mulilightitalic";
}



/************************ FIN GÉNÉRALES *************************/

/**************************** PROFIL ****************************/




#profil{
	display: none;
}



/************************** FIN PROFIL **************************/

/****************************** NAV *****************************/




nav{
	z-index: 2;
	position: fixed;
	top: 0px;
	display: flex;
	background-color: rgba(255,255,255,0.96);
	width: 100%;
	height: 86px;
	box-shadow: 0px 26px 20px -30px rgba(0, 0, 0, 0.26);
	padding-top: 8px;
	padding-bottom: 22px;
	box-sizing: border-box;
	transition-duration: 0.2s;
}

nav ul{
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

nav li p{
	padding-top: 55px;
}

nav li{
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	box-sizing: border-box;
	height: 40px;
	width: 25%;
	position: relative;
	top: 8px;
}

nav li + li{
	border-left: solid 1px #DDD;
}

nav li a{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	background-repeat: no-repeat;
	background-position: center;
	text-decoration: none;
	color: #444;
	font-family: "mulisemibold";
	position: relative;
	bottom: 8px;
}

nav span{
	display: none;
}

nav span.respdisp{
	display: block;
}

#picperso{
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2),  rgba(255, 255, 255, 0.2)),
	url('../img/avatar.png');
	background-size: cover, 35px;
}

#picform{
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2),  rgba(255, 255, 255, 0.2)),
	url('../img/form.png')
	;
	background-size: cover, 29px;
}

#picportfolio{
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2),  rgba(255, 255, 255, 0.2)),
	url('../img/portfolio.png');
	background-size: cover, 36px;
}

#piccontact{
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2),  rgba(255, 255, 255, 0.2)),
	url('../img/contact.png');
	background-size: cover, 30px;
}

#pgindex #picperso{
	background-image: url('../img/avatar_color.png');
	color: #137FEF;
	background-size: 35px;
}

#pgform-exp #picform{
	background-image: url('../img/form_color.png');
	color: #137FEF;
	background-size: 29px;
}

#pgportfolio #picportfolio{
	background-image: url('../img/portfolio_color.png');
	color: #137FEF;
	background-size: 36px;
}

#pgcontact #piccontact{
	background-image: url('../img/contact_color.png');
	color: #137FEF;
	background-size: 30px;
}


@media all and (max-height: 680px){

	nav{
		height: 65px;
		padding-top: 6px;
	}

	nav a p{
		padding-top: 44px;
		font-size: 0.96em;
	}

	#picperso{
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2),  rgba(255, 255, 255, 0.2)),
		url('../img/avatar.png');
		background-size: cover, 24px;
	}

	#picform{
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2),  rgba(255, 255, 255, 0.2)),
		url('../img/form.png')
		;
		background-size: cover, 21px;
	}

	#picportfolio{
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2),  rgba(255, 255, 255, 0.2)),
		url('../img/portfolio.png');
		background-size: cover, 25px;
	}

	#piccontact{
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2),  rgba(255, 255, 255, 0.2)),
		url('../img/contact.png');
		background-size: cover, 21px;
	}

	#pgindex #picperso{
		background-image: url('../img/avatar_color.png');
		color: #137FEF;
		background-size: 24px;
	}

	#pgform-exp #picform{
		background-image: url('../img/form_color.png');
		color: #137FEF;
		background-size: 21px;
	}

	#pgportfolio #picportfolio{
		background-image: url('../img/portfolio_color.png');
		color: #137FEF;
		background-size: 25px;
	}

	#pgcontact #piccontact{
		background-image: url('../img/contact_color.png');
		color: #137FEF;
		background-size: 21px;
	}

}



/************************** FIN NAV **************************/

/*************************** MAIN ****************************/

/************************* A PROPOS **************************/




main{
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: white;
	margin-bottom: 70px;
	width: 100%;
	box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	padding: 90px 20px 0px 20px;
	font-size: 1.2em;
	font-family: "mulilight";
	transition-duration: 0.2s;
}

.container{
	margin: 30px 0px 20px 0px; /* 26px 0px 4px 0px */
}

main hr{
	position: relative;
	right: 20px;
	width: calc(100% + 38px);
}

.grey{
	color: #999;
}


#pgindex .container{
	padding-left: 10px;
}

#pgindex .container h2{
	position: relative;
	right: 10px;
	margin-bottom: 15px;
}


/*********** Infos ************/

#infos.container{
	display: flex;
	align-items: center;
	position: relative;
	height: 480px;
	margin-top: 40px;
}

#infos div:last-child{
	position: absolute;
	top: 8px;
	right: 40vw;
	width: 50vw;
	z-index: 1;
}

#infos p{
	margin: 6px 0px 8px 0px;
}

#infos span{
	padding-right: 7px;
	border-radius: 3px;
	background-color: white;
}

#infos a{
	color: #999;
	transition-duration: 0.05s;
	-webkit-transition-duration: 0.05s;
}

#infos a:hover{
	color: #666;
}

#pprofil{
	position: relative;
	right: -20px;
	top: -31px;
	width: 100%;
	height: 500px;
	background-image:
	linear-gradient(to right, rgba(255, 255, 255, 1),  rgba(255, 255, 255, 0)),
	/*linear-gradient(to top, rgba(255, 255, 255, 1),  rgba(255, 255, 255, 0)),
	linear-gradient(to bottom, rgba(255, 255, 255, 1),  rgba(255, 255, 255, 0)),*/
	url('../img/profil.jpg');
	background-size: 60% 500px, /*100% 60px, 100% 30px,*/ calc(10% + 330px);
	background-repeat: no-repeat, no-repeat/*, no-repeat, no-repeat*/;
	background-position: left, /*bottom, top,*/ top;
}


/********* Fin Infos **********/
/******** Compétences *********/

#competences{
	color: #999;
	margin-top: 40px;
}

#competences h2 + p{
	letter-spacing: normal;
	text-transform: none;
	font-family: "mulilightitalic";
	margin: 0px 0px 18px 0px;
}

#competences h2 + p span{
	text-decoration: underline;
}

#listcomp{
	font-family: "muliregular";
	text-transform: uppercase;
	line-height: 29px;
	font-size: 0.8em;
}

#listcomp span{
	letter-spacing: -1px;
}

.dev{
	color: #446CBF;
}

.design{
	color: #F5874C;
}

.market{
	color: #F6185F;
}

.langues{
	color: #546989;
	font-family: 'muliregular';
}

.langues img{
	width: 19px;
	height: 18px;
	margin-right: 12px;
	border-radius: 40px;
}

.s1{
	font-size: 1.6em;
}

.s2{
	font-size: 1.4em;
}

.s3{
	font-size: 1.2em;
}

.s4{
	font-size: 1em;
}

.s5{
	font-size: 0.8em;
}

.s6{
	font-size: 1.8em;
}

.s7{
	font-size: 1.06em;
}

.s8{
	font-size: 0.96em;
}

.s9{
	font-size: 1.73em;
}

.s10{
	font-size: 1.5em;
}

.s11{
	font-size: 1.28em;
}

.s12{
	font-size: 1.9em;
}

/****** Fin Compétences *******/
/********* Aptitudes **********/

div#aptitudes.container{
	padding-left: 0px;
}

#aptitudes.container h2{
	right: 0px;
}

#aptitudes ul{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#aptitudes li{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10px 0px 10px 0px;
	width: 100%;
}

#aptitudes li div{
	margin-right: 14px;
	width: calc(100% - 95px);
}

#aptitudes h3{
	font-family: "muliregular";
	font-size: 0.94em;
}

#aptitudes p{
	font-size: 0.80em;
	margin: 0px;
	line-height: 17px;
}

.aptimg{
	width: 58px;
	height: 58px;
	margin-right: 14px;
	margin-left: 20px;
}

#listcomp span.hrcomp{
	width: 100px !important;
	height: 300px !important;
	background-color: #666;
	text-align: center !important;
	margin: auto;
}



/******* Fin Aptitudes ********/


/************************ FIN A PROPOS ************************/

/******************* FORMATION EXPERIENCES ********************/




#pgform-exp main h2{
	font-size: 1.1em;
	margin: 20px 0px 4px 0px;
	font-family: 'mulibold';
}

#pgform-exp main h2 span{
	font-family: 'muliextralight';
}

.formimg{
	z-index: 1;
	margin: 0px;
	padding-top: 44px;
	height: 64px;
	background-color: #FFF;
}

.formtxt{
	margin-top: 0px;
	margin-bottom: 16px;
	margin-left: 31px;
	border-left: 2px solid #CCC;
	padding-left: 50px;
	position: relative;
	bottom: 80px;
}

.formtxt > div{
	position: relative;
	top: 80px;
}

.formtxt p{
	margin: 0px;
	font-size: 0.86em;
	color: #8F8F8F;
	font-family: 'muliregular';
}

p.formyear{
	color: #2074C4;
	font-size: 0.92em;
}

.formpuce{
	z-index: 1;
	height: 12px;
	width: 12px;
	border-radius: 20px;
	background-color: #2074C4;
	position: relative;
	top: 42px;
	right: 57px;
}

#formtxtexp{
	bottom: 3px;
}

#formtxtexp > div{
	top: 3px;
}




/***************** FIN FORMATION EXPERIENCES ******************/

/************************* PORTFOLIO **************************/



#pgportfolio main h2{
	font-size: 1.1em;
	margin: 0px 0px 6px 33px;
	font-family: 'mulibold';
	transition-duration: 0.1s;
	color: #444;
	line-height: 14px;
}

.border-left{
	width: 44px;
	height: 44px;
	background-color: #137FEB;
	position: absolute;
	left: -30px;
}

#pgportfolio main h2:hover{
	color: #777;
}

#pgportfolio h4{
	margin: 20px 0px 10px 0px;
	font-size: 1.2em;
	color: #2074C4;
	font-family: 'muliextralight';
}

#pgportfolio main a{
	text-decoration: none;
}

.portdiv{
	margin: 38px 10px 30px 10px;
	position: relative;
}

.ptimg{
	margin: 15px 0px 15px 0px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

@keyframes animBg1{
	0%{	
    background-position: 0px 1%;
	}
	8%{
	background-position: 0px 1%;
	}
	20%{	
    background-position: 0px  16.2%;
	}
	25%{	
    background-position: 0px  16.2%;
	}
	83%{	
    background-position: 0px 83.8%;
	}
	87%{	
    background-position: 0px 83.8%;
	}
	100%{	
    background-position: 0px 99%;
	}
}

@keyframes animBg2{
	0%{	
    background-position: 0px 0px;
	}
	11%{
	background-position: 0px 0px;
	}
	17%{	
    background-position: 100% 0px;
	}
	28%{	
    background-position: 100% 0px;
	}
	34%{
    background-position: 100% 50%;
	}
	45%{
    background-position: 100% 50%;
	}
	50%{
    background-position: 200% 50%;
	}
	61%{
    background-position: 200% 50%;
	}
	67%{
    background-position: 200% 100%;
	}
	78%{
    background-position: 200% 100%;
	}
	84%{
    background-position: 300% 100%;
	}
	96%{
    background-position: 300% 100%;
	}
	100%{
	background-position: 400% 0px;
	}
}

@keyframes animBg3{
	0%{	
    background-position: 50% 0px;
	}
	14%{	
    background-position: 50% 0px;
	}
	84%{
	background-position: 50% 100%;
	}
	90%{
	background-position: 50% 100%;
	}
	100%{
	background-position: 50% calc(100% - 194px);
	}
}

@keyframes animBg4{
	0%{	
    background-position: 0px 1%;
	}
	9%{
	background-position: 0px 1%;
	}
	20%{	
    background-position: 0px 23.5%;
	}
	25%{	
    background-position: 0px 23.5%;
	}
	83%{	
    background-position: 0px 100%;
	}
	87%{	
    background-position: 0px 100%;
	}
	100%{	
    background-position: 0px 122%;
	}
}

@keyframes animBg5{
	0%{	
    background-position: 0px 0px;
	}
	11%{	
    background-position: 0px 0px;
	}
	72%{
	background-position: 0px 100%;
	}
	83%{
	background-position: 0px 100%;
	}
	100%{
	background-position: 0px 121%;
	}
}

@keyframes animBg6{
	0%{	
    background-position: 0px 0px;
	}
	14%{
	background-position: 0px 0px;
	}
	30%{	
    background-position: 0px 60%;
	}
	40%{	
    background-position: 0px 60%;
	}
	70%{	
    background-position: 0px 100%;
	}
	85%{	
    background-position: 0px 100%;
	}
	100%{	
    background-position: 0px 160%;
	}
}

@keyframes animBgSeysamFront{
	0%{	
    background-position: 0px 0px;
	}
	11%{
	background-position: 0px 0px;
	}
	62%{	
    background-position: 0px calc(100% + 170px);
	}
	67%{	
    background-position: 0px calc(100% + 170px);
	}
	80%{	
    background-position: 0px 100%;
	}
	90%{	
    background-position: 0px 100%;
	}
	100%{	
    background-position: 0px calc(100% - 400px);
	}
}


.ptimg1{
	background-position: 0px 0px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.05);
	background-image: url('../img/SliderHome.jpg');
	animation: animBg1 50s cubic-bezier(.2,.01,.8,.99) infinite;
	background-color: #EEE;
	height: 400px;
	width: 486px;
	margin: 0px 18px 0px 0px;
	background-repeat: no-repeat;
	background-size: cover;
}

.ptimg2{
	background-position: 0px 0px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.05);
	background-image: url('../img/SliderPerso.jpg');
	animation: animBg2 38s ease-in-out infinite;
	background-color: #EEE;
}

.ptimg3{
	background-position: 0px 0px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.05);
	background-image: url('../img/SliderResp.jpg');
	animation: animBg3 32s cubic-bezier(.1,.01,.9,.99) infinite;
	background-color: #EEE;
	background-size: cover;
}

.ptimg4{
	background-position: 0px 0px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.05);
	background-image: url('../img/Atocomics.jpg');
	animation: animBg4 36s cubic-bezier(.2,.01,.8,.99) infinite;
	background-color: #EEE;
	height: 400px;
	width: 486px;
	margin: 0px 18px 0px 0px;
	background-size: cover;
}

.ptimg-seysam-front{
	background-position: 0px 0px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.05);
	background-image: url('../img/Seysam.jpg');
	animation: animBgSeysamFront 34s cubic-bezier(.2,.01,.8,.99) infinite;
	background-color: #EEE;
	height: 400px;
	width: 486px;
	margin: 0px 18px 0px 0px;
	background-size: cover;
}

.ptimg-seysam-back{
	background-position: 0px 0px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.05);
	background-image: url('../img/Seysam-back.jpg');
	background-color: #EEE;
	height: 400px;
	width: 243px;
	background-size: cover;
}

.ptimg5{
	background-position: 0px 0px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.05);
	background-image: url('../img/Atocomics_m.jpg');
	animation: animBg5 26s cubic-bezier(.1,.01,.9,.99) infinite;
	background-color: #EEE;
	background-size: cover;
}

.ptimg6{
	background-position: center;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.05);
	background-image: url('../img/BeParis.jpg');
	background-color: #EEE;
	height: 400px;
	width: 748px;
	animation: animBg6 22s cubic-bezier(.2,.01,.8,.99) infinite;
	margin: 0px 0px 0px 0px;
	background-size: cover;
}


.iframe-total{
	height: 450px;
	width: 100%;
	border: none;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}
@media screen and (max-width: 500px) {
	.iframe-total{
		height: 600px;
	}
	
}

.ptcontainer{
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.ptimg2, .ptimg3, .ptimg5{
	height: 240px;
}

.pthover{
	height: 50px;
	width: 100%;
	background-color: rgba(0,0,0,0.36);
	text-align: center;
	color: #FFF;
	transition-duration: 0.4s;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.2em;
	font-family: "muliregular";
	letter-spacing: 3px;
}

.portdiv p{
	margin: 0px;
	font-size: 0.86em;
	color: #8F8F8F;
	font-family: 'muliregular';
}

.portdiv .material-icons{
	font-size: 1.6em;
	position: relative;
	top: 11px;
	right: 5px;
	transition-duration: 0.2s;
}

.portdiv h2:hover .material-icons{
	transform: rotate(90deg);
	top: 10px;
}



.ptimg > a *, .ptcontainer > a *{
	max-height: 300px;
}

.ptimg > a, .ptcontainer > a{
	width: calc(100% + 60px);
	margin: 15px 0px 5px 0px;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.16);
}

.ptimg > a > *, .ptcontainer a > *{
	width: 100%;
}

.ptimg > a, .ptcontainer{
	position: relative;
	right: 30px;
}


.error-para{
	font-size: 0.86em;
	color: #FF9977;
}



/*********************** FIN PORTFOLIO ************************/

/************************** CONTACT ***************************/


#ctmap{
	margin-top: 0px;
	width: calc(100% + 40px);
	height: 200px;
	position: relative;
	left: -20px;
}

.overlay {
   display: none;
}

#ctmap iframe{
	width: 100%;
	height: 200px;
	opacity: 0.36;
	transition-duration: 0.4s;
	background-color: #FFF;
	overflow: none;
}

#ctmap p{
	position: absolute;
	top: 42px;
	left: calc(50% - 133px);
	font-size: 1.26em;
	font-family: "muliextralight";
	letter-spacing: 4px;
	line-height: 28px;
	text-align: center;
	transform: rotate(-1deg);
	color: #222;
	text-shadow: 0px 0px 60px rgba(255, 255, 255, 1);
	transition: all 0.3s, top 0.12s ease 0.8s;
}

#ctmap p .span1{
	font-size: 23px;
	line-height: 19px;
	letter-spacing: 5px;
	font-style: italic;
}

#ctmap p .span2{
	color: #F6304F;
	line-height: 32px;
	letter-spacing: 10px;
	font-size: 1.16em;
	font-family: "mulibold";
}

#ctmap:hover p{
	opacity: 0;
	transform: rotate(-6deg);
	font-size: 0.5em;
	left: calc(50% - 78px);
	top: -100vh;
	cursor: default;
}

#ctmap:hover iframe{
	opacity: 1;
}


#ctform{
	margin-top: 30px;
	margin-bottom: 5px;
	color: #666;
}

#ctform h2{
	font-size: 2em;
	font-family: "josefin_sanslight";
	margin-left: 30px;
	margin-bottom: 23px;
}

#ctform form{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#ctform form > div{
	display: flex;
	margin: 12px 0px 12px 0px;
	position: relative;
	width: 90%;
}

#ctform label{
	width: 100px;
	text-align: left;
	color: #8DACEA;
	position: absolute;
	left: 8px;
	top: -2px;
	transition-duration: 0.2s;
}

#ctform textarea + label{
	left: 11px;
}

#ctform label:hover{
	cursor: text;
}

#ctform input, #ctform textarea{
	width: 100%;
	border: none;
	background-color: #FBF8FF;
	box-shadow: 0px 0px 13px rgba(247, 240, 255, 0.86);
	font-family: "muliregular";
	color: #666;
	transition-duration: 0.1s;
}

#ctform input:focus, #ctform textarea:focus, #ctform input:hover, #ctform textarea:hover{
	background-color: #F5F2FF;
}

#ctform input:focus, #ctform textarea:focus{
	outline: none;
}

#ctform input:focus + label, #ctform textarea:focus + label, #ctform input:valid + label, #ctform textarea:valid + label{
	font-size: 0.78em;
	top: -18px;
	left: 3px;
}

#ctform input{
	border-bottom: 3px solid #B0CDF4;
	padding-left: 6px;
	box-sizing: border-box;
	font-size: 0.92em;
	height: 27px;
}

#ctform textarea{
	border-left: 3px solid #B0CDF4;
	padding: 2px 5px 2px 5px;
	box-sizing: border-box;
	font-size: 0.86em;
}

#ctform .bouton{
	margin-top: 16px;
	width: 100%;
	height: 47px;
	padding: 0px 0px 0px 0px;
	background-color: #FBF8FF;
	border: 1px solid #8DACEA;
	color: #8DACEA;
	font-family: "mulibold";
	font-size: 1.28em;
	letter-spacing: 4px;
	box-sizing: border-box;
	transition-duration: 0.12s;
}

#ctform .bouton:hover{
	background-color: #A2BFF2;
	border-color: #A2BFF2;
	color: #FFF;
	cursor: pointer;
}

#ctelse{
	margin-top: 34px;
	margin-bottom: 0px;
	text-align: center;
	font-size: 0.9em;
}

#ctelse a{
	text-decoration: none;
	color: #222;
	margin-right: 3px;
	transition-duration: 0.06s;
}

#ctelse i{
	font-size: 1.2em;
	position: relative;
	top: 5px;
	right: -1px;
	transition-duration: 0.09s;
}

#ctelse a:hover{
	color: #888;
}

#ctelse a:hover i{
	right: 1px;
}


/******** retour notifs ********/



.confirm-true{
	background-color: rgba(66, 255, 140, 0.13);
	text-align: center;
	position: relative;
	padding: 6px;
	border-radius: 10px;
}
.confirm-true, .confirm-true h2{
	color: #0E622C;
}

.confirm-true h2{
	margin: 0px !important;
}

.confirm-true i.material-icons{
	position: absolute;
	left: 12px;
	bottom: 24px;
	font-size: 2.3em;
}



.confirm-false{
	background-color: rgba(217, 30, 24, 0.13);
	text-align: center;
	position: relative;
	padding: 6px;
	border-radius: 10px;
}
.confirm-false, .confirm-false h2{
	color: #633;
}

.confirm-false h2{
	margin: 0px !important;
}


/*
#notifok{
	position: absolute;
	top: 0px;
	width: 100%;
	background-color: rgba(66, 255, 140, 0.13);
	color: #0E622C;
	text-align: center;
	z-index: 6;
	padding: 13px 0px 12px 0px;
}

#notifnok{
	position: absolute;
	top: 0px;
	width: 100%;
	background-color: rgba(217, 30, 24, 0.13);
	color: #633;
	text-align: center;
	z-index: 6;
	padding: 6px 0px 11px 0px;
}

#notifok span, #notifnok span{
	font-size: 1.4em;
}
*/

/****** fin notifs ******/



/************************ FIN CONTACT *************************/


/************ Top *************/

#top{
	position: relative;
	left: -20px;
	background-color: rgba(37, 116, 189, 0.2);
	width: 100vw;
	height: 46px;
	margin-top: 38px;
	text-align: center;
	text-decoration: none;
	color: #3A7EB4;
	transition: color 0.2s, background-color 0.35s;
}

#top:hover{
	background-color: rgba(37, 116, 189, 0.36);
	color: #FFF;
}

#top .material-icons{
	font-size: 46px !important;
}

/********** Fin Top ***********/

/*********** Down *************/


#down{
	z-index: 2;
	display: none;
	position: fixed;
	bottom: -13px;
	left: calc(50% + 136px);
	color: rgba(50, 136, 209, 0.66);
	transition-duration: 0.34s;
	-moz-animation: bounce 5s infinite;
	-webkit-animation: bounce 5s infinite;
	animation: bounce 5s infinite;
}

#down i{
	font-size: 3em;
}

@keyframes bounce {
  0%,
  55%,
  65%,
  80%,
  100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  60% {
    -moz-transform: translateY(-18px);
    -ms-transform: translateY(-18px);
    -webkit-transform: translateY(-18px);
    transform: translateY(-18px);
  }
  70% {
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

.downnone{
	bottom: -70px !important;
}


/********* Fin Down ***********/

/********* Copyright **********/

#copyright{
	position: absolute;
	bottom: -55px;
	left: calc(50% - 73px);
	font-size: 0.8em;
	color: #AAA;
}

/******* Fin Copyright ********/