body{ background:none; margin:0; padding:0}
h1{ font-family:Arial, Helvetica, sans-serif; padding:0; margin:0;}
h2{ font-family:Arial, Helvetica, sans-serif; padding:0; margin:0;}
h3{ font-family:Arial, Helvetica, sans-serif; padding:0; margin:0;}
p{ font-family:Arial, Helvetica, sans-serif; padding:0; margin:0 0 10px 0; line-height:20px; text-align:justify;}
ul{ font-family:Arial, Helvetica, sans-serif; padding:0; margin:0;}

/*** main css ***/
.wrap{ float:left; width:100%; height:auto; background:url(../images/bg-wrap.jpg) bottom repeat-x #FFF; padding-bottom:20px;}
.wrap-2{ float:left; width:100%; height:auto; background:url(../images/bg-head.jpg); padding-bottom:20px; box-shadow:0 0 5px 5px rgba(0, 0, 0, 0.8);}
.content-wrap{ margin:0 auto; width:1000px; height:auto;}
.content-wrap h1{ width:990px; height:auto; padding:5px 0 5px 10px; background:url(../images/bg-h1.jpg); color:#FFF; box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.8); margin:20px  0 0 0;}

/*** slider ***/
.boxedcontainer	{max-width:1000px; margin:0 auto; padding:0px 0; background:#CCC;}
.tp-banner-container{width:100%; position:relative; padding:0; margin:0; float:left;}
.tp-banner{width:1000px; position:relative; margin:0; float:left;}
.tp-banner-fullscreen-container{width:1000px; position:relative; padding:0; margin:0; float:left;}
.tp-caption{ box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.8); position:relative; background:url(../images/bg-nav.jpg); text-shadow:1px 1px 1px #000;}

/*** section head ***/
.head-wrap{ float:left; height:200px; width:100%; background:url(../images/bg-head.jpg); position:relative;}
.head{ margin:0 auto; width:1000px; height:200px; position:relative;}
.head ul{ list-style:none; position:absolute; bottom:50px; left:0px; color:#fbfbfb; font-size:40pt; font-style:italic;}
.head p{ color:#FFF; float:left; margin:5px 5px 0 0; font-style:italic; font-size:14pt;}

.facebook{ float:right; margin:8px -15px 0 0;}
.facebook p{ float:left; color:#FFF; text-shadow:1px 1px 1px #000; margin:5px 2px  0 0;}
img.logo{ float:left; margin:20px 0 0 0; border:none;}
img.autoplace{ float:right; margin:15px 0px 0 0; border:none;}
img.signature{float:right; clear:right; margin:10px -6px 0 0;}

/*** section navigation ***/
.navigation-wrap{ float:left; width:100%; height:50px; background:url(../images/bg-nav.jpg); position:relative; z-index:11; box-shadow:0 0 5px 5px rgba(0, 0, 0, 0.8);}
.navigation{ margin:0 auto; width:1000px; height:50px;}
.navigation ul{ float:left; list-style:none;}
.navigation li{ float:left; font-size:17pt;}
.navigation a{ color:#fbfbfb; float:left; text-decoration:none; padding:13px 20px 0 20px; height:37px; text-shadow:1px 1px 1px #000; border-right:thin #000 solid;}
.navigation a:hover{ background:url(../images/bg-nav-hover.png); color:#FFF; padding-top:14px; height:36px;}
.navigation a.active{ background:url(../images/bg-nav-hover.png); color:#FFF; padding-top:14px; height:36px;}

/*** section slider ***/
.slider-wrap{ float:left; width:100%; height:400px; box-shadow:0 0 5px 5px rgba(0, 0, 0, 0.5); background:url(../images/bg-slider.jpg); position:relative; z-index:10;}
#slider{ margin:0 auto; width:1000px; height:400px; padding:0 10px 0 10px; background:url(../images/bg-slider-2.jpg);}

/*** section texte ***/
.texte{ float:left; width:680px; height:auto; background:none; margin:20px 0 10px 0; position:relative;}
.texte h1{ float:left; width:680px; border-bottom:thin #000 solid; margin:0 0 10px 0; text-shadow:1px 1px 1px #000; position:relative;}
.texte h2{ float:left; width:680px; border-bottom:thin #000 solid; margin:0 0 10px 0; text-shadow:1px 1px 1px #000; position:relative;}
.texte p{ float:left; width:425px; text-shadow:0px 0px 1px #333; position:relative; margin:0 0 10px 5px;}
.texte h3{ float:right; clear:right; margin:20px 40px 0 0; text-shadow:1px 1px 1px #000;}
.texte a{ color:#000; font-weight:bold; text-decoration:none;}

a.voyants{ float:right; background:url('../images/voyants-lumineux.png') bottom; width:150px; height:38px; float:right; clear:right; margin:10px 50px 0 0;}
a.voyants:hover{ background-position:0 0;}
img.mecanique{ float:right; margin:5px 10px 0 0; border:thin #000 solid;}
img.tirecraft{ position:absolute; top:230px; left:350px;}

/*** section box ***/
.boxes{ float:left; width:235px; height:360px; background:url(../images/bg-box.png); margin:20px 15px 0 0; box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.7);}
.boxes h2{ float:left; width:215px; color:#FFF; margin:10px 0 0 10px; border-bottom:thin #FFF solid; font-size:14pt; text-shadow:1px 1px 1px #000;}
.boxes p{ float:left; color:#FFF; width:210px; margin:15px 0 0 12px; font-size:12pt; font-weight:normal;}
.boxes a{ color:#FFF; font-size:13pt; text-decoration:none; font-weight:bold;}

img.boxmage{ float:left; margin:10px 0 0 10px; box-shadow:0 0 1px 1px rgba(0, 0, 0, 0.7); position:relative; border:none;}

/*** section sidebar ***/
.sidebar{ float:right; width:280px; height:760px; background:url(../images/bg-sidebar.png); box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.7); margin:20px 0 0 0; 
position:relative;}
.sidebar h2{ float:left; color:#FFF; margin:10px 0 0 10px; width:260px; border-bottom:thin #FFF solid;}
.sidebar ul{ float:left; width:250px; color:#FFF; margin:10px 0 0px 30px; padding:0; line-height:26px; text-shadow:1px 1px 1px #000;}
.sidebar a{ color:#FFF; text-decoration:none;}
.sidebar a:hover{ color:#CCC;}

img.paiement{ float:left; margin:10px 0 5px 14px; border:thin #000 solid;}
img.saison1{float:left; border:thin #000 solid; margin:10px 0 10px 15px;}
img.saison{float:left; border:thin #000 solid; margin:10px 0 10px 225px;}
img.assist{ float:left; border:thin #000 solid; margin:10px 0 10px 225px; clear:left;}

/*** section texte-prod ***/
.texte-prod{float:left; width:1000px; height:auto; background:url(../images/bg-texte-prod.jpg); margin:20px 0 0 0; position:relative; box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.7); padding:0 0 15px 0}
.texte-prod h2{ float:left; width:980px; border-bottom:thin #000 solid; margin:10px 0 10px 10px; text-shadow:1px 1px 1px #000; position:relative;}
.texte-prod p{ float:left; width:700px; text-shadow:0px 0px 1px #333; position:relative; margin:5px 0 10px 15px;}
.texte-prod ul{ float:left; margin:10px 0 0 60px; padding:0; width:auto; text-shadow:1px 1px 1px #000; line-height:25px;}
.texte-prod a{ color:#F00; font-weight:bold; text-decoration:none;}

a.voyants2{ float:right; background:url('../images/voyants-lumineux.png') bottom; width:150px; height:38px; float:left; margin:5px 0 10px 150px;}
a.voyants2:hover{ background-position:0 0;}

a.rabais{ float:left; background:url('../images/affiche.jpg') bottom; width:500px; height:211px; border:thin solid #000; margin:50px 0 0px 240px; clear:left;}
a.rabais:hover{ background-position:0 0;}

a.rabais2{ float:left; background:url('../images/affiche.jpg') bottom; width:500px; height:211px; border:thin solid #000; margin:10px 0 0px 230px; clear:left;}
a.rabais2:hover{ background-position:0 0;}

img.prodmage{ float:right; margin:10px 15px 0 0; border:thin #000 solid;}
img.monaco{ float:right; margin:22px 15px 0 0; border:none;}
img.aquapel{ float:left; margin:20px 0 0 20px; border:none;}
img.marques{ float:left; margin:30px 0 0 165px;}
img.saison2{float:left; border:thin #000 solid; margin:10px 0 30px 225px;}x

img.boxmage{ float:left; margin:10px 0 0 10px; box-shadow:0 0 1px 1px rgba(0, 0, 0, 0.7); position:relative; border:none;}

.poster{ float:left; margin:25px 0 12px 80px;}
.poster h3{ color:#000; width:335px; margin:25px 0 5px 0; border-bottom:thin #000 solid; font-size:14pt;}
.signature-2{position:absolute; top:200px; left:320px; border:none;}

/*** section texte-contact ***/
.texte-contact{float:left; width:1000px; height:auto; background:url(../images/bg-texte-prod.jpg); margin:20px 0 0 0; position:relative; box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.7); padding:0 0 15px 0; position:relative; behavior: url(PIE.htc);}
.texte-contact h2{ float:left; width:980px; border-bottom:thin #000 solid; margin:10px 0 10px 10px; text-shadow:1px 1px 1px #000; position:relative;}
.texte-contact p{ float:left; width:700px; text-shadow:0px 0px 1px #333; position:relative; margin:5px 0 10px 15px;}
.texte-contact ul{ float:left; margin:30px 0 0 30px; padding:0; width:300px; text-shadow:1px 1px 1px #000; line-height:33px; padding-bottom:30px; border-bottom:thin #000 solid; 
clear:left;}
.texte-contact li{ list-style:none; font-size:16pt;}
.texte-contact a{ color:#F00; text-decoration:none;}

.map{ float:right; margin:30px 30px; width:550px; height:580px; border:thin #000 solid;}

/*** section tableau ***/
#tableau{ width:900px; height:auto; float:left; position:relative; margin:10px 0 10px 30px; padding-bottom:10px;}
#tableau h2{ float:left; text-align:center; font-size:20pt; width:auto; color:#000; border:none; text-shadow:1px 1px 2px #000000; margin:20px 0 20px 205px; background:none; box-shadow:none;}
#tableau h3{ font-size:14pt; font-weight:bold; text-shadow:1px 1px 1px #000000; width:120px; border-bottom:thin #000 solid; text-align:center; color:#333; margin-left:15px;}
#tableau table{ margin-left:15px;}
img.pieces{ float:left; border:thin #000 solid; margin:5px 0 0 5px; box-shadow:0px 0px 2px 2px rgba(0, 0, 0, 0.5)}

/*** section footer ***/
.footer{ width:1000px; height:205px; margin:0 auto; position:relative;}
.wrap-contact{ 
	float: left;
    width: 100%;
    height: auto;
    background: url(../images/bg-footer.jpg);
    padding-bottom: 20px;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.8);
    background-size: contain;
}

img.talium{ position:absolute; bottom:-5px; right:0px; border:none;}

.nav-footer{ width:auto; height:50px; background:none; float:left; margin-top:30px; margin-left:20px;}
.nav-footer ul{ margin-left:89px; margin-top:30px; width:auto; height:auto; padding:0;}
.nav-footer li{ display:inline; margin-left:10px; font-size:10pt;}
.nav-footer a{ color:#000; width:auto; height:auto; text-decoration:none; border-right:thin #000 solid; padding-right:12px;}
.nav-footer a:hover{ color:#000; text-decoration:underline;}

.adresse-foot{ width:auto; height:178px; float:right; background:none;}
.adresse-foot ul{ margin:25px 15px 0 0; float:right; list-style:none; border-left:thin #000 solid; clear:right; padding-left:60px; height:174px;}
.adresse-foot li{ color:#000; text-align:right; line-height:26px; font-size:10pt;}

.left-content{ width:70%; height:30px; background:none; float:left; margin-top:10px;}
.left-content ul{ margin:35px 0 0 0; padding:0; color:#000; width:auto;}
.left-content li{ display:inline; font-size:9pt; margin:0 65px 0 0;}
.left-content a{ color:#000;}
.left-content p{ float:left; margin:35px 0 0 195px; font-size:10pt; color:#FFF;}
a.talium {
    color: black;
}

@media(max-width: 527px){
	.head{
		max-width: 100%!important;
		height: 465px;
		text-align: center;
	}
	.head img{
		display: block!important;
		margin: 15px auto!important;
		float: none!important;
	}
	.head-wrap{
		height: 330px;
	}
	.head ul{
		bottom: 176px;
		font-size: 30px;
		width: 100%;
	}
	.navigation{
		width: 75%!important;
	    position: fixed;
	    top: 0;
	    height: 100%;
	    background-color: rgba(0,0,0,.92); 
	    transform: translateX(-100%);
	    transition: 350ms;
	}
	.navigation.menu-active-mobile{
		transform: translateX(0%);
	    transition: 650ms;
	}
	.facebook{
		display: none;
	}
	.navigation li{
		width: 100%;
		margin-bottom: 29px;
	}
	.navigation a{
		border: none!important;
		display: block;
	    width: 100%;
	    box-sizing: border-box;
	}

	.menu-burger {
	    position: absolute;
	    right: 18px;
	    width: 40px;
	    height: 30px;
	    border: solid 3px #fff;
	    border-radius: 7px;
	    top: 7px;
	    z-index: 200;
	}
	.tiret {
	    display: block;
	    width: 63%;
	    height: 2px;
	    background: #fff;
	    margin-top: 5px;
	    text-align: center;
	    margin: 6px auto 0;
	    z-index: 200;
	}
	.tp-banner{
		width: 100%!important;
		padding: 0;
		margin: 0;
	}
	.tp-banner ul li img{
		width: 100%!important;
		height: auto!important;
	}
	.slider-wrap{
		height: auto!important;
	}
	.content-wrap, .texte, .texte h1{
		max-width: 100%;
	}
	.sidebar, .mecanique{
		display: none;
	}
	.texte h1{
		font-size: 23px;
		text-align: center;
		box-sizing: border-box;
		padding: 0;
	}
	.texte{
		margin-top: 0!important;
	}
	.texte p{
		width: 100%!important;
		padding: 10px;
		box-sizing: border-box;
		margin: 0!important;
	}
	.vl-r{
		width: 100%!important;
		border: none;
	}
	.texte h2{
		width: 100%;
		font-size: 20px;
		text-align: center;
	}
	.pneus-resp{
		margin-left: 0!important;
	}
	.pneus-resp img{
		width: 100%!important;
	}
	.boxes{
		width: 100%!important;
		margin: 0!important;
	}
	.boxes img{
		width: 100%!important;
		margin: 0!important;
		height: auto!important;
	}
	.boxes p{
		width: 100%!important;
		margin: 0!important;
		padding: 10px;
		box-sizing: border-box;
	}
	.nav-footer, .signature-2{
		display: none;
	}
	.footer{
		max-width: 100%;
		height: 270px!important;
	}
	.adresse-foot, .adresse-foot ul{
		float: none!important;
		border: none!important;
		text-align: center;
		padding: 0;
		margin: 0;
	}
	.adresse-foot li{
		text-align: center!important;
	}
	.footer .left-content{
		display: block;
		width: 100%;
		text-align: center;
	}
	.footer .left-content li{
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
		text-align: center;
	}
	.content-wrap h1{
		width: 100%!important;
		font-size: 23px;
	    text-align: center;
	    padding: 0;
	}
	.texte-prod{
		width: 100%;
	}
	.texte-prod h2{
		width: 100%!important;
		margin: 0;
		padding: 9px;
		box-sizing: border-box;
		font-size: 20px;
		text-align: center;
	}
	.prodmage{
		width: 100%;
		margin: 0!important;
		height: auto;
		border: none!important;
	}
	.texte-prod p{
		width: 100%;
		margin: 0!important;
		padding: 10px;
		box-sizing: border-box;
	}
	.marques{
		display: none;
	}
	#tableau{
		width: 100%;
		display: block;
		float: none;
		margin: 0!important;
	}
	#tableau h2{
		margin: 0!important;
		text-align: center!important;
		font-size: 20px!important;
	}
	#tableau h3{
		font-size: 17px;
		height: auto;
	}
	#tableau table, #tableau table tbody, #tableau tr{
		display: block!important;
	}
	#tableau table{
		width: 100%!important;
		margin: 0!important;
		padding: 0px 20px;
    	box-sizing: border-box;
	}
	 #tableau td{
	 	display: inline-block!important;
	 }
	 #tableau tr.title-tabs{
	 	display: none!important;
	 }
	 .monaco{
	 	display: block!important;
	 	margin: 0 auto!important;
	 	float: none!important;
	 }
	 .texte-prod ul{
	 	margin: 22px!important;
	 }
	 .title-adjust{
	 	width: 100%!important;
	 	float: none!important;
	 	margin: 0!important;
	 	padding: 10px;
	 	box-sizing: border-box;
	 	text-align: center;
	 }
	 img.assist{
	 	margin: 0!important;
	 	width: 100%!important;
	 	border: none!important;
	 	height: auto!important;
	 }
	 .texte-contact{
	 	width: 100%!important;
	 }
	 .map {
	    float: none;
	    margin: 0;
	    width: 100%;
	    height: 375px;
	    border: none;
	}
	.map iframe{
		width: 100%!important;
		height: 375px!important;
	}
	.content-wrap h1{
		margin-top: 0;
	}
}