/**
 * Project style sheet.
 *
 * @package    vanilla
 * @subpackage css
 * @author     Loops <evrard at h2a dot lu>
 * @version    SVN: $Id: styles.css 38 2014-08-22 15:38:29Z loops $
 */

/*** BASICS -------------------- ***/

/** these styles should be available in CKEditor too **/

.font0 { font-family: hind, sans-serif; } /* default font family */
.font1 { font-family: cormorant, serif;  } /* secondary font family */

.cl0 { color: #5a5a5a; } /* default color */
.cl1 { color: #c2a77a; } /* secondary color */

/** images **/
img.left { margin: 0 0 20px 20px; }
img.right { margin: 0 20px 20px 0; }

/* undo lowercase for german * / html[lang="de"] .lc { text-transform: none !important; } /**/



/*** ELEMENTS ------------------ ***/

/** buttons **/
button, .btn { display: block; text-decoration: none !important; font-weight: bold; font-size: 17px; color: #c2a77a; border-top: 1px solid; border-bottom: 1px solid; padding: 10px 0; }
button:hover, .btn:hover, button:focus, .btn:focus { color: #5a5a5a; }
button:active, .btn:active { color: #5a5a5a; }

.btn[data-icon] { position: relative; padding-right: 40px; }
.btn[data-icon]:after { position: absolute; right: 0; top: 50%; z-index: 1; }
.btn[data-icon="rarr"]:after { margin-top: -7px; }
.btn[data-icon="fb"]:after { margin-top: -13px; }


/** energy box **/
.energy { display: inline-block; font-size: 11px; box-sizing: border-box; width: 85px; height: 85px; padding: 10px 13px; overflow: hidden; }
.energy.\:ab { color: #fff; background-color: #56b700; }
  .energy_label { font-weight: 800; font-size: 40px; display: block; }
      
       

/*** LISTS --------------------- ***/

/*
  below a sample of list rules that may be used

  the associated structure is:
  <h2 class="list1_title"></h2>
  <ul class="vanilla list1">
    <li class="list1_item box">
      <a class="list1_itembox block" href="#" rel="bookmark">
        <img class="list1_itemimg" src="#" />
        <h3 class="list1_itemtitle"></h3>
        <p class="list1_itemtext"></p>
        <span class="list1_itemmore"></span>
      </a>
    </li>
  </ul>
*/
/** list1, used for ? **/
/* title above the list */
.list1_title {}
.list1 {}
  /* item */
  .list1_item {}
    /* box around item data */
    .list1_itembox {}
      /* item content */
      .list1_itemimg {}
      .list1_itemtitle {}
      .list1_itemtext {}
      .list1_itemmore {}
      
      

/*** LAYOUT -------------------- ***/

/** container **/
/* set default background-color */
body { background-color: #f8f5ee; } 
#mainwrap { position: relative; overflow: hidden; }
  .wrap { max-width: 1120px; margin: 0 auto; }
  

/** header **/
#mainheader { }
  #mainheader_wrap { text-align: center; border-bottom: 1px #c2a77a solid; padding: 50px 0 25px; }

  /* logo */
  #mainheaderlogo { }
    #mainheaderlogo_img { max-width: none; } /* make sure IE8 will display it */
    
    
/** content **/
#maincontent { display: inline-block; width: 100%; vertical-align: top; } /* avoid margin merge on content */
        

/** footer **/
#mainfooter {}
  #mainfooter_wrap { border-top: 1px #c2a77a solid; padding: 40px 0; }

  /* nav */
  #mainfooternav {}
    #mainfooternav_list { color: #a2a2a2; font-size: 13px; }
      .mainfooternav_item { display: inline-block; vertical-align: top; }
      .mainfooternav_item + .mainfooternav_item:before { content: "\2022"; display: inline-block; vertical-align: top; margin: 0 8px; }
        .mainfooternav_link { color: inherit; text-decoration: none; }
        /* hover */
        .mainfooternav_link:hover { text-decoration: underline; }
        /* active/focus */
        .mainfooternav_link:focus, .mainfooternav_link:active { text-decoration: underline; }
        /* current */
        .mainfooternav_link.\:current {}
        
  /* signature */
  #mainfootersignature {}
  
  
/** cookie shit **/
/* default display */
#maincookie { position: fixed; z-index: 20; bottom: 0; left: 0; width: 100%; background-color: #fff; background-color: rgba(255,255,255,.7); }
  #maincookie_text { position: relative; margin: 10px 50px; padding-right: 30px; }
/* with JS */
html.js #maincookie { display: none; } /* by default hide */
/* added in JS */
#maincookie_trigger { position: absolute; top: 50%; right: 0; font-size: 28px; margin-top: -19px; cursor: pointer; }
#maincookie_trigger:before { font-family: arial, sans-serif; content: "\00D7"; }
  

/** standard layout **/
#standardlayout {}
  #standardheader {}
  .standardsection {}
    .standardsection_title {}
  #standardfooter {}

  
/** home layout **/
#homelayout {}
  #homelayout_wrap {
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;
    -ms-justify-content: space-between; -webkit-justify-content: space-between; justify-content: space-between;
    -ms-align-items: stretch; -webkit-align-items: stretch; align-items: stretch;
  }
    /* header */
    #homeheader { padding: 10px 0; width: 100%; }
      #homeheader_img { max-width: none; width: 100%; position: relative; z-index: 1; display: block; }
      #homeheader_energy { display: block; position: relative; z-index: 2; margin: -145px 0 90px; }
      #homeheader_title { margin: 30px 0; }
    /* section */
    .homesection { width: 33.3333%; box-sizing: border-box; border-top: 1px #c2a77a solid; padding: 25px 30px 40px 0; }
    html.ie_lt10 .homesection { display: inline-block; vertical-align: top; min-height: 331px; }
    .homesection + .homesection { border-left: 1px #c2a77a solid; padding-left: 30px; }
    .homesection + .homesection + .homesection { padding-right: 0; }
      .homesection_title { margin: 0 0 30px; }
      .homesection_text { margin: 0; }
      .homesection_text + .homesection_text:before { content: ""; display: block; width: 47px; background-color: #c2a77a; height: 1px; margin: 10px 0; }
    /* footer */
    #homefooter { width: 100%; position: relative; background-color: #fff; border-top: 1px #c2a77a solid; padding: 25px 0 30px; }
    #homefooter:before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 10000px; background-color: inherit; }
    #homefooter:after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 10000px; background-color: inherit; }
      #homefooter_title { margin: 0; }
      #homefooter_list { margin: 0 -30px; }
        .homefooter_item { display: inline-block; width: 33.3333%; vertical-align: bottom; padding: 0 30px; margin-top: 30px; box-sizing: border-box; }
          .homefooter_itembtn { margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    

/*** MEDIA QUERIES ------------- ***/

/* for screen smaller than 1200px */
@media screen and (max-width: 1200px)
{
  .wrap { margin: 0 40px; }
  #homeheader_img { margin: 0 -40px; width: calc( 100% + 80px ); }
}

/* for screen smaller than 800px */
@media screen and (max-width: 800px)
{
  .wrap { margin: 0 20px; }
  #homeheader_img { margin: 0 -20px; width: calc( 100% + 40px ); }
  /* make it strong */
  #homelayout_wrap > .homesection { border-left: 0; padding-left: 0; padding-right: 0; width: 100%; min-height: 0; }
}

/* for screen smaller than 700px */
@media screen and (max-width: 700px)
{
  h1, .h1 { font-size: 26px; }
}

/* for screen smaller than 620px */
@media screen and (max-width: 620px)
{
  .wrap { margin: 0 10px; }
  #homeheader_img { margin: 0 -10px; width: calc( 100% + 20px ); }
  #homeheader_energy { display: none; }
  .homefooter_item { width: 100%; margin-top: 20px; }
}

    

/*** High resolution device ---- ***/

/** resolution x2 **/
/* remove the space to test x2 icons on normal resolution */
@media /** / screen, /**/ (-webkit-min-device-pixel-ratio: 2), ( min-resolution: 192dpi), ( min-resolution: 2dppx)
{
  
}

    

/*** CSS HACKS ----------------- ***/
/* last update 2015-05-01 */

/**

/* Firefox 2+ * /
x:-moz-any-link, .selector { property: value; }

/* Opera 14+, Safari, Chrome, Android * /
.selector:not(*:root) { property: value; }

/* Safari 7+ * /
@media \\0 screen { .selector { property: value; } }

/* Chrome 29+, Opera 16+ * /
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector { property: value; } }

/* Chrome, Safari 3+ * /
@media screen and (-webkit-min-device-pixel-ratio:0) { .selector { property: value; } }

/* Safari 5+/6-, Chrome 24- * /
::x, .selector { property: value; }

/* Opera 9.5+/14- * /
x:-o-prefocus, .selector { property: value; }

/* IE 11/10 * /
@media all and (-ms-high-contrast:none) { .selector { property: value; } }

/* IE 11 * /
*::-ms-backdrop, .selector { property: value; }

/* IE 9 (html specific) * /
html.ie9 .selector { property: value; }

/* IE 6-10 * /
.selector { property: value\9; } 

/* more hacks at http://browserhacks.com **/