/* Font Faces */

/* Kyrial Sans */
@font-face {
    font-family: 'KyrialSansProBold';
    src: url('/Celanese/resources/fonts/284266_0_0.eot');
    src: url('/Celanese/resources/fonts/284266_0_0.eot?#iefix') format('embedded-opentype'),url('/Celanese/resources/fonts/284266_0_0.woff') format('woff'),url('/Celanese/resources/fonts/284266_0_0.ttf') format('truetype');
}

@font-face {
    font-family: 'KyrialSansProRegular';
    src: url('/Celanese/resources/fonts/284266_1_0.eot');
    src: url('/Celanese/resources/fonts/284266_1_0.eot?#iefix') format('embedded-opentype'),url('/Celanese/resources/fonts/284266_1_0.woff') format('woff'),url('/Celanese/resources/fonts/284266_1_0.ttf') format('truetype');
}

@font-face {
    font-family: 'KyrialSansProRegular-Italic';
    src: url('/Celanese/resources/fonts/284266_2_0.eot');
    src: url('/Celanese/resources/fonts/284266_2_0.eot?#iefix') format('embedded-opentype'),url('/Celanese/resources/fonts/284266_2_0.woff') format('woff'),url('/Celanese/resources/fonts/284266_2_0.ttf') format('truetype');
}

@font-face {
    font-family: 'KyrialSansProBold-Italic';
    src: url('/Celanese/resources/fonts/284266_3_0.eot');
    src: url('/Celanese/resources/fonts/284266_3_0.eot?#iefix') format('embedded-opentype'),url('/Celanese/resources/fonts/284266_3_0.woff') format('woff'),url('/Celanese/resources/fonts/284266_3_0.ttf') format('truetype');
}

/* Din Next */
@font-face {
    font-family: 'DINNextLTPro-Bold';
    src: url('/Celanese/resources/fonts/284266_4_0.eot');
    src: url('/Celanese/resources/fonts/284266_4_0.eot?#iefix') format('embedded-opentype'),url('/Celanese/resources/fonts/284266_4_0.woff') format('woff'),url('/Celanese/resources/fonts/284266_4_0.ttf') format('truetype');
}

@font-face {
    font-family: 'DINNextLTPro-Light';
    src: url('/Celanese/resources/fonts/284266_5_0.eot');
    src: url('/Celanese/resources/fonts/284266_5_0.eot?#iefix') format('embedded-opentype'),url('/Celanese/resources/fonts/284266_5_0.woff') format('woff'),url('/Celanese/resources/fonts/284266_5_0.ttf') format('truetype');
}

@font-face {
    font-family: 'DINNextLTPro-Regular';
    src: url('/Celanese/resources/fonts/284266_6_0.eot');
    src: url('/Celanese/resources/fonts/284266_6_0.eot?#iefix') format('embedded-opentype'),url('/Celanese/resources/fonts/284266_6_0.woff') format('woff'),url('/Celanese/resources/fonts/284266_6_0.ttf') format('truetype');
}

/* CSS Reset */

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: 'KyrialSansProRegular', Arial, sans-serif;
}

a {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

/* jQuery mobile layout indicator */

#mobileIndicator {
    width: 200px;
}

@media (max-width: 1024px) {
    #mobileIndicator {
        width: 100px;
    }
}

/* Global styles */

html, body {
    font-size: 18px;
    height: 100%;
    margin: 0;
    padding: 0;
}

    body.preloaderOpen {
        overflow: hidden;
    }

.preloader {
    background-color: white;
    background-image: url('/webshop/resources/images/loading-yellow.gif');
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 100000;
}

