@charset "UTF-8";

/*! Begin MAIN.CSS FILE [2 modules combined - Main Page Body and Brand Grid] */

/*!
 *  Begin MAIN.CSS for Main Page Body
 */

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main, menu {
    display: block
}

[hidden] {
    display: none
}

a {
    background-color: transparent
}

a:active, a:hover {
    outline: 0
}

b {
    font-weight: 700
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

sub {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

button {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button {
    text-transform: none
}

button {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled] {
    cursor: default
}

button::-moz-focus-inner {
    border: 0;
    padding: 0
}

[hidden] {
    display: none
}

@viewport {
    zoom: 1;
    width: device-width;
    height: device-height
}

html {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-base-color: #1a2024;
    scrollbar-face-color: #4e5162;
    scrollbar-track-color: #1a2024;
    scrollbar-3dlight-color: #4e5162;
    scrollbar-highlight-color: #4e5162;
    scrollbar-arrow-color: #4e5162;
    scrollbar-darkshadow-color: #4e5162;
    scrollbar-shadow-color: #4e5162
}

html ::-webkit-scrollbar {
    background: #141a1e
}

html ::-webkit-scrollbar-track {
    background: 0 0
}

html ::-webkit-scrollbar-thumb {
    background: #4e5162
}

html ::-webkit-scrollbar-thumb:hover {
    background: #c3c3ce
}

html body {
    position: relative;
    min-height: 100%;
    min-width: 320px;
    line-height: 1.42857;
    max-width: 100%;
    font-family: 'Noto Sans', 'Body Fallback', sans-serif;
    font-size: 20px;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-touch-action: pan-y;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

a, a:active, a:visited {
    color: inherit;
    text-decoration: none
}

a:hover {
    text-decoration: none
}

h1 {
    font-size: 26px;
    color: #001;
    font-weight: 400
}

h2 {
    font-size: 20px;
    font-weight: 400;
    line-height: 14px
}

h3 {
    font-size: 16px;
    font-weight: 400
}

button {
    border: 0;
    background: 0 0
}

[visible] {
    transition-property: opacity, transform;
    transition-timing-function: ease-out;
    transition-delay: 0, 0;
    transition-duration: .5s, .5s!important;
    opacity: 0!important;
    transform: translateY(20px)!important
}

[visible]:nth-child(1) {
    transition-delay: .4s, .4s
}

[visible]:nth-child(2) {
    transition-delay: .8s, .8s
}

[visible]:nth-child(3) {
    transition-delay: 1.2s, 1.2s
}

[visible]:nth-child(4) {
    transition-delay: 1.6s, 1.6s
}

[visible]:nth-child(5) {
    transition-delay: 2s, 2s
}

[visible]:nth-child(6) {
    transition-delay: 2.4s, 2.4s
}

[visible]:nth-child(7) {
    transition-delay: 2.8s, 2.8s
}

[visible]:nth-child(8) {
    transition-delay: 3.2s, 3.2s
}

[visible]:nth-child(9) {
    transition-delay: 3.6s, 3.6s
}

[visible]:nth-child(10) {
    transition-delay: 4s, 4s
}

[visible]:nth-child(11) {
    transition-delay: 4.4s, 4.4s
}

[visible]:nth-child(12) {
    transition-delay: 4.8s, 4.8s
}

[visible]:nth-child(13) {
    transition-delay: 5.2s, 5.2s
}

[visible]:nth-child(14) {
    transition-delay: 5.6s, 5.6s
}

[visible]:nth-child(15) {
    transition-delay: 6s, 6s
}

[visible]:nth-child(16) {
    transition-delay: 6.4s, 6.4s
}

[visible]:nth-child(17) {
    transition-delay: 6.8s, 6.8s
}

[visible]:nth-child(18) {
    transition-delay: 7.2s, 7.2s
}

[visible]:nth-child(19) {
    transition-delay: 7.6s, 7.6s
}

[visible]:nth-child(20) {
    transition-delay: 8s, 8s
}

[visible=true] {
    opacity: 1!important;
    transform: translateY(0)!important
}

[visible=false] {
    opacity: 0!important;
    transition-duration: .1s, .1s!important;
    transform: translateY(20px)!important
}

svg.icon {
    vertical-align: middle
}

svg.icon .text {
    fill: #454750;
    transition: fill .1s
}

svg.icon .background {
    fill: transparent;
    transition: fill 1s
}

.has-cursor svg.icon:hover .text {
    fill: #cfcfdb
}

.has-cursor svg.icon:hover .background {
    fill: #171c1f
}

svg.icon[variant*=negative] .text {
    fill: #cfcfdb
}

svg.icon[variant*=negative] .background {
    fill: rgba(16, 20, 23, .8)
}

.has-cursor svg.icon[variant*=negative]:hover .text {
    fill: #0b0e10
}

.has-cursor svg.icon[variant*=negative]:hover .background {
    fill: #fff
}

svg.icon[variant*=switch] .text {
    opacity: 0;
    transition: fill .1s, opacity .5s
}

.rtf {
    font-size: 14px;
    line-height: 1.8em
}

.rtf h2, .rtf h3, .rtf h4, .rtf h5 {
    font-family: Title, 'Title Fallback 1', 'Title Fallback 2', sans-serif;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: -.01em;
    margin: 0 0 10px
}

.rtf h2 {
    font-size: 56px
}

@media screen and (max-width:750px) {
    .rtf h2 {
        font-size: 38px
    }
}

.rtf h3 {
    font-size: 45px
}

@media screen and (max-width:750px) {
    .rtf h3 {
        font-size: 35px
    }
}

.rtf h4 {
    font-size: 35px
}

@media screen and (max-width:750px) {
    .rtf h4 {
        font-size: 28px
    }
}

.rtf h5 {
    font-size: 25px
}

@media screen and (max-width:750px) {
    .rtf h5 {
        font-size: 18px
    }
}

.rtf .body-text, .rtf p, .rtf p.body-text {
    font-size: 14px;
    line-height: 1.78em;
    margin: 0 0 30px
}

/*!
 *  Begin CSS for Main Heading Font Color
 */

.rtf a {
    color: #47a742
}

/*!
 *  End CSS for Main Heading Font Color
 */

/*!
 *  Begin CSS for Main
  */

body {
    background-color: #fff
}

/*!
 *  End CSS for Main
 */

.viewport {
    z-index: 2;
    position: relative;
    box-sizing: border-box;
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    padding: 0;
    border: 0 solid transparent;
    margin: 0 auto;
    opacity: 1;
    transition: opacity .5s linear
}

.viewport>.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    position: relative;
    z-index: 3
}

.viewport>.background.container {
    z-index: 2
}

.loading .viewport {
    visibility: collapse;
    opacity: 0;
    transition: opacity 1s linear
}

.viewport[state~=pushed-down]:before {
    content: ' ';
    display: block;
    padding-top: 90px
}

@media screen and (max-width:750px) {
    .viewport[state~=pushed-down]:before {
        padding-top: 110px
    }
}

.viewport[state~=pushed-down-extra]:before {
    content: ' ';
    display: block;
    padding-top: 156px
}

.viewport[state*=pushed-right] {
    border-left-width: 228px
}

.viewport[state*="pushed-right pushed-down-less"] {
    border-left-width: 228px
}

.viewport[state*="pushed-right pushed-down-less"]:before {
    content: ' ';
    display: block;
    padding-top: 66px
}

.viewport[state*=pushed-left] {
    opacity: .2
}

.viewport[state*=pushed-up] {
    border-bottom-width: 240px
}

.viewport[variant=stage] {
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0
}

.viewport[variant=stage][state=active] {
    opacity: 1
}

.viewport[variant=size] {
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 100vh
}

.viewport[variant=live] {
    z-index: 2;
    position: relative
}

.viewport[variant*=overlay] {
    display: none
}

.viewport[variant*=overlay][state*=active] {
    display: block;
    z-index: 3
}

@media screen and (max-width:750px) {
    .viewport[state=pushed-down-extra] .container[variant=default]>.unit:before {
        padding-top: 60vh
    }
}

@media screen and (min-width:751px) and (max-width:1499px) {
    .viewport[state=pushed-down-extra] .container[variant=default]>.unit:before {
        padding-top: 68vh
    }
}

@media screen and (min-width:1500px) {
    .viewport[state=pushed-down-extra] .container[variant=default]>.unit:before {
        padding-top: 75vh
    }
}

@media screen and (max-width:750px) {
    .viewport[state=pushed-down-extra] .container[variant=default][modifier*=medium]>.unit:before {
        padding-top: 50vh
    }
}

@media screen and (min-width:751px) and (max-width:1499px) {
    .viewport[state=pushed-down-extra] .container[variant=default][modifier*=medium]>.unit:before {
        padding-top: 55vh
    }
}

@media screen and (min-width:1500px) {
    .viewport[state=pushed-down-extra] .container[variant=default][modifier*=medium]>.unit:before {
        padding-top: 60vh
    }
}

@media screen and (max-width:750px) {
    .viewport[state=pushed-down-extra] .container[variant=default][modifier*=small]>.unit:before {
        padding-top: 30vh
    }
}

@media screen and (min-width:751px) and (max-width:1499px) {
    .viewport[state=pushed-down-extra] .container[variant=default][modifier*=small]>.unit:before {
        padding-top: 34vh
    }
}

@media screen and (min-width:1500px) {
    .viewport[state=pushed-down-extra] .container[variant=default][modifier*=small]>.unit:before {
        padding-top: 37vh
    }
}

@media screen and (max-width:750px) {
    .viewport[state=pushed-down-extra] .container[variant=default][modifier*=extra-small]>.unit:before {
        padding-top: 15vh
    }
}

@media screen and (min-width:751px) and (max-width:1499px) {
    .viewport[state=pushed-down-extra] .container[variant=default][modifier*=extra-small]>.unit:before {
        padding-top: 17vh
    }
}

@media screen and (min-width:1500px) {
    .viewport[state=pushed-down-extra] .container[variant=default][modifier*=extra-small]>.unit:before {
        padding-top: 18vh
    }
}

@font-face {
    font-family: 'Body Fallback';
    src: local("Arial");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Title;
    src: url(/browser-resources/fonts/futura/futura-condensed-bold.eot);
    src: url(/browser-resources/fonts/futura/futura-condensed-bold.eot?#iefix) format("embedded-opentype"), url(/browser-resources/fonts/futura/futura-condensed-bold.woff2) format("woff2"), url(/browser-resources/fonts/futura/futura-condensed-bold.woff) format("woff"), url(/browser-resources/fonts/futura/futura-condensed-bold.ttf) format("truetype"), url(/browser-resources/fonts/futura/futura-condensed-bold.svg#futura-condensed-bold) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'Title Fallback 1';
    src: local("Arial Black");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: 'Title Fallback 2';
    src: local("Verdana");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Subtitle;
    src: url(/browser-resources/fonts/futura/futura-condensed.eot);
    src: url(/browser-resources/fonts/futura/futura-condensed.eot?#iefix) format("embedded-opentype"), url(/browser-resources/fonts/futura/futura-condensed.woff2) format("woff2"), url(/browser-resources/fonts/futura/futura-condensed.woff) format("woff"), url(/browser-resources/fonts/futura/futura-condensed.ttf) format("truetype"), url(/browser-resources/fonts/futura/futura-condensed.svg#futura-condensed) format("svg");
    font-weight: 400;
    font-style: normal
}

.wow {
    visibility: hidden
}

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100px, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1)
    }
    50% {
        opacity: 1
    }
}

@keyframes pop-centered {
    50% {
        transform: translate(-50%, -50%) scale(1.03)
    }
}

@keyframes pop {
    50% {
        transform: scale(1.03)
    }
}

@keyframes slideInTop {
    0% {
        transform: translate3d(0, -120%, 0)
    }
}

@keyframes slideInBottom {
    0% {
        transform: translate3d(0, 120%, 0)
    }
}

@keyframes delayedSlideInBottom {
    0% {
        transform: translate3d(0, 120%, 0)
    }
    75% {
        transform: translate3d(0, 120%, 0)
    }
}

.overlay .title {
    display: block;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1em;
    font-family: Title, 'Title Fallback 1', 'Title Fallback 2', sans-serif;
    font-size: 55px;
    color: #001;
    margin-top: 0;
    margin-bottom: 30.5px
}

@media screen and (min-width:750px) {
    .overlay .title {
        margin-top: 9px;
        margin-bottom: 21px
    }
}

@media screen and (max-width:750px) {
    .overlay .title {
        font-size: 55px
    }
}

@media screen and (max-width:500px) {
    .overlay .title {
        font-size: 40px;
        text-align: left;
        padding: 0 40px 0 20px
    }
}

@media screen and (max-width:400px) {
    .overlay .title {
        font-size: 25px;
        padding-right: 80px
    }
}

.overlay .button {
    display: inline-block;
    overflow: hidden;
    position: relative;
    line-height: 60px;
    margin: 12.5px;
    padding: 0 30px;
    min-width: 237px;
    min-height: 60px;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0);
    color: #001;
    font-family: Title, 'Title Fallback 1', 'Title Fallback 2', sans-serif;
    text-transform: uppercase;
    transition: background-color .8s, color .1s, box-shadow .4s;
    font-size: 14px;
    letter-spacing: 2px
}

.overlay .button[variant=color1] {
    background: #4661a2
}

.overlay .button[variant=color2] {
    background: #5daaf3
}

.overlay .button[variant=color3] {
    background: #c52118
}

.overlay .button[variant=color4] {
    background: #e43037
}

.overlay .button[variant=color5] {
    background: #7bb32e
}

.overlay .button[variant=color6] {
    background: #4c68d7
}

.overlay .button .icon {
    vertical-align: text-bottom;
    margin-right: 10px
}

.overlay .button .text {
    fill: #fff;
    transition: fill .1s
}

.has-cursor .overlay .button:before {
    display: block;
    content: '';
    background-image: url(/browser-resources/img/button-hover.png);
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity .3s ease-out, background-size .3s ease-in;
    background-size: 0;
    opacity: 0;
    z-index: -1
}

.has-cursor .overlay .button:hover:before, .has-cursor .overlay .button[state=active]:before {
    background-size: 115%;
    opacity: 1;
    transition: opacity .3s ease-in, background-size .3s ease-out
}

.has-cursor .overlay .button:hover, .has-cursor .overlay .button[state=active] {
    position: relative;
    z-index: 1;
    color: #000
}

.has-cursor .overlay .button:hover .text, .has-cursor .overlay .button[state=active] .text {
    position: relative;
    z-index: 1;
    fill: #000
}

.overlay.container {
    position: fixed;
    box-sizing: border-box;
    top: 0;
    left: 0;
    right: 0;
    bottom: 100%;
    overflow: hidden;
    opacity: 0;
    background: #1a2024;
    transition: opacity 1s, bottom .1s linear .4s
}

.overlay.container[state*=active] {
    z-index: 10;
    opacity: 1;
    pointer-events: auto;
    bottom: 0;
    transition: opacity 1s
}

.overlay.container[state*=disappearing] {
    z-index: 10;
    opacity: 0;
    pointer-events: auto;
    bottom: 0;
    transition: opacity 1s
}

.overlay.container[state*=shown] {
    z-index: 10;
    opacity: 1;
    pointer-events: auto;
    bottom: 0;
    transition: opacity 1s
}

.overlay.container[state=] {
    z-index: 0;
    pointer-events: none
}

.overlay.unit {
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transform: translateY(20px) scale(.95);
    transition: transform 1s, opacity 2s linear;
    text-align: center
}

.overlay.unit[state*=active] {
    z-index: 10;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto
}

.overlay.unit[state*=shown] {
    z-index: 10;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: transform 0s, opacity 2s linear
}

.overlay.unit[state*=hidden] {
    z-index: 10;
    opacity: 0;
    transform: translateY(0);
    pointer-events: auto;
    transition: transform 0s, opacity 2s linear
}

.overlay.unit[modifiers*=allow-scrolling] {
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 100vh
}

.overlay.unit[modifiers*=haslegal] {
    max-height: calc(100vh - 110px)
}

@media screen and (max-width:750px) {
    .overlay.unit[modifiers*=haslegal] {
        max-height: calc(100vh - 100px)
    }
}

.overlay.unit[name=languages] {
    -ms-flex-align: start;
    align-items: flex-start
}

@media screen and (max-width:750px) {
    .overlay.unit {
        padding-top: 30px
    }
}

@media screen and (min-width:751px) {
    .overlay.unit {
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        -moz-align-items: center;
        align-items: center;
        -ms-flex-pack: center;
        -moz-justify-content: center;
        justify-content: center
    }
}

.lt-ie10.has-cursor .overlay .button:before {
    display: none
}

.lt-ie9 .overlay[state=] {
    display: none
}

.lt-ie9 .overlay[state=active] {
    background: #000;
    opacity: 1;
    display: block
}

.background[variant=default] {
    position: fixed;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transition: opacity 1s linear, background 1s
}

@supports (object-fit:cover) {
    @media screen and (max-width: 750px) {
        .background[variant=default] {
            height:calc(100vh + 100px)
        }
        .background[variant=default] img {
            max-width: 100%;
            max-width: 100vw;
            max-height: 100%;
            max-height: 100vh
        }
    }
}

@supports (object-fit:cover) {
    .background[variant=default] .image_ratio:before {
        content: '';
        display: block;
        position: relative;
        padding-top: 100%
    }
}

@supports (object-fit:cover) {
    .background[variant=default] .image_ratio embed, .background[variant=default] .image_ratio iframe, .background[variant=default] .image_ratio img, .background[variant=default] .image_ratio object, .background[variant=default] .image_ratio video {
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        object-fit: cover;
        transform: translate(0, 0)
    }
    @media screen and (max-aspect-ratio:16 / 10) {
        .background[variant=default] .image_ratio embed, .background[variant=default] .image_ratio iframe, .background[variant=default] .image_ratio img, .background[variant=default] .image_ratio object, .background[variant=default] .image_ratio video {
            width: 100%;
            height: 100%
        }
    }
}

.background[variant=default] * {
    pointer-events: none!important
}

.background[variant=default]>.unit {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.background[variant=default]>.unit img {
    border: 0 none;
    min-width: 100%;
    min-height: 100%;
    opacity: 0;
    transition: opacity 1.5s linear 1s
}

.background[variant=default]>.unit * {
    pointer-events: none!important
}

.background[variant=default]>.unit[state*=active] img {
    opacity: 1
}

.background[variant=editing].container {
    position: relative;
    width: 960px;
    margin: 0 auto
}

.background[variant=editing]>.unit {
    position: relative;
    width: 960px;
    height: 540px;
    max-width: 100%
}

.background[variant=editing]>.unit * {
    max-width: 100%;
    height: auto
}

@supports (object-fit:cover) {
    .trigger[variant*=default] .background embed, .trigger[variant*=default] .background iframe, .trigger[variant*=default] .background img, .trigger[variant*=default] .background object, .trigger[variant*=default] .background video, .trigger[variant*=default] .video embed, .trigger[variant*=default] .video iframe, .trigger[variant*=default] .video img, .trigger[variant*=default] .video object, .trigger[variant*=default] .video video {
        height: 100%
    }
}

@keyframes delayedFade {
    50% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

/*!
 *  Begain Accordian CSS on Main Screens
 */

/*! NOTE IMPORTANT
 *  !!!!! 'max-width: 123px controls Grid Width !!!!!
 */

.faq.unit {
    box-sizing: border-box;
    width: 100%;
    max-width: 1310px;
    padding: 0 60px;
    margin: auto
}

/*!
 *  !!!!! 'max-width: 123px controls Grid Width !!!!!
 */

@media screen and (max-width:750px) {
    .faq.unit {
        width: 100%;
        padding: 0
    }
}

.faq .head {
    overflow: hidden
}

/*!
 *  Begin CSS for MainPage TITLE Color 
 */

.faq .head .title {
    line-height: 1.1em;
    margin-top: 2px;
    font-family: Title, 'Title Fallback 1', 'Title Fallback 2', sans-serif;
    font-size: 24px;
    color: #f6b93b;
    text-transform: none;
    text-align: center
}

/*!
 *  End CSS for Main Page TITLE Color 
 */

/*!
 *  Begin CSS for MainPage TITLE FONT SIZE 
 */

@media screen and (min-width:751px) {
    .faq .head .title {
        font-size: 38px
    }
}

/*!
 *  End CSS for MainPage TITLE FONT SIZE 
 */


/*!
 *  Begin CSS for Main Menu Bar Backgrounds
 */

.faq .head .button .text {
    fill: #fff
}

.has-cursor .faq .head .button:hover {
    outline: 0 none;
    color: #001;
    background: #fff
}

.has-cursor .faq .head .button:hover .text {
    fill: #0b0e10
}

/*!
 *  End CSS for Main Menu Bar Backgrounds
 */

.faq .resultnumber {
    line-height: 1.1em;
    margin: -.14em 0;
    font-family: Title, 'Title Fallback 1', 'Title Fallback 2', sans-serif;
    font-size: 25px;
    color: #001;
    text-transform: uppercase;
    text-align: center
}

.faq .resultnumber.container {
    margin-bottom: 40px
}

.faq .resultnumber[state=hidden] {
    display: none
}

.faq .resultnumber[state=active] {
    display: block
}

.faq .menu.container {
    background: #14181c;
    min-height: 70px;
    margin: 0 0 20px 0;
    text-align: center;
    display: block;
    position: relative;
    overflow: hidden;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    -moz-justify-content: space-around;
    justify-content: space-around;
    -ms-flex-align: stretch;
    -moz-align-items: stretch;
    align-items: stretch
}

.faq .menu.container[variant=result] {
    display: -ms-flexbox;
    display: flex
}

.faq .menu.container[variant=no-result] {
    display: none
}

/*!
 *  Begin CSS for Main MENU BAR BOX Color 
 */

.faq .menu.unit {
    position: relative;
    display: inline-block;
    -moz-flex: 1 1 0;
    -ms-flex: 1 1 auto;
    flex: 1 1 0;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    -moz-justify-content: center;
    justify-content: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
    overflow: hidden;
    font-family: Title, 'Title Fallback 1', 'Title Fallback 2', sans-serif;
    font-size: 14px;
    color: #474b4f;
    text-transform: uppercase;
    text-align: center;
    background: #6b6e70;
    transition: background .5s, box-shadow .5s;
    height: 70px;
    box-shadow: 0 0 0 0 transparent
}

/*!
 *  End CSS for Main MENU BAR BOX Color 
 */

.faq .menu.unit:last-child {
    margin-right: 0
}

@media screen and (max-width:750px) {
    .faq menu.unit {
        font-size: 12px
    }
}

/*!
 *  Begin CSS for Main Menu Bar [|] Separators 
 */

.faq .menu.unit:after {
    content: "";
    background: #f12c29;
    height: 19px;
    width: 3px;
    position: absolute;
    right: -1px;
    top: calc(35px - 9.5px);
    opacity: 1;
    transition: opacity .1s ease .4s
}

/*!
 *  End CSS for Main Menu Bar [|] Separators 
 */

/*!
 *  Begin CSS for Main Menu Bar On-Hover TEXT Color
 */

.has-cursor .faq .menu.unit:hover {
    background: #fff;
    color: #14181c;
    box-shadow: 0 0 0 2px #fff
}

/*!
 *  End CSS for Menu Bar On-Hover TEXT Color
 */

.has-cursor .faq .menu.unit:hover:after {
    opacity: 0;
    transition: none
}

.faq .menu.unit:active, .faq .menu.unit:focus {
    outline: 0 none;
    color: #fff
}

/*!
 *  Begin CSS for Main Menu Bar ACTIVE Background Color
 */

.faq .menu.unit[state=active] {
    color: #001;
    background: #fed330;
    box-shadow: 0 0 0 2px #171d21
}

/*!
 *  End CSS for Main Menu Bar ACTIVE Background Color
 */

.faq .menu.unit[state=active]:after {
    opacity: 0;
    transition: none
}

.faq .menu.unit .text {
    padding: 25px 10px;
    width: 100%;
    box-sizing: border-box
}

@media screen and (max-width:750px) {
    .faq .menu.unit .text {
        padding: 20px 5px
    }
}

.faq .menu.unit:last-child:after {
    background: 0 0
}

/*!
 *  Begin Color for Text
 */

.faq .list .title {
    padding: 0 83px;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: Title, 'Title Fallback 1', 'Title Fallback 2', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    color: #001
}


/*!
 *  Begin Color for Toggel Text [Black +/- Red] 
 */

/*!
 *  Beginning of [-] text-sign Color & Blinking settings
 */

.faq .list [state=active] .icon .text {
    fill: #F12C29;
    animation: blink 1.1s ease-out infinite alternate;
}

@keyframes blink {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.0;
    }
}

/*!
 *  End of [-] text-sign Color & Blinking settings
 */

/*! (SAVE: Non-Blinking Code = ) .faq .list [state="active"] .icon .text {fill: #F12C29;}  */

/*!
 *  End Color for Toggel Text [Black +/- Red] 
 */


@media screen and (max-width:750px) {
    .faq .list .title {
        padding: 0 30px
    }
}

.faq .list .title[variant=level1] {
    font-size: 25px;
    padding: 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    height: 60px;
    margin-top: 20px;
    -ms-flex-align: end;
    align-items: flex-end;
    padding-bottom: 8px
}

.faq .list .title[variant=level2] {
    font-size: 22px;
    color: #47a742;
    padding: 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    height: 60px;
    margin-top: 20px;
    -ms-flex-align: end;
    align-items: flex-end;
    padding-bottom: 9px
}

.faq .list .title[variant=level3] {
    font-size: 18px;
    color: #b0e768;
    padding: 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    height: 60px;
    margin-top: 20px;
    -ms-flex-align: end;
    align-items: flex-end;
    padding-bottom: 10px
}

.faq .list .title[state=active] {
    display: block
}

.faq .list .title[state=active] p {
    margin: 10px 0
}

.faq .list .title[state=hidden] {
    display: none
}

.faq .list .content {
    font-size: 14px;
    line-height: 26px;
    color: #001;
    padding: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .2);
    transition: max-height .3s ease-out, opacity .3s linear
}

.faq .list .content>div {
    padding: 20px 30px 40px
}

@media screen and (min-width:751px) {
    .faq .list .content>div {
        padding: 20px 83px 20px 83px
    }
}

.faq .list .content p {
    font-size: 14px;
    margin: 10px 0
}

/*!
 *  Begin CSS for Main Background for [+] Toggel Button Color 
 */

.faq .list .button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    outline: 0;
    height: 70px;
    width: 76px;
    padding: 0;
    margin: 0;
    background-color: #000;
    background-color: #fff;
    float: left
}

