@charset "UTF-8";


/*
Available Font Sizes
16px = 100%
font-family: "Helvetica World W01", Helvetica, Arial, sans-serif;
font-family: "HelveticaWorldW01-Itali", Helvetica, Arial, sans-serif;
font-family: "HelveticaWorldW01-Bold", Helvetica, Arial, sans-serif;
font-family: "HelveticaWorldW01-BdIt", Helvetica, Arial, sans-serif;

*/


p.h-splash-tagline {line-height: 120%}
 @media (min-width: 768px) {
.h-newsWrapper h2 a {
    border: medium none;
    color: #fff;
    font-size: 100%;
    padding: 0;
	background-image:none;
}
 }

@media (max-width: 399px) {
	.JS .h-section-text-intro { font-size:95%}
	.JS  .h-section-text { font-size:95%}
	.JS .h-caption-text { font-size: 75%; line-height: 140%;}
	.JS  .h-caption-padding {   padding: 2em 1em 2.2em;}
	.JS  .h-slide-products-showCaption.h-slide-products-light:before {background-color: rgba(255, 255, 255, 0.7);}
	.JS .h-splash-title {font-size: 170%;}
	.JS .h-splash-tagline {font-size: 115%;}
	.JS .h-splash-intro {font-size:90%; }

}

@media (max-width: 479px) {
	.JS .h-banner-more {display:none;}
	.JS .h-caption-title {line-height: 110%; margin-bottom:8px}
}
/*end iwan*/
	
	
.headerWrapper {
    position: relative;
    z-index: 1000;
    /*In front of other sibling elements even side nav*/
}
    .scrollmagic-pin-spacer .headerWrapper {
        /*when the header is pinned, maintain the full width*/
        /*otherwise when screen rotates from portrait to*/
        /*landscape, the layout has a fixed width*/
        width: 100% !important;
    }

#GlobalNaviTop li a:focus {
    background-color: #b1000e;
    color: #fff;
    text-decoration: none;
}

#TopicPath ul {
    padding: 20px 0;
}

#Contents.Contents-noPadding {
    padding: 0;
}

a.image-link,
a.image-link:visited {
    text-decoration: none;
}

/**********************
*   Grid
**********************/
.grid {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    display: block;
    width: 100%;
}
    @media (min-width: 768px) {
        .grid {
            padding: 0 15px;
        }
    }
    @media (min-width: 995px) {
        .grid {
            width: 965px;
            padding: 0;
            margin: 0 auto;
        }
    }
    /*no javascript, no need padding*/
    .no-js .hm-banners-top .grid {
        width: 965px;
        padding: 0;
        margin: 0 auto;
        /*overflow: hidden;*/
    }
    .no-js .hm-banners-bottom .grid {
        padding: 0;
        width: 965px;
        padding: 0;
        margin: 0 auto;
        overflow: hidden;
    }

    .grid-contentBox {
        -webkit-box-sizing: content-box;
           -moz-box-sizing: content-box;
                box-sizing: content-box;
        padding: 0;
        margin-left: -15px;
        width: auto;
    }
        @media (min-width: 995px) {
            .grid-contentBox {
                width: 965px;
                margin: 0 auto;
            }
        }
        /*no javascript, follow desktop*/
        .no-js .grid-contentBox {
            width: 965px;
            margin: 0 auto;
        }

.grid:after {
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    content: ".";
}


/*Grid row*/
.grid-row:after {
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    content: ".";
}

/*Grid col*/
.grid-col-half-always {
    float: left;
    width: 50%;
}

.grid-col-quarter {
    float: left;
    width: 50%;
}

.grid-col-sidebar {
    float: right;
    position: relative;
    width: 25%;
}
    @media (min-width: 768px) {
        .grid-row {
            margin: 0 -6px; /*Gutter of 12 px*/
        }

        .grid-col-half,
        .grid-col-half-always,
        .grid-col-quarter {
            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                    box-sizing: border-box;
            float: left;
            padding-left: 6px;
            padding-right: 6px;
        }

        .grid-col-half {
            width: 50%;
        }

        .grid-col-quarter {
            width: 25%;
        }

        .grid-col-main {
            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                    box-sizing: border-box;
            float: left;
            width: 75%;
            padding: 0 0 0 15px;
        }

        .grid-col-sidebar {
            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                    box-sizing: border-box;
            float: right;
            width: 25%;
            padding: 0 0 0 15px;
        }
    }

    @media (min-width: 995px) {
        .grid-col-main {
            -webkit-box-sizing: content-box;
               -moz-box-sizing: content-box;
                    box-sizing: content-box;
            width: 720px; /*following .Grid3 class*/
            padding: 0;
        }
        .grid-col-sidebar {
            -webkit-box-sizing: content-box;
               -moz-box-sizing: content-box;
                    box-sizing: content-box;
            width: 230px; /*following .Grid1 class*/
            padding: 0;
        }
    }
    /*No javascript, follow desktop*/
    /*grid*/
    .no-js .grid-col-main {
        -webkit-box-sizing: content-box;
           -moz-box-sizing: content-box;
                box-sizing: content-box;
        float: left;
        width: 720px; /*following .Grid3 class*/
        padding: 0;
    }
    .no-js .grid-col-sidebar {
        -webkit-box-sizing: content-box;
           -moz-box-sizing: content-box;
                box-sizing: content-box;
        float: right;
        width: 230px; /*following .Grid1 class*/
        padding: 0;
    }
    /*row*/
    .no-js .grid-row {
        margin: 0 -6px; /*Gutter of 12 px*/
    }
    .no-js .hm-banners-top .grid-row {
        margin: 0;
    }
    /*cells*/
    .no-js .grid-col-half,
    .no-js .grid-col-half-always,
    .no-js .grid-col-quarter {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        float: left;
        padding-left: 6px;
        padding-right: 6px;
    }
    .no-js .grid-col-half {
        width: 50%;
    }
    .no-js .grid-col-quarter {
        width: 25%;
    }

/*Element specific adjustments*/
@media (min-width: 768px) {
    .grid-col-products {
        /*comment out as although it follows the PSD, it doesn't result in consistent aspect ratio*/
        /*padding-right: 12px;*/
    }

    .grid-col-profile {
        /*comment out as although it follows the PSD, it doesn't result in consistent aspect ratio*/
        /*padding-left: 0;*/
    }
}
    /*no javascript, follow desktop*/
    .no-js .grid-col-products {
        padding-left: 0;
    }

    .no-js .grid-col-socialInno {
        padding-right: 0;
    }

/**********************
*   Home Page
**********************/
.front #Contents {
    position: relative;
    z-index: 0;
}
    .front #Contents.Contents-aboveOthers {
        z-index: 2; /*allow product finder mask to be above other elements, set using javascript*/
    }
    .scrollmagic-pin-spacer #Contents {
        background-color: transparent;
        width: 100% !important;
    }
/*.hm-top {}*/
    @media (min-width: 768px) {
        .hm-top {
            position: relative;
            height: 100%;
            margin-top: -146px; /*height of header*/
        }
    }
    /*no javascript, follow desktop*/
    .no-js .hm-top {
        position: relative;
        height: 100%;
        margin-top: -146px; /*height of header*/
    }

/*Banners*/
/*.hm-banners-top {}*/
    @media (min-width: 768px) {
        .hm-banners-top {
            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                    box-sizing: border-box;
            position: absolute;
            bottom: 104px; /*arbitary*/
            width: 100%;
        }
    }
    /*Hide the banners on top if screen height < 620px*/
    /*Intention: hide when monitor is < 800px, subtract away additional for browser elements e.g. menu bar*/
    @media (min-width: 768px) and (max-height: 620px) {
        .hm-banners-top {
            display: none;
        }

        /*Still show in the overlay after expansion*/
        .hm-banners-top-expand {
            display: block;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .hm-banners-top {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        position: absolute;
        bottom: 104px; /*arbitary*/
        width: 100%;
    }

/**********************
*   Home Overlay
**********************/
@media (min-width: 768px) {
    .hm-top-overlay-wrapper {
        position: absolute;
        top: 0;
        width: 100%;
    }
    .hm-top-overlay-wrapper-relative {
        position: relative;
    }
}
.scrollmagic-pin-spacer .hm-top-overlay-wrapper {
    /*when the overlay is pinned, maintain the full width*/
    /*otherwise when screen rotates from portrait to*/
    /*landscape, the layout has a fixed width*/
    width: 100% !important;
}
    /*no javascript, follow desktop*/
    .no-js .hm-top-overlay-wrapper {
        position: absolute;
        top: 0;
        width: 100%;
    }
@media (min-width: 768px) {
    .hm-top-overlay {
        max-height: 81px; /*For animation using GSAP*/
        position: relative;
        bottom: 81px; /*rendered height of overlay*/
        margin-bottom: -81px; /*position at bottom of screen*/
        width: 100%;
        padding-top: 0;
        padding-bottom: 46px; /*arbitrary*/
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1;
    }
        .hm-top-overlay-expand {
            max-height: none;
            padding-bottom: 160px; /*35(margin) 85(banner) + 40 (banner image overflow)*/
        }
}
    /*no javascript, follow desktop*/
    .no-js .hm-top-overlay {
        max-height: 81px; /*For animation using GSAP*/
        position: relative;
        bottom: 81px; /*rendered height of overlay*/
        margin-bottom: -81px; /*position at bottom of screen*/
        width: 100%;
        padding-top: 0;
        padding-bottom: 46px; /*arbitrary*/
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1;
    }

/**********************
*   Expand Overlay
**********************/
@media (min-width: 768px) {
    /*Banners*/
    .hm-banners-top-expand .hm-top-banner-half-onExpand {
        width: 100%;
    }

    .hm-top-overlay .hm-banner-directory .hm-banner-cell-shrink {
        width: 50px;
        padding-left: 5px;
        padding-right: 0;
    }

    .hm-top-overlay-expand {
        padding-top: 10px;
    }

    .hm-top-overlay .hm-banners-top-expand {
        bottom: 30px; /*15 (margin) + 15 (margin)*/
    }

    .hm-banners-top-expand .grid-col-half-onExpand {
        width: 50%;
    }

    .hm-banners-top-expand .grid-col-quarter-onExpand {
        width: 25%;
    }

    .hm-banners-top-expand .hm-top-banner-half-onExpand {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        float: left;
        width: 50%;
        padding-right: 6px;
    }

    .hm-banners-top-expand .hm-top-banner-half-onExpand:last-child {
        padding-left: 6px;
        padding-right: 0;
    }

    .hm-banners-top-expand .hm-banner {
        height: 85px;
    }

    .hm-banners-top-expand .hidden-onExpand {
        display: none;
    }

    .hm-banners-top-expand .hm-banner-products {
        font-size: 65%;
        padding: 2em;
    }

    .hm-banners-top-expand .hm-banner-about {
        background-position: center 40%;
    }

    .hm-banners-top-expand .hm-banner-directory {
        background-color: transparent;
    }

    .hm-banners-top-expand .hm-banner-directory .hm-banner-cell-expand {
        padding-left: 10px;
    }

    /*News Releases*/
    .h-newsWrapper-expand #HomeNewsReleases:after {
        content: "";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }

    .h-newsWrapper-expand #HomeNewsReleases .NewsReleases-title {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        width: 243px;
        vertical-align: top;
    }

    .h-newsWrapper-expand #HomeNewsReleases .NewsReleases-title h2 {
        font-size: 160%;
        padding-left: 23px;
    }

    .h-newsWrapper-expand #HomeNewsReleases .NewsReleases-controls {
        display: none;
    }

    .h-newsWrapper-expand #HomeNewsReleases #NewsReleaseEmbed {
        margin-bottom: 1em;
    }
    .h-newsWrapper-expand #HomeNewsReleases dd,
    .h-newsWrapper-expand #HomeNewsReleases dt {
        display: block;
        line-height: 160%;
        padding: 4px 0;
    }

    .h-newsWrapper-expand #HomeNewsReleases .marquee-news {
        display: none;
    }

    .h-newsWrapper-expand #HomeNewsReleases dd ul {
        margin: 0;
    }

    .h-newsWrapper-expand #HomeNewsReleases .NewsReleases-content dd li {
        overflow: visible;
    }

    .h-newsWrapper-expand #HomeNewsReleases .NewsReleases-content dd a {
        white-space: normal;
        line-height: 160%;
        padding: 0 15px;
    }

    .h-newsWrapper-expand #HomeNewsReleases .Button {
        display: block;
    }

    .h-newsWrapper-expand #HomeNewsReleases .ButtonStyle2 li {
        display: inline-block;
        margin: 0 18px 0 0;
    }

    .h-newsWrapper-expand #HomeNewsReleases .ButtonStyle2 li:last-child {
        margin-right: 0;
    }

    .h-newsWrapper-expand #HomeNewsReleases .ButtonStyle2 li a,
    .h-newsWrapper-expand #HomeNewsReleases .ButtonStyle2 li a:hover {
        padding-top: 10px;
        padding-bottom: 10px;
        margin: 0;
    }
}

@media (min-width: 880px) {
    .hm-top-overlay .hm-banner-directory .hm-banner-cell-shrink {
        width: 75px;
    }
}

@media (min-width: 995px) {
    .hm-top-overlay #HomeNewsReleases {
        display: block;
    }

    .hm-top-overlay #HomeNewsReleases .NewsReleases-title,
    .hm-top-overlay #HomeNewsReleases .NewsReleases-controls,
    .hm-top-overlay #HomeNewsReleases .NewsReleases-content {
        display: block;
        float: left;
    }

    .hm-top-overlay #HomeNewsReleases .NewsReleases-content {
        width: 718px; /*965 - 150 (title) - 97 (controls)*/
    }

    .h-newsWrapper-expand #HomeNewsReleases .NewsReleases-controls {
        display: none;
    }

    .h-newsWrapper-expand #HomeNewsReleases .NewsReleases-content {
        width: 722px;
    }
}
    /*no javascript, show init js to show news text*/
    .no-js .h-newsWrapper #HomeNewsReleases .NewsReleases-content .TextStyle1 {
        color: #fff;
    }

/**********************
*   Main component
**********************/
.h-main {
    position: relative;
    padding: 0 15px;
    background-color: #fff;
}
    /*no javascript, follow desktop*/
    .no-js .h-main {
        padding: 0;
    }

/**********************
*   Sidebar component
**********************/
.h-sidebar {
    padding-top: 15px;
}
    .h-sidebar-top {
        position: absolute;
        /*allow this to overflow the content into the splash sections below*/
        /*setting at 2 so that it can be in front of footer*/
        z-index: 2;
    }
    .h-sidebar-bottom {
        display: block;
        position: relative;
        padding: 15px;
        background-color: #b7b7b7;
    }
    @media (min-width: 768px) {
        .h-sidebar-bottom {
            display: none;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-sidebar-bottom {
        display: none;
    }


.h-sidebar-bottom .BoxPatternA {
    margin-bottom: 0;
}

/**********************
*   Article component
**********************/
.h-article {
    padding: 2em 0 2.5em 15px;
}
    @media (min-width: 768px) {
        .h-article {
            padding: 2em 0 2.5em;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-article {
        padding: 2em 0 2.5em;
    }

.h-article-emphasis {
    font-size: 140%;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 1.2em;
    color: #666;
}

.h-article-text {
    font-size: 88%;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 1.5em;
    color: #666;
}

/**********************
*   Splash component aka full width banner bg
**********************/
.h-splash {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
    min-height: 480px;
    overflow: hidden;
}
    .h-splash-tall {
        min-height: 580px;
    }
    .h-splash-full {
        width: 100%;
        height: 0;
        padding-bottom: 110%;
    }
        @media (min-width: 768px) {
            .h-splash-full {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                padding-bottom: 0;
            }
        }
        /*no javascript, follow desktop*/
        .no-js .h-splash-full {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding-bottom: 0;
        }
/*Page specific adjustments*/
#home-splash {
    min-height: 0;
    background-color: #333;
}
#splash-top { /*product listing*/
    background-color: #333;
}

.h-splash-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 480px;
}
    .h-splash-bg-full {
        height: 100%;
    }
    .h-splash-bg-fixed {
        position: fixed;
        width: 100%;
        height: 100%;
    }
        /*no javascript, static background image*/
        .no-js .h-splash-bg-fixed {
            position: absolute;
        }
    .JS .h-splash-bg {
        /*don't show the background image by default, use javascript to change opacity when images are loaded*/
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        -webkit-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        transition: opacity 0.5s;
    }
    .JS .h-splash-bg.h-splash-bg-visible {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    /*start zooming only when image loaded*/
    .h-splash-bg-visible.h-splash-bg-zoom,
    .no-js .h-splash-bg-zoom {
        -webkit-animation-name: zoom;
           -moz-animation-name: zoom;
             -o-animation-name: zoom;
                animation-name: zoom;
        -webkit-animation-duration: 20s;
           -moz-animation-duration: 20s;
             -o-animation-duration: 20s;
                animation-duration: 20s;
        -webkit-animation-fill-mode: forwards;
           -moz-animation-fill-mode: forwards;
             -o-animation-fill-mode: forwards;
                animation-fill-mode: forwards; /*Stay on the last frame*/
        -webkit-animation-iteration-count: 1;
           -moz-animation-iteration-count: 1;
             -o-animation-iteration-count: 1;
                animation-iteration-count: 1; /*Run only once*/
        -webkit-animation-timing-function: linear;
           -moz-animation-timing-function: linear;
             -o-animation-timing-function: linear;
                animation-timing-function: linear;
    }
/*Page specific adjustments*/
#home-splash .h-splash-bg {
    min-height: 0;
}

.h-splash-bg:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /*iwan*/
}
    .h-splash-bg-dark:before {
        content: '';
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-transition: background-color 0.5s;
        -o-transition: background-color 0.5s;
        -moz-transition: background-color 0.5s;
        transition: background-color 0.5s;
        z-index: 2;
    }

