/* 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;
        --medium-grey: #5C5C5D;
        --dark-grey: #323232;
        --red: #A31F37;
        --blue: #42589D;
    }
    @font-face {
        font-family: BebasNeue;
        src: url("/webfonts/BebasNeue.ttf");
    }
    @font-face {
        font-family: GreatVibes;
        src: url("/webfonts/GreatVibes.ttf");
    }

    html, body {
        width: 100%;
        height: 100%;
    }
    body {
        font-size: 1em;
        font-weight: 500;
        background: var(--white);
        color: var(--black);
    }
    * { font-family: 'Arial', 'Helvetica', sans-serif; }
    a { 
        color: var(--blue); 
        text-decoration: none;
    }
    a:hover, a:focus { 
        text-decoration: underline; 
        color: var(--blue);
    }
    h1, h2, h3, h4, h5, h6, h2 span { 
        font-family: BebasNeue; 
        color: var(--blue);
    }
    .great-vibes { font-family: GreatVibes; }
    .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);
        margin-bottom: 20px;
        padding: 10px;
        font-weight: 500;
        text-align: center;
    }
    .errs strong { font-size: 1.4em; }
    .btn, .btn.ghost:hover, .btn.ghost:focus, .btn.ghost:target {
        background: var(--blue);
        padding: 10px 20px;
        border: 2px solid var(--blue);
        border-radius: 20px;
        font-weight: 600;
        color: var(--white);
        text-align: center;
    }
    .btn:hover, .btn:focus, .btn:target, .btn.ghost {
        background: var(--white);
        border: 2px solid var(--blue);
        text-decoration: none;
        color: var(--blue);
    }
    .blue { color: var(--blue); }
    .yellow { color: var(--blue); }
    .red { color: var(--red); }
    .white { color: var(--white); }
    i.fa-phone { transform: scaleX(-1); }
    .grey-container { 
        padding: 20px 0;
        background: var(--grey); 
    }
    h2 img { 
        width: 35px;
        display: inline-block;
    }


/* 02. HEADER */
    header {
        z-index: 198;
        top: 0;
        width: 100%;
        background: var(--white);
    }
    #head { position: relative; }
    #head .container {
        position: absolute;
        top: 20px;
        left: 0;
        width: 100%;
    }
    #head, #head img { width: 100%; }



/* 03. FOOTER */
    footer {
        position: relative;
        width: 100%;
        font-size: 1.2em;
    }
    footer img { width: 100%; }
    footer #info {
        bottom: 0;
        width: 100%;
        background: #4d6f9e;
    }
    footer #info p { 
        font-size: 0.8em; 
        color: var(--white);
    }
    footer a, footer a:hover, footer a:focus, footer a:target { color: var(--white); }


/* 04. FORMS */
    form {
        padding: 10px;
        font-weight: 700;
    }
    form input, form textarea, form select, .form-btn, div.search input, div.search select {
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        outline: 0;
        border: 2px solid #d9d9d9;
        margin-bottom: 40px;
    }
    form label, form input, .form-btn {
        font-size: 1.2em;
    }
    form input, .form-btn { color: var(--blue); }
    form input[type=submit], .form-btn { 
        background: var(--blue);
        color: var(--white);
        margin-bottom: 10px;
        border: 2px solid var(--blue);
    }
    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(--blue);
        border: 2px solid var(--blue);
    }
    form input[type=submit].non-btn, .form-btn.non-btn { 
        color: var(--dark-grey); 
        background: none;
        font-weight: 900;
        border: 0;
    }
    form input[type=submit].non-btn:hover, form input[type=submit].non-btn:focus, form input[type=submit].non-btn:target, .form-btn.non-btn:hover, .form-btn.non-btn:focus, .form-btn.non-btn:target { 
        color: var(--blue);
    }
    #contact-form {
        border: 1px solid var(--blue);
        padding: 10px; 
    }
    form .hidden { display: none; }
    div.form-container {
        width: 100%;
        height: 300px;
        overflow-y: auto;
        padding: 10px;
        border-radius: 10px;
        outline: 0;
        border: 2px solid #d9d9d9;
        margin-bottom: 40px;
    }
    label {
        color: var(--blue);
    }


/* 06. HOME PAGE */
    #launch {
        margin-top: 20px; 
        padding: 40px;
        background: rgb(41,90,151);
        background: linear-gradient(135deg, rgba(41,90,151,1) 0%, rgba(77,111,158,1) 100%); 
        color: var(--white);
    }
    #contact h2.title { font-size: 3em; }
    #contact .great-vibes { font-size: 3em; }
    #head figure { position: relative; }
    #head figure video {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 92%;
        height: 84%;
        transform: translate(-50%, -50%);
        border-radius: 8px;
    }
    img#ar-icon {
        width: 100px;
    }



/* 07. QUERIES */
    /* a. Phones and Lower Res Tablets */
        @media only screen and (max-width: 600px) {
            .mobile-hide { display: none; }
            .mobile-only { display: block !important; }
            #head .container {
                position: relative;
                top: 0;
                left: 0;
            }
            footer #info {
                position: relative;
                bottom: 0;
                left: 0;
                width: 100%;
            }
        }

    /* b. Tablet */
        @media only screen and (min-width: 601px) and (max-width: 1024px) {
            .tablet-only { display: block !important; }
            footer #info {
                position: relative;
                bottom: 0;
                left: 0;
                width: 100%;
            }
        }

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