@media only screen and (min-width: 990px) and (max-width: 1200px){
	
.wraper{
		width: 960px;
		margin-left: calc(50% - 480px);
	}

p{
	font-size: 20px;
}
main{
	overflow: hidden;
}

.pres{
	height: 481.5px;
}
.pres p{
	width: 300px;
	left: 120px;
	top:130px;
	font-size: 17px;
	line-height: 30px
}
.dessinateur img{
	margin-left: calc(50% - 450px);
	height: 481.5px;
}


.menu{
	padding-left: 200px;
}


/* nav */



.nav{
	margin-left: calc(50% - 450px)

}

.triangle{
	height: 180px;
}

.twebdesign, .ttransport, .tgraphisme{
	width: 300px;
	max-height: 225px;
	float: left;
	position: relative;
    top: -90px;
	transition-property: transform;
    transition-duration: 0.6s;
    transition-timing-function: ease;
    overflow: hidden;
   }

.twebdesign p, .ttransport p, .tgraphisme p{
	text-align: center;
    font-size: 90px;
    color: #fff;
}
.twebdesign p{
	background-image: url(../img/trianglev1024.png);
	width: 300px;
	height: 135px;
}
.tgraphisme p{
	background-image: url(../img/trianglej1024.png);
	width: 300px;
	height: 135px;
}
.ttransport p{
	background-image: url(../img/triangler1024.png);
	width: 300px;
	height: 135px;
}
.twebdesign a, .ttransport a, .tgraphisme a{
	width: 300px;
	line-height: 90px;
}
.twebdesign:hover, .ttransport:hover, .tgraphisme:hover{
	transform: translateY(90px);
}





/*savoir faire*/


#skills{
	margin-bottom: 0;
}
.savoirfaire{
	margin-left: calc(50% - 480px);
}
.savoirweb, .savoirpao, .savoiralamain{
	background-size: 300px 300px;	
}
.savoirweb{
	margin-left: 30px;
}
.savoirfaire ul{
	width: 300px;
	height: 300px;
}
.savoirweb li{
	margin: 30px 0 30px 0;
}

.savoirweb li:nth-child(2){
	margin-top: 50px;
}
.savoirweb p, .savoirpao p, .savoiralamain p{
	font-size: 15px;
	width: 300px;
}
.savoirweb p{
	margin-bottom: 10px;
}

.savoirpao li:nth-child(2){
	margin-top: 70px;
}
.savoirpao p{
	margin-top: 25px;
}
.savoiralamain p{
	margin-top: 30px;
}
.savoiralamain li:nth-child(0n+2){
	margin-top: 60px;
}
main .savoirfaire ul li h3{
	line-height: 300px;
}
.bar-main-container {
  margin: 5px 0 5px 100px;
  font-size: 15px;
}
aside p{
font-family: 'Nunito', Arial, sans-serif;
  color: #fff;
  line-height: 35px;
  text-align: center;
  width: 900px;
  margin-left: calc(50% - 450px);
  padding: 30px;

}


/* parcours */

#scolarite>ul{	
	width: 450px;
}
span{
	width:350px;
	line-height: 20px;
	display: inline-block;
}
#scolarite h4{
	font-size: 18px;
}
#scolarite h4::before{
	width: 30px;
	height: 18px;
}
#emplois h4{
	font-size: 18px;
}
#emplois h4::before{
	content: url(../img/pseudo-elementrouge.png);
	width: 18px;
	height: 30px;
	margin-right: 10px;
}
#scolarite>ul>li:first-child h4{
	margin: 0;
}
#emplois span{
	display: inline;
}


/* work */

.icon-barbe{
	    z-index: 4;
	    float: none;
}
.barbeprojet{
	margin-top: 0;
	margin-bottom: 320px;
}
.brief-barbe{
	left: calc(50% - 160px);
	margin-top: 0;
	top: -320px;
}
.projetbarbe>img{
	width: 960px;
}

element.style {
}
.projetbarbe li {
    width: 320px;
}
.projetbarbe h4{
	font-size: 25px;
	z-index: 2;
}
.projetbarbe p {
    width: 300px;
    margin-left: 10px;
  }
.button-fermeturebarbe{
	top: 0px;
	z-index: 2;
	right: 680px;
}
.color-barbe{
	height: 300px;
	margin-left: calc(50% - 450px);
}
.color-barbe li{
	line-height: 300px;
}
.color-barbe .color1{
	background-image: url(../img/colorbarbe1-1024.png);
	width: 300px;
}
.color-barbe .color2{
	background-image: url(../img/colorbarbe2-1024.png);
	width: 300px;
}
.color-barbe .color3{
	background-image: url(../img/colorbarbe3-1024.png);
	width: 300px;
}
.desktop-barbe{
	width: 960px;
}
.barbe-desktop1 img, .barbe-desktop2 img{
	width: 960px;
}
.barbe-explication{
	height: 310px;
}
.barbe-explication p{
	width: 900px;
	margin-left: 30px;
}
.mobile{
	position: relative;
	margin-left: calc(50% - 480px);
}

.barbe-mobile1, .barbe-mobile2{
	margin: 0 80px;
}
.barbe-explication-mobile{
	height: 280px;
}
.barbe-explication-mobile p{
	width: 900px;
	margin-left: 30px;
}





.icon-waxy{
	height: 640px;
    width: 640px;
    position: absolute;
    top: -320px;
    left: 320px;
    z-index: 3;
}
.button-fermeturewaxy{
	top:320px;
	z-index: 2;
	left: 780px;
}
#waxyprojet{
	position: relative;
	margin: 0;
}

.waxyprojet{
	display: none;
}
.brief-waxy{
	margin: 0;
}
.desktop-waxy {
    position: relative;
    width: 960px;
    margin-left: calc(50% - 480px);
    margin-bottom: 0px;
}
.waxy-desktop1 img, .waxy-desktop2 img{
	width: 960px;
}
.waxy-explication p{
	width: 900px;
	margin-left: 30px;
}








.icon-nicettes {
    height: 640px;
    width: 640px;
    position: relative;
    z-index: 2;
    top: 0;
    left: 0;
}
.nicettesprojet{
	position: relative;
	float: left;
	margin-bottom: 320px;
}
.brief-nicettes{
	position: absolute;
	left: 320px;
	top: -320px;
	z-index: 1;
}
.button-fermeturenicettes{
	top: 0px;
	right: 680px;
	z-index: 2;
}
.element-nicettes{
	margin-top: 420px;
	width: 960px;
	margin-left: calc(50% - 480px);
}
.element-nicettes p{
	width: 960px;
	padding: 50px 30px;
	margin: 0;
	}
.logo-nicettes{
	margin-top: 0;
}
.color-nicettes{
	height: 400px;
	margin-bottom: 50px;
	
}
.desktop-nicettes{
	width: 960px;
	margin-left: calc(50% - 480px);
}
.nicettes-desktop1 img, .nicettes-desktop2 img {
	width: 960px;
}

.nicettes-explication{
	height: 310px;
}
.nicettes-explication p{
	width: 900px;
	margin-left: 30px;
	padding: 70px 30px;
}









.icon-bppb{
    position: absolute;
    top: -320px;
    margin-left: 320px;
    z-index: 2;
}
.overlay-bppb{
	background-image: url(../img/photobppbhover.png);
}
.bppbprojet{
	margin-bottom: 0;
}
.brief-bppb{
	top: 0px;
	left: 0;	
}
.brief-bppb img{
	float: right;	
	width: 640px;
	height: 640px;
}
.brief-bppb p{
	width: 440px;
	margin-left: 100px;
}
.button-fermeturebppb{
	top: 320px;
	left: 780px; 
}

.logo-bppb{	
	margin-top: 690px;
}
.color-bppb{
	width:1200px;
	height: 400px;
	margin-left: calc(50% - 400px);	
}
.desktop-bppb{
	width: 960px;
	margin-left: calc(50% - 480px);
}

.text-map p{
	width: 900px;
	margin-left: 30px;
}
.slogan-bppb{
	height: 500px;
	width: 100%;
	background-image: url(../img/fond-slogan-bppb.png);
}
.slogan-bppb p{
	font-size: 40px;
}
.bppb33{
	margin: 50px 40px;
}
.bppb33 li{
	width: 100%;
}
.bppb33 li img{
width: 320px;
margin: 0 0 50px calc(50% - 160px);
}
.bppb33 li p{
	width: 320px;
	margin: 0 0 50px calc(50% - 160px);
}
.mockup-bppb img{
	width: 480px;
	height: 480px;
}
.mockup-bppb{
	height: 480px
}

.mockup-bppb p{
	padding: 100px 0px;
	width: 400px;
}





