*{
	max-width:100%;
	transition:width 0.3s ease;

}



/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    
    background:#555;

}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(100%, 5%, 0%,1); 



}


@font-face {
 font-family: "test";
 src: url("../font/GillSansStd.otf");
}
@font-face {

font-family:"test_extra_bold";
src:url("../font/GillSansStd-BoldCondensed.otf");

}
body{
	
   	cursor: url('../images/cursor.png'), auto;

    font-family: "test";
   
    display:block;
  	

}

a{
		cursor: url('../images/cursor_pointer.png'), auto;

}


header{
	text-align:center;
	
	position:absolute;
	z-index:3000;
	border-bottom:1px solid #FF0C00;

}
section{
	padding:5.2vw 0% 0% 0px;
	float:left;
	min-height:100% !important;
	
    
    
	


}

#logo{
	background:#eee;
	background:transparent;
	opacity:1;
	padding:0vw 20px;
	z-index:4000;
	
	top:100px;

}
header #logo img{
	
	
	margin:0.5vw auto;
}

#barre_de_navigation{
	
/*	background:rgba(91%, 24%, 21%,0.8);*/
	float:left;
	text-transform: uppercase;
	visibility: visible;
	z-index:8000;
	

}
background-position
#barre_de_navigation ul{

}
#barre_de_navigation nav{
display:block;
}
#barre_de_navigation ul li{
display:inline-block;
color:#FF0C00 ;

}
#barre_de_navigation ul li a{
	padding:0.7em 1em;
	float:left;
	margin-bottom:0px;
	
	border-right:0px solid #eee;
	width:100%;
	color:white;
	font-family:"test_extra_bold";
	font-weight:bold;
	border-bottom:1px solid transparent;
	

}
#barre_de_navigation ul li a:hover{
	background:rgba(00%,00%,00%,0.1);
	background:#FF0C00;
	color:white !improtant;
	transform:rotateX(360deg);
	transition:background 2s ease-in,;
	
}

#barre_de_navigation ul li ul{
	display:block;
	
	position:absolute;
	
	z-index:40000;
	padding:0px !important;
	margin-top:6.5vh;
	
display:none;
	left:0;

}
#barre_de_navigation ul li ul *{
	width:100%;
}

#barre_de_navigation ul li ul a{
	width:100%;
	float:left;
	display:block;

}
#barre_de_navigation ul li:hover ul{
	
	display:block;
}
#barre_de_navigation ul li:hover  li {
	background:#ddd;
	display:block !important;
	transform:rotateX(360deg);
	position:relative;
	transition: all 0.5s  !important;
}
#barre_de_navigation ul li ul li{
	float:left;
}

#barre_de_navigation nav{

}
#logo_link:hover{
	background:none !important;
}
.navigation_fixed{
position:fixed !important;
background:#ddd !important;
padding:0px !important;
border-bottom:1px solid #FF0C00 !important;
transform:rotateX(0deg) !important;
transition: padding-top 0.1s linear !important;

top:0;
float:left;

}
.navigation_fixed #logo_link {
	height:8v !important;
	top:0;
	padding:0.2vh 1vw !important;
	background:#ccc
}

.navigation_fixed #logo_link img{
	margin:0 !important;
	top:0 !important;
}

.navigation_fixed a{
	padding:2vw !important;
	color:#555 !important;
	font-weight:normal !important;
	font-family: "test_extra_bold" !important;
	border-right:1px dotted #ccc !important;
}
.navigation_fixed a:hover{
	color:white !important;
}
.navigation_fixed li{
	float:left;
}
.navigation_fixed ul li ul{
	margin-top:11.5vh !important;
}



a.navigation_actif{
background:#FF0C00;
color:white !important;
transform:rotateX(360deg);
	transition: transform 1s ease-in;

}

#slider{
	float:left;
	padding:0 !important;
	height:100%;
	background-image:url("../images/bellevue.jpg");
	background-size:cover;
	background-color:#ddd;
	position:relative;
	background-attachment: fixed !important;
	
	background-repeat: no-repeat;
	background-position:left center;
	animation-fill-mode: forwards;
	
}

@keyframes slider_animation_a{

	0%{
		
	

}

	50%{
		/*background-position:-100vw -100vh;*/
	}
	100%{
		/*background-position:-10vw -60vh;*/
		background-position:left bottom; 
	}



}

@keyframes slider_animation_b{

	0%{
		
		
	}

	50%{
		
	}
	100%{
		background-position:right center;
	}



}













#slider .slide{
	width:100%;
	float:left;
	margin-top:0px;
	z-index:10;
}

#slider .slide img{
	width:100%;
}

#slider  h1{
	

	/*background:rgba(100%, 4%, 0%,0.8);*/
	opacity:1;
	z-index:1000;
	color:#fff;
	position:absolute;
	
	background:rgba(5%,5%,5%,0);
	text-transform:uppercase;
	float:left;
	
	
	font-family: "test_extra_bold";
	margin:auto;
	
	text-align:left;
	

}
#slider  h1:hover{
	opacity:1;
	transition : opacity 1s;

	
}
#slider  h1 span{
	float:none;
	display:block;
	margin:auto;

}