/*!
 *  End CSS for Main Background for [+] Toggel Button Color 
 */

@media screen and (max-width:750px) {
    .faq .list .button {
        width: 20px
    }
}


/*!
 *  Begin CSS for Main [+] Toggel Button Character Color 
  * See; https://www.w3.org/TR/SVGMobile12/animate.html#AnimateColorElement 
 */

.faq .list .button .text {
    fill: #474b4f
    animateColor attributeName="fill" from="#474b4f" to="#255" 
    begin="1s" dur="5s" fill="freeze" additive="sum"
}

.faq .list .button .icon {
    transform: rotate(0);
    transition: transform .3s
}

.faq .list .button [name=horizontal] {
    transform: scaleX(1);
    transform-origin: center center;
    transition: transform .4s, opacity 1s
}

/*!
 *  End CSS for Main [+] Toggel Button Character Color 
 */


@media screen and (max-width:750px) {
    .faq .list.container {
        margin: 0 20px
    }
}

.faq .list.container:first-child {
    display: block
}

.faq .list.container[state=active] {
    display: block
}

.faq .list.container[state=hidden] {
    display: none
}

.faq .list.container[variant=no-result] {
    display: none
}

.faq .list.container[variant=all]>* {
    display: block
}

.faq .list.unit {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, .2)
}

