/* CSS Document by Black meridian */


/* boostrap 3 full width */

.container-full {
  margin: 0 auto;
  max-width: none;
  width: 100%;
}


/* ------------------------------------------------------------------------ */
/* >>>>>>>>>>>>>   generalites                                         <<<< */
/* ------------------------------------------------------------------------ */
html {height: 100%; min-height: 100%; overflow: visible !important; background-color:#000}
body {  font-family: 'Source Sans Pro', 'Open Sans', sans-serif;height: 100%; color:#FFF; overflow: visible !important; background-color:#000}
/* Wrapper for page content to push down footer */
#pageWrapper {
  min-height: 100%;
  height: auto !important;
  /* Negative indent footer by its height */
  margin: 0 auto;
  padding: 51px 0; 
  /* Pad bottom by footer height */
}
.oldie #pageWrapper {
  overflow: hidden;
}

a { color:#FFF}
a:focus {outline: 0;}

dl:before, 
dl:after {display: table; clear: both; content: "";}
dt {float: left; clear: both; margin-bottom: 5px; width: 23%;}
dd {float: right; clear: right; margin-bottom: 5px; width: 75%;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   classe                                       <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6,p,li {font-family: 'Source Sans Pro'}
#qLpercentage {font-family: 'Source Sans Pro'; font-weight:300}

.center { text-align:center}
.right { text-align:right}

#video-controls {position: absolute; z-index: 20; left: 50%; bottom: 101px; margin-left: -92px; width: 183px;}
#video-controls ul {float: left; margin: 0; padding: 0; list-style: none; padding-left: 1px; background: url('images/player-border.gif') repeat-y 0 0;}
#video-controls li {float: left; margin: 0; padding: 0 1px 0 0; list-style: none; background: url('images/player-border.gif') repeat-y 100% 0;}
#video-controls li a {display: block; width: 90px; height: 41px; text-align: center;}
#video-controls li a .icon {display: inline-block; width: 0; height: 0; vertical-align: bottom; overflow: hidden; text-indent: -999em; background: url('images/player-controls.png') no-repeat 0 0;}
#video-controls li a.tubular-pause .icon {margin-top: 8px; width: 16px; height: 25px; background-position: 0 0;}
#video-controls li a.tubular-pause:hover .icon,
#video-controls li a.tubular-pause:focus .icon {background-position: 0 -25px;}
#video-controls li a.tubular-play .icon {margin-top: 6px; width: 17px; height: 29px; background-position: -16px 0;}
#video-controls li a.tubular-play:hover .icon,
#video-controls li a.tubular-play:focus .icon {background-position: -16px -29px;}
.iPad #video-controls li a.tubular-mute {display: none;}
#video-controls li a.tubular-mute .icon {margin-top: 4px; width: 39px; height: 37px; background-position: -72px 0;}
#video-controls li a.tubular-mute:hover .icon,
#video-controls li a.tubular-mute:focus .icon {background-position: -33px -37px;}
#video-controls li a.tubular-mute.unmute .icon {background-position: -33px 0;}
#video-controls li a.tubular-mute.unmute:hover .icon,
#video-controls li a.tubular-mute.unmute:focus .icon {background-position: -72px -37px;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   classe                                       <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

.videoBG {position: relative; background: #000;}
.iPad .videoBG video {display: none; height: 100% !important;}
.videoBG:after {position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ""; background: url('images/trame.png');}

.navbar-fixed-top, .navbar-fixed-bottom {z-index: 1000; border-bottom-color:#666}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {color: #fff; background: none;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   header                                       <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

#logo { display:block; height:32px; width:261px; position:fixed; top:15px; left:19px; background:url('images/logo2.png') no-repeat 0 0; z-index:9999; margin:0; padding:0;}
#logo a { display:block; height:32px; width:261px; }
#logo span{ display:none}

#header_bootstrap {
	overflow:hidden;
  border-bottom: 1px solid #333;
  height: 51px;
  background: rgba(0,0,0,0.9);
}
.oldie #header_bootstrap {background-color: #000;}

#header_bootstrap h3 {font-family: 'Source Sans Pro', sans-serif; font-weight: 300;}

#header_bootstrap li {font-family: 'Source Sans Pro', sans-serif; font-size:14px; line-height: 50px; color: #7b7776;}
#header_bootstrap li a {color: #7b7776;}
#header_bootstrap li a:hover,
#header_bootstrap li a:focus {color: #C7C2C0;}
#header_bootstrap li#item85 a:before {display: inline-block; margin-right: 10px; width: 10px; height: 8px; content: ""; background: url('images/icon-home.png') no-repeat 0 0;}
#header_bootstrap li#item81 a:before {display: inline-block; margin-right: 10px; width: 13px; height: 9px; content: ""; background: url('images/icon-contact.png') no-repeat 0 0;}
#header_bootstrap li#item83 a:before {display: inline-block; margin-right: 10px; width: 5px; height: 10px; content: ""; background: url('images/icon-fb.png') no-repeat 0 0;}
#header_bootstrap li#item84 a:before {display: inline-block; margin-right: 10px; width: 6px; height: 9px; content: ""; background: url('images/icon-twitter.png') no-repeat 0 0;}
#header_bootstrap li#item23 a:before {display: inline-block; margin-right: 10px; width: 9px; height: 9px; content: ""; background: url('images/icon-gallery.png') no-repeat 0 0;}
#header_bootstrap li#item25 a:before {display: inline-block; margin-right: 10px; width: 10px; height: 9px; content: ""; background: url('images/icon-videos.png') no-repeat 0 0;}
#header_bootstrap li#item144 a:before {display: inline-block; margin-right: 10px; width: 8px; height: 9px; content: ""; background: url('images/icon-brochure.png') no-repeat 0 0;}




#background {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background: no-repeat 50% 50%;
  -webkit-background-size: cover;
  -moz-background-size:    cover;
  background-size:         cover;
}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   nav                                          <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

#navNiveau2 {position: relative; z-index: 10; margin: 60px 40px;}
#navNiveau2:before,
#navNiveau2:after {display: table; clear: both; content: "";}
#navNiveau2 ul {
  float: left;
  padding: 10px 20px 10px 0;
  border: 1px solid #312f2f;
  list-style: none;
  background: rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 0 1px #000;
  -moz-box-shadow:    0 0 0 1px #000;
  box-shadow:         0 0 0 1px #000;
  -webkit-border-radius: 4px;
  -moz-border-radius:    4px;
  border-radius:         4px;
}

#navNiveau2 li {/*float: left;*/ margin: 0 20px 0 0px; }
#navNiveau2 li a {display: block; padding: 1px 0 2px; height: 45px; font-size: 20px; line-height: 40px; font-weight: 300; text-transform: uppercase; color: #505050; text-indent:20px}
#navNiveau2 li a:hover,
#navNiveau2 li a:focus {outline: 0; text-decoration: none; color: #f0f0f0;}
#navNiveau2 li.active a {border-left: 2px solid #f0f0f0; color: #f0f0f0;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   mainContent                                  <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

#slides {margin: -51px 0;}
#slides .slides-navigation a.prev {left: 30px; top: 50%; margin-top: -32px; width: 37px; height: 64px; overflow: hidden; text-indent: -999em; background: url('images/slider-btn.png') no-repeat 0 -64px;}
#slides .slides-navigation a.prev:hover,
#slides .slides-navigation a.prev:focus {background-position: -37px -64px;}
#slides .slides-navigation a.next {right: 30px; top: 50%; margin-top: -32px; width: 37px; height: 64px; overflow: hidden; text-indent: -999em; background: url('images/slider-btn.png') no-repeat 0 0;}
#slides .slides-navigation a.next:hover,
#slides .slides-navigation a.next:focus {background-position: -37px 0;}
#slides .slides-pagination {bottom: 59px;}
#slides .slides-pagination a {
  margin: 2px 5px;
  border: 0;
  width: 14px;
  height: 14px;
  text-indent: -999em;
  background-color: #fff;
  -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow:    0 0 0 2px rgba(0, 0, 0, 0.3);
  box-shadow:         0 0 0 2px rgba(0, 0, 0, 0.3);
}
#slides .slides-pagination a:hover,
#slides .slides-pagination a:focus {margin: 1px 4px; width: 16px; height: 16px;}
#slides .slides-pagination a.current {border: 2px solid #fff; background-color: rgba(0, 0, 0, 0.8);}
#slides .slides-pagination a.current:hover,
#slides .slides-pagination a.current:focus {margin: 2px 5px; width: 14px; height: 14px;}

