@charset "UTF-8";
/* CSS Document */



@media screen and (max-width:1365px){
	
	
	
	/*-----------------------------------------
		Backgrounds
	-------------------------------------------*/
	
	body{
	}	

	.fond-noir{
		background-position:top 0px left, top left;	
	}
	.background-contact{
		background-position:top -250px  right -580px ;
		background-size:190%;
	}
	.fond-gris{
		width:66%;
	}
	
	/*-----------------------------------------
		Page d'accueil
	-------------------------------------------*/
	
	#accueil{
		/* padding:10% 0 15% 0; */
	}	
	
	/*-----------------------------------------
		Page réalisations et équipe
	-------------------------------------------*/
	
	.content > .bloc-2{
		width:56%;
	}
	.bloc-2 > .image-presentation{
		width:100%;
	}
	div[class="equipe"]{
		padding:30px 0 0 0;
	}
	.equipe{
		width:100% !important;
		/* padding-bottom:45% !important; */
	}
	.reali{
		width:100% !important;
		/* padding-bottom:45% !important; */
	}
	.gros-plan-equipe img{
		width: 90%;
		/* height:60%; */
	}
	
	/*-----------------------------------------
		Page pour chaque réalisation
	-------------------------------------------*/
	
	.retour{
		/*position:absolute;*/
		/* left:46%; */		
	}
	.image-realisation{
		width:100%;
	}
	.content > .bloc-images{
		width:56%;
	}
	.bloc-images > .contenant-image{
		width:100%;
		height:240px;
	}
	
	/*-----------------------------------------
		Page équipements
	-------------------------------------------*/
	
	.equipements{
		width:48% !important;
		/* padding-bottom:48% !important; */
	}
	.gros-plan div{
		/* height:80%; */
	}
	
	/*-----------------------------------------
		Page contact
	-------------------------------------------*/
	
	#contact{
		padding:5% 0 6% 0;
	}
	
}



