@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:900);

html, body {
    background-color:transparent;
    font-family: 'Source Sans Pro', Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
}

body, button, img {
    vertical-align: baseline;
    border: 0px;
    outline: 0px;
    padding: 0px;
    margin: 0px;
}

video::-webkit-media-controls {
    display: none !important;
}

::-webkit-media-controls {
    display:none !important;
}

video::-webkit-media-controls-enclosure {
    display:none !important;
}

button {
    cursor: pointer;
}

:focus {
    outline: none;
}

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

#sizmek_sync_block {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: auto;
    width: 300px;
    height: 600px;
    background-color: transparent;
}

.keyline {
    position: absolute;
    top: 0px;
    left: 0px;
    border: 1px solid #000000;
}

#video-1-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 600px;
    display: block;
    background-color: transparent;
}

#video-1-container video {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 600px;
    background-color:transparent;
}

.clicktag {
    position: absolute;
    top: 0px;
    left: 0px;
    background: transparent;
    background-image: url("../images/transparent-ie-fix.png");
    cursor:pointer;
}

#initial {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 600px;
    background-color:#000000;
    overflow:hidden;
}

#resolve {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 600px;
    visibility: hidden;
    background-color:transparent;
    background-image: url("../images/resolve.jpg");
    overflow:hidden;
}

.sdk .sdk-video-player {
    height: 100%;
    width: 100%;
    position: relative;
}

.sdk .sdk-video-player-button {
    cursor: pointer;
    position: absolute;
    width: 55px;
    height: 55px;
    background-size: cover;
}

#image-sequence-1-loader {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:transparent;
}

#image-sequence-1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 600px;
}

#image-sequence-1-image-container {
    position:absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 600px;
}

#image-sequence-1-loader img {
    position:absolute;
    top:50%;
    left:50%;
    width:32px;
    height:32px;
    margin-left:-16px;
    margin-top:-16px;
    background-color:transparent;
}

#button-cta {
    position:absolute;
    top:355px;
    left:54px;
    width:191px;
    height:37px;
    cursor: pointer;
    background-color:transparent;
    background-image: url("../images/button-cta.jpg");
}

#result-copy-1 {
    position:absolute;
    top:182px;
    left:10px;
    width:280px;
    height:auto;
    text-align:center;
    font-size: 52px;
    line-height: 52px;
    color:#75dae4;
}

#result-copy-2 {
    position:absolute;
    top:240px;
    left:10px;
    width:280px;
    height:auto;
    text-align:center;
    font-size: 20px;
    line-height: 20px;
    color:#f8f8f8;
    text-transform: uppercase;
}

#result-copy-3 {
    position:absolute;
    top:270px;
    left:10px;
    width:280px;
    height:auto;
    text-align:center;
    font-size: 20px;
    line-height: 20px;
    color:#f8f8f8;
}

#tunein-resolve {
    position:absolute;
    top:0px;
    left:0px;
    width:300px;
    height:600px;
}

.tunein-ddt-resolve,
.tunein-tonight-resolve,
.tunein-tomorrow-resolve {
    position:relative;
    margin:0px;
    padding:0px;
    background-repeat: no-repeat;
    background-color: transparent;
}

.tunein-ddt-resolve {
    background-position: 22px 212px;
    background-image: url("../images/tunein-ddt-resolve.png");
}

.tunein-tonight-resolve {
    background-position: 22px 212px;
    background-image: url("../images/tunein-tonight-resolve.png");
}

.tunein-tomorrow-resolve {
    background-position: 18px 212px;
    background-image: url("../images/tunein-tomorrow-resolve.png");
}

#tunein {
    position:absolute;
    top:0px;
    left:0px;
    width:300px;
    height:600px;
}

.tunein-ddt,
.tunein-tonight,
.tunein-tomorrow {
    position:relative;
    margin:0px;
    padding:0px;
    background-repeat: no-repeat;
    background-color: transparent;
}

.tunein-ddt {
    background-position: 27px 457px;
    background-image: url("../images/tunein-ddt.png");
}

.tunein-tonight {
    background-position: 27px 457px;
    background-image: url("../images/tunein-tonight.png");
}

.tunein-tomorrow {
    background-position: 8px 457px;
    background-image: url("../images/tunein-tomorrow.png");
}

#view-state-landing {
    position:absolute;
    top:0px;
    left:0px;
    width:300px;
    height:600px;
    background-image: url("../images/resolve.jpg");
}

