/* 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;
        --light-red: #D40B2F;
        --orange: #FF9101;
    }
    html, body {
        width: 100%;
        height: 100%;
    }
    body {
        font-size: 1em;
        font-weight: 500;
        background: var(--white);
        color: var(--black);
    }
    * { font-family: 'Helvetica-Neue', 'Helvetica', 'Arial', sans-serif; }
    a { 
        color: var(--orange); 
        text-decoration: none;
    }
    a:hover, a:focus { 
        text-decoration: underline; 
        color: var(--orange);
    }
    .main-body {
        min-height: calc(100% - 100px);
        padding-bottom: 100px;
        overflow-x: hidden;
        font-size: 1em;
    }
    .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; }
    .website-input {
        position: absolute;
        top: -10px;
        left: -10px;
    }
    .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(--orange);
        padding: 10px 20px;
        border: 2px solid var(--orange);
        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(--orange);
        text-decoration: none;
        color: var(--orange);
    }
    .red { color: var(--red); }
    .orange { color: var(--orange); }
    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);
    }
    #header {
        position: relative;
    }
    #header section {
        padding: 20px;
    }
    #logo .icon { 
        width: 100px; 
        display: block;
        margin-bottom: 10px;
    }
    #header a { 
        color: var(--black);
        font-size: 1.2em;
    }
    #header a:hover, #header a:focus, #header a:target {
        text-decoration: none;
        color: var(--orange);
    }
    #header .contacts a { 
        color: var(--white);
        font-size: 1.2em;
    }
    #header .contacts a:hover, #header .contacts a:focus, #header .contacts a:target {
        text-decoration: none;
        color: var(--black);
    }
    #header ul {
        list-style: none;
    }
    #header ul li {
        display: inline-block;
        padding: 10px;
    }
    #header ul li:last-child { padding-right: 0; }
    #header #logo img, #header #logo strong {
        display: inline-block;
    }
    #header #logo strong {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        padding: 10px;
        font-size: 1.6em;
    }
    #header #logo strong span { font-size: 1em; }
    #hero { 
        position: relative;
        width: 100%; 
    }
    #hero img { width: 100%; }
    #hero figcaption, #hero figcaption.center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.6em;
        color: var(--white);
        font-weight: 500;
    }
    #hero figcaption.right {
        left: initial;
        right: -5%;
    }
    #hero figcaption.left {
        left: 0;
    }
    #hero figcaption .title {
        color: var(--orange);
        font-size: 2em;
    }
    #hero figcaption a.btn { 
        margin-top: 10px;
        padding: 10px 25px; 
    }
    #header .contacts { background: var(--orange); }
    #header .header-links ul li.logo-image { display: none; }
    .fixed-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: var(--white);
        padding: 10px;
        filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.2));
    }
    #header .fixed-nav ul li.logo-image { display: block; }
    #header .fixed-nav ul li.logo-image img { width: 80px; }


/* 03. FOOTER */
    footer { 
        width: 100%;
        font-size: 1.2em;
    }
    footer section.orange { background: var(--orange); }
    footer section.grey { 
        background: var(--medium-grey); 
        color: var(--white);
    }
    footer section.orange, footer section.grey { padding: 20px; }
    footer section.orange a { 
        padding: 4px;
        color: var(--white); 
    }
    footer section.grey a { color: var(--white); }
    footer section.grey a:hover, footer section.grey a:focus, footer section.grey a:target { 
        text-decoration: none;
        color: var(--orange); 
    }
    footer section.orange a:hover, footer section.orange a:focus, footer section.orange a:target { 
        text-decoration: none;
        color: var(--dark-grey); 
    }


