/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	
margin: 0;	
padding: 0;	
border: 0;	
font-size: 100%;	
font: inherit;	
vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	
display: block;}

body {	
line-height: 1.5;
}

ol, ul {	
list-style: none;
}

blockquote, q {	
quotes: none;
}

blockquote:before, blockquote:after,q:before, q:after {	
content: '';	
content: none;
}

table {	
border-collapse: collapse;	border-spacing: 0;
}	

/* END RESET */

body {
    font-family: Gafata;
    font-size: 18px;
    height: 100vh;
    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; 
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    background-color: rgba(25,25,25,1);
    z-index: -1;
}

#wrapper {
    position: relative;
    width: 1200px;
    height: 800px;
    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;    
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    background-color: rgba(25,25,25,1);
}

.panel {
    position: relative;
    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;   
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-direction: column;
    flex-direction: column;   
    transition: transform .5s linear, right .5s linear, left .5s linear, background-position 1s linear;
    width: 50%;
    cursor: pointer;
}

@font-face {
    font-family: Ghastly;
    src: url(ghastly.ttf);
}

#left {
    order: 0;
    height: 75%;
    transform: scale(1);
    background-color: #000000;
    background-image: url(img/firstpage-left.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    left: 0;
}

#left div {
    pointer-events: none;
}

#right {
    order: 1;
    height: 75%;
    transform: scale(1);
    background-color: #FFFFFF;
    background-image: url(img/firstpage-right.jpg);
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    right: 0;
}

#right div {
    pointer-events: none;
}

#right img {
    width: 250px;
    pointer-events: none;
}

#shadow {
    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; 
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    position: absolute;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0,0,0,.9);
    opacity: 0;
    transition: opacity 1s;
    z-index: -2;
}

#question-box {
    position: absolute;
    display: grid;
    grid-template-columns: 3fr 3fr;
    grid-template-areas:
        "narration narration"
        "option1 option2";
    color: white;
    height: 500px;
    width: 700px;
    z-index: -2;
}

.question-box {
    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex; 
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;    
}

#narration {
    grid-area: narration;
    padding: 40px;
}

#option1 {
    grid-area: option1;
    border: 1px solid white;
    margin: 20px;
    padding: 10px;
}

#option1:hover {
    background-color: gray;
}

#option2 {
    grid-area: option2;
    border: 1px solid white;
    margin: 20px;
    padding: 10px;
}

#option2:hover {
    background-color: gray;
}

.sammy-left {
    opacity: 1;
    text-align: right;
    position: absolute;
    top: 17%;
    right: 22%;
}

.dad-left {
    opacity: 0;
    transition: opacity 1s linear;
    position: absolute;
    bottom: 225px;
    left: 100px;
}

.dad-left img {
    width: 200px;
    position: absolute;
    top: -50px;
    left: -30px;
    z-index: -2;
}

#click {
    font-family: Ghastly;
    font-size: 3em;
    opacity: 0;
    position: absolute;
    bottom: 10%;
    left: 40%;
    transition: opacity .3s;
    transform: rotate(-10deg);
}

#second-click {
    display: inline-block;
    opacity: 1;
    transition: opacity .3s;
    position: relative;
    top: 10px;
    transform: rotate(-10deg);
}

.sammy-right {
    opacity: 0;
    position: absolute;
    top: 80px;
    left: 250px;
    transition: opacity 1s linear;
}

.sammy-right img {
    position: absolute;
    top: -70px;
    left: -60px;
    z-index: -1;
}

.dad-right {
    opacity: 0;
    text-align: right;
    position: absolute;
    bottom: 220px;
    right: 200px;
    transition: opacity 1s linear;
}

.dad-right img {
    position: absolute;
    bottom: -60px;
    right: -50px;
    z-index: -1;
}

#zzz {
    position: relative;
    right: 40px;
    font-size: 2em;
}

#mom {
    opacity: 0;
    position: absolute;
    bottom: 250px;
    right: 160px;  
    text-align: right;
}

#mom img {
    position: absolute;
    bottom: -48px;
    right: -45px;
    z-index: -1;
}

#dad {
    opacity: 0;
    transition: opacity .5s;
    display: block;
    position: relative;
    left: 40px;
    font-size: 1.2em;
}

#big {
    opacity: 0;
    transition: opacity 1s;
    display: block;    
}

#need {
    opacity: 0;
    transition: opacity .5s;    
}

#splash {
    position: absolute;
    opacity: 0;
    transition: opacity 1s linear;
    z-index: -4;
    width: 100%;
    height: 75%;
    background-image: url(img/splash.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#dad-splash {
    position: absolute;
    top: 220px;
    right: 250px;
    text-align: right;
    width: 150px;
    opacity: 0;
    transition: opacity 1s linear;
}

#dad-splash img {
    width: 200px;
    position: absolute;
    top: -50px;
    left: -20px;
    z-index: -1;
}

#sammy-splash {
    position: absolute;
    bottom: 200px;
    left: 210px;
    opacity: 0;
    transition: opacity 1s linear;
}

#sammy-splash img {
    width: 200px;
    position: absolute;
    top: -50px;
    left: -40px;
    z-index: -1;
}

#finale {
    position: absolute;
    top: 370px;
    left: 200px;
    transform: rotate(-15deg);
    font-family: Ghastly;
    font-size: 3em;
    opacity: 0;
    transition: opacity .5s;
    animation-name: shimmy;
    animation-duration: .2s;
    animation-iteration-count: infinite;
}

@keyframes shimmy {
    0% {transform: rotate(-10deg);}
    25% {transform: rotate(10deg);}
    50% {transform: rotate(-10deg);}
    100% {transform: rotate(10deg);}
}

#red {
    height: 100vh;
    width: 100vw;
    background-color: red;
    background-image: url(img/legs.png);
    background-position: bottom left;
    z-index: -4;
    position: absolute;
    opacity: 0;
    transition: opacity .1s;
}