/*!
 *  Begin CSS for Main Accordian Tile background Color
 */

.faq .list.unit .title {
    cursor: pointer;
    display: block;
    padding: 24px 30px;
    vertical-align: middle;
    background-color: #000;
    background-color: #fff
}

/*!
 *  End CSS for Main Accordian Tile background Color
 */

@media screen and (min-width:751px) {
    .faq .list.unit .title {
        padding: 22.5px 83px 22.5px 83px
    }
}

/*!
 *  Begin CSS for Main Accordian Text On-Hover Color
 */

.has-cursor .faq .list.unit .title:hover {
    color: #f12c29
}

/*!
 *  End CSS for Main Accordian Text On-Hover Color
 */

.faq .list.unit[matched=true] {
    display: block
}

.faq .list.unit[matched=false] {
    display: none
}

.faq .list.unit[state=active] .content {
    opacity: 1;
    max-height: 120em;
    transition: max-height .4s ease-in, opacity .3s linear
}

.faq .list.unit[state=active] .button .icon {
    transform: rotate(89deg)
}

.faq .list.unit[state=active] .button [name=horizontal] {
    transform: scaleX(0)
}

.faq .no-result {
    color: #001;
    text-align: center;
    margin-bottom: 50px
}

.faq .no-result[variant=result] {
    display: none
}