.h-splash-bgImg,
.h-splash-bgVideo {
    height: 100%;
    /*center the video/image*/
    position: absolute;
    top: 0;
    left: 50%;
    /*ie8 polyfill*/
    /*-sand-transform: translateX(-50%);*/
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
    /*for transition effects*/
    /*ie8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.5s, visibility 0.5s;
    -o-transition: opacity 0.5s, visibility 0.5s;
    -moz-transition: opacity 0.5s, visibility 0.5s;
    transition: opacity 0.5s, visibility 0.5s;
    /*for debugging. turn on to see superimposed image and video*/
    /*opacity: 0.5;*/
}
.h-splash-bgVideo {
    position: absolute;
    min-width: 100%;
}
    @media (min-width: 768px) {
        .h-splash-bgImg,
        .h-splash-bgVideo {
            /*reset previous rules*/
            margin-left: 0;
            height: auto;
            /*center horizontally, flush top*/
            position: relative;
            left: 50%;
            /*ie8 polyfill*/
            /*-sand-transform: translateX(-50%);*/
            -webkit-transform: translateX(-50%);
               -moz-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                 -o-transform: translateX(-50%);
                    transform: translateX(-50%);
            /*cover the parent*/
            min-width: 100%;
            min-height: 100%;
        }
        .h-splash-bgVideo #flashcontents {
            /*center horizontally top*/
            position: absolute;
            top: 0;
            left: 50%;
            /*ie8 polyfill*/
            /*-sand-transform: translateX(-50%);*/
            -webkit-transform: translateX(-50%);
               -moz-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                 -o-transform: translateX(-50%);
                    transform: translateX(-50%);
        }
    }
    .h-splash-bgImg-hidden {
        display: none;
    }
    .JS .h-splash-loading .h-splash-bgImg,
    .JS .h-splash-loading .h-splash-bgVideo {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        visibility: hidden;
    }

    /*no javascript, show the background image behind*/
    .no-js .h-splash-bgVideo {
        display: none;
    }
    .no-js .h-splash-bgImg {
        /*reset previous rules*/
        margin-left: 0;
        height: auto;
        /*center horizontally, flush top*/
        position: relative;
        left: 50%;
        /*ie8 polyfill*/
        /*-sand-transform: translateX(-50%);*/
        -webkit-transform: translateX(-50%);
           -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
             -o-transform: translateX(-50%);
                transform: translateX(-50%);
        /*cover the parent*/
        min-width: 100%;
        min-height: 100%;
    }
    /*ie8*/
    .ie8 .h-splash-bgImg {
        left: 0;
        /*background-size: 100% 100%;*/
    }

/*Wrapper for splash video control buttons*/
.h-video-controls {
    /*don't show for small screens, video doesn't play*/
    display: none;
}
    /*video only played on larger screens*/
    @media (min-width: 768px) {
        .JS .h-video-controls {
            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                    box-sizing: border-box;
            display: block;
            width: 100%;
            padding: 0 15px;
            /*center within container*/
            position: absolute;
            left: 50%;
            /*ie8*/
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            opacity: 1;
            visibility: visible;
            /*ie8 polyfill*/
            -sand-transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
               -moz-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                 -o-transform: translateX(-50%);
                    transform: translateX(-50%);
            -webkit-transition: opacity 0.25s, visibility 0.25s;
            -o-transition: opacity 0.25s, visibility 0.25s;
            -moz-transition: opacity 0.25s, visibility 0.25s;
            transition: opacity 0.25s, visibility 0.25s;
        }
            .JS .h-video-controls-hidden {
                display: none;
                width: auto;
            }
        .JS .hm-top-overlay .h-video-controls {
            bottom: 90px; /*banners top are hidden*/
        }
        .JS #construction-machinery .h-video-controls {
            display: none;
        }
        /*don't show on mobile devices*/
        .SP .h-video-controls {
            display: none;
        }
    }
    /*when small height screens, banners are hidden*/
    @media (min-height: 621px) {
        .JS .hm-top-overlay .h-video-controls {
            bottom: 218px; /*banners top positon (118) + height (100)*/
        }
    }
    @media (min-width: 995px) {
        .JS .h-video-controls {
            width: 965px;
            padding: 0;
        }
        .JS .h-video-controls-hidden {
            /*debug IE extend beyond screen width*/
            display: none;
        }
        .JS #construction-machinery .h-video-controls {
            display: block;
            bottom: 2em;
        }
    }
/*when the overlay is expanded, reposition it*/
.JS .hm-top-overlay-expand .h-video-controls {
    bottom: auto;
    top: -36px;
}
/*ie8*/
.ie8 .h-video-controls,
.JS.ie8 .h-video-controls {
    display: none;
}

/*control for splash video*/
a.h-video-controlLink {
    color: #fff;
    text-decoration: none;
}

/*control button for splash video*/
.h-video-button {
    position: relative;
    display: inline-block;
    width: 19px;
    height: 19px;
    margin: 4px;
    background-color: #e6000e;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    vertical-align: bottom;
}
    .h-video-button-white {
        background-color: #fff;
    }

