@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";
	width: 1120px;
}

body:after{
 display:none;
 content: url(../img/linkedin_color.png) url(../img/viadeo_color.png) url(../img/envelope_color.png) url(../img/envelope_color.png) url(../img/github_color.svg) url(../img/avatar_color.png) url(../img/form_color.png) url(../img/portfolio_color.png) url(../img/contact_color.png);
}

strong{
	font-family: "mulibold";
}

h1{
	margin: 15px 0px 18px 0px;
	font-family: "mulibold";
	font-size: 1.4em;
	color: #137FEB;

}

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

a{
	color: #666;
}

p{
	margin: 10px 0px;
}

ul{
	list-style-type: none;
}

.italic{
	font-family: "muliregularitalic";
}
.light{
	font-family: "mulilight";
}
.light-italic{
	font-family: "mulilightitalic";
}
.small{
	font-size: 0.96em;
}
.material-fix{
	position: relative;
	bottom: -6px;
}
.mat-fix-small{
	position: relative;
	bottom: -3px;
	font-size: 1em;
}


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

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




#profil{
	z-index: 2;
	position: absolute;
	left: calc(50% - 570px);
	top: 75px;
	display: flex;
	flex-direction: column;
	background-color: white;
	width: 275px;
	height: 540px;
	box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.12);
}

@media all and (max-width: 1140px){
	#profil{
		display: none;
	}
}

.profil{
	position: fixed !important;
	top: 0px !important;
	z-index: 10 !important;
}

#photoprofil{
	width: 275px;
}

#profil h2{
	margin: 14px 0px 5px 0px;
	color: #000;
	margin-top: 22px;
	font-family: "josefin_sansregular";
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
	font-size: 1.4em;
	text-align: center;
}

#profil h2 strong{
	font-family: "josefin_sansbold";
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-font-smoothing: subpixel-antialiased;
	font-smoothing: subpixel-antialiased;
}

#profil h3{
	font-family: "mulisemibold";
	color: #CCC;
	letter-spacing: 4.4px;
	margin-bottom: 20px;
	margin-top: 0px;
	text-align: center;
}

#rs{
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#rs a{
	padding: 8px;
	border: solid 1px #000;
	border-radius: 50px;
	width: 26px;
	height: 26px;
	margin-left: 8px;
	margin-right: 8px;
	background-repeat: no-repeat;
	background-position: center;
}

#piclinkedin{
	background-image: url('../img/linkedin.png'),linear-gradient(#FFF,#FFF), url('../img/linkedin_color.png');
	background-size: 25px;
}

#piclinkedin:hover{
	background-image: url('../img/linkedin_color.png');
	border: solid 1px #0077B5;
}

#picviadeo{
	background-image: url('../img/viadeo.png'),linear-gradient(#FFF,#FFF), url('../img/viadeo_color.png');
	background-size: 30px;
}

#picviadeo:hover{
	background-image: url('../img/viadeo_color.png');
	border: solid 1px #FF7E00;
}

#picmail{
	background-image: url('../img/envelope.png'),linear-gradient(#FFF,#FFF), url('../img/envelope_color.png');
	background-size: 23px;
}

#picmail:hover{
	background-image: url('../img/envelope_color.png');
	border: solid 1px #2AD069;
}

#picgit{
	background-image: url('../img/github.svg'),linear-gradient(#FFF,#FFF), url('../img/github_color.svg');
	background-size: 23px;
}

#picgit:hover{
	background-image: url('../img/github_color.svg');
	border: solid 1px #1060E8;
}





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

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




nav{
	z-index: 2;
	position: absolute;
	right: calc(50% - 570px);
	top: 75px;
	display: flex;
	background-color: white;
	width: 830px;
	height: 162px;
	box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
	transition: height 0.4s, right 0.2s;
	-webkit-transition: height 0.4s, right 0.2s;
}


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

nav li p{
	padding-top: 90px;
	transition: padding-top 0.2s;
}

nav li{
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 204px;
	height: 110px;
	transition: height 0.2s;
}

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

nav li a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 80px;
	background-repeat: no-repeat;
	background-position: center;
	text-decoration: none;
	color: #000;
	font-family: "mulisemibold";
	transition: all 0.2s, color 0s;
}

nav li a:hover{
	color: #137FEF;
}


nav.nav{
	position: fixed;
	top: 0px !important;
	box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
	height: 108px;
	z-index: 10;
}
nav.nav li{
	height: 78px;
}
nav.nav li a{
	height: 44px;
}
nav.nav li p{
	padding-top: 74px;
}