.faq .no-result[variant=no-result] {
    display: block
}

.faq .no-result .content {
    font-size: 14px;
    line-height: 25px;
    width: 70%;
    margin-right: auto;
    margin-left: auto
}

/*!
 *  End Accordian CSS on Main Screens
 */

/*!
 *  Begin CSS on MAIN PAGE TOP-LOGO and BOTTOM COPYRIGHT
 */

.logo {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    height: 100px;
    background-image: url("../../img/logo.png");
    background-repeat: no-repeat;
    background-position: center
}

.top_sunlight {
    height: 32px;
    width: 700px;
    margin-top: -10px;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../../img/bg_light.png");
    background-repeat: no-repeat
}

.copyright-centered {
    text-align: center
}

/*!
 *  End CSS on MAIN PAGE TOP-LOGO and BOTTOM COPYRIGHT
 */

.country.container {
    width: 100%
}

@media screen and (min-width:1077px) {
    .country.container {
        max-width: 1060px
    }
}

.country .title {
    margin-top: 0;
    margin-bottom: 38px
}

@keyframes cookie-slide {
    0% {
        opacity: 0;
        transform: translateY(-75%)
    }
    85% {
        opacity: 0;
        transform: translateY(-75%)
    }
}

@media screen and (min-width:751px) {
    .viewport[state=active-cookie] {
        -moz-filter: blur(2.5px);
        -o-filter: blur(2.5px);
        -ms-filter: blur(2.5px);
        filter: blur(2.5px)
    }
}