#saut{	
	background-image: url(../img/fondgraphisme2.png);
	margin-left: 0px;
	position: absolute;
	top: 0px;
}
#saut h2{
	color: #fff;
	position: absolute;	
	font-size: 35px;
    top: 295px;
    left : 220px;
}
.chauffeurprive{
	margin-top: 640px;
}
.icon-chauffeurprive{
	margin-left: 0;
	top: 0;    
 }
 .chauffeurpriveprojet{
 	margin-bottom: 320px;
 }
.brief-cp{
	left: 320px;
	top: -320px;
}
.logocp{
	padding-top: 370px;
}
.button-fermeturecp{
	top: 0;
	left: 80px; 
}
.fb-img img{	
	width: 960px;
	height: auto;
}
.soiree50 li{
	height: 480px;
}
.soiree50 li img{
	width: 480px;
	height: 480px;	
}
.insta33{
	margin-left: 80px;
}
.header-img img{
	width: 960px;
}










#designtransport{
	background-image: url(../img/fondtransport2.png);
	top: -322px;
	left: 0;

}
#designtransport h2{
	left : 535px;
}
.renaultsamsung{
	margin: 0;
}
.icon-renaultsamsung{	
 margin-top: 318px;
 float: right;
}

.brief-renaultsamsung{
	top: 638px;
	left: 0;
}
.button-fermeturerenaultsamsung{
	top: 960px;
	right: 80px;
}
.element-renaultsamsung{
	margin-left: calc(50% - 480px);
	margin-bottom: 100px;
}
.planche-samsung img{
	width : 960px;
}

.roue-samsung img, .intesamsung img, .extesamsung img{
	width: 960px;
}

.text-33 li p{
	font-size: 16px;
}

.text-33 img{
	margin-bottom: 25px;
}
.brief-rouesamsung p, .brief-intesamsung p, .brief-extesamsung p{
	width: 900px;
	margin-left: 30px;
}







footer ul{
	width: 960px;
	margin-left: calc(50% - 480px);
}
.col33{
	width: 300px;
}

.col33:first-child{
	margin-left: 30px;
}

}















@media only screen and (min-width: 768px) and (max-width: 990px){
	
	.wraper{
		width: 764px;
		margin: auto calc(50% - 384px)	
	}	
	.box img{
		width: 300px;
	}
	p{
		font-size: 17px;
	}

	h2{
		font-size: 25px;
	}

	header{
		height: 50px;
	}
	#navbar input{
		display: block;
	}
	.menu{
	padding-left: 150px;
	}
	.logo img{
		margin-left: 15%;
	}
	#menu{
		display: none;
	}
	.menu{
		display: none;
	}
	#menuToggle{
		display: block;
	}
	#menuToggle input
	{
		margin-left: 640px;
	}
	#menuToggle span{
		margin-left: 640px;
	}
	main{
		margin-top: 0px;
		overflow: hidden;
	}


	.pres{
	height: 709px;
	}
	.pres p{
	width: 100%;
	top: 457px;
	line-height: 30px;
	background-color: #190011;
	padding: 50px 43px;
	font-size: 20px;
	left: 0;
	height: auto;
	}
	.dessinateur img{
	height: auto;
	width: 764px;
	margin-left: 0px;
	margin-top: 50px;
	}




	/* nav */



	.nav{
	margin: auto calc(50% - 384px)

	}

	.triangle{
	height: 180px;
	width: 764px;
	}

	.twebdesign, .ttransport, .tgraphisme{
	width: 33.33%;
	max-height: 90px;
	float: left;
	position: relative;
    top: 0px;
	transition-property: none;
    transition-duration: 0.6s;
    transition-timing-function: ease;
    overflow: hidden;
   }


	.twebdesign a, .ttransport a, .tgraphisme a{
	line-height: 90px;
	width: 100%;
	}
	.twebdesign:hover, .ttransport:hover, .tgraphisme:hover{
	transform: none;
	}






/*savoir faire*/

.savoirweb{
	background-image: url(../img/hoverimgweb.png);
}
.savoirpao{
	background-image: url(../img/hoverimgpao.png);
}
.savoiralamain{
	background-image: url(../img/hoverimgalamain.png);
}

.savoirweb p, .savoirpao p, .savoiralamain p{
	display: block;
	text-align: center;
	color: #190011;
}
.savoirweb:hover h3, .savoirpao:hover h3, .savoiralamain:hover h3{
	display: block;
}
.bar-main-container {
  color: #190011;
}
.bar {
  background: #190011;
 }
.html-css, .js-php, .wordpress, .seo,.ps-il, .dsmax-alias, .after-e, .sketch, .rough,
.wireframe{
	display: block;
	color: #190011;
}

.savoirweb:hover .html-css, .savoirweb:hover .js-php, .savoirweb:hover .wordpress,
.savoirweb:hover .seo, .savoirpao:hover .ps-il, .savoirpao:hover .dsmax-alias, 
.savoirpao:hover .after-e, .savoiralamain:hover .sketch, .savoiralamain:hover .rough, 
.savoiralamain:hover .wireframe{
	display: block;
}

#skills{
	margin-bottom: 100px;
	width: 100%;
}
.savoirfaire{
	margin-left: calc(50% - 480px);
	height: 1200px;
}
main .savoirfaire ul{
	margin: 0 280px 400px 280px;
}
aside p {
    font-family: 'Nunito', Arial, sans-serif;
    color: #FFF;
    line-height: 35px;
    text-align: center;
    width: 768px;
    margin-left: calc(50% - 384px);
    margin-top: 30px;
    font-size: 20px;
}

/* parcours */



.diplomes{
	background-color: #190011;
	width: 50%;
	height: 400px;
}
.diplomes input{
	display: block;
}
.experiences{
	background-color: #720011;
	width: 50%;
	height: 400px;
}
.experiences input{
	display: block;
}
#scolarite>ul>li{	
	width: 384px;
}
span{
	width:250px;
	line-height: 20px;
	display: inline-block;
}
#scolarite h4{
	font-size: 16px;
}
#scolarite h4::before{
	width: 30px;
	height: 16px;
}
#emplois p{	
	width: 364px;
	margin-left: 15px;
}
#emplois p{	
	width: 364px;
	margin-left: 15px;
}
#emplois h4{
	font-size: 16px;
}
#emplois h4::before{
	content: url(../img/pseudo-elementrouge.png);
	width: 16px;
	height: 30px;
	margin-right: 10px;
}
#emplois span{
	display: inline;
}







/* work */
#web{
	background-image: url(../img/fondwebdesignmobile.png);
	overflow: hidden;
	height: 640px;
	width: 640px;
	margin: auto calc(50% - 320px);
	position: relative;
}
.barbe{
	margin: 0;
}
.icon-barbe{
	margin: auto calc(50% - 320px);
	height: 1280px;
	float: none;
}

.brief-barbe{
	margin: auto calc(50% - 384px);
	float: none;
}
.brief-barbe p{
	font-size: 20px;
}
#barbeprojet{
	margin: auto calc(50% - 384px);
}
.projetbarbe>img{
	width: 768px;
	margin-top: 640px;

}
.projetbarbe h4{
	font-size: 20px;
	z-index: 2;
}
.projetbarbe p{
	font-size: 16px;
	width: 250px;
	padding: 20px;
    margin-left: 3px;
    line-height: 20px;
}

.button-fermeturebarbe{
	top: 0px;
	z-index: 2;
}
.color-barbe{
	height: 900px;
	margin-left: calc(50% - 384px);
}
.color-barbe li{
	float: none;
	line-height: 300px;
	height: 300px;
	margin-left: calc(50% - 384px);
}
.color-barbe .color1{
	background-image: url(../img/colorbarbe1-1024.png);
	width: 300px;
}
.color-barbe .color2{
	background-image: url(../img/colorbarbe2-1024.png);
	width: 300px;
}
.color-barbe .color3{
	background-image: url(../img/colorbarbe3-1024.png);
	width: 300px;
}
.desktop-barbe{
	width: 768px;
}

.barbe-desktop1 img, .barbe-desktop2 img{
	width: 768px;
}
.barbe-explication, .barbe-explication-mobile{
	height: auto;
}

.barbe-explication p, .barbe-explication-mobile p{
	width: 786px;
	margin-left: 0;
	padding: 50px 43px
}
.mobile{
	position: relative;
	margin-left: calc(50% - 384px);
}

.barbe-mobile1, .barbe-mobile2{
	margin: 0 10px;
}



.icon-waxy{
	top: 0px; 
	float: none;
	margin: auto calc(50% - 320px);
	height: 1280px;
}

#waxyprojet{
	position: relative;
	margin:0;
}
.brief-waxy{
	position: relative;
	margin: auto calc(50% - 320px);
	float: none;
	z-index: 1;
}	
.brief-waxy p{
	font-size: 20px;
}
.button-fermeturewaxy {
	top: 0;
	left: 70px;    
    z-index: 2;
    }
