@font-face {
    font-family: UnileverShilling;
    src: url("https://modstreaming.s3-eu-west-1.amazonaws.com/hab/fonts/unilever/UnileverShilling.woff");
}

@font-face {
    font-family: UnileverShilling-Italic;
    src: url("https://modstreaming.s3-eu-west-1.amazonaws.com/hab/fonts/unilever/UnileverShillingItalic.woff");
}

@font-face {
    font-family: UnileverShilling-Medium;
    src: url("https://modstreaming.s3-eu-west-1.amazonaws.com/hab/fonts/unilever/UnileverShillingMedium.woff");
}

@font-face {
    font-family: UnileverShilling-Bold;
    src: url("https://modstreaming.s3-eu-west-1.amazonaws.com/hab/fonts/unilever/UnileverShillingBold.woff");
}

:root {
    --primary-color: rgba(47, 94, 169, 0.9) !important;
    --secondary-color: rgba(125, 150, 230, 1) !important;
    --orange: #FF5A00;
}

body {
    font-size: 16px;
    font-weight: 200;
    text-align: center;
    font-family: UnileverShilling, Arial, Helvetica, sans-serif;
}

@media only screen and (max-width: 839px) {
    body {
        padding-bottom: 150px;
        font-size: 15px;
    }
}

body.rtl {
    direction: rtl;
}

img {
    image-rendering: -webkit-optimize-contrast;
    max-width: 100%;
}

a.btn,
button {
    background: var(--orange);
    color: white;
    border: 0;
    padding: 9px 34px;
    border-radius: 5px;
    font-weight: bold;
}

input[type=text],
input[type=email],
select {
    border: 1px solid black;
    border-radius: 5px;
    padding: 10px;
    height: 46.6px;
}

#top-left-image,
#bottom-right-image {
    position: fixed;
    z-index: 1;
}

#top-left-image {
    top: 5vw;
    left: 0;
    width: 22vw;
}

#bottom-right-image {
    bottom: 3px;
    right: 0;
    width: 19.7vw;
}

.branding-image {
    margin: 40px auto;
    display: block;
    width: 22.7vw;
    min-width: 230px;
    position: relative;
    z-index: 2;
}


@media only screen and (max-height: 999px) {
    body.event-started .branding-image {
        margin: 15px auto;
    }
}

@media only screen and (min-width: 1920px) {

    #top-left-image,
    #bottom-right-image,
    .branding-image {
        width: unset;
    }
}

@media only screen and (max-width: 839px) {

    #top-left-image {
        display: none;
    }

    #bottom-right-image {
        width: 39.4vw;
    }

    .branding-image {
        width: 40vw;
    }
}

#main-content {
    position: relative;
    z-index: 2;
    max-width: 80%;
    margin: 0 auto;
}

@media only screen and (max-width: 839px) {
    #main-content {
        max-width: 96%;
    }
}

#main-content-inner {
    display: block;
    background: #fffe;
    border-radius: 5px;
    padding: 20px 40px;
    width: fit-content;
    max-width: 990px;
    margin: 0 auto;
}

@media only screen and (max-height: 999px) {
    body.event-started #main-content-inner {
        padding: 5px 5px;
        margin-top: -20px;
    }
}

body:not(.have-language) #main-content-inner {
    background: unset;
}

.language-copies {
    display: block;
    margin: 30px auto;
    width: 100%;
    max-width: 92%;
}

@media only screen and (max-height: 999px) {
    body.event-started .language-copies {
        margin: 15px auto;
    }
}

footer {
    position: fixed;
    z-index: 3;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--orange);
    margin: 0;
    padding: 0;
}





#blackout {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
}

body:not(.have-language) #blackout {
    display: block;
}

#blackout .curtain {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000a;
    z-index: 10;
}

#blackout .curtain-content {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 11;
    background: #fff;
    transform: translate(-50%, -50%);
    width: 550px;
    max-width: 92%;
    border-radius: 3px;
    padding: 20px;
}

button#language-continue-button {
    margin-top: 25px;
}


h1 {
    font-family: UnileverShilling-Bold, Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-bottom: 30px;
    font-size: 30px;
}

h2 {
    font-family: UnileverShilling-Bold, Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 20px;
}

@media only screen and (max-width: 839px) {
    h1 {
        margin-bottom: 30px;
        font-size: 24px;
    }

    h2 {
        margin-bottom: 20px;
        font-size: 18px;
    }
}

.countdown-lead,
#clockdiv {
    font-family: UnileverShilling-Medium, Arial, Helvetica, sans-serif;
}

.navbar-right {
    font-size: 1.2em;
}

h1#about {
    display: none;
}

.countdown-lead {
    font-size: 23px;
}

a[href='/privacy'] {
    font-size: 0;
}

a[href='/privacy']:after {
    font-size: 17px;
    content: "Privacy Policy";
}




.language-selection {
    text-align: center;
    margin: 10px 0 15px;
}

.options-container {
    display: flex;
    width: 80%;
    flex-direction: column;
    margin: 20px auto 0;
    text-align: left;
}