#texte {position: relative; z-index: 10;}
.container + #texte {margin-top: -50px;}
#texte p {margin-bottom: 2px; font-size: 18px; line-height: 24px; font-weight: 300; text-align: center; color: #e2e2e2;}
#texte p a {padding-bottom: 1px; border-bottom: 1px dotted #6c6b6c; font-size: 12px; line-height: 16px; font-weight: bold; text-transform: uppercase; color: #6c6b6c;}
#texte p a:hover,
#texte p a:focus {border-color: #f0f0f0; text-decoration: none; color: #f0f0f0;}

.container a { text-decoration:underline}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   configurator                                  <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */
.template11 #pageWrapper {
  background: url('images/configurator-bg.jpg') no-repeat 50% 50%;
  -webkit-background-size: cover;
  -moz-background-size:    cover;
  background-size:         cover;
}

.template11 #content {margin-right: 174px;}
.template11 #aside {float: right; width: 134px;}

#configurator {padding: 40px;}

#car {text-align:center; position:relative; margin:70px auto 65px; max-width:1280px;}
#car img { position:absolute; top:0; left:0; text-align:center;}

#car img#poigne { z-index:100}
#car img#volant { z-index:99}
#car img#contour { z-index:98}
#car img#ext {z-index:97}
#car img#int { z-index:96}

