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

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

@font-face {
font-family: 'Uniform-Black';
src: url('../fonts/Uniform-Black.eot?#iefix') format('embedded-opentype'),  url('../fonts/Uniform-Black.otf')  format('opentype'),
	url('../fonts/Uniform-Black.woff') format('woff'), url('../fonts/Uniform-Black.ttf')  format('truetype'), url('../fonts/Uniform-Black.svg#Uniform-Black') format('svg');
font-weight: normal;
font-style: normal;
}
/* =====[ RESET ]======================================================================== */

body,h1,h2,h3,h4,h5,p,quote,small,form,input,ul,li,ol,label{
	/* Page reset */
	margin:0px;
	padding:0px;
}


h1, h2, h3, h4, h5, .style1{ font-weight:400; line-height:1}


/* =====[ GENERAL ]======================================================================== */
body {
	font-family: 'Uniform', sans-serif;
	font-size:16px;
	color:#4b4b4c;
	position: relative;
	margin:0;
	padding:0;
	z-index:0;
	font-weight:400;
	background:url(../images/bg-beton.png) no-repeat top center #ffffff fixed;
	background-size:cover;
}


strong{	font-weight:normal; font-family: 'Uniform-Medium', sans-serif;}

a{color:#454545; text-decoration:none;}
a:hover{color:#000000; text-decoration:none;}

h1{	font-size:48px; color:#2e2e2e;text-transform:uppercase; padding-top:25px; text-align:center}
h2{	font-size:85px; color:#1f1f1f; font-family: 'Uniform-Black', sans-serif; text-transform:uppercase;}
h3{	font-size:40px; color:#5b5a5b; text-transform:uppercase; font-family: 'Uniform-Medium', sans-serif; background:url(../images/fleche.png) no-repeat -50px bottom; background-size:auto 225px; height:225px; padding:120px 0 0 5%; box-sizing:border-box}
h4{	font-size:25px; color:#ffffff; text-transform:uppercase; margin-bottom:25px;}
h5{	font-size:20px; color:#a4a5a6; line-height:1; }
h2 span, h3 span{font-size:20px; font-family: 'Roboto Condensed', sans-serif; font-weight:400; display:block}

.style01{	font-size:40px;	color:#1e1e1e;	display:block; }
.style02{	font-size:20px;	text-align:center;	display:block;font-weight:700; color:#101010}
.style03{	color:#4fa6d4;}

/* bouton to top */
#toTop {
	font-size:40px;
	position:fixed;
	bottom:5%;
	right:5%;
	cursor:pointer;
	display:none;
	opacity:0.2;
	z-index:20;
}
#toTop:hover{color:#1e2485; opacity:1}

.contenu{	width:90%; margin:0 auto; z-index:1; position:relative; }
.contenu-petit{	width:60%; margin:5% auto; z-index:1; position:relative; }

p{ padding:10px 0}

a.btn, input[type=Submit]{ background:#none; border:1px solid #1e2485; color:#1e2485; transition:0.5s; opacity: 1; box-sizing:border-box; display:inline-block; padding:10px 30px; font-size:18px; text-align:center; margin:5px 0; cursor: pointer; font-weight:700}
a:hover.btn, input[type=Submit]:hover{ opacity:1; background:#1e2485; color:#ffffff}

.font18{	font-size:18px;}

/*video 100%*/
.resp-container {
	position: relative;
	overflow: hidden;
	padding-top: 56.25%;
}
.resp-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


ul.list{margin:25px 0;}
ul.list li{list-style:none; padding-bottom:5px}
ul.list li:before{content: "➝ ";}

ul.list2{display:flex; flex-wrap: wrap; list-style:none; text-align:center; justify-content:center; margin:25px 0;}
ul.list2 li{width:20%; padding:20px; box-sizing:border-box;}
ul.list2 li span{display:block; color:#737373;}

ul.list0 li{	list-style:none; padding:10px 0}

ol{	margin:20px 0 20px 20px}
ol li{	padding-bottom:15px}



/* =====[ HEADER ]======================================================================== */

.menumobile{display:none; }
.menumobile span{	font-size:40px; cursor:pointer; color:#b52929; background:#010101; padding:3px 13px;}
.menupc{ display:flex; align-items:center; flex-wrap: wrap; justify-content:flex-start; position:relative; list-style:none; font-size:18px; font-weight:900}
header{font-size:20px; display:flex; justify-content:space-between;}
header span{	font-size:30px; display:block;}

header .soumission{	 padding-top:4%; text-align:right; background:url(../images/fleche.png) no-repeat right top; height:163px; background-size:auto 163px; }
header h1{	width:100%}
header h1 em{	display:block; font-style:normal}
.parallelogramme1{
	width:100%;
	background:#111111;
	-webkit-transform:skew(18deg);
	-moz-transform:skew(18deg);
	-o-transform:skew(18deg);
	tranform:skew(18deg);
	height:36px;
}


/* =====[ INDEX ]======================================================================== */
.swiper-slide img{	width:100%; height:auto}
.sciagebeton-01{animation-delay: 0.5s;}

.diagonal{opacity: 0.5; max-width:1639px; width:100%; height:auto; }

.intro{ position:relative; text-align:center; margin:65px 0;}
.img-sciagebeton-01, .img-psbdelest-01{max-width:1092px; width:100%; height:auto;}
.sciagebeton-01, .psbdelest-01{width:56%;position:absolute;}
.sciagebeton-01{ top:65px; left:0}
.psbdelest-01{ top:-65px; right:0}
.intro > div > a > div {position:absolute;  display:flex; flex-direction: column; justify-content:center; align-items:center}
.sciagebeton-01 div{right:15%; bottom:40px;}
.psbdelest-01 div{left:10%;  top:40px}
.intro > div > a > div span{ display:block; margin:25px 0; font-size:28px; color:#ffffff}
.intro .logo1{	max-width:225px; width:100%; height:auto;}
.intro .logo2{	max-width:600px; width:100%; height:auto;}

.psbdelest-02{position:relative; overflow:hidden; padding:6% 0 0 0; margin:10% 0 0 0; }
.psbdelest-02 h2, .psbdelest-03 h3 span, .psbdelest-03 h3{color:#1e2485 }
.psbdelest-02 > img{position:absolute; top:0; right:0; z-index:0;/* max-width:1639px; width:100%; height:auto; */opacity: 0.8;}
.psbdelest-02 > div{position:relative; z-index:2; width:62%; margin:0 5% 0 auto; display:flex;}


.psbdelest-02 > div > div > img{ postion:relative; padding-left:40px; box-sizing:border-box; margin-top:3%;   }

.territoire{background:url(../images/bg-territoire.png) no-repeat top center; font-size:28px; color:#ffffff; padding:225px 0 50px 0; text-align:center;  text-transform:uppercase}
.territoire span{ font-size:40px; font-family: 'Uniform-Medium', sans-serif; display:block}
.territoire strong{ font-size:35px; color:#7c7b7b; display:block}

.sciagebeton-02{position:relative; /*overflow:hidden;*/ padding:6% 0 0 0; display:flex; align-items:center; }
.sciagebeton-02 h2, .sciagebeton-03 h3 span, .sciagebeton-03 h3{color:#ac0212}
.sciagebeton-02 div{margin-right:5%;}
.sciagebeton-02 img{max-width:1107px; height:auto; width:100%; padding-right:25px;}

.sciagebeton-02 a.btn{ border:1px solid #ac0212; color:#ac0212; transition:0.5s; opacity: 0.8;}
.sciagebeton-02 a:hover.btn{ opacity:1; background:#ac0212; color:#ffffff}



.psbdelest-03{ margin-top:-4% }
.sciagebeton-03{ position:relative; }

.parallelogramme2 .contenu{display:flex; }
.parallelogramme2 ul{list-style:none; width:30%; /*column-count:3*/}
.parallelogramme2 ul:first-child{padding-top:7%}
.parallelogramme2 ul:nth-child(2){padding-top:4%}
.parallelogramme2 ul:nth-child(3){padding-top:1%}
.parallelogramme2 ul li{padding:0 0 10px 30px; background:url(../images/etoile.png) no-repeat top left;}

.parallelogramme2{
	width:100%;
	background: rgba(255, 255, 255, 0.8);
	-webkit-transform:skew(0, -4deg);
	-moz-transform:skew(0, -4deg);
	-o-transform:skew(0, -4deg);
	tranform:skew(0, -4deg);
	height:auto;
	padding:40px 0 30px 0;
	margin:0 0 10% 0;
	color:#111111;
}

.parallelogramme2 div{
-webkit-transform:skew(0, 4deg);
-moz-transform:skew(0, 4deg);
-o-transform:skew(0, 4deg);
tranform:skew(0, 4deg);
}

.realisation-intro{font-size:60px; text-transform:uppercase; }
.realisation-intro a{color:#ffffff }

.swiper-slide span{	font-size:40px; font-family: 'Uniform-Medium', sans-serif; color:#ffffff; position:absolute; top:45%; right:0; left:0; text-align:center; text-transform:uppercase}

/* =====[ REALISATION ]======================================================================== */
.realisation{margin-bottom:5%}
.entetelogo{text-align:center; margin:5% auto;}
.psb img{max-width:498px; width:100%; height:auto;}
.psb h2{	color:#1e2485; font-size:80px}
.sciage h2{	color:#90020e; font-size:80px}
.tab {
	overflow: hidden;
	/*border: 1px solid #ccc;*/
	/*background-color: #f1f1f1;*/


	display:flex;
	flex-wrap: wrap;
	justify-content:center;
}

/* Style the buttons that are used to open the tab content */
.tab button {
	background-color: inherit;
	/*float: left;*/
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
	font-size:18px;
	text-transform:uppercase;
	font-family: 'Uniform-Medium';
	color:#5b5a5b;
}

/* Change background color of buttons on hover */
.tab button:hover {
	background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
	background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
	display: none;
	/*padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;*/
	margin:50px 0;

}

.tabcontent {
	animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}


/* =====[ ANIMATE ]======================================================================== */

/* Wobble Vertical */
@-webkit-keyframes hvr-wobble-vertical {
16.65% {
	-webkit-transform: translateY(8px);
	transform: translateY(8px);
	}
	33.3% {
	-webkit-transform: translateY(-6px);
	transform: translateY(-6px);
	}
	49.95% {
	-webkit-transform: translateY(4px);
	transform: translateY(4px);
	}
	66.6% {
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
	}
	83.25% {
	-webkit-transform: translateY(1px);
	transform: translateY(1px);
	}
100% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
}
@keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.hvr-wobble-vertical {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
  -webkit-animation-name: hvr-wobble-vertical;
  animation-name: hvr-wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Pop */
@-webkit-keyframes hvr-pop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
@keyframes hvr-pop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
.hvr-pop {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
  -webkit-animation-name: hvr-pop;
  animation-name: hvr-pop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}


/* =====[ FOOTER ]======================================================================== */
footer{ display:flex; padding-top:5% }
footer img{display:block; max-width:350px; width:100%; height:auto; margin-bottom:20px}
footer img.logo{ max-width:180px; margin-bottom:50px; }
footer a{color:#ffffff}
footer > div:first-child{width:50%}
footer p, footer a{font-size:14px; color:#000000}

.parallelogramme{
width:30%;
height:auto;
background:#111111;
-webkit-transform:skew(18deg);
-moz-transform:skew(18deg);
-o-transform:skew(18deg);
tranform:skew(18deg);
	color:#ffffff;
}

.parallelogramme div{
-webkit-transform:skew(-18deg);
-moz-transform:skew(-18deg);
-o-transform:skew(-18deg);
tranform:skew(-18deg);
	text-align:center;
	padding:25px 0;
	font-size:18px;

}

.parallelogramme div span{font-size:16px;}
.parallelogramme div a{color:#ffffff}