#logo-lifetime {
    position:absolute;
    top:432px;
    left:192px;
    width:79px;
    height:82px;
    background-color:transparent;
    background-image:url("../images/logo-lifetime.png");
}

#logo-lifetime-resolve {
    position:absolute;
    top:281px;
    left:62px;
    width:90px;
    height:94px;
    background-color:transparent;
    background-image:url("../images/logo-lifetime-resolve.png");
}

#button-take-quiz,
#button-take-quiz-2 {
    position:absolute;
    top:497px;
    left:36px;
    width:128px;
    height:33px;
    cursor: pointer;
    background-color:transparent;
    background-image:url("../images/button-take-quiz.jpg");
}

#button-take-quiz-invisible {
    position:absolute;
    top:497px;
    left:36px;
    width:128px;
    height:33px;
    cursor: pointer;
    background-color:transparent;
    background-image:url("../images/transparent-ie-fix.png");
}

#girl,
#girl-2 {
    position:absolute;
    top:187px;
    left:110px;
    width:190px;
    height:413px;
    background-color:transparent;
    background-image:url("../images/girl.jpg");
    background-repeat: repeat-y;
}

#flash {
    position:absolute;
    top:0px;
    left:185px;
    width:125px;
    height:95px;
    background-color:transparent;
    background-image:url("../images/flash.jpg");
}

#question-animation {
    position:absolute;
    top:0px;
    left:0px;
    width:300px;
    height:600px;
}

#answers-animation {
    position:absolute;
    top:0px;
    left:0px;
    width:82px;
    height:27px;
    background-color:transparent;
}

.button-answer-container {
    position:absolute;
    top:0px;
    left:0px;
    width:300px;
    height:42px;
    background-color:transparent;
    overflow:hidden;
}

/* =============================================================================
    ANIMATIONS */

