﻿@media screen {

    html, body {
        font-family: Arial;
        font-size: medium;
        color: white;
        background-color: #f0f0f0;
        padding: 0 !important;
        margin: 0 !important;
        overflow: auto !important;
        width: 100% !important;
        height: 100%;
        min-height: 100%;
        position: relative;
        display: block !important;
    }

    form {
        min-height: 100%;
        display: block;
        overflow: auto;
    }

    body {
        max-width: 1000px;
        min-height: 100%;
        overflow-x: hidden;        
    }

    #wrapper {
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        bottom: 0;
        right: 0;
        left: 0;
        margin: 0;
        padding: 0;
        position: absolute;
        background-color: rgba(255,255,255,0);
        text-align: left;
        box-shadow: none !important;
        overflow-x: hidden;
    }

    #crossfadebig {
        display: none;
    }

    #banner {
        display: none;
    }

    *{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        text-size-adjust: none;
    }

    #drawer-toggle {
        position: absolute;
        opacity: 0;
    }

    #drawer-toggle-label {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        top: 2.5%;
        left: 2.5%;
        height: 6.25%;
        width: 6.25%;
        display: block;
        position: absolute;
        background: rgba(255,255,255,0);
        z-index: 500;
    }

        #drawer-toggle-label:before {
            content: '';
            display: block;
            position: absolute;
            height: 3px;
            width: 24px;
            background: black;
            left: 0;
            top: 0;
            box-shadow: 0 6px 0 black, 0 12px 0 black;
            z-index: 15;
        }

        #nav.menu {
            padding: 0 0 0 0 !important;
        }

    #navigation {
        max-width: 85%;
        position: absolute;
        top: 0;
        left: -1500px;
        min-height: 100%;
        max-height: 1000%;
        background: rgba(0,0,0,0.9);
        padding: 0 0 0 0 !important;
        overflow-x: hidden;
        overflow-y: visible;
        font-size: medium;
        z-index: 3;
        text-align: center;
        -webkit-overflow-scrolling: touch;
    }

        #navigation li {
            font-weight: bold;
            list-style: none;
            margin: 3.5% 1% 4% 1% !important;
        }

        #navigation ul li ul li a {
            font-weight: normal;
            font-size: small;
            color: white;
            list-style: none;
        }

        #navigation a {
            color: white;
            text-decoration: none;
            list-style: none;
            margin: 2% 1% 1% 1%;
        }

    #drawer-toggle:checked ~ #drawer-toggle-label {
        height: 100%;
        width: 100%;
        z-index: 2 !important;
        background: rgba(255,255,255,0);
    }

    #drawer-toggle:checked ~ #drawer-toggle-label:before {
        left: 62%;
    }

    #drawer-toggle:checked, #drawer-toggle:checked ~ #navigation {
        left: 0;
        z-index: 50;
        padding-left: 0 !important;
    }

    #drawer-toggle:checked, #drawer-toggle:checked ~ #content_area {
        margin-left: 60% !important;
        width: 100%;
        float: right;
    }

    #content_area {
        margin: 0 !important;        
        padding: 0 0 33px 0 !important;
        left: 0 !important;
        right: 0 !important;
        float: right;
        max-width: 100%;
        height: auto !important;
        max-height: 1000px !important;
        z-index: 1;
        background-color: rgba(240,240,240,0);
        position: absolute;
    }

    #wrapper:after {
        clear: both;
        content: "";
        display: table;
    }

    #footer {
        display: none;
    }

    #bigimg {
        display: none;
    }

    #smallimgl {
        display: none;
    }

    /*Home Page Style*/
    
    /*Formatting background image*/

    #content_area #smallimg.shadow {
        max-width: 100% !important;
        height: auto !important;
    }

    #content_area #smallimg img {
        height: auto !important;
        max-width: 100% !important;
        top: -100px;
        margin: 0 !important;
        padding: 0 !important;
        vertical-align: middle;
    }

    /*Formatting logo*/

    #content_area #logo img {
        width: 95%;
        top: 40%;
        margin: auto !important;
        left: 2.5%;
        height: 7% !important;
    }

    /*Formatting quote*/

    #content_area p {
        top: 50%;
        width: 75%;
        margin-left: 12.5%;
        margin-right: 12.5%;
        padding: 0 !important;
        left: 0 !important;
        font-size: medium !important;
        font-weight: bold;
        text-align: center;
    }
}



