@font-face { font-family: "OpenSans"; src: url('/assets/fonts/OpenSans/OpenSans-Regular.ttf'); }
@font-face { font-family: "Roboto"; src: url('/assets/fonts/Roboto/Roboto-Regular.ttf'); }
@font-face { font-family: "Poppins"; src: url('/assets/fonts/Poppins/Poppins-Regular.ttf'); }

html, body { margin: 0; padding: 0; height: 100%}
.container{ min-height: 100%; font-family: 'OpenSans', sans-serif; font-size: 14px; padding-top: 11vh;}

span.red{ color: #e62b1e; }

a.redlink{ text-decoration: none; color: #e62b1e; }
a.redlink:visited{ text-decoration: none; color: #cf2317; }
a.redlink:hover, a.redlink:visited:hover{ text-decoration: underline; color: #e62b1e;}

a.whitelink{ text-decoration: none; color: #fff; }
a.whitelink:visited{ text-decoration: none; color: #bbb; }
a.whitelink:hover, a.whitelink:visited:hover{ text-decoration: underline; color: #fff; }

a.blacklink{ text-decoration: none; color: #000; }
a.blacklink:visited{ text-decoration: none; color: #333; }
a.blacklink:hover, a.blacklink:visited:hover{ text-decoration: underline; color: #000; }

div.header { position: fixed; top: 0px; left: 0px; z-index: 100; margin: 0px; padding: 0px; height: 11vh; background-color: rgb(0,0,0); width: 100%; }
header{ position: absolute; top: 0; padding: 0 0 0 70px; height: 100%; margin: 0, 0; box-shadow: 0px 1px 8px rgba(230, 43, 30, 0.3);}
.logo{ float: left; width: 18%}
.logo>div.brandimage{ line-height:11vh;}
.logo>div.brandimage img{ vertical-align: middle; width: 100%;}
div.nav{ width: 35%; float: right; } 
ul.nav { width: 100%; margin: 0; }

ul.nav>li { display: inline; color: white; font-size: 14px; font-weight: bold; list-style-type: none; line-height: 11vh; margin: 0px; padding: 0px 1.2em; transition: 0.2s color; }
ul.nav>li:hover { color: #ff0000; font-weight: bold; cursor: pointer; transition: 0.2s color; }

ul.nav>li.downarrow:after { content: " \f0d7"; font-family: "Font Awesome 5 Free"; }
ul.nav>li.uparrow:after { content: " \f0d8"; font-family: "Font Awesome 5 Free"; }

ul.nav>li.navbutton{ color: #fff; background-color: #e62b1e; border-radius: 2px; padding: 0.8em 1em; margin-left: 1em; transition: 0.2s background-color; }
ul.nav>li.navbutton:hover{ background-color: #ff0000; transition: 0.2s background-color; }
ul.nav>li.navbutton-black{ color: #fff; background-color: #000; border-radius: 2px; padding: 0.8em 1em; margin-left: 1em;}

ul.collapsable{ display: none; } 
div.collapsable{ display: none; } 

@media only screen and (max-width: 1900px) {
    div.nav{ width: 38%;} 
}

@media only screen and (max-width: 1600px) {
    div.nav{ width: 50%;} 
}
@media only screen and (max-width: 1350px) {
    div.nav{ width: 55%;} 
}
@media only screen and (max-width: 1150px) {
    div.nav{ width: 60% }
    ul.nav>li{
        font-size: 12px;
    }
}
@media only screen and (max-width: 810px) {
    header{ 
        padding: 0;
    }
    ul.nav-desktop{ display: none }
    ul.collapsable{ display: block } 
    .logo{ float: left; width:60%; height: 100%;}
    div.nav{width: 40%;}
    ul.nav>li.nav-menu{ font-size: 45px; color: #fff; background-color: #000;  border: 0.3px solid #aaa; border-radius: 2px; padding: 0.5em 0.8em; margin-left: 45%; }
    ul.nav>li.menu-close{ display: none; font-size: 45px; color: #fff; background-color: #000;  border: 0.5px solid #aaa; border-radius: 2px; padding: 0.5em 0.8em; margin-left: 45%; }
    @keyframes grow-left {
        from {
          transform: scaleY(0);
        }
        to {
          transform: scaleY(1);
        }
    }
    div.collapsable{display: none; position: absolute; top: 11vh; width: 100%; margin: 0; padding: 0; transform: scaleY(0); transform-origin: top; animation: grow-left cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s forwards; animation-delay: 0s;}
    ul.nav-collapsable{ width: 100%; margin: 0; padding: 0;}
    
    ul.nav-collapsable>li { background-color: black; border-bottom: 0.4px solid #aaa; color: white; font-size: 38px; font-weight: bold; list-style-type: none; line-height: 8vh; margin: 0px; padding: 0px 1.2em; transition: 0.2s color; }
    ul.nav-collapsable>li:hover { color: #ff0000; font-weight: bold; cursor: pointer; transition: 0.2s color; }

    ul.nav-collapsable button.lal{ color: #fff; font-size: 38px; background-color: #e62b1e; border: none; border-radius: 7px; padding: 0.8em 1em; margin: 1em 0; transition: 0.2s background-color; }
}
@media only screen and (max-device-width: 800px) {
    header{ 
        padding: 0;
    }
    ul.nav-desktop{ display: none }
    ul.collapsable{ display: block } 
    .logo{ float: left; width:60%; height: 100%;}
    div.nav{width: 40%;}
    ul.nav>li.nav-menu{ font-size: 45px; color: #fff; background-color: #000;  border: 0.3px solid #aaa; border-radius: 2px; padding: 0.5em 0.8em; margin-left: 45%; }
    ul.nav>li.menu-close{ display: none; font-size: 45px; color: #fff; background-color: #000;  border: 0.5px solid #aaa; border-radius: 2px; padding: 0.5em 0.8em; margin-left: 45%; }
    @keyframes grow-left {
        from {
          transform: scaleY(0);
        }
        to {
          transform: scaleY(1);
        }
    }
    div.collapsable{display: none; position: absolute; top: 11vh; width: 100%; margin: 0; padding: 0; transform: scaleY(0); transform-origin: top; animation: grow-left cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s forwards; animation-delay: 0s;}
    ul.nav-collapsable{ width: 100%; margin: 0; padding: 0;}
    
    ul.nav-collapsable>li { background-color: black; border-bottom: 0.4px solid #aaa; color: white; font-size: 38px; font-weight: bold; list-style-type: none; line-height: 8vh; margin: 0px; padding: 0px 1.2em; transition: 0.2s color; }
    ul.nav-collapsable>li:hover { color: #ff0000; font-weight: bold; cursor: pointer; transition: 0.2s color; }

    ul.nav-collapsable button.lal{ color: #fff; font-size: 38px; background-color: #e62b1e; border: none; border-radius: 7px; padding: 0.8em 1em; margin: 1em 0; transition: 0.2s background-color; }
    /* ul.nav-collapsable>button:hover{ background-color: #ff0000; transition: 0.2s background-color; } */
    /* ul.nav-collapsable>button-black{ color: #fff; background-color: #000; border-radius: 2px; padding: 0.8em 1em; margin-left: 1em;} */
     
}