html { line-height: 1.25; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; /* 2 */ }
body { margin: 0; }
a { background-color: transparent; -webkit-text-decoration-skip: objects; }
b, strong { font-weight: bolder; }
audio, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
img { border-style: none; }
button { font-family: sans-serif; font-size: 100%; line-height: 1.4; margin: 0; overflow: visible; text-transform: none; }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
canvas { display: inline-block; }
[hidden] { display: none; }

html { color: #222; font-size: 1em; line-height: 1.25; }
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }

/**/

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(Roboto.woff2) format('woff2');
}

@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    src: url(RobotoSlab.woff2) format('woff2');
}

.blink { padding-left: 0.25em; animation: blink 2s infinite; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.1; } 100% { opacity: 1; }}

body { font-family: 'Roboto', sans-serif; }
body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
body { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #000; color: #fff; overflow: hidden; }

body > a, body > a:hover { color: #fff; text-decoration: none; cursor: pointer; }
    .image, .image-double-mpu, .image-mpu { display: none; position: absolute; left: 0; top: 0; background-size: 100%; background-repeat: no-repeat; background-position: center; z-index: 0; }
    .image, .image-double-mpu, .image-mpu { transform: translate(0, 0); transform-origin: left top; transition: transform 30s cubic-bezier(0, 0, 0.67, 1), opacity 30s linear; }
    /* billboard */ .image { width: 970px; height: 500px; background-image: url('../img/dna-billboard.jpg'); }
        
    .gradient { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
    .logo, .logo-alone, .logo-alone-mobile { display: none; position: absolute; }

    .button { background: #66718d; color: #fff; box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); }
    .button:hover { background: #3e5589; color: #fff; }

    .billboard { display: none; }
        .t1-billboard, .t2-billboard { position: absolute; font-family: 'Roboto Slab', serif; font-size: 4em; line-height: 1.2em; text-shadow: 0 0 2px #000, 0 0 2px #000; transform: translateY(-50%); }
        .t1-billboard { top: 50%; opacity: 1; transition: opacity 0.5s; left: 50px; width: 640px; }
        .t2-billboard { top: 50%; opacity: 0; transition: opacity 0.5s; left: 50px; width: 520px; }
        .button-billboard { position: absolute; width: 140px; right: 50px; top: 50px; font-size: 1em; padding: 0.4em 0; text-align: center; opacity: 0; transition: opacity 0.5s; }

    .double-mpu { display: none; position: absolute; left: 35px; right: 35px; top: 0; bottom: 0; text-align: center; }
        .t1-double-mpu, .t2-double-mpu { position: absolute; top: 48%; transform: translateY(-50%); text-shadow: 0 0 2px #000, 0 0 2px #000; font-family: 'Roboto Slab', serif; }
        .t1-double-mpu { font-size: 1.8em; opacity: 1; transition: opacity 0.5s; }
        .t2-double-mpu { font-size: 2em; opacity: 0; transition: opacity 0.5s; }
        .button-double-mpu { margin-top: 400px; display: inline-block; padding: 0.5em 1em; opacity: 0; transition: opacity 0.5s; }

    .mpu { display: none; position: absolute; left: 28px; right: 28px; top: 25px; height: 130px; }
        .p1-mpu { position: absolute; top: 0; transition: opacity 0.5s; }
            @keyframes bullet-1-appears { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; }}
            @keyframes bullet-2-appears { 0% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: 1; }}
            @keyframes bullet-3-appears { 0% { opacity: 0; } 87.5% { opacity: 0; } 100% { opacity: 1; }}
            @keyframes bullet-4-appears { 0% { opacity: 0; } 93.75% { opacity: 0; } 100% { opacity: 1; }}
            .p1-mpu > div { opacity: 1; }
            .p1-mpu.animating > div:nth-child(1) { animation: bullet-1-appears 0.75s; }
            .p1-mpu.animating > div:nth-child(2) { animation: bullet-2-appears 1.5s; }
            .p1-mpu.animating > div:nth-child(3) { animation: bullet-3-appears 2.25s; }
            .p1-mpu.animating > div:nth-child(4) { animation: bullet-4-appears 3s; }
        .p2-mpu, .p3-mpu { position: absolute; top: 0; opacity: 0; transition: opacity 0.5s; }
        .p2-mpu { font-size: 1.4em; }
        .p3-mpu { font-size: 1.8em; }
        .button-mpu { position: absolute; bottom: 0; display: inline-block; padding: 0.4em 1em; font-size: 0.875em; opacity: 0; transition: opacity 0.5s; }

    .leaderboard { display: none; position: absolute; left: 35px; top: 0; bottom: 0; }
        .p1-leaderboard, .p2-leaderboard, .p3-leaderboard { position: absolute; width: 440px; transform: translateY(-50%); text-shadow: 0 0 2px #000, 0 0 2px #000; text-align: center; transition: opacity 0.5s; }
        .p1-leaderboard { font-size: 1.8em; top: 55%; opacity: 1; }
        .p2-leaderboard { font-size: 1.8em; top: 55%; opacity: 0; }
        .p3-leaderboard { font-size: 1.4em; top: 55%; opacity: 0; }
        .p3-leaderboard > span { color: #99c7ff; font-size: 0.75em; }
        .p3-leaderboard > span:hover { color: #6c888d; }

    .skyscraper, .mini-skyscraper { display: none; position: absolute; left: 20px; right: 20px; bottom: 90px; }
        .p1-skyscraper, .p2-skyscraper { font-size: 1em; text-shadow: 0 0 2px #000, 0 0 2px #000; }
        .p1-skyscraper { font-family: 'Roboto Slab', serif; margin-bottom: 20px; }
        .p2-skyscraper { font-size: 0.7em; margin-bottom: 40px; }
        .button-skyscraper { display: inline-block; width: 100%; padding: 0.4em 0; font-size: 0.75em; text-align: center; }

    .mini-skyscraper { left: 10px; right: 10px; }
        .mini-skyscraper > .p1-skyscraper, .mini-skyscraper > .p2-skyscraper { }
        .mini-skyscraper > .button-skyscraper { width: 100%; padding: 0.4em 0; text-align: center; }

    .mobile { display: none; position: absolute; left: 12px; right: 12px; top: 0; bottom: 0; }
        .p1-mobile, .p2-mobile { position: absolute; font-size: 0.75em; top: 50%; transform: translateY(-50%); transition: opacity 0.25s; }
        .p1-mobile { opacity: 1; left: 0; }
        .p2-mobile { opacity: 0; right: 0; }
        .p2-mobile > span { color: #99c7ff; }
        .p2-mobile > span:hover { color: #6c888d; }

@media only screen and (width: 120px) and (height: 600px) {
    .image { display: block; transform: scale(1.4) translate(-450px, -100px); }
    .image.animating { transform: scale(1.1) translate(-570px, -150px); opacity: 0.75; }
    .gradient { background: linear-gradient(180deg, transparent 10%, #000 90%); }
    .logo-alone { display: block; width: 100px; left: 10px; right: 10px; bottom: 25px; }
    .mini-skyscraper { display: block; }
}
@media only screen and (width: 160px) and (height: 600px) {
    .image { display: block; transform: scale(1.4) translate(-450px, -100px); }
    .image.animating { transform: scale(1.1) translate(-570px, -150px); opacity: 0.75; }
    .gradient { background: linear-gradient(180deg, transparent 10%, #000 90%); }
    .logo-alone { display: block; width: 120px; left: 20px; right: 20px; bottom: 25px; }
    .skyscraper { display: block; }
}
@media only screen and (width: 300px) and (height: 50px) {
    .logo-alone-mobile { display: block; width: 130px; left: 160px; top: 13px; transition: left 1s ease 0.2s; }
    .gradient { background: linear-gradient(90deg, #00183e, #000); }
    .mobile { display: block; }
}
@media only screen and (width: 320px) and (height: 50px) {
    .logo-alone-mobile { display: block; width: 140px; left: 170px; top: 12px; transition: left 1s ease 0.2s; }
    .gradient { background: linear-gradient(90deg, #00183e, #000); }
    .mobile { display: block; }
}
@media only screen and (width: 300px) and (height: 250px) {
    .image-mpu { display: block; transform: scale(0.9) translate(-400px, 0); }
    .image-mpu.animating { transform: scale(1) translate(0, -110px); opacity: 0.5; }
    .gradient { background: linear-gradient(180deg, transparent 50%, #000); }
    .logo { display: block; width: 170px; right: 30px; bottom: 20px; }
    .mpu { display: block; }
}
@media only screen and (width: 300px) and (height: 600px) {
    .image-double-mpu { display: block; transform: scale(1) translate(-150px, -80px); }
    .image-double-mpu.animating { transform: scale(1) translate(-300px, -180px); opacity: 0.5; }
    .logo { display: block; width: 200px; left: 50px; right: 50px; bottom: 35px; }
    .double-mpu { display: block; }
}
@media only screen and (width: 728px) and (height: 90px) {
    .image { display: block; transform: scale(calc(728/970)) translate(-30px, -100px); }
    .image.animating { transform: scale(calc(728/970)) translate(-70px, -240px); opacity: 0.5; }
    .gradient { background: linear-gradient(90deg, transparent 60%, #000); }
    .logo { display: block; width: 200px; right: 20px; top: 17px; }
    .leaderboard { display: block; }
}
@media only screen and (width: 970px) and (height: 250px) {
    .image { display: block; transform: scale(1); }
    .image.animating { transform: scale(1) translate(0, -250px); opacity: 0.5; }
    .gradient { background: linear-gradient(135deg, transparent 60%, #000); }
    .logo { display: block; right: 50px; bottom: 30px; width: 200px; }
    .billboard { display: block; }
}

/**/

.hidden {
    display: none !important;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}