@keyframes error-pulse {
    50% {
        background-color: #a00
    }
}

@supports (-ms-ime-align:auto) {
    .event-item__img {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: scale(1)
    }
    .event-item:hover .event-item__img {
        transform: scale(1.07)
    }
}

@supports (filter:grayscale(1)) {
    .event-item__img {
        filter: grayscale(1);
        opacity: .9
    }
    .carousel-center .event-item__img, .carousel-center~.carousel-slide .event-item__img {
        filter: none;
        opacity: 1
    }
}

@supports (-webkit-line-clamp:2) {
    .event-item-summary__description {
        height: 21px
    }
    .event-item-summary__description::before {
        display: none
    }
}

@keyframes fadePrizeIntroIn {
    100% {
        opacity: 1
    }
}

@keyframes fadePrizeIntroOut {
    100% {
        opacity: 0
    }
}

@keyframes countingDown {
    0% {
        transform: translate3d(0, -75%, 0) scale(2.5);
        opacity: 1
    }
}

@keyframes newQuestion {
    0% {
        opacity: 0;
        transform: scale(.5)
    }
}

@keyframes quizPulse {
    50% {
        opacity: .5
    }
}

@keyframes speedline {
    100% {
        background-position: 280px top
    }
}

@supports (-webkit-overflow-scrolling:touch) {
    .f1-quiz__container {
        padding-bottom: 60px
    }
}

