@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;
}

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: 250px;
    background-color: transparent;
}

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

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

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

#button-cta {
    position:absolute;
    top:163px;
    left:64px;
    width:168px;
    height:25px;
    cursor: pointer;
    background-color:transparent;
    background-image: url("../images/button-cta.jpg");
}

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

#result-copy-2 {
    position:absolute;
    top:78px;
    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:108px;
    left:10px;
    width:280px;
    height:auto;
    text-align:center;
    font-size: 18px;
    line-height: 18px;
    color:#f8f8f8;
}

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

.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: 17px 125px;
    background-image: url("../images/tunein-ddt-resolve.png");
}

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

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

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

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

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

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

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

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

#logo-lifetime {
    position:absolute;
    top:202px;
    left:238px;
    width:47px;
    height:46px;
    background-color:transparent;
    background-image:url("../images/logo-lifetime.png");
}

#button-take-quiz {
    position:absolute;
    top:218px;
    left:73px;
    width:134px;
    height:20px;
    cursor: pointer;
    background-color:transparent;
    background-image:url("../images/button-take-quiz.jpg");
}

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

#logo-child-genius-small {
    position:absolute;
    top:209px;
    left:20px;
    width:92px;
    height:37px;
    background-color:transparent;
    background-image:url("../images/logo-child-genius-small.png");
}

#logo-child-genius-large {
    position:absolute;
    top:12px;
    left:31px;
    width:241px;
    height:98px;
    background-color:transparent;
    background-image:url("../images/logo-child-genius-large.png");
}

#chain {
    position:absolute;
    top:50px;
    left:219px;
    width:3px;
    height:125px;
    background-color:transparent;
    background-image:url("../images/chain.png");
    background-repeat: repeat-y;
}

#hand {
    position:absolute;
    top:164px;
    left:209px;
    width:40px;
    height:92px;
    background-color:transparent;
    background-image:url("../images/hand.png");
}

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

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

#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:250px;
    background-color:transparent;
    color:#f8f8f8;
}

#question-container {
    position:absolute;
    top:18px;
    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:76px;
    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;
}