/* TABLE OF CONTENTS
    01. General
    02. Header
    03. Footer
    04. Forms
    05. 404
    06. Queries
        a. Mobile
        b. Tablet
        c. iPad Pro
*/


/* 01. GENERAL */
    :root {
        --white: #fff;
        --black: #000;
        --grey: #F8F8F8;
        --dark-grey: #303034;
        --red: #FF0000;
    }
    @font-face {
        font-family: Roboto;
        src: url("/webfonts/Roboto.ttf");
    }
    @font-face {
        font-family: Rubik;
        src: url("/webfonts/Rubik.ttf");
    }

    html, body {
        width: 100%;
        height: 100%;
    }
    body {
        font-size: 1em;
        font-weight: 500;
        background: var(--white);
        color: var(--dark-grey);
        overflow-x: hidden;
    }
    * { font-family: Roboto, 'Helvetica', sans-serif; }
    a { 
        color: var(--red); 
        text-decoration: none;
    }
    a:hover, a:focus { 
        text-decoration: underline; 
        color: var(--red);
        cursor: pointer;
    }
    h1, h2, h3, h4, h5, h6, h2 span { font-family: Rubik; }
    .mobile-hide { display: inherit; }
    .mobile-only { display: none !important; }
    .tablet-only { display: none !important; }
    .quarter-width { width: 25%; }
    .half-width { width: 50%; }
    .three-quarter-width { width: 75%; }
    .full-width { width: 100%; }
    .text-center { text-align: center; }
    .text-left { text-align: left; }
    .text-right { text-align: right; }
    .text-uppercase { text-transform: uppercase; }
    .header-light { font-weight: 500; }
    .header-medium { font-weight: 700; }
    .header-heavy { font-weight: 900; }
    .hide { display: none; }
    .container.white, .container-fluid.white { background: var(--white); }
    .errs {
        border: 5px solid var(--red);
        background: var(--white);
        margin-bottom: 20px;
        padding: 10px;
        font-weight: 500;
        text-align: center;
    }
    .red { color: var(--red); }
    .white { color: var(--white); }
    div.body-content {
        height: 100vh;
    }
    img.logo {
        width: 100%;
    }



/* 02. HEADER */
    header {
        z-index: 198;
        position: relative;
        width: 100%;
        height: 200px;
        background: var(--dark-grey);
        color: var(--white);
    }
    header .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }



/* 03. FOOTER */
    footer {
        position: relative;
        width: 100%;
        height: 150px;
        font-size: 1.2em;
        background: var(--dark-grey);
        overflow-y: hidden;
    }
    footer .row {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
    }
    footer .row div {
        position: relative;
    }
    footer .row div figure {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }


/* 04. FORMS */
    form#support {
        padding: 20px;
        background: var(--dark-grey);
    }
    form#support h2, form#support label {
        color: var(--white);
    }
    form input, form textarea {
        width: 100%;
        padding: 10px;
        outline: 0;
        margin-bottom: 40px;
        color: var(--dark-grey);
    }
    form label, form input {
        font-size: 1.2em;
    }
    form label {
        font-weight: 700;
    }
    form input[type=submit], .form-btn { 
        background: var(--red);
        color: var(--white);
        margin-bottom: 10px;
        border: 2px solid var(--red);
    }
    form input[type=submit]:hover, form input[type=submit]:focus, form input[type=submit]:target, .form-btn:hover, .form-btn:focus, .form-btn:target {
        background: var(--white);
        color: var(--red);
        border: 2px solid var(--red);
    }



/* 07. QUERIES */
    /* a. Phones and Lower Res Tablets */
        @media only screen and (max-width: 600px) {
            .mobile-hide { display: none; }
            .mobile-only { display: block !important; }
            div.body-content {
                height: auto;
            }
        }

    /* b. Tablet */
        @media only screen and (min-width: 601px) and (max-width: 1024px) {
            .tablet-only { display: block !important; }
            div.body-content {
                height: auto;
            }
        }

    /* c. iPad Pro */
        @media only screen and (width: 1024px) and (height: 1366px) and (orientation: portrait) {
            
        }