* {
    font-family: Arial;
    padding: 0px;
    margin: 0px;
}

body {
    background-color: #CBCBCB;
}

#page {
    min-height: 100%;
}

#background {
    background-image: url('/img/background.jpg');
    background-repeat: repeat-x;
    background-size: auto;
    background-color: #CBCBCB;
    background-position: center;
    width: 100%;
    min-height: 100%;
}

#main {
    min-height: 100%;
    margin: auto;
    background-color: white;
    background-repeat: no-repeat;
    width: 80%;
}

#headlogo {
    background-image: url('/img/logo-color.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    height: 120px;
    width: 100%;
}

#menubar {
    text-align: center;
    height: 50px;
    width: 100%;
    background-color: #297BB3;
    background-repeat: repeat-x;
}

.menubutton {
    text-decoration: none;
    cursor: pointer;
    color: white;
    line-height: 3;
    display: inline-block;
    height: 50px;
    padding-left: 8px;
    padding-right: 8px;
    transition-duration: 0.2s;
    transition-timing-function: linear;
}

.menubutton:hover {
    /* background-color: rgba(52, 52, 52, 0.7); */
    background-color: #7962A8;
}

#dropdown {
    display: inline-block;
    margin: 0;
    padding: 0;
}

#submenu {
    display: none;
    color: white;
    text-align: left;
    position: absolute;
    background-color: #297BB3;
    width: 200px;
    min-height: 5px;
}

.subbutton {
    color: white;
    text-decoration: none;
    cursor: pointer;
    display: block;
    padding: 5px;
    width: 100%;
    transition-duration: 0.2s;
    transition-timing-function: linear;
}

.subbutton:hover {
    background-color: #7962A8;
}

#dropdown:hover #submenu {
    display: block;
}
#header {
    max-width: 100%;
}
#mob {
    display: none;
    text-align: left;
    width: 100%;
    height: 50px;
}

@media screen and (max-width: 1000px) {
    
    #header {
        position: fixed;
        width: 100%;
    }
    
    #menubar {
        height: 70px;
    }
    
    #pc {
        display: none;
    }
    
    #mob {
        display: block;
    }
    
    #headlogo {
        display: none;
    }
    
    #main {
        width: 100%;
    }
    
    #page {
        min-height: 100%;
        padding-top: 70px;
    }
}
.menuicon {
    margin: 5px;
    height: 60px;
    width: 40px;
    display: inline-block;
}

#mobilemenu {
    z-index: 9999;
    overflow-y: auto;
    display: none;
    text-align: left;
    color: white;
    min-width: 60%;
    height: 100%;
    max-width: 100%;
    position: fixed;
    top: 70;
    left: 0;
    background-color: rgba(9, 174, 193, 0.88);
}
.mob_menubutton {
    text-decoration: none;
    color: white;
    display: block;
    padding: 15px;
    font-size: 25px;
}

.mob_menubutton:hover {
    /*background-color: rgba(41, 123, 179, 0.8);    */
}

.mob_submenu {
    display: none;
}

.mob_dropdown:hover #mob_submenu {
    /* display: block; */
}
.mob_subbutton {
    display: block;
    text-decoration: none;
    color: white;
    background-color: rgba(41, 123, 179, 0.8);  
    padding: 10px;
    padding-left: 30px;
    font-size: 20px;
    
}

.mob_subbutton:hover {
    background-color: rgba(74, 74, 74, 0.53);     
}
#page {
    min-height: 100%;
    padding-left: 5px;
    padding-right: 5px;
    color: #2c2c2c;
}

.submenuicon {
    width: 20px;
    height: 20px;
    display: inline-block;
    rotation-point:50% 50%;
    rotation: 0deg;
}

.banner {
    margin: 0px;
    padding: 0px;
    display: block;
    width: 100%;
    
}

#headerlogobackground {
    background-image: url('/img/blurbanner.png');
    background-size: cover;
}