.logo-waxy{
	margin: 50px auto;
}
.color-waxy{
	height: 300px;
	width: 768px;
	margin-left: calc(50% - 300px);
}
.color-waxy .color1, .color-waxy .color2{
	background-size: 300px 300px;
	width: 300px;
    height: 300px;
    line-height: 300px;
}
.desktop-waxy{
	margin: 0;
	width: 768px;
}
.waxy-desktop1, .waxy-desktop2{
	width: 768px;
}

.waxy-desktop1 img, .waxy-desktop2 img{
	width: 768px;
}
.waxy-explication p{
	width: 700px;
	margin-left: calc(50% - 338px);
}
.waxyprojet{
	display: none;
}





.icon-nicettes{	
    position: relative; 
    top: 0;
    left: 0;
    float: none;
	margin: auto calc(50% - 320px);
	height: 1280px;
 }
.nicettesprojet{
	position: relative;
	float: none;
	z-index: 4;
}
.brief-nicettes{
	position: relative;
	top: 0;
	margin: auto calc(50% - 320px);
	width: 640px;
	z-index: 1;
}
.brief-nicettes p{
	font-size: 20px;
}
.button-fermeturenicettes{
	top: 0px;
	right: 80px;
	z-index: 5;
}
.element-nicettes{
	margin-top: 0px;
	width: 768px;
	margin-left: calc(50% - 384px);
}
.element-nicettes p{
	width: 764px;
	margin-left: 0;
	padding: 85px 78px;
}
.logo-nicettes{
	margin: 50px auto;
}
.color-nicettes{
	height: 300px;
	width: 768px;
	margin-left: calc(50% - 300px);
}
.color-nicettes .color1, .color-nicettes .color2{
	background-size: 300px 300px;
	width: 300px;
    height: 300px;
    line-height: 300px;
}
.nicettes-explication{
	height: auto;
}
.nicettes-explication p{
	width: 768px;
	margin: 0;
	padding: 65px 78px;
}
.nicettes-desktop1 img, .nicettes-desktop2 img{
	width: 768px;
}
.desktop-nicettes{
	width: 768px;
	margin-left: calc(50% - 384px);
}




.icon-bppb{	
    position: relative; 
    top: 0;
    left: 0;
    float: none;
	margin: auto calc(50% - 320px);
	height: 640px;
	margin-bottom: 640px;
 }
.bppbprojet{
	margin: 0;
}
.brief-bppb{
	position: relative;
	top: 0px;
	margin: auto calc(50% - 320px);
	width: 640px;
	z-index: 1;	
	left: 0;
}
.brief-bppb img{
	float: none;	
}
.brief-bppb p{
	font-size: 20px;
	font-family: 'Nunito', 'Arial', sans-serif;
	color : #fff;
	text-align: center;
	position: relative;
	line-height:50px;
	padding: 220px 0;
}
.button-fermeturebppb{	
	right: 80px;
	z-index: 2;
}
.color-bppb{
	height: 300px;
	width: 768px;
	margin-left: calc(50% - 300px);
}
.color-bppb .color1, .color-bppb .color2{
	background-size: 300px 300px;
	width: 300px;
    height: 300px;
    line-height: 300px;
}
.element-bppb{
	width: 100%;
	position: relative;
	margin-bottom: 100px;
}
.logo-bppb{	
	margin: 50px auto 50px auto;
}

.desktop-bppb{
	position: relative;
	width: 768px;
	margin-left: calc(50% - 384px);
}
.bppb-theme{
	height: auto;
}
.bppb-map{
	margin-left: calc(50% - 384px); 
	height: 640px;
}
.bppb-map img {
    width: 364px;
    float: right;
}
.bppb-picto{
	width: 384px;
}
.bppb-picto ul{
	margin: 0;
}
.bppb-picto li{
	margin-right: calc(50% - 384px);
	margin-left: 25px;
}
.bppb-picto li img {
    float: left;
    margin-right: 50px;
    height: 80px;
   }


.text-map {
    height: 335px;
}
.text-map p{
	width: 768px;
	margin: 0;
	padding: 65px 78px;
}
.slogan-bppb{
	height: 500px;
	width: 100%;;
}

.slogan-bppb p{
	font-size: 30px
}
.bppb33 li{
	width: 100%;
}
.bppb33 li img{
width: 300px;
margin: 0 0 50px calc(50% - 150px);
}
.bppb33 li p{
	margin-bottom: 50px;
	margin-left: calc(50% - 150px);
}
.mockup-bppb img{
	width: 384px;
	height: 384px;
}
.mockup-bppb{
	height: 384px
}

.mockup-bppb p{	
	width: 384px;
	margin: 0;
	padding: 59px 40px;
	line-height: 30px;
}





#saut{
	background-image: url(../img/fondgraphismemobile.png);
	width: 640px;
	height: 640px;
	position: relative;
	top: 0;
	margin: auto calc(50% - 320px);
}
#saut h2{
	color: #fff;
	position: absolute;	
	font-size: 35px;
    top: 295px;
    left : 220px;
}

.icon-chauffeurprive{
	top: 0px; 
	height: 1280px;
	margin: auto calc(50% - 320px);
}    
 
.brief-cp{
	position: relative;
	top: 0;
	margin: auto calc(50% - 320px);
	width: 640px;
	z-index: 1;	
	left: 0;
}

.button-fermeturecp{
	left: 540px;
	z-index: 2;
	top: 0;
}
.logocp{
	padding-top: 0;
	margin: 50px 0;
}

.fb-img img{	
	width: 768px;
	height: auto;
}
.soiree50 li{
	height: 384px;
}
.soiree50 li img{
	width: 384px;
	height: 384px;	
}

.insta33{
	margin-left: 0px;
}
.insta33 li{
	width: 384px;
	height: 384px;
	margin-left: calc(50% - 384px);	
}
.insta33 img{
	width: 384px;
	height: 384px;
}

.insta33 li:nth-child(2n+0){
	margin-right: calc(50% - 384px);
}
.header-img img{
	width: 768px;
}
.chauffeurpriveprojet{
	margin-bottom: 0;
}
#designtransport{
	background-image: url(../img/fondtransportmobile.png);
	top: -3px;
	left: 0;
	width: 640px;
	height: 640px;
	margin: auto calc(50% - 320px);
	position: relative;
}

#designtransport h2{
	left : 220px;
	font-size: 35px;
}
.renaultsamsung{
	margin-top: -3px;
}
.icon-renaultsamsung{
position: relative;	
 margin: auto calc(50% - 320px);
 float: none;
 height: 1280px;
}
.button-fermeturerenaultsamsung{
	top: 0;
	right: 80px;
	z-index: 2;
}
.brief-renaultsamsung{
	margin: auto calc(50% - 320px);
	position: relative;
	top: 0px;
	left: 0;
}
.element-renaultsamsung{
	margin-left: calc(50% - 384px);
	margin-bottom: 50px;
}
.element-renaultsamsung img{
	margin-top : 0px;
	width: 768px;
}
.planche-samsung img{
	width : 768px;
}
.brief-rouesamsung h4, .brief-intesamsung h4, .brief-extesamsung h4 {
    padding: 45px 0 45px 0;
    }
.roue-samsung p, .intesamsung p, .extesamsung p{
	width: 768px;
	padding: 0px 78px;
	padding-bottom: 60px;
	margin: 0;
}
.roue-samsung img, .intesamsung img, .extesamsung img{
	width: 768px;
}

.text-33 li p{
	font-size: 16px;
	width: 250px;
	padding: 20px;
    margin-left: 3px;
    line-height: 20px;
}

.text-33 img{
	margin-bottom: 25px;
}

.overlay-barbe, .overlay-waxy, .overlay-nicettes, .overlay-bppb, .overlay-cp, .overlay-renaultsamsung{
	overflow: hidden;
    width: 640px;
    height: 640px;
    top: 640px;
    transition: none;
}
.overlay-barbe a, .overlay-waxy a, .overlay-bppb a, .overlay-cp a{
	position: relative;
}




.overlay-barbe input, .overlay-waxy input,.overlay-nicettes input, .overlay-bppb input, 
.overlay-renaultsamsung input{
    position: relative;
    left: calc(50% - 115px);
    bottom: 150px;
    -ms-transform: translate(0%, 0%);
}
.overlay-barbe .button-barbe, .overlay-waxy .button-waxy,
 .overlay-bppb .button-bppb,.overlay-cp .button-cp{
    position: relative;
  	top : 450px;
}
 .overlay-nicettes .button-nicettes{
 	top: 450px;
    height: 60px;
 }
 .overlay-cp .button-cp{
 	left: 0;
 }
 .overlay-renaultsamsung .button-renaultsamsung{
 	top: 450px;
    height: 60px;
 }
