body{}
html{background: url('../images/bg-garage-charny.jpg') no-repeat fixed center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover}
p, h1, h2, h3, h4{margin:0px; padding:0px; display: block; font-family:Arial, Helvetica, sans-serif;}
p{ font-family:Arial, Helvetica, sans-serif; font-size:12pt; text-align:justify;}
h1{ font-family:Arial, Helvetica, sans-serif; font-size:18pt; font-weight:500; text-shadow:2px 2px 2px #999;}
h2{ font-family:Arial, Helvetica, sans-serif; font-size:18pt; font-weight:500; text-shadow:2px 2px 2px #999;}
h3{ font-family:Arial, Helvetica, sans-serif; font-size:14pt; font-weight:500; text-shadow:2px 2px 2px #999;}
li{ font-family:Arial, Helvetica, sans-serif;}

/*** main css ***/
div#contenant{ margin:0 auto; height:auto; width:900px; background-color:none;}
div.texte{ float:left; margin:0px 0 0 10px; width:565px;}

/*** section head Normandie***/
.header{ width:950px; height:200px; float:left; position:relative; }
.header h1{ font-size:30pt; position:absolute; top:0px; left:-9999px;}
.header h2{ font-family:'calibri'; font-style:italic; color:#000; font-size:16pt; margin:55px 0 0 0px; float:right;}
.header h3{ font-family:'calibri'; font-style:italic; color:#000; font-size:19pt; margin:30px 0 0 0px; float:right; clear:right; text-shadow:1px 1px 1px #333;}
.header ul{ font-family:'calibri'; font-style:oblique; color:#fff; font-size:19pt; margin:38px 235px 0  0; float:right; clear:right; text-shadow:2px 2px 1px #000; list-style:none; width:400px; position:absolute; z-index:155; left:-9999px;}
.header li{ line-height:25pt; text-align:right; font-weight:bold; font-size:21pt; width:auto;}

img.logo2{ position:absolute; top:10px; right:40px; z-index:151;}
h2.pneu-charny{position: absolute; top: 4px ;left: 180px; z-index: 160; color: #fff; font-size: 38pt; text-shadow:3px 3px 3px #000; text-decoration: bold;}

img.titre{position:absolute; top:45px; left:10px; z-index:101;}

.barre{ width:950px; height:10px; float:left}
img.partage{ position:absolute; top:-8px; right:125px;}

.share{ position:absolute; top:15px; right:15px; z-index:100;}
.bg-slider{ background-position: 0% 0%; position:absolute; width:900px; height:200px; right:-55px; top:-200px; z-index:100; background-color:transparent; background-repeat:repeat; background-attachment:scroll}
#slideshowHolder{ width:900px; height:450px; float:left; background:#CCC; border:1px #000 solid; border-top:none; box-shadow: 0px -2px 2px 2px rgba(0, 0, 0, 0.3); margin-left:-1px; position:relative; z-index:10;}
.ft-button-slideshowHolder{ position:absolute; top:0; left:-9999px;}
#ft-prev-slideshowHolder{ position:absolute; width:50px; height:40px; border-radius: 0px 5px 5px 0px; background:#FFF; color:#000;}
#ft-next-slideshowHolder{ position:absolute;}
#ft-title-slideshowHolder{ width:918px; height:40px; padding:20px 0 0 30px; font-size:14pt;}
#slideshowHolder ul{ position:absolute; bottom:15px; right:15px; list-style:none;}
#slideshowHolder li{ color:#FFF; font-size:25pt; font-weight:bold; font-style:italic; text-shadow:2px 2px 2px #000;}
img.z{ position:absolute; z-index:100;}
img.partage{ position:absolute; top:-8px; right:125px;}

.share{ position:absolute; top:15px; right:15px; z-index:100;}
img.unipneu-pneu{margin-top: 20px; margin-bottom:20px; margin-left: 32px;}

/*** section header ***/
div.head{ background:url('../images/header.png'); width:900px; height:320px; position:relative; box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.5); border-radius:10px}
div.head li{ font-family:Arial, Helvetica, sans-serif; font-size:26pt; color:#FFF; list-style:none; text-align:center; line-height:30px;}
div.head ul{ position:absolute; bottom:20px; left:-10px;}
img.logo{ position:absolute; top:90px; right:50px; z-index:151;}
img.pneu-entete{ position:absolute; top:-5px; right:130px;}
img.napa{ position:absolute; bottom:32px; right:32px;}

ul.adresse-up{ position:absolute; left:-9999px;}

.slider{ float:right; margin:29px 30px 0 0; background:#000; width:530px; height:260px; border:thin #000 solid;}

img.pare-brise{position: absolute; right: 20px; bottom: 10px;}
img.pneus-st-joseph{position: absolute; right: 10px; bottom: 170px;}
img.garan{ float:left; margin:5px 0 0px 80px;}
ul.tel{position: relative; top: 240px;}

/** navigation **/
.nav{ width:900px; height:60px; float:left; border-radius:10px; background:url('../images/bg-nav.jpg'); box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.5); 
margin-top:5px}
.nav ul{ list-style:none; float:left; display:block; margin:0px 0 0 33px; padding:0;}
.nav li{ float:left; color:#FFF; font-family:Arial, Helvetica, sans-serif; margin-left:0px; display:block; width:auto; font-size:18pt; margin-right:25px;}
.nav li:hover{ cursor:default;}
.nav a{ float:left; color:#FFF; font-family:Arial, Helvetica, sans-serif; margin-left:5px; text-decoration:none; height:45px; width:auto; padding-top:15px;}
.nav li a:hover{ color:#FFF; background:url('../images/bg-nav-hover.png') no-repeat center 50%; text-shadow:3px 3px 3px #000}
.nav li a.active{ color:#FFF; background:url('../images/bg-nav-hover.png') no-repeat center 50%; }

/*** section share ***/
.share{ margin:10px 0 10px 17px; float:left;}

/*** section contenu ***/
div.contenu{ background:#999; width:900px; height:auto; padding:10px 0 10px 0; float:left; border-radius:10px; margin:5px 0 10px 0; box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.5); position: relative;}
div.contenu h1{ margin:10px 0 10px 10px; width:580px; border-bottom:thin #333 dotted; font-weight:bold; text-shadow:1px 1px 1px #000;}
div.share2{ float:right; margin:5px 20px 5px 0;}

/*** zone texte ***/
div.texte1{ float:left; width:600px; height:auto; background:url('../images/bg-texte.jpg'); border-radius:5px 0px 0px 0px; 
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.6); margin-left:10px; margin-right:0; margin-top:0; margin-bottom:0; padding-left:0; padding-right:0; padding-top:10px; padding-bottom:10px; position: relative;}
div.texte1 h1{ margin:0px 0 10px 10px; width:580px; border-bottom:thin #333 dotted; font-weight:bold;}
div.texte1 p{ margin:10px 0 0 15px; width:350px; float:left; line-height:20pt;}

img.mecanique{ float:right; margin:15px 15px 0 0; border:thin #000 solid;}
img.unipneu{ float:right; clear:right; margin:25px 15px 0 0;}
img.pneus1{ float:left; border:none; margin:10px 0 0 15px;}

/*** zone texte ***/
div.texte2{ float:left; width:600px; height:auto; background:url('../images/bg-texte.jpg'); box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.6); margin-left:10px; margin-right:0; margin-top:10px; margin-bottom:0; padding-left:0; padding-right:0; padding-top:10px; padding-bottom:10px}
div.texte2 h2{ margin:0px 0 10px 10px; width:580px; border-bottom:thin #333 dotted; font-weight:bold;}
div.texte2 p{ margin:10px 15px 0 0; width:350px; float:right; line-height:20pt;}

a.modes{ width:500px; height:211px; background:url('../images/affiche.jpg') bottom; float:left; border:thin solid #000;; margin-left:42px; margin-right:0; margin-top:15px; margin-bottom:0}
a.modes:hover{ background-position:0 0;}

/*** zone service ***/
div.service{ width:265px; height:auto; float:right; background:url('../images/bg-services.jpg'); border-radius:0px 5px 0 0; 
box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.6); padding-bottom:15px; margin-left:0; margin-right:10px; margin-top:0; margin-bottom:0px}
div.service h2{ width:245px; color:#FFF; border-bottom:thin #FFF dotted; text-shadow:2px 2px 2px #000; margin:10px 0 0 10px; float:left; font-weight:bold;}
div.service ul{ float:left; margin:10px 0 0 30px; padding:0;}
div.service li{ color:#FFF; font-size:12pt; padding:0; margin:0; list-style:inside; list-style-position:inherit; text-shadow:1px 2px 2px #000; line-height:17pt;}
div.service li:hover{ cursor:default; color:#000; text-shadow:none;}
div.service a{ color:#FFF; text-decoration:none; padding:0;}
div.service a:hover{ color:#000; text-decoration:none; padding:0; text-shadow:none;}

img.paiements{ float:left; margin:12px 0 0 29px; border:thin #000 solid;}
img.garantie{ float:left; margin:10px 15px 0 46px; border:none; padding-bottom:30px;}
img.assist{ float:left; margin:10px 0px 0 31px; border:thin #333 solid;}

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

/*** zone footer ***/
.footer{ width:880px; height:auto; background:#000; border-radius:0 0 5px 5px; float:left; margin:10px 0 0 10px; box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.6);}

.adresse{ height:180px; float:right; width:auto; margin-bottom:20px;}
.adresse ul{ margin:10px 20px 0 0; float:right; list-style:none; border-left:thin #CCC solid; padding-left:75px;}
.adresse li{ color:#CCC; text-align:right; line-height:26px; font-size:10pt;}

.content-left-footer {
    width: 70%;
    height: auto;
    float: left;
    margin: 13px 0 0 0px;
    line-height: 2;
    text-align: center;
}
.content-left-footer ul{ margin:60px 0 0 6px;}
.content-left-footer li{ display:inline; margin:0 20px 0 0px; color:#fff; font-size:9pt;}
.content-left-footer a{ color:#FFF; text-decoration:none; text-shadow:1px 1px 1px #000;}

.navigation{ margin:10px 0 0 106px; float:left;}
.navigation ul{ float:left; margin:10px 0 0 10px; padding:0;}
.navigation li{ margin:5px 0 0 0; font-size:8pt;}
.navigation a{ margin:0 10px 0 0; border-right:thin #999 solid; padding-right:10px; color:#fff; text-decoration:none;}
.navigation a:hover{ text-decoration:underline;}

a.talium {
    color: white;
}
/*********************************** zone texte *******************************/
div.texte-serv{ float:left; width:880px; height:auto; background:url('../images/bg-texte.jpg'); border-radius:5px ; 
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.6); margin-left:10px; margin-right:0; margin-top:10px; margin-bottom:0; padding-left:0; padding-right:0; padding-top:10px; padding-bottom:10px}
div.texte-serv h1{ margin:0px 0 10px 10px; width:860px; border-bottom:thin #333 dotted; font-weight:bold;}
div.texte-serv h2{ margin:0px 0 10px 10px; width:860px; border-bottom:thin #333 dotted; font-weight:bold;}
div.texte-serv p{ margin:10px 0 0 15px; width:570px; float:left; line-height:20pt;}
div.texte-serv a{ color:#000; text-shadow:1px 1px 1px #000;}
div.texte-serv ul{ float:left; margin:15px 200px 0 15px; color:#000; text-shadow:1px 1px 1px #333; line-height:20pt; clear:left;}

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

img.services3 {
    border: medium none;
    float: right;
    margin: 5px 20px 0 0;
}
img.services2{ float:right; margin:5px 20px 0 0;}
img.pneus{ float:right; margin:5px 20px 0 0; }
img.marque2{ float:left; margin:30px 0 0 20px;}

.promo-pneus2{width:425px; height:179px; background:url('../images/affiche.jpg') bottom; float:left; border:thin solid #000; margin-left:230px; margin-right:10px; margin-top:50px; margin-bottom:5px}
.promo-pneus2:hover{ background-position:0 0;}

.promo-pneus4{width:425px; height:179px; background:url('../images/affiche.jpg') bottom; float:left; border:thin solid #000;; margin-left:80px; margin-right:10px; margin-top:25px; margin-bottom:5px}
.promo-pneus4:hover{ background-position:0 0;}

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

/******************************** zone pare-brise ***********************************/
div.texte-parebrise{ float:left; width:880px; height:auto; background:url('../images/bg-texte.jpg'); border-radius:5px ; 
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.6); margin-left:10px; margin-right:0; margin-top:10px; margin-bottom:0; padding-left:0; padding-right:0; padding-top:10px; padding-bottom:15px}
div.texte-parebrise h1{ margin:0px 0 10px 10px; width:860px; border-bottom:thin #333 dotted; font-weight:bold; float:left;}
div.texte-parebrise h2{ margin:0px 0 10px 10px; width:860px; border-bottom:thin #333 dotted; font-weight:bold; float:left;}
div.texte-parebrise p{ margin:10px 0 15px 15px; width:845px; float:left; line-height:20pt;}
div.texte-parebrise a{ color:#000; text-shadow:1px 1px 1px #000;}
div.texte-parebrise ul{ float:left; margin:0 0 0 15px; color:#000; text-shadow:1px 1px 1px #333; line-height:20pt;}
img.parebrise{ float:right; margin:5px 95px 10px 0;}
img.promo{ float:right; margin:-30px 0 0 0px;}
img.promo2{ float:right; margin:15px 5px 0 0px;}

a.modes2{ width:500px; height:211px; background:url('../images/affiche.jpg') bottom; float:left; border:thin solid #000;; margin-left:185px; margin-right:0; margin-top:15px; margin-bottom:0}
a.modes2:hover{ background-position:0 0;}

/******************************** zone vitre ***********************************/
div.texte-vitre{ float:left; width:880px; height:auto; background:url('../images/bg-texte.jpg'); border-radius:5px ; 
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.6); position:relative; margin-left:10px; margin-right:0; margin-top:10px; margin-bottom:0; padding-left:0; padding-right:0; padding-top:10px; padding-bottom:15px}
div.texte-vitre h1{ margin:0px 0 10px 10px; width:860px; border-bottom:thin #333 dotted; font-weight:bold;}
div.texte-vitre h2{ margin:0px 0 10px 10px; width:860px; border-bottom:thin #333 dotted; font-weight:bold; float:left;}
div.texte-vitre p{ margin:10px 0 15px 15px; width:475px; float:left; line-height:20pt;}
div.texte-vitre a{ color:#000; text-shadow:1px 1px 1px #000;}
div.texte-vitre ul{ float:left; margin:0 0 0 15px; color:#000; text-shadow:1px 1px 1px #333; line-height:20pt;}

img.promo3{ float:right; margin:40px 40px 0 30px;}
img.logovitre{ position:absolute; top:230px; left:320px;}
img.produits-vitre{ float:left;}
img.promo-pare{ float:left; margin:5px 0 0 130px;}

img.promotion-image{ float:right; margin:15px 10px 0 0; border:thin #000 solid;}
img.assist2{border:thin #000 solid; float:left; margin:10px 0 0 105px; margin-right: 25px; border:thin #000 solid;}
img.tsunami{ margin:45px 0 0 240px; border:thin #000 solid; float:left;}

.promo-pneus3{width:425px; height:179px; background:url('../images/affiche.jpg') bottom; float:left; border:thin solid #000;; margin-left:30px; margin-right:10px; margin-top:15px; margin-bottom:20px}
.promo-pneus3:hover{ background-position:0 0;}

/******************************** zone contact ***********************************/
div.texte-contact{ float:left; width:880px; height:auto; background:url('../images/bg-texte.jpg'); border-radius:5px ; 
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.6); margin-left:10px; margin-right:0; margin-top:10px; margin-bottom:0; padding-left:0; padding-right:0; padding-top:10px; padding-bottom:10px}
div.texte-contact h1{ margin:0px 0 10px 10px; width:860px; border-bottom:thin #333 dotted; font-weight:bold;}
div.texte-contact h2{ margin:0px 0 10px 10px; width:860px; border-bottom:thin #333 dotted; font-weight:bold;}
div.texte-contact p{ margin:10px 0 0 15px; width:570px; float:left; line-height:20pt;}
div.texte-contact a{ color:#000; text-shadow:1px 1px 1px #000;}
div.texte-contact ul{ float:left; margin:15px 0 0 15px; color:#000; text-shadow:1px 1px 1px #333; line-height:22pt; padding:0; border-bottom:thin #000 solid; padding-bottom:20px; width:275px; clear:left;}
div.texte-contact li{ list-style:none; font-size:14pt; font-weight:bold;}

div.map{ float:right; width:530px; height:440px; border:thin #000 solid; margin:10px 15px 0 0;}

img.paiements2{ float:left; margin:10px 0 0 10px; border:thin #000 solid;}
img.vitre{ float:right; clear:right; margin:-70px 60px 0 0;}

.nav-for-mobile{
	display: none;
}

@media(max-width: 772px){
	div.texte-contact ul{
		float:none;
	}
	div.texte-contact h2 {		
		width: auto;
		clear: both;
	}
	img.logo{
		display: none;
	}
	#slideshowHolder{
		display: none;
	}
	div#contenant, .header{
		width: 100%!important;
	}
	.header img{
		float: none;
	    margin: 0!important;
	    border: none!important;
	    width: 100%!important;
	}
	img.logo2{
		top: 172px!important;
		transform: translateX(-50%);
    	left: 50%;
	}
	.header{
		height: 300px;
	}
	.nav-for-mobile{
		display: block;
		width: 100%;
    	padding: 10px;
    	border-radius: 11px;
    	outline: none;
    	margin-bottom: 10px;
    	font-weight: 600;
    	font-size: 19px;

	}
	.nav{
		display: none;
	}
	div.contenu{
		width: 100%;
	}
	div.contenu h1{
		width: 95%;
	}
	div.texte-serv, div.texte-serv h2, .footer{
		width: 94%;
	}
	div.texte-serv p{
		width: 90%!important;
	}
	div.texte-serv{
		float: none;
	}
	div.texte-serv::after{
		content: '';
		display: block;
		clear: both;
	}
	.services3, .navigation{
		display: none;
	}
	.content-left-footer, .adresse{
		float: none;
	}
	.adresse ul{
		border: none;
		padding-left: 0!important;
		float: none;
	}
	.content-left-footer ul{
		margin: 0 10px;
		padding: 0;
		text-align: left;
	}
	.adresse li{
		text-align: left!important;
		margin-left: 10px;
	}
	div.texte1, div.texte2, div.texte2 h2, div.texte-parebrise h2{
		width: 94%;
	}
	img.mecanique {
	    float: none;
	    margin: 0;
	    border: none; 
	    width: 100%;
	}
	div.texte1 p {
	    margin: 10px 0 0 15px;
	    width: 90%;
	    float: none;
	    line-height: 20pt;
	}
	div.service, .pneus1, .marque, .marque2{
		display: none;
	}
	div.texte2 p {
	    margin: 0 10px;
	    width: 94%;
	    float: none;
	}
	img.ponl{
		width: 93%!important;
	}
	img.vl{
		width: 100%!important;
	}
	div.texte-parebrise{
		width: 95%!important;
	}
	div.texte-parebrise p{
		width: 92%;
	}
	iframe.iframe-pb{
		width: 79%!important;
    	height: auto!important;
	}
	.promo2{
		position: relative!important;
		top: 0!important;
		right: 0!important;
		width: 100%!important;
	}
	.no-dm{
		display: none;
	}
	div.texte-vitre, div.texte-contact{
		width: 94%;
	}
	div.texte-vitre h2{
		width: 97%!important;
	}
	table.table-v{
		display: block!important;
		width: 100%!important;
	}
	table.table-v tr, table.table-v td{
		display: block!important;
		width: 100%!important;
	}
	img.services2{
		float: none;
	    margin: 0;
	    width: 100%;

	}
	div.texte-vitre p{
		width: 92%!important;
	}
	.logovitre{
		display: none!important;
	}
	div.map {
	    float: none;
	    width: 100%;
	    height: auto;
	    border: none;
	    margin: 10px 15px 0 0;
	}
	.map iframe{
		width: 100%!important;
	}
	body, html{
		overflow-x: hidden;
	}
	html{
		background: 100% 100%!important;
	}
}