nav .respdisp{
	display: none;
}

#picperso{
	background-image: url('../img/avatar.png'),linear-gradient(#FFF,#FFF), url('../img/avatar_color.png');
	background-size: 45px;
}

nav.nav #picperso{
	background-size: 39px;
}

#picperso:hover{
	background-image: url('../img/avatar_color.png');
}

#picform{
	background-image: url('../img/form.png'),linear-gradient(#FFF,#FFF), url('../img/form_color.png');
	background-size: 39px;
}

nav.nav #picform{
	background-size: 33px;
}

#picform:hover{
	background-image: url('../img/form_color.png');
}

#picform p{
	padding-top: 95px;
	line-height: 17px;
}

nav.nav #picform p{
	padding-top: 76px;
}

#picportfolio{
	background-image: url('../img/portfolio.png'),linear-gradient(#FFF,#FFF), url('../img/portfolio_color.png');
	background-size: 46px;
}

nav.nav #picportfolio{
	background-size: 40px;
}

#picportfolio:hover{
	background-image: url('../img/portfolio_color.png');
}

#piccontact{
	background-image: url('../img/contact.png'),linear-gradient(#FFF,#FFF), url('../img/contact.png');
	background-size: 41px;
}

nav.nav #piccontact{
	background-size: 35px;
}

#piccontact:hover{
	background-image: url('../img/contact_color.png');
}

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

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

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

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


/************** Date *************/

	#date{
		position: absolute;
		top: 570px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#calendar{
		width: 152px;
		display: flex;
		justify-content: space-around;
	}

	.calendarblock{
		height: 42px;
		width: 42px;
		background-color: rgba(0,0,0,0.1);
		border-radius: 4px;
		/*border-bottom-right-radius: 12px;*/
		text-align: center;
	}

	.calendarblock:first-child{
		border-bottom-left-radius: 12px;
	}

	.calendarblock:last-child{
		border-top-right-radius: 12px;
	}

	.calendarblock p{
		font-family: "josefin_sansthin";
		font-size: 1.5em;
		position: relative;
		top: -3px;
	}

	#horloge{
		width: 110px;
		height: 94px;
		border: solid 1px white;
		border-radius: 27px;
		background-color: rgba(0,0,0,0.12);
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		box-shadow: 0px 0px 50px rgba(0,0,0,0.14);
	}

	#secondes{
		width: 1px;
		height: 36px;
		border-top: solid 36px rgb(60,120,255);
		position: relative;
		right: 7px;
		top: 1px;
		z-index: 3;
	}
	#min{
		width: 1px;
		height: 30px;
		border-top: solid 30px rgb(0,0,0);
		position: relative;
		right: 8px;
		top: 1px;
		z-index: 2;
	}
	#heure{
		width: 2px;
		height: 19px;
		border-top: solid 19px rgb(145,145,145);
		position: relative;
		right: 9px;
		top: 1px;
		z-index: 1;
	}
	#heure .datepoint{
		width: 2px;
		height: 2px;
		background-color: rgb(160,160,160);
		position: relative;
		top: -20px;
		transform: rotate(45deg);
		z-index: 1;
	}

	.watchtrait{
		position: relative;
		background-color: black;
	}
	#watch12{
		bottom: calc(50% - 6px);
		left: 11px;
		width: 1px;
		height: 8px;
	}
	#watch6{
		top: calc(50% - 6px);
		left: 2px;
		width: 1px;
		height: 8px;
	}
	#watch3{
		left: calc(50% - 7px);
		width: 8px;
		height: 1px;
	}
	#watch9{
		right: calc(50% - 7px);
		width: 8px;
		height: 1px;
	}


/********** fin date *********/


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

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

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




main{
	position: absolute;
	right: calc(50% - 570px);
	top: 100vh;
	display: flex;
	flex-direction: column;
	background-color: white;
	margin-bottom: 70px;
	width: 830px;
	box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	padding: 0px 30px 0px 30px;
	font-size: 1.1em;
	font-family: "mulilight";
	transition: right 0.2s;
}

@media all and (max-width: 1140px){

	main, nav{
		right: calc(50% - 415px);
	}

}

.container{
	margin: 34px 0px 10px 0px; /* 26px 0px 4px 0px */
}

main hr{
	width: 830px;
	position: relative;
	left: -30px;
}

