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

/*** ANIMATIONS -------------------- ***/

@-webkit-keyframes mytranslation {
  0%   { -webkit-transform: translateX(0); }
  100% { -webkit-transform: translateX(-50%); }
}
@-moz-keyframes mytranslation {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@-o-keyframes mytranslation {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes mytranslation {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


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

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

.font0 { font-family: proximanova, sans-serif; } /* default font family */
.font0_light { font-family: proximanova, sans-serif; font-weight: 200; } /* default font family */
.font1 { font-family: Georgia, Times, 'Times New Roman', serif; } /* secondary font family */

.cl0 { color: #4c4c4c; } /* default color */
.cl1 { color: #3a5179; } /* secondary color */
.cl2 { color: #727a8c; } /* ... */

/** 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, .btn1 { text-decoration: none !important; box-sizing: border-box; display: inline-block; color: #fff; cursor: pointer; font-size: 13px; border: 0; border-radius: 18px; padding: 9px 20px 10px; background-color: hsl(218,35%,35%); }
html.mac button, html.mac .btn1 { padding-top: 11px; padding-bottom: 10px; }
button:hover, .btn1:hover, button:focus, .btn1:focus { background-color: hsl(218,35%,45%); }
button:active, .btn1:active { background-color: hsl(218,35%,25%); }

.btn2 { 
  text-decoration: none !important; box-sizing: border-box; display: inline-block; color: #fff; cursor: pointer; font-size: 13px; border: 0; border-radius: 13px; background-color: hsl(218,35%,35%);
  position: relative; width: 26px; height: 26px; padding: 4.5px 0 5px 26px; white-space: nowrap; overflow: hidden; 
}
html.mac .btn2 { padding-top: 6px; padding-bottom: 5px; }
.btn2:before { content: ""; position: absolute; z-index: 1; top: 50%; left: 7px; width: 12px; height: 2px; margin-top: -1px; background-color: currentColor; }
.btn2:after { content: ""; position: absolute; z-index: 1; top: 50%; left: 12px; width: 2px; height: 12px; margin-top: -6px; background-color: currentColor; }
.btn2:hover, .btn2:focus { background-color: hsl(218,35%,45%); width: auto; padding-right: 13px; padding-left: 29px; }
.btn2:active { background-color: hsl(218,35%,25%); width: auto; padding-right: 13px; padding-left: 29px; }
      
.btn3 { 
  text-decoration: none !important; box-sizing: border-box; display: inline-block; color: #fff; cursor: pointer; font-size: 13px; border: 2px solid; border-radius: 13px; background-color: transparent !important;
  position: relative; width: 26px; height: 26px; padding: 2.5px 0 3px 22px; white-space: nowrap; overflow: hidden; 
}
.btn3:before { 
  position: absolute; top: 0; left: 0; width: 22px; font-size: 24px; font-weight: bold; text-align: center; line-height: 20px; content: "<";
  -webkit-transform: scale(.5,1); -ms-transform: scale(.5,1); transform: scale(.5,1); text-indent: -2px;
}
.btn3:hover, .btn2:focus { width: auto; padding-right: 13px; padding-left: 25px; }
.btn3:active { width: auto; padding-right: 13px; padding-left: 25px; }
      
  
/** special wrap title, only work under wrap1 container **/
.wrap1 { margin-left: 475px; position: relative; }
.wrap1_title { margin: 0; font-size: 20px; font-weight: bold; position: relative; z-index: 1; left: -475px; width: 455px; top: 60px; height: 35px; overflow: visible; padding-right: 23.07%; box-sizing: border-box; }
     

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

/** list1, used for press, news and job **/
/* title above the list */
.list1 {}
  /* item */
  .list1_item { min-height: 140px; }
    /* box around item data */
    .list1_itembox {}
      /* item content */
      .list1_itemtitle { }
      .list1_itemtitle_desc { font-size: 16px; display: inline-block; padding-top: 7px; }
      .list1_itemtext { margin: 20px 0 10px; }
      .list1_itembtn {}
      
.list1_btn { margin-top: 35px; }

/** list2, used for staff **/
/* title above the list */
.list2 { margin: 0 -10px; }
  /* item */
  .list2_item { display: inline-block; vertical-align: top; padding: 20px 10px; width: 50%; box-sizing: border-box; }
    /* item content */
    .list2_itemtitle { margin: 0; font-size: inherit; color: inherit; border-top: 0; padding-top: 0; }
    .list2_itemtext { margin: 13px 50px 0 0; }
      
      
/** pagination **/
.pagenav { margin-top: 35px; }
  /* list */
  .pagenav_list {}
    /* item */
    .pagenav_item { display: inline; padding-right: 15px; }
      /* 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 */
      
      

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

/** header **/
#mainheader { position: relative; margin-bottom: 20px; }
html.js #mainheader { background-color: #fff; position: fixed; z-index: 10; left: 50%; top: 0; margin-left: -620px; width: 1240px; }
#mainheader.\:subnav { margin-bottom: 55px; }


  /* logo */
  /* use it as spacer */
  #mainheaderlogo { display: inline-block; margin: 45px 0 23px; position: relative; z-index: 3; }
    #mainheaderlogo_img { max-width: none; height: 73px; width: 196px; } /* make sure IE8 will display it */
    
  /* nav */
  #mainheadernav { font-size: 16px; position: absolute; white-space: nowrap; z-index: 2; right: 0; left: 0; bottom: 0; text-align: right; }
    #mainheadernav_title { display: none; }
    #mainheadernav_list { margin: 0 -12px; }
    #mainheadernav_list:after { content: ""; position: absolute; right: 12px; left: 12px; top: 100%; z-index: 4; height: 1px; display: block; background-color: #d4d7dd; }
      .mainheadernav_item { display: inline-block; vertical-align: top; }
      .mainheadernav_item:first-child:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: #fff; z-index: 3; }
        .mainheadernav_link { background-color: #fff; position: relative; z-index: 4; display: inline-block; padding: 23px 12px; color: inherit; text-decoration: none; }
        /* hover/active/focus */
        .mainheadernav_link:hover, .mainheadernav_link:focus, .mainheadernav_link:active { color: #3a5179; }
        /* current */
        .mainheadernav_link.\:current { color: #3a5179; font-weight: bold; }
        
        /* sublist */
        .mainheadernav_sublist { 
          display: none; background-color: #fff; position: absolute; z-index: 1; right: 0; left: 0; top: 100%; margin-top: 1px; padding-top: 3px; text-align: right; height: 50px; 
          -webkit-transform: translateY(-54px); -ms-transform: translateY(-54px); transform: translateY(-54px);
          -webkit-transition: -webkit-transform 200ms ease 200ms; -ms-transition: transform 200ms ease 200ms; transition: transform 200ms ease 200ms;
        }
        .mainheadernav_sublist:after { content: ""; margin: 6px 12px 0; height: 1px; display: block; background-color: #d4d7dd; }
        /*.mainheadernav_item:hover > .mainheadernav_sublist { z-index: 2; 
          -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);
          -webkit-transition: -webkit-transform 200ms ease; -ms-transition: transform 200ms ease; transition: transform 200ms ease;
        }*/
        /* another stuff for current */
        .mainheadernav_link.\:current + .mainheadernav_sublist { display: block;
          -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);
          -webkit-transition: -webkit-transform 200ms ease; -ms-transition: transform 200ms ease; transition: transform 200ms ease;
        }
        body.\:scroll .mainheadernav_link.\:current + .mainheadernav_sublist {
          -webkit-transform: translateY(-54px); -ms-transform: translateY(-54px); transform: translateY(-54px);
          -webkit-transition: -webkit-transform 200ms ease 200ms; -ms-transition: transform 200ms ease 200ms; transition: transform 200ms ease 200ms;
        }
        body.\:scroll .mainheadernav_item:hover > .mainheadernav_link.\:current + .mainheadernav_sublist {
          -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);
          -webkit-transition: -webkit-transform 200ms ease; -ms-transition: transform 200ms ease; transition: transform 200ms ease;
        }
          .mainheadernav_subitem { display: inline-block; vertical-align: top; }
          .mainheadernav_subitem + .mainheadernav_subitem:before {}
            .mainheadernav_sublink { display: inline-block; padding: 12px; color: inherit; text-decoration: none; }
            html.chrome .mainheadernav_sublink { line-height: 1.25 }
            /* hover/active/focus */
            .mainheadernav_sublink:hover, .mainheadernav_sublink:focus, .mainheadernav_sublink:active { color: #3a5179; }
            /* current */
            .mainheadernav_sublink.\:current { color: #3a5179; font-weight: bold; }
        
  /* lang */
  #mainheaderlang { position: absolute; white-space: nowrap; z-index: 1; right: 0; top: 36px; }
    #mainheaderlang_list { margin: 0 -5px; }
      .mainheaderlang_item { display: inline-block; vertical-align: top; }
        .mainheaderlang_link { display: inline-block; font-size: 13px; padding: 5px; color: inherit; text-decoration: none; }
        .mainheaderlang_link > abbr { cursor: pointer; }
        /* hover/active/focus */
        .mainheaderlang_link:hover, .mainheaderlang_link:focus, .mainheaderlang_link:active { color: #3a5179; }
        /* current */
        .mainheaderlang_link.\:current { color: #3a5179; font-weight: bold; }
        
  
/** content **/
html { background-color: #f5f5f5; }
#mainwrap { width: 1240px; margin: 0 auto; padding: 0 20px; background-color: #fff; overflow: hidden; }
#maincontent { display: inline-block; width: 100%; } /* avoid margin merge on content */
        

/** footer **/
#mainfooter { position: relative; border-top: 1px #d4d7dd solid; padding: 50px 0; margin-top: 50px; }

  /* logo */
  #mainfooterlogo { position: absolute; top: 40px; left: 0; z-index: 1; }
  
  /* text */
  #mainfootertext { white-space: nowrap; font-size: 14px; float: left; width: 50%; position: relative; box-sizing: border-box; padding-left: 197px; }
  
  /* address */
  #mainfooteraddress { 
    font-size: 12px; display: inline-block; vertical-align: top; width: 25%; margin-left: 12.5%;
    -webkit-columns: 2; -moz-columns: 2; columns: 2; white-space: nowrap; 
  }

  /* nav */
  #mainfooternav { display: inline-block; vertical-align: top; width: 11.25%; margin-left: 1.25%; font-size: 12px; }
    #mainfooternav_list {}
      .mainfooternav_item {}
      .mainfooternav_item + .mainfooternav_item:before {}
        .mainfooternav_link { color: inherit; text-decoration: none; }
        /* hover/active/focus */
        .mainfooternav_link:hover, .mainfooternav_link:focus, .mainfooternav_link:active { color: #3a5179; }
        /* current */
        .mainfooternav_link.\:current { color: #3a5179; font-weight: bold; }
        
      /* signature */
      #mainfooternav_itemsignature { margin-top: 5px; }
      #mainfooternav_itemsignature:first-child { margin-top: 0; }
      

/** form **/
.mainform { border-top: 1px #d4d7dd solid; padding: 50px 0; }
.mainform + .mainform { margin-top: 50px; }
  .mainform_wrap { padding-right: 12.5%; }
  .mainform_title { border-top: 0; padding-top: 0; position: absolute; top: auto; height: auto; }
  
  #mainform01_fieldset01, #mainform01_fieldset02 { margin: 0 -10px; }
  #mainform01_fieldset01 > .formrow { box-sizing: border-box; width: 50%; display: inline-block; vertical-align: top; padding: 0 10px; }
  #mainform01_fieldset02 > label { white-space: nowrap; box-sizing: border-box; width: 25%; display: inline-block; vertical-align: top; padding: 9px 10px; }
  #mainform01_fieldset02 > .formrow { box-sizing: border-box; width: 25%; display: inline-block; vertical-align: top; padding: 0 10px; }
  #mainform01_fieldset02 > button { display: inline-block; vertical-align: top; margin-left: 10px; margin-bottom: 20px; }
  
  #mainform02_fieldset01 > .formrow { box-sizing: border-box; width: 50%; display: inline-block; vertical-align: top; padding: 0 10px 0 0; }
  #mainform02_fieldset01 > button { display: inline-block; vertical-align: top; margin-left: 10px; margin-bottom: 20px; }
  
  
/** 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 20px; padding-right: 30px; font-size: 11px; }
/* 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 { color: #fff; position: relative; }
    /* banner case */
    #standardheader_banner { position: relative; overflow: hidden; background-position: 50% 50%; background-color: transparent; background-repeat: no-repeat; background-size: cover; background-blend-mode: multiply; }
    #standardheader_banner:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background-color: transparent; opacity: .3; }
      #standardheader_bannerimg { position: relative; z-index: 1; visibility: hidden; width: 100%; max-width: none; }
      #standardheader_bannertitle { text-transform: none; margin: 0; position: absolute; z-index: 3; left: 475px; bottom: 17.5%; color: inherit; font-size: 100px; font-weight: 200; right: 12.5%; }
        .standardheader_bannertitle_in:before { content: ""; display: inline-block; width: 205px; height: 1px; background-color: currentColor; vertical-align: middle; }
      /* with JS */
      html.js #standardheader_bannertitle { left: 0; visibility: hidden; white-space: nowrap; right: auto; }
      html.js #standardheader_bannertitle.\:anim { visibility: visible;
        -webkit-animation: mytranslation 30s linear infinite;
        -moz-animation: mytranslation 30s linear infinite;
        -o-animation: mytranslation 30s linear infinite;
        animation: mytranslation 30s linear infinite;
      }
    /* wrap case */
    #standardheader_wrap { padding: 44px 12.5% 44px 475px ; background-color: #3a5179; }
      #standardheader_wraptitle { margin: 0; color: inherit; position: relative; top: -2px; }
        .standardheader_wraptitle_small { font-size: 16px; display: block; margin-top: 7px; }
      #standardheader_wrapback { margin: -20px 0 80px 0; }
      
  .standardsection { margin: 50px 0; }
    .standardsection_title {}
    
  /* page/index */
  .standardsection_contentwrap { margin-right: 25%; }
  
  /* press/index, news/index, job/index */
  .standardsection_list1wrap { margin-right: 25%; }
  .standardsection_content + .standardsection_list1 { margin-top: -55px; }
  .standardsection_content + .standardsection_list1 > .list1_none { margin-top: 95px; }
  
  /* service/detail */
  .standardsection_servicecontentwrap { 
    margin-right: 25%; 
    -webkit-columns: 2; -moz-columns: 2; columns: 2;
    -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px;
  }
    
  .standardsection_servicewrap { margin-right: 12.5%; }
    .standardsection_servicetitle { position: absolute; top: auto; height: auto; }
      .standardsection_servicetitle_desc { display: inline-block; padding-top: 7px; font-size: 14px; }
      
    .standardsection_servicesubtitle { border-top: 0; padding-top: 0; }
      .standardsection_servicesubtitle_desc { display: inline-block; padding-top: 7px; font-size: 14px; }
      
    .servicelist1 { margin: 0 -10px -20px; }
      .servicelist1_item { display: inline-block; vertical-align: top; padding: 0 10px; margin-bottom: 20px; width: 25%; box-sizing: border-box; min-height: 80px; }
      .servicelist1_item:before { content: ""; display: block; height: 1px; background-color: #c3c8d2; margin-bottom: 3px; }
      
  /* contact/index */
  .standardsection_list2wrap { margin-right: 12.5%; }
  
  
/** home layout **/
#homelayout {}

  /* header */
  #homeheader { color: #fff; position: relative; }
    #homeheader_banner { position: relative; overflow: hidden; }
      #homeheader_bannerimg { position: relative; z-index: 1; width: 100%; max-width: none; }
      #homeheader_bannertitle { text-transform: none; margin: 0; position: absolute; z-index: 3; left: 475px; bottom: 17.5%; color: inherit; font-size: 100px; font-weight: 200; right: 12.5%; }
        .homeheader_bannertitle_in:after { content: ""; display: inline-block; width: 205px; height: 1px; background-color: currentColor; vertical-align: middle; }
      /* with JS */
      html.js #homeheader_bannertitle { left: 0; visibility: hidden; white-space: nowrap; right: auto; }
      html.js #homeheader_bannertitle.\:anim { visibility: visible;
        -webkit-animation: mytranslation 30s linear infinite;
        -moz-animation: mytranslation 30s linear infinite;
        -o-animation: mytranslation 30s linear infinite;
        animation: mytranslation 30s linear infinite;
      }
    
  /* section 1, a nav to client page */
  #homesection01 { margin: 20px 0; }
    .homelist1 { margin: 0 -10px; counter-reset: homelist1; }
      .homelist1_item { display: inline-block; vertical-align: top; width: 33.3333%; font-size: 22px; counter-increment: homelist1; }
        .homelist1_itembox { overflow: hidden; display: block; border-top: 1px solid; color: inherit; position: relative; margin: 0 10px; padding: 10px 0; min-height: 80px; }
        .homelist1_itembox:before { float: right; content: counter( homelist1, decimal-leading-zero ); font-weight: bold; font-size: 18px; }
          .homelist1_itemlabel { 
            display: block; width: 210px; 
            -webkit-transition: -webkit-transform 200ms ease-in-out, opacity 200ms ease-in-out; -ms-transition: transform 200ms ease-in-out, opacity 200ms ease-in-out; transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
          }
          .homelist1_itemalt { 
            position: absolute; z-index: 1; left: 0; top: 10px;
            -webkit-transition: -webkit-transform 200ms ease-in-out, opacity 200ms ease-in-out; -ms-transition: transform 200ms ease-in-out, opacity 200ms ease-in-out; transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
            -webkit-transform: translateY(29px); -ms-transform: translateY(29px); transform: translateY(29px); opacity: 0;
          }
          .homelist1_itemalt > .font1 { font-style: italic; font-size: 18px }
        .homelist1_itembox:hover > .homelist1_itemlabel, 
        .homelist1_itembox:focus > .homelist1_itemlabel, 
        .homelist1_itembox:active > .homelist1_itemlabel { -webkit-transform: translateY(-29px); -ms-transform: translateY(-29px); transform: translateY(-29px); opacity: 0; }
        .homelist1_itembox:hover > .homelist1_itemalt, 
        .homelist1_itembox:focus > .homelist1_itemalt, 
        .homelist1_itembox:active > .homelist1_itemalt { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; }
  
  
  /* section 2, some content */
  #homesection02 { margin-left: 50%; margin-right: 12.5%; padding-left: 10px; font-size: 20px; }
  
 
  /* others section are quite similar */
  .homesection { margin: 100px -10px; position: relative; }
    /* content */
    .homesection_wrap { box-sizing: border-box; }
      /* title */
      .homesection_title { margin: 0; text-transform: none; }
      /* text, may float */
      .homesection_text { font-size: 15px; }
      /* list, may float */
      .homelist2 { margin: 20px 0; box-sizing: border-box; }
        .homelist2_item { margin: 0 0 10px; }
          .homelist2_itembox { border-top: 1px #c3c8d2 solid; padding: 3px 0 0 0; }
          html.mac .homelist2_itembox { padding-top: 5px; }
          .homelist2_itembox:hover, .homelist2_itembox:focus, .homelist2_itembox:active { color: #3a5179; border-color: currentColor; }
      /* button */
      .homesection_btn { position: absolute; z-index: 1; left: auto; bottom: 0; }
    /* img */
    .homesection_imgwrap { box-sizing: border-box; }
      .homesection_imgout { display: block; position: relative; height: 400px; overflow: hidden; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; background-blend-mode: multiply; }
      .homesection_imgout:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background-color: #3a5179; opacity: .3; }
      .homesection_imgout:after { content: ""; position: absolute; top: -999px; left: -999px; z-index: 3; background-color: #fff; width: 110px; height: 110px; border-radius: 100%; }
        .homesection_img { position: absolute; z-index: 1; top: 0; left: 50%; margin-left: -305px; visibility: hidden; max-width: none; width: 610px; }
  
  /* section 3, services list */
  #homesection03 { }
    /* content */
    #homesection03 .homesection_wrap { float: right; width: 37.5%; padding: 0 10px; margin-right: 12.5%; }
      #homesection03 .homesection_text { width: 66.6666%; }
      /* list */
      #homesection03 .homelist2 { margin: 50px -10px 40px; }
        #homesection03 .homelist2_item { vertical-align: top; display: inline-block; width: 33.3333%; }
          #homesection03 .homelist2_itembox { margin: 0 10px; }
    /* img */
    #homesection03 .homesection_imgwrap { float: left; width: 50%; padding: 0 10px; }
    
  /* section 4, publication */
  #homesection04 { }
    /* content */
    #homesection04 .homesection_wrap { float: left; width: 37.5%; padding: 0 10px; margin-left: 25%; }
      #homesection04 .homesection_text { width: 33.3333%; float: left; padding: 0 10px 0 0; box-sizing: border-box; }
      #homesection04 .homesection_btn { right: 37.5%; margin-right: 10px; }
      /* list */
      #homesection04 .homelist2 { float: right; width: 66.6666%; padding: 6px 0 0 10px; }
          #homesection04 .homelist2_itembox { padding-left: 70px; position: relative; }
            #homesection04 .homelist2_itemdate { position: absolute; z-index: 1; left: 0; top: 3px; }

    /* img */
    #homesection04 .homesection_imgwrap { float: right; width: 37.5%; padding: 0 10px; }
    
  /* section 5, publication */
  #homesection05 { }
    /* content */
    #homesection05 .homesection_wrap { float: right; width: 37.5%; padding: 0 10px; margin-right: 25%; }
      #homesection05 .homesection_text { width: 33.3333%; float: left; padding: 0 10px 0 0; box-sizing: border-box; }
      #homesection05 .homesection_btn { left: 37.5%; margin-left: 10px; }
      /* list */
      #homesection05 .homelist2 { float: right; width: 66.6666%; padding: 6px 0 0 10px; }
          #homesection05 .homelist2_itembox { padding-left: 70px; position: relative; }
            #homesection05 .homelist2_itemdate { position: absolute; z-index: 1; left: 0; top: 3px; }

    /* img */
    #homesection05 .homesection_imgwrap { float: left; width: 37.5%; padding: 0 10px; }
    
  /** service/index **/
  
  /* section 2, some content */
  #homesection_servicecontent { margin-left: 37.5%; margin-right: 25%; padding-left: 10px; }

  /* we cannot use odd and event, because we do not know the position of the item in parent element */
  /* also, this is IE8 compilant */
  
  .homesection_serviceodd { }
    /* content */
    .homesection_serviceodd .homesection_wrap { float: right; width: 37.5%; padding: 0 10px; margin-right: 25%; }
      .homesection_serviceodd .homesection_text { width: 66.6666%; float: left; }
      .homesection_serviceodd .homesection_btn { left: 37.5%; margin-left: 10px; }
    /* img */
    .homesection_serviceodd .homesection_imgwrap { float: left; width: 37.5%; padding: 0 10px; }
    
  .homesection_serviceeven { text-align: right; }
    /* content */
    .homesection_serviceeven .homesection_wrap { float: left; width: 37.5%; padding: 0 10px; text-align: right; }
      .homesection_serviceeven .homesection_text { width: 66.6666%; float: right; }
      .homesection_serviceeven .homesection_btn { right: 62.5%; margin-right: 10px; }
    /* img */
    .homesection_serviceeven .homesection_imgwrap { float: left; width: 50%; padding: 0 10px; margin-right: 12.5%; }
    

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

/* for screen smaller than 640px on height */
@media screen and (max-height: 640px)
{
  html.js #mainheader { position: absolute; }
  body.\:scroll .mainheadernav_link.\:current + .mainheadernav_sublist { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/* for screen smaller than 1280px */
@media screen and (max-width: 1280px)
{
  #mainwrap { width: auto; }
  html.js #mainheader { left: 20px; margin-left: 0; right: 20px; width: auto; }
}

/* for screen smaller than 1160px */
@media screen and (max-width: 1160px)
{
  /** change footer display **/
  #mainfooter {}
  #mainfootertext { float: none; width: auto; margin-bottom: 20px; }
  #mainfooteraddress { width: auto; box-sizing: border-box; padding-left: 197px; margin-left: 0; min-width: 570px; }
  #mainfooternav { width: auto; margin-left: 0; }
  
  /** reduce wrap **/
  .wrap1 { margin-left: 375px; }
  .wrap1_title { left: -375px; width: 355px; padding-right: 0; }
  #standardheader_wrap { padding-left: 375px; }
  
  /** standard layout **/
  #standardheader_wrap { padding-right: 40px; }
  .standardsection_contentwrap { margin-right: 12.5%; }
  /* list */
  .standardsection_list1wrap { margin-right: 12.5%; }
  /* service */
  .standardsection_servicecontentwrap { margin-right: 12.5%; }
    
  /** home layout **/
  /* homepage */
  #homesection03 .homesection_wrap { margin-right: 0; width: 50%; }
  #homesection04 .homesection_wrap { margin-left: 12.5%; width: 50%; }
  #homesection05 .homesection_wrap { margin-right: 12.5%; width: 50%; }
  /* service */
  #homesection_servicecontent { margin-right: 12.5%; }
  .homesection_serviceodd .homesection_wrap { margin-right: 12.5%; width: 50%; }
  /* contact */
  
}

/* for screen smaller than 1000px */
@media screen and (max-width: 1000px)
{
  /** review header and navigation **/
  /*html.js #mainheader { left: 0px; right: 0; padding-left: 20px; padding-right: 20px; }*/
  #mainwrap { position: relative; }
  #mainheader.\:subnav { margin-bottom: 20px; }
  #mainheader:after { content: ""; height: 1px; display: block; background-color: #d4d7dd; }
  
  #mainheadernav { position: static; }
  #mainheadernav:before { 
    content: ""; cursor: pointer; position: fixed; z-index: 4; top: 0; right: 0; left: 0; bottom: auto; min-height: 100vh; border: 0; background-color: #d4d7dd;
    opacity: 0;
    -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%);
    -webkit-transition: -webkit-transform 0s linear 200ms, opacity 200ms ease; -ms-transition: transform 0s linear 200ms, opacity 200ms ease; transition: transform 0s linear 200ms, opacity 200ms ease;
  }
  #mainheadernav:after { 
    content: ""; position: fixed; z-index: 5; top: 0; right: 0; bottom: auto; width: calc( 46% - 20px ); min-width: 320px; min-height: 100vh; border: 0; background-color: #fff;
    -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%);
    -webkit-transition: -webkit-transform 200ms ease; -ms-transition: transform 200ms ease; transition: transform 200ms ease;
  }
  /* nav trigger */
  #mainheadernav_title { 
    display: block; cursor: pointer; position: absolute; z-index: 7; top: 67px; right: -20px; height: 59px; width: 63px; text-indent: 63px; white-space: nowrap; overflow: hidden; 
  }
  #mainheadernav_title:before { 
    content: ""; position: absolute; top: 27px; left: 20px; z-index: 1;
    width: 23px; height: 3px; border-radius: 2px;
    background-color: #3a5179; box-shadow: 0 -7px 0 0 #3a5179, 0 7px 0 0 #3a5179;
    -webkit-transition: box-shadow 150ms ease 50ms; -ms-transition: box-shadow 150ms ease 50ms; transition: box-shadow 150ms ease 50ms;
  }
  /* nav display */
  #mainheadernav_list { 
    text-align: left; position: absolute; z-index: 6; top: 0; right: -20px; width: 46%; min-width: 320px; margin: 0; min-height: 100vh; box-sizing: border-box;
    background-color: #fff; padding: 141px 20px 20px; 
    -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%);
    -webkit-transition: -webkit-transform 200ms ease; -ms-transition: transform 200ms ease; transition: transform 200ms ease;
  }
  #mainheadernav_list:after { display: none; }
  /* open effect */
  #mainheadernav.\:open:before { 
    opacity: 0.8;
    -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);
    -webkit-transition: opacity 200ms ease; -ms-transition: opacity 200ms ease; transition: opacity 200ms ease;
  }
  #mainheadernav.\:open:after { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
  #mainheadernav.\:open > #mainheadernav_title:before { box-shadow: 0 0 0 0 #3a5179, 0 0 0 0 #3a5179; }
  #mainheadernav.\:open > #mainheadernav_list { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
  
  
    .mainheadernav_item { display: block; position: relative; z-index: 1; border-bottom: 1px #d4d7dd solid; }
    .mainheadernav_item:first-child { border-top: 1px #d4d7dd solid; }
    .mainheadernav_link { background-color: transparent; padding: 5px 0 7px; }
    html.mac .mainheadernav_link { padding: 6px 0 5px; }
    .mainheadernav_sublist { 
      font-size: 14px; padding: 5px 0 7px 1em; height: auto; text-align: left; position: relative; top: -5px; background-color: transparent; 
      -webkit-transform: none !important; -ms-transform: none !important; transform: none !important;
    }
    .mainheadernav_sublist:after { display: none; }
      .mainheadernav_subitem { display: block; font-style: italic; font-family: Georgia, Times, 'Times New Roman', serif; }
      .mainheadernav_subitem:before { content : "_"; position: absolute; left: 0; z-index: 1; padding: 2px 0; }
      .mainheadernav_sublink { background-color: transparent; padding: 2px 0; }

  
  /** change form display **/
  .mainform_wrap { padding-right: 0; }
  
  /** standard layout **/
  .standardsection_contentwrap { margin-right: 0; }
  /* list */
  .standardsection_list1wrap { margin-right: 0; }
  .standardsection_list2wrap { margin-right: 0; }
  /* service */
  .standardsection_servicewrap { margin-right: 0; }
  .standardsection_servicecontentwrap { margin-right: 0; }
    
  /** home layout **/
  /* homepage */
  #homesection02 { margin-right: 0; }
  #homesection04 .homesection_wrap { margin-left: 0; }
  #homesection04 .homesection_imgwrap { width: 50%; }
  #homesection04 .homesection_btn { right: 50%; }
  #homesection05 .homesection_wrap { margin-right: 0; }
  #homesection05 .homesection_imgwrap { width: 50%; }
  #homesection05 .homesection_btn { left: 50%; }
  /* service */
  #homesection_servicecontent { margin-right: 0; margin-left: 50%; }
  .homesection_serviceodd .homesection_wrap { margin-right: 0; }
  .homesection_serviceodd .homesection_imgwrap { width: 50%; }
  .homesection_serviceodd .homesection_btn { left: 50%; }
  .homesection_serviceeven .homesection_imgwrap { margin-right: 0; }
  .homesection_serviceeven .homesection_wrap { width: 50%; }
  .homesection_serviceeven .homesection_btn { right: 50%; }
  /* contact */
  
}

/* for screen smaller than 940px */
@media screen and (max-width: 940px)
{
  /** no more wrap **/
  .wrap1 { margin-left: 0; }
  .wrap1_title { left: 0; top: 0; width: auto; height: auto; padding-right: 0; margin: 30px 0 20px; }
  
  /* adjust special titles */
  .mainform_title { position: relative; margin-top: 0; }
  .standardsection_servicetitle { position: relative; margin-top: 0 !important; }
  
  /** standard layout **/
  #standardheader_wrap { padding-left: 40px; }
    #standardheader_wrapback { margin-bottom: 40px; }
  
  /** reduce padding on mainform **/
  .mainform { padding-bottom: 0; margin-bottom: -20px; }
  
  /** homepage **/
  #homesection03 .homesection_text { width: auto; }
  #homesection03 .homelist2 { margin-top: 20px; margin-bottom: 0; }
  #homesection03 .homelist2_item { width: 50%; margin-bottom: 20px; }
  #homesection04 .homesection_text { float: none; width: auto; padding-right: 0; }
  #homesection04 .homelist2 { float: none; width: auto; padding-left: 0; padding-top: 0; }
  #homesection05 .homesection_text { float: none; width: auto; padding-right: 0; }
  #homesection05 .homelist2 { float: none; width: auto; padding-left: 0; padding-top: 0; }
}

/* for screen smaller than 740px */
@media screen and (max-width: 740px)
{
  /** mobile display **/
  /* header */
  #mainheader { margin-bottom: 0 !important; }
  #mainheader:after { display: none; }
    #mainheaderlogo { margin: 19px 0; }
      #mainheaderlogo_img { width: auto; height: 62px }
    #mainheaderlang { top: 10px; }
    #mainheadernav_title { top: 33px; }
    #mainheadernav_list { padding-top: 100px; }
  /* footer */
    #mainfooterlogo { top: 45px; }
      #mainfooterlogo_img { width: auto; height: 62px }
    #mainfootertext { margin-bottom: 30px; }
    #mainfooteraddress { padding-left: 0; min-width: 0; width: 66.6666%; }
    
  /** standard layout **/
  /* items by row */
  .servicelist1_item { width: 33.3333%; }
  
  /** homepage **/
  /* items by row and font */
  .homelist1_item { width: 50%; font-size: 16px; font-weight: bold; }
    .homelist1_itembox { min-height: 60px; }
    .homelist1_itemalt > .font1 { font-size: 14px; }
      .homelist1_itemlabel { width: auto; max-width: 210px; }
  /* spacing */
  .homesection { margin-top: 50px; margin-bottom: 50px; }
  #homesection02 { margin-left: 0; padding-left: 0; }
}

/* for screen smaller than 620px */
@media screen and (max-width: 620px)
{
  /** mobile footer **/
    #mainfooterlogo { position: relative; top: -10px; }
    #mainfootertext { padding-left: 0; white-space: normal; }
      #mainfootertext > br { display: none; }
    #mainfooteraddress { width: 100%; }
    #mainfooternav { width: 100%; margin-top: 30px; }
  
  /** adjust mainform **/
  #mainform01_fieldset02 > label { width: 33.3333%; }
  #mainform01_fieldset02 > .formrow { width: 33.3333%; }
  
  /** standard layout **/
  .standardsection { margin: 20px 0; }
  .standardsection_servicecontentwrap { -webkit-columns: 1; -moz-columns: 1; columns: 1; }
  
  /** homepage layout **/
  /* remove picture */
  .homesection_imgwrap { display: none; }
  .homesection_wrap { width: 100% !important; }
  .homesection_btn { position: relative; bottom: 0; left: 0 !important; right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  /* service */
  #homesection_servicecontent { margin-left: 0; padding-left: 0; }
  .homesection_serviceodd .homesection_text { float: none; width: auto; }
  .homesection_serviceeven .homesection_wrap { text-align: left; }
  .homesection_serviceeven .homesection_text { float: none; width: auto; }
  
  /** main titles **/
  #standardheader_bannertitle, #homeheader_bannertitle { font-size: 45px; }
  h1, .h1 { font-size: 30px; }
  #standardheader_wrap { padding-bottom: 24px; }
  #standardheader_wrapback { margin-bottom: 20px; }
}

/* for screen smaller than 470px */
@media screen and (max-width: 470px)
{
  /** banners **/
  #standardheader_banner, #homeheader_banner { height: 175px; }
  #standardheader_bannerimg, #homeheader_bannerimg { height: 175px; width: 434px; position: absolute; top: 0; left: 50%; margin-left: -217px; }
  
  #standardheader_wrap { padding-left: 20px; padding-right: 20px; }
  
  
  /** adjust mainform **/
  #mainform01_fieldset02 > label { width: 100%; padding-top: 0; }
  #mainform01_fieldset02 > .formrow { width: 50%; }
  
  /** items by row **/
  .servicelist1_item { width: 50%; min-height: 0; }
  .list2_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)
{
  
}

    

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