#btnSerie {
  padding: 0 20px;
  border: 1px solid #312f2f;
  overflow: hidden;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 0 1px #000;
  -moz-box-shadow:    0 0 0 1px #000;
  box-shadow:         0 0 0 1px #000;
  -webkit-border-radius: 4px;
  -moz-border-radius:    4px;
  border-radius:         4px;
}

#btnSerie .btn {
  margin: 0 20px;
  padding: 1px 0 2px;
  border: 0;
  height: 60px;
  font-size: 30px;
  font-weight: 300;
  text-transform: uppercase;
  color: #505050;
  background: none;
  -webkit-box-shadow: none;
  -moz-box-shadow:    none;
  box-shadow:         none;
  -webkit-border-radius: 0;
  -moz-border-radius:    0;
  border-radius:         0;
}

#btnSerie .btn:hover,
#btnSerie .btn:focus {color: #f0f0f0; outline: 0;}

#btnSerie .btn.active {padding-bottom: 0; border-bottom: 2px solid #f0f0f0; color: #f0f0f0;}

#btnSerie p {float: left; margin: 0 20px 0 -20px; padding: 0 10px; border-right: 1px solid #312f2f; height: 60px; font-size: 13px; line-height: 54px; font-weight: 300; text-align: center; color: #fff; background-color: #000;}

#btnExt,
#btnInt {
  float: left;
  border: 1px solid #312f2f;
  width: 62px;
  background: rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 0 1px #000;
  -moz-box-shadow:    0 0 0 1px #000;
  box-shadow:         0 0 0 1px #000;
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius:    0 0 4px 4px;
  border-radius:         0 0 4px 4px;
}

#btnInt {margin-left: 10px;}

