@font-face {
     font-family: Gilroy-ExtraBold;
     src: url("Gilroy-ExtraBold.ttf");
}
@font-face {
     font-family: Gilroy-Medium;
     src: url("Gilroy-Medium.otf");
}
@font-face {
     font-family: Gilroy-Regular;
     src: url("Gilroy-Regular.otf");
}

/* CSS Attrib */
#imageOnlyContent {
    position:absolute;
    top:0px;
    left:0px;
    width:300px;
    height:250px;    
}
#legalContent.macFirefox{margin-top: -1px;}
#legalContent.winFirefox{margin-top: -1px;}

/* Main background */
#bgContent{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#E30013;
}

/* Panel Container */
#panelContainer{
    position:absolute;
    top:88px;
    left:14px;
    width:272px;
    height:73px;
}
#panelContent{
    position:absolute;
    top:27px;
    left:17px;
    width:235.16px;
    height:22px;
}

/* Show Container */
#showContainer{
    position:absolute;
    top:0;
    left:0;
    width:300px;
    height:154px;
}
#showListContent{
    position:absolute;
    top:0;
    left:0;
    width:300px;
    height:154px;
    overflow:hidden;
}
#show2Content, #show3Content, #show4Content,
#show5Content, #show6Content{
    position:absolute;
    top:0;
    left:0;
    width:300px;
    height:154px;
}
#show{
    width:300px;
    height:154px;
}
#lineContent{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(separator.png) 0 0 no-repeat;
}

/* Logo */
#logoContainer{
    position:absolute;
    top:0px;
    left:0px;
    /* left:55px; */
    width:130px;
    height:22px;
}
#logoContent{
    position:relative;
    width:130px;
    height:22px;
}

/* CTA */
#ctaContainer{
    position: absolute;
    top: 0;
    left: 141px;
    /* left: 72px; */
    width: 98px;
    height: 22px;
    overflow:hidden;
    border-radius:11px;
}
#ctaContent{
    position:absolute;
    top:0;
    left:0;
    /* left:-95px; */
    width: 95px;
    height: 22px;
    background:#ffffff;
    border:1px solid transparent;
    border-radius:11px;
}
#cta{
    position:relative;
    line-height:1.1em;
    width: auto;
    height: auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color:#4217AB;
    letter-spacing: 0.04em;
    padding: 0 3px;
}

#hboContainer{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#hboContent{
    position:absolute;
    top: 137px;
    left: 271px;
    width: 21px;
    height: 9px;
}
#hboContent2{
    position:absolute;
    top: 137px;
    left: 271px;
    width: 21px;
    height: 9px;
}

/* Sublogo */
#subLogo1Container, #subLogo2Container{
    position:relative;
    width:100%;
    height:43px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}
#subLogo1Container{ top: -5px; }
#subLogo2Container{ top: -15px; }
#subLogo1Content, #subLogo2Content{
    position:relative;
    width:150px;
    height:43px;
}

/* Headline 1 */
#headline1Container{
    position: absolute;
    width: 100%;
    height: 24px;
    top:0;
    left:0;
    text-align: center;
    display: flex;
    justify-content: center;
}
#headline1Content{
    position:relative;
    width: 276px;
/*    height: 24px;*/
    left:-1px;
    top:-1px;
    border:1px solid transparent;
}
#headline1{
    text-align: center;
    position:relative;
    width: 100%;
    height: auto;
    display: flex;
    text-align: center;
    color: #ffffff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    letter-spacing: -0.01em;
    line-height: 1em;
    font-size: 18px;
    width: inherit;
}

/* Headline 2 */
#headline2Container{
    position: absolute;
    width: 100%;
    height: 24px;
    top:53px;
    left:0;
}
#headline2Content{
    position:relative;
    width: 276px;
    height: 24px;
    left:-1px;
    top:-1px;
    border:1px solid transparent;
}
#headline2{
    position:relative;
    width: 100%;
    height: auto;
    display: flex;
    text-align: center;
    color: #ffffff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    letter-spacing: -0.01em;
    line-height: 1em;
    font-size: 17px;
}

/* Images */
#image2Container, #image3Container,
#image4Container, #image5Container{
    position: relative;
    width: 117px;
    height: 117px;
}

/* Legal */
#legalContainer{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
}
#legalContent{
    position:absolute;
    bottom: 3px;
    left:32px;
    width:236px;
    height:17px;
    border:1px solid transparent;
}
#legal{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:auto;
    text-align:center;
    color:#ffffff;
    line-height: 1em;
    letter-spacing: 0.019em;
}


/* Other  */
.separator{
    width:10px;
    height:100%;
}

/* IMAGE REPOSITION */
.fit-center{
     position:absolute;
     width: 100%;
     height: 100%;
     object-fit: contain;
     transform: translate(-50%, -50%);
     top: 50%;
     left: 50%;
 }


/* COUNTDOWN */

.absolute{
     position: absolute;
}