/*'Aura' behind button*/
.h-video-button:before {
    content: "";
    position: absolute;
    display: block;
    width: 27px;
    height: 27px;
    top: -4px;
    left: -4px;
    background-color: #e6000e;
    /*ie8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity: .5;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
}
    .h-video-button-white:before {
        background-color: #fff;
    }

/*default state click to pause*/
.h-video-button:after {
    content: "";
    position: absolute;
    display: block;
    width: 3px;
    height: 11px;
    top: 50%;
    left: 50%;
    margin: -5.5px 0 0 -4.5px;
    border-left: solid 3px #fff;
    border-right: solid 3px #fff;
}
    .h-video-button-white:after {
        border-left-color: #000;
        border-right-color: #000;
    }
/*click to play*/
.h-video-controlLink-paused .h-video-button:after {
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    margin: -5px 0 0 -2px;
    border-left: solid 5px #fff;
    border-right: 0 none;
    border-top: solid 5px transparent;
    border-bottom: solid 5px transparent;
}
    .h-video-controlLink-paused .h-video-button-white:after {
        border-left-color: #000;
    }

/*Video play / pause text*/
.h-video-button-text {
    font-size: 90%;
    margin-left: 0.5em;
    vertical-align: middle;
    text-shadow: 2px 2px 4px #000000;
}
/*video when first init is playing, hence hide paused state*/
.h-video-button-text-paused {
    display: none;
}
/*if video is paused, show paused state*/
.h-video-controlLink-paused .h-video-button-text-paused {
    display: inline;
}
/*if video is paused, hide playing state*/
.h-video-controlLink-paused .h-video-button-text-playing {
    display: none;
}

/*Splash content*/
.h-splash-content {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    padding: 5.875em 15px;
    position: relative;
}
    @media (min-width: 768px) {
        .h-splash-content {
            padding-left: 0;
            padding-right: 0;
        }
        .h-splash-content-padding {
            padding-left: 15px;
            padding-right: 15px;
        }
    }
    .h-splash-content-center {
        position: absolute;
        top: 50%;
        left: 50%;
        /*ie8 polyfill*/
        -sand-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
           -moz-transform: translateX(-50%) translateY(-50%);
            -ms-transform: translateX(-50%) translateY(-50%);
             -o-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
    }
    .h-splash-content-grid {
        padding: 0 15px;
    }
        @media (min-width: 768px) {
            .h-splash-content-grid {
                width: 965px;
                margin: 0 auto;
            }
        }

.h-splash-contentInner {
    padding-left: 15px;
}
    @media (min-width: 768px) {
        .h-splash-contentInner {
            padding-left: 0;
        }
    }

.h-splash-title {
    font-size: 190%;
    line-height: 1.2;
	font-weight:bold;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    margin-bottom: 0.4em; /*iwan*/
    visibility: visible;
    -webkit-transition: opacity 0.77s, visibility 0.77s, -webkit-transform 0.77s;
    transition: opacity 0.77s, visibility 0.77s, -webkit-transform 0.77s;
    -o-transition: opacity 0.77s, visibility 0.77s, -o-transform 0.77s;
    -moz-transition: transform 0.77s, opacity 0.77s, visibility 0.77s, -moz-transform 0.77s;
    transition: transform 0.77s, opacity 0.77s, visibility 0.77s;
    transition: transform 0.77s, opacity 0.77s, visibility 0.77s, -webkit-transform 0.77s, -moz-transform 0.77s, -o-transform 0.77s;
    background-image: none;
}
    @media (min-width: 480px) {
        .h-splash-title {
            font-size: 260%;
        }
    }
    @media (min-width: 580px) {
        .h-splash-title {
            font-size: 300%;
        }
    }
    @media (min-width: 995px) { /*iwan*/
        .h-splash-title {
            font-size: 320%;
        }
    }
.JS .h-splash-title {
    /*hide the title on load, reveal by adding class using js*/
    /*ie8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    visibility: hidden;
    /*ie8 polyfill*/
    -sand-transform: translateY(25px);
    -webkit-transform: translateY(25px);
       -moz-transform: translateY(25px);
        -ms-transform: translateY(25px);
         -o-transform: translateY(25px);
            transform: translateY(25px);
}
.JS .h-splash-title-noTransitions {
    /*ie8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
    visibility: visible;
    /*ie8 polyfill*/
    -sand-transform: translateY(0);
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition: none;
    -o-transition: none;
    -moz-transition: none;
    transition: none;
}
h2.h-splash-title { /*increasing specifity to override conflicting styles*/
    margin-left: 0;
    margin-right: 0;
}
    .JS .h-splash-title-appear {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        visibility: visible;
        /*ie8 polyfill*/
        -sand-transform: translateY(0);
        -webkit-transform: translateY(0);
           -moz-transform: translateY(0);
            -ms-transform: translateY(0);
             -o-transform: translateY(0);
                transform: translateY(0);
    }
    .h-splash-title-center {
        text-align: center;
    }
    .h-splash-title-small {
        font-size: 170%;
    }
        @media (min-width: 480px) {
            .h-splash-title-small {
                font-size: 187.5%;
            }
        }
    .h-splash-title-underline {
        padding-bottom: 1em;
        margin-bottom: 1em;
    }
    h2.h-splash-title-underline { /*increasing specifity to override conflicting styles*/
        margin-bottom: 1em;
    }

.h-splash-tagline {
    font-size: 125%;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    visibility: visible;
    -webkit-transition: opacity 0.77s, visibility 0.77s, -webkit-transform 0.77s;
    transition: opacity 0.77s, visibility 0.77s, -webkit-transform 0.77s;
    -o-transition: opacity 0.77s, visibility 0.77s, -o-transform 0.77s;
    -moz-transition: transform 0.77s, opacity 0.77s, visibility 0.77s, -moz-transform 0.77s;
    transition: transform 0.77s, opacity 0.77s, visibility 0.77s;
    transition: transform 0.77s, opacity 0.77s, visibility 0.77s, -webkit-transform 0.77s, -moz-transform 0.77s, -o-transform 0.77s;
}
    @media (min-width: 480px) {
        .h-splash-tagline {
            font-size: 160%;
        }
    }
.JS .h-splash-tagline {
    /*hide the tagline on load*/
    /*ie8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    visibility: hidden;
    /*ie8 polyfill*/
    -sand-transform: translateY(25px);
    -webkit-transform: translateY(25px);
       -moz-transform: translateY(25px);
        -ms-transform: translateY(25px);
         -o-transform: translateY(25px);
            transform: translateY(25px);
}
    .JS .h-splash-tagline-appear {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        visibility: visible;
        /*ie8 polyfill*/
        -sand-transform: translateY(0);
        -webkit-transform: translateY(0);
           -moz-transform: translateY(0);
            -ms-transform: translateY(0);
             -o-transform: translateY(0);
                transform: translateY(0);
    }
    .h-splash-tagline-center {
        text-align: center;
    }

/*intro para beneath tagline and title in product listing*/
.h-splash-intro {
    font-size: 100%;
    margin-top: 20px;
    color: #fff;
    text-align: center;
    visibility: visible;
    -webkit-transition: opacity 0.77s, visibility 0.77s, -webkit-transform 0.77s;
    transition: opacity 0.77s, visibility 0.77s, -webkit-transform 0.77s;
    -o-transition: opacity 0.77s, visibility 0.77s, -o-transform 0.77s;
    -moz-transition: transform 0.77s, opacity 0.77s, visibility 0.77s, -moz-transform 0.77s;
    transition: transform 0.77s, opacity 0.77s, visibility 0.77s;
    transition: transform 0.77s, opacity 0.77s, visibility 0.77s, -webkit-transform 0.77s, -moz-transform 0.77s, -o-transform 0.77s;
}
.JS .h-splash-intro {
    /*hide the intro on load*/
    /*ie8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    visibility: hidden;
    /*ie8 polyfill*/
    -sand-transform: translateY(25px);
    -webkit-transform: translateY(25px);
       -moz-transform: translateY(25px);
        -ms-transform: translateY(25px);
         -o-transform: translateY(25px);
            transform: translateY(25px);
}
    .JS .h-splash-intro-appear {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        visibility: visible;
        /*ie8 polyfill*/
        -sand-transform: translateY(0);
        -webkit-transform: translateY(0);
           -moz-transform: translateY(0);
            -ms-transform: translateY(0);
             -o-transform: translateY(0);
                transform: translateY(0);
    }

.h-splash-list {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    list-style-type: none;
}
@media (min-width: 580px) {
    .h-splash-list {
        float: left;
        width: 50%;
        padding-right: 2em;
    }
        .h-splash-list-full {
            width: 100%;
        }
}

.h-splash-listItem {
    line-height: 140%;
    margin-bottom: 0.8em;
}

a.h-splash-listLink {
    position: relative;
    font-size: 87.5%;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
}
    a.h-splash-listLink:hover {
        color: #fff;
        text-decoration: underline;
    }
.h-splash-listLinkIcon {
    position: relative;
    top: 0.25em;
    left: 0;
    display: inline-block;
    width: 1.7em; /*iwan*/
    -webkit-transition: left 0.2s;
    -o-transition: left 0.2s;
    -moz-transition: left 0.2s;
    transition: left 0.2s;

}
    .h-splash-listLink:hover .h-splash-listLinkIcon {
        left: 0.25em;
    }
.h-splash-listLinkIcon:before,
.h-splash-listLinkIcon:after {
    content: '';
    position: absolute;
}
.h-splash-listLinkIcon:before {
    bottom: -0.1em;
    right: 0;
    width: 1.3em;
    height: 1.3em;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    background-color: #fff;
}
.h-splash-listLinkIcon:after {
    bottom: 0.3em;
    right: 0.45em;
    width: 0.4em;
    height: 0.4em;
    border-top: 2px solid #546575;
    border-right: 2px solid #546575;
    /*ie8 polyfill*/
    -sand-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

/*Tagline Wrapper*/
/*.hm-top-taglineWrapper {}*/
    @media (min-width: 768px) {
        .hm-top-taglineWrapper {
            padding: 0 15px;
        }
    }
    @media (min-width: 995px) {
        .hm-top-taglineWrapper {
            width: 965px;
            margin: 0 auto;
        }
    }
	
    /*no javascript, follow desktop*/
    .no-js .hm-top-taglineWrapper {
        width: 965px;
        padding: 0;
        margin: 0 auto;
    }

/*Tagline*/
.hm-top-tagline {
    position: absolute;
    top: 50px;
    width: 75%;
    margin-top: 111px;
    z-index: 1; /*appear above image / video*/
}
    @media (min-width: 768px) {
        .hm-top-tagline {
            width: 518px;
            max-width: 600px;/*original image width*/
            margin-top: 146px;
        }
    }
    @media (min-width: 995px) {
        .hm-top-tagline {
            top: 40px;
            margin-left: -20px;
            height: 148px; /*fixed height for calculating min splash size*/
        }
    }
    @media (max-width: 579px) {
        .hm-top-tagline {
    position: absolute;
    top: 30px;
    width: 100%;

        }
    }
    @media (max-width: 399px) {
        .hm-top-tagline {
    position: absolute;
    top: 30px;
    width: 380px;

        }
    }	
	
    /*no javascript, follow desktop*/
    .no-js .hm-top-tagline {
        top: 40px;
        margin-left: -20px;
        width: 518px;
        height: 148px; /*fixed height for calculating min splash size*/
        margin-top: 146px;
    }

/**********************
*   Scroll Indicator Component
**********************/
/*dark circle background behind indicator*/
.h-scrollIndicator-wrapper {
    display: block;
    position: fixed;
    bottom: -0.5em;
    left: 50%;
    width: 4em;
    height: 4em;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);
    /*ie8 polyfill*/
    -sand-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: 3;
    /*ie8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.5s, visibility 0.5s;
    -o-transition: opacity 0.5s, visibility 0.5s;
    -moz-transition: opacity 0.5s, visibility 0.5s;
    transition: opacity 0.5s, visibility 0.5s;
}
    /*Only show in tablet and above*/
    @media (max-width: 768px) {
        .h-scrollIndicator-wrapper {
            display: none;
        }
    }
    .h-scrollIndicator-wrapper-hidden {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        visibility: hidden;
    }

.h-scrollIndicator {
    display: block;
    position: absolute;
    bottom: 1.25em;
    left: 50%;
    /*ie8 polyfill*/
    -sand-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 14px;
    height: 21px;
    -webkit-border-radius: 7px;
       -moz-border-radius: 7px;
            border-radius: 7px;
    border: 1px solid #fff;
    margin: 0 auto;
    /*ie8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.5s, visibility 0.5s;
    -o-transition: opacity 0.5s, visibility 0.5s;
    -moz-transition: opacity 0.5s, visibility 0.5s;
    transition: opacity 0.5s, visibility 0.5s;
}
    /*Only show in tablet and above*/
    @media (max-width: 768px) {
        .h-scrollIndicator {
            display: none;
        }
    }
    .h-scrollIndicator-fixed {
        position: fixed;
    }
    .h-scrollIndicator-absolute {
        position: absolute;
    }
    .h-scrollIndicator-withBg {
        top: 1em;
    }
    .h-scrollIndicator-block {
        position: static;
        display: block;
        margin: 2em auto 0;
    }
    .h-scrollIndicator-hidden {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        visibility: hidden;
    }
    .no-js .h-scrollIndicator {
        display: block;
    }
    /*no javascript, fit to bottom of container*/
    .no-js .h-scrollIndicator-fixed {
        position: absolute;
        bottom: 2em;
    }

.h-scrollIndicator:before,
.h-scrollIndicator:after {
    content: '';
    position: absolute;
    top: 5px;
    width: 2px;
    height: 5px;
    margin-left: 6px;
    background-color: #fff;
}

.h-scrollIndicator:before {
    -webkit-animation: slideDownFadeIn 2s infinite;
       -moz-animation: slideDownFadeIn 2s infinite;
         -o-animation: slideDownFadeIn 2s infinite;
            animation: slideDownFadeIn 2s infinite;
}

.h-scrollIndicator:after {
    -webkit-animation: slideDownFadeOut 2s infinite;
       -moz-animation: slideDownFadeOut 2s infinite;
         -o-animation: slideDownFadeOut 2s infinite;
            animation: slideDownFadeOut 2s infinite;
}

.h-scrollIndicator-text {
    font-size: 60%;
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    position: absolute;
    top: 2em;
    left: 50%;
    /*ie8 polyfill*/
    -sand-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
    color: #fff;
}

@-webkit-keyframes slideDownFadeIn {
    0% {
        -webkit-transform: translateY(-8px);
                transform: translateY(-8px);
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    80%, 100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
}
@-moz-keyframes slideDownFadeIn {
    0% {
        -moz-transform: translateY(-8px);
             transform: translateY(-8px);
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    80%, 100% {
        -moz-transform: translateY(0);
             transform: translateY(0);
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
}
@-o-keyframes slideDownFadeIn {
    0% {
        -o-transform: translateY(-8px);
           transform: translateY(-8px);
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    80%, 100% {
        -o-transform: translateY(0);
           transform: translateY(0);
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
}
@keyframes slideDownFadeIn {
    0% {
        -webkit-transform: translateY(-8px);
           -moz-transform: translateY(-8px);
             -o-transform: translateY(-8px);
                transform: translateY(-8px);
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    80%, 100% {
        -webkit-transform: translateY(0);
           -moz-transform: translateY(0);
             -o-transform: translateY(0);
                transform: translateY(0);
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
}
@-webkit-keyframes slideDownFadeOut {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    80%, 100% {
        -webkit-transform: translateY(10px);
                transform: translateY(10px);
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
}
@-moz-keyframes slideDownFadeOut {
    0% {
        -moz-transform: translateY(0);
             transform: translateY(0);
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    80%, 100% {
        -moz-transform: translateY(10px);
             transform: translateY(10px);
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
}
@-o-keyframes slideDownFadeOut {
    0% {
        -o-transform: translateY(0);
           transform: translateY(0);
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    80%, 100% {
        -o-transform: translateY(10px);
           transform: translateY(10px);
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
}
@keyframes slideDownFadeOut {
    0% {
        -webkit-transform: translateY(0);
           -moz-transform: translateY(0);
             -o-transform: translateY(0);
                transform: translateY(0);
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    80%, 100% {
        -webkit-transform: translateY(10px);
           -moz-transform: translateY(10px);
             -o-transform: translateY(10px);
                transform: translateY(10px);
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
}

/**********************
*   Banners (new)
**********************/
/*Banner wrapper*/
a.h-banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
}
    @media (min-width: 768px) {
        .h-banner-link-margin {
            margin-bottom: 0.75em; /*12px on 16px base*/
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-banner-link-margin {
        margin-bottom: 0.75em; /*12px on 16px base*/
    }

/*Banner*/
.h-banner {
    overflow: hidden;
}
    @media (max-width: 767px) {
        .h-banner-darkonMobile:before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }
    }
    @media (min-width: 768px) {
        .h-banner-overflow {
            overflow: visible;
        }

        .h-banner-bordered:before {
            content: '';
            display: block;
            width: 9px;
            height: 100%;
            background-color: #ff0126;
            position: absolute;
            top: 0;
            left: 0;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-banner-overflow {
        overflow: visible;
    }
    .no-js .h-banner-bordered:before {
        content: '';
        display: block;
        width: 9px;
        height: 100%;
        background-color: #ff0126;
        position: absolute;
        top: 0;
        left: 0;
    }

/*Banner specific adjustments*/
.h-banner-brochure,
.h-banner-activities {
    background-color: #333; /*dark background for white text before images load*/
}
.h-banner-jobs {
    background-color: #ff0126;
}
.h-banner-socialInnovation {
    background-color: #000;
}

/*Banner image wrapper*/
/*to allow image to overflow in y direction without scrollbar appearing*/
.h-banner-imgWrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
    @media (min-width: 768px) {
        .h-banner-imgWrapper-tooltip {
            top: -80px;
            margin-left: 21px; /*flush with banner text*/
            width: 100px;
            height: 100px;
            /*ie8*/
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            opacity: 0;
            visibility: hidden;
            /*ie8 polyfill*/
            -sand-transform: translateY(0px);
            -webkit-transform: translateY(0px);
               -moz-transform: translateY(0px);
                -ms-transform: translateY(0px);
                 -o-transform: translateY(0px);
                    transform: translateY(0px);
            -webkit-transition: visibility 0.25s ease 0s, opacity 1.5s ease 0s, -webkit-transform 0.5s ease 0s;
            transition: visibility 0.25s ease 0s, opacity 1.5s ease 0s, -webkit-transform 0.5s ease 0s;
            -o-transition: visibility 0.25s ease 0s, opacity 1.5s ease 0s, -o-transform 0.5s ease 0s;
            -moz-transition: visibility 0.25s ease 0s, opacity 1.5s ease 0s, transform 0.5s ease 0s, -moz-transform 0.5s ease 0s;
            transition: visibility 0.25s ease 0s, opacity 1.5s ease 0s, transform 0.5s ease 0s;
            transition: visibility 0.25s ease 0s, opacity 1.5s ease 0s, transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s, -moz-transform 0.5s ease 0s, -o-transform 0.5s ease 0s;
        }
        .h-banner:hover .h-banner-imgWrapper-tooltip {
            visibility: visible;
            /*ie8*/
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            opacity: 1;
            /*ie8 polyfill*/
            -sand-transform: translateY(-20px);
            -webkit-transform: translateY(-20px);
               -moz-transform: translateY(-20px);
                -ms-transform: translateY(-20px);
                 -o-transform: translateY(-20px);
                    transform: translateY(-20px);
        }
        /*no transitions if expanded or on mobile device*/
        .SP .h-banner:hover .h-banner-imgWrapper-tooltip,
        .hm-banners-top-expand .h-banner:hover .h-banner-imgWrapper-tooltip {
            /*ie8*/
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            opacity: 0;
            visibility: hidden;
            -webkit-transition: none;
            -o-transition: none;
            -moz-transition: none;
            transition: none;
        }
    }
    .no-js .h-banner-imgWrapper-tooltip {
        top: -80px;
        margin-left: 21px; /*flush with banner text*/
        width: 100px;
        height: 100px;
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        visibility: hidden;
        /*ie8 polyfill*/
        -sand-transform: translateY(0px);
        -webkit-transform: translateY(0px);
           -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
             -o-transform: translateY(0px);
                transform: translateY(0px);
        -webkit-transition: visibility 0.25s ease 0s, opacity 1.5s ease 0s, -webkit-transform 0.5s ease 0s;
        transition: visibility 0.25s ease 0s, opacity 1.5s ease 0s, -webkit-transform 0.5s ease 0s;
        -o-transition: visibility 0.25s ease 0s, opacity 1.5s ease 0s, -o-transform 0.5s ease 0s;
        -moz-transition: visibility 0.25s ease 0s, opacity 1.5s ease 0s, transform 0.5s ease 0s, -moz-transform 0.5s ease 0s;
        transition: visibility 0.25s ease 0s, opacity 1.5s ease 0s, transform 0.5s ease 0s;
        transition: visibility 0.25s ease 0s, opacity 1.5s ease 0s, transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s, -moz-transform 0.5s ease 0s, -o-transform 0.5s ease 0s;
    }
    .no-js .h-banner:hover .h-banner-imgWrapper-tooltip {
        visibility: visible;
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        /*ie8 polyfill*/
        -sand-transform: translateY(-20px);
        -webkit-transform: translateY(-20px);
           -moz-transform: translateY(-20px);
            -ms-transform: translateY(-20px);
             -o-transform: translateY(-20px);
                transform: translateY(-20px);
    }

/*Banner image*/
.h-banner-img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    -moz-transition: transform 0.5s, -moz-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s, -o-transform 0.5s;
}
    .h-banner-img-middle {
        /*center vertically*/
        top: 50%;
        /*ie8 polyfill*/
        -sand-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
           -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
             -o-transform: translateY(-50%);
                transform: translateY(-50%);
    }
    @media (min-width: 768px) {
        .JS #Contents .h-banner-img-tooltip {
            /*display: none;*/
            width: auto;
            max-width: none;
            max-height: 100%;
            left: 50%;
            /*ie8 polyfill*/
            -sand-transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
               -moz-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                 -o-transform: translateX(-50%);
                    transform: translateX(-50%);
        }
        .h-banner-zoomable:hover .h-banner-img {
            /*small rotate for IE smoothness*/
            /*ie8 polyfill*/
            -sand-transform: scale(1.05) rotate(0.1deg);
            -webkit-transform: scale(1.05) rotate(0.1deg);
               -moz-transform: scale(1.05) rotate(0.1deg);
                -ms-transform: scale(1.05) rotate(0.1deg);
                 -o-transform: scale(1.05) rotate(0.1deg);
                    transform: scale(1.05) rotate(0.1deg);
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-banner-img-tooltip {
        height: 100%;
        width: auto;
        left: 50%;
        /*ie8 polyfill*/
        -sand-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
           -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
             -o-transform: translateX(-50%);
                transform: translateX(-50%);
    }
    .no-js .h-banner-zoomable:hover .h-banner-img {
        /*ie8 polyfill*/
        -sand-transform: scale(1.05);
        -webkit-transform: scale(1.05);
           -moz-transform: scale(1.05);
            -ms-transform: scale(1.05);
             -o-transform: scale(1.05);
                transform: scale(1.05);
    }

/*Banner text content*/
.h-banner-content {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
    width: 100%;
    z-index: 1; /*before banner-img*/
    overflow: hidden; /*hide the red line on left*/
    -webkit-transition-timing-function: linear;
       -moz-transition-timing-function: linear;
         -o-transition-timing-function: linear;
            transition-timing-function: linear;
}
    .h-banner-content-middle {
        /*center vertically in parent*/
        top: 50%;
        /*ie8 polyfill*/
        -sand-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
           -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
             -o-transform: translateY(-50%);
                transform: translateY(-50%);
    }
    .h-banner-content-bottom {
        position: absolute;
        bottom: 0.5em;
        left: 0;
        width: 100%;
        padding: 0 0.9em;
    }
    .h-banner-content-upOnHover {
        -webkit-transition: top 0.5s, -webkit-transform 0.5s;
        transition: top 0.5s, -webkit-transform 0.5s;
        -o-transition: top 0.5s, -o-transform 0.5s;
        -moz-transition: top 0.5s, transform 0.5s, -moz-transform 0.5s;
        transition: top 0.5s, transform 0.5s;
        transition: top 0.5s, transform 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s, -o-transform 0.5s;
    }
/*Banner specific adjustments*/
.h-banner-jobs .h-banner-content,
.h-banner-socialInnovation .h-banner-content {
    padding: 0 0.9em;
}

/*Banner copy for red border*/
.h-banner-copy {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
    padding: 0 15px;
}
    @media (min-width: 768px) {
        .h-banner-copy {
            padding-left: 21px; /*9px border left, 12px spacing*/
            padding-right: 12px; /*For balance*/
        }
    }
    /*Banner specific adjustments*/
    @media (min-width: 995px) {
        .h-banner-profile .h-banner-copy {
            padding-right: 0; /*To fit content*/
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-banner-copy {
        padding-left: 21px; /*9px border left, 12px spacing*/
        padding-right: 12px; /*For balance*/
    }
    .no-js .h-banner-profile .h-banner-copy {
        padding-right: 0; /*To fit content*/
    }

/*Banner header*/
.h-banner-header {
    font-size: 100%; /*Changed from 110% due to layout not optimal (squeezed vertically) on physical iPhone 5*/
    line-height: 120%;
    font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
    color: #fff;
}
    @media (min-width: 400px) and (max-width: 579px) { /*iwan*/
        .h-banner-header {
            font-size: 125%;
        }
    }
    @media (min-width: 580px) { /*iwan*/
        .h-banner-header {
            font-size: 140%;
        }
    }
    @media (min-width: 768px) { /*iwan*/
        .h-banner-header {
            font-size: 145%;
            text-shadow: 2px 2px 4px #000000;
        }
    }
    @media (min-width: 995px) { /*iwan*/
        .h-banner-header {
            font-size: 155%;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-banner-header {
        font-size: 155%;
        text-shadow: 2px 2px 4px #000000;
    }

/*Banner specific adjustments*/
.h-banner-profile .h-banner-header {
    font-size: 82%;
}
    @media (min-width: 400px) and (max-width: 579px) { /*iwan*/
        .h-banner-profile .h-banner-header {
            font-size: 100%;
        }
    }
    @media (min-width: 580px) { /*iwan*/
        .h-banner-profile .h-banner-header {
            font-size: 130%;
        }
    }
    @media (min-width: 768px) { /*iwan*/
        .h-banner-profile .h-banner-header {
            font-size: 100%;
        }
    }
    @media (min-width: 995px) { /*iwan*/
        .h-banner-profile .h-banner-header {
            font-size: 130%; 
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-banner-profile .h-banner-header {
        font-size: 140%;
    }

/*Banner text*/
.h-banner-subtitle {
    font-size: 75%;
    line-height: 120%;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
}
    @media (min-width: 400px) and (max-width: 579px) {
        .h-banner-subtitle {
            font-size: 85%;
        }
    }
    @media (min-width: 580px) {
        .h-banner-subtitle {
            font-size: 92%;
        }
    }
    @media (min-width: 768px) {
        .h-banner-subtitle {
            max-height: 1.2em; /*same as line height*/
            text-shadow: 2px 2px 4px #000000;
            /*ie8*/
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            opacity: 1;
            -webkit-transform: perspective(1000px) rotate3d(1,0,0,0);
            -moz-transform: perspective(1000px) rotate3d(1,0,0,0);
                 transform: perspective(1000px) rotate3d(1,0,0,0);
            -webkit-transform-origin: 50% 0%;
            -moz-transform-origin: 50% 0%;
             -ms-transform-origin: 50% 0%;
              -o-transform-origin: 50% 0%;
                 transform-origin: 50% 0%;
            -webkit-transition: max-height 0.35s, opacity 0.35s, -webkit-transform 0.35s;
            transition: max-height 0.35s, opacity 0.35s, -webkit-transform 0.35s;
            -o-transition: max-height 0.35s, opacity 0.35s, -o-transform 0.35s;
            -moz-transition: max-height 0.35s, opacity 0.35s, transform 0.35s, -moz-transform 0.35s;
            transition: max-height 0.35s, opacity 0.35s, transform 0.35s;
            transition: max-height 0.35s, opacity 0.35s, transform 0.35s, -webkit-transform 0.35s, -moz-transform 0.35s, -o-transform 0.35s;
        }
        .h-banner-link:hover .h-banner-subtitle {
            max-height: 0px;
            /*ie8*/
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            opacity: 0;
            -webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg);
            -moz-transform: perspective(1000px) rotate3d(1,0,0,90deg);
                 transform: perspective(1000px) rotate3d(1,0,0,90deg);
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-banner-subtitle {
        font-size: 92%;
        max-height: 1.2em; /*same as line height*/
        text-shadow: 2px 2px 4px #000000;
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        -webkit-transform: perspective(1000px) rotate3d(1,0,0,0);
        -moz-transform: perspective(1000px) rotate3d(1,0,0,0);
             transform: perspective(1000px) rotate3d(1,0,0,0);
        -webkit-transform-origin: 50% 0%;
        -moz-transform-origin: 50% 0%;
         -ms-transform-origin: 50% 0%;
          -o-transform-origin: 50% 0%;
             transform-origin: 50% 0%;
        -webkit-transition: max-height 0.35s, opacity 0.35s, -webkit-transform 0.35s;
        transition: max-height 0.35s, opacity 0.35s, -webkit-transform 0.35s;
        -o-transition: max-height 0.35s, opacity 0.35s, -o-transform 0.35s;
        -moz-transition: max-height 0.35s, opacity 0.35s, transform 0.35s, -moz-transform 0.35s;
        transition: max-height 0.35s, opacity 0.35s, transform 0.35s;
        transition: max-height 0.35s, opacity 0.35s, transform 0.35s, -webkit-transform 0.35s, -moz-transform 0.35s, -o-transform 0.35s;
    }
    .no-js .h-banner-link:hover .h-banner-subtitle {
        max-height: 0px;
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        -webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg);
        -moz-transform: perspective(1000px) rotate3d(1,0,0,90deg);
             transform: perspective(1000px) rotate3d(1,0,0,90deg);
    }

/*Banner learn more*/
.h-banner-more {
    font-size: 75%;
    line-height: 120%;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
}
    @media (min-width: 400px) and (max-width: 579px) {
        .h-banner-more {
            font-size: 85%;
        }
    }
    @media (min-width: 580px) {
        .h-banner-more {
            font-size: 92%;
        }
    }
    @media (min-width: 768px) {
        .h-banner-more {
            max-height: 0px;
            text-shadow: 2px 2px 4px #000000;
            /*ie8*/
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            opacity: 0;
            -webkit-transition: max-height 0.35s, opacity 0.35s, -webkit-transform 0.35s;
            transition: max-height 0.35s, opacity 0.35s, -webkit-transform 0.35s;
            -o-transition: max-height 0.35s, opacity 0.35s, -o-transform 0.35s;
            -moz-transition: max-height 0.35s, opacity 0.35s, transform 0.35s, -moz-transform 0.35s;
            transition: max-height 0.35s, opacity 0.35s, transform 0.35s;
            transition: max-height 0.35s, opacity 0.35s, transform 0.35s, -webkit-transform 0.35s, -moz-transform 0.35s, -o-transform 0.35s;
            -webkit-transform: perspective(1000px) translateY(-20px) rotate3d(1,0,0,90deg);
            -moz-transform: perspective(1000px) translateY(-20px) rotate3d(1,0,0,90deg);
                 transform: perspective(1000px) translateY(-20px) rotate3d(1,0,0,90deg);
            -webkit-transform-origin: 50% 0%;
            -moz-transform-origin: 50% 0%;
             -ms-transform-origin: 50% 0%;
              -o-transform-origin: 50% 0%;
                 transform-origin: 50% 0%;
        }
        .h-banner:hover .h-banner-more {
            max-height: 1.2em; /*same as line height*/
            /*ie8*/
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            opacity: 1;
            -webkit-transform: perspective(1000px) translateY(0px) rotate3d(1,0,0,0);
            -moz-transform: perspective(1000px) translateY(0px) rotate3d(1,0,0,0);
                 transform: perspective(1000px) translateY(0px) rotate3d(1,0,0,0);
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-banner-more {
        font-size: 92%;
        max-height: 0px;
        text-shadow: 2px 2px 4px #000000;
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        -webkit-transition: max-height 0.35s, opacity 0.35s, -webkit-transform 0.35s;
        transition: max-height 0.35s, opacity 0.35s, -webkit-transform 0.35s;
        -o-transition: max-height 0.35s, opacity 0.35s, -o-transform 0.35s;
        -moz-transition: max-height 0.35s, opacity 0.35s, transform 0.35s, -moz-transform 0.35s;
        transition: max-height 0.35s, opacity 0.35s, transform 0.35s;
        transition: max-height 0.35s, opacity 0.35s, transform 0.35s, -webkit-transform 0.35s, -moz-transform 0.35s, -o-transform 0.35s;
        -webkit-transform: perspective(1000px) translateY(-20px) rotate3d(1,0,0,90deg);
        -moz-transform: perspective(1000px) translateY(-20px) rotate3d(1,0,0,90deg);
             transform: perspective(1000px) translateY(-20px) rotate3d(1,0,0,90deg);
        -webkit-transform-origin: 50% 0%;
        -moz-transform-origin: 50% 0%;
         -ms-transform-origin: 50% 0%;
          -o-transform-origin: 50% 0%;
             transform-origin: 50% 0%;
    }
    .no-js .h-banner:hover .h-banner-more {
        max-height: 1.2em; /*same as line height*/
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        -webkit-transform: perspective(1000px) translateY(0px) rotate3d(1,0,0,0);
        -moz-transform: perspective(1000px) translateY(0px) rotate3d(1,0,0,0);
             transform: perspective(1000px) translateY(0px) rotate3d(1,0,0,0);
    }

/*Banner generic text*/
.h-banner-text {
    font-size: 85%;
    font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
    line-height: 125%;
    width: 100%;
    color: #fff;
    text-align: center;
}
    @media (min-width: 400px) {
        .h-banner-text {
            font-size: 100%;
        }
    }
    /*Banner specific adjustments*/
    .h-banner-sgdirectory .h-banner-text {
        color: #ffffff; 
    }
    .h-banner-jobs .h-banner-text:first-child {
        line-height: 120%;
        color: #fff;
        text-align: left;
    }
    @media (min-width: 400px) {
        .h-banner-jobs .h-banner-text:first-child {
            margin-bottom: 8px;
        }
    }
    .h-banner-jobs .h-banner-text:last-child {
        display: none;
    }
    /*show only in larger screens*/
    @media (min-width: 400px) {
        .h-banner-jobs .h-banner-text:last-child {
            display: block;
            font-size: 75%;
    font-family: Arial, Helvetica, sans-serif;
            text-align: left;
        }
    }
    .h-banner-socialInnovation .h-banner-text:first-child {
        font-size: 80%;
        color: #ff0126;
        text-align: left;
    }
    .h-banner-socialInnovation .h-banner-text:last-child {
        line-height: 120%;
        text-align: left;
    }

/**********************
*   Banners
**********************/
/*Banner sections*/
.hm-banners-bottom {
    padding-top: 1px;
    background-color: #fff;
}
    @media (min-width: 768px) {
        .hm-banners-bottom {
            position: relative;
            padding-top: 12px;
            padding-bottom: 12px;
            z-index: 1;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .hm-banners-bottom {
        position: relative;
        padding-top: 12px;
        padding-bottom: 12px;
        z-index: 1;
    }

.hm-banners-bottom:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: -1;
}

/**********************
*   Slider Component
**********************/
@media (min-width: 768px) {
    .hm-banner-slider {
        margin-bottom: 0.75em; /*12px of 16px base*/
    }
}
    /*no javascript, follow desktop*/
    .no-js .hm-banner-slider {
        margin-bottom: 0.75em; /*12px of 16px base*/
    }

.h-slider {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
}
    @media (min-width: 995px) {
        #electronic-systems-and-equipment {
            padding-top: 250px;
            overflow: visible;
        }
        #electronic-systems-and-equipment .h-slider {
            position: absolute;
            top: -60%;
            left: 50%;
            margin-left: -233.25px; /*half of width*/ 
        }
        #high-functional-materials-and-components {
            padding-top: 230px;
        }
        #high-functional-materials-and-components .h-slider {
            top: -100px;
        }
    }
    /*no javascript, follow desktop*/
    .no-js #electronic-systems-and-equipment {
        padding-top: 250px;
        overflow: visible;
    }
    .no-js #electronic-systems-and-equipment .h-slider {
        position: absolute;
        top: -60%;
        left: 50%;
        margin-left: -233.25px; /*half of width*/ 
    }
    .no-js #high-functional-materials-and-components {
        padding-top: 230px;
    }
    .no-js #high-functional-materials-and-components .h-slider {
        top: -100px;
    }
    .h-slider-products {
        padding: 0 12px;
        margin: 0 auto 20px; /*20px from title to text*/
    }
    @media (min-width: 580px) {
        .h-slider-products {
            width: 542px;
            padding: 0;
        }
    }
    @media (min-width: 768px) {
        .h-slider-products {
            width: 546px;
            padding: 0;
        }
    }
    @media (min-width: 995px) {
        .h-slider-products {
            top: 25px; /*arbitrary, make sliders overlap text*/
            width: 466.5px; /*965 / 2 - 16*/
            padding: 0;
        }
        .h-slider-left {
            float: left;
        }
        .h-slider-right {
            float: right;
            margin-right: 16px;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-slider-products {
        width: 466.5px; /*965 / 2 - 16*/
        padding: 0;
    }
    .no-js .h-slider-left {
        float: left;
    }
    .no-js .h-slider-right {
        float: right;
        margin-right: 16px;
    }
    .h-slider-center {
        margin: 0 auto 20px; /*20px from title to text*/
    }

/*area at bottom of slider to prevent caption collapsing when mouse hover*/
.h-slider-products:before {
    content: '';
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.25em;
    z-index: 1;
}

.owl-item {
    /*opacity: 0;*/
    /*transition: opacity 0.25s;*/
}
    .owl-item.active {
        /*opacity: 1;*/
        /*transition-delay: 0.5s;*/
    }

/*Link wrapping the slide*/
a.h-slide-link {
    display: block;
    width: 100%;
    text-decoration: none;
    overflow: hidden;
}
    /*No javascript, hide slides that're not the first*/
    .no-js .h-slide-link {
        display: none;
    }
    .no-js .h-slide-link:first-child {
        display: block;
    }

/*Slide*/
.h-slide {
    position: relative;
    background-color: #333; /*dark background for white text before images load*/
}
    /*products landing slides*/
    .no-js .h-slide-products {
        display: none;
    }
    .no-js .h-slide-products:first-child {
        display: block;
    }

/*Products slide*/
.h-slide-products:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    -webkit-transition: background-color 0.5s, -webkit-transform 0.5s;
    transition: background-color 0.5s, -webkit-transform 0.5s;
    -o-transition: background-color 0.5s, -o-transform 0.5s;
    -moz-transition: transform 0.5s, background-color 0.5s, -moz-transform 0.5s;
    transition: transform 0.5s, background-color 0.5s;
    transition: transform 0.5s, background-color 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s, -o-transform 0.5s;
    z-index: 1;
}
    .h-slide-products-showCaption:before {
        background-color: rgba(0, 0, 0, 0.3);
    }
    /*no javascript, follow desktop*/
    .no-js .h-slide-products:hover:before {
        background-color: rgba(0, 0, 0, 0.3);
    }
    .h-slide-products-showCaption.h-slide-products-light:before {
        background-color: rgba(255, 255, 255, 0.5); /*iwan*/
    }
    /*no javascript, follow desktop*/
    .no-js .h-slide-products-showCaption.h-slide-products-light:before {
        background-color: rgba(255, 255, 255, 0.3);
    }


/*Slide background image wrapper*/
.h-slide-imgBgWrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.h-slide-imgBgWrapper:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    -webkit-transition: background-color 0.5s, -webkit-transform 0.5s;
    transition: background-color 0.5s, -webkit-transform 0.5s;
    -o-transition: background-color 0.5s, -o-transform 0.5s;
    -moz-transition: transform 0.5s, background-color 0.5s, -moz-transform 0.5s;
    transition: transform 0.5s, background-color 0.5s;
    transition: transform 0.5s, background-color 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s, -o-transform 0.5s;
    z-index: 1;
}
    @media (min-width: 768px) {
        .h-slide:hover .h-slide-imgBgWrapper:before {
            background-color: rgba(0, 0, 0, 0.3);
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-slide:hover .h-slide-imgBgWrapper:before {
        background-color: rgba(0, 0, 0, 0.3);
    }

/*Slide image that acts like background image*/
.h-slide-imgBg {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    -moz-transition: transform 0.5s, -moz-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s, -o-transform 0.5s;
}
    @media (min-width: 768px) {
        .h-slide:hover .h-slide-imgBg {
            /*ie8 polyfill*/
            -sand-transform: scale(1.05);
            -webkit-transform: scale(1.05);
               -moz-transform: scale(1.05);
                -ms-transform: scale(1.05);
                 -o-transform: scale(1.05);
                    transform: scale(1.05);
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-slide:hover .h-slide-imgBg {
        /*ie8 polyfill*/
        -sand-transform: scale(1.05);
        -webkit-transform: scale(1.05);
           -moz-transform: scale(1.05);
            -ms-transform: scale(1.05);
             -o-transform: scale(1.05);
                transform: scale(1.05);
    }

/*Slide image*/
.h-slide-image {
    max-width: 100%;
}

.h-slide-topic,
.h-slide-header {
    color: #fff;
}

.h-slide-topic {
    font-size: 90%;
    font-family: Arial, Helvetica, sans-serif;
}

.h-slide-header {
    font-size: 150%;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 120%;
	font-weight:bold;
}
    @media (min-width: 768px) {
        .h-slide-header {
            /*insufficient space, reduce size*/
            font-size: 120%;
        }
    }
    @media (min-width: 995px) {
        .h-slide-header {
            /*sufficient space, resume size*/
            font-size: 150%;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-slide-header {
        font-size: 150%;
    }

.h-slide-excerpt {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px 15px 35px;
    /*ie8 polyfill*/
    background: -sand-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5)));
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    z-index: 1;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    -moz-transition: transform 0.5s, -moz-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s, -o-transform 0.5s;
}
@media (min-width: 768px) {
    .h-slide-excerpt {
        top: 100%;
        bottom: auto;
        /*not enough space for text, reduce padding bottom*/
        padding-bottom: 25px;
    }
    html:not(.SP) .h-slide:hover .h-slide-excerpt {
        /*ie8 polyfill*/
        -sand-transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
           -moz-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
             -o-transform: translateY(-100%);
                transform: translateY(-100%);
    }

    .h-slide-excerpt-twoLineHeader {
        /*ie8 polyfill*/
        -sand-transform: translateY(-140px);
        -webkit-transform: translateY(-140px);
           -moz-transform: translateY(-140px);
            -ms-transform: translateY(-140px);
             -o-transform: translateY(-140px);
                transform: translateY(-140px);
    }

    .h-slide-excerpt-oneLineHeader {
        /*ie8 polyfill*/
        -sand-transform: translateY(-110px);
        -webkit-transform: translateY(-110px);
           -moz-transform: translateY(-110px);
            -ms-transform: translateY(-110px);
             -o-transform: translateY(-110px);
                transform: translateY(-110px);
    }
}
@media (min-width: 995px) {
    .h-slide-excerpt {
        /*sufficient space, reset the padding bottom*/
        padding-bottom: 35px;
    }
}
    /*no javascript, follow desktop*/
    .no-js .h-slide-excerpt {
        padding-bottom: 35px;
    }
    .no-js .h-slide:hover .h-slide-excerpt {
        /*ie8 polyfill*/
        -sand-transform: translateY(0);
        -webkit-transform: translateY(0);
           -moz-transform: translateY(0);
            -ms-transform: translateY(0);
             -o-transform: translateY(0);
                transform: translateY(0);
    }
    .no-js .h-slide-excerpt-twoLineHeader {
        /*ie8 polyfill*/
        -sand-transform: translateY(120px);
        -webkit-transform: translateY(120px);
           -moz-transform: translateY(120px);
            -ms-transform: translateY(120px);
             -o-transform: translateY(120px);
                transform: translateY(120px);
    }
    .no-js .h-slide-excerpt-oneLineHeader {
        /*ie8 polyfill*/
        -sand-transform: translateY(100px);
        -webkit-transform: translateY(100px);
           -moz-transform: translateY(100px);
            -ms-transform: translateY(100px);
             -o-transform: translateY(100px);
                transform: translateY(100px);
    }

.h-slide-content {
    display: block;
    color: #fff;
    /*ie8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    z-index: 1;
    -webkit-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
    html:not(.SP) .h-slide:hover .h-slide-content {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    @media (max-width: 767px) {
        .h-slide-content {
            display: none;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-slide-content {
        display: block;
    }

.h-slide-header,
.h-slide-text {
    margin-bottom: 5px;
}

.h-slide-text {
    font-size: 85%;
    font-family: Arial, Helvetica, sans-serif;
	line-height:145%; /*added by Iwan*/
}

.h-slide-readMore {
    position: relative;
    color: #fff;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}
    .h-slide-readMore:hover {
        text-decoration: underline;
    }
    @media (min-width: 768px) {
        .h-slide-readMore {
            /*Not enough space, same size as slide text*/
            font-size: 85%;
        }
    }
    @media (min-width: 995px) {
        .h-slide-readMore {
            font-size: 95%; /*iwan*/
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-slide-readMore {
        font-size: 100%;
    }

.h-slide-readMore:before,
.h-slide-readMore:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 8px;
    right: -22px;
}
.h-slide-readMore:before {
    width: 15px;
    height: 1px;
    background-color: #fff;
}
.h-slide-readMore:after {
    bottom: 4px;
    width: 8px;
    height: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    /*ie8 polyfill*/
    -sand-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
@media (min-width: 995px) {
    .h-slide-readMore:after {
        bottom: 3px;
    }
}

/*Slider arrows navigation*/
.owl-nav {
    position: absolute;
    bottom: 10px;
    right: 30px;
    z-index: 1;
}
    .h-slider-paddingBottom .owl-nav {
        bottom: 25px;
    }
    @media (min-width: 767px) { /*reset to normal where there's no parallax*/
        .h-slider-paddingBottom .owl-nav {
            bottom: 10px;
        }
    }
    .h-slider-navLeft .owl-nav {
        right: auto;
        left: 3.5em;
    }
    @media (min-width: 580px) {
        .h-slider-navLeft .owl-nav {
            left: 3em;
        }
    }

.nav-button {
    /*reset button styles*/
    border: none;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
    background-color: transparent;
    /*don't display the text*/
    font-size: 0;
    display: block;
    position: absolute;
    top: 6px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #999;
    border-right: 2px solid #999;
    padding: 0;
    margin: 0;
    cursor: pointer;
}
    .hm-banner-slider .nav-button {
        width: 12px;
        height: 12px;
        border-color: #fff;
    }
    .nav-button-prev {
        left: -20px;
        /*ie8 polyfill*/
        -sand-transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
           -moz-transform: rotate(-135deg);
            -ms-transform: rotate(-135deg);
             -o-transform: rotate(-135deg);
                transform: rotate(-135deg);
    }
    .nav-button-next {
        right: -20px;
        /*ie8 polyfill*/
        -sand-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
                transform: rotate(45deg);
    }

.owl-prev,
.owl-next,
.h-slider-num {
    font-size: 80%;
    font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
    float: left;
    color: #fff;
}

.owl-next,
.h-slider-num {
    color: #999;
}

.h-slider-num {
    line-height: 160%;
}

.current {
    color: #fff;
}
    .h-slider-navBlack .current {
        color: #000;
    }

/*Slider dots navigation*/
.owl-dots {
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 100%;
    text-align: center;
}

.owl-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 10px;
    background-color: #fff;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}
    .owl-dot:last-child {
        margin-right: 0;
    }
    .owl-dot.active {
        background-color: #ff0126;
    }

/**********************
*   Slider Caption Component
**********************/
.h-caption {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2em 1.5em;
    -webkit-transition: opacity 0.5s, visibility 0.5s;
    -o-transition: opacity 0.5s, visibility 0.5s;
    -moz-transition: opacity 0.5s, visibility 0.5s;
    transition: opacity 0.5s, visibility 0.5s; /*add transition to deal with truncated text displaying in non active slides when using javascript truncation*/
}
    .h-caption-padding {
        padding: 2em 1.5em 2.2em;
    }
    .h-slider-paddingBottom .h-caption-padding {
        padding-bottom: 3em;
    }
    @media (min-width: 767px) {
        .h-slider-paddingBottom .h-caption-padding {
            padding-bottom: 2.2em;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-slider-paddingBottom .h-caption-padding {
        padding-bottom: 2.2em;
    }
    .owl-item .h-caption {
        visibility: hidden;
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    .active .h-caption {
        visibility: visible;
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }

.h-caption:after {
    content: '';
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba(0, 0, 0, 0.5);
    /*ie8 polyfill*/
    background: -sand-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.8)));
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.8)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
    .JS .h-caption:after {
        top: -19%; /*so edge meets image edge*/
    }
    /*White overlay instead of black*/
    .h-caption-white:after {
        background-color: rgba(255, 255, 255, 0.5);
        /*ie8 polyfill*/
        background: -sand-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.8)));
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.8)));
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
        background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
        background: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
    }
    .h-caption-transparent:after {
        background-color: transparent;
        background: none;
    }

.h-caption-arrows {
    width: auto !important; /*override owl-carousel style*/
    height: 0.75em;
    position: absolute;
    bottom: 2.5em;
    right: 1em;
    -webkit-transition: visibility 0.5s, opacity 0.5s, -webkit-transform 0.5s;
    transition: visibility 0.5s, opacity 0.5s, -webkit-transform 0.5s;
    -o-transition: visibility 0.5s, opacity 0.5s, -o-transform 0.5s;
    -moz-transition: transform 0.5s, visibility 0.5s, opacity 0.5s, -moz-transform 0.5s;
    transition: transform 0.5s, visibility 0.5s, opacity 0.5s;
    transition: transform 0.5s, visibility 0.5s, opacity 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s, -o-transform 0.5s;
    z-index: 1; /*above the background*/
}
    .owl-item .h-caption-arrows {
        visibility: hidden;
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    .active .h-caption-arrows {
        visibility: visible;
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    .h-caption-arrows.h-caption-arrows-rotate,
    .no-js .h-slide-products:hover .h-caption-arrows {
        /*ie8 polyfill*/
        -sand-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
           -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
             -o-transform: rotate(180deg);
                transform: rotate(180deg);
    }
    img.h-caption-arrows.h-caption-arrows-hidden { /*increased specificity to override owl carousel styles*/
        display: none;
    }

.h-caption-title {
    line-height: 140%;
    position: relative;
    font-size: 100%; /*16px*/
	font-weight:bold;
    font-family: Arial, Helvetica, sans-serif;
    z-index: 1;
}
    .h-caption-title-white {
        color: #fff;
    }
    .h-caption-title-black {
        color: #000;
    }

.h-caption-text {
    line-height: 140%;
    position: relative;
    font-size: 78%; /*12.48px*/
    font-family: Arial, Helvetica, sans-serif;
    padding-right: 1em; /*make space for arrows*/
    max-height: 12.6em; /*9 lines of text @ 140% line height, arbitrary*/
    overflow: hidden;
    -webkit-transition: max-height 0.5s;
    -o-transition: max-height 0.5s;
    -moz-transition: max-height 0.5s;
    transition: max-height 0.5s;
    z-index: 1;
}
    @media (min-width: 768px) {
        .h-caption-text {
            /*larger slide, more width for text, 6 lines height @ 140% of text, arbitrary*/
            max-height: 8.4em;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-caption-text {
        max-height: 8.4em;
    }
    /*this allows hover effect when javascript is disabled*/
    .h-caption-text-collapsed {
        /*only show 2 lines of text*/
        max-height: 2.8em; /*2 * 140% (line-height)*/
    }
    /*no javascript, follow desktop*/
    .no-js .h-caption-text-collapsed {
        max-height: 2.8em;
    }
    @media (max-width: 399px) {
        /*collapse all caption text for mobile*/
        .h-caption-text-collapsed {
            max-height: 0px;
        }
        .no-js .h-caption-text-collapsed {
            max-height: 0px;
        }
    }
    /*this allows hover effect when javascript is disabled*/
    /*only expand on hover when it's not a touch event*/
    /*no javascript*/
    .no-js .h-slide-products:not(.jsTouch):hover .h-caption-text-collapsed {
        max-height: 12.6em; /*9 lines of text, arbitrary*/
        -webkit-transition: max-height 0.5s;
        -o-transition: max-height 0.5s;
        -moz-transition: max-height 0.5s;
        transition: max-height 0.5s;
    }
    @media (min-width: 768px) {
        html:not(.SP) .h-slide-products:not(.jsTouch):hover .h-caption-text-collapsed {
            /*larger slide, more width for text, 6 lines height of text, arbitrary*/
            max-height: 8.4em;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-slide-products:not(.jsTouch):hover .h-caption-text-collapsed {
        max-height: 8.4em;
    }
    /*colors*/
    .h-caption-text-white {
        color: #fff;
    }
    .h-caption-text-black {
        color: #000;
    }

/**********************
*   News Releases
**********************/
.h-newsWrapper {
    background-color: #fff;
}
    @media (min-width: 768px) {
        .h-newsWrapper {
            background-color: transparent;
            padding: 0 15px;
        }
    }
    @media (min-width: 995px) {
        .h-newsWrapper {
            width: 965px;
            padding: 0;
            margin: 0 auto;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-newsWrapper {
        width: 965px;
        padding: 0;
        margin: 0 auto;
        background-color: transparent;
    }

.NewsReleases {
    padding-bottom: 0;
}
    @media (min-width: 768px) {
        .NewsReleases {
            display: table;
            width: 100%;
            table-layout: fixed;
            padding-top: 10px;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .NewsReleases {
        display: table;
        width: 100%;
        table-layout: fixed;
        padding-top: 10px;
    }

    @media (min-width: 768px) {
        .NewsReleases:after {
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
            content: ".";
        }
    }

/*Title Wrapper*/
    @media (min-width: 768px) {
        .NewsReleases-title {
            display: table-cell;
            float: none;
            vertical-align: middle;
            width: 150px;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .NewsReleases-title {
        display: table-cell;
        float: none;
        vertical-align: top;
        width: 150px;
    }

/*Title*/
.h-newsWrapper h2 {
    font-size: 140%;
    font-family: Arial, Helvetica, sans-serif;
    padding: 12px 15px;
    margin: 0;
    background: none;
}
    @media (min-width: 768px) {
        .h-newsWrapper h2 {
            font-size: 100%;
            padding: 0;
            border: none;
            color: #fff;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-newsWrapper h2 {
        font-size: 100%;
        padding: 0;
        border: none;
        color: #fff;
    }

/*News list*/
.h-newsWrapper .ResponsiveLinkListStyle {
    margin: 0;
}

/*News list item*/
    @media (min-width: 768px) {
        .h-newsWrapper .ResponsiveLinkListStyle dd,
        .h-newsWrapper .ResponsiveLinkListStyle dt {
            display: none;
        }

        .h-newsWrapper .ResponsiveLinkListStyle dd {
            margin-left: 8em;
        }
    }

.h-newsWrapper .ResponsiveLinkListStyle ul.LinkListStyle1 li {
    border: none !important;
    padding: 0 1px;
}
    @media (min-width: 768px) {
        .h-newsWrapper .ResponsiveLinkListStyle ul.LinkListStyle1 li {
            padding: 0;
        }
    }
    .h-newsWrapper .ResponsiveLinkListStyle ul.LinkListStyle1 li:hover {
        background-color: #f2f2f2;
    }
    @media (min-width: 768px) {
        .h-newsWrapper .ResponsiveLinkListStyle ul.LinkListStyle1 li:hover {
            background-color: transparent;
        }
    }

/*News list item link*/
.h-newsWrapper .ResponsiveLinkListStyle ul.LinkListStyle1 li a,
.h-newsWrapper .ResponsiveLinkListStyle ul.LinkListStyle1 li a:hover {
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
    padding: 15px 30px 15px 15px;
    margin: 0;
    border-top: 1px solid #ddd;
}
    @media (min-width: 768px) {
        .h-newsWrapper .ResponsiveLinkListStyle ul.LinkListStyle1 li a,
        .h-newsWrapper .ResponsiveLinkListStyle ul.LinkListStyle1 li a:hover {
            position: relative;
            display: inline-block;
            padding: 2px 15px;
            border-top: none;
            color: #fff;
            background: none;
            white-space: nowrap;
        }
    }

/*News item link arrow*/
.h-news-arrow {
    /*hide on mobile*/
    display: none;
}
    @media (min-width: 768px) {
        .h-news-arrow {
            position: relative;
            top: -1px;
            left: 0px;
            display: inline-block;
            width: 0.5em;
            height: 0.5em;
            border-top: 2px solid #fff;
            border-right: 2px solid #fff;
            margin-left: 0.5em;
            /*ie8 polyfill*/
            -sand-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
               -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                 -o-transform: rotate(45deg);
                    transform: rotate(45deg);
            -webkit-transition: left 0.2s;
            -o-transition: left 0.2s;
            -moz-transition: left 0.2s;
            transition: left 0.2s;
        }
        .h-newsWrapper .ResponsiveLinkListStyle ul.LinkListStyle1 li a:hover .h-news-arrow,
        .marquee-news a:hover .h-news-arrow {
            left: 2px;
        }
    }

/*Enable JS message*/
.h-newsWrapper .NewsReleaseListStatic {
    padding: 0 17px;
}
.JS .NewsReleases .NewsReleaseListStatic {
    display: none; /*Hide when there's JS*/
}

/*Buttons wrapper*/
.h-newsWrapper .ButtonStyle2 li {
    display: block;
    float: none;
    margin: 1px;
}
    .h-newsWrapper .ButtonStyle2 li:last-child {
        margin-bottom: 0;
    }
    @media (min-width: 768px) {
        .h-newsWrapper .Button {
            display: none;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-newsWrapper .Button {
        display: none;
    }

/*Buttons*/
.h-newsWrapper .ButtonStyle2 li a,
.h-newsWrapper .ButtonStyle2 li a:hover {
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 12px;
    padding-bottom: 12px;
}


/**********************
*   News Marquee and related
**********************/
/*Parent*/
    @media (min-width: 768px) {
        .NewsReleaseList {
            overflow: hidden;
        }
        .h-newsWrapper-expand .NewsReleaseList {
            overflow: visible;
        }

        .NewsReleases-content .DateListStyle2 {
            margin-bottom: 0;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .NewsReleases-content .DateListStyle2 {
        margin-bottom: 0;
    }

.marquee-news {
    display: none; /*hide on mobile*/
}
    @media (min-width: 768px) {
        .marquee-news {
            display: block;
            white-space: nowrap;
            /*ie8*/
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            opacity: 0;
            -webkit-transition: opacity 0.5s;
            -o-transition: opacity 0.5s;
            -moz-transition: opacity 0.5s;
            transition: opacity 0.5s;
        }
            .marquee-news-show {
                /*ie8*/
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                opacity: 1;
            }
    }

/*News items*/
    @media (min-width: 768px) {
        .marquee-news a {
            color: #fff;
            text-decoration: none;
        }
            .marquee-news a:hover {
                text-decoration: underline;
            }
    }

/*News date*/
.JS .ResponsiveLinkListStyle .DateListStyle2 strong.Date {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
}
    @media (min-width: 768px) {
        .marquee-news-date {
            margin-right: 45px;
            color: #fff;
        }
        .NewsReleases-content dt {
            color: #fff;
        }
    }

/*Controls*/
.NewsReleases-controls {
    display: table-cell;
    float: none;
    vertical-align: middle;
    width: 97px; /*3 buttons * (25 [width] + 7 [margin] + 1 [buffer])*/
}
    @media (max-width: 767px) {
        .NewsReleases-controls {
            display: none;
        }
    }
        .NewsReleases-controls-hidden {
            display: none;
        }
    /*no javascript, follow desktop*/
    .no-js .NewsReleases-controls {
        vertical-align: top;
    }

/*Controls buttons*/
    .NewsReleases-controls-pause,
    .NewsReleases-controls-play,
    .NewsReleases-controls-prev,
    .NewsReleases-controls-next {
        position: relative;
        float: left;
        width: 25px;
        height: 25px;
        margin-right: 7px;
        cursor: pointer;
    }
    .hm-top-overlay #HomeNewsReleases .NewsReleases-controls-pause:before,
    .hm-top-overlay #HomeNewsReleases .NewsReleases-controls-pause:after,
    .hm-top-overlay #HomeNewsReleases .NewsReleases-controls-play:after,
    .hm-top-overlay #HomeNewsReleases .NewsReleases-controls-prev:after,
    .hm-top-overlay #HomeNewsReleases .NewsReleases-controls-next:after {
        content: '';
        position: absolute;
    }

/*Pause button*/
    .NewsReleases-controls-pause:before,
    .NewsReleases-controls-pause:after {
        bottom: 6px;
        width: 3px;
        height: 12px;
        background-color: #fff;
    }

    .NewsReleases-controls-pause:before {
        right: 14px;
    }

    .NewsReleases-controls-pause:after {
        right: 8px;
    }

/*Play button*/
    .NewsReleases-controls-play:after {
        top: 4px;
        left: 9px;
        width: 0;
        height: 0;
        border: 8px solid #fff;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }

/*Prev and Next*/
    .NewsReleases-controls-prev:after,
    .NewsReleases-controls-next:after {
        width: 8px;
        height: 8px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
    }

/*Prev*/
    .NewsReleases-controls-prev:after {
        bottom: 8px;
        right: 6px;
        /*ie8 polyfill*/
        -sand-transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
           -moz-transform: rotate(-135deg);
            -ms-transform: rotate(-135deg);
             -o-transform: rotate(-135deg);
                transform: rotate(-135deg);
    }

/*Next*/
    .NewsReleases-controls-next:after {
        bottom: 8px;
        right: 10px;
        /*ie8 polyfill*/
        -sand-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
                transform: rotate(45deg);
    }

/*Content*/
    @media (min-width: 768px) {
        .NewsReleases-content {
            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                    box-sizing: border-box;
            display: table-cell;
            float: none;
            vertical-align: middle;
            width: 99%; /*expand table cell*/
            padding-left: 10px;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .NewsReleases-content {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        display: table-cell;
        float: none;
        vertical-align: middle;
        width: 99%; /*expand table cell*/
        padding-left: 10px;
    }

/**********************
*   Product Finder
**********************/
.h-banner-productFinder {
    overflow: visible;
}
    @media (min-width: 768px) {
        .h-banner-productFinder {
            margin-bottom: 0.75em; /*12px of 16px base*/
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-banner-productFinder {
        margin-bottom: 0.75em; /*12px of 16px base*/
    }

/*Replacement for product finder mask which is buggy*/
.ProductFinderMask {
    display: none;
}

.h-mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.55);
    z-index: -1;
    /*ie8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
}

/*Product Finder*/
/*#ProductFinder {}*/

/*Product Finder content wrapper*/
#ProductFinder .SectionProductSearch {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    /*center vertically within container*/
    /*position: absolute;*/
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
    width: 100%;
    padding: 4.5% 20px;/*arbitrary*/
}
    @media (min-width: 580px) {
        #ProductFinder .SectionProductSearch {
            padding: 8% 20px;/*arbitrary*/
        }
    }
    @media (min-width: 768px) {
        #ProductFinder .SectionProductSearch {
            min-height: 0;
            padding: 4% 20px;/*arbitrary to fit within center*/
            background-image: none;
        }
    }
    @media (min-width: 995px) {
        #ProductFinder .SectionProductSearch {
            padding: 3% 20px;/*arbitrary to fit within center*/
        }
    }
    /*no javascript, follow desktop*/
    .no-js #ProductFinder .SectionProductSearch {
        padding: 3% 20px;/*arbitrary to fit within center*/
    }

/*wrapper*/
#ProductFinder .ProductSearchDescription {
    position: relative;
    margin-bottom: 0;
}

/*Title*/
#ProductFinder h4 {
    font-size: 110%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    margin-bottom: 6px;
    color: #ff0126;
}

/*description*/
#ProductFinder .TextStyle1 {
    /*hide on mobile*/
    display: none;
    font-family: Arial, Helvetica, sans-serif;
}
    @media (min-width: 580px) {
        #ProductFinder .TextStyle1 {
            /*display when there's more space*/
            display: block;
            font-size: 80%;
        }
    }
    @media (min-width: 768px) {
        #ProductFinder .TextStyle1 {
            /*no space to display description*/
            display: none;
        }
    }
    @media (min-width: 995px) {
        #ProductFinder .TextStyle1 {
            /*sufficient space to display description*/
            display: block;
        }
    }
    /*no javascript, follow desktop*/
    .no-js #ProductFinder .TextStyle1 {
        font-size: 80%;
        display: block;
    }

#ProductFinder .ProductSearchDescription p {
    /*width: 80%;*/
    margin-bottom: 8px;
}

/*input wrapper*/
#ProductFinder .ProductSearchForm .SectionFormGroup {
    height: 44px;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    #ProductFinder .ProductSearchDescription,
    #ProductFinder .ProductSearchDescription p,
    #ProductFinder .ProductSearchForm {
        width: 100%;
    }
}

/*Search results*/
.h-banner-productFinder .ProductSearchDropdown {
    width: 100%;
    left: auto;
    right: 0;
}

.h-banner-productFinder .ProductSearchDropdown .row,
.h-banner-productFinder .ProductSearchDropdown .row .alpha,
.h-banner-productFinder .ProductSearchDropdown .row .category {
    display: block;
}

.h-banner-productFinder .ProductSearchDropdown {
    border: none;
}

/*result row*/
.h-banner-productFinder .ProductSearchDropdown .row {
    border-bottom: 1px solid #dbdcdd;
}

.h-banner-productFinder .ProductSearchDropdown .row small {
    display: block;
}

.h-banner-productFinder .ProductSearchDropdown .row .category {
    display: none;
}

/*hide X of Y results row*/
.h-banner-productFinder .ProductSearchDropdown .show-result {
    display: none;
}

.h-banner-productFinder .ProductSearchDropdown .ButtonStyle2 {
    width: 100%;
}

.h-banner-productFinder .ProductSearchDropdown .ButtonStyle2 a {
    cursor: pointer;
    padding: 9px 22px 9px 15px;
    background-color: #e60027;
    color: #ffffff;
    text-decoration: none;
    border-right: solid 3px transparent;
    display: block;
    margin: 0;
}
/**********************
*   SideNav Component
**********************/
/*container*/
.h-sideNav {
    display: none;
}
    @media (min-width: 580px) {
        .h-sideNav {
            display: block;
            position: fixed;
            right: 0;
            top: 0;
            margin-top: 196px; /*screen top to page title*/
            /*ie8 polyfill*/
            -sand-transform: translateX(-15px);
            -webkit-transform: translateX(-15px);
               -moz-transform: translateX(-15px);
                -ms-transform: translateX(-15px);
                 -o-transform: translateX(-15px);
                    transform: translateX(-15px);
            /*ie8*/
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            opacity: 1;
            visibility: visible;
            z-index: 999;
            -webkit-transition: top 1s, margin-top 1s, opacity 0.5s, visibility 0.5s, -webkit-transform 1s;
            transition: top 1s, margin-top 1s, opacity 0.5s, visibility 0.5s, -webkit-transform 1s;
            -o-transition: top 1s, margin-top 1s, opacity 0.5s, visibility 0.5s, -o-transform 1s;
            -moz-transition: top 1s, margin-top 1s, transform 1s, opacity 0.5s, visibility 0.5s, -moz-transform 1s;
            transition: top 1s, margin-top 1s, transform 1s, opacity 0.5s, visibility 0.5s;
            transition: top 1s, margin-top 1s, transform 1s, opacity 0.5s, visibility 0.5s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s;
        }
    }
    @media (min-width: 767px) {
        .h-sideNav {
            margin-top: 231px; /*screen top to page title*/
        }
    }
    @media (min-width: 995px) {
        .h-sideNav {
            right: 50%;
            /*ie8 polyfill*/
            -sand-transform: translateX(482.5px) translateY(0);
            -webkit-transform: translateX(482.5px) translateY(0);
               -moz-transform: translateX(482.5px) translateY(0);
                -ms-transform: translateX(482.5px) translateY(0);
                 -o-transform: translateX(482.5px) translateY(0);
                    transform: translateX(482.5px) translateY(0); /*half of container width*/
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-sideNav {
        display: block;
        position: fixed;
        top: 0;
        right: 50%;
        margin-top: 231px; /*screen top to page title*/
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        visibility: visible;
        z-index: 999;
        -webkit-transition: top 1s, margin-top 1s, opacity 0.5s, visibility 0.5s, -webkit-transform 1s;
        transition: top 1s, margin-top 1s, opacity 0.5s, visibility 0.5s, -webkit-transform 1s;
        -o-transition: top 1s, margin-top 1s, opacity 0.5s, visibility 0.5s, -o-transform 1s;
        -moz-transition: top 1s, margin-top 1s, transform 1s, opacity 0.5s, visibility 0.5s, -moz-transform 1s;
        transition: top 1s, margin-top 1s, transform 1s, opacity 0.5s, visibility 0.5s;
        transition: top 1s, margin-top 1s, transform 1s, opacity 0.5s, visibility 0.5s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s;
        /*ie8 polyfill*/
        -sand-transform: translateX(482.5px) translateY(0);
        -webkit-transform: translateX(482.5px) translateY(0);
           -moz-transform: translateX(482.5px) translateY(0);
            -ms-transform: translateX(482.5px) translateY(0);
             -o-transform: translateX(482.5px) translateY(0);
                transform: translateX(482.5px) translateY(0);
    }
    .h-sideNav-centered {
        top: 50%;
        margin-top: 0;
        /*ie8 polyfill*/
        -sand-transform: translateX(-15px) translateY(-50%);
        -webkit-transform: translateX(-15px) translateY(-50%);
           -moz-transform: translateX(-15px) translateY(-50%);
            -ms-transform: translateX(-15px) translateY(-50%);
             -o-transform: translateX(-15px) translateY(-50%);
                transform: translateX(-15px) translateY(-50%);
    }
    @media (min-width: 995px) {
        .h-sideNav-centered {
            margin-top: 0;
            /*ie8 polyfill*/
            -sand-transform: translateX(482.5px) translateY(-50%);
            -webkit-transform: translateX(482.5px) translateY(-50%);
               -moz-transform: translateX(482.5px) translateY(-50%);
                -ms-transform: translateX(482.5px) translateY(-50%);
                 -o-transform: translateX(482.5px) translateY(-50%);
                    transform: translateX(482.5px) translateY(-50%); /*half of container width*/
        }
    }
    .h-sideNav-hidden {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        visibility: hidden;
    }

/*list item*/
.h-sideNav-item {
    text-align: right;
    margin-bottom: 4px;
    height: 1.6em; /*same as 1 line height*/
}

/*actual link*/
a.h-sideNav-link,
a.h-sideNav-link:hover {
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    right: 0;
    font-size: 87.5%;
    text-decoration: none;
    padding: 0 24px 0 10px;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    color: #333; /*original color*/
    -webkit-transition: background-color 0.5s, color 0.5s;
    -o-transition: background-color 0.5s, color 0.5s;
    -moz-transition: background-color 0.5s, color 0.5s;
    transition: background-color 0.5s, color 0.5s;
}
    a.h-sideNav-link-white,
    a.h-sideNav-link-white:hover {
        color: #666;
    }
    a.h-sideNav-link-white:hover {
        background-color: #fff;
    }
    a.h-sideNav-link-black,
    a.h-sideNav-link-black:hover {
        color: #fff;
    }
    a.h-sideNav-link-black:hover {
        background-color: #999;
    }

/*larger circle*/
a.h-sideNav-link:before {
    content: '';
    position: absolute;
    top: 7px;
    right: 3px;
    width: 12px;
    height: 12px;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    -webkit-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    transition: background-color 0.5s;
}
    a.h-sideNav-link-white.h-sideNav-link-active:before {
        background-color: #fff;
    }
    a.h-sideNav-link-black.h-sideNav-link-active:before {
        background-color: #999;
    }

/*filled circle*/
a.h-sideNav-link:after {
    content: '';
    position: absolute;
    top: 10px;
    right: 6px;
    width: 6px;
    height: 6px;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    background-color: #333; /*original font color #333*/
    -webkit-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    transition: background-color 0.5s;
}
    a.h-sideNav-link-white:after {
        background-color: #fff;
    }
    a.h-sideNav-link-black:after {
        background-color: #999;
    }
    a.h-sideNav-link-white:hover:after {
        background-color: #666;
    }
    a.h-sideNav-link-black:hover:after {
        background-color: #fff;
    }

/*link text*/
.h-sideNav-linkText {
    display: inline-block;
    max-width: 0px;
    /*ie8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
    -webkit-transition: max-width 0.5s, opacity 0.5s;
    -o-transition: max-width 0.5s, opacity 0.5s;
    -moz-transition: max-width 0.5s, opacity 0.5s;
    transition: max-width 0.5s, opacity 0.5s;
}
    .h-sideNav-link:hover .h-sideNav-linkText {
        display: inline-block;
        max-width: 350px;
        -webkit-animation-name: fadeInSidenavText;
           -moz-animation-name: fadeInSidenavText;
             -o-animation-name: fadeInSidenavText;
                animation-name: fadeInSidenavText;
        -webkit-animation-duration: 0.25s;
           -moz-animation-duration: 0.25s;
             -o-animation-duration: 0.25s;
                animation-duration: 0.25s;
        -webkit-animation-delay: 0.25s;
           -moz-animation-delay: 0.25s;
             -o-animation-delay: 0.25s;
                animation-delay: 0.25s;
        -webkit-animation-fill-mode: forwards;
           -moz-animation-fill-mode: forwards;
             -o-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
    }
        @media (min-width: 995px) {
            .JS .h-sideNav-linkText-show {
                display: inline-block;
                max-width: 350px;
                /*ie8*/
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                opacity: 1;
            }
            .JS .h-sideNav-link:hover .h-sideNav-linkText-show:not(.h-sideNav-linkText-hide) {
                -webkit-animation: none;
                   -moz-animation: none;
                     -o-animation: none;
                        animation: none;
            }
            .h-sideNav-link-white .h-sideNav-linkText-show {
                color: #fff;
            }
            .h-sideNav-link-black .h-sideNav-linkText-show {
                color: #000;
            }
            .h-sideNav-link-white:hover .h-sideNav-linkText-show {
                color: #666;
            }
            .h-sideNav-link-black:hover .h-sideNav-linkText-show {
                color: #fff;
            }
        }
    .JS .h-sideNav-linkText-hide {
        max-width: 0px;
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }

/**********************
*   Page Title
**********************/
.h-titleWrapper {
    overflow: auto; /*allow margin of page title to add to titlewrapper height in firefox, else sidenav color toggle will have issues because boundaries don't meet exactly*/
}

.h-page-title {
    position: relative;
    font-size: 225%;
	font-weight:bold;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 125%;
    margin-bottom: 0.5em; /*arbitrary*/
	max-width:520px; /*iwan*/
}
    @media (min-width: 580px) {
        .h-page-title {
            margin-bottom: 85px; /*arbitrary*/
        }
    }
    @media (min-width: 768px) and (max-width: 994px) {
        .h-page-title {
            margin-left: 0 !important; /*@todo remove this*/
            max-width: 542px; /*arbitrary*/
        }
    }
    @media (min-width: 580px) {
        .h-page-title-white {
            font-size: 40px; /*iwan*/
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-page-title {
        margin-bottom: 85px;
        max-width:520px; /*iwan*/
    }
    /*no javascript, follow desktop*/
    .no-js .h-page-title-white {
        font-size: 40px;
    }
    .h-page-title-white {
        color: #fff;
    }

/**********************
*   Section Component
**********************/
.h-section {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
    width: 100%;
    min-height: 100%; /*min same height as browser, html, viewport*/
    padding: 3em 0;
    overflow: hidden; /*prevent background image div from overflowing*/
    background-color: #333; /*same as body*/
}
    @media (min-width: 768px) {
        .h-section {
            padding-bottom: 7em;
        }
    }
    @media (min-width: 995px) {
        .h-section {
            padding: 96px 0 102px;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-section {
        min-width: 965px; /*grid*/
        padding: 42px 0 102px;
    }
    .h-section-collapse {
        min-height: 0;
    }
    @media (min-width: 580px) {
        .h-section-mobilePadding {
            padding: 10em 0;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-section-mobilePadding {
        padding: 10em 0;
    }
    @media (min-width: 995px) {
        .h-section-centerChild {
            display: table;
            width: 100%;
            height: 100%; /*Debug FF no min-height on table*/
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-section-centerChild {
        display: table;
        width: 100%;
        height: 100%; /*Debug FF no min-height on table*/
    }
    .h-section-intro {
        padding-top: 43px;
        padding-bottom: 0;
    }
    .h-section-dark:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        -webkit-transition: background-color 0.5s;
        -o-transition: background-color 0.5s;
        -moz-transition: background-color 0.5s;
        transition: background-color 0.5s;
    }
    #electronic-systems-and-equipment,
    #high-functional-materials-and-components {
        background-color: #fff;
    }
    #information-telecommunication-systems {
        background-color: transparent;
    }

/**********************
*   Section Background images
**********************/
.h-section-backgroundWrapper {
    /*prevent overflow in #electronic-systems-and-equipment*/
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    overflow: hidden;
}

.h-section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: #333; /*same as body*/
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
    background-position: 50% 50%; /*centered*/
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
    .SP .h-section-background {
        /*on mobile devices, disable fixed bg*/
        background-attachment: scroll;
    }
    .h-section-background-relative {
        position: relative;
    }
    .h-section-background-hidden {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    .h-section-background-visible {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    .h-section-background:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        -webkit-transition: background-color 0.5s;
        -o-transition: background-color 0.5s;
        -moz-transition: background-color 0.5s;
        transition: background-color 0.5s;
    }
    .h-section-background-dark:before {
        background-color: rgba(0, 0, 0, 0.6);
    }
    .JS .h-section-background {
        /*don't show the background image by default, use javascript to change opacity when images are loaded*/
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        -webkit-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        transition: opacity 0.5s;
    }
    .JS .h-section-background.h-section-background-visible {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }

    #body {
        overflow: visible; /*so that bg overflows into next section*/
    }
	#body #bg-default {
         position: fixed;
         height: 120%;
         background-color: #333; /*same as body*/
         background-image: url("/image/products/productlanding_bg.jpg");
     }
    .JS #body #bg-default {
        /*don't show the background image by default, use javascript to change opacity when images are loaded*/
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        -webkit-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        transition: opacity 0.5s;
    }
    .JS #body #bg-default.h-section-background-visible {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    /*no javascript, static background image*/
    .no-js #body #bg-default {
        position: absolute;
    }
    /*no javascript, dark image so words can be seen clearly*/
    .no-js #body #bg-default:before {
        background-color: rgba(0, 0, 0, 0.6);
    }
    .bg-transition {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #333; /*same as body*/
        background-image: url("/image/products/information-and-communication-technology.jpg");
        -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
                background-size: cover;
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    .bg-transition-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        opacity: 0.5;
    }
    /*no javascript, no transition needed, also reveals product finder section*/
    .no-js .bg-transition {
        display: none;
    }

    /*no javascript, show background image for ITC section*/
    .no-js #information-telecommunication-systems .h-section-background {
        background-image: url("/image/products/information-and-communication-technology.jpg");
    }

    /*if there's javascript, don't show the background image*/
    .JS #information-telecommunication-systems .h-section-background {
        display: none;
    }

    #power-systems .h-section-background {
        background-image: url("/image/products/power-systems.jpg");
    }

    #social-infrastructure-and-industrial-systems .h-section-background {
        background-image: url("/image/products/social-infrastructure-and-industrial-systems.jpg");
    }

    #electronic-systems-and-equipment .h-section-background {
        background-color: #fff; /*white background for black text before images load*/
        background-image: url("/image/products/electronics.jpg");
    }

    #construction-machinery .h-section-background {
        background-image: url("/image/products/construction-machinery.jpg");
    }

    #high-functional-materials-and-components .h-section-background {
        background-color: #fff; /*white background for black text before images load*/
        background-image: url("/image/products/material.jpg");
    }

    #automotive-systems .h-section-background {
        background-image: url("/image/products/automotive-systems.jpg");
    }

    #smart-life-and-ecofriendly-systems {
        background-position: right center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-color: #fff; /*white background for black text before images load*/
        -webkit-background-size: auto 120%;
           -moz-background-size: auto 120%;
             -o-background-size: auto 120%;
                background-size: auto 120%;
        background-image: url("/image/products/home-appliances.jpg");
    }
        .SP #smart-life-and-ecofriendly-systems {
            /*on mobile devices, disable fixed bg*/
            background-attachment: scroll;
        }
    @media (min-width: 996px) {
        #smart-life-and-ecofriendly-systems {
            background-position: center;
            -webkit-background-size: cover;
               -moz-background-size: cover;
                 -o-background-size: cover;
                    background-size: cover;
        }
    }

    #product-finder {
        padding: 0;
        background-color: #fff;
    }
    /*no javascript, fix a height so it is visible yet with reveal effect*/
    .no-js #product-finder {
        height: 358px; /*height of footer*/
    }
    #product-finder .h-section-inner {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding-bottom: 156px; /*Height of footer*/
        background-image: url("/image/products/product-finder.jpg");
        -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
                background-size: cover;
        background-position: left center;
    }
    @media (min-width: 768px) {
        #product-finder .h-section-inner {
            padding-bottom: 199px; /*Height of footer*/
            background-position: 88% center;
        }
    }
    /*no javascript, follow desktop*/
    .no-js #product-finder .h-section-inner {
        padding-bottom: 101px; /*Height of footer*/
    }
    @media (min-width: 580px) {
        #product-finder .h-section-contentWrapper {
            background-position: right;
        }
    }

/**********************
*   Section Content Container, for centering
**********************/
@media (min-width: 995px) {
    .h-section-contentContainer {
        display: table-cell;
        vertical-align: middle;
    }
}
/*no javascript, follow desktop*/
.no-js .h-section-contentContainer {
    display: table-cell;
    vertical-align: middle;
}

/**********************
*   Section Content
**********************/
.h-section-content {
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 0 17px;
}
    @media (min-width: 580px) {
        .h-section-content {
            padding: 0 17px;
        }
    }
    @media (min-width: 995px) {
        .h-section-content {
            width: 965px;
            padding: 0;
            margin: 0 auto;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-section-content {
        width: 965px;
        padding: 0;
        margin: 0 auto;
    }
    .h-section-content-paddingMobile {
        padding: 96px 17px 102px;
    }
    @media (min-width: 580px) {
        .h-section-content-paddingMobile {
            padding: 96px 17px 102px;
        }
    }
    @media (min-width: 995px) {
        .h-section-content-paddingMobile {
            padding: 96px 0 102px;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-section-content-paddingMobile {
        padding: 96px 0 102px;
    }
.h-section-content:after {
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    content: ".";
}

/**********************
*   Section Content Copy
**********************/
.h-section-copy {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
    @media (min-width: 995px) {
        .h-section-copy {
            width: 466.5px; /*965 / 2 - 16*/
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-section-copy {
        width: 466.5px; /*965 / 2 - 16*/
    }
    .h-section-copy-center {
        margin: 0 auto;
        text-align: center;
    }
    .JS .jsIntroText {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=*0)";
        opacity: 0; /*Hide the intro text so it doesn't flash whil javascript is loading*/
    }
    .h-section-copy-bgLayer {
        padding: 2.25em 0.75em;
        background-color: rgba(0, 0, 0, 0.66);
    }
        @media (min-width: 580px) {
            .h-section-copy-bgLayer {
                padding: 6em 0.75em;
            }
        }
        @media (min-width: 995px) {
            .h-section-copy-bgLayer {
                padding: 6em 4.75em;
            }
        }
    @media (min-width: 995px) {
        .h-section-copy-left {
            float: left;
        }
        .h-section-copy-right {
            float: right;
        }
        .h-section-copy-large {
            width: 832px; /*arbitrary*/
            padding: 96px 76px;
        }
        .h-section-copy-wide {
            width: 885px;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-section-copy-left {
        float: left;
    }
    .no-js .h-section-copy-right {
        float: right;
    }
    .no-js .h-section-copy-large {
        width: 832px; /*arbitrary*/
        padding: 96px 76px;
    }
    .no-js .h-section-copy-wide {
        width: 885px;
    }

.h-section-textCopy {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
    @media (min-width: 995px) {
        .h-section-textCopy {
            padding-left: 0;
            padding-right: 18px; /*prevent overlap with sidenav*/
        }
        /*section specific adjustments*/
        #construction-machinery .h-section-textCopy,
        #automotive-systems .h-section-textCopy {
            padding-right: 0; /*no need to prevent overlap*/
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-section-textCopy {
        padding-left: 0;
        padding-right: 18px;
    }
    .h-section-textCopy-left {
        padding-right: 24px;
    }
        @media (min-width: 995px) {
            .h-section-textCopy-left {
                padding-left: 0;
                padding-right: 0;
            }
        }
    /*no javascript, follow desktop*/
    .no-js .h-section-textCopy-left {
        padding-left: 0;
        padding-right: 0;
    }
    .h-section-textCopy-right {
        padding-left: 24px;
    }
        @media (min-width: 995px) {
            .h-section-textCopy-right {
                padding-left: 0;
            }    
        }
    /*no javascript, follow desktop*/
    .no-js .h-section-textCopy-right {
        padding-left: 0;
    }    
    .h-section-textCopy-center {
        padding-left: 12px;
        padding-right: 12px;
    }

.h-section-copyText {
    position: relative;
    padding: 16px 0;
}
    @media (min-width: 995px) {
        .h-section-copyText {
            padding-right: 18px; /*prevent overlap with sidenav*/
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-section-copyText {
        padding-right: 18px;
    }
    .h-section-copyText-bgGrey:before {
        content: '';
        width: 300%;
        height: 300%;
        position: absolute;
        top: -11em;
        right: -100%;
        background-color: #fff;
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
        opacity: 0.4;
    }
        @media (min-width: 995px) {
            .h-section-copyText-bgGrey:before {
                width: 183%; /*arbitrary*/
                height: 183%; /*arbitrary*/
                right: -32px;
            }
        }
        /*no javascript, follow desktop*/
        .no-js .h-section-copyText-bgGrey:before {
            width: 183%; /*arbitrary*/
            height: 183%; /*arbitrary*/
            right: -32px;
        }

.h-section-title {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
    font-size: 170%; /*to fit min width of 320px*/
    line-height: 110%;
    padding-bottom: 28px;
    margin-bottom: 28px;
}
    @media (min-width: 480px) {
        .h-section-title {
            font-size: 225%; /*36px*/
        }
    }
    .h-section-title-right {
        text-align: right;
    }
    .h-section-title-center {
        margin-left: 24px;
        margin-right: 24px;
        text-align: center;
    }
    @media (min-width: 580px) {
        .h-section-title-left {
            text-align: left;
        }
        .h-section-title-center {
            margin-left: 0;
            margin-right: 0;
        }
    }
    @media (min-width: 995px) {
        .h-section-title-left {
            margin-left: -96px;
            text-align: left;
        }
        .h-section-title-right {
            margin-right: -96px;
            text-align: right;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-section-title-left {
        margin-left: -96px;
        text-align: left;
    }
    /*no javascript, follow desktop*/
    .no-js .h-section-title-right {
        margin-right: -96px;
        text-align: right;
    }
    .h-section-title-white {
        color: #fff;
    }
    .h-section-title-black {
        color: #000;
    }
    .h-section-title-thin {
    font-family: Arial, Helvetica, sans-serif;
    }

.h-section-title-narrow {
    display: inline-block;
    width: 100%;
}
    @media (min-width: 580px) {
        .h-section-title-narrow {
            max-width: 525px; /*arbitrary*/
        }
    }
    @media (min-width: 768px) {
        #information-telecommunication-systems .h-section-title-narrow {
            max-width: 650px; /*arbitrary*/
        }
    }
    @media (min-width: 995px) {
        #information-telecommunication-systems .h-section-title-narrow {
            max-width: 525px; /*arbitrary*/
        }
    }
    /*no javascript, follow desktop*/
    .no-js #information-telecommunication-systems .h-section-title-narrow {
        max-width: 525px;
    }

.h-title-borderWrapper {
    display: block;
    width: 100%;
    height: 16px;
    position: absolute;
    bottom: -0.4em;
    left: 0;
    overflow: hidden;
}
    @media (min-width: 768px) {
        .h-title-borderWrapper {
            width: 99%;
        }
    }
    .no-js .h-title-borderWrapper {
        width: 100%;
    }
.h-title-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 965px;
    height: 16px;
    /*ie8 polyfill*/
    -sand-transform: translateX(-52px);
    -webkit-transform: translateX(-52px);
       -moz-transform: translateX(-52px);
        -ms-transform: translateX(-52px);
         -o-transform: translateX(-52px);
            transform: translateX(-52px); /*on mobile only show 60px of left segment (112-52=60)*/
}
    .h-splash-title .h-title-border path,
    .h-section-title-white .h-title-border path {
        stroke: #fff;
    }
    .h-section-title-black .h-title-border path {
        stroke: #000;
    }
    @media (min-width: 580px) {
        .h-title-border {
            /*ie8 polyfill*/
            -sand-transform: none;
            -webkit-transform: none;
               -moz-transform: none;
                -ms-transform: none;
                 -o-transform: none;
                    transform: none; /*Use javascript to set transform*/
        }
    }

.h-section-subtitle {
    position: relative;
    font-size: 135%; /*iwan*/
    font-family: Arial, Helvetica, sans-serif;
    line-height: 110%;
    margin-bottom: 8px; /*iwan*/
    color: #000;
}
    .h-section-subtitle-white {
        color: #fff;
    }
    .h-section-subtitle-black {
        color: #000;
    }

.h-section-text {
    position: relative;
    font-size: 100%; /*16px*/
    font-family: Arial, Helvetica, sans-serif;
    /*ie8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
}
.h-section-text:last-of-type {
    margin-bottom: 42px;
}
    .h-section-text-white {
        color: #fff;
    }
    .h-section-text-black {
        color: #000;
    }
    .h-section-text-center {
        text-align: center;
    }
    .h-section-text-intro {
    font-family: Arial, Helvetica, sans-serif;
        font-size: 110%; /*iwan*/
        margin-bottom: 30px;
    }

.h-section-text strong {
    font-size: 150%; /*24px*/
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: inherit;
}
    .h-section-text-white strong {
        color: #fff;
    }
    .h-section-text-black strong {
        color: #000;
    }

a.h-section-readMore,
a.h-section-readMore:hover {
    position: relative;
    font-size: 100%; /*16px*/
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0.4em 1em;
    border: 1px solid #333; /*Original font color #333*/
    text-decoration: none;
    color: #333; /*Original font color #333*/
}
    a.h-section-readMore-white:hover,
    a.h-section-readMore-white {
        color: #fff;
        border-color: #fff;
    }
    a.h-section-readMore-black:hover,
    a.h-section-readMore-black {
        color: #000;
        border-color: #000;
    }
    a.h-section-readMore-xl,
    a.h-section-readMore-xl:hover {
        font-size: 125%; /*To fit the screen width of 320px*/
    }
        @media (min-width: 480px) {
            a.h-section-readMore-xl,
            a.h-section-readMore-xl:hover {
                font-size: 150%; /*24px*/
            }
        }
        @media (min-width: 580px) {
            a.h-section-readMore-xl,
            a.h-section-readMore-xl:hover {
                padding: 0.8em 1.2em 0.8em 1em;
            }
        }
        .no-js a.h-section-readMore-xl,
        .no-js a.h-section-readMore-xl:hover {
            padding: 0.8em 1.2em 0.8em 1em;
        }
    a.h-section-readMore-thin,
    a.h-section-readMore-thin:hover {
    font-family: Arial, Helvetica, sans-serif;
    }

/*SVG Arrow*/
.h-section-readMore-arrow {
    position: relative;
    left: 0;
    margin-left: 0.4em;
    stroke: #333; /*default color*/
    -webkit-transition: left 0.2s;
    -o-transition: left 0.2s;
    -moz-transition: left 0.2s;
    transition: left 0.2s;
}
.h-section-readMore-xl .h-section-readMore-arrow svg {
    width: 28px;
    height: 22px;
}
.h-section-readMore-arrow svg {
    width: 13px;
    height: 11px;
}
.h-section-readMore-xl .h-section-readMore-arrow path {
    stroke-width: 6px;
}
.h-section-readMore-arrow svg path {
    stroke-width: 7px;
}
    a.h-section-readMore-black .h-section-readMore-arrow {
        stroke: #000;
    }
    a.h-section-readMore-white .h-section-readMore-arrow {
        stroke: #fff;
    }
    a.h-section-readMore:hover .h-section-readMore-arrow {
        left: 2px;
    }
/*banner read more arrow*/
.h-banner .h-section-readMore-arrow {
    stroke: #fff;
}
.h-banner .h-section-readMore-arrow svg {
    height: 10px;
}
.h-banner .h-section-readMore-arrow path {
    stroke-width: 10px;
}

/**********************
*   Bg Video
**********************/
.video-wrapper {
    position: fixed;
    top: 0;
	bottom: 0;
    left: 50%;
    width: 100%; /*Use javascript to set the width*/
    min-height: 120%;
    /*ie8 polyfill*/
    -sand-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
}
    .video-wrapper-hidden {
        display: none;
    }
.video-wrapper:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.videoBg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

/**********************
*   Aspect Ratios
**********************/
.aspect {
    position: relative;
    width: 100%;
    height: 0;
}
    .aspect-noOverflow {
        overflow: hidden;
    }
    /*hitachi social innovation red banner aspect ratio*/
    .aspect-230-100 {
        padding-top: 43.4782609%;
    }
    /*bottom social innovation business tall banner mobile aspect ratio*/
    .aspect-232-300 {
        padding-top: 129.310345%;
    }
    /*bottom social innovation business tall banner tablet aspect ratio*/
    @media (min-width: 768px) {
        .aspect-232-312 {
            padding-top: 134.482759%;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .aspect-232-312 {
        padding-top: 134.482759%;
    }
    /*@media (min-width: 768px) {*/
        /*bottom small banners original aspect ratio on tablet, e.g. corporate brochure*/
        .aspect-23225-15000 {
            padding-top: 64.5855759%
        }
    /*}*/
    /*unused product finder mobile aspect ratio if follow hitachi social innovation red banner*/
    .aspect-460-100 {
        padding-top: 21.7391304%;
    }
    /*slider aspect ratio mobile*/
    .aspect-460-200 {
        padding-top: 43.4782609%;
    }
    /*product finder mobile aspect ratio*/
    .aspect-46450-15000 {
        padding-top: 32.2927879%;
    }
    @media (min-width: 768px) {
        /*product finder tablet aspect ratio*/
        .aspect-4765-1500 {
            padding-top: 31.4795383%;
        }
        /*slider aspect ratio tablet and above*/
        .aspect-4765-3120 {
            padding-top: 65.4774397%;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .aspect-4765-1500 {
        padding-top: 31.4795383%;
    }
    .no-js .aspect-4765-3120 {
        padding-top: 65.4774397%;
    }

/*Element specific adjustments*/
/*products banner, co-creating a better tomorrow at desktop*/
.aspect-products {
    /*at mobile - tablets, it's 460px (w) by 100px (h)*/
    padding-top: 21.7391304%;
}
@media (min-width: 768px) {
    .aspect-products {
        /*at desktop, aspect ratio of 476.5px (w) by 100px (h)*/
        /*calculations: 965 (grid width) * 50% - 6px (gutter)*/
        padding-top: 20.9863589%;
    }
}

.aspect-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/**********************
*   Utility
**********************/
.h-visible-desktop {
    display: none;
}
    @media (min-width: 768px) {
        .h-visible-desktop {
            display: block;
        }
    }
    /*no javascript, follow desktop*/
    .no-js .h-visible-desktop {
        display: block;
    }

/**********************
*   z-index for Products Landing Page
**********************/
.h-section {
    z-index: 2;
}
#body {
    z-index: 1; /*so that its position:fixed bg element can be overlapped by subsequent sections*/
}
    /*no javascript, revert to same z-index as other sections. Due to order in DOM, it will be below other sections*/
    .no-js #body {
        z-index: 2;
    }
    .bg-transition {
        z-index: 3; /*above the following section*/
    }
#construction-machinery {
    z-index: 0; /*below all sections so that its fixed video child doesn't overlap #body*/
}
    /*no javascript, revert usual z-index so section is not hidden beneath other layers*/
    .no-js #construction-machinery {
        z-index: 2;
    }
    #construction-machinery.h-section-aboveIntro {
        z-index: 1; /*above #body courtesy of its later order in the dom. added via javascript*/
    }
    #construction-machinery .h-section-background {
        z-index: -2; /*So that video shows*/
    }
    #construction-machinery .video-wrapper {
        z-index: 0;
    }
    .video-wrapper:before {
        z-index: 1; /*Prevent right click from accessing iframe below*/
    }
    /*no javascript, no video*/
    .no-js #construction-machinery .video-wrapper {
        display: none;
    }
#product-finder {
    z-index: 0; /*below all sections so that its fixed child doesn't overlap #body*/
}
    /*no javascript, still below other sections for reveal effect, but not covered by bg of other sections*/
    .no-js #product-finder {
        z-index: 1;
    }
    #product-finder.h-section-aboveIntro {
        z-index: 1; /*above #body courtesy of its later order in the dom. added via javascript*/
    }
    .h-section-content {
        z-index: 2;
    }

        .h-figure {
            z-index: 1;
        }

        .h-slider {
            z-index: 1;
        }

            .h-section-title {
                z-index: 2
            }

    .h-scrollIndicator {
        z-index: 3;
    }

/**********************
*   Home page specific
**********************/
html.full {
    /*same size as viewport*/
    width: 100%;
    height: 100%;
    overflow-x: hidden; /*debug IE 9 horizontal scrollable*/
}

body.front {
    /*same size as viewport*/
    width: 100%;
    height: 100%;
    min-height: 582px; /*146 (header) + 148 + 40 (tagline and position top) + 150 + 98 (banners and position bottom)*/
}

html, body {
    min-width: 320px;
}
html.no-js,
.no-js body {
    min-width: 965px;
	    
}

html.no-js {overflow-x: scroll;} /*provide horizonal scroll for mobile when javascript off, iwan*/

#home-splash {
    z-index: -1;
}
    /*no javascript, static background image*/
    .no-js #home-splash {
        position: absolute;
        top: 146px; /*height of header, so that there's no blank space when browser height is small. also see #home-splash .h-splash-bg*/
        min-width: 965px;
    }

#home-splash:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*ie8*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#1A000000,endColorstr=#1A000000); 
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 1;
    -webkit-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    transition: background-color 0.5s;
}
    #home-splash.home-splash-dark:before {
        /*ie8*/
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000); 
        background-color: rgba(0, 0, 0, 0.5);
    }

#home-splash .h-splash-bg {
    background-position: center top;
}
    .no-js #home-splash .h-splash-bg {
        top: -146px; /*height of header, offset #home-splash position so image displays the same position as when js is enabled*/
    }

/*on mobile, don't show the video*/
.SP .h-splash-bgVideo {
    display: none;
}
/*On small screens, hide the video*/
@media (max-width: 767px) {
    .h-splash-bgVideo {
        display: none;
    }
}
@media (max-width: 995px) {
	.h-splash-bgVideo-products {
		display: none;}
}

.FatMenuWide {
    position: relative;
    z-index: 1;
}

#Footer {
    position: relative;
    z-index: 1;
}

/*no javascript, style this so that products landing fixed products finder cannot be visible through this element*/
.no-js #webtrends {
    position: relative;
    min-width: 965px;
    z-index: 1; /*so it can be above other elements on page*/
    background-color: #e5e5e5; /*footer color to prevent fixed bg from showing when there's no javascript*/
}

#PageTopBottom {
    position: relative;
    z-index: 1;
}

/**********************
*   Product landing page specific
**********************/
body[data-page="products"] {
    width: 100%;
    height: 100%;
}

#intro-content {
    z-index: 3;
}

/**********************
*   Product details page specific
**********************/
#splash-top .h-scrollIndicator {
    bottom: 3em;
}
/*default*/
.products-listing .h-splash {
    background-color: #333; /*dark background for white text before images load*/
    /*NOTE: Because of background color, section MUST have an image, else it'll just display background color*/
}
    /*darken image by default*/
    .products-listing .h-section-background:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-transition: background-color 0.5s;
        -o-transition: background-color 0.5s;
        -moz-transition: background-color 0.5s;
        transition: background-color 0.5s;
    }
