/* 
    Created on : Jul 16, 2023, 10:28:48 AM
    Author     : ebelloma
*/

:root {
    --MAX_DISPLAY_SIZE: 1280px;
}

html,body {
    margin: 0px; padding: 0px;
    /*z-index: 1;*/
    font-size: 18px;
}
html {
    height: 100%;
    min-width: 250px; overflow: auto;
}
body {
    /*font-family: "Open Sans", sans-serif;*/
    /*font-family: "Verdana", sans-serif;*/
    word-spacing: normal; letter-spacing: normal;
}
html body * {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
/* OVERRIDES */
input[type=text], input[type=password], textarea {
    box-sizing: border-box;
}
h1,h2,h3,h4,ul {
    margin: 0px;
    /*font-family: 'Open Sans';*/
}
h1 {
    font-size: 1.7em;
    line-height: 1.7em;
}
h2 {
    font-size: 1.5em;
    line-height: 1.5em;
}
h3 {
    font-size: 1.3em;
    line-height: 1.3em;
}
h4 {
    font-size: 1.1em;
    line-height: 1.1em;
}
/* OVERRIDES [END] */

#HEADER {
    /*height: 59px;*/
    position: sticky; width: 100%; top: 0px;
    z-index: 100;
}
#HEADER img {
    max-height: 80px;
}
#HEADER_main {
    /*left: 50%; transform: translateX(-50%);*/
    /*position: sticky; width: 100%; top: 0px;*/
    margin: 0px auto;
    max-width: var(--MAX_DISPLAY_SIZE);
    position: relative;
}
#BANNER {
    margin: 0px auto;
    max-width: var(--MAX_DISPLAY_SIZE);
}

#FOOTER {
    min-height: 2.0em; width: 100%;
    /*
    position: fixed; bottom: 0px; width: 100%;
    height: 1.0em;
    z-index: 100;
    */
}

#FOOTER_main {
    margin: 0px auto;
    max-width: var(--MAX_DISPLAY_SIZE);
    font-size: .95em;
    position: relative;
    height: inherit;
}

#CONTENT {
    margin: 0px auto;
    max-width: var(--MAX_DISPLAY_SIZE);
    /*min-height: 60vh;*/
    padding-bottom: 1.0em;
}

@media all and (min-width: 1px) and (max-width: 424px) { /*Mobile*/
    #HEADER {
        height: 80px;
    }
    #CONTENT,#FOOTER {
        font-size: .8em;
    }
    .no_mobile { display: none !important }
}
@media all and (min-width: 425px) and (max-width: 601px) { /*Tablet*/
    #HEADER {
        height: 80px;
    }
    #CONTENT,#FOOTER {
        font-size: .9em;
    }
}
@media all and (min-width: 602px) and (max-width: 992px) { /*Laptop*/
    #HEADER {
        height: 120px;
    }
    #CONTENT,#FOOTER {
        font-size: .9em;
    }
}
@media all and (min-width: 993px) { /*Desktop*/
    #HEADER {
        height: 120px;
    }
    #CONTENT,#FOOTER {
        font-size: 1.0em;
    }
}