#hideCtaTimer{
     width: 134px;
     height: 22px;
     left: 171px;
     top: 144px;
     overflow: hidden;
}
#ctaContainerTimer{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    width: 95px;
    height: 22px;
    left: -101px;
    background-color: #ffffff;
    border-radius: 12px;
}
#ctaTimer{
    text-align: center;
    font-family: Gilroy-ExtraBold;
    font-size: 10px;
    color: #5816BD;
    letter-spacing: 0.04em;
}
.macFirefox #ctaTimer{
    position: relative;
    top:-1px;
}
.macSafari #ctaTimer{
    position: relative;
    top:-1px;
}
.winFirefox #ctaTimer{
    position: relative;
    top:-1px;
}
#showContainerTimer{
     width: 300px;
     height: 154px;
     top: -155px;
     overflow: hidden;
}
#showContentTimer{
     top: 0;
}
#attribution{
     width: 300px;
     height: 250px;
     left: 0px;
     top: 0px;
}

#logoImageTimer{
     width: 128.5px;
     height: 22px;
     left: 86px;
     top: 144px;
}

#h1CountdownContainer{
     width: 244px;
     height: 40px;
     left: 30px;
     top: 48px;
     opacity: 0;
}
#headline1ContainerTimer{
     width: 230px;
     height: 14px;
     left: 5px;
     top: 3px;
     line-height: 1.1em;
     color: white;
}
#headline1Timer{
     font-family: Gilroy-Medium;
     font-size: 12px;
     text-transform: uppercase;
     text-align: center;
}
#f2subheadlineContainer{
     width: 300px;
     bottom: -18px;
     visibility:hidden;
     display: flex;
     align-items: center;
     justify-content: center;
}
#subheadline{
     font-family: Gilroy-Medium;
     font-size: 16px;
     color: #9D81C5;
     width: 206px;
     height: 19px;
     text-transform: uppercase;
     letter-spacing: .016em;
}
#legalContainerTimer{
     width: 236px;
     height: 9px;
     left: 32px;
     bottom: 0px;
}
#legalTextTimer{
    position: absolute;
    bottom: 4px;
    font-size: 8px;
    font-family: Gilroy-Medium;
    color: #ffffff;
    letter-spacing: 0.016em;
    text-align:center;
    line-height: 8px;
    width: 100%;
}

#gradientBar{
     width: 300px;
     height: 250px;
     top: -156px;
}

/* TIMER */
#tracer{
    opacity: 1;
}
#timerIndicator1{
    position: absolute;
    font-family: Gilroy-Medium;
    left: 36px;
    top: -1px;
}
.macFirefox #timerIndicator1{
    top: 0px;
}
.iphoneSafari #timerIndicator1{
    top: 0px;
}
.ipadSafari #timerIndicator1{
    top: 0px;
}
.winFirefox #timerIndicator1{
    top: 0px;
}
#timerIndicator2{
    position: absolute;
    font-family: Gilroy-Medium;
    left: 24px;
    top: -1px;
}
.macFirefox #timerIndicator2{
    top: 0px;
}
.iphoneSafari #timerIndicator2{
    top: 0px;
}
.ipadSafari #timerIndicator2{
    top: 0px;
}
.winFirefox #timerIndicator2{
    top: 0px;
}
#timerIndicator3{
    position: absolute;
    font-family: Gilroy-Medium;
    left: 24px;
    top: -1px;
}
.macFirefox #timerIndicator3{
    top: 0px;
}
.iphoneSafari #timerIndicator3{
    top: 0px;
}
.ipadSafari #timerIndicator3{
    top: 0px;
}
.winFirefox #timerIndicator3{
    top: 0px;
}
#timerIndicator4{
    position: absolute;
    font-family: Gilroy-Medium;
    left: 24px;
    top: -1px;
}
.macFirefox #timerIndicator4{
    top: 0px;
}
.iphoneSafari #timerIndicator4{
    top: 0px;
}
.ipadSafari #timerIndicator4{
    top: 0px;
}
.winFirefox #timerIndicator4{
    top: 0px;
}
#daysID{
    position: absolute;
    text-align: right !important;
    width: 32px;
    left: 31px;
    letter-spacing: -0.00em;
}
#hoursID{
    position: absolute;
    left: 84px;
    letter-spacing: -0.01em;
}
#minsID{
    position: absolute;
    left: 124px;
    letter-spacing: -0.01em;
}
#secsID{
    position: absolute;
    left: 169px;
    letter-spacing: -0.01em;
}

#timer{
     display: none;
}
#timerContainer{
    font-family: Gilroy-ExtraBold;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    position: absolute;
    top: 24px;
    opacity: 1;
}
.macFirefox #timerContainer{
    top: 23px;
}
.iphoneSafari #timerContainer{
    top: 23px;
}
.ipadSafari #timerContainer{
    top: 23px;
}
.winFirefox #timerContainer{
    top: 23px;
}
.macFirefox #colons{
    top: 23px;
}
.iphoneSafari #colons{
    top: 23px;
}
.ipadSafari #colons{
    top: 23px;
}
.winFirefox #colons{
    top: 23px;
}
.timePosition{
    position: absolute;
    text-align: center;
    width: 22px;
}
#colons{
    position: absolute;
    font-family: Gilroy-ExtraBold;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 2.5em;
    top: 24px;
    left: 1px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 240px;
}
#colon1{
    margin-left: -4px;
}
#colon2{
    margin-left: 1px;
}
#colon3{
    position: absolute;
    margin-left: 5px;
}
#headline1Timer > sup {
    position:relative;
    top:-4px;
}