/**
 * 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 $
 */

/* POPUP */

.overlay.popup{background-color: rgba(0, 0, 0, 0.6);display: inline-table;height: 100%;left: -9999em;position: absolute;top: -9999em;width: 100%;z-index: 200;}
.overlay_popbox {cursor: pointer;display: table-cell;height: 100%;vertical-align: middle;width: 100%;}
.overlay_popboxwrap {background-color: #fff;cursor: auto;margin: 0 auto;max-width: 710px;overflow: hidden;position: relative;text-align: center;}
.overlay_popboximg {display: block;margin: 0 auto;max-width: none;width: 100%;}
.overlay_close {background-color: #e30613;background-image: url('/images/cross.svg');background-position: center center;background-repeat: no-repeat;background-size: 230% auto;content: '';cursor: pointer;display: block;height: 35px;overflow: hidden;position: absolute;right: 15px;text-indent: -9999px;top: 15px;width: 35px;z-index: 10;}



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

.font0 { font-family: 'titillium', sans-serif; } /* default font family */
.font1 {} /* secondary font family */
.font2 {} /* ... */

.cl0 { color: #757575; } /* default color */
.cl1 { color: #cd2e29; } /* secondary color */
.cl2 { color: #67696c; } /* ... */

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



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

/** buttons **/
button, .btn { border: 0; text-decoration: none; display: inline-block; padding: 10px 25px 11px; color: #fff; background-color: #cd2e29; }
button:hover, .btn:hover, button:focus, .btn:focus { color: #fff; background-color: #31466f; }
button:active, .btn:active { color: #fff; background-color: #28395b; }

button.bg2, .btn.bg2 { color: #fff; background-color: #cd2e29; }
button.bg2:hover, .btn.bg2:hover, button.bg2:focus, .btn.bg2:focus { background-color: #cd2e29; }
button.bg2:active, .btn.bg2:active { background-color: #568c1c; }

.btn2 { border: 0; text-decoration: none; display: inline-block; padding: 4px 13px 6px; color: #cd2e29; background-color: #fac4c2; }
.btn2:hover, .btn2:focus, .btn2:active { color: #fff; background-color: #cd2e29; }

.btn2.bg2 { color: #cd2e29; background-color: #eee; }
.btn2.bg2:hover, .btn2.bg2:focus, .btn2.bg2:active { color: #fff; background-color: #cd2e29; }


/** pagination **/
.pagenav {}
  /* list */
  .pagenav_list {}
    /* item */
    .pagenav_item {}
      /* link */
      .pagenav_link {}
      /* hover */
      .pagenav_link:hover {}
      /* active/focus */
      .pagenav_link:active, .pagenav_link:focus {}
      /* current, not <a> */
      .pagenav_link.\:current {}
      /* special links */
      .pagenav_linkfirst {} /* go to first page */
      .pagenav_linkprev {}  /* go to previous page */
      .pagenav_linknext {}  /* go to next page */
      .pagenav_linklast {}  /* go to last page */
      
       

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

/* homepage first section, with glyph */
.list1 { margin: -30px -60px; }
  /* item */
  .list1_item { padding: 30px 60px 30px 170px; position: relative; width: 50%; display: inline-block; vertical-align: top; border-top: 0; }
  .list1_item:before { position: absolute; top: 30px; left: 60px; z-index: 1; width: 80px; height: 80px; border: 2px #e5e5e5 solid; border-radius: 100%; line-height: 80px; text-align: center; text-indent: -20px; font-size: 120px; color: #cd2e29; }
    /* item content */
    .list1_itemtitle { margin: 0 0 5px; font-size: 18px; font-weight: bold; }
    .list1_itemcontent { margin: -20px 0; }

/* homepage second section */
.list2 { }
  /* item */
  .list2_item { padding: 80px 0; border-top: 0; position: relative; }
    .list2_itemtitle { margin: 0 0 5px; font-size: 18px; font-weight: bold; }
    .list2_itemtext { margin: -20px 0; }

/* homepage third section */
.list3 { text-align: left; margin: -1px; position: relative; overflow: hidden; }
.list3::before { content: ""; position: absolute; z-index: 0; top: 1px; bottom: 1px; right: 1px; left: 1px; background-color: #eeeeee; }
/* safari round */
@media \\0 screen { .list3::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; width: 5px; background-color: #fff; } }

  .list3_item { position: relative; z-index: 2; width: 20%; text-align: center; display: inline-block; vertical-align: top; border-top: 0; padding: 0; }
    .list3_itembox { background-color: #fff; margin: 1px 1px 0 0; }
      .list3_itemimg { padding: 25px 0; -webkit-filter: grayscale(1); -moz-filter: grayscale(1); filter: grayscale(1); opacity: 0.5; }
    a.list3_itembox:hover > .list3_itemimg, a.list3_itembox:focus > .list3_itemimg, a.list3_itembox:active > .list3_itemimg { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); filter: grayscale(0); opacity: 1; }
    html.ie_lt10 .list3_itemimg { filter: gray; } 
    html.ie_lt9 .list3_itemimg { filter: gray alpha(opacity=50); } 
    html.ie_lt10 .list3_itemimg a.list3_itembox:hover > .list3_itemimg, html.ie_lt10 .list3_itemimg a.list3_itembox:focus > .list3_itemimg, html.ie_lt10 .list3_itemimg a.list3_itembox:active > .list3_itemimg { filter: alpha(opacity=100); }
      
   .list3_item:last-child::after { content: ""; background: white; position: absolute; top: 1px; bottom: 0; left: 100%; width: 2000px; }   

/* homepage, job section */
.list4 { margin: 0 -60px; text-align: center; }
  .list4_item { display: inline-block; text-align: left; vertical-align: top; border-top: 0; padding: 20px 60px; width: 50%; }
    .list4_itemtitle { margin: 0 0 5px; font-size: 18px; font-weight: bold; }
    .list4_itemtext { margin: 0 0 5px; }
    .list4_itembtn { margin: 5px 0 0; }
   
  
/* homepage solution, with glyph */
.list5 { margin: 0 -40px; text-align: center; position: relative; }
  /* item */
  .list5_item { padding: 20px 30px; width: 20%; display: inline-block; vertical-align: top; border-top: 0; font-size: 17px; color: #cd2e29; }
  .list5_item + .list5_item:after { content: ""; display: block; position: absolute; top: 20px; bottom: 20px; left: auto; z-index: 1; width: 1px; background-color: #e9eaea; margin-left: -30px; }
  .list5_item:before { display: block; margin: 0 auto 20px; width: 80px; height: 80px; border: 2px #e5e5e5 solid; border-radius: 100%; line-height: 80px; text-align: center; text-indent: -20px; font-size: 120px; color: #cd2e29; }
    
  
/*** LAYOUT -------------------- ***/

a[name] { display: table; }
html.js a[name] { position: relative; top: -61px; }

/** header **/
#mainheader { position: relative; max-width: 1280px; min-width: 960px; margin: 0 auto; z-index: 10; }

  /* logo */
  #mainheaderlogo { position: absolute; top: 0; left: 50%; margin-left: -77px; z-index: 1; }
    #mainheaderlogo_img { max-width: none; } /* require for IE8 */
    
  /* nav */
  #mainheadernav { position: absolute; top: 350px; left: 0; right: 0; padding: 0 120px; z-index: 2; background-color: #eeeeee; }
  /* must use fixed for IE9 */
  #mainheadernav.\:fixed { position: fixed; top: 0 !important; left: 50%; right: auto; width: 1040px; margin-left: -640px; }
  
    #mainheadernav_list { }
      .mainheadernav_item { display: inline-block; margin: 0 12px; vertical-align: top; padding: 0; border-top: 0; }
      .mainheadernav_item + .mainheadernav_item:before {}
        .mainheadernav_link { color: #757575; font-size: 16px; text-decoration: none; display: inline-block; height: 60px; line-height: 58px; white-space: nowrap; border-bottom: 2px solid transparent; }
        /* hover */
        .mainheadernav_link:hover { color: #cd2e29; }
        /* active/focus */
        .mainheadernav_link:focus, .mainheadernav_link:active { border-bottom-color: #cd2e29; color: #cd2e29; }
        /* current */
        .mainheadernav_link.\:current { border-bottom-color: #cd2e29; color: #cd2e29; }
        
  /* phone, absolute to nav */
  #mainheaderphone { position: absolute; top: 11px; right: 132px; height: 40px; z-index: 1; color: #fff; background-color: #ab2521; overflow: hidden; }
    #mainheaderphone_part1 { display: inline-block; padding: 11px 25px 12px; vertical-align: top; color: #fff; text-decoration:none}
    #mainheaderphone_part2 { display: inline-block; padding: 11px 25px 12px; vertical-align: top; position: relative; color: #fff; text-decoration:none}
    #mainheaderphone_part2:after { content: ""; position: absolute; top: 0; left: 5px; right: 0; bottom: 0; z-index: -2; background-color: #cd2e29; }
    #mainheaderphone_part2:before { content: ""; position: absolute; top: 0; left: -5px; z-index: -1; border-style: solid; border-width: 40px 10px 0 0; border-color: transparent #cd2e29 transparent transparent; }
        
  /* lang */
  #mainheaderlang {}
    #mainheaderlang_list {}
      .mainheaderlang_item {}
        .mainheaderlang_link {}
        /* hover */
        .mainheaderlang_link:hover {}
        /* active/focus */
        .mainheaderlang_link:focus, .mainheaderlang_link:active {}
        /* current */
        .mainheaderlang_link.\:current {}
  
  /* partner */    
  #mainheaderpartner { position: absolute; top: 330px; margin-top: -36px; right: 20px; z-index: 2; }
        

/** footer **/
#mainfooter { max-width: 1016px; min-width: 696px; margin: 0 auto; background-color: #fff; position: relative; padding: 25px 132px; }
#mainfooter:before { content: ""; position: relative; top: -25px; display: block; background-color: #cd2e29; height: 1px; } 

  /* logo */
  #mainfooterlogo { position: absolute; left: 132px; top: 48px; z-index: 1; }
  
  /* list */
  #mainfooterlist { padding: 0; }
    .mainfooterlist_item { margin: 15px 0; display: inline-block; width: 25%; vertical-align: top; border-top: 0; }
    .mainfooterlist_item:first-child { margin-left: 25%; }
    #mainfooterlist_itemlast { margin-left: 25%; width: 75%; }
      .mainfooterlist_itemlink { color: #757575; text-decoration: none; }
      .mainfooterlist_itemlink:hover, .mainfooterlist_itemlink:focus, .mainfooterlist_itemlink:active { color: #cd2e29; }
        
  /* signature */
  #mainfootersignature { margin: 25px 0 15px 25%; display: inline-block; font-size: 12px; color: #acacac; text-decoration: none; }
  #mainfootersignature:hover, #mainfootersignature:active, #mainfootersignature:focus { text-decoration: underline; }
  

/** standard layout **/
#standardlayout { max-width: 1280px; min-width: 960px; margin: 0 auto; background-color: #fff; overflow: hidden; }

  /* header */
  #standardheader { height: 350px; margin-bottom: 62px; overflow: hidden; display: table; width: 100%; background-color: #cd2e29; }
  #standardheader_title { display: table-cell; padding: 190px 132px 0; vertical-align: middle; text-align: center; color: #fff; font-size: 40px; font-weight: bold; font-style: italic; position: relative; z-index: 5; }  
  
  /* section */
  .standardsection { padding: 80px 132px; max-width: 508px; margin: 0 auto; }
    .standardsection_title {}
    
  /* footer */
  #standardfooter {}

  
/** home layout **/
#homelayout { max-width: 1280px; min-width: 960px; margin: 0 auto; background-color: #fff; overflow: hidden; }


  /* header */
  /* these displays depends of header height */
  body.sfmod_home #mainheadernav { top: 550px; }
  body.sfmod_home #mainheaderpartner { top: 510px; }
  #homeheader { position: relative; height: 550px; margin-bottom: 62px; overflow: hidden; display: table; width: 100%; background-color: #cd2e29; }
    #homeheader_img { position: absolute; top: 0; bottom: 0; max-width: none; left: 50%; width: 1280px; margin-left: -640px; z-index: 1; opacity: .1; }
    html.ie_lt9 #homeheader_img { filter: alpha(opacity=10); } 
    #homeheader_title { display: table-cell; padding: 190px 0 0; vertical-align: middle; text-align: center; color: #fff; font-size: 40px; font-weight: bold; font-style: italic; position: relative; z-index: 5; } 
    
    html.js #homeheader_title { display: none; } /* will be displayed back with javascript */
    
    /* code for animated blinking cursor */
    .typed-cursor { 
      opacity: 1; vertical-align: 5px; font-weight: 100;
      -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; -ms-animation: blink 0.7s infinite; -o-animation: blink 0.7s infinite; animation: blink 0.7s infinite;
    }
    @-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
    @-webkit-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
    @-moz-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
    @-ms-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
    @-o-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
    
  /* section */
  .homesection { padding: 80px 132px; }
    .homesection_title { text-align: center; font-size: 36px; font-style: italic; margin: -10px 0 40px; }
    .homesection_titlesup { font-size: 13px; font-style: normal; font-weight: normal; text-transform: uppercase; }
    
    /* nav */
    .homesectionnav { border-bottom: 1px #757575 solid; text-align: center; }
        .homesectionnav_item { display: inline-block; padding: 0 10px; border-top: 0; }
          .homesectionnav_link { display: inline-block; padding: 15px 0 15px; color: #757575; font-size: 16px; text-decoration: none; border-bottom: 2px transparent solid;}
          .homesectionnav_link:hover, .homesectionnav_link:focus { color: #cd2e29; }
          .homesectionnav_link:active { color: #cd2e29; border-bottom-color: #cd2e29; }
          html.js .homesectionnav_link.\:current { color: #cd2e29; border-bottom-color: #cd2e29; }
    
  /* product section */
  #homesection_product { background-color: #cd2e29; color: #f8e3e2; padding-bottom: 0; }
  #homesection_product .homesection_titlesup { color: #2c2c2c; }
  #homesection_product .homesection_title { color: #fff; }
    #homesection_product .homesectionnav { border-bottom-color: #b31a15; }
        #homesection_product .homesectionnav_link { color: #f8e3e2; position: relative; z-index: 10; }
        /* effect */
        #homesection_product .homesectionnav_link:hover, #homesection_product .homesectionnav_link:focus { color: #fff; }
        #homesection_product .homesectionnav_link:active { color: #fff; border-bottom-color: #fff; }
        #homesection_product .homesectionnav_link.\:current { color: #fff; border-bottom-color: #fff; }
        
      #homesection_product .list2_item + .list2_item { padding-top: 160px; }
        #homesection_product .list2_itemtitle { color: #fff; }
        #homesection_product .list2_itemimg { position: absolute; z-index: 1; } /* other rules are item specific */
        #list2_itemproduct01 { padding-right: 50%; padding-bottom: 150px; }
          #list2_itemproduct01 .list2_itemimg { right: 85px; bottom: -50px; margin-right: -54px; }
        #list2_itemproduct02 { padding-left: 50%; padding-bottom: 150px; }
          #list2_itemproduct02 .list2_itemimg { left: 0px; bottom: -60px; margin-left: -54px; }
        #list2_itemproduct03 { padding-right: 50%; padding-bottom: 150px; }
          #list2_itemproduct03 .list2_itemimg { right: -132px; bottom: -110px; margin-right: -54px; }
        #list2_itemproduct04 { padding-left: 50%; padding-bottom: 150px; }
          #list2_itemproduct04 .list2_itemimg { left: -132px; bottom: -110px; margin-left: -54px; }
      
  /* with JS */
  html.js #homesection_product .list2 { position: relative; }
    html.js #homesection_product .list2_item { 
      position: absolute; top: 0; left: 0; right: 0; z-index: 0; opacity: 0; 
      -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; -o-transition: opacity 400ms ease-in; -ms-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in;
    }
    html.js.ie_lt9 #homesection_product .list2_item { visibility: hidden; }
    html.js #homesection_product .list2_item.\:current { opacity: 1; }
    html.js.ie_lt9 #homesection_product .list2_item.\:current { visibility: visible; }
    html.js #homesection_product .list2_item + .list2_item { padding-top: 80px; }
      html.js #homesection_product .list2_itemtitle { display: none; }
    
  /* brand then job */
  #homesection_brand + a[name] + #homesection_job:before { content: ""; display: block; position: relative; top: -80px; height: 1px; background-color: #e9eaea; }
  
  
  /* footer */
  #homefooter { padding: 0 132px 50px; }
  #homefooter:after { content: ""; display: table; clear: both; }
  
    /* a banner */
    .homefooterbanner { margin: 0 -132px; clear: both; }
    /* banner1, doc.dsl.lu */
    #homefooterbanner1 { position: relative; background: #3a5282 url(images/bg_ad.png) 10% 100% no-repeat; color: #fff; height: 185px; padding: 0 132px; }
      #homefooterbanner1_part1 { display: block; padding-top: 60px; font-size: 24px; }
      #homefooterbanner1_part2 { display: block; font-size: 24px; }
      #homefooterbanner1_part3 { position: absolute; z-index: 1; top: 83px; right: 234px; font-size: 20px; }
      html[lang="fr"] #homefooterbanner1_part3 { top: 123px; }
    
    .homefooterbox { width: 50%; padding-right: 20px; float: left; margin-bottom: 50px; }
    .homefooterbox + .homefooterbox { padding-right: 0; padding-left: 20px; float: right; }
    
      /* with table display, height will be a min-height */
      .homefooterbox_grid { height: 183px; display: table; table-layout: fixed; position: relative; width: 100%; background-color: #eee; }
        .homefooterbox_title { display: table-cell; position: relative; margin: 0; padding: 115px 15px 20px; vertical-align: top; text-align: center; font-size: 18px; width: 25%; color: #fff; background-color: #cd2e29; }
        .homefooterbox_title:before { position: absolute; top: 15px; left: 50%; margin-left: -60px; font-size: 120px; z-index: 1; }
        .homefooterbox_link { display: table-cell; position: relative; margin: 0; padding: 130px 0 30px; vertical-align: top; white-space: nowrap; text-align: center; font-size: 15px; width: 37.5%; color: #67696c; }
        html[lang="fr"] .homefooterbox_link { padding-top: 118px; }
        .homefooterbox_link:before { position: absolute; top: 15px; left: 50%; margin-left: -60px; font-size: 120px; z-index: 1; }
        /* effect */
        .homefooterbox_link:hover, .homefooterbox_link:focus, .homefooterbox_link:after { color: #cd2e29 !important; font-weight: bold; background-color: #e3e3e3; }
        
        /* first part sep */
        #homefooterbox1 > .homefooterbox_grid:before { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; right: 37.5%; width: 1px; background-color: #eee; }
        #homefooterbox1 > .homefooterbox_grid:after { content: ""; position: absolute; top: 40px; bottom: 35px; z-index: 2; right: 37.5%; width: 1px; background-color: #d3d3d4; }
      
        /* second part with form */
        #homefooterbox2_target { display: table-cell; margin: 0; padding: 25px 25px 5px; width: 75%; background-color: #eee; vertical-align: middle; }
            #homefooterbox2_form > .formrow { width: 50%; padding-right: 6px; }
            #homefooterbox2_form > .formrow + .formrow { width: 50%; padding-right: 0; padding-left: 6px; }
            #homefooterbox2_form > .formrow + .formrow + .formrow { width: 100%; padding-left: 0; }
              #homefooterbox2_form textarea { height: 70px; }
              #homefooterbox2_success { text-align: center; padding-bottom: 20px; }
        
          #homefooterbox2_loading { display: none; position: absolute; top: 0; bottom: 0; left: 25%; right: 0; padding: 50px; text-align: center; font-weight: bold; color: #cd2e29; z-index: 1; opacity: .9; background: #eee url(images/loader_eee.gif) 50% 60%  no-repeat; }
          html.ie_lt9 #homefooterbox2_loading { filter: alpha(opacity=90); }
          .\:loading > #homefooterbox2_loading { display: block; }

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

/* for screen smaller than 1280px */
@media screen and (max-width: 1280px)
{
  /* must use fixed for IE9 */
  #mainheadernav.\:fixed { left: 0; right: 0; width: auto; margin-left: 0; }
}

/* for screen smaller than 1060px */
@media screen and (max-width: 1060px)
{
  /** disabled min width **/
  #mainheader, #mainfooter, #standardlayout, #homelayout { min-width: 0; }
  /* adjust fixed nav display */
  #mainheadernav.\:fixed { left: 0; right: 0; margin-left: 0; width: auto; }
  
  
  /** reduce left/right padding **/
    #mainheadernav { padding-left: 28px; padding-right: 28px; }
    #mainheaderphone { right: 40px; }
  #mainfooter, #standardheader_title, .standardsection, #homeheader_title, .homesection, #homefooter { padding-left: 40px; padding-right: 40px; }
    #mainfooterlogo { left: 40px; }
    #mainheaderpartner { right: 40px; }
    
    /* home product item specific */
            #list2_itemproduct01 .list2_itemimg { right: -40px; }
            #list2_itemproduct02 .list2_itemimg { left: -40px; }
            #list2_itemproduct03 .list2_itemimg { right: -40px; }
            #list2_itemproduct04 .list2_itemimg { left: -40px; }
    
    /* home banner */
    .homefooterbanner { margin-left: -40px; margin-right: -40px; }
    
    /* special banner 1 */
    #homefooterbanner1 { padding-left: 40px; padding-right: 40px; }
      #homefooterbanner1_part3 { right: 142px; }
    
      
  /** reduce list1 spacing **/
  .list1 { margin-left: -23px; margin-right: -23px; }
    .list1_item { padding-left: 133px; padding-right: 23px; }
    .list1_item:before { left: 23px; }
    
    
  /** display 4 items by line **/
    /* item */
    .list3_item { width: 25%; }
    
    
  /** reduce list4 spacing **/
  .list4 { margin-left: -23px; margin-right: -23px; }
    .list4_item { padding-left: 23px; padding-right: 23px; }
  
}

/* for screen smaller than 860px */
@media screen and (max-width: 860px)
{
  /** rearrange list1 icon **/
    .list1_item { padding-left: 23px; }
    .list1_item:before { position: static; display: block; margin-bottom: 10px; }
    
    
  /** special product display **/
  #homesection_product { padding-bottom: 80px; }
    #homesection_product .homesectionnav { display: none; }
      #homesection_product .list2 { height: auto !important; }
      #homesection_product .list2_item { 
        position: static !important; opacity: 1 !important; padding: 0 !important; 
        text-align: center; border-bottom: 1px #b31a15 solid; 
      }
      #homesection_product .list2_item + .list2_item { margin-top: -1px; }
        #homesection_product .list2_itemtitle { 
          display: block !important;
          border-top: 1px #b31a15 solid; font-weight: normal; font-size: 17px; margin: 0; padding: 5px 0 7px 0;
        }
        #homesection_product .list2_itemtext { margin: 0; }
        #homesection_product .list2_itemimg { margin: 20px 0 0 0; position: static; }
      
  /* with JS */
      html.js #homesection_product .list2_itemcontent { display: none; }
    /* title icon */ 
      html.js #homesection_product .list2_itemtitle { color: #f8e3e2; position: relative; z-index: 2; cursor: pointer; }
      html.js #homesection_product .list2_itemtitle:before { content: ""; position: absolute; z-index: 1; top: 50%; right: 0; height: 1px; margin-top: -1px; width: 15px; background-color: #f8e3e2; }
      html.js #homesection_product .list2_itemtitle:after { content: ""; position: absolute; z-index: 1; top: 50%; right: 7px; height: 15px; margin-top: -8px; width: 1px; background-color: #f8e3e2; }
      /* effect */
      html.js #homesection_product .list2_itemtitle:hover { color: #fff; }
      html.js #homesection_product .list2_itemtitle:hover:before { background-color: #fff; }
      html.js #homesection_product .list2_itemtitle:hover:after { background-color: #fff; }
      /* opened */
      html.js #homesection_product .\:open > .list2_itemtitle { color: #fff; }
      html.js #homesection_product .\:open > .list2_itemtitle:after { display: none; }
        
        
  /** display 3 items by line **/
    .list3_item { width: 33.3333%; }
    .list5_item { width: 33.3333%; }
    .list5_item + .list5_item:after { display: none; }
    
  /** change banner display **/
    #homefooterbanner1 { height: auto; text-align: center; background-position: 50% 100%; }
      #homefooterbanner1_part3 { display: block; position: relative; top: auto !important; right: auto; left: auto; bottom: auto; padding: 60px 0 20px; }
      #homefooterbanner1_part3:before { content: ""; position: absolute; left: 50%; margin-left: -27px; top: 45px; z-index: 1; background-color: #fff; height: 1px; width: 54px; }
      
      
  /** boxes on full width **/
    .homefooterbox { float: none; width: 100%; padding: 0 !important; }
    
  
  /** main footer display **/
    /* logo to static */
    #mainfooterlogo { position: static; margin: 22px 0; }
    /* items without margin */
      .mainfooterlist_item { width: 33.3333%; }
      .mainfooterlist_item:first-child { margin-left: 0; }
      #mainfooterlist_itemlast { width: 100%; margin-left: 0; }
    /* signature on right */
      #mainfootersignature { float: right; margin-left: 0; }
    #mainfooter:after { content: ""; display: table; clear: both; }
      
}

/* for screen smaller than 800px */
@media screen and (max-width: 800px)
{
  /** switch to mobile header **/ 
  /* by default nojs */
  #mainheader { height: auto; background-color: #cd2e29; padding-top: 160px; }
  
    #mainheaderlogo { position: absolute; top: 0; left: 0; right: 50%; height: 160px; text-align: center; margin: 0; overflow: hidden; background-color: #cd2e29; }
      #mainheaderlogo_img { position: absolute; z-index: 1; top: 50%; height: 130px; margin-top: -75px; left: 50%; width: auto; margin-left: -53px; clip: rect( 10px 106px 130px 0px ); overflow: hidden; }
  
    #mainheadernav { position: static !important; background-color: transparent; padding: 0; }
      
      /* title */
      #mainheadernav_title { position: absolute; top: 80px; left: 50%; right: 0; height: 80px; z-index: 1; background-color: #ab2521; white-space: nowrap; text-indent: 100%; overflow: hidden; margin: 0; }
      #mainheadernav_title:before { 
        content: ""; position: absolute; top: 50%; margin-top: -1px; height: 2px; left: 50%; width: 28px; margin-left: -14px; z-index: 1; background-color: #fff; 
        -webkit-box-shadow: 0 -9px 0 0 #fff, 0 9px 0 0 #fff; box-shadow: 0 -9px 0 0 #fff, 0 9px 0 0 #fff;
      }
      
      /* list below header */
      #mainheadernav_list { background-color: #ab2521; }
        .mainheadernav_item { display: block; margin: 0; }
        .mainheadernav_item + .mainheadernav_item:before { content: ""; display: block; margin: 0 40px; height: 1px; background-color: #cd2e29; }
          .mainheadernav_link { display: block; padding: 0 40px 3px 40px; color: #fff; border-bottom-width: 0; line-height: 44px; height: auto; }
          /* effect */
          .mainheadernav_link:hover, .mainheadernav_link:focus, .mainheadernav_link:active { color: #fff; background-color: #a1231f; }
          .mainheadernav_link.\:current { color: #fff; }
    
    #mainheaderphone { position: absolute; top: 0; left: 50%; right: 0; height: 80px; text-align: center; line-height: 1.5; background-color: #be2b27; }
      #mainheaderphone_part1 { display: block; padding: 0; margin: 18px 0 0; font-weight: bold; }
      #mainheaderphone_part2 { display: block; padding: 0; margin: 0; background-color: transparent; }
      #mainheaderphone_part2:before, #mainheaderphone_part2:after { display: none; }
    /* effect */
    #mainheaderphone:hover, #mainheaderphone:focus, #mainheaderphone:active { background-color: #a1231f; }
    /* partner */
    #mainheaderpartner { display: none; }
    
  /* with JS */
  html.js #mainheader { height: 0; }
    html.js #mainheadernav_title { cursor: pointer; }
    html.js #mainheadernav_list { 
      position: absolute; top: 100%; left: 0; right: 0; z-index: -1; 
      -webkit-transform: translateY( -100% ); -moz-transform: translateY( -100% ); -o-transform: translateY( -100% ); -ms-transform: translateY( -100% ); transform: translateY( -100% );
      -webkit-transition: -webkit-transform 400ms ease-in-out; -moz-transition: transform 400ms ease-in-out; -o-transition: transform 400ms ease-in-out; -ms-transition: transform 400ms ease-in-out; transition: transform 400ms ease-in-out;
    }
    html.js .\:open > #mainheadernav_list {
      z-index: 2;
      -webkit-transform: translateY( 0 ); -moz-transform: translateY( 0 ); -o-transform: translateY( 0 ); -ms-transform: translateY( 0 ); transform: translateY( 0 );
      -webkit-transition: -webkit-transform 400ms ease-in-out, z-index 0ms linear 400ms; -moz-transition: transform 400ms ease-in-out, z-index 0ms linear 400ms; -o-transition: transform 400ms ease-in-out, z-index 0ms linear 400ms; -ms-transition: transform 400ms ease-in-out, z-index 0ms linear 400ms; transition: transform 400ms ease-in-out, z-index 0ms linear 400ms;
    }
    
 
  /** smaller header for section **/
  #standardheader { height: auto; background-color: transparent; margin-bottom: 0; }
    #standardheader_title { padding-top: 25px; color: #cd2e29; }
 
    
  /** no header for homepage **/
  #homeheader { display: none; }
  
  
  /** reduce section padding top and bottom **/
  .standardsection, .homesection { padding-top: 50px; padding-bottom: 50px; }
    /* change line position */
    #homesection_brand + a[name] + #homesection_job:before { top: -50px; }
}


/* for screen smaller than 620px */
@media screen and (max-width: 620px)
{
  /** reduce left/right padding **/
  #mainfooter, #standardheader_title, .standardsection, .homesection, #homefooter, .mainheadernav_link { padding-left: 10px; padding-right: 10px; }
  .mainheadernav_item + .mainheadernav_item:before { margin-left: 10px; margin-right: 10px; }
  
  
  /** reduce section padding top and bottom **/
  .standardsection, .homesection { padding-top: 30px; padding-bottom: 30px; }
    /* change line position */
    #homesection_brand + a[name] + #homesection_job:before { top: -30px; }
  /* also reduce home footer spacing */
  #homefooter { padding-bottom: 30px; }
    .homefooterbox { margin-top: 30px; }
    .homefooterbox + .homefooterbox { margin-top: 10px; }
    
  
  /** full width list1 and centered **/
  .list1 { margin-top: -15px; margin-bottom: -5px; }
    .list1_item { width: 100%; text-align: center; padding-top: 15px; padding-bottom: 15px; }
    .list1_item:before { margin-left: auto; margin-right: auto; }
    
    
  /** display 2 items by line **/
    .list5_item { width: 50%; }
    
    
  /** remove image on product display **/
    #homesection_product .list2_item { text-align: left; }
      #homesection_product .list2_itemtext {  position: relative; z-index: 1; top: -10px; }
      #homesection_product .list2_itemimg { display: none; }
  
      
  /** full width list4 and centered **/
  .list4 { margin-bottom: -5px; }
    .list4_item { width: 100%; text-align: center; padding-top: 15px; padding-bottom: 15px; }
  
    
  /** switch to mobile footer **/
    /* logo */
    #mainfooterlogo { margin-top: 3px; }
      /* item on full width */
      .mainfooterlist_item { width: 100%; margin: 10px 0; }
    /* signature */    
    #mainfootersignature { float: none; }
}


/* for screen smaller than 420px */
@media screen and (max-width: 420px)
{
  /** switch to mobile homefooter **/
    .homefooterbox_grid { display: block; height: auto; }
      .homefooterbox_title, .homefooterbox_link { display: block; width: auto; position: relative; padding: 0 0 0 80px !important; white-space: nowrap; line-height: 80px; text-align: left; }
      .homefooterbox_title:before, .homefooterbox_link:before { top: 50%; margin-top: -60px; left: 40px; }
    /* first part */
    #homefooterbox1 > .homefooterbox_grid:before { bottom: 33.3333%; left: 0; right: 0; top: auto; height: 1px; width: auto; }
    #homefooterbox1 > .homefooterbox_grid:after { bottom: 33.3333%; left: 10px; right: 10px; top: auto; height: 1px; width: auto; }
    /* second part */
    #homefooterbox2_target { display: block; width: auto; position: relative; }
      #homefooterbox2_loading { left: 0; }
      
      
  /** display 2 items by row **/
  .list3_item { width: 50% }
    
    
  /** display 1 item by line **/
    .list5_item { width: 100%; }
}
    

/*** 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)
{
  /* special banner */
  #homefooterbanner1 { background-image: url(images/bg_ad_x4.png); background-size: 794px 240px; }
}

    

/*** CSS HACKS ----------------- ***/
/* last update 2014-06-03 */

/* Firefox 2+ */
x:-moz-any-link, .selector { property: value; }
/* Opera 14+, Safari, Chrome, Android */
.selector:not(*:root) { property: value; }
/* Chrome 28+ , Opera 14+ */
@supports (-webkit-appearance:none) { .selector { property: value; } }
/* Chrome 22-28, Safari 7+ */
@media \\0 screen { .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 */