@media screen and (max-width:1024px){
	
	
	
	
	/*-----------------------------------------
		Backgrounds
	-------------------------------------------*/
	
	body.fond-noir{
		margin: 0;
		padding-left: 12%;
	}
	.background-silhouette{
		width:50%;
		right:-30%;
		top:0;
	}
	.background-contact{
		background-position:top 0px  right -250px ;
		background-size:180%;
	}
	.fond-gris{
		width:100%;
	}
	
	/*-----------------------------------------
		Page default
	-------------------------------------------*/
	
	section{
		padding:10% 0 10% 0;
	}	
	
	/*-----------------------------------------
		Page d'accueil
	-------------------------------------------*/
	
	#accueil{
		padding:15% 0 15% 0;
	}	
	
	/*-----------------------------------------
		Page services
	-------------------------------------------*/
	
	.services-content{
		width:403px;	
	}
	.texte-cercle{
		width:307px;
	}
	
	/*-----------------------------------------
		Page réalisations et équipe
	-------------------------------------------*/
	
	#equipe{
		padding:10% 0 8% 0;
	}
	#realisations{
		padding: 10% 0 8% 0;
	}
	.background-noir{
		z-index: -1;
		position:fixed;
		height:100%;
		width:100%;
		float:left;
		display:block;
		top:0;
		right:0;
		background-color:#000;
	}
	.bloc-1{
		height:auto;
		width:100%;
	}
	.content > .bloc-2{
		width:100%;
		margin-top:40px;
	}
	.bloc-2 > .image-presentation{
		width:48%;
		/* height:200px; */
	}
	.container-contact{
		width:100%;	
	}
	.bloc-2{
		margin-bottom:40px !important;
	}
	div[class="equipe"]{
		padding:0 0 0 30px;
	}
	.equipe{
		width:48% !important;
		/* padding-bottom:30% !important; */
	}
	.reali{
		width:48% !important;
		/* padding-bottom:30% !important; */
	}
	.gros-plan-equipe img{
		/* height:55%; */
	}
	.container1{
		display:none;
	}
	.container2{
		display:block;
	}
	
	/*-----------------------------------------
		Page pour chaque réalisation
	-------------------------------------------*/
	
	.retour{
		/* IE fix -> position:inherit; */
		/*position:inherit;
		position:initial;*/
		/* margin-left:-120px; */
		display:block;
		width:100px;
	}
	#realisation > span:first-child{
		width:auto;
		margin:0;
	}
	#realisation .content{
		/*margin-top:20px;*/
		margin-top:40px;
	}
	#realisation h1{
		padding-top:15px;
	}
	
	.image-realisation{
		width:100%;
	}
	.content > .bloc-images{
		width:100%;
		margin:20px 0 20px 0 !important;
	}
	.bloc-images > .contenant-image{
		width:48%;
		height:150px;
	}
	div#owl-demo.owl-carousel.owl-theme{
		width:100% !important;
	}
	.padding-carousel{
		/* padding:20% 0 8% 0 !important; */
	}
	
	/*-----------------------------------------
		Page Équipements
	-------------------------------------------*/
	
	.equipements{
		width:30% !important;
		/* padding-bottom:30% !important; */
	}
	.container-logos{
		margin-bottom:40px;
	}
	.logo-partenaire{
		width:13%;
		padding-bottom:13%;
		margin:0 17px 0px 0px;
	}
	.gros-plan div{
		/* height:60%; */
		width: 90%;
		top:15% !important;
	}
	
	/*-----------------------------------------
		Page Contact
	-------------------------------------------*/
	
	#contact{
		padding:10% 0 18% 0;
	}
	.contact-content{
		overflow:hidden;
	}
	.coordonnees-content> .bloc-contact{
		display:block;
		float:inherit;
		margin-right:0px;
		margin-bottom:59px;
	}
	.ouverture{
		margin-top:0px;
		margin-bottom: 0px;	
		left:0px;
	}
	.ouverture:hover{
		margin-top:0px;
	}
	#ferme-formulaire{
		margin-bottom:58px;
	}
	
	/*-----------------------------------------
		Navigation
	-------------------------------------------*/
	
	nav ul li{
		display:block;
		width:277px;
		margin-bottom:2px;
		border-top:none;
		overflow: hidden;
	}
	
	.active
	{
		color: #fff;
	}
	.active1,
	nav ul li,
	nav ul li:hover{
		border-top:0 !important;
	}
	/* .active1:hover{
		border-top:10px solid black;
		border-top-color:rgba(240, 89, 41,1);
	} */
	nav ul li a{
		padding:12px;
		padding-right:250px;
		/* display:inline-block; */
		height:45px;
		line-height:45px;
		float:inherit;
		margin-right:0px;	
	}
	nav ul li a:link{
		background-color: rgba(0, 0, 0, 0.1);
	}
	nav ul li a:visited{
		background-color: rgba(0, 0, 0, 0.1);
	}
	nav ul li a:hover,
	nav ul li:hover,
	.active1{
		background-color: rgba(240, 89, 41,1) !important;
		color:#fff !important;
	}
	nav ul li a:active{
		background-color: rgba(0, 0, 0, 0.1);
	}
	#langue{
		position:relative;
		left:0px;
		top:0px;
		padding-top:0px;
		padding-left:0px;
		border-left:none;
		height:45px;
		width:277px;
	}
	.menu{
		display:none;
		height:0;
		height:auto;
	}
	.menu-ouvert{
		padding:5% 0 20% 0 !important;
	}
	.menu-blanc{
		background-color: rgba(250, 250, 250, 0.2);
	}
	.border-blanc{
		border-left:none !important;
	}
	.active1 .active{
		background-color: transparent;
	}
	/*-----------------------------------------
		Burger
	-------------------------------------------*/
	
	#nav-icon3{
	  width: 10px;
	  height: 6px;
	  padding:15px;
	  position: relative;
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg);
	  -webkit-transition: .5s ease-in-out;
	  -moz-transition: .5s ease-in-out;
	  -o-transition: .5s ease-in-out;
	  transition: .5s ease-in-out;
	  cursor: pointer;
	}
	#nav-icon3 span {
	  display: block;
	  position: absolute;
	  height: 4px;
	  width: 70%;
	  margin-left:10px;
	  background: #000;
	  border-radius: 9px;
	  opacity: 1;
	  left: 0;
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg);
	  -webkit-transition: .25s ease-in-out;
	  -moz-transition: .25s ease-in-out;
	  -o-transition: .25s ease-in-out;
	  transition: .25s ease-in-out;
	}
	#nav-icon3 span:nth-child(1) {
	  top: 0px;
	}
	#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
	  top: 7px;
	}
	#nav-icon3 span:nth-child(4) {
	  top: 14px;
	}
	#nav-icon3.open span:nth-child(1) {
	  top: 7px;
	  width: 0%;
	  left: 0%;
	}
	#nav-icon3.open span:nth-child(2) {
	  -webkit-transform: rotate(45deg);
	  -moz-transform: rotate(45deg);
	  -o-transform: rotate(45deg);
	  transform: rotate(45deg);
	}
	#nav-icon3.open span:nth-child(3) {
	  -webkit-transform: rotate(-45deg);
	  -moz-transform: rotate(-45deg);
	  -o-transform: rotate(-45deg);
	  transform: rotate(-45deg);
	}
	#nav-icon3.open span:nth-child(4) {
	  top: 8px;
	  width: 0%;
	  left: 0%;
	}
	.burger-blanc{
	  background:#fff !important;
	}
}
	
	
	
