/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
@media (max-width: 1366px) {
    .container {
        width:1300px;
        max-width: 100%;
    }
    #wrapper{
        min-height: 500px;
    }
}


.top-menu .sub-menu ul[data-depth="1"]>li {
  float: left;
  margin: 0 1.25rem;
}


@media screen and (min-width: 768px) { /* stop subcategory depth at 2 for desktop, but allow mobile to expand accordingly */
       .top-menu .sub-menu ul > li ul {
        display:none;
    }
    
     .top-menu .sub-menu ul > li:hover ul {
        display:block;
    }

    .top-menu .sub-menu ul > li ul {
        z-index:9999;
        position:absolute;
        left:190px;
        margin-top:-30px;
        border:2px;
        background-color:white;
       
    }
     .top-menu .sub-menu ul ul > li {
                top:0px;
                width:180px;
                 background-color:#b1b9c1;
                 border:2px;
                 border-top-color:red;
                 padding-left:15px;
                margin:1px;
     }
}

.top-menu .sub-menu ul[data-depth="1"]>li{float:none;} /* removes left justification */
.top-menu .sub-menu {width: auto; min-width: auto;} /* removes full active area width from subcategory dropdown width */
.popover {left: unset;} /* removes the forcing of dropdown to left of page active area lets dropdowns align with top nav */


.block-categories .collapse-icons {right: -30px;}
#subcategories {
    margin-bottom: 20px;
    border-top: 1px solid #f6f6f6;
    display: none;
}
.block-category {
    display:none;
}
#wrapper {
    padding-top:0px;
    background: #e7dddd4d;
    padding-bottom: 6rem;
}

#header, #header .header-top {
    background-color: #c4d3e1;
}



#footer {
    padding-top: 0; 
    /*clear: both; //prevents floating elements from right/left of footer
    position: relative; //Positions footer relative to other elements on hte page
    z-index: 1; //z-index positions elements in front or behind eachother, most have a //natual z-index of -1
    height: -3em; //exactly what it says...
    margin-top: 30em; //moves footer to bottom of all elements
    */
}

body {
    font-family: Manrope, sans-serif;
    font-size: 1rem;
    line-height: 1.25em;
    /*background-color: #5bc0de52;*/
}

.footer-container {
    overflow: hidden;
    background-color: #c4d3e1;
    text-color: #7a7a7a;
}

#header .logo {
    max-width: 200%;
    height: auto;
}
#header a:hover{
    color: #f1f1f1;
    text-decoration: none;

}
.top-menu[data-depth="1"] {
    margin: .625rem;
    background-color: #b1b9c1;
}