/* ============================== 
FONTS
============================== */
#main_wrapper .script{
    font-family: "VerveineW01-Regular";
    transform: rotate(-2deg);
}

#main_wrapper .sans{
    font-family:"bebas-neue-pro-semiexpanded", sans-serif;
    font-weight: 600;
}

header .gotham,
#main_wrapper .gotham{
    font-family:'aktiv-grotesk', 'sans serif';
}

svg:not(:root){
    overflow:unset;
    overflow-x:unset;
    overflow-y:unset;
}

/* ============================== 
BRAND COLORS
============================== */
.brand-black-alt{
    background:#151515;
}

.brand-white-alt{
    background:#ebebec;
}

.brand-blue{
    background:#009be0;
}

.brand-yellow{
    background:#E9E600;
}

.brand-seablue{
    background:#70b2c5;
}

.font-black-alt{
    color:#151515;
}

.font-white-alt{
    color:#ebebec;
}

.font-gray{
    color:#757575;
}

.font-blue{
    color:#009be0;
}

.font-yellow{
    color:#E9E600;
}

.font-seablue{
    color:#70b2c5;
}

.all-caps{
    text-transform: uppercase;
}

/* ============================== 
DESIGN ELEMENTS
============================== */
#main_wrapper{
    font:12px 'aktiv-grotesk', sans-serif;
    font-family:'aktiv-grotesk', 'sans serif';
}

/* ============================== 
PILL BUTTON

<a href="#" class="pillBtn"><span>DOWNLOAD NOW</span></a>
============================== */
.pillBtn,
.mfp-content .pillBtn {
    -webkit-transition: all 200ms ease;
    background-color:#fdd931;
    border-radius:30px;
    color:#000000;
    cursor:pointer;
    display: inline-block;
    /*font-family:"Trade Gothic LT W00 Bd Cn No.20";*/
    font-family:"bebas-neue-pro-semiexpanded", sans-serif;
    font-size:1.5em;
    font-weight:300;
    letter-spacing:0em;
    line-height:2em;
    padding:.4em 1.7em;
    text-align:center;
    transition: all 250ms ease, border-radius 500ms;
}

.pillBtn span,
.mfp-content .pillBtn span,
.pillBtn span {
    text-align:center;
}

.no-touchevents .pillBtn:hover,
.no-touchevents .mfp-content .pillBtn:hover,
.no-touchevents .pillBtn:hover,
.no-touch .pillBtn:hover,
.no-touch .mfp-content .pillBtn:hover,
.no-touch .pillBtn:hover{
    border-radius:6px;
}


/* ============================== 
PILL BUTTON V2
============================== */
.pill-btn-2{
    align-items:center;
    border-radius:20px 20px;
    cursor:pointer;
    display: inline-flex;
    justify-content:center;
    overflow:hidden;
    padding:0.5em 15px;
    position: relative;
}

.pill-btn-2:before{
    background:rgba(255,255,255,0.3);
    border-radius:50%;
    content:'';
    position: absolute;
    padding-top:100%;
    transform-origin:50%;
    transform:scale(0);
    transition:500ms transform;
    width:100%;
}

.no-touchevents .pill-btn-2:hover:before{
    transform:scale(1);
}

.pill-btn-2 .pill-btn-2-text{
    font-size:1.2em;
    line-height:1.5em;
    padding:1px 30px 0;
    position: relative;
}

.pill-btn-2 .pill-btn-2-icon{
    height:10px;
    margin:auto;
    position: absolute;
    right:12px;
    transform:translateY(-1px);
    width:15px;
}

.pill-btn-2 .pill-btn-2-icon.arrow{
    height:15px;
    transform:translateY(-2px);
    width:8px;
}

.pill-btn-2 .pill-btn-2-icon.arrow:before,
.pill-btn-2 .pill-btn-2-icon.arrow:after{
    background:#222;
    content:'';
    height:2px;
    position: absolute;
    right:0;
    top:calc(50% + 1px);
    transform-origin: 100% 50%;
    width:100%;
}

