/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : Jul 29, 2023, 8:51:00 AM
    Author     : ebelloma
*/
:root {
    --MAX_DISPLAY_SIZE: 1480px;
}

html,body {
    margin: 0px; padding: 0px;
    z-index: 1;
}
html {
    height: 100%;
}
body {
    color: black; background-color: white;
    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+ */
}
input[type=text], input[type=password], textarea {
    box-sizing: border-box;
}

#HEADER {
    height: 60px;
    position: fixed; width: 100%; top: 0px; z-index: 3;
    color: white; background-color: black; 
    
    box-shadow: 0px 2px 4px grey;
}
#HEADER_main {
    height: inherit;

    margin: 0px auto;
    max-width: var(--MAX_DISPLAY_SIZE);
}

#FOOTER {
    position: relative; width: 100%;
    color: white; background-color: black;
}
#FOOTER_main {
    /*left: 50%; transform: translateX(-50%);*/
    font-size: .9em;
    margin: 0px auto;
    max-width: var(--MAX_DISPLAY_SIZE);
}

#CONTENT {
    padding-top: 60px;
    margin: 0px auto;
    max-width: var(--MAX_DISPLAY_SIZE);
    position: relative;
    
    min-height: 80vh;
}
#CONTENT .content {
    padding-left: 16px; padding-right: 16px; padding-bottom: 16px;
}

@media all and (min-width: 1px) and (max-width: 600px) {
    #CONTENT .w3-flex.w3-flex-quarter {
        flex: 1 1 25%; min-width: 100%;
    }
    #CONTENT .w3-flex.w3-flex-half {
        flex: 1 1 50%; min-width: 100%;
    }
    .no_mobile { display: none !important }
}
@media all and (min-width: 601px) and (max-width: 900px) {
    #CONTENT .w3-flex.w3-flex-quarter {
        flex: 1 1 25%; min-width: 50%;
    }
    #CONTENT .w3-flex.w3-flex-half {
        flex: 1 1 50%; min-width: 100%;
    }
}
@media all and (min-width: 901px) {
    #CONTENT .w3-flex.w3-flex-quarter {
        flex: 1 1 25%;
    }
    #CONTENT .w3-flex.w3-flex-half {
        flex: 1 1 50%;
    }
}