﻿html {
    overflow-y: scroll;
    color: #000;
    font: 400 62.5%/1.4 "Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

body, html {
    height: 100%;
    min-height: 100%
}

body {
    margin: 0;
    font-size: 1.3rem;
    background: #fff;
    color: #000
}

a {
    cursor: pointer;
    text-decoration: none;
    color: #2498e3;
    background-color: transparent
}

    a:active, a:hover {
        text-decoration: underline;
        color: #188dd9;
        outline: 0
    }

h1, h2 {
    margin: 0 0 .5rem;
    color: #444;
    font-weight: 400;
    line-height: 1
}

h1 {
    font-size: 2.4rem
}

h2 {
    font-size: 3.6rem
}

.error-code {
    color: #f47755;
    font-size: 8rem;
    line-height: 1
}

p {
    margin: 1.2rem 0
}

    p.lead {
        font-size: 1.6rem;
        color: #4f5a64
    }

hr {
    box-sizing: content-box;
    height: 0;
    margin: 2.4rem 0;
    border: 0;
    border-top: 1px solid #ddd
}

.page {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh
}

    .page:before {
        display: block;
        content: '';
        -webkit-box-flex: 0;
        -ms-flex: 0 1 300px;
        flex: 0 1 300px;
        background: #38444f 50% 6em;
        background-size: auto auto;
        background-image: url('flat-bg.jpg');
    }

.main {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 70%;
    flex: 1 1 70%;
    box-sizing: border-box;
    padding: 10rem 5rem 5rem;
    min-height: 100vh
}

.help-actions a {
    display: inline-block;
    border: 2px solid #23a7de;
    margin: 0 .5rem .5rem 0;
    padding: .5rem 1rem;
    text-decoration: none;
    -webkit-transition: .25s ease;
    transition: .25s ease
}

    .help-actions a:hover {
        text-decoration: none;
        background: #23a7de;
        color: #fff
    }


.countdown span.time {
    padding: 0px;
    display: inline-block;
    font-family: verdana;
    font-size: 64px;
    font-weight: 900;
    color: #e8e8e8;
    border-radius: 10px;
}

@media(max-width:769px) {

    .page:before {
        -webkit-box-flex: 0;
        -ms-flex: 0 1 30%;
        flex: 0 1 30%;
    }
}

@media(max-width:478px) {
    .page {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

        .page:before {
            -ms-flex-preferred-size: 100px;
            flex-basis: 100px;
            background-position: 5rem -4.8rem;
            background-size: 769px auto
        }

    .main {
        min-height: 0;
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none
    }

    .countdown span.time {
        padding: 0px;
        display: inline-block;
        font-family: verdana;
        font-size: 32px;
        font-weight: 900;
        color: #e8e8e8;
        border-radius: 10px;
    }
}

@media(max-width:478px) {
    h2 {
        font-size: 3rem
    }

    .main {
        padding: 3rem
    }
}
