/**
 * Project style sheet.
 *
 * @package    vanilla
 * @subpackage css
 * @author     Loops <evrard at h2a dot lu>
 * @version    SVN: $Id: styles.css 33 2013-04-15 06:46:35Z greg $
 */

html{ font-size: 62.5%; background: #ebebeb; }
/* declare the default font and color here */
body, button, input, select, textarea{ color: #757575; font-size: 13px; font-size: 1.3rem; line-height: 21px; line-height: 2.1rem; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; }

.font-0 { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; } /* default font family */
.font-1 { font-family: 'text_me_oneregular', sans-serif; } /* secondary font family */

.cl-0 { color: #757575; } /* default color */
.cl-1 { color: #61ad49; } /* secondary color */
.cl-2 { color: #666666; } /* third color */

/*
 * Default style rendering
 */
a{ text-decoration: underline; color: #61ad49; }
a:hover,
a:focus{ text-decoration: none; }

p{ margin-top: 0; }

h1, h2, h3, h4, h5, h6{ font-family: 'text_me_oneregular', sans-serif; text-transform: uppercase; font-weight: normal; }

h1{ font-size: 34px; font-size: 3.4rem; line-height: 1.2; color: #61ad49; margin: 25px 0; margin: 0 0 2.5rem 0; }
h2{ font-size: 20px; font-size: 2rem; line-height: 1.2; color: #61ad49; display: block; border-top: 1px solid #61ad49; border-bottom: 1px solid #61ad49; padding: 5px 0; margin: 20px 0 10px; margin: 2rem 0 1rem; }
h3{ font-size: 18px; font-size: 1.8rem; line-height: 1.2; color: #666666; border-bottom: 1px solid #666666; display: block; padding-bottom: 5px; margin: 18px 0 9px; margin: 1.8rem 0 0.9rem; }
h4{ font-size: 16px; font-size: 1.6rem; line-height: 1.2; color: #666666; margin: 16px 0 8px; margin: 1.6rem 0 0.8rem; }
h5{ font-size: 15px; font-size: 1.5rem; line-height: 1.2; color: #666666; margin: 15px 0 8px; margin: 1.5rem 0 0.8rem; }
h6{ font-size: 14px; font-size: 1.4rem; line-height: 1.2; color: #666666; margin: 14px 0 7px; margin: 1.4rem 0 0.7rem; }

li{ margin: 10px 0; margin: 1rem 0; }

address{ font-style: normal; }


/*
  Grid
***************/
.third,
.quarts,
.two-col,
.three-col{ *zoom: 1; margin-left: -20px; }
  
.third:before,
.third:after,
.quarts:before,
.quarts:after,
.two-col:before,
.two-col:after,
.three-col:before,
.three-col:after{ content: " "; display: table; }

.third:after,
.quarts:after,
.two-col:after,
.three-col:after{ clear: both; }

.col{ float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding-left: 20px; }

.third .col + .col{ padding-left: 30px; }

.quarts.alt .col{ float: right; }
.quarts.alt .third .col{ float: left; }

.quarts .col{ width: 75%; }
.quarts .col + .col{ width: 25%; }
.third .col{ width: 61.4613%; }
.third .col + .col{ width: 37.1060%; }
.two-col .col{ width: 50%; }
.three-col .col{ width: 33.3333%; }

.one-col{ width: 100%; }


/* 
 *  Structure 
 */
#main-content{ margin-top: 50px; background: #fff; -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); }
.wrapper{ width: 100%; max-width: 1600px; min-width: 960px; margin: 0 auto; }
  .content-wrapper{ width: 960px; margin: 0 auto; padding: 80px 0; }
  .header-wrapper{ width: 960px; margin: 0 auto; }
#main-footer{ text-align: right; height: 40px; height: 4rem; line-height: 40px; line-height: 4rem; }
  #main-footer .wrapper{ width: 960px; margin: 0 auto;  }
  #main-footer a{ color: #9d9d9d; font-size: 11px; font-size: 1.1rem; text-decoration: none; }
    #main-footer a:hover,
    #main-footer a:focus{ text-decoration: underline; }

/* Fix img display */
.img-wrapper{ display: block; min-height: 450px; padding: 0; width: 100%; margin: 0; -webkit-box-shadow: inset 0 0 25px 0 rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 25px 0 rgba(0, 0, 0, 0.25); }
  #image-1{ background: url('./images/section/image-1.jpg') no-repeat center center fixed transparent; }
  #image-2{ background: url('./images/section/image-2.jpg') no-repeat center center fixed transparent; }
  #image-3{ background: url('./images/section/image-3.jpg') no-repeat center center fixed transparent; }
  
/* Slider */
.slider-wrapper{ width: 100%; padding: 0; margin: 0; position: relative; min-height: 600px; }
  .slides{ position: absolute; max-width: 1600px; width: 100%; top: 0; left: 0; }
    .slides-item{ position: absolute; top: 0; left: 0; margin: 0; width: 100%; overflow: hidden; }
      .slides-item + .slides-item{ display: none; }
      
      .slider-img{ display: block; -moz-transform: translateX(0px); -webkit-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); -webkit-transition: all 5000ms linear; -moz-transition: all 5000ms linear; -ms-transition: all 5000ms linear; -o-transition: all 5000ms linear; transition: all 5000ms linear; }
        .slider-double-effect{ -moz-transform: translateX(-150px); -webkit-transform: translateX(-150px); -o-transform: translateX(-150px); -ms-transform: translateX(-150px); transform: translateX(-150px); }
 .js-timer{ background: #c1dbb9; position: absolute; bottom: 0; top: auto; left: 0; right: 0; height: 3px; height: 0.3rem; }
 .js-time{ position: absolute; top: 0; left: 0; width: 0; height: 3px; height: 0.3rem; background: #61ad49; }
  .js-time-start{ width: 100%; -webkit-transition: all 8000ms linear; -moz-transition: all 8000ms linear; -ms-transition: all 8000ms linear; -o-transition: all 8000ms linear; transition: all 8000ms linear;  }
        
/* Gmap */
.has-js .gmap-container{ position: relative; }
.has-js img.js-gmap{ visibility: hidden; }
.has-js div.js-gmap{ height: 100%; width: 100%; left: 0; top: 0; position: absolute; z-index: 1; }

/*
 *  Accessibility
 */
.assistive-text { clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); position: absolute !important; }
a.assistive-text:active,
a.assistive-text:focus { background: none repeat scroll 0 0 #FAFAFA; border: 1px solid #DDDDDD; clip: auto !important; color: #384EB3; position: absolute; right: 0; text-decoration: underline; top: 55px; }


/*
 * Branding
 */
#branding-wrapper{ position: fixed; top: 0; right: 0; left: 0; height: 50px; height: 5rem; z-index: 10; background: #ffffff; -webkit-box-shadow: 0 0 10px 0 rgba(1, 1, 1, 0.075); box-shadow: 0 0 10px 0 rgba(1, 1, 1, 0.075); }
  #branding{ background: #61ad49; margin: 0; height: 55px; height: 5.5rem; float: left; position: relative; }
    #branding:before{ content: " "; display: block; width: 10000px; height: 55px; width: 10000rem; height: 5.5rem; background: #61ad49; position: absolute; top: 0; right: 285px; }
    #branding img{ display: block; padding: 16px 25px 16px 0; padding: 1.6rem 2.5rem 1.6rem 0; }
    

/*
 * Navigation
 */
#main-nav{ float: left; }
  .nav-list{ margin-left: 25px; margin-left: 2.5rem; }
    .nav-item{ float: left; margin: 0; }
      .nav-item + .nav-item{ padding-left: 15px; padding-left: 1.5rem; position: relative; }
        .nav-item + .nav-item:before{ content: " "; display: block; width: 15px; height: 1px; width: 1.5rem; height: 0.1rem; position: absolute; top: 50%; margin-top: -0.5px; left: 0; background: #949494; }
      
      .nav-link{ display: block; padding: 15px 8px; padding: 1.5rem 0.8rem; text-decoration: none; text-transform: uppercase; color: #949494; }
        .nav-link:hover,
        .nav-link:focus{ color: #61ad49; text-decoration: underline; }
        
      .nav-link.active{ color: #61ad49; }

        
/*
 * Gallery listing
 */
.gallery-item{ margin: 0 1px 1px 0; float: left; display: block; }
  .gallery-link{ display: block; position: relative; }
    .gallery-link:hover:before{ content: " "; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: 4px solid #89b372; }
    .gallery-link[rel="external"]:hover:after{ content: "\2197"; position: absolute; right: 8px; top: 5px; right: 0.8rem; top: 0.5rem; font-size: 16px; font-size: 1.6rem; }
    .gallery-img{ display: block; }
    
    /* JS more partner */
    .js-more-partner{ display: none; }
    .more-partner-p{ text-align: right; padding-right: 3px; padding-right: 0.3rem; margin: 5px 0; margin: 0.5rem 0; }

        
/*
 * Two column
 */
.two-columns{ -moz-column-count: 2; -moz-column-gap: 20px; -moz-column-gap: 2rem; -webkit-column-count: 2; -webkit-column-gap: 20px; -webkit-column-gap: 2rem; column-count: 2; column-gap: 20px; column-gap: 2rem; }