#slider #footer_slider{
	margin-top:-9vw;
	color:white;
	font-size:1.5vw;
	z-index:1000;
	position:relative;
	text-align:center;
}

#slider #footer_slider a{

	background:rgba(135, 135, 135, 0);
	

	padding:1vw;
	background:#ddd;
	background:transparent;
	color:#FFF;
	font-size:1.5vw;
}

#slider #footer_slider a:hover{
	
	
	transition: background 0.6s ease-in;
}

#slider span.animation{
	padding:0 !important;
	margin:0 !important;
	float:left;
	width:100%;
}

.animation{
	transform:scale(0.01);
	transition: all 1s

}

#a_propos{
	background:#eee;
	background:url("../images/slider3.jpg");
position:relative;
	background-attachment: fixed;
	background-size:cover;
	background-repeat:no-repeat;
	text-align:center;
	padding:0vw 0% 0% 0px;
	z-index:2;
	

}
#a_propos > div{
	float:left;
	
	/*background:rgba(255, 12, 0,0.5);*/
	float:left;
	display:block;
	height:100%;
	min-height:100% !important;

}

#a_propos p{
	padding:1% 5%;
	font-family: "test_extra_bold"
}
.title{
	color:#FF0C00;
	text-transform: uppercase;
	font-weight:normal;
	font-family: "test_extra_bold";
	text-align:center;
	padding:1em 0px 0.5em 0%;
	font-size:1.8em;
	
}
.title2{
	padding:0px 0px 1em 0%;
	text-transform: uppercase;
font-size:1.3em;
font-family: "test_extra_bold";
font-weight:normal;
text-align:center;

}
#materiaux{
	background-color:rgba(95%,95%,95%,0.95);
	height:100vh !important;
	max-width:100% !important;
	position:relative;
	;

}
#materiaux a{
	background:#FF0C00;
	background:#ccc;
	overflow:hidden !important;
	

}
#materiaux a:hover{
	background:#FF0C00;
}
#materiaux a  img{

filter: saturate(0%);
position:relative;
left:-50%;
width:100%;

opacity:0.3;
}
#materiaux .text:hover{
	background:rgba(95%,95%,95%,0.95) !important;
}
#materiaux a h1{

	position:relative;
	
	text-align:left;
	color:#555

}
#materiaux a:hover h1{
color:#ddd;
}




#materiaux h1{
		margin-top:-22%;
}



#nos_clients{
	background:#FF0C00;
	background:#ddd;
	
	padding:7.2vh 2% 2vh  2%

	
}

#nos_clients .title{
	
	
}

#nos_clients .client img{
	position:relative;
	/*height:100%;*/
	
	transform:scale(0.7);
	opacity:0.8;
	
	float:none;
	margin:1vh auto;


	
}
#nos_clients .client:hover{
	
	border-color:#FF0C00;
	/*transform:rotateY(360deg);*/
	backface-visibility:visible;

	transition: border 3s ease-out, transform 1s, background-color 5s;
}
#nos_clients .client:hover img{
	opacity:1;
	display:block;
	position:relative;
	transform:scale(0.9) rotateZ(360deg) !important;
	transition:all 1s;
	
}
#nos_clients .client{
	padding:0px;
	text-align:center;
	border:1px solid #EEE;
	height:23vh;
	overflow: hidden;
	
}


#fabrication_sur_mesure{
	background:#eee !important;

}

#fabrication_sur_mesure .title{
	
}


.produit *{
float:left;
}

.produit img{
	float:left;
	opacity:0.9;
	width:auto !important;
	height:100%;
	min-width:100%;
 	max-width:none;
	transition:all 1s;
}



.produit{
	border:1px solid #eee;
	background:#FF0C00;
	
	background-repeat:no-repeat;
	background-size:25%;
	background-position:center 20%;
	background-color:#000;
	overflow:hidden;
	
	height:44vh;



}

.produit:hover{
	background-image:url('../images/logo_z2.svg');
	background-color:#ccc;
	border-color:#ccc;
	transition: border 10s ease-out;
	
	cursor: url('../images/cursor_zoom.png'), auto;

}

.produit:hover img, .produit:active img{
	opacity:0.3;
	transform:scale(1.1);
	transition: transform 3s
	
	
}

.produit:hover h1 {
	background:transparent;
	color:#FF0C00;

	
}

.produit h1{
	position:relative;
	margin-top:-15%;
	font-family: "test_extra_bold";
	width:100%;
	float:left;
	text-align:center;
	background:rgba(100%, 4%, 0%,0);
		color:#FFF;
	padding:10px 0px;
	font-size:2em;
	font-weight: normal;
	text-transform: uppercase;
	border:0px solid #FF0C00;
}

#galerie{
	background:#eee !important;
	float:left;
	
}

#galerie .title{
	
}

#galerie img{
	border:1px solid #555;
	cursor:pointer;
	opacity:1;
}


#galerie img:hover{
	opacity:0.5;
		cursor: url('../images/cursor_zoom.png'), auto;

}


#nos_aventages{
	background:#ddd !important;
}