.pill-btn-2.blue-outline .pill-btn-2-icon.arrow:before,
.pill-btn-2.blue-outline .pill-btn-2-icon.arrow:after{
    background:#009be0;
}

.pill-btn-2.yellow-outline .pill-btn-2-icon.arrow:before,
.pill-btn-2.yellow-outline .pill-btn-2-icon.arrow:after{
    background:#E9E600;
}

.pill-btn-2 .pill-btn-2-icon.arrow:before{
    transform:rotate(45deg)
}

.pill-btn-2 .pill-btn-2-icon.arrow:after{
    transform:rotate(-45deg);
}



.pill-btn-2 .pill-btn-2-icon.plus{
    height:15px;
    transform:translateY(-2px);
    width:8px;
}

.pill-btn-2 .pill-btn-2-icon.plus:before,
.pill-btn-2 .pill-btn-2-icon.plus:after{
    background:#222;
    content:'';
    height:2px;
    position: absolute;
    right:0;
    top:50%;
    transform-origin: 50% 50%;
    width:100%;
}

.pill-btn-2 .pill-btn-2-icon.plus:before{
    transform:rotate(0deg)
}

.pill-btn-2 .pill-btn-2-icon.plus:after{
    transform:rotate(90deg);
}


.pill-btn-2 .pill-btn-2-icon.close{
    height:15px;
    transform:translateY(-2px) rotate(45deg);
    width:15px;
}

.pill-btn-2 .pill-btn-2-icon.close:before,
.pill-btn-2 .pill-btn-2-icon.close:after{
    background:#222;
    content:'';
    height:2px;
    position: absolute;
    right:0;
    top:50%;
    transform-origin: 50% 50%;
    width:100%;
}

.pill-btn-2 .pill-btn-2-icon.close:before{
    transform:rotate(0deg)
}

.pill-btn-2 .pill-btn-2-icon.close:after{
    transform:rotate(90deg);
}


/* ============================== 
TEXT BUTTON
============================== */
.text-btn{
    align-items:center;
    cursor:pointer;
    display: inline-flex;
    justify-content:center;
    position: relative;
}

.text-btn:before{
    background:rgba(255,255,255,1);
    border-radius:50%;
    bottom:0;
    content:'';
    height:1px;
    opacity:0;
    position: absolute;
    box-shadow:  5px 0px 5px rgba(233, 230, 0, 1);
    transition:250ms transform, 250ms opacity;
    transform:scaleX(0) translateY(1px);
    transform-origin:50%;
    width:100%;
}

.no-touchevents .text-btn:hover:before,
.text-btn.selected:before{
    opacity:1;
    transform:scaleX(1) translateY(1px);
}

.text-btn .text-btn-text{
    font-size:1.2em;
    line-height:1.5em;
    padding:0 30px;
    position: relative;
}

.text-btn .text-btn-icon{
    height:10px;
    margin:auto;
    position: absolute;
    right:12px;
    transform:translateY(-1px);
    width:15px;
}

.text-btn .text-btn-icon.arrow{
    height:15px;
    transform:translateY(-2px);
    width:8px;
}

.text-btn .text-btn-icon.arrow:before,
.text-btn .text-btn-icon.arrow:after{
    background:#222;
    content:'';
    height:2px;
    position: absolute;
    right:0;
    top:50%;
    transform-origin: 100% 50%;
    width:100%;
}

.text-btn.blue-outline .text-btn-icon.arrow:before,
.text-btn.blue-outline .text-btn-icon.arrow:after{
    background:#009be0;
}

.text-btn.yellow-outline .text-btn-icon.arrow:before,
.text-btn.yellow-outline .text-btn-icon.arrow:after{
    background:#E9E600;
}

.text-btn .text-btn-icon.arrow:before{
    transform:rotate(45deg)
}

.text-btn .text-btn-icon.arrow:after{
    transform:rotate(-45deg);
}



.text-btn .text-btn-icon.plus{
    height:15px;
    transform:translateY(-2px);
    width:8px;
}

.text-btn .text-btn-icon.plus:before,
.text-btn .text-btn-icon.plus:after{
    background:#222;
    content:'';
    height:2px;
    position: absolute;
    right:0;
    top:50%;
    transform-origin: 50% 50%;
    width:100%;
}