@supports (-webkit-overflow-scrolling:touch) {
    .f1-quiz__container--bottom {
        padding-bottom: 80px
    }
}

@supports (-webkit-overflow-scrolling:touch) {
    .f1-quizstep__question .f1-quizstep__container {
        padding-bottom: 90px
    }
}

@supports (-webkit-overflow-scrolling:touch) {
    .f1-quizstep__funfact .f1-quizstep__container {
        padding-bottom: 90px
    }
}

@supports (-webkit-overflow-scrolling:touch) {
    .f1-quizstep__container {
        padding-bottom: 60px
    }
}

.f1-start, .unit.rtf .f1-start {
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    padding: 0 calc(50vw - 370px);
    animation: fadeIn .6s linear
}

@supports (-webkit-overflow-scrolling:touch) {
    .f1-start, .unit.rtf .f1-start {
        padding-bottom: 60px
    }
}

.f1-start>*, .unit.rtf .f1-start>* {
    max-width: 100%
}

.f1-start p, .unit.rtf .f1-start p {
    margin: 0 10px 10px
}

.f1-start, .f1-start p, .unit.rtf .f1-start, .unit.rtf .f1-start p {
    font-size: 16px;
    line-height: 1.42857
}

@media screen and (min-width:350px) {
    .f1-start, .f1-start p, .unit.rtf .f1-start, .unit.rtf .f1-start p {
        font-size: 20px
    }
}