.topBar {
    background: #ec232d;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VjMjMyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNzkzMjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left, #ec232d 0%, #f79328 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ec232d), color-stop(100%,#f79328)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #ec232d 0%,#f79328 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #ec232d 0%,#f79328 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #ec232d 0%,#f79328 100%); /* IE10+ */
    background: linear-gradient(to right, #ec232d 0%,#f79328 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec232d', endColorstr='#f79328', GradientType=1 ); /* IE6-8 */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    padding-bottom: 2px;
    width: 100%;
}

.topBarInnerWrap {
    font-size: 0;
    margin: 0 auto;
    max-width: 1000px;
    padding: 0 10px;
    width: 100%;
}

.topBarLogo img {
    padding: 10px 0;
    width: 400px;
    border: none;
}

.topBarMenu {
    float: right;
}

    .topBarMenu > ul {
        display: block;
        margin: 0;
    }

        .topBarMenu > ul > li {
            display: inline-block;
        }

            .topBarMenu > ul > li > a {
                display: inline-block;
                color: #ffffff;
                cursor: pointer;
                font-size: 16px;
                margin: 10px 0 0;
                padding: 10px 16px;
            }

                .topBarMenu > ul > li > a:hover {
                    text-decoration: underline;
                    text-shadow: 0 0 2px rgba(255,255,255,.5);
                }

                /*.topBarMenu > ul > li:first-child > a {
	border-right: 1px solid #ffffff;
}*/

                .topBarMenu > ul > li > a.currentLanguage {
                    margin: 0 0 -2px 0;
                    min-width: 120px;
                    padding: 20px 15px;
                    transition: background-color .3s;
                    -moz-transition: background-color .3s;
                    -o-transition: background-color .3s;
                    -webkit-transition: background-color .3s;
                }

                    .topBarMenu > ul > li > a.currentLanguage.active {
                        background-color: #fead5d;
                    }

            .topBarMenu > ul > li .arrowWrap {
                float: right;
                padding: 2px 0 0 12px;
            }

            .topBarMenu > ul > li img.arrow {
                transition: transform .3s;
                transition: transform .3s, -ms-transform .3s, -o-transform .3s, -moz-transform .3s, -webkit-transform .3s;
                -moz-transition: transform .3s, -moz-transform .3s;
                -o-transition: transform .3s, -o-transform .3s;
                -webkit-transition: transform .3s, -webkit-transform .3s;
            }

                .topBarMenu > ul > li img.arrow.rotated {
                    transform: rotate(90deg);
                    -ms-transform: rotate(90deg);
                    -moz-transform: rotate(90deg);
                    -o-transform: rotate(90deg);
                    -webkit-transform: rotate(90deg);
                }

.topBarLanguageSelectorDropDown {
    background-color: #f79328;
    color: white;
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1000;
}

    .topBarLanguageSelectorDropDown > li {
        display: inline-block;
        width: 33.33%;
    }

        .topBarLanguageSelectorDropDown > li > a {
            cursor: pointer;
            display: block;
            font-size: 16px;
            padding: 10px 16px;
            transition: background-color .3s;
            -moz-transition: background-color .3s;
            -o-transition: background-color .3s;
            -webkit-transition: background-color .3s;
        }

            .topBarLanguageSelectorDropDown > li > a:hover {
                background-color: #ef5400;
            }

.signIn {
    background-image: url('/webshop/resources/images/noisebg.jpg');
    border-bottom: 2px solid #ef5401;
    box-shadow: 0 30px 30px rgba(0,0,0,.1) inset;
    -moz-box-shadow: 0 30px 30px rgba(0,0,0,.1) inset;
    -webkit-box-shadow: 0 30px 30px rgba(0,0,0,.1) inset;
    width: 100%;
}

.signInInnerWrap {
    margin: 0 auto;
    max-width: 1000px;
    padding: 0 10px;
    width: 100%;
}

    .signInInnerWrap > .form-wrapper {
        display: block;
        font-family: 'KyrialSansProRegular', Arial, sans-serif;
        margin: 0 auto;
        max-width: 300px;
        padding: 20px;
        position: relative;
        width: 100%;
    }

        .signInInnerWrap > .form-wrapper > h2 {
            color: #ef5401;
            font-size: 28px;
            letter-spacing: 2px;
            margin: 0 0 12px 0;
            text-transform: uppercase;
        }

.signInCloseButton {
    color: #4d4d4d;
    float: right;
    transition: color .3s;
    -moz-transition: color .3s;
    -o-transition: color .3s;
    -webkit-transition: color .3s;
}

    .signInCloseButton:hover {
        color: #ef5401;
    }

.signInInnerWrap > .form-wrapper input[type=text], .signInInnerWrap > .form-wrapper input[type=password] {
    border: 1px solid #cccccc;
    color: #4d4d4d;
    font-size: 16px;
    margin-bottom: 12px;
    padding: 8px;
    width: 100%;
}

.signInInnerWrap > .form-wrapper p.error {
    color: #ef5401;
    font-size: 14px;
    margin: 0 0 10px;
}

.signInInnerWrap > .form-wrapper input[type=text]:focus, .signInInnerWrap > .form-wrapper input[type=password]:focus {
    box-shadow: 0 0 8px #0099cc;
    -moz-box-shadow: 0 0 8px #0099cc;
    -webkit-box-shadow: 0 0 8px #0099cc;
}

.signInInnerWrap > .form-wrapper input[type=submit] {
    background-color: #ef5401;
    border: 0;
    color: white;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 12px;
    padding: 8px 20px;
    text-transform: uppercase;
}

.signInInnerWrap > .form-wrapper a.forgotPassword {
    color: #4d4d4d;
    display: inline-block;
    float: right;
    padding-top: 7px;
    transition: color .3s;
    -moz-transition: color .3s;
    -o-transition: color .3s;
    -webkit-transition: color .3s;
}

    .signInInnerWrap > .form-wrapper a.forgotPassword:hover {
        color: #ef5401;
    }

.signInInnerWrap .asideMessage {
    background-color: #ef5401;
    border: 1px solid #ec232d;
    color: white;
    font-size: 12px;
    padding: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    left: -300px;
    width: 100%;
}

    .signInInnerWrap .asideMessage:after, .signInInnerWrap .asideMessage:before {
        left: 100%;
        top: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .signInInnerWrap .asideMessage:after {
        border-color: rgba(239, 84, 1, 0);
        border-left-color: #ef5401;
        border-width: 10px;
        margin-top: -10px;
    }

    .signInInnerWrap .asideMessage:before {
        border-color: rgba(236, 35, 45, 0);
        border-left-color: #ec232d;
        border-width: 11px;
        margin-top: -11px;
    }

    .signInInnerWrap .asideMessage p {
        margin: 0;
    }

.lockOutMessage h3 {
    color: #ef5401;
    font-size: 20px;
    letter-spacing: 1px;
    margin: 0 0 12px 0;
    text-transform: uppercase;
}

.lockOutMessage p {
    color: #4d4d4d;
    font-size: 16px;
}

.home {
    padding: 0 0 40px;
    position: relative;
    width: 100%;
    z-index: 10;
}

.homeInnerWrap {
    background-image: url('/webshop/resources/images/white-pattern-background.jpg');
    background-position: top right;
    background-repeat: no-repeat;
    margin: 0 auto;
    max-width: 1000px;
    padding: 0 10px;
    width: 100%;
}

    .homeInnerWrap header h2 {
        background-image: url('/webshop/resources/images/home-header-spacer-gradient-grey.png');
        background-position: top right;
        background-repeat: no-repeat;
        color: #0099cc;
        float: left;
        font-size: 36px;
        height: 104px;
        margin: 0;
        padding: 24px 50px 0 0;
    }

        .homeInnerWrap header h2 a {
            font-family: 'DINNextLTPro-Regular', Arial, sans-serif;
        }

    .homeInnerWrap header nav.secondaryMenu {
        color: #4d4d4d;
        display: block;
        float: left;
    }

        .homeInnerWrap header nav.secondaryMenu > ul {
            display: block;
        }

            .homeInnerWrap header nav.secondaryMenu > ul > li {
                display: inline-block;
                padding: 18px 24px 0;
            }

                .homeInnerWrap header nav.secondaryMenu > ul > li:first-child {
                    padding-left: 0;
                }

                .homeInnerWrap header nav.secondaryMenu > ul > li > a {
                    border-bottom: 1px solid rgba(255,255,255,0);
                    cursor: pointer;
                    font-size: 16px;
                    transition: color .3s, border-bottom .3s;
                    -moz-transition: color .3s, border-bottom .3s;
                    -o-transition: color .3s, border-bottom .3s;
                    -webkit-transition: color .3s, border-bottom .3s;
                }

                    .homeInnerWrap header nav.secondaryMenu > ul > li > a.blue:hover {
                        border-bottom: 1px solid rgba(0,152,203,1);
                        color: #0099cc;
                    }

                    .homeInnerWrap header nav.secondaryMenu > ul > li > a.orange:hover {
                        border-bottom: 1px solid rgba(240,85,0,1);
                        color: #f05500;
                    }

                    .homeInnerWrap header nav.secondaryMenu > ul > li > a.purple:hover {
                        border-bottom: 1px solid rgba(123,65,153,1);
                        color: #7b4199;
                    }

                    .homeInnerWrap header nav.secondaryMenu > ul > li > a.yellow:hover {
                        border-bottom: 1px solid rgba(247,146,40,1);
                        color: #f79228;
                    }

    .homeInnerWrap > h1 {
        color: #707070;
        font-size: 50px;
        font-weight: normal;
        margin: 60px 0;
        text-align: center;
        clear: both;
    }




    .homeInnerWrap ul.overviewWrap {
        display: block;
        font-size: 0;
        margin: 24px 0 0;
        padding: 0;
    }

        .homeInnerWrap ul.overviewWrap > li {
            display: inline-block;
            font-size: 16px;
            padding: 0 18px;
            text-align: center;
            vertical-align: top;
            width: 20%;
        }

            .homeInnerWrap ul.overviewWrap > li > a {
                cursor: pointer;
            }

                .homeInnerWrap ul.overviewWrap > li > a img {
                    transition-duration: .5s;
                    -moz-transition-duration: .5s;
                    -o-transition-duration: .5s;
                    -webkit-transition-duration: .5s;
                    transition-timing-function: cubic-bezier(.46,0,.45,1); /* Webkit fix for negative values */
                    -webkit-transition-timing-function: cubic-bezier(.46,0,.45,1); /* Webkit fix for negative values */
                    transition-timing-function: cubic-bezier(.46,-1,.45,2);
                    -moz-transition-timing-function: cubic-bezier(.46,-1,.45,2);
                    -o-transition-timing-function: cubic-bezier(.46,-1,.45,2);
                    -webkit-transition-timing-function: cubic-bezier(.46,-1,.45,2);
                    transition-property: transform;
                    -moz-transition-property: transform, -moz-transform;
                    -o-transition-property: transform, -o-transform;
                    -webkit-transition-property: transform, -webkit-transform;
                }

                .homeInnerWrap ul.overviewWrap > li > a:hover img {
                    transform: scale(1.15, 1.15) translateY(-10px);
                    -ms-transform: scale(1.15, 1.15) translateY(-10px);
                    -moz-transform: scale(1.15, 1.15) translateY(-10px);
                    -o-transform: scale(1.15, 1.15) translateY(-10px);
                    -webkit-transform: scale(1.15, 1.15) translateY(-10px);
                }

                .homeInnerWrap ul.overviewWrap > li > a img {
                    display: block;
                    margin: 0 auto;
                    width: 100%;
                }

                .homeInnerWrap ul.overviewWrap > li > a h3 {
                    display: block;
                    font-family: 'DINNextLTPro-Bold', Arial, sans-serif;
                    font-weight: bold;
                    height: 80px;
                    letter-spacing: 1px;
                    margin: 0;
                    padding: 20px 0;
                    width: 100%;
                }

            .homeInnerWrap ul.overviewWrap > li.blue > a h3 {
                color: #0099cc;
            }

            .homeInnerWrap ul.overviewWrap > li.orange > a h3 {
                color: #ef5400;
            }

            .homeInnerWrap ul.overviewWrap > li.purple > a h3 {
                color: #7b4199;
            }

            .homeInnerWrap ul.overviewWrap > li.yellow > a h3 {
                color: #f79228;
            }

            .homeInnerWrap ul.overviewWrap > li.green > a h3 {
                color: #02A9A2;
            }

            .homeInnerWrap ul.overviewWrap > li > a p {
                color: #4d4d4d;
                font-size: 14px;
                margin: 20px 0 0 0;
            }

.home .sideNavigation {
    bottom: 0;
    position: absolute;
    top: auto;
}

    .home .sideNavigation.fix {
        bottom: auto;
        position: fixed;
        top: 0;
    }

    .home .sideNavigation ul {
        display: block;
        font-size: 0;
        margin: 0;
        padding: 0;
    }

        .home .sideNavigation ul li {
            display: block;
            margin-bottom: 1px;
            margin-top: -6px;
            height: 46px;
        }

            .home .sideNavigation ul li:last-child {
                margin-bottom: 0;
            }

            .home .sideNavigation ul li a {
                background-color: #f79228;
                cursor: pointer;
                display: inline-block;
                padding: 6px;
                transition: padding-left .3s, background-color .3s;
                -moz-transition: padding-left .3s, background-color .3s;
                -o-transition: padding-left .3s, background-color .3s;
                -webkit-transition: padding-left .3s, background-color .3s;
            }

                .home .sideNavigation ul li a.active {
                    background-color: #0099cc;
                }

            .home .sideNavigation ul li span {
                background-color: white;
                color: #eb8016;
                display: inline-block;
                font-size: 14px;
                height: 40px;
                left: 100px;
                margin-left: 1px;
                opacity: 0;
                overflow: hidden;
                padding: 12px 20px;
                position: relative;
                text-transform: uppercase;
                top: 6px;
                transition: left .3s, opacity .3s, width .3s, color .3s;
                -moz-transition: left .3s, opacity .3s, width .3s, color .3s;
                -o-transition: left .3s, opacity .3s, width .3s, color .3s;
                -webkit-transition: left .3s, opacity .3s, width .3s, color .3s;
            }

            .home .sideNavigation ul li a:hover + span {
                left: 0;
                opacity: 1;
            }

            .home .sideNavigation ul li a:hover {
                background-color: #eb8016;
                padding-left: 20px;
            }

            .home .sideNavigation ul li a.active:hover {
                background-color: #0088bb;
            }

            .home .sideNavigation ul li a.active + span {
                color: #0088bb;
            }

.faqWrap {
    font-size: 0;
    margin: 0 auto;
    padding: 80px 60px 0;
    width: 800px;
}

    .faqWrap.faq-section {
        width: auto;
        margin: 0;
        padding: 0;
    }

        .faqWrap.faq-section .rightColumn > ul {
            list-style: none;
        }

        .faqWrap.faq-section .answer p,
        .faqWrap.faq-section .answer > ul {
            color: #f79228;
        }

    .faqWrap h2 {
        color: #f79228;
        font-size: 40px;
        font-weight: normal;
        letter-spacing: -2px;
        margin: 0;
        text-align: left;
    }

.faqCloseButton {
    color: #4d4d4d;
    display: inline-block;
    float: right;
    transition: color .3s;
    -moz-transition: color .3s;
    -o-transition: color .3s;
    -webkit-transition: color .3s;
}

    .faqCloseButton:hover {
        color: #f79228;
    }

.faqWrap > p {
    border-bottom: 1px solid #9b9b9b;
    color: #f79228;
    padding-left: 2px;
}

.faqWrap > ul {
    display: block;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

    .faqWrap > ul > li {
        display: block;
        margin: 0;
        padding: 0;
    }

.faqWrap .question, .faqWrap .answer {
    color: #4d4d4d;
    display: block;
    font-size: 18px;
    padding: 8px;
}

.faqWrap .question {
    cursor: pointer;
}

    .faqWrap .question img {
        display: inline-block;
        margin-right: 12px;
        position: relative;
        top: 6px;
        transition: transform .3s;
        transition: transform .3s, -ms-transform .3s, -o-transform .3s, -moz-transform .3s, -webkit-transform .3s;
        -moz-transition: transform .3s, -moz-transform .3s;
        -o-transition: transform .3s, -o-transform .3s;
        -webkit-transition: transform .3s, -webkit-transform .3s;
        width: 24px;
    }

        .faqWrap .question img.collapse {
            transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
        }

.faqWrap .answer {
    color: #f79228;
    font-family: 'KyrialSansProBold', Arial, sans-serif;
    /*font-weight: bold;*/
    padding-left: 48px;
}

    .faqWrap .answer a {
        text-decoration: underline;
    }

.contactWrap {
    font-size: 0;
    margin: 0 auto;
    padding: 80px 40px 0;
    width: 800px;
}

    .contactWrap > div.leftColumn, .contactWrap > div.rightColumn {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        display: inline-block;
        font-size: 20px;
        vertical-align: top;
        width: 50%;
    }

    .contactWrap > div.rightColumn {
        border-left: 1px solid #9b9b9b;
        padding: 20px;
    }

        .contactWrap > div.rightColumn p, .contactWrap > div.rightColumn address {
            color: #4d4d4d;
            font-style: normal;
            margin: 0 0 24px;
        }

            .contactWrap > div.rightColumn address a {
                color: #f79228;
                transition: color .3s;
                -moz-transition: color .3s;
                -o-transition: color .3s;
                -webkit-transition: color .3s;
            }

                .contactWrap > div.rightColumn address a:hover {
                    color: #eb8016;
                }

    .contactWrap > div.leftColumn > form {
        display: inline-block;
        font-family: 'KyrialSansProRegular', Arial, sans-serif;
        margin: 0 auto;
        padding: 20px;
        width: 100%;
    }

    .contactWrap > h2 {
        color: #f79228;
        font-size: 40px;
        font-weight: normal;
        letter-spacing: -2px;
        margin: 0 auto;
        padding: 0 20px;
        text-align: left;
        width: 100%;
    }

.contactCloseButton {
    color: #4d4d4d;
    float: right;
    transition: color .3s;
    -moz-transition: color .3s;
    -o-transition: color .3s;
    -webkit-transition: color .3s;
}

    .contactCloseButton:hover {
        color: #f79228;
    }

.contactWrap > div.leftColumn > form > input[type=text], .contactWrap > div.leftColumn > form > textarea {
    border: 1px solid #cccccc;
    color: #4d4d4d;
    font-size: 16px;
    margin-bottom: 12px;
    width: 100%;
    padding: 8px;
}

.contactWrap > div.leftColumn > form > textarea {
    min-height: 120px;
    resize: vertical;
}

    .contactWrap > div.leftColumn > form > input[type=text]:focus, .contactWrap > div.leftColumn > form > textarea:focus {
        box-shadow: 0 0 8px #0099cc;
        -moz-box-shadow: 0 0 8px #0099cc;
        -webkit-box-shadow: 0 0 8px #0099cc;
    }

.contactWrap > div.leftColumn > form input[type=submit] {
    background-color: #ef5401;
    border: 0;
    color: white;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 12px;
    padding: 8px 20px;
    text-transform: uppercase;
}

.contactThankYou {
    color: #4d4d4d;
    padding: 0 20px;
}

.mobileNavigation ul {
    border-bottom: 2px solid white;
    font-size: 0;
    margin: 0;
    padding: 0;
}

    .mobileNavigation ul li {
        background-color: #ef5401;
        border-right: 2px solid white;
        display: inline-block;
        font-size: 15px;
        text-align: center;
        transition: background-color .3s;
        -moz-transition: background-color .3s;
        -o-transition: background-color .3s;
        -webkit-transition: background-color .3s;
        vertical-align: top;
        width: 50%;
    }

        .mobileNavigation ul li:hover {
            background-color: #ec232d;
        }

        .mobileNavigation ul li.faq, .mobileNavigation ul li.contact {
            background-color: #f79228;
            background-image: url('/webshop/resources/images/faq-icon.png');
            background-position: center center;
            background-repeat: no-repeat;
        }

        .mobileNavigation ul li.faq {
            background-image: url('/webshop/resources/images/faq-icon.png');
        }

        .mobileNavigation ul li.contact {
            background-image: url('/webshop/resources/images/contact-icon.png');
        }

            .mobileNavigation ul li.faq:hover, .mobileNavigation ul li.contact:hover {
                background-color: #eb8016;
            }

            .mobileNavigation ul li.faq.active, .mobileNavigation ul li.contact.active {
                background-color: #0099cb;
            }

                .mobileNavigation ul li.faq.active:hover, .mobileNavigation ul li.contact.active:hover {
                    background-color: #0088bb;
                }

        .mobileNavigation ul li a {
            color: white;
            display: block;
            font-size: 20px;
            padding: 20px;
        }

        .mobileNavigation ul li:last-child {
            border-right: 0;
        }

.details {
    clear: both;
    font-size: 0;
}

    .details.first {
        border-top: 1px solid #a7a7a7;
    }

    .details.blue {
        background-color: #e5f2f6;
        box-shadow: 0 50px 100px #c7e7f2 inset;
        -moz-box-shadow: 0 50px 100px #c7e7f2 inset;
        -webkit-box-shadow: 0 50px 100px #c7e7f2 inset;
    }

    .details.orange {
        background-color: #fff2e6;
        box-shadow: 0 50px 100px #fcdcc8 inset;
        -moz-box-shadow: 0 50px 100px #fcdcc8 inset;
        -webkit-box-shadow: 0 50px 100px #fcdcc8 inset;
    }

    .details.purple {
        background-color: #f6edff;
        box-shadow: 0 50px 100px #e4d6ee inset;
        -moz-box-shadow: 0 50px 100px #e4d6ee inset;
        -webkit-box-shadow: 0 50px 100px #e4d6ee inset;
    }

    .details.yellow {
        background-color: #fff7ea;
        box-shadow: 0 50px 100px #fcdec9 inset;
        -moz-box-shadow: 0 50px 100px #fcdec9 inset;
        -webkit-box-shadow: 0 50px 100px #fcdec9 inset;
    }

    .details.green {
        background-color: #BCF2EE;
        box-shadow: 0 50px 100px #7bd8d2 inset;
        -moz-box-shadow: 0 50px 100px #7bd8d2 inset;
        -webkit-box-shadow: 0 50px 100px #7bd8d2 inset;
    }

    .details .detailsInnerWrap {
        margin: 0 auto;
        max-width: 1000px;
        padding: 40px 0;
        width: 100%;
    }

        .details .detailsInnerWrap .leftColumn {
            display: inline-block;
            font-size: 0;
            margin-right: 20px;
            text-align: center;
            vertical-align: top;
            width: 180px;
        }

            .details .detailsInnerWrap .leftColumn .sectionBubble {
                width: 100%;
            }

            .details .detailsInnerWrap .leftColumn .sectionRuler {
                padding-left: 20px;
            }

        .details .detailsInnerWrap .rightColumn {
            display: inline-block;
            vertical-align: top;
            width: 800px;
        }

            .details .detailsInnerWrap .rightColumn .innerLeftcolumn {
                display: inline-block;
                margin-right: 20px;
                padding-right: 10px;
                vertical-align: top;
                width: 280px;
            }

            .details .detailsInnerWrap .rightColumn .innerRightcolumn {
                display: inline-block;
                padding-top: 10px;
                vertical-align: top;
                width: 500px;
            }

                .details .detailsInnerWrap .rightColumn .innerRightcolumn.list {
                    padding-top: 0;
                    width: 390px;
                }

            .details .detailsInnerWrap .rightColumn .innerLeftcolumn.list {
                margin-right: 20px;
                padding-right: 0;
                width: 390px;
            }

.list > ul {
    list-style-type: none;
    padding: 0;
}

    .list > ul > li {
        background-image: url('/webshop/resources/images/bullet.png');
        background-position: top 2px left;
        background-repeat: no-repeat;
        background-size: 16px 16px;
        font-family: 'DINNextLTPro-Bold', Arial, sans-serif;
        font-weight: bold;
        margin-bottom: 24px;
        padding-left: 30px;
    }

        .list > ul > li > ul {
            list-style-type: disc;
            padding: 4px 0 0 16px;
        }

            .list > ul > li > ul > li {
                font-size: 14px;
            }

.details .detailsInnerWrap h2 {
    font-family: 'KyrialSansProRegular', Arial, sans-serif;
    font-size: 54px;
    font-weight: normal;
    letter-spacing: -2px;
    margin: 56px 0 60px;
}

.details.blue .detailsInnerWrap h2 {
    color: #0099cc;
}

.details.orange .detailsInnerWrap h2 {
    color: #ef5400;
}

.details.purple .detailsInnerWrap h2 {
    color: #7b4199;
}

.details.yellow .detailsInnerWrap h2 {
    color: #f79228;
}

.details.green .detailsInnerWrap h2 {
    color: #02A9A2;
}

.details .detailsHeader {
    height: 120px;
}

.details.blue .detailsHeader {
    background-color: #0099cb;
}

.details.orange .detailsHeader {
    background-color: #ef5400;
}

.details.purple .detailsHeader {
    background-color: #7b4199;
}

.details.yellow .detailsHeader {
    background-color: #f79228;
}

.details.green .detailsHeader {
    background-color: #02A9A2;
}

.details .detailsInnerWrap h3 {
    color: #4d4d4d;
    font-family: 'DINNextLTPro-Bold', Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0;
    margin: 12px 0 0 0;
}

.details .detailsInnerWrap p {
    color: #4d4d4d;
    font-size: 18px;
}

    .details .detailsInnerWrap p.callToAction, .details .detailsInnerWrap p.callToAction a {
        font-family: 'DINNextLTPro-Bold', Arial, sans-serif;
        font-weight: bold;
    }

.details .detailsInnerWrap ul {
    color: #4d4d4d;
    font-size: 18px;
}

.details.blue .detailsInnerWrap p.callToAction a {
    color: #0099cc;
}

.details.orange .detailsInnerWrap p.callToAction a {
    color: #ef5400;
}

.details.purple .detailsInnerWrap p.callToAction a {
    color: #7b4199;
}

.details.yellow .detailsInnerWrap p.callToAction a {
    color: #f79228;
}

.details.green .detailsInnerWrap p.callToAction a {
    color: #02A9A2;
}

.details .detailsInnerWrap .asideContainer {
    box-shadow: 0 0 40px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 40px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 40px rgba(0,0,0,.5);
    float: right;
    font-size: 0;
    margin: 4px 0 20px 20px;
    width: 500px;
}

    .details .detailsInnerWrap .asideContainer .videoContainerInnerWrap {
        background-color: white;
        background-position: center center;
        background-repeat: no-repeat;
        height: 0;
        padding-bottom: 56.25%; /* Force 16:9 ratio */
        position: relative;
        width: 100%;
    }

.details.blue .detailsInnerWrap .asideContainer .videoContainerInnerWrap {
    background-image: url('/webshop/resources/images/loading-blue.gif');
}

.details.orange .detailsInnerWrap .asideContainer .videoContainerInnerWrap {
    background-image: url('/webshop/resources/images/loading-orange.gif');
}

.details.purple .detailsInnerWrap .asideContainer .videoContainerInnerWrap {
    background-image: url('/webshop/resources/images/loading-purple.gif');
}

.details .detailsInnerWrap .asideContainer .videoContainerInnerWrap iframe {
    border: 0;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}

.siteFooter {
    background-color: #eeeeee;
    border-top: 1px solid #a7a7a7;
    font-size: 14px;
}

    .siteFooter .footerInnerWrap {
        margin: 0 auto;
        max-width: 1000px;
        padding: 40px 0;
        width: 100%;
    }

.copyright {
    color: #929292;
    display: inline-block;
}

.footerMenu {
    color: #929292;
    display: inline-block;
    float: right;
    width: 75%;
}

    .footerMenu ul {
        display: inline-block;
        font-size: 0;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        .footerMenu ul li {
            border-right: 1px solid #929292;
            display: inline-block;
            font-size: 14px;
            padding: 0 8px;
        }

            .footerMenu ul li:last-child {
                border-right: 0;
            }

            .footerMenu ul li a {
                text-transform: uppercase;
                transition: color .3s;
                -moz-transition: color .3s;
                -o-transition: color .3s;
                -webkit-transition: color .3s;
            }

                .footerMenu ul li a:hover {
                    color: #f79228;
                }

/* SLIDEMENU */

body {
    position: relative;
    right: 0;
    transition: right .3s;
    -moz-transition: right .3s;
    -o-transition: right .3s;
    -webkit-transition: right .3s;
}

    body.open {
        right: 250px;
    }

.header {
    margin-bottom: 40px;
    position: relative;
}

ul.sideMenu {
    background-color: #e5f2f6;
    background-image: url('/webshop/resources/images/noisebg.jpg');
    border-left: 2px solid white;
    box-shadow: 0 50px 100px #fcdec9 inset;
    -moz-box-shadow: 0 50px 100px #fcdec9 inset;
    -webkit-box-shadow: 0 50px 100px #fcdec9 inset;
    height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: fixed;
    right: -250px;
    top: 0;
    transition: right .3s;
    -moz-transition: right .3s;
    -o-transition: right .3s;
    -webkit-transition: right .3s;
    width: 250px;
    z-index: -1;
}

    ul.sideMenu.open {
        right: 0;
    }

    ul.sideMenu li {
        border-top: 2px solid white;
        color: #4d4d4d;
        left: 0;
        line-height: 40px;
        position: relative;
        right: 0;
        transition: top .3s, left .3s, opacity .3s;
        -moz-transition: top .3s, left .3s, opacity .3s;
        -o-transition: top .3s, left .3s, opacity .3s;
        -webkit-transition: top .3s, left .3s, opacity .3s;
        top: 0px;
        opacity: 1;
    }

        ul.sideMenu li.endOfSection {
            border-bottom: 2px solid #f79228;
        }

        ul.sideMenu li:hover {
            background-color: #f79228;
            color: white;
        }

        ul.sideMenu li:last-child {
            border-bottom: 2px solid white;
        }

        ul.sideMenu li.phaseDown {
            opacity: 0;
            top: 200px;
        }

        ul.sideMenu li.phaseLeft {
            left: -100%;
            opacity: 0;
        }

        ul.sideMenu li.phaseRight {
            left: 100%;
            opacity: 0;
        }

        ul.sideMenu li a {
            display: block;
            font-family: 'DINNextLTPro-Regular', Arial, sans-serif;
            font-size: 20px;
            height: inherit;
            line-height: inherit;
            margin: 0;
            padding: 6px 20px;
        }

        ul.sideMenu li.title {
            background-color: #f79228;
            border: 0;
            height: 60px;
            margin: 0;
            text-align: center;
            transition: top .3s;
            -moz-transition: top .3s;
            -o-transition: top .3s;
            -webkit-transition: top .3s;
        }

            ul.sideMenu li.title a {
                color: white;
                font-family: 'DINNextLTPro-Regular', Arial, sans-serif;
                font-size: 30px;
                padding: 12px;
                padding-top: 10px;
            }

        ul.sideMenu li.languageMenu {
            border: 0;
            position: absolute;
            top: 60px;
        }

            ul.sideMenu li.languageMenu:hover {
                background-color: transparent;
                color: inherit;
            }

            ul.sideMenu li.languageMenu ul {
                font-size: 0;
                list-style-type: none;
                padding: 0;
            }

.languageMenuOpen {
    background-image: url('/webshop/resources/images/grey-arrow-right.png');
    background-position: center right 8px;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

    .languageMenuOpen:hover {
        background-image: url('/webshop/resources/images/white-arrow-right.png');
    }

.languageMenuBack {
    background-image: url('/webshop/resources/images/grey-arrow-left.png');
    background-position: center right 8px;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

    .languageMenuBack:hover {
        background-image: url('/webshop/resources/images/white-arrow-left.png');
    }

ul.sideMenu li.languageMenu li {
    display: inline-block;
    width: 50%;
}

    ul.sideMenu li.languageMenu li.full {
        display: inline-block;
        width: 100%;
    }

    ul.sideMenu li.languageMenu li.blank, ul.sideMenu li.languageMenu li.blank a {
        background-color: transparent;
        cursor: default;
    }

@media (max-height: 600px) {

    ul.sideMenu li.languageMenu ul {
        line-height: 1;
    }

    ul.sideMenu li a {
        line-height: 30px;
    }

    ul.sideMenu li.title a {
        line-height: 40px;
    }
}

@media (max-height: 480px) {

    ul.sideMenu li a {
        line-height: 20px;
        padding: 6px 10px;
    }
}

@media (max-height: 400px) {

    ul.sideMenu li a {
        font-size: 14px;
        line-height: 14px;
    }
}

/* Hide mobile only elements on desktop layout */

@media (min-width: 1025px) {

    .mobileOnly {
        display: none !important;
    }
}










/* Max 1024 px */

@media (max-width: 1024px) {

    .desktopOnly {
        display: none !important;
    }

    .home {
        margin: 0;
        padding: 0;
    }

    .homeInnerWrap {
        padding: 30px 0;
    }

        .homeInnerWrap header h2 {
            display: none;
        }

            .homeInnerWrap header h2 a {
                font-family: 'DINNextLTPro-Regular', Arial, sans-serif;
            }

    .faqWrap {
        width: 100%;
    }

    .contactWrap, .contactWrap > div.leftColumn, .contactWrap > div.rightColumn {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        width: 100%;
    }

        .contactWrap > div.leftColumn > form input[type=submit] {
            padding: 12px 20px;
            width: 50%;
            margin: 0 auto;
            display: block;
        }

        .contactWrap > div.rightColumn {
            border-left: 0;
        }

    .details.first {
        border-top: 0;
    }

    .detailsHeader {
        background-position: center left 36px;
        background-repeat: no-repeat;
        background-size: auto 100%;
        border-bottom: 2px solid white;
        cursor: pointer;
    }

    .details.blue .detailsHeader {
        background-image: url('/webshop/resources/images/mobility-block.png');
    }

    .details.orange .detailsHeader {
        background-image: url('/webshop/resources/images/order-management-block.png');
    }

    .details.purple .detailsHeader {
        background-image: url('/webshop/resources/images/document-availability-block.png');
    }

    .details.yellow .detailsHeader {
        background-image: url('/webshop/resources/images/additional-benefits-block.png');
    }

    .details.green .detailsHeader {
        background-image: url('/webshop/resources/images/leave-request-block-small.png');
    }

    .detailsHeader .arrow {
        background-image: url('/webshop/resources/images/white-arrow.png');
        background-position: center center;
        background-repeat: no-repeat;
        float: left;
        height: 120px;
        transition: transform .3s;
        transition: transform .3s, -ms-transform .3s, -o-transform .3s, -moz-transform .3s, -webkit-transform .3s, height .3s;
        -moz-transition: transform .3s, -moz-transform .3s, height .3s;
        -o-transition: transform .3s, -o-transform .3s, height .3s;
        -webkit-transition: transform .3s, -webkit-transform .3s, height .3s;
        width: 80px;
    }

    .details.collapse .detailsHeader .arrow {
        transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
    }

    .detailsHeader h2 {
        color: white;
        font-family: 'DINNextLTPro-Bold', Arial, sans-serif;
        font-size: 26px;
        font-weight: bold;
        letter-spacing: 1.5px;
        margin: 0;
        padding-top: 24px;
        padding-left: 160px;
        padding-right: 24px;
    }

    .detailsHeader p {
        color: white;
        font-size: 16px;
        line-height: 1;
        margin: 0;
        padding-left: 160px;
        padding-right: 24px;
    }

    .details.blue .detailsInnerWrap {
        box-shadow: 0 50px 100px #c7e7f2 inset;
        -moz-box-shadow: 0 50px 100px #c7e7f2 inset;
        -webkit-box-shadow: 0 50px 100px #c7e7f2 inset;
    }

    .details.orange .detailsInnerWrap {
        box-shadow: 0 50px 100px #fcdcc8 inset;
        -moz-box-shadow: 0 50px 100px #fcdcc8 inset;
        -webkit-box-shadow: 0 50px 100px #fcdcc8 inset;
    }

    .details.purple .detailsInnerWrap {
        box-shadow: 0 50px 100px #e4d6ee inset;
        -moz-box-shadow: 0 50px 100px #e4d6ee inset;
        -webkit-box-shadow: 0 50px 100px #e4d6ee inset;
    }

    .details.yellow .detailsInnerWrap {
        box-shadow: 0 50px 100px #fcdec9 inset;
        -moz-box-shadow: 0 50px 100px #fcdec9 inset;
        -webkit-box-shadow: 0 50px 100px #fcdec9 inset;
    }

    .details.green .detailsInnerWrap {
        box-shadow: 0 50px 100px #7bd8d2 inset;
        -moz-box-shadow: 0 50px 100px #7bd8d2 inset;
        -webkit-box-shadow: 0 50px 100px #7bd8d2 inset;
    }

    .details .detailsInnerWrap {
        margin: 0;
        padding: 40px 0;
        width: 100%;
    }

        .details .detailsInnerWrap .rightColumn {
            display: block;
            padding: 0 80px;
            width: 100%;
        }

            .details .detailsInnerWrap .rightColumn .innerLeftcolumn {
                display: block;
                margin-right: 0;
                padding-right: 0;
                width: 100%;
            }

            .details .detailsInnerWrap .rightColumn .innerRightcolumn {
                margin: 0 auto;
                text-align: center;
            }

        .details .detailsInnerWrap .asideContainer {
            display: inline-block;
            float: none;
            font-size: 0;
            margin: 0;
            width: 100%;
        }

            .details .detailsInnerWrap .asideContainer .videoContainerInnerWrap iframe {
                left: 0;
            }

        .details .detailsInnerWrap h2 {
            font-size: 32px;
            letter-spacing: -1px;
            margin: 0;
        }

        .details .detailsInnerWrap .rightColumn .innerRightcolumn {
            display: inline-block;
            padding-top: 10px;
            width: 100%;
        }

            .details .detailsInnerWrap .rightColumn .innerRightcolumn.list ul, .details .detailsInnerWrap .rightColumn .innerLeftcolumn.list ul {
                margin: 0;
                text-align: left;
                width: 100%;
            }

        .details .detailsInnerWrap .rightColumn .innerLeftcolumn.list ul {
            margin-top: 24px;
        }

        .details .detailsInnerWrap .rightColumn .innerLeftcolumn.list, .details .detailsInnerWrap .rightColumn .innerRightcolumn.list {
            width: 100%;
        }

    .siteFooter .footerInnerWrap {
        margin: 0 auto;
        max-width: 1000px;
        padding: 40px 0;
        text-align: center;
        width: 100%;
    }

    .copyright {
        color: #929292;
        display: inline-block;
        margin-bottom: 20px;
        text-transform: uppercase;
    }

    .footerMenu {
        color: #929292;
        display: block;
        float: none;
        width: auto;
    }

        .footerMenu ul {
            display: block;
        }

            .footerMenu ul li {
                border-right: 0;
                display: block;
                font-size: 14px;
                margin-bottom: 20px;
                padding: 0 20px;
            }

    .topBarMenuButton {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        background-image: url('/webshop/resources/images/menu-button.png');
        background-position: top center;
        background-repeat: no-repeat;
        color: white;
        display: inline-block;
        float: right;
        height: 36px;
        margin-top: 14px;
        width: 36px;
    }

    .copyright {
        color: #b2b2b2;
        font-size: 12px;
    }
}










/* Max 960 px */

@media (max-width: 960px) {

    .homeInnerWrap > h1 {
        color: #707070;
        font-size: 40px;
        letter-spacing: 0;
    }

    .signInInnerWrap .asideMessage {
        width: 180px;
        left: -180px;
    }
}









/* Max 720 px */

@media (max-width: 720px) {

    .signInInnerWrap .asideMessage {
        background: #ef5401;
        border: 1px solid #ec232d;
        font-size: 14px;
        left: 0;
        margin-top: 8px;
        padding: 12px;
        position: relative;
        transform: none;
        -ms-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -webkit-transform: none;
        width: 100%;
    }

        .signInInnerWrap .asideMessage:after, .signInInnerWrap .asideMessage:before {
            bottom: 100%;
            left: 50%;
            top: auto;
            right: auto;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .signInInnerWrap .asideMessage:after {
            border-color: rgba(239, 84, 1, 0);
            border-bottom-color: #ef5401;
            border-width: 10px;
            margin-left: -10px;
        }

        .signInInnerWrap .asideMessage:before {
            border-color: rgba(236, 35, 45, 0);
            border-bottom-color: #ec232d;
            border-width: 11px;
            margin-left: -11px;
        }
}










/* Max 640 px */

@media (max-width: 640px) {

    .homeInnerWrap > h1 {
        color: #707070;
        font-size: 34px;
        letter-spacing: 0;
    }

    .details .detailsHeader {
        height: 160px;
    }

    .detailsHeader h2, .detailsHeader p {
        padding-left: 185px;
    }

    .detailsHeader .arrow {
        position: relative;
        top: 20px;
    }

    .faqWrap {
        padding: 80px 20px 0;
    }

        .faqWrap h2 {
            font-size: 32px;
        }

    .contactWrap {
        padding: 80px 20px 0;
    }

        .contactWrap h2 {
            font-size: 32px;
            padding: 0;
        }

        .contactWrap > div.leftColumn > form {
            padding: 20px 0;
        }

        .contactWrap > div.rightColumn {
            padding: 0;
        }

    .contactThankYou {
        padding: 0;
    }
}










/* Max 560 px */

@media (max-width: 560px) {

    .homeInnerWrap > h1 {
        color: #707070;
        font-size: 28px;
        letter-spacing: 0;
    }

    .contactWrap > div.leftColumn > form input[type=submit] {
        width: 100%;
    }

    .details .detailsInnerWrap .rightColumn {
        padding: 0 20px;
    }
}










/* Max 480 px */

@media (max-width: 480px) {

    .topBarLogo {
        display: inline-block;
        width: 200px;
        overflow: hidden;
    }

    .homeInnerWrap > h1 {
        color: #707070;
        font-size: 24px;
        letter-spacing: 0;
    }

    .mobileNavigation ul li a {
        font-size: 16px;
        padding: 12px 4px;
    }

    .details .detailsHeader {
        background-position: center left 50px;
        background-size: 64px auto;
        min-height: 120px;
        height: auto;
        padding-bottom: 10px;
    }

    .detailsHeader h2, .detailsHeader p {
        padding-left: 130px;
    }

    .detailsHeader h2 {
        font-size: 16px;
        letter-spacing: 1px;
        padding-top: 12px;
        padding-left: 130px;
        padding-right: 12px;
    }

    .detailsHeader p {
        font-size: 14px;
        letter-spacing: normal;
        padding-top: 12px;
        padding-left: 130px;
        padding-right: 12px;
    }

    .detailsHeader .arrow {
        top: 0;
    }

    .details .detailsInnerWrap {
        padding: 12px 0;
    }

        .details .detailsInnerWrap .rightColumn {
            padding: 0 20px 20px;
        }

        .details .detailsInnerWrap h2 {
            font-size: 24px;
        }

        .details .detailsInnerWrap h3 {
            font-size: 16px;
            letter-spacing: normal;
        }

        .details .detailsInnerWrap p {
            font-size: 16px;
        }

        .details .detailsInnerWrap ul {
            font-size: 16px;
        }

    .signInInnerWrap > form a.forgotPassword {
        font-size: 14px;
    }

    .faqWrap h2 {
        font-size: 20px;
        letter-spacing: normal;
    }

    .faqWrap .question, .faqWrap .answer {
        font-size: 16px;
    }

    .contactWrap > h2 {
        font-size: 20px;
        letter-spacing: normal;
    }

    .contactWrap > div.leftColumn, .contactWrap > div.rightColumn {
        font-size: 16px;
    }
}










/* Max 320 px */

@media (max-width: 320px) {

    .homeInnerWrap > h1 {
        font-size: 24px;
        letter-spacing: 0;
    }

        .homeInnerWrap > h1 > small {
            font-size: 16px;
            letter-spacing: 0;
        }
}


/** Validation and custom styles **/
/*.form-element .error {
	display: none;
}


.login-message-wrapper {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
}


@media (min-width: 768px) {
	.login-message-wrapper {
		position: absolute;
		top: 10%;
		left: -220px;
		width: 200px;
	}
}

@media (min-width:1024px) {
	.login-message-wrapper {
		left: -300px;
		position: absolute;
		top: 10%;
		width: 300px;
		font-size: 16px;
	}
}

.remember-id label {
	color: #4d4d4d;
	display: block;
	font-size: 16px;
	margin: 0 0 10px;
}

.captcha-panel table {
	float: none !important;
}*/

.topBarMenu > ul > li > a.signInButton {
    background: #f0f0f0;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwZjBmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkY2RjZGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #f0f0f0 0%, #dcdcdc 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#dcdcdc));
    background: -webkit-linear-gradient(top, #f0f0f0 0%,#dcdcdc 100%);
    background: -o-linear-gradient(top, #f0f0f0 0%,#dcdcdc 100%);
    background: -ms-linear-gradient(top, #f0f0f0 0%,#dcdcdc 100%);
    background: linear-gradient(to bottom, #f0f0f0 0%,#dcdcdc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#dcdcdc',GradientType=0 );
    font-size: 18px;
    color: #f05500;
    text-transform: uppercase;
    padding: 7px 22px;
    margin-top: 12px;
}


/** Elemica styles **/
.homeInnerWrap .plus {
    padding: 0 30px;
}

.homeInnerWrap img {
    max-width: 90%;
}

.homeInnerWrap > h1 > small {
    font-size: 36px;
    letter-spacing: -1px;
}

.homeElemicaInnerWrap {
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
}

    .homeElemicaInnerWrap h2 {
        color: #0099cc;
        font-size: 20px;
    }

    .homeElemicaInnerWrap h3 {
        color: #4d4d4d;
        font-size: 20px;
    }

    .homeElemicaInnerWrap p, .homeElemicaInnerWrap ul {
        color: #4d4d4d;
        font-size: 18px;
    }

.elemicaChartContainer {
    text-align: center;
}

    .elemicaChartContainer img {
        padding: 0 6px;
    }

    .elemicaChartContainer span:first-child img {
        padding-left: 0;
    }

    .elemicaChartContainer span:last-child img {
        padding-right: 0;
    }

@media (max-width: 1024px) {
    .homeInnerWrap .plus; {
        display: block;
        margin: 0 auto;
    }

    .homeInnerWrap {
        padding: 12px 24px 12px;
    }
}

@media (max-width: 800px) {
    .elemicaChartContainer span; {
        display: block;
        text-align: center;
    }

    .elemicaChartContainer img.arrow {
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
}

.download-wrapper {
    text-align: center;
}

    .download-wrapper h2 {
        display: inline-block;
        font-size: 44px;
        margin-top: 14px;
        vertical-align: top;
    }

    .download-wrapper .download-link {
        display: inline-block;
        height: 75px;
        margin-top: 12px;
        width: 75px;
    }

        .download-wrapper .download-link img {
            width: 100%;
            max-width: 100%;
        }

.customerServiceSignIn {
    background-color: #02A9A2;
    border: 0;
    color: white;
    display: inline-block;
    font-size: 18px;
    padding: 7px 22px;
    text-transform: uppercase;
}

    .customerServiceSignIn:hover {
        text-decoration: underline;
    }

@media screen and (max-width: 480px) {
    .customerServiceSignIn {
        font-size: 16px;
    }
}

body .embeddedServiceHelpButton .helpButton {
    bottom: auto;
    top: 0;
}

    body .embeddedServiceHelpButton .helpButton .uiButton {
        background-color: #F05500;
        border-radius: 0 0 8px 8px;
        outline: 1px solid #F05500;
    }

@media only screen and (min-width: 48em) {
    body .embeddedServiceHelpButton .helpButton .uiButton:hover::before,
    body .embeddedServiceHelpButton .helpButton .uiButton:focus::before {
        border-radius: 0 0 8px 8px;
    }
}

body .embeddedServiceSidebar.layout-docked .dockableContainer {
    border-radius: 0 0 8px 8px;
    bottom: auto;
    max-height: 600px;
    top: 0;
}

.cookieStatement__wrapper {
    position: relative;
    z-index: 9999;
}

    .cookieStatement__wrapper * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        color: #fff;
    }

    .cookieStatement__wrapper .cookieStatement__container {
        background-color: #0099cc;
        color: #fff;
        font-family: 'KyrialSansProRegular';
        font-size: 16px;
        padding: 15px 30px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* bottom: -100%; */
        overflow: auto;
        max-height: 40%;
        transition: bottom 1s, transform 1s;
        transform: translateY(100%);
    }

        .cookieStatement__wrapper .cookieStatement__container.opened {
            transform: translateY(0);
        }

        .cookieStatement__wrapper .cookieStatement__container p a {
            color: #FFD000;
            text-decoration: none;
            transition: color .3s;
        }

            .cookieStatement__wrapper .cookieStatement__container p a:hover {
                color: #F79328;
            }

@media screen and (max-width: 480px) {
    .cookieStatement__wrapper .cookieStatement__container p {
        padding-right: 0;
    }
}

.cookieStatement__wrapper .cookieStatement__container button {
    color: #000;
    cursor: pointer;
    background-color: #ffd000;
    border: 0;
    border-radius: 5px;
    font-size: 16px;
    min-width: 110px;
    padding: 0.5em 0.75em;
    /* position: absolute; */
    outline: 0;
    /* right: 30px; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
    transition: background-color 0.3s, color 0.3s;
}

    .cookieStatement__wrapper .cookieStatement__container button:hover {
        background-color: #fff;
        color: #EA1C2C;
    }

.cookieStatement__wrapper .cookieStatement__choices input {
    display: none;
}

.cookieStatement__wrapper .cookieStatement__container .cookieStatement__choices label[for='cookieStatement__required'] .cookieStatement__label {
    color: #bebeb0;
}

.cookieStatement__wrapper .cookieStatement__choices ul {
    display: flex;
    justify-content: center;
}

    .cookieStatement__wrapper .cookieStatement__choices ul li {
        margin: 0 20px 0 0;
        list-style: none;
    }

        .cookieStatement__wrapper .cookieStatement__choices ul li label {
            align-items: center;
            cursor: pointer;
            display: flex;
            flex-direction: row-reverse;
            position: relative;
        }

@media screen and (max-width: 480px) {
    .cookieStatement__wrapper .cookieStatement__choices ul {
        display: block;
    }

        .cookieStatement__wrapper .cookieStatement__choices ul li {
            margin: 15px 0 0 0;
        }

            .cookieStatement__wrapper .cookieStatement__choices ul li label {
                display: inline-flex;
            }

    .cookieStatement__wrapper .cookieStatement__container button {
        display: block;
        margin-top: 15px;
        padding: 15px 13px 15px;
        position: static;
        transform: none;
        width: 100%;
    }
}

@media screen and (max-width: 768px), (max-height: 700px) {
    .cookieStatement__wrapper .cookieStatement__container {
        font-size: 12px;
    }

        .cookieStatement__wrapper .cookieStatement__container button {
            font-size: 12px;
        }
}

.cookieStatement__choices {
    padding: 20px 0 10px;
}

.cookieStatement__confirmation {
    padding: 10px 0;
    text-align: center;
}

/* NEW STYLES */
.cookieStatement__switch {
    position: relative;
    height: 20px;
    width: 20px;
    background-color: #e6e6e6;
    border: 0px solid #000000;
    border-radius: 0px;
    transition: background-color .3s;
}

.cookieStatement__option:hover input ~ .cookieStatement__switch,
.cookieStatement__option input:focus ~ .cookieStatement__switch {
    background-color: #cccccc;
}

.cookieStatement__option input:checked ~ .cookieStatement__switch {
    background-color: #F79328;
}

.cookieStatement__option:hover input:not([disabled]):checked ~ .cookieStatement__switch,
.cookieStatement__option input:checked:focus ~ .cookieStatement__switch {
    background-color: #FFD000;
}

.cookieStatement__option input:disabled ~ .cookieStatement__switch {
    background-color: #bebeb0;
    opacity: 1;
    pointer-events: none;
}

.cookieStatement__switch:after {
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none;
}

.cookieStatement__option input:checked ~ .cookieStatement__switch:after {
    display: block;
}

.cookieStatement__option .cookieStatement__switch:after {
    left: 8px;
    top: 4px;
    width: 3px;
    height: 8px;
    border: solid #000000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cookieStatement__option input:disabled ~ .cookieStatement__switch:after {
    border-color: #7b7b7b;
}

.cookieStatement__label {
    margin-left: 10px;
}