.alpha-in {
    -webkit-animation-name: alpha-in-keyframes;
    -moz-animation-name: alpha-in-keyframes;
    animation-name: alpha-in-keyframes;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-moz-keyframes alpha-in-keyframes {
    from {opacity: 0; filter: alpha(opacity=0);}
}

@-webkit-keyframes alpha-in-keyframes {
    from {opacity: 0; filter: alpha(opacity=0);}
}

@keyframes alpha-in-keyframes {
    from {opacity: 0; filter: alpha(opacity=0);}
}

.alpha-out {
    -webkit-animation-name: alpha-out-keyframes;
    -moz-animation-name: alpha-out-keyframes;
    animation-name: alpha-out-keyframes;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-moz-keyframes alpha-out-keyframes {
    from {opacity: 1; filter: alpha(opacity=100);}
}

@-webkit-keyframes alpha-out-keyframes {
    from {opacity: 1; filter: alpha(opacity=100);}
}

@keyframes alpha-out-keyframes {
    from {opacity: 1; filter: alpha(opacity=100);}
}

.mask-in {
    -webkit-animation-name: mask-in-keyframes;
    -moz-animation-name: mask-in-keyframes;
    animation-name: mask-in-keyframes;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-moz-keyframes mask-in-keyframes {
    from {width:0px;}
}

@-webkit-keyframes mask-in-keyframes {
    from {width:0px;}
}

@keyframes mask-in-keyframes {
    from {width:0px;}
}

.scramble {
    -webkit-animation-name: scramble-keyframes;
    -moz-animation-name: scramble-keyframes;
    animation-name: scramble-keyframes;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-moz-keyframes scramble-keyframes {
    0% {top:0px; left:20px;}
    10% {top:4px; left:22px;}
    20% {top:2px; left:18px;}
    30% {top:4px; left:22px;}
    40% {top:2px; left:18px;}
    50% {top:4px; left:22px;}
    60% {top:2px; left:18px;}
    70% {top:4px; left:22px;}
    80% {top:2px; left:18px;}
    90% {top:0px; left:20px;}
}

@-webkit-keyframes scramble-keyframes {
    0% {top:0px; left:20px;}
    10% {top:4px; left:22px;}
    20% {top:2px; left:18px;}
    30% {top:4px; left:22px;}
    40% {top:2px; left:18px;}
    50% {top:4px; left:22px;}
    60% {top:2px; left:18px;}
    70% {top:4px; left:22px;}
    80% {top:2px; left:18px;}
    90% {top:0px; left:20px;}
}

@keyframes scramble-keyframes {
    0% {top:0px; left:20px;}
    10% {top:4px; left:22px;}
    20% {top:2px; left:18px;}
    30% {top:4px; left:22px;}
    40% {top:2px; left:18px;}
    50% {top:4px; left:22px;}
    60% {top:2px; left:18px;}
    70% {top:4px; left:22px;}
    80% {top:2px; left:18px;}
    90% {top:0px; left:20px;}
}

.slide-in {
    -webkit-animation-name: slide-in-keyframes;
    -moz-animation-name: slide-in-keyframes;
    animation-name: slide-in-keyframes;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-moz-keyframes slide-in-keyframes {
    from {left:-10px;}
    to {left:0px;}
}

@-webkit-keyframes slide-in-keyframes {
    from {left:-10px;}
    to {left:0px;}
}

@keyframes slide-in-keyframes {
    from {left:-10px;}
    to {left:0px;}
}

.pull-chain {
    -webkit-animation-name: pull-chain-keyframes;
    -moz-animation-name: pull-chain-keyframes;
    animation-name: pull-chain-keyframes;
    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    animation-duration: 0.7s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-moz-keyframes pull-chain-keyframes {
    1% {top:164px;}
    50% {top:180px;}
    90% {top:164px;}
}

@-webkit-keyframes pull-chain-keyframes {
    1% {top:164px;}
    50% {top:180px;}
    90% {top:164px;}
}

@keyframes pull-chain-keyframes {
    1% {top:164px;}
    50% {top:180px;}
    90% {top:164px;}
}

.background-color-flash {
    -webkit-animation-name: background-color-flash-keyframes;
    -moz-animation-name: background-color-flash-keyframes;
    animation-name: background-color-flash-keyframes;
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-moz-keyframes background-color-flash-keyframes {
    1% {
        -webkit-transform:scale(1,1);
        -moz-transform:scale(1,1);
        transform:scale(1,1);
        background-color:transparent;
    }
    50% {
        -webkit-transform: scale(1.05, 1.05);
        -moz-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05);
        background-color: rgb(115,224,229);
    }
    90% {
        -webkit-transform:scale(1,1);
        -moz-transform:scale(1,1);
        transform:scale(1,1);
        background-color:transparent;
    }
}

@-webkit-keyframes background-color-flash-keyframes {
    1% {
        -webkit-transform:scale(1,1);
        -moz-transform:scale(1,1);
        transform:scale(1,1);
        background-color:transparent;
    }
    50% {
        -webkit-transform: scale(1.05, 1.05);
        -moz-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05);
        background-color: rgb(115,224,229);
    }
    90% {
        -webkit-transform:scale(1,1);
        -moz-transform:scale(1,1);
        transform:scale(1,1);
        background-color:transparent;
    }
}

@keyframes background-color-flash-keyframes {
    1% {
        -webkit-transform:scale(1,1);
        -moz-transform:scale(1,1);
        transform:scale(1,1);
        background-color:transparent;
    }
    50% {
        -webkit-transform: scale(1.05, 1.05);
        -moz-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05);
        background-color: rgb(115,224,229);
    }
    90% {
        -webkit-transform:scale(1,1);
        -moz-transform:scale(1,1);
        transform:scale(1,1);
        background-color:transparent;
    }
}


/* =============================================================================
    QUIZ */

.view-state {
    position:absolute;
    top:0px;
    left:0px;
    width:300px;
    height:600px;
    background-color:transparent;
    color:#f8f8f8;
}

#question-container {
    position:absolute;
    top:188px;
    left:10px;
    width:280px;
    height:auto;
    text-align:center;
    color:#f8f8f8;
    font-size: 27px;
    text-transform: uppercase;
    line-height:27px;
}

#answer-container {
    position:absolute;
    top:257px;
    left:0px;
}

.button-answer {
    position:absolute;
    top:0px;
    left:20px;
    width:261px;
    height:34px;
    text-align: center;
    cursor: pointer;
    overflow:hidden;
    background-color:transparent;
    background-image:url("../images/button-answer.png");
    background-position: 0px 0px;
    color:#f8f8f8;
    font-size: 24px;
    border-radius: 5px;
    font-family: 'Source Sans Pro', Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
}

.button-answer:hover {
    background-color:rgb(7,69,78);
    background-color:rgba(0,0,0,0.3);
}

.answer-default {
    background-position: 0px 0px;
    color:#f8f8f8;
}

.answer-correct {
    background-position: 0px 0px;
    color:#73e0e5;
}

.answer-wrong {
    background-position: 0px 0px;
    color:#cccccc;
}

.answer-correct:hover,
.answer-wrong:hover {
    background-color:transparent;
}

.answer-not-selected {
    background-position: 0px -36px;
    color:#cccccc;
}