#btnExt p,
#btnInt p {
  margin: 0;
  padding: 13px 0;
  border: 1px solid #000;
  font-size: 13px;
  line-height: 17px;
  font-weight: 300;
  text-align: center;
  color: #fff;
  background-color: #000;
  -webkit-box-shadow: 0 1px 0 #312f2f;
  -moz-box-shadow:    0 1px 0 #312f2f;
  box-shadow:         0 1px 0 #312f2f;
}

#btnExt .btn,
#btnInt .btn {
  display: block;
  position: relative;
  margin: 20px;
  padding: 0;
  border: 0;
  width: 20px;
  height: 20px;
  text-align: left;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  outline: 0;
}

#btnExt .btn.active:before,
#btnInt .btn.active:before {
  position: absolute;
  left: -5px;
  top: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px solid;
  content: "";
  -webkit-border-radius: 15px;
  -moz-border-radius:    15px;
  border-radius:         15px;
}

#btnExt .btn .text,
#btnInt .btn .text {display: none;}

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   footer                                       <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   footer                                       <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */
/* Set the fixed height of the footer here */
#footer {
  border-top: 1px solid #333;
  height: 51px;
  background: rgba(0,0,0,0.9);
}
.oldie #footer {background-color: #000;}

#footer .navbar-collapse {float: left; padding: 0;}
#footer .nav {padding: 0 20px;}
#footer .nav li a {margin: 0 20px; padding: 0; height: 50px; font-size: 15px; line-height: 50px; font-weight: 400; text-transform: uppercase; color: #c7c2c0;}
#footer .nav li a:hover,
#footer .nav li a:focus {color: #fff; background: none;}
#footer .nav li.active a {border-bottom: 2px solid #fff;}
#footer .contact {float: right; margin-bottom: 0; padding: 0 20px; font-size: 12px; line-height: 50px; font-style: italic; text-align: right; color: #343130;}