footer{
		height: 700px;
}
footer ul{
	width: 768px;

	margin-left: calc(50% - 384px);
}
.col33:first-child{
	margin-left: 0px;
}

.col33{
	width: 100%;
	float: none;
	margin: 50px 0 25px 0;
}

}





@media only screen and (min-width: 480px) and (max-width: 768px){

	.wraper{
		width: 470px;
		margin: auto calc(50% - 235px)
	}
	.box img{
		width: 300px;
	}
	p{
		font-size: 15px;
	}

	h2{
		font-size: 20px;
	}

	h1{
		font-size: 35px;
	}
	header{
		height: auto;
	}
	#navbar input{
		display: block;
	}
	.menu{
		display: none;
	}
	#menuToggle{
		display: block;
	}
	#menu-burger{
		right: 150px;
	}
	.logo{
		width: 75%;		
	}	
	.logo p{
		font-size: 15px;
	}
	.logo img{
		margin-left: 10%;
		margin-right: 15px;
	}
	#menuToggle{
		display: block;
		left: 35%;
	}
	
	
	main{
		margin-top: 0px;
	}


	.pres{
	height: 454px;
	}
	.pres p{
		width: 100%;
		top: 300px;
		line-height: 20px;
		background-color: #190011;
		padding: 25px 25px;
		left: 0;
	}
	.dessinateur img{
		height: 250px;
		margin-left: 0px;
		margin-top: 50px;
	}




	/* nav */



	.nav{
		margin: auto calc(50% - 235px)

	}
	.triangle{
		height: 75px;
	}

	.twebdesign, .ttransport, .tgraphisme{
		width: 33.33%;
		max-height: 75px;
		float: left;
		position: relative;
	    top: 0px;
		transition-property: none;
	    transition-duration: 0.6s;
	    transition-timing-function: ease;
	    overflow: hidden;
	   }


	.twebdesign a, .ttransport a, .tgraphisme a{
		line-height: 75px;
		width: 100%;
	}
	.twebdesign:hover, .ttransport:hover, .tgraphisme:hover{
		transform: none;
	}






	/*savoir faire*/
	#skills{
		margin-top: 70px;
	}

	.savoirweb{
		background-image: url(../img/hoverimgweb.png);
	}
	.savoirpao{
		background-image: url(../img/hoverimgpao.png);
	}
	.savoiralamain{
		background-image: url(../img/hoverimgalamain.png);
	}

	.savoirweb p, .savoirpao p, .savoiralamain p{
		display: block;
		text-align: center;
		color: #190011;
	}
	.savoirweb:hover h3, .savoirpao:hover h3, .savoiralamain:hover h3{
		display: block;
	}
	.savoirweb li:nth-child(2) {
    margin-top: 0;
	}
	.savoirpao li:nth-child(2) {
    margin-top: 30px;
	}
	.savoiralamain li:nth-child(0n+2) {
    margin-top: 30px;
}
	.bar-main-container {
	  color: #190011;
	}
	.bar {
	  background: #190011;
	 }
	.html-css, .js-php, .wordpress, .seo,.ps-il, .dsmax-alias, .after-e, .sketch, .rough,
	.wireframe{
		display: block;
		color: #190011;
	}

	.savoirweb:hover .html-css, .savoirweb:hover .js-php, .savoirweb:hover .wordpress,
	.savoirweb:hover .seo, .savoirpao:hover .ps-il, .savoirpao:hover .dsmax-alias, 
	.savoirpao:hover .after-e, .savoiralamain:hover .sketch, .savoiralamain:hover .rough, 
	.savoiralamain:hover .wireframe{
		display: block;
	}

		aside p{
		width: 400px;
		margin-left: calc(50% - 200px);
		line-height: 20px;
		padding: 30px 0;
	}

	#skills{
		margin-bottom: 100px;
		width: 100%;
	}
	.savoirfaire{
		margin-left: calc(50% - 480px);
		height: 1200px;
	}
	main .savoirfaire ul{
		margin: 0 280px 300px 280px;
	}






	/* parcours */


	#parcours{
		display: none;
	}







	/* work */
	#web{
		background-image: url(../img/fondwebdesignmobile.png);
		background-size: 470px 470px;
		overflow: hidden;
		height: 470px;
		width: 470px;
		margin: auto calc(50% - 235px);
		position: relative;
	}
	#web h2{
		top: 215px;
	    left: 135px;

	}
	.barbe{
		margin: 0;
		width: 470px;
	}
	.icon-barbe{
		margin: auto calc(50% - 235px);
		height: 940px;
		float: none;
		background-size: 470px 470px;
		width: 470px;
	}

	.brief-barbe{
		margin: auto calc(50% - 150px);
		background-size: 470px 470px;
		float: none;
		width: 470px;
		height: 470px;
	}
	.brief-barbe p {
	    font-size: 20px;
	    text-align: center;
	    line-height: 50px;
	    margin-top: 175px;
	}
	#barbeprojet{
		margin: auto calc(50% - 235px);
		width: 470px;

	}
	.projetbarbe>img{
		width: 470px;
		margin-top: 470px;

	}
	.projetbarbe h4{
		font-size: 20px;
		z-index: 2;
	}
	.projetbarbe p{
		width: 350px;
		margin-left: 60px;
	}
	.projetbarbe li{
		width: 100%;
		float: none;
	}
	.button-fermeturebarbe{
		top: 0px;
		z-index: 2;
		width: 150px;
		right: 10px;
	}
	.logo-barbe{
		margin: 50px 0;
	}
	.color-barbe{
		width: 470px;
		height: 900px;
		margin-left: calc(50% - 235px);
	}
	.color-barbe li{
		line-height: 300px;
		height: 300px;
		margin-left: 85px;
	}
	.color-barbe .color1{
		background-image: url(../img/colorbarbe1-1024.png);
		width: 300px;
		}
	.color-barbe .color2{
		background-image: url(../img/colorbarbe2-1024.png);
		width: 300px;
		}
	.color-barbe .color3{
		background-image: url(../img/colorbarbe3-1024.png);
		width: 300px;
		}
	.desktop-barbe{
		width: 470px;
	}
	.desktop-barbe h5 {
    margin-bottom: 50px;
	}
	.barbe-desktop1 img, .barbe-desktop2 img{
		width: 470px;
	}
	.barbe-explication{
		height : 235px;
	}

	.barbe-explication p{
		line-height: 20px;
		width: 470px;
		padding: 35px;
		margin-left: 5px;
	}
	.mobile{
		position: relative;
		margin-left: calc(50% - 235px);
	}
	.mobile h5 {
     margin-bottom: 50px;
    }
	.barbe-mobile1, .barbe-mobile2{
		display: inline-block;
		margin: 0px 75px;
		margin-top: 20px;
	}

	.barbe-explication-mobile{
		height : auto;
	}
	.barbe-explication-mobile p{
		line-height: 20px;
	    width: 470px;
	    padding: 35px;
	    margin-left: 5px;
	}



	.icon-waxy{
		top: 0px; 
		float: none;
		margin: auto calc(50% - 235px);
		height: 940px;
		width: 470px;
		background-size: 470px 470px;
	}

	#waxyprojet{
		position: relative;
		margin-bottom: 320px;
	}
	.brief-waxy{
		position: relative;
		margin: auto calc(50% - 235px);
		float: none;
		width: 470px;
		height: 470px;
		z-index: 1;
	}	
	.brief-waxy p{
		background-size: 470px 470px;
		height: 470px;
		width: 470px;
		margin-left: 0;
		padding: 135px 0;
	}
	.button-fermeturewaxy {
		top: 0;
	    left: 310px;
	    width: 150px;	   
	    }
	.logo-waxy{
		margin: 50px auto;
	}
	.color-waxy{
		width: 300px;
		height: 600px; 
		margin-left: calc(50% - 150px);
	}
	.color-waxy li{
		float: none;
		background-size: 300px 300px;
		width: 300px;
		height: 300px;
		line-height: 300px;
	}
	.desktop-waxy{
		margin-bottom: 0;
		margin-left: 5px;
		width: 470px;
	}
	.desktop-waxy h5 {
      margin-bottom: 50px;
      margin-left: calc(50% - 150px);
	}
	.waxy-desktop1, .waxy-desktop2{
		width: 470px;
	}
	.waxy-desktop1 img, .waxy-desktop2 img{
		width: 470px;
		margin: auto calc(50% - 235px);
	}
	.waxy-explication{
		height : 240px;
	}

	.waxy-explication p{
		line-height: 20px;
		width: 470px;
		padding: 50px 35px;
		margin-left: 0;
	}
	#waxyprojet{
		margin: 0;
	}
	.waxyprojet{
		display: none;
	}





	.icon-nicettes{	
	    position: relative; 
	    top: 0;
	    left: 0;
	    float: none;
		margin: auto calc(50% - 235px);
		height: 940px;
		width: 470px;
	 }
	.carroussel {
	    width:470px;
	   }
	.icon-nicettes figure img{
		width: 470px;
		height: 470px;
	}
	.overlay-nicettes img{
		width: 470px;
		height: 470px;
	}
	.nicettesprojet{
		position: relative;
		float: none;
		z-index: 4;
	}
	.brief-nicettes{
		position: relative;
		top: 0;
		margin: auto calc(50% - 235px);
		width: 470px;
		height: 470px;
		z-index: 1;
		background-size: 470px 470px;
	}
	.brief-nicettes p{
		height: 470px;
		width: 470px;
		margin-left: 0;
		padding-top: 185px;
	}
	.button-fermeturenicettes{
		top: 0px;
		z-index: 2;	
		width: 150px;
		right: 10px;			
	}
	.element-nicettes{
		margin-top: 0px;
		width: 470px;
		margin-left: calc(50% - 235px);
	}
	.element-nicettes p{
		line-height: 20px;
		padding:50px 35px;
		width: 470px;
		margin-left: 0;
	}
	.logo-nicettes{
		margin: 50px 0;
	}
	.color-nicettes{
		width: 300px;
		height: 600px;
	    margin-left: calc(50% - 150px);
	    margin-bottom: 50px;
	}
	.color-nicettes li{
		float: none;
		width: 300px;
		height: 300px;
		background-size: 300px 300px;
		line-height: 300px;
	}
	.nicettes-desktop1 img, .nicettes-desktop2 img{
		width: 470px;
		margin: auto calc(50% - 235px);
	}
	.nicettes-explication{
		height: auto;
	}
	.nicettes-explication p{
		line-height: 20px;
		padding: 50px 35px;
		width: 470px;
		margin-left: 0;
	}
	.desktop-nicettes{
		width: 470px;
		margin-left: calc(50% - 235px);
	}
	.desktop-nicettes h5{
		margin-bottom: 50px;
	}




	.bppbprojet{
		margin: 0;
	}
	.icon-bppb{	
	    position: relative; 
	    top: 0;
	    left: 0;
	    float: none;
		margin: auto calc(50% - 235px);
		height: 940px;
		background-size: 470px 470px;
		overflow: hidden;
		width: 470px;
	 }

	.brief-bppb{
		position: relative;
		top: 0;
		left: 0;
		margin: auto calc(50% - 235px);
		width: 470px;
		height: 470px;
		z-index: 1;
		background-size: 470px 470px;
	}
	.brief-bppb p{
	    line-height: 45px;
	    width: 470px;
	    padding: 145px 80px;
	    margin: 0;
	}
	.brief-bppb img{
		float: none;
		background-size: 470px 470px;	
	}

	.button-fermeturebppb{	
		top: 0px;
		z-index: 2;
		width: 150px;
		left: 310px;
	}
	.element-bppb{
		width: 100%;
		position: relative;
		margin-bottom: 50px;
	}
	.logo-bppb{	
		margin: 50px auto;
	}
	.color-bppb{
		width: 300px;
		height: 600px;
	    margin-left: calc(50% - 150px);
	}
	.color-bppb li{
		float: none;
		width: 300px;
		height: 300px;
		background-size: 300px 300px;
		line-height: 300px;
	}
	.desktop-bppb{
		position: relative;
		width: 470px;
		margin-left: calc(50% - 235px);
	}
	.bppb-theme{
		height: auto;
	}
	.bppb-map {
	    width: 100%;
	    float: none;
		margin-left: calc(50% - 120px); 
		height: 412px;
	}
	.bppb-map img {
	    width: 235px;
	    margin-left: 0; 
	    float: none;
	}
	.desktop-bppb .bppb-picto {
	    width: 100%;
	    float: none;
	    }
	.bppb-picto{
		width: 384px;
	}
	.bppb-picto ul{
		margin: 0;
	}
	.bppb-picto li{
		margin-right: calc(50% - 235px);
		text-align: center;
		padding: 40px 0;
	}
	.bppb-picto li img {
	    float: none;
	    margin-right: 0px;
	    height: 80px;
	   }
	.text-map p{
		line-height: 20px;
		width: 470px;
		padding: 55px 35px;
		margin: 0;
	}
	.slogan-bppb p{
		font-size: 25px;
	    padding: 160px 15px;
	}
	.bppb33 {
    margin: 50px 80px;
}
	.bppb33 li{
		width: 100%;
	}
	.bppb33 li img{
	width: 300px;
	margin: 0 0 50px calc(50% - 150px);
	}
	.bppb33 li p{
		margin-bottom: 50px;
		margin-left: 0;
	}
	.mockup-bppb img{
		width: 470px;
		height: 470px;
	}
	.mockup-bppb{
		height: 940px
	}
	.mockup-bppb p {
	    width: 470px;
	    margin: 0;
	     padding: 130px 35px;
	    text-align: center;
	}

	#saut{
		background-image: url(../img/fondgraphismemobile.png);
		background-size: 470px 470px;
		overflow: hidden;
		height: 470px;
		width: 470px;
		margin: auto calc(50% - 235px);
		position: relative;
		top: 0;
	}
	#saut h2{	
	    top: 215px;
	    left: 135px;
	}

	.icon-chauffeurprive{
		top: 0px; 
		margin: auto calc(50% - 235px);
		height: 940px;
		background-size: 470px 470px;
		width: 470px;
	}    
	 
	.brief-cp{
		position: relative;
		top: 0;
		margin: auto calc(50% - 235px);
		width: 470px;
		height: 470px;
		z-index: 1;	
		left: 0;
		background-size: 470px 470px;
	}
	.brief-cp p{
		height: 470px;
		width: 470px;	
		margin-left: 0;
		padding: 120px 0;
		font-size: 15px;
	}
	.button-fermeturecp{
		float: left;
		z-index: 2;
		top: 0;
		width: 150px;
		left: 310px;
	}
	.logocp{
		padding-top: 0;
		margin-top: 50px;
	}
	.b2c{
		margin-bottom: 50px;
	}
	.fb-img img{	
		width: 470px;
		height: auto;
	}
	.soiree img{
		width: 430px;
	}
	.soiree50 li{
		height: 235px;
	}
	.soiree50 li img{
		width: 235px;
		height: 235px;	
	}

	.insta33{
		margin-left: 0px;
	}
	.insta33 li{
		width: 235px;
		height: 235px;
		margin: auto calc(50% - 235px);
	}
	.insta33 img{
		width: 235px;
		height: 235px;
	}

	.insta33 li:nth-child(2n+0){
		float: right;
	}
	.header-img img{
		width: 470px;
	}
	.chauffeurpriveprojet{
		margin-bottom: 0;
	}

	#designtransport{
		background-image: url(../img/fondtransportmobile.png);
		background-size: 470px 470px;
		overflow: hidden;
		height: 470px;
		width: 470px;
		margin: auto calc(50% - 235px);
		position: relative;
		top: -3px;
		left: 0;
	}
	#designtransport h2{	
	    top: 215px;
	    left: 135px;
	    font-size: 35px;
	}

	.renaultsamsung{
		margin-top: -3px;
	}
	.icon-renaultsamsung{
	position: relative;	
	float: none;
	margin: auto calc(50% - 235px);
	height: 940px;
	width: 470px;
	}
	.icon-renaultsamsung img{
		width: 470px;
		height: 470px;
	}
	.button-fermeturerenaultsamsung{
		z-index: 2;
		top: 0;
		right: 10px;
		width: 150px;
	}
	.brief-renaultsamsung{
		position: relative;
		top: 0;
		margin: auto calc(50% - 235px);
		width: 470px;
		height: 470px;
		z-index: 1;	
		left: 0;
		background-size: 470px 470px;
	}
	.brief-renaultsamsung p{
		height: 470px;
		width: 470px;	
		margin-left: 0;
		padding-top: 120px;
		font-size: 15px;
		line-height: 30px;
	}
	.element-renaultsamsung{
		margin-left: calc(50% - 235px);
		margin-bottom: 50px;
	}
	.element-renaultsamsung img{
		margin-top : 0px;
		width: 430px;
		margin-left: 25px;
	}
	.planche-samsung img{
		width : 470px;
	}
	.brief-rouesamsung h4, .brief-intesamsung h4, .brief-extesamsung h4 {
	    padding: 45px 0 45px 0;
	    }
	.roue-samsung p, .intesamsung p, .extesamsung p{
		font-size: 17px;
	}
	.roue-samsung img, .intesamsung img, .extesamsung img{
		width: 768px;
	}
	.text-33 li{
		width: 100%;
		float: none;
	}
	.text-33 li p{
		font-size: 12px;
		width: 300px;
		margin-left: 85px;
	}

	.text-33 img{
		margin-bottom: 25px;
	}
	.brief-rouesamsung, .brief-intesamsung, .brief-extesamsung{
		height: auto;
	}
	.brief-rouesamsung p, .brief-intesamsung p, .brief-extesamsung p{
		width: 470px;
		padding-top: 0;
		font-size: 15px;
		margin-left: 0;
		line-height: 20px;
	}
	.roue-samsung img, .intesamsung img, .extesamsung img{
	width: 470px;
	}


	.overlay-barbe, .overlay-waxy, .overlay-nicettes, .overlay-bppb, .overlay-cp{
		position: relative;
	    overflow: hidden;
	    width: 470px;
	    height: 470px;
	    top: 470px;
	    display: block;
	    transform: none;
	    background-size: 470px 470px;
	    transition: none;
	}
	.overlay-renaultsamsung{
		position: relative;
	    overflow: hidden;
	    width: 470px;
	    height: 470px;
	    top: -3px;
	    display: block;
	    transform: none;
	    background-size: 470px 470px;
	}
	.overlay-barbe a, .overlay-waxy a, .overlay-bppb a, .overlay-cp a, .overlay a{
		position: relative;
	}

	.overlay-barbe input, .overlay-waxy input, .overlay-nicettes input, .overlay-bppb input, 
	.overlay-cp input,.overlay-renaultsamsung input{
		font-family: 'Epic fusion', 'Arial', sans-serif;
		font-size: 16px;
		text-transform:uppercase;
		overflow: hidden;
	  	-ms-transform: none;
	  	position: absolute;
	  	top: 350px;
	  	height:40px;
	}
	.overlay-barbe .button-barbe, .overlay-waxy .button-waxy, .overlay-nicettes .button-nicettes,
	 .overlay-bppb .button-bppb{
		background-color: #190011;
	    color: #fff;
	    padding: 7px 10px;
	    border: 3px solid #fff;    
	    position: absolute;
	    left: calc(50% - 72px);
	 	bottom : 150px;
	   }
	.overlay-barbe .button-barbe:hover, .overlay-waxy .button-waxy:hover, .overlay-nicettes .button-nicettes:hover,
	.overlay-bppb .button-bppb:hover{
		background-color: #190011;
	    color: #fff;
	    padding: 7px 10px;
	    border: 3px solid #fff;    
	    position: absolute;
	    left: calc(50% - 72px);
	 	bottom : 150px;
	}

	.overlay-cp .button-cp{
		background-color: #a05f11;
	    color: #fff;
	    padding: 7px 10px;
	    border: 3px solid #fff;    
	    position: absolute;
	    left: calc(50% - 70px);
	 	bottom : 150px;
	}
	.overlay-cp .button-cp:hover{
		background-color: #a05f11;
	    color: #fff;
	    padding: 7px 10px;
	    border: 3px solid #fff;    
	    position: absolute;
	    left: calc(50% - 70px);
	 	bottom : 150px;
	}
	.overlay-renaultsamsung .button-renaultsamsung{
		background-color: #720011;
	    color: #fff;
	    padding: 7px 10px;
	    border: 3px solid #fff;    
	    position: absolute;
	    left: calc(50% - 72px);
	 	bottom : 150px;
	}
	.overlay-renaultsamsung .button-renaultsamsung:hover{
		background-color: #720011;
	    color: #fff;
	    padding: 7px 10px;
	    border: 3px solid #fff;    
	    position: absolute;
	    left: calc(50% - 72px);
	 	bottom : 150px;
	}


	footer{
			height: 700px;
	}
	footer ul{
		width: 470px;

		margin-left: calc(50% - 235px);
	}
	.col33:first-child{
		margin-left: 0px;
	}

	.col33{
		width: 100%;
		float: none;
		margin: 50px 0 25px 0;
	}

}