.grey{
	color: #999;
}

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

#infos > div > p{
	margin: 10px 0px 12px 0px;
}

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

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

#infos br{
	display: none;
}

#infos-pres{
	margin: 40px 50px 6px 50px;
    text-align: justify;
    font-family: 'muliextralightitalic';
    color: #8A8A8A;
}
#infos-pres b{
	font-family: 'mulisemibolditalic';
}

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

#competences{
	color: #999;
}

#competences #comp-titles{
	letter-spacing: normal;
	text-transform: none;
	font-family: 'mulilightitalic';
	margin: 0px 0px 28px 10px;
}

#competences #comp-titles span{
	text-decoration: underline;
}

#competences #comp-titles span:hover{
	cursor: default;
}


#listcomp{
	font-family: "muliregular";
	text-transform: uppercase;
	line-height: 38px;
	margin:0;
}

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

.dev, .design, .market{
	transition-duration: 0.14s;
}

.dev{
	color: #446CBF;
}

.design{
	color: #F5874C;
}

.market{
	color: #F6185F;
}

.langues{
	color: #999/*#546989*/;
	font-family: 'mulilight';
	padding-top: 20px;
}

.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.76em;}
.s7{font-size: 1.06em;}
.s8{font-size: 0.96em;}
.s9{font-size: 1.71em;}
.s10{font-size: 1.5em;}
.s11{font-size: 1.28em;}
.s12{font-size: 1.82em;}
.s13{font-size: 1.14em;}
.s14{font-size: 1.34em;}


/* tous langages */

#lang-info{
	margin: 10px 0 26px 0;
}
#l-i-ctt{
	display: flex;
	/*justify-content: space-between;*/
}
#l-i-ctt > div{
	display: none;
	flex-direction: column;
	margin: 0 40px;
}
.mi-less{
	display: none;
}
.mi-more, .mi-less{
	transition-duration: 0.1s;
	margin: 0px 0px 10px 0px;
	font-size:20px;
}
.mi-more:hover, .mi-less:hover{
	cursor: pointer;
	color: #446CBF;
}
.mi-more:hover .material-icons{
	transform: rotate(180deg);
}
.mi-more .material-icons, .mi-less .material-icons{
	color: #446CBF;
	transition: transform 0.4s;
}
#l-i-ctt p > span{
	color: #446CBF;
}
#l-i-ctt .mat-fix-small{
	margin: 0px 4px;
}
#l-i-ctt h3{
	line-height: 1.1em;
    border-left: solid 1.06em #999;
    padding-left: 0.5em;
    margin: 10px 0px;
}


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

#aptitudes{
}

#aptitudes ul{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: space-around;
	margin-bottom: 20px;
	margin-top: 20px;
}

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

#aptitudes li div{
	margin-right: 14px;
	width: 160px;
}

#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;
}



