/**
 * This stylesheet is shared for all vehicle page (and probably challenge)
 */

/*** head ***/
.head { padding-bottom: 50px; position: relative; }
  .head .head-logo { display: block; margin: 0 auto; }
  .js-fixed-nav .js-fixed { position: fixed; bottom: auto; top: 54px; z-index: 50; }
  
/* navigation display */
.head-nav { position: absolute; bottom: 0; right: 0; left: 0; z-index: 10; width: 100%; height: 47px; overflow: hidden; background: #fff; border-bottom: 1px #e5e5e5 solid; -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .25); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .25); white-space: nowrap; }
  .head-nav .subnav-list { text-align: center; }
    .head-nav .nav-item { display: inline-block; }
      .head-nav .nav-link { display: inline-block; white-space: nowrap; height: 47px; padding: 0 15px; line-height: 47px; color: #666666; text-decoration: none; }
      /* active */
      .head-nav .nav-link.active { color: #006293; }
      /* hover, focus, active */
      .head-nav .nav-link:hover, .head-nav .nav-link:focus, .head-nav .nav-link:active { color: #009fbb; }
    /* special right item */
    .head-nav .nav-item-right { position: absolute; top: 11px; right: 0; z-index: 1 }
      .head-nav .nav-item-right .button:after { display: none }

  /* banner */
  .head-banner { max-width: none; width: 100%; }
  
  .vehicle-toner{ position: absolute; bottom: 28px; left: 0; z-index: 20; color: #666666; font: 12px 'oswaldregular'; text-transform: uppercase; letter-spacing: 1px; padding: 8px 15px; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 23%, #e3e3e3 71%, #dfdfdf 84%, #dddddd 87%, #d4d4d4 94%, #cdcece 97%, #c4c4c4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(23%,#f9f9f9), color-stop(71%,#e3e3e3), color-stop(84%,#dfdfdf), color-stop(87%,#dddddd), color-stop(94%,#d4d4d4), color-stop(97%,#cdcece), color-stop(100%,#c4c4c4)); background: -webkit-linear-gradient(top, #ffffff 0%,#f9f9f9 23%,#e3e3e3 71%,#dfdfdf 84%,#dddddd 87%,#d4d4d4 94%,#cdcece 97%,#c4c4c4 100%); background: -o-linear-gradient(top, #ffffff 0%,#f9f9f9 23%,#e3e3e3 71%,#dfdfdf 84%,#dddddd 87%,#d4d4d4 94%,#cdcece 97%,#c4c4c4 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f9f9f9 23%,#e3e3e3 71%,#dfdfdf 84%,#dddddd 87%,#d4d4d4 94%,#cdcece 97%,#c4c4c4 100%); background: linear-gradient(to bottom, #ffffff 0%,#f9f9f9 23%,#e3e3e3 71%,#dfdfdf 84%,#dddddd 87%,#d4d4d4 94%,#cdcece 97%,#c4c4c4 100%); -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c4c4c4',GradientType=0 ); *filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c4c4c4',GradientType=0 ); }
    .vehicle-toner:after{ content: " "; display: block; height: 100%; width: 20px; right: -10px; position: absolute; top: 0; z-index: -1; -moz-transform: skewX(5deg); -webkit-transform: skewX(5deg); -o-transform: skewX(5deg); -ms-transform: skewX(5deg); transform: skewX(5deg); background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 23%, #e3e3e3 71%, #dfdfdf 84%, #dddddd 87%, #d4d4d4 94%, #cdcece 97%, #c4c4c4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(23%,#f9f9f9), color-stop(71%,#e3e3e3), color-stop(84%,#dfdfdf), color-stop(87%,#dddddd), color-stop(94%,#d4d4d4), color-stop(97%,#cdcece), color-stop(100%,#c4c4c4)); background: -webkit-linear-gradient(top, #ffffff 0%,#f9f9f9 23%,#e3e3e3 71%,#dfdfdf 84%,#dddddd 87%,#d4d4d4 94%,#cdcece 97%,#c4c4c4 100%); background: -o-linear-gradient(top, #ffffff 0%,#f9f9f9 23%,#e3e3e3 71%,#dfdfdf 84%,#dddddd 87%,#d4d4d4 94%,#cdcece 97%,#c4c4c4 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f9f9f9 23%,#e3e3e3 71%,#dfdfdf 84%,#dddddd 87%,#d4d4d4 94%,#cdcece 97%,#c4c4c4 100%); background: linear-gradient(to bottom, #ffffff 0%,#f9f9f9 23%,#e3e3e3 71%,#dfdfdf 84%,#dddddd 87%,#d4d4d4 94%,#cdcece 97%,#c4c4c4 100%); -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c4c4c4',GradientType=0 ); *filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c4c4c4',GradientType=0 ); }
    
/*** Contents **/

/* standard */
  /* make it higher for box shadow display */
  .section.bg-odd { background: #ffffff; position: relative; z-index: 1; -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25); box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25); }
  .section.bg-even { background: #f6f6f6; }

/* specific gallery stuff */
.section .col-content { padding: 0; }
  .section .gallery-list {}
    .section .gallery-list .item { padding: 15px 20px; }

/* specific overview stuff */

#content-overviewsection { padding-top: 120px; }

/* overview head */
.overviewhead { position: relative; }
  /* logo, margins be specified on vehicle page */
  .overviewhead > .head-logo { position: absolute; z-index: 9; left: 50%; top: 54px; }
  .overviewhead .col-bigtitle { display: none; }
  /* minimize jumping effect with JS */
  .has-js .overviewhead { height: 100px; }
    .has-js .overviewhead .head-banner-out { height: 100%; overflow: hidden; background: url(../images/loader-ffffff-414141.gif) center center no-repeat; }
      .has-js .overviewhead .head-banner { visibility: hidden; max-width: none; width: auto; height: 100%; }
  
  .overviewhead .js-generated-sidebar-menu-wrapper { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3 }
    
/* overview sections */
.overviewsection { position: relative; }
    /* anchor has to be moved because of the sub nav */
    /* the first section allready has a top padding of 50px */
    .overviewsection + .overviewsection .anchor { top: -154px; }
    
  .overviewsection-data { position: absolute; z-index: 2; top: 0; width: 410px; padding: 20px; }
    .overviewsection-title { font-size: 30px; border-bottom: 0; margin: 0 0 20px 0; }
      .overviewsection-title .small { font-size: 12px }
    .overviewsection-video { border-radius: 2px; }
  .overviewsection-data .button { margin-bottom: 20px; }
    
/* note that the background can be different than odd and even */
.overviewsection.bg-odd, .foot.bg-odd { background: #ffffff; }
.overviewsection.bg-even, .foot.bg-even { background: #f6f6f6; }
.overviewsection.bg-even1, .foot.bg-even1 { background: #5b738c; }
.overviewsection.bg-even2, .foot.bg-even1 { background: #fff; }
.overviewsection.bg-even3, .foot.bg-even1 { background: #694e35; }
.overviewsection.bg-even4, .foot.bg-even1 { background: #629c77; }



/* different display */
.overviewsection.odd { padding-left: 410px; }
.overviewsection.odd .overviewsection-data { left: 0; }
    
.overviewsection.even { padding-right: 410px; }
.overviewsection.even .overviewsection-data { right: 0; }

.overviewsection.first { padding-top: 0px; }
  .overviewsection.first .overviewsection-data { top: 50px; }
    
  
  /* do not hesitate to force the height (table display) */ 
  .overviewsection-imgboxout { position: relative; display: table; }
    .overviewsection-imgboxout > .in { display: table-cell; height: 100%; width: 100%; vertical-align: bottom; }
      /* the background image cannot be set dynamically to pseudo element, so emulate them */
      .overviewsection-imgout { display: inline-block; position: relative; }
        .overviewsection-imgout > .\:after, .overviewsection-imgout > .\:before { display: block; content: ""; position: absolute; z-index: 1; bottom: 0; width: 10000px; height: 100%; background-repeat: repeat-x; background-position: 0 bottom; background-size: auto 100%; }
        .overviewsection-imgout > .\:after { left: 100%; }
        .overviewsection-imgout > .\:before { right: 100%; }
    
      .overviewsection-img { max-width: none; width: 100%; vertical-align: middle; }
    
/*** Foot ***/      
  .foot { padding-top: 65px; padding-bottom: 65px; }
  /* make it higher for box display */
  .foot.bg-odd { position: relative; z-index: 1; -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25); box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25); }
    /* specific overview stuff, undo box-shadow */
    #content-overviewsection .foot { padding-top: 0; z-index: 0; -webkit-box-shadow: none; box-shadow: none; }
  
  /* to keep continuity with section */
  .foot.bg-odd { background: #ffffff; }
  .foot.bg-even { background: #f6f6f6; }
    /* default display on two columns */
    .foot-col { float: left; width: 50%; overflow: hidden; padding: 0 20px 20px; }
    .foot-col + .foot-col + .foot-col { clear: both; }
    .foot-col + .foot-col + .foot-col + .foot-col { clear: none; }
    
  /* make a border, do not position to left or right */
  .foot .wrap { position: relative; padding: 0 50px; }
    .foot-col + .foot-col:before { content: ""; display: block; position: absolute; z-index: 1; top: 0; width: 1px; height: 100%; background-color: #d4d4d4; margin-left: -20px; }
    .foot-col + .foot-col + .foot-col { padding: 20px 20px 0; border-top: 1px #d4d4d4 solid; }
    .foot-col + .foot-col + .foot-col:before { display: none; }
      .foot-title { font-size: 25px; border-bottom: 0; }
      
      .foot-list { padding-bottom: 20px }
        .foot-list .item { }
          .foot-list .item + .item:before { position: static; display: block; content: ""; margin: 6px auto 4px; width: 52px; height: 1px; background: #ccc; }
            .foot-list .item-link { position: relative; text-decoration: none; display: block; }
              .foot-list .item-link img{ display: block; position: relative; z-index: 1; margin: 0 auto; }
              .foot-list .item-link img + img{ display: none; }
            .foot-list .item-link:hover img:first-child,
            .foot-list .item-link:focus img:first-child{ display: none; }
            
            .foot-list .item-link:hover img + img,
            .foot-list .item-link:focus img + img{ display: block; }
            
      .foot-col form { max-width: 250px; margin: 0 auto; }
      
      #footnav .foot-list .item + .item:before { margin: 15px auto; }
        #footnav .foot-list .item-img { vertical-align: top; }
        
      #footshare .foot-list .item + .item:before { display: none; }
        #footshare .foot-list .item + .item { margin-top: 10px; }
        
        /* facebook button */
        .has-js #footshare .shareout { max-width: 300px; overflow: visible; margin: 0 auto; }
        .has-js #footshare .shareout:after { display: block; content: ""; margin: 10px auto 12px; width: 52px; height: 1px; background: #ccc;}
          .has-js #footshare .shareout .fb-like { min-height: 22px; }
        
           /* for minificaton */
           .facebook-button, .pinterest-button, .twitter-button, 
           .facebook-button:after, .pinterest-button:after, .twitter-button:after, 
           .facebook-button:before, .pinterest-button:before, .twitter-button:before, 
           .facebook-button > .in:before , .pinterest-button > .in:before , .twitter-button > .in:before { background-image: url(../images/bg-button-share.png); }
             .facebook-button { background-position: 0 0 !important; }
               .facebook-button:before { background-position: 0 -81px !important; }
               .facebook-button:after { background-position: -5px -81px !important; }
             .pinterest-button { background-position: 0 -27px !important; }
               .pinterest-button:before { background-position: -10px -81px !important; }
               .pinterest-button:after { background-position: -15px -81px !important; }
             .twitter-button { background-position: 0 -54px !important; }
               .twitter-button:before { background-position: -20px -81px !important; }
               .twitter-button:after { background-position: -25px -81px !important; }
            
               .facebook-button > .in:before , .pinterest-button > .in:before , .twitter-button > .in:before { display: inline-block; vertical-align: middle; content: ""; margin-right: 10px; background-repeat: no-repeat; }
               .facebook-button > .in:before { width: 8px; height: 14px; background-position: 0 -108px; vertical-align: -2px; }
               .pinterest-button > .in:before { width: 14px; height: 19px; background-position: -8px -108px; vertical-align: -4px; }
               .twitter-button > .in:before { width: 16px; height: 12px; background-position: -22px -108px; vertical-align: -1px; }

/*** Specifications ***/
#content-specificationsection .section { padding-top: 0; padding-bottom: 0; -webkit-box-shadow: none; box-shadow: none; }
#content-specificationsection .section + .section { padding-top: 0; padding-bottom: 35px; }

  /* content */
  .specification-item { border-top: 1px solid #ff0914; clear: both; padding: 30px 0 0; margin: 0 30px 30px; overflow: hidden; }
    .specification-title { border: none; display: block; width: 25%; padding-right: 5%; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;  }
    .specification-content { display: block; width: 75%; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;  }
      
      .specification-content table{ width: 100%; margin: 0;}
      .specification-content table tr + tr{ border-top: 1px solid #cccccc; }
      .specification-content table th{ width: 50%; letter-spacing: 2px; text-align: left; color: #333333; font: 12px 'oswaldregular'; text-transform: uppercase; vertical-align: top; padding: 10px 10px 10px 0; }
      .specification-content table td{ width: 50%; text-align: left; color: #7b6d6d; font-size: 13px; padding: 10px 0; }
      
      .specification-content ul + table{ margin-top: 15px; }
      .specification-content ul li{ color: #7b6d6d; }
      .specification-content ul li:before{ color: #ff0914; }
      
    /* slide */
    .slide-item:after, .slide-item:before { display: block; content: ""; position: absolute; z-index: 1; bottom: 0; width: 10000px; height: 100%; background-repeat: repeat-x; background-position: 0 bottom; background-size: auto 100%; }
      .slide-item:after { left: 100%; }
      /* make it stronger than li.vanilla:before */
      li.slide-item:before { left: auto; right: 100%; display: block; }
      /* set image */
      .slide-item.w-1400:after, .slide-item.w-1400:before { background-color:#fff; }
      .slide-item.w-960:after, .slide-item.w-960:before { background-color:#fff; }
      .slide-item.w-680:after, .slide-item.w-680:before { background-color:#fff; }
      
    /* disabled stupid jump effect */
    .has-js .flexslider .slides .slide-item { display: list-item; }
    .has-js .flexslider .slides .slide-item + noscript + script + .slide-item { display: none; }
    /* restore default behavior for overlay flexslider */
    .has-js .overlay .flexslider .slides .slide-item { display: none }
    
    /* without js, adjust display */
    .no-js .flexslider .slides .slide-item { display: block; }
    .no-js .flexslider .slides script + noscript .slide-item { display: none; }
    
    /* point (out of box) */
    .has-js .js-point-list { display: none; }
    .point-item { margin: 0 30px 15px; }
    .point-item + .point-item { border-top: 1px solid #e9e9e9; padding-top: 15px; }
      .point-title { border: 0; }

    .point-button { cursor: pointer; position: absolute; margin-left: -24px; margin-top: -24px; z-index: 10; border: 5px rgba( 255 , 255 , 255 , .2 ) solid; }
      /* the cross must be done with a background image for a nice effect on transition */
      .point-button .in { background: #006293 url(point-icons.png) 50% 50% no-repeat; position: relative; width: 29px; height: 29px; overflow: hidden; -webkit-transition: transform 1400ms ease; -moz-transition: transform 1400ms ease; -ms-transition: transform 1400ms ease; -o-transition: transform 1400ms ease; transition: transform 1400ms ease; }

        .point-popup { display: none; position: absolute; z-index: 1; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; bottom: 58px; left: 50%; margin-left: -134px; width: 230px; padding: 20px; background: #fff; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35); border-radius: 2px; }
          .point-popup:before { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #fff; content: " "; left: 50%; margin-left: -10px; position: absolute; bottom: -10px; }

          .point-popup .point-title { padding: 0; margin-bottom: 5px; }
          .point-popup .point-desc { margin-bottom: 0; }

      /* rotate over 315 deg */
      .point-button.\:opened .in { background-color: #009fbb; -moz-transform: rotate(315deg); -webkit-transform: rotate(315deg); -o-transform: rotate(315deg); -ms-transform: rotate(315deg); transform: rotate(315deg); }

      .point-button.\:opened .point-popup { display: block }
      
/*** Design ***/
#content-designsection .section .wrap { padding: 0 20px; }

/*** Technology ***/
#content-technologysection .section .wrap { padding: 0 20px; }

/*** Booking ***/
#content-bookingsection .section .wrap { padding: 0 20px; }
               
@media screen and (min-width: 1240px)
{
    /* display four columns */
    .foot-col { width: 25%; }
    .foot-col + .foot-col + .foot-col { clear: none; }
  /* change border */
  .foot .wrap { padding: 0; }
    .foot-col + .foot-col + .foot-col:before { display: block; }
    .foot-col { padding: 0 20px; }
    .foot-col + .foot-col + .foot-col { padding: 0 20px; border-top: none; }
}
               
@media screen and (max-width: 1024px)
{
  /* special right item */
    .head-nav .nav-item-right { position: static; padding: 0 15px; }
      .head-nav .nav-item-right .button:after { display: inline-block }
}
               
@media screen and (max-width: 800px)
{
  /* no float anymore */
  .foot-col { float: none; width: auto; display: block; padding-bottom: 30px; margin-bottom: 0px; }
  .foot-col + .foot-col { border-top: 1px solid #d4d4d4; padding-top: 20px; }
  /* change border */
  .foot .wrap { padding: 0 10px; }
    .foot-col + .foot-col:before { display: none; }
    .foot-col + .foot-col + .foot-col { padding-bottom: 20px; }
    
  /* Specifications */
  .specification-content,
  .specification-title{ width: 100%; padding-right: 0%; float: none; }
     
    /* display point list */
    .has-js .js-point-list { display: block; }
    /* hide button */
    .point-button { display: none }
    
  /*** head ***/
  .head { padding-bottom: 0; }
    .head-nav { display: none; }
  
  /* adjust overview display */
  /* play with shadow instaed of image background */
  /* make it higher for shadow display */
  .overviewsection.bg-odd, #overviewfoot.bg-odd { position: relative; z-index: 1; -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25); box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25); }
    .overviewsection-imgout > .\:after, .overviewsection-imgout > .\:before { display: none }
  /* restore stuff */
  .overviewsection { padding: 35px 0 0 !important; }
    /* change vehicle display */
    .overviewsection .overviewsection-data { position: static; width: auto; }
      /* the height may be set in the HTML code */
      .overviewsection-imgboxout { display: block; height: auto !important; }
      .overviewsection-imgboxout > .in { display: block; height: auto; }
      
  /* change the logo display */
  /* logo, margins be specified on vehicle page */
  .overviewhead > .head-logo { display: none; }
  .overviewhead .col-bigtitle { display: block; margin-top: 54px; }
  
  /* adjust banner positionning */
  .vehicle-toner { bottom: 30px }
  
  /* restore stuff */
  #content-overviewsection .foot { padding-top: 65px }
  #content-overviewsection .foot.bg-odd { z-index: 1; -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25); box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25); }
}

  
/* HDPI adjustement */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {

  /* seems to fails */
  .facebook-button, .pinterest-button, .twitter-button, 
  .facebook-button:after, .pinterest-button:after, .twitter-button:after, 
  .facebook-button:before, .pinterest-button:before, .twitter-button:before, 
  .facebook-button > .in:before,
  .pinterest-button > .in:before,
  .twitter-button > .in:before{ background-image: url(../images/bg-button-share_x2.png); background-size: 38px 127px; }
  
  
  .point-button .in { background-image: url(point-icons_x2.png); background-size: 15px 15px; }
  
}