@media screen and (min-width:751px) and (min-height:600px) {
    .f1-start, .f1-start p, .unit.rtf .f1-start, .unit.rtf .f1-start p {
        font-size: 24px
    }
}

@supports (-webkit-overflow-scrolling:touch) {
    .f1-start .f1-quiz__container, .unit.rtf .f1-start .f1-quiz__container {
        padding-bottom: 90px
    }
}

@keyframes starSpin {
    0% {
        stroke-dasharray: 307px;
        stroke-dashoffset: 2456px
    }
    100% {
        stroke-dashoffset: 0;
        stroke-dasharray: 307px
    }
}

@keyframes starOp {
    80% {
        opacity: 1
    }
    100% {
        opacity: 1
    }
}

@keyframes starFlash {
    30% {
        opacity: 0;
        stroke-dasharray: 614px
    }
    40% {
        opacity: 1
    }
}

@keyframes starGlow {
    40% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    95% {
        opacity: 0
    }
}

@keyframes starOp2 {
    50% {
        opacity: 1
    }
}

@keyframes starFadeBg {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes starText {
    0% {
        transform: scale(.5) translate(-3.5vh, 10.5vh)
    }
    100% {
        opacity: 1
    }
}

@supports (-webkit-overflow-scrolling:touch) {
    .f1-city__content {
        min-height: calc(52vh - 130px)
    }
}

.f1-end {
    padding: 0 calc(50vw - 370px);
    color: #fff
}

.f1-end p:last-child {
    margin-bottom: 0
}

@supports (-webkit-overflow-scrolling:touch) {
    .f1-end .f1-quiz__container {
        padding-bottom: 90px
    }
}

.f1-end__content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 3vh
}