/*it-systems*/
.products-listing.it-systems #splash-top .h-splash-bg {
    background-image: url("/image/products/it_systems/it-systems-bg.jpg");
}
.products-listing.it-systems .h-splash-bg-1 {
    background-image: url("/image/products/it_systems/it-systems-bottom-1.jpg");
}
.products-listing.it-systems .h-splash-bg-2 {
    background-image: url("/image/products/it_systems/it-systems-bottom-2.jpg");
}
/*power-systems*/
.products-listing.power-systems #splash-top .h-splash-bg {
    background-image: url("/image/products/power_systems/power-systems-bg.jpg");
}
.products-listing.power-systems .h-splash-bg-1 {
    background-image: url("/image/products/power_systems/power-systems-bottom-1.jpg");
}
.products-listing.power-systems .h-splash-bg-2 {
    background-image: url("/image/products/power_systems/power-systems-bottom-2.jpg");
}
/*social-infra*/
.products-listing.social-infra #splash-top .h-splash-bg {
    background-image: url("/image/products/socialinfra/socialinfra-industrial-bg.jpg");
}
.products-listing.social-infra .h-splash-bg-1 {
    background-image: url("/image/products/socialinfra/socialinfra-industrial-bottom-1.jpg");
}
.products-listing.social-infra .h-splash-bg-2 {
    background-image: url("/image/products/socialinfra/socialinfra-industrial-bottom-2.jpg");
}
.products-listing.social-infra .h-splash-bg-3 {
    background-image: url("/image/products/socialinfra/socialinfra-industrial-bottom-3.jpg");
}
.products-listing.social-infra .h-splash-bg-4 {
    background-image: url("/image/products/socialinfra/socialinfra-industrial-bottom-4.jpg");
}
.products-listing.social-infra .h-splash-bg-5 {
    background-image: url("/image/products/socialinfra/socialinfra-industrial-bottom-5.jpg");
}
/*electronics*/
.products-listing.electronics #splash-top .h-splash-bg {
    background-image: url("/image/products/electronics/electronic-systems-bg.jpg");
}
.products-listing.electronics .h-splash-bg-1 {
    background-image: url("/image/products/electronics/electronic-systems-bottom-1.jpg");
}
.products-listing.electronics .h-splash-bg-2 {
    background-image: url("/image/products/electronics/electronic-systems-bottom-2.jpg");
}
/*
.products-listing.electronics .h-splash-bg-3 {
    background-image: url("/image/products/electronics/electronic-systems-bottom-3.jpg");
}*/
/*construction*/
.products-listing.construction #splash-top .h-splash-bg {
    background-image: url("/image/products/construction/construction-machinery-bg.jpg");
}
.products-listing.construction .h-splash-bg-1 {
    background-image: url("/image/products/construction/construction-machinery-bottom-1.jpg");
}
/*hi-functional*/
.products-listing.hi-functional #splash-top .h-splash-bg {
    background-image: url("/image/products/hi-functional/hi-functional-material-bg.jpg");
}
.products-listing.hi-functional .h-splash-bg-1 {
    background-image: url("/image/products/hi-functional/hi-functional-bottom-1.jpg");
}
/*automotive*/
.products-listing.automotive #splash-top .h-splash-bg {
    background-image: url("/image/products/automotive/automotive-bg.jpg");
}
.products-listing.automotive .h-splash-bg-1 {
    background-image: url("/image/products/automotive/automotive-bottom-1.jpg");
}
/*smart-life*/
.products-listing.smart-life #splash-top .h-splash-bg {
    background-image: url("/image/products/smart-life/smart-life-bg.jpg");
}
.products-listing.smart-life .h-splash-bg-1 {
    background-image: url("/image/products/smart-life/smart-life-bottom-1.jpg");
}
.products-listing.smart-life .h-splash-bg-2 {
    background-image: url("/image/products/smart-life/smart-life-bottom-2.jpg");
}
/*
.products-listing.smart-life .h-splash-bg-3 {
    background-image: url("/image/products/smart-life/smart-life-bottom-3.jpg");
}*/
@-webkit-keyframes zoom {
    0% {
        /*small 0.1deg rotations needed to debug IE scale jumpy bug*/
        -webkit-transform: scale(1) rotate(0.1deg);
                transform: scale(1) rotate(0.1deg);
    }

    100% {
        -webkit-transform: scale(1.2) rotate(0.1deg);
                transform: scale(1.2) rotate(0.1deg);
    }
}