.text-btn .text-btn-icon.plus:before{
    transform:rotate(0deg)
}

.text-btn .text-btn-icon.plus:after{
    transform:rotate(90deg);
}


.text-btn .text-btn-icon.close{
    height:15px;
    transform:translateY(-2px) rotate(45deg);
    width:15px;
}

.text-btn .text-btn-icon.close:before,
.text-btn .text-btn-icon.close:after{
    background:#222;
    content:'';
    height:2px;
    position: absolute;
    right:0;
    top:50%;
    transform-origin: 50% 50%;
    width:100%;
}

.text-btn .text-btn-icon.close:before{
    transform:rotate(0deg)
}

.text-btn .text-btn-icon.close:after{
    transform:rotate(90deg);
}

/* ============================== 
SUBHEADER
============================== */
.subheader{
    display:flex;
    align-items:flex-start;
}

.subheader .subheader-block{
    background:#E9E600;
    height:20px;
    width:20px;
}

.subheader h4{
    color:#ffffff;
    letter-spacing: 0.05em;
    line-height:1.1;
    margin-left:0.75em;
    transform: translateY(1px);
}


/* ============================== 
VIDEO PLAY ARROW
============================== */


.video-thumbnail{
    background:black;
    display:inline-block;
    position: relative;
}

.video-thumbnail.thumb-full-width{
    padding-top:60%;
    width:100%;
}

.video-thumbnail.thumb-half-width{
    padding-top:27%;
    width:calc(50% - 10px);
}

.video-thumbnail.thumb-quarter-width{
    padding-top:12%;
    margin-left:20px;
    width:calc(25% - 15px);
}

.video-thumbnail:before{
    background:rgba(0,0,0,0.8);
    content:'';
    height:100%;
    left:0;
    position: absolute;
    top:0;
    transition:500ms opacity;
    width:100%;
}

.no-touchevents .video-thumbnail:hover:before{
    opacity:0;
}

.video-thumbnail .info{
    bottom:15px;
    display:flex;
    flex-direction:column;
    height:calc(100% - 30px);
    justify-content:flex-end;
    left:15px;
    position: absolute;
    transition:250ms opacity;
    width:calc(100% - 30px);
}

.no-touchevents .video-thumbnail:hover .info{
    
}

.video-thumbnail p{
    line-height:1.5 !important;
    margin-top:2px;
    width:100%;
}


.video-thumbnail .video-play-thumbnail{
    display:flex;
    flex:1;
    justify-content:flex-start;
    max-height: 70px;
    min-height:0;
    /*height:70px;*/
    position: relative;
    width:70px;
}

.video-thumbnail svg{
    height:90%;
    width:auto;
}

.video-thumbnail svg .circle{
    transform-origin: 50%;
    transition:150ms transform;
}

.video-thumbnail svg .triangle{
    transform-origin: 50%;
    transition:150ms transform;
}

.video-thumbnail:hover svg .circle{
    transform:scale(0.9);
}

.video-thumbnail:hover svg .triangle{
    transform:scale(1.5);
}


/* ============================== 
LEARN MORE TEXT CTA WITH ARROW

<div class="learnMore">LEARN MORE<span class="arrow"></span></div>
============================== */
header .learnMore,
#main_wrapper .learnMore,
.mfp-content .learnMore {
    width:auto;
    height:auto;
    position:relative;
    bottom:0;
    left:0;
    text-align:left;
    font-size:1em;
    color:#000000;
    letter-spacing:.1em;
    display:inline-block;
}