.f1-end__content>* {
    max-width: 100%
}

@media screen and (min-width:751px) and (min-height:600px) {
    .f1-end__content {
        padding-bottom: 10vh
    }
}

@media screen and (min-width:751px) and (min-height:600px) {
    .f1-end__share p {
        margin-bottom: 20px!important
    }
}

.f1-end__share a {
    margin: 0 10px
}

.f1-end p {
    margin: 0 0 10px;
    font-size: 15px
}

@media screen and (min-width:350px) {
    .f1-end p {
        font-size: 16px
    }
}

@media screen and (min-width:751px) and (min-height:600px) {
    .f1-end p {
        font-size: 24px
    }
}

html.lt-ie9 .container .faq .unit.list .title {
    background: 0 0
}

html.lt-ie9 .container .faq .list[state*=""] button {
    background: transparent url(/browser-resources/img/icons/plus.png) center no-repeat
}

html.lt-ie9 .container .faq .list[state*=active] button {
    background: transparent url(/browser-resources/img/icons/min.png) center no-repeat
}

/*!
 *  END for Main Screen Body
 */


/*! ----------------------------------------------------------------------- */
/*! ----------------------------------------------------------------------- */
/*! ----------------------------------------------------------------------- */
/*! ----------------------------------------------------------------------- */


/*!
 *  Begin style.css [For Logo Grid]
 */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,300italic,600,600italic,700,700italic,800,800it alic');
a, body, div, figure, h1, h3, html, img, li, p, span, ul {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit
}

figure {
    display: block
}

body {
    line-height: 1
}

ul {
    list-style: none
}

* {
    outline: 0
}

h1, h3 {
    font-weight: 700
}

.mb20 {
    margin-bottom: 20px
}

.mb30 {
    margin-bottom: 30px
}

a {
    color: #343434;
    text-decoration: none
}

a:hover {
    color: #d70808
}

img {
    max-width: 100%;
    display: block
}

body {
    background: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #000
}

.h2header {
    border-bottom: 2px solid #e1e1e1;
    color: #343434;
    font-size: 20px;
    line-height: 30px;
    padding-bottom: 5px;
    text-transform: uppercase
}

#back-top {
    position: fixed;
    bottom: 5%;
    right: 1%;
    z-index: 103
}

#back-top a {
    display: block;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s
}

#back-top span {
    width: 40px;
    height: 40px;
    display: block;
    background: #888 url("../main-img/back-2-top.png") no-repeat center center;
    border-radius: 5px
}

.home-pb li {
    width: 16.6%
}

.popular-brands li {
    border-bottom: solid 1px #d7d7d7;
    float: left;
    margin-bottom: 15px;
    min-height: 107px;
    padding-bottom: 12px;
    width: 25%
}

.popular-brands li figure {
    text-align: center;
    border-right: solid 1px #d7d7d7
}

.popular-brands li figure img {
    margin: 0 auto
}

.popular-brands li h3 {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    padding-top: 5px;
    color: #818181
}

.popular-brands li:nth-child(4n) figure {
    border: 0
}

.home-pb li:nth-child(4n) figure {
    border-right: solid 1px #d7d7d7
}

.home-pb li:nth-child(6n) figure {
    border: none
}

.home-pb li {
    width: 16.6%
}

@media (max-width:767px) {
    .home-pb {
        padding: 0 10px
    }
    .popular-brands {
        padding: 0 10px
    }
}

@media (max-width:480px) {
    .popular-brands ul li {
        width: 50%
    }
    .popular-brands ul li:nth-child(2n) figure {
        border: none
    }
}

@media (max-width:767px) {
    body {
        -webkit-text-size-adjust: none
    }
}

/*!
 *  End style.css [For Logo Grid]
 */

/*! ----------------------------------------------------------------------- */
/*! ----------------------------------------------------------------------- */
/*! ----------------------------------------------------------------------- */
/*! ----------------------------------------------------------------------- */

/*! End MAIN.CSS FILE [all 2 modules combined] */