@-moz-keyframes zoom {
    0% {
        -moz-transform: scale(1) rotate(0.1deg);
             transform: scale(1) rotate(0.1deg);
    }

    100% {
        -moz-transform: scale(1.2) rotate(0.1deg);
             transform: scale(1.2) rotate(0.1deg);
    }
}

@-o-keyframes zoom {
    0% {
        -o-transform: scale(1) rotate(0.1deg);
           transform: scale(1) rotate(0.1deg);
    }

    100% {
        -o-transform: scale(1.2) rotate(0.1deg);
           transform: scale(1.2) rotate(0.1deg);
    }
}

@keyframes zoom {
    0% {
        -webkit-transform: scale(1) rotate(0.1deg);
           -moz-transform: scale(1) rotate(0.1deg);
             -o-transform: scale(1) rotate(0.1deg);
                transform: scale(1) rotate(0.1deg);
    }

    100% {
        -webkit-transform: scale(1.2) rotate(0.1deg);
           -moz-transform: scale(1.2) rotate(0.1deg);
             -o-transform: scale(1.2) rotate(0.1deg);
                transform: scale(1.2) rotate(0.1deg);
    }
}

@-webkit-keyframes fadeInSidenavText {
    0% {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    100% {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
}

@-moz-keyframes fadeInSidenavText {
    0% {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    100% {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
}

@-o-keyframes fadeInSidenavText {
    0% {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    100% {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
}

@keyframes fadeInSidenavText {
    0% {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    100% {
        /*ie8*/
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
}

/*No javascript elements*/
.h-noJs-div {
    padding: 1em 0;
    background-color: rgba(0, 0, 0, 0.5);
}
   /*Hide when there's javascript*/
    .JS .h-noJs-div {
        display: none;
    }

/*message*/
.h-noJs-message {
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
}
    /*Page specific adjustments to fit page's font style*/
    .products-listing .h-noJs-message {
        font-size: 88%;
        color: #fff;
    }
    /*Hide when there's javascript*/
    .JS .h-noJs-message {
        display: none;
    }

.browserupgrade {
    position: relative;
    z-index: 2; /*above fixed backgrounds*/
    font-family: Arial, Helvetica, sans-serif;
    padding: 1em 0;
    background-color: #333;
    color: #fff;
}

.browserupgrade h1 {
    font-size: 120%;
    font-family: Arial, Helvetica, sans-serif;
}

.browserupgrade a, 
.browserupgrade a:link, 
.browserupgrade a:hover {
    color: #fff;
    text-decoration: underline;
}



/*Social Media FatMenu*/
.FMTitleLinkStyle1 a:link, .FMSubHeaderLink a:link {
	font-family: Arial, Helvetica, sans-serif;
}
.FMTitleLinkStyle1 a:link {	font-size:110%}
.FMSubHeaderLink a:link {	font-size:100%}
.FMLinkListStyle li a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size:.9em;
	line-height: 0.6em;
}
.FMLinkListStyle li {padding-bottom:6px;}

.FMLinkListStyle li.social-links {
    overflow: hidden;
}
.FMLinkListStyle li.social-links a {
    display: block;
    float: left;
    margin-left: 10px;
    padding: 0 !important;
    background: none !important;
}
.FMLinkListStyle li.social-links a:first-child {
    margin-left: 0;
}
.FMLinkListStyle li.social-links a:hover {
    opacity: 0.8;
}