.options-container label {
    font-family: UnileverShilling-Medium, Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.options-container select {
    width: 100%;
}

.check-container {
    display: flex;
    max-width: 90%;
    text-align: left;
    margin: 7px auto;
    width: 100%;
}

.first-check-container {
    margin-top: 25px;
}

.last-check-container {
    margin-bottom: 25px;
}

#register-button-container {
    display: flex;
    max-width: 90%;
    text-align: left;
    margin: 7px auto;
    width: 100%;
}

.check-container input[type=checkbox] {
    align-self: flex-start;
    margin: 7px 7px 0 0;

    width: auto;
    flex: 0 0 16px;
}


body.have-language .language-view {
    display: none;
}


.banner-inner-video {
    max-width: 92%;
    margin: 0 auto;
    position: relative;
}

.theoplayer-container,
.theo-player-wrapper {
    border-radius: 5px;
}




.theo-primary-color,
.theo-primary-background {
    color: #000 !important;
}

.theoplayer-skin .vjs-big-play-button svg {
    color: #fff;
    filter: drop-shadow(0px 6px 2px rgba(0, 0, 0, .1));
}

.theoplayer-skin .vjs-big-play-button {
    height: 4em;
    width: 4em;
    padding: 0;
    z-index: 2;
}

.theoplayer-skin .theo-menu.theo-menu-animatable,
.theo-secondary-color.vjs-control-bar {
    z-index: 3;
}



.language-copy {
    display: none;
}

body:not(.lang-ar) .copy-ar {
    display: none;
}

body.lang-ar .copy-ar {
    display: block;
}

body:not(.lang-nl) .copy-nl {
    display: none;
}

body.lang-nl .copy-nl {
    display: block;
}

body:not(.lang-en) .copy-en {
    display: none;
}

body.lang-en .copy-en {
    display: block;
}


body:not(.lang-en) .copy-en {
    display: none;
}

body.lang-en .copy-en {
    display: block;
}

body:not(.lang-en_my) .copy-en_my {
    display: none;
}

body.lang-en_my .copy-en_my {
    display: block;
}


body:not(.lang-ro) .copy-ro {
    display: none;
}

body.lang-ro .copy-ro {
    display: block;
}


body:not(.lang-fil) .copy-fil {
    display: none;
}

body.lang-fil .copy-fil {
    display: block;
}


body:not(.lang-fr) .copy-fr {
    display: none;
}

body.lang-fr .copy-fr {
    display: block;
}


body:not(.lang-fr_ca) .copy-fr_ca {
    display: none;
}

body.lang-fr_ca .copy-fr_ca {
    display: block;
}


body:not(.lang-de) .copy-de {
    display: none;
}

body.lang-de .copy-de {
    display: block;
}


body:not(.lang-he) .copy-he {
    display: none;
}

body.lang-he .copy-he {
    display: block;
}


body:not(.lang-it) .copy-it {
    display: none;
}

body.lang-it .copy-it {
    display: block;
}


body:not(.lang-ms) .copy-ms {
    display: none;
}

body.lang-ms .copy-ms {
    display: block;
}


body:not(.lang-zh) .copy-zh {
    display: none;
}

body.lang-zh .copy-zh {
    display: block;
}


body:not(.lang-pl) .copy-pl {
    display: none;
}

body.lang-pl .copy-pl {
    display: block;
}


body:not(.lang-pt) .copy-pt {
    display: none;
}

body.lang-pt .copy-pt {
    display: block;
}


body:not(.lang-pt_br) .copy-pt_br {
    display: none;
}

body.lang-pt_br .copy-pt_br {
    display: block;
}


body:not(.lang-es) .copy-es {
    display: none;
}

body.lang-es .copy-es {
    display: block;
}


body:not(.lang-es_cl) .copy-es_cl {
    display: none;
}

body.lang-es_cl .copy-es_cl {
    display: block;
}


body:not(.lang-th) .copy-th {
    display: none;
}

body.lang-th .copy-th {
    display: block;
}


body:not(.lang-tr) .copy-tr {
    display: none;
}

body.lang-tr .copy-tr {
    display: block;
}


body:not(.lang-en_ar) .copy-en_ar {
    display: none;
}

body.lang-en_ar .copy-en_ar {
    display: block;
}


body:not(.lang-en_sa) .copy-en_sa {
    display: none;
}

body.lang-en_sa .copy-en_sa {
    display: block;
}


body:not(.lang-en_sg) .copy-en_sg {
    display: none;
}

body.lang-en_sg .copy-en_sg {
    display: block;
}


body:not(.lang-fr_be) .copy-fr_be {
    display: none;
}

body.lang-fr_be .copy-fr_be {
    display: block;
}


body:not(.lang-nl_be) .copy-nl_be {
    display: none;
}

body.lang-nl_be .copy-nl_be {
    display: block;
}


body:not(.lang-ar_eg) .copy-ar_eg {
    display: none;
}

body.lang-ar_eg .copy-ar_eg {
    display: block;
}