/* 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(--grey); }
    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);
    }
    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(--red);
    }
    .password-input { position: relative; }
    .password-input img {
        width: 40px;
        position: absolute;
        top: 12%;
        right: 20px;
        transform: translateY((-50%));
    }
    #contact-form { 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;
    }
    div.form-container.tall { height: 500px; }
    .checkbox {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background: transparent url("/img/icons/ar-camera.png") no-repeat left top;
        background-size: cover;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkbox .checkmark:after {
        content: " ";
        position: absolute;
        display: none;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
        width: 15px;
        height: 15px;
        background: var(--red);
        border-radius: 50%;
    }

    /* On mouse-over, add a grey background color */
    .checkbox:hover input ~ .checkmark:after {
        opacity: 0.5;
        display: block;
    }

    /* Show the checkmark when checked */
    .checkbox input:checked ~ .checkmark:after {
        display: block;
    }



/* 05. 404 */
    .err-page {
        position: relative;
        width: 100%;
        height: 100%;
        color: var(--red);
    }
    .err-page .row {
        position: relative;
        width: 100%;
        top: 50%;
        margin: 0 auto;
        transform: translateY(-50%);
        text-align: center;
        padding: 10px;
    }
    .err-page img, .err-page h1, .err-page h2, .err-page a { margin-bottom: 20px; }
    .err-page h1 { font-size: 3.4em; }
    .err-page h2 { font-size: 2em; }
    .err-page img { width: 100%; }
    .err-page a {
        margin-bottom: 10px;
        padding: 6px 20px;
        border: 2px solid var(--red);
        background: var(--red);
        color: var(--white);
        font-size: 1.6em;
        text-transform: uppercase;
    }
    .err-page a:hover, .err-page a:focus, .err-page a:target {
        background: var(--white);
        color: var(--red);
        border: 2px solid var(--red);
        text-decoration: none;
    }


/* 06. HOME PAGE */
    figure.section-hero {
        position: relative;
        width: 100%;
        height: 150px;
        overflow: hidden;
        border-radius: 15px;
    }
    figure.section-hero.tall { height: 350px; }
    figure.section-hero img {
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-40%);
    }
    figure.section-hero.tall img { transform: translateY(-50%); }
    .copy-block { 
        padding: 20px 20px 0; 
        margin-bottom: 10px;
    }
    .bar-container { position: relative; }
    span.bar {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 2px;
        height: 100%;
        background: var(--black);
        opacity: 0.5;
    }
    #tools {
        position: relative;
        background: var(--grey);
        margin-top: 200px;
        padding: 100px 20px 20px 20px;
        border-radius: 20px;
    }
    #tools img {
        position: absolute;
        top: -40%;
        left: 50%;
        transform: translateX(-50%);
        width: 400px;
    }
    #licenses { padding: 20px; }


/* 07. QUERIES */
    /* a. Phones and Lower Res Tablets */
        @media only screen and (max-width: 600px) {
            .mobile-hide { display: none; }
            .mobile-only { display: block !important; }
            #header a { font-size: 1em; }
            #header #logo strong {
                padding: 10px;
                font-size: 1em;
            }
            #header #logo strong span { font-size: 0.8em; }
            #header ul li { padding: 4px; }
            #header .fixed-nav ul li.logo-image img { width: 50px; }
            #tools { margin-top: 120px; }
            #hero figcaption { 
                position: relative;
                transform: none;
                color: var(--black);
                background: var(--grey);
                padding: 20px;
                font-size: 1em;
            }
            #hero figcaption .title { font-size: 1.6em; }
            #hero figcaption.right, #hero figcaption.left, #hero figcaption.center {
                left: initial;
                right: initial;
            }
            span.bar.mobile-hide { display: none; }
            #tools img { width: 360px; }
        }

    /* b. Tablet */
        @media only screen and (min-width: 601px) and (max-width: 1024px) {
            .tablet-only { display: block !important; }
            #hero figcaption {
                font-size: 1.2em;
            }
            #hero figcaption .title { font-size: 1.6em; }
            #hero figcaption.right { right: -22%; }
            #tools { margin-top: 237px; }
            #tools img { top: -27%; }
        }

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