/******* 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: 82px;
}

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

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

.formtxt p.formtxt-para{

}

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.24em;
	margin: 0px 0px 6px 35px;
	font-family: 'mulibold';
	transition-duration: 0.1s;
	color: #444;
}

.border-left{
	width: 20px;
	height: 20px;
	background-color: #137FEB;
	position: absolute;
	top: 16px;
}

#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;
}

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

@keyframes animBg1{
	0%{	
    background-position: 0px -3px;
	}
	7%{
	background-position: 0px -3px;
	}
	16%{	
    background-position: 0px -410px;
	}
	22%{	
    background-position: 0px -410px;
	}
	83%{	
    background-position: 0px calc(100% + 410px);
	}
	87%{	
    background-position: 0px calc(100% + 410px);
	}
	100%{	
    background-position: 0px calc(100% + 10px);
	}
}

@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: 0px 0px;
	}
	16%{	
    background-position: 0px 0px;
	}
	82%{
	background-position: 0px 100%;
	}
	89%{
	background-position: 0px 100%;
	}
	100%{
	background-position: 0px calc(100% - 194px);
	}
}

@keyframes animBg4{
	0%{	
    background-position: 0px 0px;
	}
	7%{
	background-position: 0px 0px;
	}
	16%{	
    background-position: 0px -400px;
	}
	22%{	
    background-position: 0px -400px;
	}
	83%{	
    background-position: 0px 100%;
	}
	87%{	
    background-position: 0px 100%;
	}
	100%{	
    background-position: 0px calc(100% - 400px);
	}
}

@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 calc(100% - 400px);
	}
}

@keyframes animBg6{
	0%{	
    background-position: 0px 0px;
	}
	14%{
	background-position: 0px 0px;
	}
	30%{	
    background-position: 0px -400px;
	}
	40%{	
    background-position: 0px -400px;
	}
	70%{	
    background-position: 0px 100%;
	}
	85%{	
    background-position: 0px 100%;
	}
	100%{	
    background-position: 0px calc(100% - 400px);
	}
}

@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 43s 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 35s 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 30s cubic-bezier(.1,.01,.9,.99) infinite;
	background-color: #EEE;
}

.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 20s 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 28s cubic-bezier(.2,.01,.8,.99) infinite;
	margin: 0px 0px 0px 0px;
	background-size: cover;
}
.ptimg-slider{
	background-position: center;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.05);
	background-image: url('../img/slider-cover.jpg');
	background-color: #EEE;
	height: 400px;
	width: 748px;
	margin: 0px 0px 0px 0px;
	background-size: cover;
}

.iframe-total{
	height: 400px;
	width: 748px;
	border: none;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
	transition-delay: 0.4s;
	transition-duration: 0.3s;
}
.iframe-total:hover{
	height: 530px;
}

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

.ptimg2, .ptimg3{
	height: 192px;
	width: 243px;
}

.ptimg5{
	height: 400px;
	width: 243px;
}

.pthover{
	height: inherit;
	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.26em;
	font-family: "muliregular";
	letter-spacing: 4px;
}

.ptcub:hover .pthover{
	height: 46px;
	background-color: rgba(0,0,0,0.5);
}

.ptimg1:hover .pthover, .ptimg4:hover .pthover, .ptimg5:hover .pthover, .ptimg6:hover .pthover, .ptimg-seysam-front:hover .pthover{
	height: 66px;
}

.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;
}

.portdiv{
	margin: 24px 10px 30px 10px;
	position: relative;
}
.portdiv > p > a:hover{
	color: #999;
}


#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: 4px;
	right: -1px;
	transition-duration: 0.09s;
}

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

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

.error-ctnr{	
	color: #FF6677;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.error-ctnr > div{
	font-size: 1.8em;
}
.error-para{
	font-size: 0.84em;
	text-align: center;
}

#port-plus-ctnr{
	text-align: center;
}
#port-plus-ctnr > p{
	color: #8F8F8F;
}
#port-plus-ctnr .material-icons{
	color: #1D74CA;
}
#port-plus-ctnr > p:hover{
	color: #1D74CA;
	cursor: pointer;
}




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

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


#ctmap{
	margin-top: 0px;
	width: 830px;
	position: relative;
	left: -30px;
}

/*.overlay {
   background: transparent; 
   position: absolute;
   top: -30px;
   left: 0px;
   width: 830px;
   height: 240px;
   z-index: 1;
}*/

#ctmap iframe{
	opacity: 0.36;
	transition-duration: 0.4s;
	background-color: #FFF;
	overflow: none;
}

#ctmap p{
	position: absolute;
	top: 30px;
	left: calc(50% - 282px);
	font-size: 3em;
	font-family: "muliextralight";
	letter-spacing: 6px;
	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: 49px;
	letter-spacing: 5px;
	font-style: italic;
}

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

#ctmap:hover p{
	opacity: 0;
	transform: rotate(-4deg);
	font-size: 2em;
	left: 26%;
	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;
}

#ctform label{
	width: 100px;
	text-align: left;
	color: #8DACEA; /*80A0EC*/
	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: 400px;
	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: 24px;
	width: 280px;
	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 div{
	display: flex;
	flex-direction: column;
	align-items: center;
}

#ctelse div a{
	display: flex;
}

#ctelse span{
	display: block;
	width: 0px;
	height: 26px;
	overflow: hidden;
	margin-right: 0px;
	transition-duration: 0.3s;
	color: #137FEF;
}

#ctelse #a-mail:hover span{
	width: 220px;
	margin-right: 3px;
}

#ctelse #a-tel:hover span{
	width: 116px;
	margin-right: 3px;
}


/******** 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: -30px;
	background-color: rgba(37, 116, 189, 0.2);
	width: calc(100% + 60px);
	height: 40px;
	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: 40px !important;
}

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

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


#down{
	z-index: 2;
	display: block;
	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 5.6s infinite;
}

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

@media all and (max-width: 1140px){
	#down{
		left: calc(50% - 26px);
	}
}

@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 ********/