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

body {
	background-color: rgba(30,30,30,1.00);
}




/* différents containers*/
.wrapper {
	background-color: white;
	padding-left: 0px!important;
	padding-right: 0px !important;
	background-color: white;
	
}



.jumbotron {
	border-radius: 0px;
	width: 33,33%;
	max-height: 240px;
	background-color: white;
	margin-bottom: 0.5rem !important;
}

#header-img{
	border:none;
	background-image: url(../images/eclaire-led-nova-offroad.jpg);
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center;
	width: 100%;
	height:  240px !important;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 2px;
	padding-bottom: 2px;
	padding-right: 0px;
	padding-left: 0px;
	
}

#logo{
	width:100%;
}

/* les 3 différentes catégories*/

#barres {
	background-image: url(../images/barres-led-rampes-de-toit-4x4.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	
}

#categ1{
	
	padding-right: 2,5%;
}

#phares {
	
	background-image: url(../images/feux-remplacement-optiques-origines-phares-4x4.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#categ2{
	
	padding-left: 0.75%;
	padding-right: 0.75%;
}

#spot {
	background-image: url(../images/spot-auxiliaire-eclairage-franchissement-bivouac-4x4.jpg);
	background-repeat: no-repeat;
	background-size: cover;
		background-position: center;
}


#categ3{
	
	padding-left: 2,5%;
}


/* les textes */
p, h1, h4 {
	text-align: center;
}

#titre {
	font-weight: bolder;
	text-transform: uppercase;
	letter-spacing: .5rem;
}

em {
	font-weight: 400;
	
	font-style: normal;
}


h4 {
	
	margin-bottom : 2px;
}

.legende{
	line-height: 1.2rem;
}

h1 {
	padding-top: 55px;
}

/* les boutons cliquables */
.voir {
	border-radius: 0px;
	border-width: 3px;
	border-color: black;
	background-color: rgba(128,128,128,0.85);
/*	margin-bottom : 5%; */
	font-size: 1rem !important;
	max-height: 46px;
	line-height: 1 !important;

	
}

.voir:hover {
	background-color: rgba(207,0,3,1.00);
	border-color: rgba(255,255,255,1.00);
}

#feux{
	padding-bottom: 6px;
	padding-top: 2px;
	vertical-align:middle;
	
}

.bouton-voir {
/*	margin-top:70%; */
	margin-top: 100px;
	margin-bottom: 5px;
	
}


/* media queries */
/* affichage mobile  */ 

@media (max-width: 573px){
	
	body{
		margin:0px!important;
		background-color: transparent;
	}
	
	#logo{
		padding-top: 0px;
		margin-top: 0px;
	}
	
	#header-img{
	background-image: url(../images/eclaire-led-nova-offroad-mobile.jpg);
	width: 100%;
	max-height: 256px;
	background-repeat: no-repeat;
	background-size:contain;
	background-position: center;
	margin-top: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		margin-bottom: 0px;
	}
	
	.jumbotron #header-img{
		margin-top: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		margin-bottom: 0px;
		max-height:  256px;
		
	}
	
	.debut{
		padding-right: 0;
		
	}
	
	h1 {
	padding-top: 0px;
}
	
	#categ1{
	
	padding-right: 0;
		padding-left: 0;
		}
	
	#categ2 {
	padding-left: 0;
	padding-right: 0;
}

	#categ3{
	
	padding-left: 0;
		padding-right: 0;
		
}
	.jumbotron{
		width: 100%;
		margin-right:0px!important;
		padding-right: 0px!important;
		padding-left: 0px!important;
		margin-left: 0px!important;
		margin-bottom: 0px!important;
	}
	
	/*couleur bouton sur mobile */
	.voir{
		
	background-color: rgba(207,0,3,1.00)!important;
	border-color: rgba(255,255,255,1.00)!important;
		font-weight: bolder!important;
		box-shadow: 2px 2px 6px black;
	}
	
}

/* affichage tablette  */

@media (min-width:574px) and (max-width:767px){
	.jumbotron {
		max-width: 540px;
	}
	
	
#header-img {
	background-image: url( ../images/eclaire-led-nova-offroad-gd-mobile.jpg);
	width: 100%;
	height: 238px !important;
	background-repeat: no-repeat;
	background-size:contain;
	background-position: center;
		margin-top: 0px;
		padding-top: 0px;
		margin-bottom: 0px;
		padding-bottom: 0px;
	}
	
	#phares{
		margin-right:0px!important;
		padding-right: 0px!important;
		padding-left: 0px!important;
		margin-left: 11px!important;
		margin-bottom: 0px!important;
	}
	
	
	
	h1 {
	padding-top: 0px;
}
	
}



/* moment où header plus petit*/
@media (min-width:768px) and (max-width:990px){
	
	#header-img{
		
		height: 140px!important;
		width: 100%;
		margin-top: 0px;
		padding-top: 0px;
		margin-bottom: 0px;
		padding-bottom: 0px;
	}
	
	#logo{
		padding-top: 10px;
	}
	
	
	.voir{
		white-space:normal;
		font-size: 14px !important;
		max-height: 60px !important;
	}
		
		h1 {
	padding-top: 00px;
}
}




 

/* affichage grande tablette / petit ordi */
@media (min-width:991px) and (max-width:1199px){
	
	#header-img{
		
		height: 190px!important;
		width: 100%;
		margin-top: 0px;
		padding-top: 0px;
		margin-bottom: 0px;
		padding-bottom: 0px;
	}
	
	h1{
		padding-top: 10px;
	}
	
	}

/*fin affichage grande tablette */