/* 
    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;*/
    background-color:whitesmoke !important;
}
html {
    height: 100%;
    min-width: 250px; overflow: auto;
}
body {
    font-family: "Open Sans", sans-serif; /* Helvetica */
    word-spacing: normal; letter-spacing: normal;
    font-size: 16px;
}
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.8em;
    line-height: 1.8em;
}
h2 {
    font-size: 1.6em;
    line-height: 1.6em;
}
h3 {
    font-size: 1.4em;
    line-height: 1.4em;
}
h4 {
    font-size: 1.2em;
    line-height: 1.2em;
}
/* OVERRIDES [END] */

#HEADER {
    /*height: 59px;*/
    position: sticky; width: 100%; top: 0px;
    z-index: 999;
    /*box-shadow: 0px 2px 2px lightgrey;*/
}
#HEADER_main {
    /*left: 50%; transform: translateX(-50%);*/
    position: sticky; width: 100%; top: 0px;
    margin: 0px auto;
    max-width: var(--MAX_DISPLAY_SIZE);
    font-size: 1.1em;
    position: relative;
}

#FOOTER {
    min-height: 2.0em;
    /*position: fixed; bottom: 0px; width: 100%;*/
    z-index: 999;
}
#FOOTER_main {
    margin: 0px auto;
    max-width: var(--MAX_DISPLAY_SIZE);
    font-size: .9em; line-height: 2.0em;
}

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

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