/* ===============================
** TOP ROW MENU AND HAMBURGER
================================== */


button:focus {outline:0;}  /* Avoid blue selector on button */

.menu-wrapper {
    background-color: transparent;
    height: 60px;
    padding: 0px;
    position: relative;
}

.menu-left {
    background-color: transparent;
    position: relative;
    float: left;
    overflow: hidden;
    height: 54px;
    width: 100%;
}
.menu-left-child {
    position: relative;
    float: left;
    overflow: hidden;
    height:54px;
}

.menu-right {
    float: right;
    height: 100%;
    width: 60%;
    background-color: transparent;
}

.menu-right-child {
    float: right;
    height: 100%;
    background-color: transparent;
    width: calc(100% - 54px);
}

.menu-right-hamburger-wrapper {
    width: 54px;
    height: 54px;
    float: right;
}

.menu-search-box {
    float: right;
    height:54px;
    width: 100%;
}


.menu-elements {
    padding:10px 15px;
}

.far-left-element {
    padding-left: 8px;
}
.far-right-element {
    padding-right: 0px;
}

.menu-text {
    background-color: transparent;
    border: none;
    padding:2px 0px;
    margin:0px 0px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
}



.main-menu-wrapper  {
    position:absolute;
    width:100%;
    height: 100%;
    padding: 90px 45px 70px;
    z-index: 9;
    top:0px;
    right:0px;
    background-color: var(--col-main-l3);
    border: 0px solid black;
    border-bottom: 0px solid var(--col-main-l2);
    display:none;
}

.main-menu-child {
    background-color: var(--col-main-l3);
    width: calc(100% - 90px);
    height: calc(100% - 160px);
    position: relative;;
    padding: 0px;
    margin: 0px;
    z-index: 9;
    border: 0px solid green;
    float:right;
}



/* ===============================
** PRODUCT SELECTION AND FILTERING
================================== */

div.product-discovery-top-row {
    position: relative;
    padding-top: 8px;
    width: 100%;
    margin: 0px;
}


div.filter-section{
    background-color: transparent;
    border: 1px solid var(--col-main-l2);
    margin:10px 10px 30px 0px;
    padding:10px 0px 10px 16px;
    border-radius: 3px;
    position:relative;
}

.menu-padding-margin {
    margin: 0px 30px 0px 0px;
    padding: 0px;
    width: calc(100% - 40px);
}

.menu-heading {
    position: relative;
    height: 40px;
    width: 100%;
    margin: 0px 0px 0px 0px ;
}

.menu-heading-border {
    border-bottom: 2px solid rgb(120,120,120);
}

.menu-sub-heading {
    position: relative;
    height: 30px;
    width: 100%;
    padding: 20px 0px 0px 0px ;
    margin: 10px 0px 0px 0px ;
}

.menu-content {
    position: relative;
    height: 30px;
    width: 100%;
}

.border-top {
    border-top: 1px solid rgb(160,160,160);
}

.level-1 {margin-left:0px}
.level-2 {margin-left:20px}
.level-3 {margin-left:40px}


.slow-transition {
    transition-duration: 0.2s;
}

.start-hidden{display:none;}

.filter-font {
    cursor: pointer;
}


#mobile-button-to-hide-filters {
    position: fixed;
    background-color: var(--col-brand);
    bottom:0px;
    left:0px;
    width:100%;
    height: 65px;
    z-index: 6;
}

#mobile-button-to-show-filters {
    position: relative;
    width:100%;
    height: 45px;
    background-color: var(--col-brand);
}


/* ===============================
** PRODUCT SERACH BOX
================================== */

div.product-search-wrapper {
    height:54px;
    width: 100%;
}


div.product-search-input {
    float:left;
    width: calc(100% - 60px);
    height:48px;
    padding: 0px;
    margin: 0px;
    border: 3px solid #239B56;
}

input.product-search-input {
    height:48px;
    border: 0px solid transparent;
    width: calc(100%);
    background-color: transparent;
    padding-left: 10px;
    font-size: 1.2em;
    color:black;
    margin:0px;
}

.product-search-button {
    background-color: #239B56;
    border: 3px solid #239B56;
    border: none;
    color: white;
    padding: 0px;
    margin: 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    border-radius: 0px;
    -webkit-appearance: none; /* Avoid strange look on iPhone */
    width: 54px;
    height:54px;
    font-size: 1.2em;
}


/* ===============================
** CHANGE CSS FOR SMALL SCREENS
================================== */

/* VIEWPORT WIDTH: 576
/* ======================================*/
@media (max-width: 768px) {
    .menu-left {width: 100%;background-color: transparent}
    .menu-right {width: 100%;background-color: transparent}
    /*.menu-wrapper{height: 108px;}*/
}