body:not(.lang-en_au) .copy-en_au {
    display: none;
}

body.lang-en_au .copy-en_au {
    display: block;
}


body:not(.lang-en_nz) .copy-en_nz {
    display: none;
}

body.lang-en_nz .copy-en_nz {
    display: block;
}





body:not(.have-language) .need-language {
    display: none !important;
}

body.have-language .need-language {
    display: block !important;
}


body:not(.have-email) .need-email {
    display: none !important;
}

body.have-email .need-email {
    display: block !important;
}


body:not(.event-started.have-email) .need-event-started {
    display: none !important;
}

body.event-started.have-email .need-event-started {
    display: block !important;
}



body.have-email .login-view {
    display: none !important;
}

body.event-started #count-down-view {
    display: none !important;
}

#reg-form {
    display: grid;
    grid-template: "firstname lastname"
        "email business"
        "age age"
        "offers offers"
        "privacy privacy"
        "submit submit";
}



@media only screen and (max-width: 839px) {

    #reg-form {
        display: grid;
        grid-template: "firstname"
            "lastname"
            "email"
            "business"
            "age"
            "offers"
            "privacy"
            " submit";
    }

    .options-container {
        width: 90%;
    }
}

input.validation-error,
select.validation-error {
    border: 1px solid #f00 !important;
    background: #f001;
}

div.validation-error {
    color: #f00 !important;
}

.validation-error {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

div#clockdiv {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: fit-content;
    margin: 0 auto;
    gap: 30px;
}

.countdown-num>span {
    background: #323232;
    color: #fff;
    height: 59px;
    display: inline-block;
    width: 45px;
    font-size: 35px;
    font-weight: 100;
    font-family: 'UnileverShilling-Medium';
    margin: 0 4px;
    border-radius: 5px;
    text-align: center;
}

.countdown-label {
    text-transform: uppercase;
    font-weight: 100;
    font-size: 14px;
    font-family: 'UnileverShilling';
}


@media only screen and (max-width: 839px) {
    div#clockdiv {
        gap: 15px;
    }

    .countdown-num>span {
        font-size: 20px;
        width: 30px;
        height: 36px;
    }
}


@media only screen and (max-width: 479px) {
    div#clockdiv {
        gap: 3px;
    }

    .countdown-num>span {
        font-size: 17px;
        width: 22px;
        height: 32px;
    }
}

a {
    color: var(--orange);
    text-decoration: none;
}

.video-js .theo-player-wrapper {
    background-color: #323232;
    background-image: url(/contents/videoposter.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.vjs-big-play-button {
    transform: scale(0.5);
}

#clear-preferences {
    position: absolute;
    left: 10px;
    top: -10px;
    transform: translateY(-100%);
    font-size: 11px;
    padding: 5px 15px;
}

a#visit-ufs-button {
    margin-top: 30px;
}

#branding-image-ar,
#branding-image-at,
#branding-image-br,
#branding-image-ch,
#branding-image-cl,
#branding-image-co,
#branding-image-de,
#branding-image-es,
#branding-image-mx,
#branding-image-pt,
#branding-image-pt_br,
#branding-image-tr {
    display: none;
}



#TheoPlayer-languages-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 8;
    background: linear-gradient(23deg, #000b, #000d);
    color: #fff;
}

#TheoPlayer-languages-overlay a {
    color: #fff;
}

#TheoPlayer-languages-overlay a:hover {
    color: var(--orange);
}

#TheoPlayer-languages-overlay .close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #fff0;
    padding: 5px 12px;
    border-radius: 99px;
    width: 34px;
    height: 32px;
    text-align: center;
    display: block;
    cursor: pointer;
}

#TheoPlayer-languages-overlay .close-btn:hover {
    background: #fff2;
    color: var(--orange);
}

.languages-overlay-language-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 30px;
    flex-direction: column;
}

.overlay-language-option {
    cursor: pointer;
}

.languages-overlay-language-links {
    display: grid;
    justify-content: center;
    gap: 5px 30px;
    grid-template-columns: auto auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: calc(50% - -2vh);
    font-size: 13px;
    width: calc(100% - 30px);
}


@media only screen and (max-width: 1199px) {
    .languages-overlay-language-links {
        top: calc(50% - -3vh);
        font-size: 13px;
    }
}

@media only screen and (max-width: 991px) {
    .languages-overlay-language-links {
        top: calc(50% - -3vh);
        font-size: 13px;
    }
}

@media only screen and (max-width: 767px) {
    .languages-overlay-language-links {
        top: calc(50% - -16px);
        font-size: 11px;
        overflow-y: scroll;
        max-height: calc(100% - 80px);
        width: 90%;
    }
}

.machine-label {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
}

h2.languages-overlay-title {
    display: block;
    border-bottom: 2px solid var(--orange);
    padding-bottom: 6px;
    width: fit-content;
    margin: 20px auto;
}

.overlay-stream-select-button {
    /* Stream select button hidden */
    display: none !important;      
}

li.theo-menu-item.vjs-menu-item.theo-text-track-menu-item {
    text-align: left;
}