@media screen and (max-width:940px) and (min-width:768px) {
	
	
	
	/*-----------------------------------------
		Footer
	-------------------------------------------*/
	
	footer{
		height:90px;
		position:relative;
		padding:0;
	}
	footer .clrfix{
		display:block;
	}
	#logoOkto{
		float:none;
		display:inline-block;
		margin:40px 0 0 0;
	}
}

@media screen and (max-width:767px){
	
	
	
	body{
		margin-top:25px;
	}
	.background-contact{
		background-position:top 0px  right -170px ;
		background-size:240%;
	}
	
	/*-----------------------------------------
		Typo
	-------------------------------------------*/
	
	h1{
		font-size:2.1em;
		margin-bottom:20px;
	}
	h2{
		font-size:1.6em;
	}
	.text-1{
		font-size:1.8em;	
		line-height:22px;
	}
	.text-2{
		font-size:1.3em;
		line-height:15px;
		color:#000;
	}
	a{
		color:#000;
		text-decoration:none;
		font-size:1.2em;	
	}
	
	/*-----------------------------------------
		Footer
	-------------------------------------------*/
	
	footer{
		position:static;
		padding:0;
	}
	footer ul li{
		margin-right:45px;
	}
	footer .texte-footer{
		display:none;
	}
	#logoOkto{
		padding-right:20px;
	}
	
	/*-----------------------------------------
		Navigation
	-------------------------------------------*/
	
	nav ul li{
		width:186px;
	}
	
	/*-----------------------------------------
		Page default
	-------------------------------------------*/
	
	section{
		padding:12% 0 12% 0;
	}
	.boutton-orange a{
		font-size:1.6em;
		height:45px !important;
		line-height:45px !important;
	}
	.texte{
		width:70%;
	}
	.logo{
		margin-bottom:19px;
		width:82px;
	}
	
	/*-----------------------------------------
		Page d'accueil
	-------------------------------------------*/
	
	#logo-accueil{
		margin-bottom:40px;
		width:140px;
	}
	#accueil{
		padding:12% 0 12% 0;
	}
	#accueil .texte img{
		margin:20px 0 0 0;
		display: block;
	}
	
	/*-----------------------------------------
		Page services
	-------------------------------------------*/
	
	.services-content{
		width:202px;
	}
	.services-content h1 + p{
		margin-bottom: 20px;
	}
	.cercle{
		width:36px;
		height:36px;
		margin-right:5px;
	}
	.bloc-service{
		margin-bottom:25px;
	}
	.texte-cercle{
		width:160px;	
	}
	.btn-service{
		margin-top:10px;
	}
	
	/*-----------------------------------------
		Page réalisations et équipe
	-------------------------------------------*/
	
	#realisations{
		padding:12% 0 12% 0;
	}
	#equipe{
		padding:12% 0 12% 0;
	}
	#equipe article{
		margin:60px 0 0 0;
	}
	.bloc-2 > .image-presentation{
		width:100%;
		margin:auto 0;
		margin-top:10px;
	}
	.bloc-2 > .image-presentation.equipements{
		margin-top:0;
	}
	div[class="equipe"]{
		padding:30px 0 0 0;
	}
	.equipe{
		width:100% !important;
		/* padding-bottom:50% !important; */
	}
	.reali{
		width:100% !important;
		/* padding-bottom:50% !important; */
	}
	.expert{
		font-size:1.3em;
		height:37px;
		line-height:37px;
	}
	.bloc-2{
		margin-bottom:20px !important;
	}
	.gros-plan-equipe img{
		/* height:37%; */
	}
	
	/*-----------------------------------------
		Page pour chaque réalisation
	-------------------------------------------*/
	
	.invert{
		margin-top:-37px;
	}
	.retour{
		/*position:inherit;*/
		/* margin-left:-84px; */
	}
	#realisation .content{
		/*margin-top:20px;*/
		margin-top:40px;
	}
	#realisation .logo{
		padding-bottom:20px !important;
	}
	#realisation h1{
		padding-top:5px;
		margin-left:41px
	}
	.image-realisation{
		width:100%;
	}
	.content > .bloc-images{
		margin:20px 0 10px 0 !important;
	}
	.bloc-images > .contenant-image{
		width:100%;
		height:130px;
	}
	div#owl-demo.owl-carousel.owl-theme{
		width:100% !important;
	}
	.padding-carousel{
		/* padding:40% 0 8% 0 !important; */
	}
	
	/*-----------------------------------------
		Icônes contact blanches
	-------------------------------------------*/
	
	.container-contact{
		width:100%;
		float:left;
	}
	
	/*-----------------------------------------
		Page Équipements
	-------------------------------------------*/
	.bloc-2{
		margin-top:5px !important;
	}
	.container-logos{
		margin-bottom:40px;
	}
	.logo-partenaire{
		width:23%;
		padding-bottom:23%;
		margin:0 17px 11px 0px;
	}
	.equipements{
		width:47% !important;
		/* height: 0px !important; */
		/* padding-bottom:47% !important; */
		margin-right:7px !important;
		margin-bottom:7px !important;
	}
	.text-equipements{
		height:37px;
		line-height:37px;
		font-size:1.3em;
	}
	.gros-plan div{
		/* height:45%; */
		top:15% !important;
	}
	
	/*-----------------------------------------
		Page Contact
	-------------------------------------------*/
	
	#contact{
		padding:12% 0 10% 0;
	}
	.ouverture{
		display:none;
	}
	.espace{
		margin-bottom:12px;
	}
	
}

@media screen and (max-width:519px){
	
	/*-----------------------------------------
		Footer
	-------------------------------------------*/
	
	footer{
		height:90px;
	}
	footer .clrfix{
		display:block;
	}
	footer ul li{
		margin:0;
		width:25%;
	}
	#logoOkto{
		margin:40px 0 0 0;
		float:none;
		display:inline-block;
		padding:0;
	}	

	h3{
		font-size:1.7em;
	}
}

@media screen and (min-width:1025px){
	.menu{
		display:block !important;
	}
}

.burger-ouvert{
	padding-top:5%;
}