header .learnMore .arrow,
#main_wrapper .learnMore .arrow,
.mfp-content .learnMore .arrow {
    width: 1.4em;
    height: 1.2em;
    background-image: url(../img/reusable/arrow-black.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: top;
    transition:300ms;
    -webkit-transition:300ms;
}

header .learnMore .arrow {
    background-image:none;
}

.no-touchevents header .learnMore:hover .arrow,
.no-touchevents #main_wrapper .learnMore:hover .arrow,
.no-touchevents .mfp-content .learnMore:hover .arrow {
    transform:translateX(.8vw);
    -webkit-transform:translateX(.8vw);
}

header .learnMore.white .arrow,
#main_wrapper .learnMore.white .arrow,
.mfp-content .learnMore.white .arrow {
    background-image: url(../img/reusable/arrow-white.png);
}







/* ============================== 
PING DOT

<div class="pingdot">
    <div class="plusIcon"></div>
    <div class="ring1"></div>
    <div class="ring2"></div>
</div>
============================== */
#main_wrapper .pingdot {
    -webkit-transform: translate(-12.5px, -12.5px);
    cursor:pointer;
    height:26px;
    position:absolute;
    transform: translate(-12.5px, -12.5px);
    width:26px;
}

#main_wrapper .pingdot .plusIcon {
    -webkit-transition:300ms;
    background:#ffffff;
    border-radius:50%;
    display:flex;
    height:100%;
    pointer-events:none;
    position:relative;
    transition:300ms;
    width:100%;
}

#main_wrapper .pingdot .plusIcon:before,
#main_wrapper .pingdot .plusIcon:after{
    align-items:center;
    background:black;
    content:'';
    height:2px;
    justify-content:center;
    left:50%;
    position: absolute;
    top:50%;
    transform:translateX(-50%) translateY(-50%);
    transform-origin:50%;
    width:50%;
}

#main_wrapper .pingdot .plusIcon:after{
    transform:translateX(-50%) translateY(-50%) rotate(90deg);
}


#main_wrapper .pingdot.selected .plusIcon {
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}

#main_wrapper .pingdot .ring1 {
    width:30px;
    height:30px;
    border:1px solid #208df1;
    border-radius:1000px;
    position:absolute;
    top:-3px;
    left:-3px;
    animation:1500ms pingDot infinite;
    pointer-events:none;
}

#main_wrapper .pingdot:hover .ring1{
    animation:none;
}

#main_wrapper .pingdot .ring2 {
    width:30px;
    height:30px;
    border:1px solid #fcd745;
    border-radius:1000px;
    position:absolute;
    top:-3px;
    left:-3px;
    animation:300ms;
    -webkit-transition:300ms;
    opacity:0;
    pointer-events:none;
}

.no-touchevents #main_wrapper .pingdot:hover .ring2,
.no-touch #main_wrapper .pingdot:hover .ring2,
#main_wrapper .pingdot.selected .ring2 {
    width:60px;
    height:60px;
    top:-18px;
    left:-18px;
    opacity:1;
}

@keyframes pingDot{
    0%{
        transform:scale(1);
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:scale(1.5);
    }
}



/* ============================== 
X BUTTON
============================== */
#main_wrapper .x-button{
    align-items:center;
    background:rgba(255,255,255, 0.4);
    border: 1px solid black;
    border-radius:50%;
    cursor:pointer;
    display: flex;
    justify-content:center;
    height:30px;
    overflow:hidden;
    position:absolute;
    right:35px;
    top:35px;
    transition: 250ms background;
    width:30px;
}

.no-touchevents #main_wrapper .x-button:hover{
    background:rgba(255,255,255, 0.6);
}

#main_wrapper .x-button:before,
#main_wrapper .x-button:after{
    background:black;
    content:'';
    height:1px;
    position: absolute;
    top:50%;
    transform-origin:50%;
    transition:150ms transform, 150ms width;
    width:30%;
}

#main_wrapper .x-button:before{
    transform:translateY(-50%) rotate(45deg);
}

#main_wrapper .x-button:after{
    transform:translateY(-50%) rotate(-45deg);
}

.no-touchevents #main_wrapper .x-button:hover:before{
    transform:rotate(45deg);
    width:50%;
}

.no-touchevents #main_wrapper .x-button:hover:after{
    transform:rotate(-45deg);
    width:50%;
}

@media (max-width:500px){
    .video-thumbnail .video-play-thumbnail{
        background:url(../img/reusable/video-play-btn.png)no-repeat center;
        background-size:contain;
    }

    .video-thumbnail .video-play-thumbnail svg{
        display:none;
    }
    
}