@import url("normalize.css");
@import url("cf.css");
@import url("font.css");

body{
	background: #fff; 
	color: #2b2b2b;
	font-family: 'raleway',arial;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5; 
	margin: 0 auto;
	width: 100%;
	height: 100%;
}
::selection {
	background: rgba(226, 71, 66, .8);
	color: #fff;
}
html{
	width: 100%;
	height: 100%;
}

a{
	text-decoration: none;
}

ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
/*******************************************************************/
.container{
	max-width: 1500px;
}
/*******************************Page principale***************************************************/

/*Navigation*/
nav {
	background: #444444;
	position: fixed;
	overflow: hidden;
	right:0px;
	left:0px;
	top:0px;
	width: 100%;
	z-index: 300;
}
.nav__element {
	float: right;

	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.nav__element > a {
	display: block;
	padding: 20px 20px;
	color: white;
	font-size: 18px;
}
.nav__element:hover {
	background: #E24747;
	display: block;
}
.active{
	background: #E24747;
}
.menu{
	padding-right: 50px;
}
.navbar__header{
	position: absolute;
	top: 0;
	left: 20px;
}
.navbar__header--link h1{
	font-size: 18px;
	color: #FFFFFF;
	margin: 0;
	float: left;
	padding-top: 15px;
	margin-left: 20px;
	font-family: 'raleway',arial;
	font-weight: 400;
}
.navbar__header--link h2{
	font-size: 13px;
	color: #C4C4C4;
	margin: 0;
	margin-left: 20px;
	padding: 0;
	font-family: 'raleway',arial;
	font-weight: 400;
}

/* Header */
.ordinateur{
	background: url(../img/fondheader.jpg)no-repeat center center fixed; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover; 
 	height: 100%;
 	width: 100%;
}
.section--header h1, .section--header h2 {
	text-align: center;
	color:  #111111;
}
.section--header p{
	color: #fff;
	text-align: center;
}
.section--header h1{
	font-family: 'bitter';
	font-weight: 700;
	padding-top: 94px;
	font-size: 54px;
	margin-bottom: 0;
}
.section--header h2{
	font-family: 'raleway';
	font-weight: 400;
	padding-top:14px;
	font-size: 35px;
	opacity: .8;
	margin-top: 0;
}
.logo-bc{
	display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 30px;
}
.section--header p{
	font-family: 'raleway';
	font-weight: 300;
	font-style: italic;
	font-size: 30px;
	margin-top: 0;
	padding-top: 10px;
}

/*Main*/

/*A propos*/
.section--salut{
	position: relative;
	overflow:hidden;
	width: 100%;
	height: 100%;
	background-color: #fff;
}
.section--salut__image{
	width: 50%;
	height: 500px;
	background: url(../img/cledesol.jpg)no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover; 
	text-indent: -9999px;
	display:block;
	float: left;
}
.section--salut__texte {
	width: 50%;
	float: left;
	
}
.section--salut__texte h1{
	font-size: 54px;
	color: #E24747;
	font-family: 'bitter';
	padding-top: 27px;

}
.salut{
	width: 64.16666666666667%;
	margin: 0 auto;
}
.salut-p{
	margin-top:24px;
}
/*Stage*/
.section--stage{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	clear: both;
	background-color: #fff;
}
.section--stage__image{
	width: 50%;
	height: 500px;
	background: url(../img/partition.jpg)no-repeat top right; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover; 
	text-indent: -9999px;
	display:block;
	float: right;
}
.section--stage__texte {
	width: 50%;
	float: right;
}
.section--stage__texte h1{
	font-size: 36px;
	color: #E24747;
	font-family: 'bitter';
	padding-top: 65px;

}
.stage{
	width: 67.16666666666667%;
	margin: 0 auto;
}
.stage p{
	margin-top: 42px;
}
.stage a{
	color: #E24747;
}
.stage a:hover{
	border-bottom: 1px solid #E24747;
}

/*Travaux*/
.section--travaux{
	clear: both;
	background: #444444;
	width: 100%;
	position: relative;
	padding-bottom: 10px;
}
.section--travaux h1{
	font-size: 36px;
	color: #fff;
	font-family: 'bitter';
	margin: 0;
	padding-left: 8.4375%;
	padding-top: 20px;
	padding-bottom: 10px;
}
.piano li{
	background: #fff;
}
.piano-betronic, .piano-lettrine, .piano-cocoa{
	width: 100%;
	height: 200px;
}
.piano-betronic, .piano-lettrine{
	border-bottom: 10px solid #0F0F0F;
}
.piano-betronic a{
	width: 100%;
	height: 100%;
	background: url(../img/betronic.jpg)no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover; 
	display:block;
	position: relative;

	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.piano-betronic a:hover{
	background: url(../img/betronichover.jpg)no-repeat center center;
}
.piano-betronic a h2, .piano-cocoa a h2, .piano-lettrine a h2{
	width: 60%;
	margin: 0;
	background: #0F0F0F;
	font-family: 'raleway';
	font-weight: 400;
	font-size: 30px;
	padding-top:15px;
	padding-bottom: 15px;
	text-align: center;
	position: absolute;
	bottom:0;
	left: 0;
	color: #fff;
}
.piano-betronic a p, .piano-cocoa a p, .piano-lettrine a p{
	text-align: center;
	font-size: 20px;
	margin: 0;
	padding-top: 50px;
	color: #2b2b2b;
}
.piano-lettrine a{
	width: 100%;
	height: 100%;
	background: url(../img/typographie.jpg)no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover; 
	display:block;
	position: relative;

	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.piano-lettrine a:hover{
	background: url(../img/typographiehover.jpg)no-repeat center center;
}
.piano-betronic a :hover p, .piano-cocoa a p:hover, .piano-lettrine a p:hover{
	opacity: 1;
}
.piano-cocoa a{
	width: 100%;
	height: 100%;
	background: url(../img/cocoa.jpg)no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover; 
	display:block;
	position: relative;

	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.piano-cocoa a:hover{
	background: url(../img/cocoahover.jpg)no-repeat center center;
}


/*Photographie*/
.section--photo{
	clear: both;
	width: 100%;
	background: #E8E8E8;
	overflow: hidden;
}
.section--photo h1{
	font-size: 21px;
	font-family: 'bitter';
	margin: 0;
	padding-left: 8.4375%;
	padding-top: 43px;
	padding-bottom: 30px;
}
.section--photo a img {
	width: 25%;
	height: auto;
	float: left;
	margin-bottom: 30px;

	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.section--photo a img:hover {
	opacity: .8;
	cursor:url(../img/lienexterne.png),auto;
}


/*Contact*/
.section--contact{
	width: 100%;
	padding-top: 78px;
	padding-bottom: 78px;
	overflow: hidden;
	background-color: #fff;
}
.message{
	font-size: 18px;
	width: 40.625%;
	padding-left: 8.541666666666667%;
	float: left;
}
.message-p1{
	padding-top: 9px;
}
.message-p2{
	padding-top: 4px;
	line-height: 1.4;
}
.btn-contact{
	margin: 0 auto;
	float: left;
	margin-left: 20.625%;
	padding-top: 30px;
}
.btn-contact a{
	font-size: 20px;
	text-transform: uppercase;
	display: inline-block;
	padding: 15px 30px ;
	font-size: 18px;
	color: #fff;
	background: #E24747;
	border: 1px solid #E24747;
	margin-top: 10px;

	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.section--contact a:hover{
	color: #E24747;
	background: #fff;
}



/*Footer*/
footer{
	background: #444444;
	width: 100%;
	clear: both;
	overflow: hidden;
}
.btn-footer svg:hover .svgicone{ 
  fill: #FFFFFF;
}
.sociaux{
	margin-top: 20px;
}
.sociaux ul{
	margin: 0 auto;
	width: 310px;
}
.sociaux li{
	float: left;
	padding: 15px;
}
.informations{
	clear: both;
	padding-top: 9px;
	margin-left: 20px;
	margin-bottom: 20px;
}
.informations small{
	float: left;
	clear: both;
	font-size: 14px;
	color: #afafaf;
}
.informations small a{
	color: #E24747;
	padding-top: 4px;
}
.informations small a:hover{
	border-bottom: 1px solid #E24747;
}
.informations small:first-child{
	font-size: 16px;
	color: #fff;
}
.divers{
	float: right;
	margin-right: 20px;
	margin-bottom: 20px;
}
.divers p{
	color: #fff;
	margin: 0;
}
.divers a{
	color: #fff;
	font-size: 16px;
}
.divers a:hover{
	color: #E24747;
}
.compose{
	padding-top: 2px;
}
.tel{
	margin-top: 4px;
}
/*******************************confidentialité************************************************************/
.confident{
	width: 70%;
	height: 500px;
	margin: 0 auto;
	padding-top: 115px;
	text-align: center;
	position: relative;
}
.confident h1{
	font-family: 'bitter';
	font-weight: 700;
	font-size: 54px;
	margin-bottom: 0;
	color: #E24747;
}
.confident p{
	padding-top: 20px;
}
/*******************************credit************************************************************/
.credit{
	margin: 0 auto;
	width: 80%;
	text-align: center;
	padding-bottom: 50px;
}
.credit a{
	color: #E24747;
}
.credit a:hover{
	border-bottom: 1px solid #E24747;
}
.credit h1{
	padding-top: 80px;
	font-family: 'bitter';
	font-weight: 700;
	padding-top:90px;
	font-size: 54px;
	margin-bottom: 0;
	color: #E24747;
}
.credit h2{
	font-family: 'bitter';
	font-weight: 700;
	font-size: 36px;
	color: #E24747;
}
.credit ul li{
	padding-top: 10px;
}

/*******************************Page 404************************************************************/
.fullscreen-bg__video{
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	background: url(../img/licorne404.png) no-repeat center center;
	background-size: cover;
}
#son{
  background: url("../img/volume.png") no-repeat right top;
  width: 40px;
  height: 40px;
  background-size: 200% 100%;
  display: block;
  border: none;
  position: fixed;
  left: 25px;
  top: 25px;
  cursor: pointer;
  z-index: 10;
}
.bloctext{
	margin: 0 auto;
	text-align: center;
	padding: 15px;
}
.bloctext h1{
	font-family: 'bitter';
	font-size: 40px;
	padding-top: 20px;

}
.bloctext p{
	font-size: 20px;
	padding-top: 20px;

}
.bloctext a{
	font-size: 20px;
	display: inline-block;
	padding: 15px 30px ;
	font-size: 18px;
	color: #fff;
	background: #E24747;
	border: 2px solid #E24747;

	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.bloctext a:hover{
	color: #E24747;
	background: #fff;
}


/******************************Betronic**********************************************************/
.titretravaux{
	width: 100%;
	height: 500px;
	padding-top: 94px;
}
.titretravaux-betronic{
	background: url(../img/fondbetronic.jpg)no-repeat center center fixed; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover; 
	display:block;
}
.titretravaux-cocoa{
	background: url(../img/fondcocoa.jpg)no-repeat center center fixed; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover; 
	display:block;
}
.titretravaux-typo{
	background: url(../img/fondtypo.jpg)no-repeat center center fixed; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	background-size: cover; 
	display:block;
}
.titretravaux h1{
	font-family: 'bitter';
	font-size: 54px;
	color: #E24747;
	text-align: center;
	margin-bottom: 10px;
}
.titretravaux h1:after {
  content: "";
  position: relative;
  display: block;
  background: #2b2b2b;
  height: 1px;
  margin: 15px auto 15px auto;
  width: 150px;
}
.titretravaux h2{
	font-family: 'raleway';
	font-weight: 400;
	font-size: 24px;
	color: #2b2b2b;
	text-align: center;
	padding-top: 14px;
	margin-top: 22px;
}

.demande{
	width: 400px;
	margin: 0 auto;
	text-align: left;
}
.demande a{
	color: #E24747;
}
.demande a:hover{
	border-bottom: 1px solid #E24747;
}
.presentation{
	overflow: hidden;
	margin-bottom: 50px;
}
.containertravaux{
	width: 80%;
	max-width: 1024px;
	margin: 0 auto;
}
.presentation h1{
	font-weight: 400;
	color: #A3A3A3;
	padding-top: 44px;
	font-size: 33px;
	margin-bottom: 0px;
}
.presentation p{
	width: 50%;
	max-width: 500px;
	padding-top: 2px;
}
.photopresentation{
	width: 100%;
	margin-top: 30px;
}
.photopresentation img{
	float: left;
	width: 33.33333333333333%;
}
.decouvrir{
	overflow: hidden;
}
.recherche{
	width: 45%;
	float: left;
	margin-right: 10%;
}
.public{
	width: 45%;
	float: left;
}
.recherche h1, .public h1{
	font-weight: 400;
	color: #A3A3A3;
	padding-top: 13px;
	margin-bottom: 18px;
	font-size: 33px;
}
.identite h1{
	font-weight: 400;
	color: #A3A3A3;
	padding-top: 38px;
	font-size: 33px;
	padding-bottom: 20px;
}
.identite__logo{
	overflow: hidden;
}
.identite__logo img{
	float: left;
	width: 30%;
	margin-right: 10%;
}
.identite__logo p{
	float: left;
	width: 50%;
	margin-top: 24px;
}
.identite h2{
	font-weight: 400;
	color: #E24747;
	font-size: 24px;
}
.electro{
	padding-bottom: 20px;
	padding-top: 35px;
}
.electro__p{
	padding-top: 5px;
	width: 50%;
}
.electro__img{
	width: 100%;
	padding-top: 20px;
}
.typogaphiedynam{
	overflow: hidden;
}
.typographie{
	padding-top: 29px;
	padding-bottom: 9px;
}
.typographie__p{
	width: 40%;
	padding-right: 10%;
	float: left;
}
.typographie__img{
	width: 40%;
	float: left;
}
.seticone{
	padding-bottom: 27px;
	margin-top: 50px;
}
.seticone__img{
	width: 100%;
}
.affiche{
	padding-top: 24px;
}
.affiche__p{
	padding-top: 24px;
}
.affiche__img--1{
	width: 30%;
	padding-right: 10%;
	padding-left: 15%;
}
.affiche__img--2{
	width: 30%;
}
.gadgets{
	overflow: hidden;
}
.gadget{
	padding-top: 36px;
}
.gadget__p{
	width: 50%;
}
.gadget__img--1{
	width: 80%;
	padding-left: 10%;
}
.gadget__img--2{
	width: 80%;
	padding-left: 10%;
}
.gadget__img--3{
	float: left;
	width: 30%;
	padding-left: 15%;
	padding-right: 10%;
}
.gadget__img--4{
	float: left;
	width: 30%;
}
.fondecran h1, .patterns h1{
	font-weight: 400;
	color: #E24747;
	font-size: 24px;
}
.fondecran{
	overflow: hidden;
}
.fondecran h1{
	padding-top: 13px;
	padding-bottom: 15px;
}
.fondecran img{
	width: 50%;
	float: left;
}
.patterns{
	overflow: hidden;
}
.patterns h1{
	padding-top: 13px;
	padding-bottom: 15px;
}
.patterns img{
	width: 50%;
	float: left;
}
.liens{
	width: 500px;
	margin: 0 auto;
	margin-bottom: 50px;
	margin-top: 70px;
	overflow: hidden;
	position: relative;
}
.liensprem{
	float: left;
}
.lienssecond{
	float: right;
}
.liens a{
	font-size: 20px;
	width: 180px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	display: inline-block;
	font-size: 18px;
	text-transform: uppercase;
	color: #fff;
	background: #E24747;
	border: 1px solid transparent;

	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.liens a:hover{
	color: #E24747;
	background: #fff;
	border: 1px solid #E24747;
}

/******************************Cocoa Casa**********************************************************/

.etapesicone{
	width:100%;
	max-width: 800px;
	margin: 0 auto;
	overflow: hidden;
	padding-top: 50px;
}
.etapesicone figure{
	float: left;
	width: 50%;
	margin: 0;
	position: relative;
	margin-bottom: 50px;
	text-align: center;
	
}

.etapesicone figure img {
	position: relative;
	display: block;
	margin: 0 auto;
}

.etapesicone figure figcaption {
	color: #777777;
	font-size: 16px;
	padding-top: 25px;
}
/******************************Lettrines**********************************************************/
.rat__cote h1, .lettreg__cote h1, .texture h1{
	font-weight: 400;
	color: #A3A3A3;
	padding-top: 35px;
	font-size: 33px;
}
.rat__cote a{
	color: #E24747;
}
.rat__cote a:hover{
	border-bottom: 1px solid #E24747;
}
.rat{
	overflow: hidden;
	margin-top: 60px;
}
.rat__cote{
	float: right;
	width: 50%;
	margin-left: 10%;
}
.rat__cote h1{
	padding-top: 33px;
	margin-bottom: 0;
}
.rat__cote p{
	padding-top: 1px;
}
.rat img{
	float: right;
	width: 40%;
}

.lettreg{
	overflow: hidden;
	margin-top: 60px;
}
.lettreg__cote{
	float: left;
	width: 30%;
	padding-left: 16.541666666666667%;
}
.lettreg__cote h1{
	padding-top: 16px;
	margin-bottom: 0;
}
.lettreg__cote p{
	padding-top: 1px;
}
.lettreg img{
	float: right;
	width: 40%;
}
.texture h1{
	padding-top: 31px;
	margin-bottom: 0;
}
.texture p{
	padding-top: 2px;
}
.texture__photo{
	width: 100%;
}
.texture__photo img{
	width: 30%;
	padding: 0;
}
/**************************Media queries***********************************************************/

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

	.section--salut__image img{
		height: 500px;
		width: auto;
	}

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

	.section--stage__image img{
		height: 400px;
		width: 100%;
	}
	.stage h1{
		font-size: 30px;
	}

}
@media only screen and (max-width: 960px) {
	.section--travaux figure p {
		font-size: 16px;
	}
	.section--header h1 {
	  padding-top: 118px;
	}
	

}
@media only screen and (max-width: 900px) {
	.section--salut__image{
		height: 300px;
		width: 100%;
		overflow: hidden;
	}
	.section--salut__texte{
		clear: both;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.section--salut__texte h1{
		margin-top: 0px;
	}
	.section--stage__image{
		height: 300px;
		width: 100%;
		overflow: hidden;
	}
	.section--stage__texte{
		clear: both;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.section--stage__texte h1{
		padding-top: 0px;
	}

}
@media only screen and (max-width: 800px) {
	.menu{
		display: none;
	}
	nav {
		position: static;
	}
	.navbar{
		height: 72px;
	}
	.ordinateur{
		background: url(../img/fondheadermedium.jpg)no-repeat center center fixed; 
	}
	.btn-contact{
		width: 100%;
		margin-left: 25%;
	}
	.section--contact a{
		margin-bottom: 10px;
	}
	.section--photo a img {
		width: 50%;
		margin-bottom: 0px;
	}
	.message{

		width: 80%;
		margin:20px;
	}
	.informations{
		float: left;
		clear: both;
		margin-left: 10%;
	}
	.divers{
		float: left;
		margin-left: 10%;
	}

	.etapesicone figure{
		float: left;
		width: 100%;
	}
	.liens a{
		float: left;
		clear: both;
	}
	.liensprem{
		margin-bottom: 30px;
	}
	.liens{
		width: 300px;
	}
	.demande{
		width: 80%;
	}

	.texture__photo img{
		width: 100%;
		padding: 0;
	}
	.rat__cote{
		width: 100%;
		margin-left: 0;
	}
	.rat img{
		width: 100%;
	}
	.lettreg{
		overflow: hidden;
		margin-top: 60px;
	}
	.lettreg__cote{
		float: left;
		width: 100%;
		padding-left: 0%;
	}
	.lettreg img{
		width: 100%;
	}
	.recherche{
		width: 100%;
		margin-right: 0;
	}
	.public{
		width: 100%;
	}
	.identite__logo img{
		width: 60%;
		margin-right:0;
	}
	.identite__logo p{
		width: 100%;
		margin-top: 24px;
	}
	.typographie__p{
		width:100%;
		padding-right: 0;
	}
	.typographie__img{
		width: 100%;
	}
	.affiche__img--1{
		width: 80%;
		padding-right: 0;
		padding-left: 0;
	}
	.affiche__img--2{
		width: 80%;
		margin-top: 10px;
	}
	.gadget__img--1{
		width: 100%;
		padding-left: 0;
	}
	.gadget__img--2{
		width: 100%;
		padding-left: 0;
	}
	.gadget__img--3{
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	.gadget__img--4{
		width:100%;
	}
	.gadget__p{
		width:100%;
	}
	.presentation p{
		width: 100%;
	}
	.liens{
		width: 180px;
	}
	.piano-betronic a h2, .piano-cocoa a h2, .piano-lettrine a h2{
		font-size: 20px;
	}
	.confident{
		width: 80%;
		height: auto;
		padding-top: 20px;
	}
	.confident h1{
		font-size: 36px;
	}
	.confident p{
		padding-bottom: 20px;
	}
	.credit h1{
		padding-top: 20px;
		font-size: 36px;
	}
	.credit h2{
		font-family: 'bitter';
		font-weight: 700;
		font-size: 30px;
		color: #E24747;
	}
}
@media only screen and (max-width: 620px) {
	.section--header h1{
		font-size: 40px;
		padding-top: 0px;
	}
	.section--header h2{
		font-size: 30px;
		padding-top: 27px;
	}
	.section--header p{
		font-size: 24px;
		padding-top: 22px;
	}
	.ordinateur{
		background: url(../img/fondheadersmall.jpg)no-repeat center center fixed; 
	}

}