@media only screen and (max-width: 480px){

	.wraper{
		width: 320px;
		margin: auto calc(50% - 160px);
	}		
	.box img{
		width: 300px;
	}
	p{
		font-size: 14px;
	}

	h2{
		font-size: 20px;
	}

	h1{
		font-size: 25px;
	}
	header{
		height: auto;
	}
	#navbar input{
		display: block;
	}
	
	.logo{
		width: 75%;		
	}	
	.logo p{
		font-size: 11px;
    	padding-left: 5px;
	}
	.logo img{
	margin-left: 10px;
    margin-right: 5px;
	}
	.menu{
		display: none;
	}
	#menuToggle{
		display: block;
		left: 5%;
	}
		#menu-burger {
    width: 150px;
    margin: -50px 0px 0 180px;
    }
	
	main{
		margin-top: 0px;
	}


	.pres{
	height: 414px;
	}
	.pres p{
		width: 100%;
		top: 220px;
		font-size: 16px;
		line-height: 20px;
		background-color: #190011;
		padding: 25px 25px;
		left: 0;
	}
	.dessinateur{
		background-image: 
	}
	.dessinateur img{
		height: 170px;
		margin-left: 0px;
		margin-top: 50px;
		background-image: url()
	}




	/* nav */



	.nav{
		margin: auto calc(50% - 160px);
			height: 220px;
	}
	.triangle{
		height: 75px;
	}

	.twebdesign, .ttransport, .tgraphisme{
		width: 100%;
		max-height: 75px;
		float: none;
		position: relative;
	    top: 0px;
		transition-property: none;
	    transition-duration: 0.6s;
	    transition-timing-function: ease;
	    overflow: hidden;
	   }


	.twebdesign a, .ttransport a, .tgraphisme a{
		line-height: 75px;
		width: 100%;
	}
	.twebdesign:hover, .ttransport:hover, .tgraphisme:hover{
		transform: none;
	}






	/*savoir faire*/
	#skills{
		margin-top: 60px;
		width: 320px;
	}

	.box img{
		width: 310px;
	}
	main .savoirfaire ul {
	    float: left;
	    width: 300px;
	    height: 300px;
	    margin-bottom: 300px;
	    margin-left: 10px;
	}

	main .savoirfaire ul li h3 {
	    text-align: center;
	    line-height: 300px;
	}
	main .savoirfaire ul li{
		text-align: center;
	}
	.savoirweb{
		background-image: url(../img/hoverimgweb.png);
		background-size: 300px 300px;
	}
	.savoirpao{
		background-image: url(../img/hoverimgpao.png);
		background-size: 300px 300px;
	}
	.savoiralamain{
		background-image: url(../img/hoverimgalamain.png);
		background-size: 300px 300px;
	}

	.savoirweb p, .savoirpao p, .savoiralamain p{
		display: block;
		text-align: center;
		color: #190011;
		width: 320px;
	}
	.savoirweb:hover h3, .savoirpao:hover h3, .savoiralamain:hover h3{
		display: block;
		background-size: 300px 300px;
	}
	.savoirpao li:nth-child(2){
	margin-top: 50px;
	}
	
	.savoiralamain li:nth-child(0n+2){
		margin-top: 50px;
	}
	.bar-main-container {
    margin: 15px 0 15px 100px;
	}
	.bar-main-container {
	  color: #190011;
	}
	.bar {
	  background: #190011;
	 }
	.html-css, .js-php, .wordpress, .seo,.ps-il, .dsmax-alias, .after-e, .sketch, .rough,
	.wireframe{
		display: block;
		color: #190011;
	}

	.savoirweb:hover .html-css, .savoirweb:hover .js-php, .savoirweb:hover .wordpress,
	.savoirweb:hover .seo, .savoirpao:hover .ps-il, .savoirpao:hover .dsmax-alias, 
	.savoirpao:hover .after-e, .savoiralamain:hover .sketch, .savoiralamain:hover .rough, 
	.savoiralamain:hover .wireframe{
		display: block;
	}

	aside{
		height: auto;
	}
	aside p{
		font-size: 15px;
		width: 320px;
		margin-left: 0;
		padding: 0 15px;
		padding-bottom: 20px;
	}

	#skills{
		margin-bottom: 50px;
		width: 100%;
	}
	

	/* parcours */


	#parcours{
		display: none;
	}







	/* work */
	#web{
		background-image: url(../img/fondwebdesignmobile.png);
		background-size: 320px 320px;
		overflow: hidden;
		height: 320px;
		width: 320px;
		margin: auto calc(50% - 160px);
		position: relative;
	}
	#web h2{
		top: 140px;
	    left: 60px;

	}
	.barbe{
		margin: 0;
	}
	.icon-barbe{
		margin: auto calc(50% - 160px);
		height: 640px;
		width: 320px;
		float: none;
		background-size: 320px 320px;
	}

	.brief-barbe{
		margin: auto auto;
		background-size: 320px 320px;
		float: none;
		width: 320px;
		height: 320px;
		left: 0;
	}
	.brief-barbe p {
	    text-align: center;
	    line-height: 50px;
	    padding: 110px 20px;
	    padding-bottom: 0;
	    font-size: 14px;
	    margin: 0;
	}
	.brief-barbe a {
     top: 70px; 
     font-size: 15px; 
     padding: 10px 10px;
     left: 90px;  
	}
	#barbeprojet{
		margin: auto calc(50% - 160px);
	}
	.projetbarbe>img{
		width: 320px;
		margin-top: 320px;

	}
	.projetbarbe h4{
		font-size: 20px;
		z-index: 2;
	}
	.projetbarbe p{
		font-size: 15px;
	}
	.projetbarbe li{
		width: 100%;
		float: none;
	}
	.button-fermeturebarbe{
		top: 0px;
		z-index: 2;
		width: 70px;
		right: 10px;
		background-size: 70px 13px;
	}
	.color-barbe{
		width: 320px;
		height: 900px;
		margin-left: calc(50% - 150px);
	}
	.color-barbe li{
		line-height: 300px;
		height: 300px;
		}
	.color-barbe .color1{
		background-image: url(../img/colorbarbe1-1024.png);
		width: 300px;
		margin-left: 0;
	}
	.color-barbe .color2{
		background-image: url(../img/colorbarbe2-1024.png);
		width: 300px;
		margin-left: 0;
	}
	.color-barbe .color3{
		background-image: url(../img/colorbarbe3-1024.png);
		width: 300px;
		margin-left: 0;
	}
	.desktop-barbe{
		width: 320px;
	}
	.desktop-barbe h5{
		margin-bottom: 50px;
	}
	.barbe-desktop1 img, .barbe-desktop2 img{
		width: 320px;
	}
	.barbe-explication{
		height : auto;
	}

	.barbe-explication p{
		font-size: 15px;
		line-height: 20px;
		width: 320px;
		padding: 20px;
		margin: 0;
	}
	.mobile{
		position: relative;
		margin-left: calc(50% - 160px);
	}

	.barbe-mobile1, .barbe-mobile2{
		display: inline-block;
		margin:0;
	}
	.barbe-mobile1{
		margin-bottom: 20px;
	}
	.barbe-explication-mobile{
		height : auto;
	}
	.barbe-explication-mobile p{
		font-size: 15px;
		line-height: 20px;
		width: 320px;
		padding: 20px;
		margin: 0;
	}



	.icon-waxy{
		top: 0px; 
		float: none;
		margin: auto calc(50% - 160px);
		height: 640px;
		width: 320px;
		background-size: 320px 320px;
	}

	#waxyprojet{
		position: relative;
		margin-bottom: 320px;
	}
	.brief-waxy{
		position: relative;
		margin: auto calc(50% - 160px);
		float: none;
		width: 320px;
		height: 320px;
		z-index: 1;
	}	
	.brief-waxy p{
		background-size: 320px 320px;
		height: 320px;
		width: 320px;
		margin-left: 0;
		padding: 45px 0;
	}
	.button-fermeturewaxy {
		top: 0;
	    left: 240px;
	    margin-right: 80px;
	    border: none;
	    height: 25px;
	    width: 25px;
	    float: right;
	    z-index: 2;
	    width: 70px;
		background-size: 70px 13px;
	    }
	.logo-waxy{
		margin: 50px auto;
	}
	.color-waxy{
		width: 300px;
		height: 600px; 
		margin-left: calc(50% - 150px);
	}
	.color-waxy li{
		float: none;
		background-size: 300px 300px;
		width: 300px;
		height: 300px;
		line-height: 300px;
	}
	.desktop-waxy{
		margin-bottom: 0;
	}
	.desktop-waxy h5{
		margin-bottom: 50px;
	}
	.waxy-desktop1, .waxy-desktop2{
		width: 320px;
		margin: auto calc(50% - 160px);
	}
	.waxy-desktop1 img, .waxy-desktop2 img{
		width: 320px;		
	}
	.waxy-explication{
		height : 240px;
	}

	.waxy-explication p{
		font-size: 15px;
		line-height: 20px;
		width: 320px;
		padding: 35px 20px;
		margin-left: calc(50% - 160px);
	}
	#waxyprojet{
		margin-bottom: 0;
		margin-top: 0;
	}
	.waxyprojet{
		display: none;
	}





	.icon-nicettes{	
	    position: relative; 
	    top: 0;
	    left: 0;
	    float: none;
		margin: auto calc(50% - 160px);
		height: 640px;
	 }
	.carroussel {
	    width: 320px;
	   }
	.icon-nicettes figure img{
		width: 320px;
		height: 320px;
	}
	.overlay-nicettes img{
		width: 320px;
		height: 320px;
	}
	.nicettesprojet{
		position: relative;
		float: none;
		z-index: 4;
	}
	.brief-nicettes{
		position: relative;
		top: 0;
		margin: auto calc(50% - 160px);
		width: 320px;
		height: 320px;
		z-index: 1;
		background-size: 320px 320px;
	}
	.brief-nicettes p{
		height: 320px;
		width: 320px;
		margin-left: 0;
		padding-top: 120px;
		line-height: 35px;
	}
	.brief-nicettes a {
     top: 70px; 
     font-size: 15px; 
     padding: 10px 10px;
     left: 90px; 
     z-index: 5; 
	}
	.button-fermeturenicettes{
		top: 0px;
		border : none;
		height: 25px;
		width: 25px;
		width: 70px;
		right: 10px;
		background-size: 70px 13px;
		z-index: 5;
	}
	.element-nicettes{
		margin-top: 0px;
		width: 320px;
		margin-left: calc(50% - 160px);
	}
	.logo-nicettes{
		margin: 50px auto;
	}
	.color-nicettes{
		width: 300px;
		height: 600px; 
		margin-left: calc(50% - 150px);
	}
	.color-nicettes li{
		float: none;
		background-size: 300px 300px;
		width: 300px;
		height: 300px;
		line-height: 300px;
	}
	.element-nicettes p{
		line-height: 20px;
		width: 320px;
		padding: 35px 20px;
		margin: 0;
		}	
	.nicettes-desktop1 img, .nicettes-desktop2 img{
		width: 320px;
		margin: auto calc(50% - 160px);
	}
	.desktop-nicettes{
		width: 320px;
		margin-left: calc(50% - 160px);
	}
	.desktop-nicettes h5{
		margin-bottom: 50px;
	}
	.nicettes-explication{
		height: auto;
	}
	.nicettes-explication p{
		width: 320px;
		margin: 0;
		padding: 35px 20px;
		line-height: 20px;
	}



	.icon-bppb{	
	    position: relative; 
	    top: 0;
	    left: 0;
	    float: none;
		margin: auto calc(50% - 160px);
		height: 640px;
		width: 320px;
		background-size: 320px 320px;
		overflow: hidden;
	 }
	 .bppbprojet{
	 	margin-bottom: 0;
	 }

	.brief-bppb{
		position: relative;
		top: 0;
		width: 320px;
		height: 320px;
		z-index: 1;
		background-size: 320px 320px;
		left: 0;
	}
	.brief-bppb p{
		height: 320px;
		width: 320px;
		padding: 95px 50px;
		padding-bottom: 0;
		line-height: 25px;
		margin: 0;
	}
	.brief-bppb img{
		float: none;
		background-size: 320px 320px;	
	}

	.button-fermeturebppb{	
		top: 0px;
		float: right;
		z-index: 2;
		width: 70px;
		background-size: 70px 13px;
		left: 240px;
	}
	.element-bppb{
		width: 100%;
		position: relative;
		margin-bottom: 50px;
	}
	.logo-bppb{	
		margin: 50px auto;
	}
	.color-bppb{
		width: 300px;
		height: 600px; 
		margin-left: calc(50% - 150px);
	}
	.color-bppb li{
		float: none;
		background-size: 300px 300px;
		width: 300px;
		height: 300px;
		line-height: 300px;
	}
	.desktop-bppb{
		position: relative;
		width: 320px;
		margin-left: calc(50% - 160px);
	}
	.bppb-theme{
		height: auto;
	}
	.bppb-map {
	    width: 100%;
	    float: none;
		margin-left: calc(50% - 120px); 
		height: 412px;
	}
	.bppb-map img {
	    width: 235px;
	    margin-left: 0; 
	    float: none;
	}
	.desktop-bppb .bppb-picto {
	    width: 100%;
	    float: none;
	    }
	.bppb-picto{
		width: 320px;
	}
	.bppb-picto ul{
		margin: 0;
	}
	.bppb-picto li{
		margin-right: calc(50% - 160px);
		text-align: center;
		padding-top: 50px;
		padding-bottom: 0;
	}
	.bppb-picto li img {
	    float: none;
	    margin-right: 0px;
	    height: 80px;
	   }
	.bppb-picto li p{
		line-height: 20px;
	}
	.text-map{
		height: auto;
	}
	.text-map p{		
		line-height: 20px;
		width: 320px;
		margin: 0;
		padding: 35px 20px;
	}
	.slogan-bppb{
		display: none;
	}
	.slogan-bppb p{
		font-size: 30px;
	}
	.bppb33{
		margin: 50px auto;
	}
	.bppb33 li{
		width: 100%;
	}
	.bppb33 li img{
	width: 300px;
	margin: 0 0 50px calc(50% - 150px);
	}
	.bppb33 li p{
		margin-bottom: 50px;
		margin-left: 10px;
	}
	.mockup-bppb img{
		width: 320px;
		height: 320px;
	}
	.mockup-bppb{
		height: 640px
	}
	.mockup-bppb p{
	width: 320px;
    margin-right: 0px;
    line-height: 25px;
    padding: 75px 0px;
    text-align: center;
   	}



	#saut{
		background-image: url(../img/fondgraphismemobile.png);
		background-size: 320px 320px;
		overflow: hidden;
		height: 320px;
		width: 320px;
		margin: auto calc(50% - 160px);
		position: relative;
		top: 0;
	}
	#saut h2{	
	    top: 140px;
	    left: 60px;
	}

	.icon-chauffeurprive{
		top: 0px; 
		margin: auto calc(50% - 160px);
		height: 640px;
		width: 320px;
		background-size: 320px 320px;
	}    
	 
	.brief-cp{
		position: relative;
		top: 0;
		margin: auto calc(50% - 160px);
		width: 320px;
		height: 320px;
		z-index: 1;	
		left: 0;
		background-size: 320px 320px;
	}
	.brief-cp p{
		height: 320px;
		width: 320px;	
		margin-left: calc(50% - 160px);
		padding: 90px 20px;
		font-size: 13px;
		line-height: 20px;
	}
	.button-fermeturecp{
		top: 0;
		left: 240px;
		width: 70px;
		background-size: 70px 13px;
	}
	.logocp{
		padding-top: 0;
		margin-top: 50px;
		margin-bottom: 50px;
	}

	.fb-img img{	
		width: 320px;
		height: auto;
	}
	.soiree img{
		width: 300px;
	}
	.soiree50 li{
		height: 160px;
	}
	.soiree50 li img{
		width: 160px;
		height: 160px;	
	}

	.insta33{
		margin-left: 0px;
	}
	.insta33 li{
		width: 160px;
		height: 160px;
		margin: auto calc(50% - 160px);
	}
	.insta33 img{
		width: 160px;
		height: 160px;
	}

	.insta33 li:nth-child(2n+0){
		float: right;
	}
	.header-img img{
		width: 320px;
	}
	.chauffeurpriveprojet{
		margin-bottom: 0;
	}

	#designtransport{
		background-image: url(../img/fondtransportmobile.png);
		background-size: 320px 320px;
		overflow: hidden;
		height: 320px;
		width: 320px;
		left: 0;
		margin: auto calc(50% - 160px);
		position: relative;
		top: -3px;
	}
	#designtransport h2{	
	    top: 140px;
	    left: 60px;
	    font-size: 35px;
	}
	.renaultsamsung{
		margin-top: -3px;
	}

	.icon-renaultsamsung{
	position: relative;	
	float: none;
	margin: auto calc(50% - 160px);
	height: 640px;
	width: 320px;
	}
	.icon-renaultsamsung img{
		width: 320px;
		height: 320px;
	}
	.brief-renaultsamsung{
		position: relative;
		top: 0;
		margin: auto calc(50% - 160px);
		width: 320px;
		height: 320px;
		z-index: 1;	
		left: 0;
		background-size: 320px 320px;
	}
	.brief-renaultsamsung p{
		height: 320px;
		width: 320px;	
		margin-left: 0;
		padding: 80px 35px;
		font-size: 12px;
		line-height: 20px;
	}
	.button-fermeturerenaultsamsung{
		top: 0;
		left: 240px;
		width: 70px;
		background-size: 70px 13px;
	}
	.element-renaultsamsung{
		margin-left: calc(50% - 160px);
		margin-bottom: 50px;
	}
	.element-renaultsamsung img{
		margin-top : 0px;
		width: 300px;
		margin-left: 25px;
	}
	.planche-samsung img{
		width : 320px;
	}
	.brief-rouesamsung h4, .brief-intesamsung h4, .brief-extesamsung h4 {
	    padding: 45px 0 45px 0;
	    }
	.roue-samsung p, .intesamsung p, .extesamsung p{
		font-size: 17px;
	}
	.roue-samsung img, .intesamsung img, .extesamsung img{
		width: 320px;
	}
	.text-33 li{
		width: 100%;
		float: none;
	}
	.text-33 li p{
		font-size: 12px;
		width: 300px;
		margin-left: 10px;
	}

	.text-33 img{
		margin-bottom: 25px;
	}
	.brief-rouesamsung{
		height: auto;
	}
	.brief-rouesamsung p{
		width: 300px;
		font-size: 15px;
		margin-left: 10px;
		line-height: 20px;
	}
	.brief-intesamsung{
		height: auto;
	}
	.brief-intesamsung p{
		width: 300px;
		font-size: 15px;
		margin-left: 10px;
		line-height: 20px;
	}
	.brief-extesamsung{
		height: auto;
	}
	.brief-extesamsung p{
		width: 300px;
		font-size: 15px;
		margin-left: 10px;
		line-height: 20px;
	}
	
	.overlay-barbe, .overlay-waxy, .overlay-nicettes, .overlay-bppb, .overlay-cp, .overlay-renaultsamsung{
		position: relative;
	    overflow: hidden;
	    width: 320px;
	    height: 320px;
	    top: 320px;
	    display: block;
	    transform: none;
	    background-size: 320px 320px;
	}
	.overlay-renaultsamsung{
		top: -3px;
	}
	.overlay-barbe a, .overlay-waxy a, .overlay-bppb a, .overlay-cp a{
		position: relative;
	}

	.overlay-barbe input, .overlay-waxy input, .overlay-nicettes input, .overlay-bppb input, 
	.overlay-cp input{
		font-family: 'Epic fusion', 'Arial', sans-serif;
		font-size: 16px;
		text-transform:uppercase;
		overflow: hidden;
	  	-ms-transform: none;
	  	position: absolute;
	  	top: 200px;
	  	height:40px;
	}
	.overlay-renaultsamsung input{
		top: 200px;
		height: 40px;
		margin-left: 85px;
	}

	.overlay-barbe .button-barbe, .overlay-waxy .button-waxy, .overlay-nicettes .button-nicettes,
	 .overlay-bppb .button-bppb{
		background-color: #190011;
	    color: #fff;
	    padding: 10px 10px;
	    border: 3px solid #fff;    
	    position: absolute;
	    left: calc(50% - 72px);
	 	bottom : 150px;
	   }
	.overlay-barbe .button-barbe:hover, .overlay-waxy .button-waxy:hover, .overlay-nicettes .button-nicettes:hover,
	.overlay-bppb .button-bppb:hover{
		background-color: #190011;
	    color: #fff;
	    padding: 10px 10px;
	    border: 3px solid #fff;    
	    position: absolute;
	    left: calc(50% - 72px);
	 	bottom : 150px;
	}

	.overlay-renaultsamsung .button-renaultsamsung{
		background-color: #720011;
	    color: #fff;
	    padding: 10px 10px;
	    border: 3px solid #fff;    
	    position: absolute;
	    left: calc(50% - 157px);
	 	bottom : 150px;
	 	font-family: 'Epic fusion', 'Arial', sans-serif;
		font-size: 16px;
		text-transform:uppercase;
	}


	.overlay-renaultsamsung .button-renaultsamsung:hover{
		background-color: #720011;
	    color: #fff;
	    padding: 10px 10px;
	    border: 3px solid #fff;    
	    position: absolute;
	    left: calc(50% - 157px);
	 	bottom : 150px;
	 	font-family: 'Epic fusion', 'Arial', sans-serif;
		font-size: 16px;
		text-transform:uppercase;
	}


	.overlay-cp .button-cp{
		background-color: #a05f11;
	    color: #fff;
	    padding: 10px 10px;
	    border: 3px solid #fff;    
	    position: absolute;
	    left: calc(50% - 70px);
	 	bottom : 150px;
	}
	.overlay-cp .button-cp:hover{
		background-color: #a05f11;
	    color: #fff;
	    padding: 10px 10px;
	    border: 3px solid #fff;    
	    position: absolute;
	    left: calc(50% - 70px);
	 	bottom : 150px;
	}
	




	footer{
			height: 700px;
	}
	footer ul{
		width: 320px;

		margin-left: calc(50% - 160px);
	}
	.col33:first-child{
		margin-left: 0px;
	}

	.col33{
		width: 100%;
		float: none;
		margin: 50px 0 25px 0;
	}
	.col33:last-child img{
		width: 300px;

	}

}