.template3 .container {position: relative; z-index: 10; margin: 60px auto; padding: 35px; max-width: 500px; background: rgba(0, 0, 0, 0.7);}
.oldie .template3 .container {background-color: #000;}
.template3 .container h3 { font-size:40px; font-weight:600; margin-top:0; color:#FFF; margin-bottom:15px}
.template3 .container p { font-family: 'Open Sans'; font-size:14px; line-height:28px; font-weight:300; color:#dedede}

.template9 #pageWrapper {padding: 0;}
.template9 .ditto1parallax {
  position: relative;
  overflow: hidden;
  background: no-repeat 49.9% 50%;
  -webkit-background-size: cover;
  -moz-background-size:    cover;
  background-size:         cover;
  border-bottom:#666 1px solid; 

}  

.logoCarre { position:fixed; width:150px; height:150px; bottom:75px; right:40px; background: url('images/logo-carre-150.png') no-repeat 0 0; opacity:0.9; z-index:9999; /*border: 1px solid #333;*/}

.template9 .ditto1parallax.video {}

.template9 .ditto1parallax .startscroll {position: absolute; z-index: 20; left: 50%; bottom: 79px; width: 64px; height: 37px; overflow: hidden; background: url('images/slider-arrow.png') no-repeat 0 0; cursor: pointer;}
.template9 .ditto1parallax .startscroll:hover {background-position: 0 -37px;}
.template9 .ditto1parallax:last-child .startscroll {display: none;}

.template9 .ditto1parallax .startscrollup {position: absolute; z-index: 20; left: 50%; top: 79px; width: 64px; height: 37px; overflow: hidden; background: url('images/slider-arrow.png') no-repeat 0 -111px; cursor: pointer;}
.template9 .ditto1parallax .startscrollup:hover {background-position: 0 -74px;}
.template9 .ditto1parallax:first-child .startscrollup {display: none;}



.template9 .ditto1parallax .content {position: absolute; z-index: 10;  padding: 35px; width: 500px; background: rgba(0, 0, 0, 0.7);}
.oldie .template9 .ditto1parallax .content {background-color: #000;}
.template9 .ditto1parallax .positionRight { margin-left: -250px;}


.template9 .ditto1parallax .content h3 { font-size:35px; font-weight:600; margin-top:0; color:#FFF; margin-bottom:15px; text-transform:uppercase}
.template9 .ditto1parallax .content p { font-family: 'Open Sans'; font-size:14px; line-height:28px; font-weight:300; color:#dedede}

.template9 .ditto1parallax .chapo {position: absolute; z-index: 9; left: 50%; top: 50%; margin-left: -50%; margin-top: -120px; padding: 20px; width: 100%; height:240px; text-align:center }
.template9 .ditto1parallax .chapo h2 {  font-size:80px; font-weight:300; text-transform:uppercase; line-height:120px; text-shadow: 0px 0px 9px #000}


.skrollr-mobile .ditto1parallax {background-position: 50% 50% !important;}

.template11 { background-color:#000}

#id1 .container {position: absolute; left: 105px; bottom: 10%; /*margin-top: -103px;*/ padding: 30px; width: 392px;  text-align: center; background: rgba(0, 0, 0, 0.8);}
.oldie #id1 .container {background: #000;}
#id1 .container h3 {position: relative; top: -6px; margin: 0 -30px 9px; padding-bottom: 24px; border-bottom: 1px solid #635f5e; font-size: 74px; line-height: 64px; font-weight: 800; text-transform: uppercase; color: #fff;}
#id1 .container h3 em {display: block; margin: 2px 0 5px; font-size: 11px; line-height: 14px; font-weight: bold; font-style: normal; color: #bab3b1;}
/*
#id1 .container h3:before {position: absolute; left: 0; top: 50%; margin-top: -11px; width: 10px; height: 21px; content: ""; background: url('images/bar.png') no-repeat 0 0;}
#id1 .container h3:after {position: absolute; right: 0; top: 50%; margin-top: -11px; width: 10px; height: 21px; content: ""; background: url('images/bar.png') no-repeat 0 0;}
*/
#id1 .container h4 {margin: 0; font-size: 1.6em; line-height: 22px; font-weight: 600; text-transform: uppercase; color: #bab3b1;}
#id1 .container p { font-family: 'Open Sans'; font-size: 14px; line-height: 24px; font-weight: 300; margin-top:15px}
.oldie #id1 #video-controls {display: none !important;}


#ditto1parallax37 .content { width:650px}

#id81 .container {margin: 10px 0 60px 30px; background:none}

#id121 .container { position:absolute; margin:0; bottom:15%; right:7%}
#id31 .container { position:absolute; margin:0; bottom:15%; right:7%}


#ditto1parallax145 .content { padding:0; width:260px; color:#333; background:none } 
#ditto1parallax145 .content h3 {color:#333 } 
#ditto1parallax145 .content dt { width:10%} 
#ditto1parallax145 .content dd { width:88%} 


/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   offcanvas                                    <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* >>>>>>>>>>>>>   media queries                                <<<<<<<<<<<< */
/* ------------------------------------------------------------------------- */

/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */

@media (max-width: 767px) {
  #btnSerie {overflow: visible; white-space: normal;}
  #btnSerie p {display: none;}
  #ditto1parallax37 .content { width:650px}

}

@media (min-width: 768px) and (max-width: 991px) {
  #btnSerie .btn {font-size: 13px;}
  #ditto1parallax37 .content { width:800px}
  #id1 .container {left: 25px; bottom: 20px; }

}

@media (min-width: 992px) and (max-width: 1199px) {
  #btnSerie .btn {font-size: 21px;}
  #ditto1parallax37 .content { width:750px; left:10%}
}

@media (min-width: 1200px) and(max-width: 1319px) {
  #btnSerie .btn {font-size: 27px;}
  #ditto1parallax37 .content { width:650px}

}

@media (max-width: 1319px) {
  #btnSerie .btn {margin: 0 10px;}
}

@media (max-height: 800px) {
  #id86 .logoCarre { display:none}
}

@media (min-width: 1319px) {
	#ditto1parallax145 .content {padding:0px; width:320px } 
}