/* Branding */

/* COLORS
 *
 * Lumis Orange - #ec7700 ... rgb(236, 119, 0)
 * Lumis Yellow - #ffd040 ... rgb(255, 208, 64)
 * Lumis Black  - #130c0e ... rgb(19, 12, 14)
 * Lumis Gray   - #636466 ... rgb(99, 100, 102)
*/

/* LOGO
 * 1/2 the width of the logomark around the space of the icon is required
*/

/* FONTS
 * Primary Font: Apex Sans
 * Headline: Apex Sans Bold
 * Sub-Headline: Apex Sans Medium
 * Body Copy: Apex Sans Light
 *
 * Below are the Apex Sans fonts found free online
*/

/* Apex Sans Book */
@font-face {
    font-family: apexReg;
    src: url(../fonts/apex-sans-book.ttf);
}

/* Apex Sans Bold T */
@font-face {
    font-family: apexBold;
    src: url(../fonts/apex-sans-bold-t.ttf);
}

/* Apex Sans Medium */
@font-face {
    font-family: apexMedium;
    src: url(../fonts/apex-sans-med.ttf);
}

/* Apex New Light - successor to Apex Sans */
@font-face {
    font-family: apexLight;
    src: url(../fonts/apex-new-light.otf);
}

/* -------------------------------------*/
/* ----- Main Styling - Full Site ----- */
/* -------------------------------------*/

body {
   color: black;
    margin: 0 auto;
    padding: 0;
    font-family: Apex Sans, sans-serif;
    /*line-height: 1.5;*/
}

a { text-decoration: none; }

a:link, a:visited {
    color: #ec7700;
}

a:hover, a:active {
    color: #ec7700;
}

/* ------------------------------------------- */
/*                   HEADER                    */
/* ------------------------------------------- */

#header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    background: #636466;
    color: #fff;
    margin: 0 auto;
    padding: 0;
    width: 100%;
   /* height: 80px;*/
}


/* ----------------- Logo ------------------ */

#logo {
    display: block;
    position: relative;
    top: 0;
    z-index: 3;
    float: left;
    margin: 15px 30px;
    border: 0;
    width: 147px;
    height: 50px;
}

#logo-mobile-container { display: none; }

#logo-mobile { display: none; }

/* ------------------------------------------- */
/*                   CONTENT                   */
/* ------------------------------------------- */

#container {
    background: #fff;
    padding-top: 100px;
    max-width: 100%;
    min-height: 800px;
    background: transparent;
}

#download-container {
    background: #fff;
    padding-top: 100px;
    max-width: 100%;
    min-height: 800px;
    background: transparent;
}

.webgl_content_wrap {
    margin: 0 auto;
    width: 1000px;
    height: 700px;
}

.wrapped_iframe {
    width: 980px;
    height: 662px;
    border: 0;
}

.end { padding-bottom: 50px;}

/* ------------------------------------------- */
/*                   Footer                    */
/* ------------------------------------------- */

#footer {
    position: fixed;
    bottom: 0;
    z-index: 2;
    margin-top:100px;
    margin: 0 auto;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 10pt;
    text-align: center;
    min-height: 25px;
    line-height: 1;
    width: 100%;
    color:white;
}

#footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
    color: #fff;
}

#footer-content {
    display: flex;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    align-content: center
}

.footer-item, .footer-item-end {
    float: left;
    border-right: 1px dotted #fff;
    padding: 0 20px;
    list-style: none;
    color: fff;
}

.footer-item img { width: 15px; height: 10px;}

.footer-item-end { border-right: 0;         color:black; }

.address { display: block; }

.address2 { display: none; }


/* --------------------------------------------------- */
/*        For screens smaller than 950 pixels         */
/* --------------------------------------------------- */

@media only screen and (max-width: 950px) {
    
    /* ---------- HEADER (MOBILE) --------------- */
    
    #header {
        position: fixed;
        z-index: 4;
        height: 100px;
    }
    
    #logo { display: none; }
    
    #logo-mobile-container {
        display: flex;
        position: fixed;
        z-index: 3;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        align-content: flex-end;
        width: 100%;
    }
    
    #logo-mobile {
        display: block;
        background: #636466;
        margin: 0 100px;
        padding-top: 15px;
        padding-bottom: 15px;
        text-align: center;
        width: 147px;
        height: 80px;
    }
    
    #menu-icon {
        display: block;
        clear: both;
        margin: 0 auto;
        margin-top: -15px;
        text-align: center;
        width: 100%;
    }
    
    /* ----------------------------- FOOTER (MOBILE) ------------------------- */
    
    #footer-content {
        display: flex;
        margin: 0 auto;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        align-content: center;
    }
    
    .footer-item, .footer-item-end {
        float: left;
        border: 0;
        padding: 5px 20px;
        list-style: none;
        font-size: 10pt;
        width: 45%;
    }
    
    .address { display: none; }
    
    .address2 {
        display: block;
        line-height: 1.5;
    }
}

/* ------------------------------------------------------------- */
/*        For screens smaller than 800 pixels and mobile         */
/* ------------------------------------------------------------- */

@media only screen and (max-width: 800px) {
    
    /* ----------------- FOOTER (MOBILE - SMALLER) ---------------- */
    
    .footer-item, .footer-item-end {
        float: left;
        padding: 5px 20px;
        list-style: none;
        font-size: 10pt;
        width: 100%;
    }
    
    .end { padding-bottom: 150px; }
        
    .stretch { position: relative; }
}