/**
 * 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: roboto, sans-serif; } /* default font family */

.cl0 { color: #575757; } /* default color */
.cl1 { color: #0e3350; } /* secondary color */
.cl2 { color: #c9c9c9; } /* ... */

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

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



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

/** buttons **/
button, .btn { white-space: nowrap; border: 0; display: inline-block; text-decoration: none !important; font-size: 15px; line-height: 1.231; color: #fff !important; background-color: #0e3350; padding: 16px 40px; }
button:hover, .btn:hover, button:focus, .btn:focus { background-color: #144871; }
button:active, .btn:active { background-color: #00223d; }
button[data-icon]:after, .btn[data-icon]:after { content: ""; width: 12px; height: 12px; background-position: -72px -20px; margin-left: 20px; vertical-align: -1px; }


/** pagination **/
.pagenav { font-size: 15px; position: relative; padding: 0 160px; margin-top: 55px; text-align: center; }
  /* list */
  .pagenav_list {}
    /* item */
    .pagenav_item { display: inline; padding: 0 10px; }
      /* link */
      .pagenav_link {}
      /* hover */
      .pagenav_link:hover {}
      /* active/focus */
      .pagenav_link:active, .pagenav_link:focus {}
      /* current, not <a> */
      .pagenav_link.\:current { border-bottom: 1px solid; }
      /* special links */
      .pagenav_linkfirst {} /* go to first page */
      .pagenav_linkprev { position: absolute; left: 0; top: auto; z-index: 1; }  /* go to previous page */
      .pagenav_linkprev:before { margin-right: 35px; vertical-align: -1px; }
      .pagenav_linknext { position: absolute; right: 0; top: auto; z-index: 1; }  /* go to next page */
      .pagenav_linknext:after { margin-left: 35px; vertical-align: -1px; }
      .pagenav_linklast {}  /* go to last page */
      
      
/** scrollable **/      
.scrollable_prev, .scrollable_next { 
  position: absolute; top: 0; bottom: 0; z-index: 3; width: 15%; min-width: 50px; cursor: pointer; 
  -webkit-transition: .5s -webkit-transform cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s transform cubic-bezier(0.19,1,0.22,1); transition: .5s transform cubic-bezier(0.19,1,0.22,1);
}
.scrollable_prev:before, .scrollable_next:after { position: absolute; top: 50%; left: 50%; z-index: 2; margin: -10px 0 0 -10px; }
.scrollable_prev { left: 0; -webkit-transform: translateX( -100% ); -ms-transform: translateX( -100% ); transform: translateX( -100% ); }
.scrollable_prev:before {}
.scrollable_next { right: 0; -webkit-transform: translateX( 100% ); -ms-transform: translateX( 100% ); transform: translateX( 100% ); }
.scrollable_next:after {}
/* effect */
:hover > .scrollable_prev, :hover > .scrollable_next { -webkit-transform: none; -ms-transform: none; transform: none; }
/* disabled */
.scrollable_prev.\:disabled, .scrollable_next.\:disabled { display: none !important; }


/** overlay **/
.overlay { width: 100%; height: 100%; position: relative; }
  .overlay_close { position: absolute; top: 0; right: 1%; z-index: 4; width: 100px; height: 100px; cursor: pointer; }
  .overlay_close:before, .overlay_close:after { content: "";
    position: absolute; top: 50%; left: 50%; z-index: 1; margin: -1px 0 0 -11px; height: 2px; width: 22px; background-color: #fff; 
  }
  .overlay_close:before { -webkit-transform: rotate( 45deg ); -ms-transform: rotate( 45deg ); transform: rotate( 45deg ); }
  .overlay_close:after { -webkit-transform: rotate( -45deg ); -ms-transform: rotate( -45deg ); transform: rotate( -45deg ); }
  
  .overlay_in { width: 100%; height: 100%; }
    .overlay_in > .scrollable_prev, .overlay_in > .scrollable_next { background-color: transparent; }

  .listgallery2_scrollable { overflow-x: auto; overflow-y: hidden; width: 100vw; height: 100vh; }
    .listgallery2 { white-space: nowrap; }
      .listgallery2_item { display: inline-table; width: 100vw; height: 100vh; }
        .listgallery2_itemwrap { display: table-cell; text-align: center; vertical-align: middle; }
          .listgallery2_itemimgout { display: inline-block; position: relative; }
            .listgallery2_itemimg { max-width: 86vw; max-height: 88vh; }
            .listgallery2_itemcopyright { position: absolute; right: 0; bottom: 0; z-index: 1; font-size: 12px; font-style: normal; padding: 3px 12px; background-color: rgba(0,0,0,.67); color: #fff; }
  
/* loading effect */
.overlay.\:loading { background: url(images/loader_60x64_fff_000.gif) 50% 50% no-repeat; }
  .overlay_close, .overlay_in { -webkit-transition: .5s opacity cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s opacity cubic-bezier(0.19,1,0.22,1); transition: .5s opacity cubic-bezier(0.19,1,0.22,1); }
  .overlay.\:loading > .overlay_close, .overlay.\:loading > .overlay_in { opacity: 0; }
  
  
  
/*** 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 { margin: -40px 0; }
    /* box around item data */
    .list1_itembox { position: relative; z-index: 1; overflow: hidden; padding: 40px 0; }
    .list1_itembox:hover, .list1_itembox:focus, .list1_itembox:active { z-index: 2; }
      .list1_itemimg { 
        position: absolute; z-index: 1; top: 50%; left: 640px; opacity: 0; max-width: none; 
        -webkit-transform: translateX( 100px ); -ms-transform: translateX( 100px ); transform: translateX( 100px );
        -webkit-transition: .5s -webkit-transform cubic-bezier(0.19,1,0.22,1), .5s opacity cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s transform cubic-bezier(0.19,1,0.22,1), .5s opacity cubic-bezier(0.19,1,0.22,1); transition: .5s transform cubic-bezier(0.19,1,0.22,1), .5s opacity cubic-bezier(0.19,1,0.22,1);
      }
      /* item content */
      .list1_itemcontent { padding: 25px 60px 25px 30px; position: relative; z-index: 2; box-sizing: border-box; max-width: 540px; overflow: hidden;  }
      .list1_itemcontent:after { 
        position: absolute; right: 30px; top: 50%; z-index: 1; margin-top: -6px; 
        -webkit-transition: .5s -webkit-transform cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s transform cubic-bezier(0.19,1,0.22,1); transition: .5s transform cubic-bezier(0.19,1,0.22,1);
      }
        .list1_itembg { 
          background-color: #0e3350; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; 
          -webkit-transform: translateX( calc( 2px - 100% ) ); -ms-transform: translateX( calc( 2px - 100% ) ); transform: translateX( calc( 2px - 100% ) );
          -webkit-transition: .5s -webkit-transform cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s transform cubic-bezier(0.19,1,0.22,1); transition: .5s transform cubic-bezier(0.19,1,0.22,1);
        }
        .list1_itembg:after { position: absolute; right: 30px; top: 50%; z-index: 1; margin-top: -6px; }
        .list1_itemtitle { 
          font-size: 20px; margin: 0;
          -webkit-transition: .5s color cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s color cubic-bezier(0.19,1,0.22,1); transition: .5s color cubic-bezier(0.19,1,0.22,1);
        }
        .list1_itemdate { 
          font-size: 14px; display: block; margin-top: 10px; 
          -webkit-transition: .5s color cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s color cubic-bezier(0.19,1,0.22,1); transition: .5s color cubic-bezier(0.19,1,0.22,1);
        }
    /* effect */
    .list1_itembox:hover .list1_itemimg, .list1_itembox:focus .list1_itemimg, .list1_itembox:active .list1_itemimg { 
      -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1; 
    }
    .list1_itembox:hover .list1_itemcontent:after, .list1_itembox:focus .list1_itemcontent:after, .list1_itembox:active .list1_itemcontent:after { 
      -webkit-transform: translateX(540px); -ms-transform: translateX(540px); transform: translateX(540px);
    }
    .list1_itembox:hover .list1_itembg, .list1_itembox:focus .list1_itembg, .list1_itembox:active .list1_itembg { 
      -webkit-transform: none; -ms-transform: none; transform: none;
    }
    .list1_itembox:hover .list1_itemtitle, .list1_itembox:focus .list1_itemtitle, .list1_itembox:active .list1_itemtitle { color: #fff; }
    .list1_itembox:hover .list1_itemdate, .list1_itembox:focus .list1_itemdate, .list1_itembox:active .list1_itemdate { color: #fff; }
      
      
/** list2, used on product/brand **/
.list2_title { margin: 0; }
.list2 { margin: 0 0 -50px; 
  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; 
}
  .list2_item { width: calc( 50% - 20px ); box-sizing: border-box; position: relative; padding: 50px 0 50px 230px; }
    .list2_itemimg { position: absolute; z-index: 1; top: 50%; left: 30px; margin-top: -55px; width: 170px; height: 110px; }
    .list2_itemtitle { margin: 0 0 10px; }
    .list2_itemdesc { font-style: normal; font-size: 14px; }
    .list2_itemlink { display: inline-block; margin-top: 20px; text-decoration: underline; }
    /* effect */
    .list2_itemlink:hover, .list2_itemlink:focus, .list2_itemlink:active { text-decoration: none; }
      
      
/** list3, used on page/company **/
.list3 { margin: -15px 0; }
  .list3_item { margin: 15px 0; position: relative; min-height: 50px; padding: 7px 0 7px 60px; box-sizing: border-box; }
    .list3_itemimg { position: absolute; z-index: 1; top: 50%; left: 0; margin-top: -25px; }
     
    
/** list4, used on product/list **/
.list4 { margin: -50px 0; 
  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; 
}
  .list4_item { width: calc( 50% - 60px ); border: 0 #d4dce3 solid; padding: 50px 0 20px; }
  .list4_item + .list4_item + .list4_item { border-top-width: 1px; }
    .list4_itemtitle { margin-top: 0; }
    .list4_itemtext {}
    
/** list5, used on gallery/index **/
.list5 { margin: -10px; }
  .list5_item { width: 33.3333%; display: inline-block; vertical-align: top; }
    .list5_itembox { margin: 10px; position: relative; overflow: hidden; }
    .list5_itembox:before {
      content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background-color: #233969; opacity: 0; mix-blend-mode: multiply; 
      -webkit-transition: .5s opacity cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s opacity cubic-bezier(0.19,1,0.22,1); transition: .5s opacity cubic-bezier(0.19,1,0.22,1);
    }
      .list5_itemimg { max-width: none; width: 100%; }
      .list5_itemtitle { 
        margin: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; padding: 40px; color: #fff; text-align: center;
        display: -ms-flexbox; display: -webkit-flex; display: flex; 
        -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; 
        -ms-align-items: center; -webkit-align-items: center; align-items: center;
        -ms-justify-content: center; -webkit-justify-content: center; justify-content: center;
        -webkit-transform: translateY( 100% ); -ms-transform: translateY( 100% ); transform: translateY( 100% );
        -webkit-transition: .5s -webkit-transform cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s transform cubic-bezier(0.19,1,0.22,1); transition: .5s transform cubic-bezier(0.19,1,0.22,1); 
      }
      .list5_itemcopyright { position: absolute; bottom: 0; right: 0; z-index: 1; font-size: 12px; font-style: normal; padding: 3px 12px; background-color: rgba(0,0,0,.67); color: #fff; }
    /* effect */
    .list5_itembox:hover:before, .list5_itembox:focus:before, .list5_itembox:active:before { opacity: .77; }
    .list5_itembox:hover > .list5_itemtitle, .list5_itembox:focus > .list5_itemtitle, .list5_itembox:active > .list5_itemtitle { -webkit-transform: none; -ms-transform: none; transform: none; }



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


/** header **/
#mainheader { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 155px; }
  #mainheader_wrap { }

  /* logo */
  #mainheaderlogo { position: absolute; z-index: 2; top: 35px; left: 40px; }
    #mainheaderlogo_img { max-width: none; } /* make sure IE8 will display it */
    
  /* nav */
  #mainheadernav { position: absolute; z-index: 1; top: 35px; right: 40px; }
    #mainheadernav_title { display: none; } /* responsive purpose */
    #mainheadernav_list { margin-right: -20px; white-space: nowrap; }
      .mainheadernav_item { display: inline-block; vertical-align: middle; font-size: 15px; }
        .mainheadernav_link { color: #53718a; display: inline-block; padding: 26px 20px; text-decoration: none !important; }
        /* hover/active/focus */
        .mainheadernav_link:hover, .mainheadernav_link:focus, .mainheadernav_link:active { color: #0e3350; }
        /* current */
        .mainheadernav_link.\:current { color: #0e3350; font-weight: bold; }
        
        /* variations with banner */
        #mainheader.\:banner .mainheadernav_link { color: #e7e6f2; }
        /* hover/active/focus */
        #mainheader.\:banner .mainheadernav_link:hover, #mainheader.\:banner .mainheadernav_link:focus, #mainheader.\:banner .mainheadernav_link:active { color: #fff; }
        /* current */
        #mainheader.\:banner .mainheadernav_link.\:current { color: #fff; }
        
  /* lang */
  #mainheaderlang {}
    #mainheaderlang_list {}
      .mainheaderlang_item {}
        .mainheaderlang_link {}
          .mainheaderlang_link > abbr { cursor: pointer; }
        /* hover */
        .mainheaderlang_link:hover {}
        /* active/focus */
        .mainheaderlang_link:focus, .mainheaderlang_link:active {}
        /* current */
        .mainheaderlang_link.\:current {}
        
  
/** wrapper **/
/* set default background-color */
body { background-color: #fff; /* #efefef; */ } 
#mainwrap { max-width: 1280px; margin: 0 auto; position: relative; overflow: hidden; background-color: #fff; }
body.sfmod_home > #mainwrap { max-width: none; background: url(images/bg_mainwrap.png) 50% top repeat-y; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; position: relative; }
  
/** content **/
/* override it for content */
#maincontent { /* display: inline-block; width: 100%; */ margin-top: 155px; margin-bottom: 100px; } /* avoid margin merge on content */
        

/** footer **/
#mainfooter {}

  /* logo list */
  #mainfooterlist1 { 
    border-top: 1px #d4dce3 solid; border-bottom: 1px #d4dce3 solid; padding: 40px 0; 
    display: -ms-flexbox; display: -webkit-flex; display: flex; 
    -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; 
    -ms-align-items: center; -webkit-align-items: center; align-items: center; 
  }
    .mainfooterlist1_item { width: 25%; text-align: center; position: relative; margin: auto 0; }
    .mainfooterlist1_item + .mainfooterlist1_item:before { content: ""; position: absolute; z-index: 1; left: 0; top: 50%; margin-top: -45px; width: 1px; height: 90px; background-color: #d4dce3; }
      .mainfooterlist1_itemimg { vertical-align: middle; max-width: 75%; }
      
  /* address */
  #mainfooteraddress { float: left; max-width: 50%; padding: 40px 0; font-size: 12px; }
    #mainfooteraddress > big { font-size: 116.6666%; }

  /* nav */
  #mainfooternav { float: right; max-width: 50%; padding: 40px 0; font-size: 12px; text-align: right; }
    #mainfooternav_list { color: #c9c9c9; }
      .mainfooternav_item { margin: 7px 0; }
        /* link */
        .mainfooternav_link { color: #c9c9c9; text-decoration: none !important; }
        /* hover/active/focus */
        .mainfooternav_link:hover, .mainfooternav_link:focus, .mainfooternav_link:active { color: #575757; }
        /* current */
        .mainfooternav_link.\:current { color: #575757; font-weight: bold; }
        /* btn */
        .mainfooternav_btn { margin: -10px 0 10px; font-size: 12px; padding-top: 10px; padding-bottom: 10px; }
        
  /* 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 {}

  /* nav */
  #standardnav { margin-bottom: 45px; }
    #standardnav_wrap {}
      #standardnav_list { -webkit-columns: 2; -moz-columns: 2; columns: 2; -webkit-column-gap: 80px; -moz-column-gap: 80px; column-gap: 80px; }
        .standardnav_item { border-bottom: 1px #d4dce3 solid; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
          .standardnav_link { font-size: 14px; display: block; padding: 9px 0; color: #575757; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
          /* effect */
          .standardnav_link:hover, .standardnav_link:focus, .standardnav_link:active { color: #0e3350; }
          .standardnav_link.\:current { color: #0e3350; font-weight: bold; }
          .standardnav_link[data-icon] { position: relative; padding-left: 30px; }
          .standardnav_link[data-icon]:before { position: absolute; z-index: 1; left: 0; top: 5px; }
  
  /* header */
  #standardheader { position: relative; }
    #standardheader_img { width: calc( 100% - ( ( 100% - 1120px ) / 2 ) ); max-width: calc( 100% - 40px ); }
    #standardheader_title { margin: 0 80px 0 0; max-width: 540px; box-sizing: border-box; padding: 50px 80px 50px 0; position: relative; color: #fff; font-size: 30px; }
    #standardheader_title:after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: -80px; background-color: #0e3350; opacity: 1; mix-blend-mode: multiply; }
      #standardheader_titlein { position: relative; z-index: 2; display: block; }
      #standardheader_titlein > small { font-size: 73.3333%; display: inline-block; margin-top: 5px; }
      /* with icon */
      #standardheader_titlein[data-icon] { padding-left: 75px; }
      #standardheader_titlein[data-icon]:before { position: absolute; top: 50%; left: 0; z-index: 1; margin-top: -29px; }
    /* with picture */
    #standardheader_img + #standardheader_wrap { position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; }
      #standardheader_img + #standardheader_wrap > #standardheader_title:after { background-color: #233969; opacity: .77; }
    
  /* section */
  .standardsection { margin: 100px 0; }
  
    .standardsection_gallery { overflow-y: hidden; overflow-x: auto; position: relative; width: 100%; max-width: 580px; box-sizing: border-box; }
      html.js .standardsection_gallery, html.js .listgallery1_scrollable { overflow: hidden; }
        .listgallery1 { white-space: nowrap; position: relative; z-index: 1; }
          .listgallery1_item { display: inline-block; vertical-align: top; width: 100%; position: relative; }
            .listgallery1_itemimg { width: 100%; max-width: none; }
            .listgallery1_itemcopyright { position: absolute; right: 0; bottom: 0; z-index: 1; font-size: 12px; font-style: normal; padding: 3px 12px; background-color: rgba(0,0,0,.67); color: #fff; }
          .listgallery1_link { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; color: transparent; }
      .standardsection_gallery > .scrollable_prev, .standardsection_gallery > .scrollable_next { background-color: rgba(0,0,0,.67); width: 50px; }
    .standardsection_content {}
      .standardsection_content > :first-child { margin-top: 0; }
      .standardsection_content > :last-child { margin-bottom: 0; }
      
    .standardsection:nth-child(even) .standardsection_gallery { float: right; margin-left: 80px; }
    .standardsection:nth-child(even) .standardsection_gallery + .standardsection_content { float: left; width: calc( 100% - 580px - 80px ); }
    .standardsection:nth-child(odd) .standardsection_gallery { float: left; margin-right: 80px; }
    .standardsection:nth-child(odd) .standardsection_gallery + .standardsection_content { float: right; width: calc( 100% - 580px - 80px ); }
    .standardsection_gallery:only-child { float: none !important; margin-left: auto !important; margin-right: auto !important; }

    /* CK template, pure bullshit */
    .template01 { -webkit-columns: 2; -moz-columns: 2; columns: 2; -webkit-column-gap: 80px; -moz-column-gap: 80px; column-gap: 80px; }
      .template01 > :first-child { margin-top: 0; }
      .template01 > :last-child { margin-bottom: 0; }
      .template01 > ul > li { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
      .template01 > ul:first-child > li:first-child { margin-top: 0; }
      .template01 > ul:last-child > li:last-child  { margin-bottom: 0; }
      .template01 > ul:only-child { padding-left: 0; }
      
      
  /** company **/

    .standardsection_title { position: relative; text-transform: uppercase; margin: 0 0 60px; padding: 75px 0 0 40px; }
    .standardsection_title:before { content: ""; position: absolute; z-index: 1; bottom: 10px; top: 0; left: 0; width: 2px; background-color: #0e3350; }
      .standardsection_title > small { font-size: 48%; display: inline-block; text-transform: none; }
      
  .standardbanner {}
    .standardbanner_img { width: calc( 100% - ( ( 100% - 1120px ) / 2 ) ); max-width: calc( 100% - 40px ); }
    
  #standardsection_company00 { margin-top: 50px; margin-bottom: 50px; }
  #standardsection_company01 .standardsection_content { margin-top: -50px; }
    #standardsection_company01_imgalt { display: none; } /* responsive purpose */
  .standardbanner + #standardsection_company02 .standardsection_content { margin-top: -140px; }
  #standardsection_company03 > .wrap { max-width: none; padding: 0; }
    #standardsection_company03 .standardsection_title { max-width: 1200px; box-sizing: border-box; margin-right: auto; margin-left: auto; padding-left: 80px; padding-right: 40px; }
    #standardsection_company03 .standardsection_title:before { left: 40px; }
  
  /** list for history **/
  .listyear1_out { position: relative; margin: 0 80px; }
  .listyear1_out:before { content: ""; position: absolute; z-index: 1; left: -40px; right: -40px; width: calc( 100% + 80px ); max-width: 1120px; margin: 0 auto; top: 53px; height: 1px; background-color: #d4dce3; }
    .listyear1_scrollable { overflow-y: hidden; overflow-x: auto; }
    .listyear1 { white-space: nowrap; position: relative; z-index: 2; }
      .listyear1_item { white-space: normal; position: relative; display: inline-block; vertical-align: top; width: 25%; box-sizing: border-box; padding: 0 10px; font-size: 14px; text-align: center; }
      .listyear1_item:after { content: ""; position: absolute; left: 50%; top: 38px; margin-left: -15px; z-index: 1; border-radius: 100%; border: 7px #fff solid; background-color: #0e3350; width: 16px; height: 16px; }
        .listyear1_itemlabel { display: block; margin: 0 0 50px; }
    /* scrollable */
    
    /* effect */
    .listyear1_outout:hover > .listyear1_out > .scrollable_prev, .listyear1_outout:hover > .listyear1_out > .scrollable_next { -webkit-transform: none; -ms-transform: none; transform: none; }
    .listyear1_out > .scrollable_prev { left: -80px; }
    .listyear1_out > .scrollable_next { right: -80px; }
    .listyear1_out > .scrollable_prev:before { margin: 0; left: 30px; top: 44px; }
    .listyear1_out > .scrollable_next:after { margin: 0; left: auto; right: 30px; top: 44px; }
    .listyear1_out > .scrollable_prev:after, .listyear1_out > .scrollable_next:before { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; background: #fff;  }
    .listyear1_out > .scrollable_prev:after { left: 0; }
    .listyear1_out > .scrollable_next:before { right: 0; }
        
  /** gallery **/
  #standardsection_gallery00 { margin-top: 50px; margin-bottom: 50px; }
  #standardsection_gallery01 { margin-top: 50px; }
  
  
  /** contact **/
  #standardsection_contact00 { margin-top: 50px; margin-bottom: 50px; }
  #standardsection_contact01 { margin-top: 50px; }
    #standardsection_contact01_col01 { float: left; width: calc(50% - 40px); }
    #standardsection_contact01_col02 { float: right; width: calc(50% - 40px); }
      #standardsection_contact01_col02_text { -webkit-columns: 2; -moz-columns: 2; columns: 2; margin: 0 0 50px; }
      
      #standardsection_contact01_col02_table { width: 100%; margin: 0 0 50px; }
      #standardsection_contact01_col02_table > thead > * > th { font-size: 120%; padding-bottom: 15px; }
      #standardsection_contact01_col02_table > tfoot > * > td { padding-top: 15px; }
      #standardsection_contact01_col02_table > thead > * > th + th { text-align: right; }
      #standardsection_contact01_col02_table > tbody > * > td { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      
    html.js .standardsection_gmap { min-height: 375px; }
    html.js .standardsection_gmap > img { visibility: hidden; }
    
  /** product01 **/
  #standardsection_product01 > .standardsection_wrap {
    display: -ms-flexbox; display: -webkit-flex; display: flex; 
    -ms-justify-content: space-beetween; -webkit-justify-content: space-beetween; justify-content: space-beetween; 
    -ms-align-items: flex-start; -webkit-align-items: flex-start; align-items: flex-start;
  }
    #standardsection_product01_part1 { width: 65.625%; }
      #standardsection_product01_interactive { position: relative; z-index: 2; }
      #standardsection_product01_interactive > .standardsection_product01_img { width: 100%; }
    
        .standardsection_product01_list { counter-reset: product01_list; }
          .standardsection_product01_item { 
            counter-increment: product01_list; position: relative; box-sizing: border-box; background-color: rgba( 35 , 57 , 105 , .77 ); 
            padding: 13px 20px 13px 60px; color: #fff; min-height: 62px; 
            -webkit-transition: .5s background-color cubic-bezier(0.19,1,0.22,1), .5s color cubic-bezier(0.19,1,0.22,1); 
            -ms-transition: .5s background-color cubic-bezier(0.19,1,0.22,1), .5s color cubic-bezier(0.19,1,0.22,1); 
            transition: .5s background-color cubic-bezier(0.19,1,0.22,1), .5s color cubic-bezier(0.19,1,0.22,1);
          }
            .standardsection_product01_itemmarker { position: absolute; z-index: 1; top: 15px; left: 15px; width: 30px; height: 30px; text-align: center; line-height: 30px; font-size: 20px; overflow: hidden; border: 1px #fff solid; background-color: #0e3350; border-radius: 2px; }
            .standardsection_product01_itemmarker:before { content: ""; background-color: #fff; width: 2px; height: 14px; position: absolute; z-index: 1; left: 50%; top: 50%; margin: -7px 0 0 -1px; }
            .standardsection_product01_itemmarker:after { content: ""; background-color: #fff; width: 14px; height: 2px; position: absolute; z-index: 1; left: 50%; top: 50%; margin: -1px 0 0 -7px; }

          /* on right alternative */
          .standardsection_product01_item.\:alt { padding: 13px 60px 13px 20px; }  
            .standardsection_product01_item.\:alt > .standardsection_product01_itemmarker { left: auto; right: 15px; }
            
      #standardsection_product01_interactive .standardsection_product01_item { position: absolute; z-index: 1; width: 300px; background-color: transparent; color: transparent; clip: rect( 15px 47px 47px 15px ); }
      #standardsection_product01_interactive .standardsection_product01_item.\:alt { clip: rect( 15px 285px 47px 238px ); }
        
    #standardsection_product01_part2 { text-align: center; width: 34.375%; }
  
  /* with JS */
  html.js #standardsection_product01 > .standardsection_wrap { -ms-align-items: center; -webkit-align-items: center; align-items: center; }
    html.js #standardsection_product01_static { display: none; } /* responsive purpose */
    
      html.js #standardsection_product01_interactive .standardsection_product01_itemmarker { cursor: pointer; }
      #standardsection_product01_interactive .standardsection_product01_item.\:open { z-index: 2; clip: auto; color: #fff; background-color: rgba( 35 , 57 , 105 , .77 ); }
  
  
/** home layout **/
#homelayout {}

  /* banner */
  #homeheader { margin-top: -155px; position: relative; z-index: 1; }
    #homeheader_deco { position: absolute; z-index: 3; bottom: 20%; left: 29.6875%; width: 44px; height: 44px; background-color: rgba(35,57,105,.57); }
    #homeheader_deco:before { content: ""; position: absolute; z-index: 1; bottom: -1px; right: -1px; width: 270px; height: 270px; border: 1px #fff solid; }
    #homeheader_deco:after { content: ""; position: absolute; z-index: 1; top: -1px; left: -1px; width: 90px; height: 90px; border: 1px #fff solid; }
    #listbanner1_scrollable { overflow-y: hidden; overflow-x: auto; position: relative; }
    html.js #listbanner1_scrollable { overflow: hidden; }
      #listbanner1 { white-space: nowrap; position: relative; z-index: 1; }
        .listbanner1_item { display: inline-block; vertical-align: top; width: 100%; position: relative; }
        .listbanner1_item:before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 260px; max-height: 100%;  
          /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,0+100;Neutral+Density */
          background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
          background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
          background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
          background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
        }
          .listbanner1_itemimg { max-width: none; width: 100%; position: relative; z-index: 1; }
    #homeheader > .scrollable_prev, #homeheader .scrollable_next { background-color: transparent; }
  
  .homesection {}
    .homesection_title { font-size: 24px; color: #0e3350; margin: 60px 0; }
    
    /* products, not used only on homepage, sry */
    .listhome1 { margin: -20px; }
      .listhome1_item { display: inline-block; vertical-align: top; width: 33.3333%; padding: 20px; box-sizing: border-box; }
        .listhome1_itembox { position: relative; }
        .listhome1_itembox:before {
          content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-color: #000; opacity: .37; mix-blend-mode: multiply; 
          -webkit-transition: .5s background-color cubic-bezier(0.19,1,0.22,1), .5s opacity cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s background-color cubic-bezier(0.19,1,0.22,1), .5s opacity cubic-bezier(0.19,1,0.22,1); transition: .5s background-color cubic-bezier(0.19,1,0.22,1), .5s opacity cubic-bezier(0.19,1,0.22,1);
        }
        a.listhome1_itembox:hover:before, .listhome1_itembox:focus:before, .listhome1_itembox:active:before { background-color: #233969; opacity: .77; }
          .listhome1_itemimg { width: 100%; max-width: none; }
          .listhome1_itemtitle { 
            position: absolute; top: 0; left: 30px; right: 30px; bottom: 0; margin: 0; z-index: 2; text-align: center; color: #fff; 
            display: -ms-flexbox; display: -webkit-flex; display: flex; 
            -ms-justify-content: center; -webkit-justify-content: center; justify-content: center; 
            -ms-align-items: center; -webkit-align-items: center; align-items: center; 
          }
    
    /* news */
    .listhome2 { margin: -10px; }
      .listhome2_item { display: inline-block; vertical-align: top; width: 25%; padding: 10px; box-sizing: border-box; }
        .listhome2_itembox { position: relative; overflow: hidden; }
          /* img */
          .listhome2_itemimgout { display: block; position: relative; margin-bottom: 1px; }
          .listhome2_itemimgout:before { 
            content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; background: #233969; opacity: 0;
            -webkit-transition: .5s opacity cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s opacity cubic-bezier(0.19,1,0.22,1); transition: .5s opacity cubic-bezier(0.19,1,0.22,1);
          }
          .listhome2_itemimgout:after { 
            position: absolute; top: 50%; left: 50%; z-index: 2; margin: -10px 0 0 -10px; 
            -webkit-transform: translateX( -350px ); -ms-transform: translateX( -350px ); transform: translateX( -350px );
            -webkit-transition: .5s -webkit-transform cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s transform cubic-bezier(0.19,1,0.22,1); transition: .5s transform cubic-bezier(0.19,1,0.22,1);
          }
            .listhome2_itemimg { width: 100%; max-width: none; }
          /* text */
          .listhome2_itemcontent { 
            padding: 20px; position: relative; 
            -webkit-transition: .5s background-color cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s background-color cubic-bezier(0.19,1,0.22,1); transition: .5s background-color cubic-bezier(0.19,1,0.22,1);
          }
          .listhome2_itemcontent:after { 
            position: absolute; top: 50%; right: 0; z-index: 2; margin-top: -10px; 
            -webkit-transition: .5s -webkit-transform cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s transform cubic-bezier(0.19,1,0.22,1); transition: .5s transform cubic-bezier(0.19,1,0.22,1);
          }
            .listhome2_itemtitle { margin: 0; font-size: 16px; }
            .listhome2_itemdate { display: block; font-size: 12px; margin-top: 10px; }
            .listhome2_itemtitle, .listhome2_itemdate { 
              -webkit-transform: translateX( -20px ); -ms-transform: translateX( -20px ); transform: translateX( -20px );
              -webkit-transition: .5s -webkit-transform cubic-bezier(0.19,1,0.22,1), .5s color cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s transform cubic-bezier(0.19,1,0.22,1), .5s color cubic-bezier(0.19,1,0.22,1); transition: .5s transform cubic-bezier(0.19,1,0.22,1), .5s color cubic-bezier(0.19,1,0.22,1);
            }
        /* effect */
        .listhome2_itembox:hover .listhome2_itemimgout:before, 
        .listhome2_itembox:focus .listhome2_itemimgout:before, 
        .listhome2_itembox:active .listhome2_itemimgout:before { opacity: 0.77; }
        .listhome2_itembox:hover .listhome2_itemimgout:after, 
        .listhome2_itembox:focus .listhome2_itemimgout:after, 
        .listhome2_itembox:active .listhome2_itemimgout:after { -webkit-transform: none; -ms-transform: none; transform: none; }
        .listhome2_itembox:hover .listhome2_itemcontent, 
        .listhome2_itembox:focus .listhome2_itemcontent, 
        .listhome2_itembox:active .listhome2_itemcontent { background-color: #233969; }
        .listhome2_itembox:hover .listhome2_itemcontent:after, 
        .listhome2_itembox:focus .listhome2_itemcontent:after, 
        .listhome2_itembox:active .listhome2_itemcontent:after { -webkit-transform: translateX( 250px ); -ms-transform: translateX( 250px ); transform: translateX( 250px ); }
        .listhome2_itembox:hover .listhome2_itemtitle, .listhome2_itembox:hover .listhome2_itemdate, 
        .listhome2_itembox:focus .listhome2_itemtitle, .listhome2_itembox:hover .listhome2_itemdate, 
        .listhome2_itembox:active .listhome2_itemtitle, .listhome2_itembox:hover .listhome2_itemdate { -webkit-transform: none; -ms-transform: none; transform: none; color: #fff; }
    /* link after list */
    .listhome2_link { display: inline-block; margin-top: 40px; }
    .listhome2_link:after { margin-left: 35px; vertical-align: -1px; }
    
    /* quality list */
    .listhome3 { 
      display: -ms-flexbox; display: -webkit-flex; display: flex; 
      -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; 
      -ms-align-items: center; -webkit-align-items: center; align-items: center; 
    }
      .listhome3_item { display: inline-block; vertical-align: middle; width: 25%; padding: 25px 20px 25px 100px; box-sizing: border-box;  position: relative; font-size: 16px; }
      .listhome3_item +  .listhome3_item:before { content: ""; position: absolute; z-index: 1; left: 0; top: 50%; margin-top: -45px; width: 1px; height: 90px; background-color: #d4dce3; }
        .listhome3_itemimg { position: absolute; z-index: 1; top: 50%; left: 50px; margin: -32px 0 0 -32px; }
    
  /* add some space on this section */      
  #homesection03 { margin: 100px 0; }

    

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

/* for screen smaller than 1180px */
@media screen and (max-width: 1180px)
{
  /** tablet display **/
  #mainheader { height: 100px; }
  #maincontent { margin-top: 100px; }
    #homeheader { margin-top: -100px; }
  
  /* logo */
  #mainheaderlogo { top: 20px; }
    #mainheaderlogo_img { width: 60px !important; }
    
  /* nav */  
  #mainheadernav { position: static; }
    #mainheadernav_title { 
      display: block; position: absolute; top: 0; right: 0; z-index: 2; padding: 41px 72px 41px 45px; 
      font-weight: bold; text-transform: uppercase; font-size: 14px; color: #0e3350; cursor: pointer;
      -webkit-transition: .5s color cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s color cubic-bezier(0.19,1,0.22,1); transition: .5s color cubic-bezier(0.19,1,0.22,1);
    }
    #mainheader.\:banner #mainheadernav_title { color: #fff; }
      #mainheadernav_titleindicator { 
        position: absolute; z-index: 1; top: 50%; right: 45px; width: 16px; height: 2px; margin-top: -1px;
        border-left: 6px transparent solid; box-sizing: border-box; background-color: currentColor; background-clip: content-box;
        -webkit-transition: .1s border-left-width linear, .5s background-color cubic-bezier(0.19,1,0.22,1); -ms-transition: .1s border-left-width linear, .5s background-color cubic-bezier(0.19,1,0.22,1); transition: .1s border-left-width linear, .5s background-color cubic-bezier(0.19,1,0.22,1);
      }
      #mainheadernav_titleindicator:before, #mainheadernav_titleindicator:after { 
        content: ""; position: absolute; right: 0; width: 16px; height: 2px; background-color: currentColor;
        -webkit-transition: .5s -webkit-transform cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s transform cubic-bezier(0.19,1,0.22,1); transition: .5s transform cubic-bezier(0.19,1,0.22,1);
         
      }
      #mainheadernav_titleindicator:before { top: -6px; -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; }
      #mainheadernav_titleindicator:after { bottom: -6px; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; }
      /* hover effect */
      #mainheadernav_title:hover > #mainheadernav_titleindicator { border-left-width: 0; }
      /* open effect */
      #mainheadernav_title.\:open { color: #0e3350 !important; }
        .\:open > #mainheadernav_titleindicator { background-color: transparent; }
        .\:open > #mainheadernav_titleindicator:before {
          -webkit-transform: rotate(-45deg) translateY(1px); -ms-transform: rotate(-45deg) translateY(1px); transform: rotate(-45deg) translateY(1px);
        }
        .\:open > #mainheadernav_titleindicator:after {
          -webkit-transform: rotate(45deg) translateY(-1px); -ms-transform: rotate(45deg) translateY(-1px); transform: rotate(45deg) translateY(-1px);
        }

    #mainheadernav_list { 
      margin: 0; white-space: normal; position: absolute; z-index: 1; top: 0; right: 0; left: 0; padding: 100px 40px 40px; background-color: #fff;
      -webkit-columns: 2; -moz-columns: 2; columns: 2; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px;
      -webkit-transition: .5s -webkit-transform cubic-bezier(0.19,1,0.22,1); -ms-transition: .5s transform cubic-bezier(0.19,1,0.22,1); transition: .5s transform cubic-bezier(0.19,1,0.22,1);
      -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%);
    }
      .mainheadernav_item { display: list-item; font-size: 16px; border-bottom: 1px #d4dce3 solid; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
        .mainheadernav_link { color: #53718a !important; display: block; padding: 7px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        /* hover/active/focus */
        .mainheadernav_link:hover, .mainheadernav_link:focus, .mainheadernav_link:active { color: #0e3350 !important; }
        /* current */
        .mainheadernav_link.\:current { color: #0e3350 !important; font-weight: bold; }
    /* open effect */
    .\:open + #mainheadernav_list {
      -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);
    }
    
  /** harmonize sub nav */
  #standardnav_list { -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; }
    
  /** undo floating gallery **/
  .standardsection_wrap {
    display: -ms-flexbox; display: -webkit-flex; display: flex; 
    -ms-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
    -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; 
    /*-ms-align-items: center; -webkit-align-items: center; align-items: center;*/
  }
  .standardsection_gallery { float: none !important; margin: 0 auto !important; -ms-order: 2; -webkit-order: 2; order: 2; }
  .standardsection_content { float: none !important; width: auto !important; -ms-order: 1; -webkit-order: 1; order: 1; }
  .standardsection_gallery + .standardsection_content { margin-bottom: 100px; }
  
  /* undo columm layout */
  /* contact page */
  #standardsection_contact01_col01 { float: none; width: auto; }
  #standardsection_contact01_col02 { float: none; width: auto; }
    /* do column layout here */
    #standardsection_contact01_col02_text { margin: 50px 0; float: left; width: calc(50% - 20px); -webkit-columns: 1; -moz-columns: 1; columns: 1; }
    #standardsection_contact01_col02_table { margin: 50px 0; float: right; width: calc(50% - 20px); }
    #standardsection_contact01_col02_map { clear: both; }
  /* company page */
  #standardsection_company01 .standardsection_content { margin-top: 0; }
  #standardsection_company02 { margin-top: 100px; }
  /* product01 */
  #standardsection_product01_part1 { width: 100%; }
  #standardsection_product01_part2 { width: 100%; margin-top: 50px; }
  
  /** get image closer **/
  .list1_itemimg { left: auto; right: 0; }
  
  /** change display **/
  #homesection03 { margin: 50px 0 -50px; }
    .listhome3_item { width: 50%; text-align: center; padding-left: 20px; }
    .listhome3_item + .listhome3_item:before { display: none; }
      .listhome3_itemimg { position: static; display: block; margin: 0 auto 10px; }
}

/* for screen smaller than 900px */
@media screen and (max-width: 900px)
{
  /** items by row **/
  .listhome1_item, .list5_item { width: 50%; }
  .listhome2_item { width: 33.3333%; }
  .homesection .listhome2_item + .listhome2_item + .listhome2_item + .listhome2_item { display: none; }
  
  /** reduce deco size (cannot scale because of 1px border) **/
  #homeheader_deco { width: 27px; height: 27px; bottom: 75px;  }
  #homeheader_deco:before { width: 162px; height: 162px; }
  #homeheader_deco:after { width: 55px; height: 55px; }
  
  /** adjust display **/
  .list2 { margin: 25px 0 0; }
  .list2_item { padding: 25px 0 25px 130px; }
    .list2_itemimg { left: 0; 
      -webkit-transform: scale( .647 ); -ms-transform: scale( .647 ); transform: scale( .647 ); 
      -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; 
    }
    
  /** forgot the picture **/
  .list1_itemimg { display: none; }
    
  /** reduce top/bottom spacing **/
  #maincontent { margin-bottom: 50px; }
  .standardsection { margin: 50px auto; }
    .standardsection_gallery + .standardsection_content { margin-bottom: 50px; }
  #homesection03 { margin-bottom: 0; }
  #standardheader_title { padding-top: 25px; padding-bottom: 25px; }
  #standardnav { margin-bottom: 40px; }
  .standardsection_title { margin-bottom: 40px; }
}

/* for screen smaller than 700px */
@media screen and (max-width: 700px)
{
  /** reduce left/right spacing **/
  .wrap { padding-left: 15px; padding-right: 15px; }
  /* header */
  #mainheaderlogo { left: 15px; }
  #mainheadernav_title { padding-right: 47px; }
    #mainheadernav_titleindicator { right: 15px; }
  /* nav */
  #mainheadernav_list { padding-left: 15px; padding-right: 15px; }
  /* banner */
  #standardheader_img, .standardbanner_img { max-width: calc( 100% - 15px ); }
  #homeheader_deco { display: none; }
  /* company page */
  /* reduce titles */
  h1, .h1 { font-size: 30px; }
    .standardsection_title:before { bottom: 5px; }
  #standardsection_company01 .standardsection_title { padding-top: 0; }
  /* redo normal display */
  #standardsection_company03 > .wrap { padding-left: 15px; padding-right: 15px; }
  #standardsection_company03 .standardsection_title { padding-left: 40px; }
  #standardsection_company03 .standardsection_title:before { left: 0; }
  
  /** undo scrollable **/
  .listyear1_out { margin-left: 0; margin-right: 0; }
  .listyear1_out:before { left: 20px; top: 8px; bottom: 0; right: auto; width: 1px; height: auto; }
    .listyear1_scrollable { height: auto !important; overflow: visible !important; }
    .listyear1_out > .scrollable_next, .listyear1_out > .scrollable_prev { display: none !important; }
      .listyear1 { position: static !important; width: auto !important; white-space: normal; margin: 0 0 0 20px; }
        .listyear1_item { display: list-item; width: auto !important; float: none !important; text-align: left; margin: 20px 0 0; padding-left: 40px; }
        .listyear1_item:after { left: 1px; top: 2px; }
          .listyear1_itemlabel { margin-bottom: 10px; }
          
  /** reduce icon size **/
  #standardheader_titlein[data-icon]:before { 
    -webkit-transform: scale(.8); -ms-transform: scale(.8); transform: scale(.8); 
    -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; 
  }
  
  /** items by rows **/
  .list4_item { width: 100%; }
  .list4_item + .list4_item { border-top-width: 1px; }
  .listhome2_item { width: 50%; }
  
  /* undo columm layout */
  /* contact page */
    #standardsection_contact01_col02_text { float: none; width: auto; -webkit-columns: 2; -moz-columns: 2; columns: 2; }
    #standardsection_contact01_col02_table { float: none; width: 100%; }
}

/* for screen smaller than 600px */
@media screen and (max-width: 600px)
{
  /** undo column **/
  #mainheadernav_list, #standardnav_list, .template01, #standardsection_contact01_col02_text { -webkit-columns: 1; -moz-columns: 1; columns: 1; }
  
  /* adjust header display */
  #standardheader_img + #standardheader_wrap { position: relative; }
    #standardheader_title { margin: 0; padding-right: 10px; }
    #standardheader_img + #standardheader_wrap > #standardheader_title:after { background-color: #0e3350; opacity: 1; }
    
  /** items by row **/
  .listhome1 { margin: -15px 0 0; }
    .listhome1_item { width: 100%; padding: 0; margin-top: 15px; }
    
  .listhome2 { margin: -15px 0 0; }
    .listhome2_item { width: 100%; padding: 0; margin-top: 15px; display: list-item !important; }
    
  .list5 { margin: -15px 0 0; }
    .list5_item { width: 100%; }
      .list5_itembox { margin: 15px 0 0; }
      
    .list2_item { width: 100%; }
         
  /** change display **/
  .listhome3_item { width: 100%; text-align: left; padding-left: 100px }
    .listhome3_itemimg { position: absolute; margin: -32px 0 0 -32px; }
      
  /** review pagination **/
  .pagenav { min-height: 20px; padding: 0; }
    .pagenav_item { display: none; }
    .pagenav_itemprev, .pagenav_itemnext { display: list-item; }
      .pagenav_linkprev:before { margin-right: 15px; }
      .pagenav_linknext:after { margin-left: 15px; }
      
  /** adjust **/
  .overlay_close { width: 50px; height: 50px; }
    
  /** mobile footer **/
  #mainfooterlist1 { padding: 20px 0; }
    .mainfooterlist1_item { width: 50%; margin: 20px 0; }
    .mainfooterlist1_item + .mainfooterlist1_item:before { display: none; }
  #mainfooteraddress, #mainfooternav { float: none; max-width: none; text-align: center; }
  #mainfooternav { padding-top: 0; }
  
  /** form **/
  .formfieldset > .formrow { width: calc( 100% - 40px ); }
  
  /** company **/
  #standardsection_company01_img { display: none; }
  #standardsection_company01_imgalt { display: block; } 
  
  /** product01 **/
  /* with JS */
    html.js #standardsection_product01_part1 { display: none; }
    html.js #standardsection_product01_static { display: none; }
      html.js #standardsection_product01_interactive .standardsection_product01_itemmarker { cursor: default; }
      #standardsection_product01_interactive .standardsection_product01_item { background-color: transparent !important; clip: rect( 15px 47px 47px 15px ) !important; }
      #standardsection_product01_interactive .standardsection_product01_item.\:alt { clip: rect( 15px 285px 47px 238px ) !important; }
  
}

    

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