@font-face {
    font-family: "Hel Regular";
    src: url("/Styles/fonts/Helvetica-Neue.woff");
}

@font-face {
    font-family: "Hel Bold";
    src: url("/Styles/fonts/Helvetica-Neue-Bold.woff");
}

@font-face {
    font-family: "Hel Light";
    src: url("/Styles/fonts/HelveticaNeueLTStd-Lt.woff");
}


:root 
{
    --yellow: #ffd511;
}

img {
    max-width: 100%;
}


.default-cont 
{
    position: relative;
    width: 100%;
    max-width: 1235px;
    margin: 0 auto;
    /*padding: 0 40px;*/
    box-sizing: border-box;
}


/*Header*/

.header-grid 
{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    border-bottom: 3px solid #575757;
}

.burger, .close-burger 
{
    display: none;
}

.header-left 
{
    grid-column: span 2;
}

.header-left img 
{
    width: 150px;
    margin-left: 35px;
    padding: 20px;
}

.mainmenu 
{
    grid-column: span 5;
    max-height: 90px;
    margin-left: 20px;
}

.mainmenu ul.navigation 
{
    display: flex;
    clear: both;
    /* display: inline-block; */
    /*overflow: hidden;*/
    white-space: nowrap;
}

.mainmenu ul.navigation li 
{
    height: 45px;
    width: 90%;
    line-height: 118px;
    border-bottom: 5px solid transparent;
    /*background: #ddd;*/
    display: block;
    text-align: center;
    background-clip: padding-box;
    padding-bottom: 49px;
}
.mainmenu ul.navigation li:hover 
{
    border-bottom: 5px solid var(--yellow);
}

ul.navigation li a 
{
    text-decoration: none;
    font-size: 13px;
    font-family: "Hel Light";
}



ul.navigation li a:hover 
{
    opacity: 0.75;
    color: black;
}

div.mainmenu ul.navigation li.subnav
{
    position: relative;
}

div.subnav ul.subcat {
    display: none;
    position: absolute;
    display: none;
    height: 0px;
    z-index: 5000
}

.subcat li a {
    color: #ffffff;
}

.mainmenu li.subnav:hover div.subnav ul.subcat {
    display: block;
    height: auto;
    background: grey;
    z-index: 4000;
    min-width: 100%;
    top: 89px;
}

div.mainmenu ul.navigation li.subnav:hover 
{
    background-image: url(/images/Polygon.svg);
    background-position: bottom;
    background-repeat: no-repeat;
}

.mainmenu div.subnav ul.subcat li 
{
    height: 20px;
    line-height: 20px;
   padding: 7px 0px;
    width: 100%;
    border-bottom: 1px solid white;
}


    .mainmenu div.subnav ul.subcat li a:hover {
        color: #ffd511;
        opacity: 1.0;
    }
   
.mainmenu div.subnav ul.subcat li:hover 
{
    border-bottom: 1px solid white;
}

.header-right 
{
    grid-column: span 5;
}
div.search 
{
    position: relative;
    width: 225px;
    margin-top: 15px;
    margin-left: 20px;
}

div.search form
{
    border: 1px solid #666666;
}

div.search form input 
{
    border: none;
}

.header-right .menu .search .searchicon {
    padding: 9px;
}


div.searchicon {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    background: #575757;
    padding: 8px;
    color: white;
}

div.searchicon:hover
{
    background: var(--yellow);
}

.header-right .menu 
{
    display: flex;
}

.header-right .login 
{
    display: flex;
}

.header-right .logo 
{
    margin-top: 15px;
}

.header-right a 
{
    text-decoration: none;
    font-family: "Hel Regular";
    color: black;
    display: grid;
    font-size: 12px;
    padding: 5px 15px;
}

.header-right a:hover 
{
    color: var(--yellow);
}

.header-right svg,
.header-right .fas {
    text-align: center;
    font-size: 20px;
    margin: 0 auto;
}

/*Search*/

span.ui-helper-hidden-accessible {
    display: none;
}

li.sayt-product-content span.sayt-content {
    cursor: pointer;
    display: inline-block;
    margin-top: 10px;
}

li.sayt-product-content img {
    max-width: 40px;
    float: left;
    margin-right: 10px;
}

span.ui-product-header {
    border-bottom: 1px solid var(--yellow);
    display: block;
    margin-left: 25px;
    margin-right: 25px;
    font-weight: bold;
    line-height: 26px;
}

ul.ui-menu li.ui-menu-item:first-child span.sayt-content {
    color: black;
    font-size: 18px;
    margin-top: 10px;
    cursor: pointer;
}

ul.ui-menu {
    background-color: #ffffff;
    position: absolute !important;
    padding-top: 10px;
    border: 1px solid var(--yellow);
}

.blendedSearchMain {
    margin-top: 30px;
}

.blendedSearchMain h3,
.blendedSearchMain h4
{
    font-family: "Hel Bold";
}
.blendedSearchMain label,
.search-facet ul li a {
    font-family: "Hel Regular";
}
.searchResults 
{
    margin-top: 30px;
}


/*Default Page*/
.whatsnew-hero {
    background-image: url("/images/whatsnew.jpg");
    position: relative;
    height: 410px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 30px;
}

.whatsnew-text 
{
    position: absolute;
    left: 5%;
    top: 8%;
}

.whatsnew-text h2 
{
    font-family: "Hel Regular";
    font-size: 39px;
    color: black;
    margin-bottom: 40px;
    font-weight: bold;
}

.apparel-ess
{
    background-image: url("/images/apparel.jpg");
    position: relative;
    height: 200px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 35px;
    text-align: center;
}
.apparel-ess h2
{
    padding-top: 7px;
    font-family: "Hel Regular";
    font-size: 39px;
    color: white;
    margin-bottom: 30px;
    font-weight: bold;
}

/*Employee Panel Section*/

.card-background 
{
    position: relative;
    background: black;
    height: 285px;
    margin-top: 80px;
}

.card-background img 
{
     max-width: 650px;
    margin-top: -133px;
    position: absolute;
    left: -8%;
}

.card-background .card-txt
{
    position: absolute;
    top: 20%;
    left: 51%;
}

.card-txt p, .card-txt a {
    color: white;
    font-family: 'Hel Regular';
}

.card-background h1 
{
    font-family: 'Hel Regular';
    font-size: 44px;
    color: white;
}

.gifsection
{
    margin-top: 45px;
}

.gif,
.shop 
{
    position: relative;
}
.gif img 
{
    background: var(--yellow);
    max-height: 430px;
}

.giftxt 
{
    position: absolute;
    top: 85%;
    left: 31%;
}
.shoptxt 
{
    position: absolute;
    top: 15%;
    left: 8%;
    text-align: center;
    font-family: "Hel Regular"
}
/*Custom*/

.wackercustom 
{
    background-image: url('/images/wacker_custom.jpg');
    height: 285px;
    margin-top: 25px;
    position: relative;
}

.customtxt 
{
    position: absolute;
    left: 45%;
    top: 10%;
}
.customtxt h2 
{
    font-family: "Hel Regular";
    font-size: 44px;
}
.customtxt p 
{
    margin-bottom: 2rem;
    font-family: "Hel Regular"
}

/*Footer*/

.footerborder 
{
    
    border-top: 2px solid #575757;
    margin-top: 25px;
}

.footer 
{
  
    margin-top: 25px;
    margin-bottom: 25px;
}

.footer h3 
{
    font-family: "Hel Bold";
    font-size: 16px;
    margin-bottom: 1rem;
}

.footer ul.navigation li
{
    float: left;
    display: inline-block;
    vertical-align: top;
    width: 50%;
}
.footer ul.navigation li a 
{
    color: black;
    font-size: 15px;
    text-decoration: none;
    font-family: "Hel Regular";
}

.footer .icon
{
    color: black;
    display: flex;
    font-family: "Hel Regular";
    padding: 5px 0px;
}

p.icon-txt
{
    margin-left: 10px;
}
.footer a 
{
    text-decoration: none;
}

.logos a:hover 
{
   color: black;
}

.logos 
{
    margin-bottom: 20px;
}
.logos .fab,
.logos .far
{
    font-size: 26px;
}

.madewithlove div.search 
{
    margin-left: 0px;
    margin-bottom: 20px;
}

.logos svg 
{
    font-size: 26px;
}

/*Category*/

.catheader 
{
    position: relative;
    margin-top: 35px;
}

.catheader h1 {
    font-family: "Hel Regular";
    font-size: 48px;
    padding-top: 40px;
    margin-left: 54px;
    position: absolute;
    color: white;
}

.category-background {
    background: url('/images/wacker_category_banner.jpg');
    position: relative;
    height: 150px;
    background-repeat: no-repeat;
    margin-top: 35px;
}
.category-background h1 
{
    font-family: "Hel Regular";
    font-size: 48px;
    padding-top: 40px;
    margin-left: 54px;
}

div.sortby select 
{
    border: 1px solid black;
    font-family: "Hel Regular";
}


div.prodcrumbs,
div.sortby
{
    margin-top: 20px;
}
div.prodcrumbs a 
{
    text-decoration: none;
    font-family: "Hel Regular";
}

.category .product:nth-child(5n+1) {
    clear: left;
    margin-left: 6%;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 25px;
}


.category .product,
.featured-grid .featProd
{
    position: relative;
}

.category .product .details:after,
.featured-grid .featProd .details:after {
    content: '';
    display: block;
    border-bottom: 3px solid var(--yellow);
    width: 0;
    position: absolute;
    left: 0;
    -webkit-transition: .3s ease;
    transition: .3s ease;
}
.category .product:hover .details:after,
.featured-grid .featProd:hover .details:after {
    width: 100%
}

.category .product .details p.sku,
.featured-grid .featProd .details p.sku {
    font-family: "Hel Regular";
    color: #54565a;
    font-size: 12px;
    text-decoration: none;
}

.featProd .details a 
{
    text-decoration: none;
}

.category .product .details p.name a,
.featured-grid .featProd .details p.name a {
    text-decoration: none;
    color: black;
    font-family: "Hel Bold";
    font-size: 14px;
}

.category .product p.price,
.featured-grid .featProd p.price {
    color: black;
    font-family: "Hel Bold";
    font-size: 20px;
    margin-top: 12px;
}




    h1.carthead {
        text-align: center;
        font-family: "Hel Bold";
    }

 
.related .category .product .details p.name 
{
    font-family: "Hel Bold";
}
.related h3 
{
    font-family: "Hel Regular";
    font-size: 32px;
    margin-bottom: 10px;
}

.related hr {
    margin-top: 0px;
    width: 30%;
    margin-left: 0px;
    border-top: 6px solid var(--yellow);
}


/*Product*/
.prodcont 
{
    margin-top: 35px;
}

.titleWrapper {
    margin-bottom: 30px;
    border-left: 3px solid var(--yellow);
}

h1.prod-title 
{
    font-family: "Hel Regular";
    font-size: 32px;
    color: black;
    margin-bottom: 0px;
    display: inline-block;
    margin-left: 10px;
}
h3.sku {
    font-size: 16px;
    color: #5e5e5e;
    font-family: "Hel Regular";
    margin-bottom: 0px;
    margin-left: 10px;
    display: inline-block;
}
.prodwrapper .details 
{
    margin-bottom: 30px;
}
.prodwrapper .details .price span {
    color: black;
    font-family: "Hel Bold";
    font-size: 25px;
}

div.prodopts {
    width: 192px;
}


.productImage p 
{
    font-family: "Hel Regular";
}
div.prodopts strong 
{
    font-family: "Hel Bold";
}

div.quantities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin-top: 10px;
    border-top: 1px solid #d1d1d1;
    padding-top: 15px;
    margin-bottom: 30px;
}
.qtyopt {
    display: flex;
}
div.qtyopt span {
    font-family: 'Hel Regular';
    margin: auto 0;
}
span.option {
    text-align: center;
    width: 36px;
    font-size: 13px;
}
div.qtyopt input {
    width: 50px;
    border: 1px solid #c8c8c8;
    margin-left: 50px;
}

div.description 
{
    margin-top: 15px;
}

div.description p {
    color: black;
    font-family: "Hel Bold";
}

div.description ul {
    list-style-type: square;
    margin-left: 4%;
}
div.description ul li 
{
    font-family: "Hel Regular";
}

div.productorder 
{
    margin-top: 20px;
}

div.gallery {
    display: flex;
    text-align: center;
}

/*Cart*/

.delayship 
{
    font-family: 'Hel Bold';
    padding-bottom: 30px;
}
.delayship p 
{
    text-align: center;
}

div.carthead {
    border-bottom: 2px solid var(--yellow);
    height: 25px;
}

div.carthead strong 
{
    font-family: "Hel Bold";
}

.carttable .row {
    margin-top: 25px;
    border-bottom: 2px solid var(--yellow);
    padding: 15px 0px;
}

.iteminfo span.cartProdName a {
    text-decoration: none;
}

.row span {
    font-family: "Hel Regular";
    color: rgba(0,0,0,0.75);
}



div.qty {
    text-align: center;
}

div.liveqty {
    text-align: left;
    padding: 10px 0px;
    font-family: "Hel Bold";
}
div.qty input {
    width: 45px;
}

div.removeBtn {
    float: right;
    text-align: right;
}

.cartfooter {
    margin-top: 15px;
}

.cartfooter .labels p {
    color: black;
    font-family: "Hel Bold";
}

.cartfooter .values span {
    color: black;
    font-family: "Hel Regular";
}

div.cartbuttons {
    margin-top: 65px;
    text-align: right;
}
div.cartbuttons input 
{
    margin-right: 30px;
}

div.cartbuttons a, div.removeBtn a {
    float: right;
    clear: right;
    width: 145px;
}

/*No Cart*/

div.gift 
{
    margin-top: 20px;
}

.emptyCartBackground 
{
    background: var(--yellow);
    border-radius: 50%;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.emptyCart
{
    text-align: center;
}

.emptyCart h3
{
    color: var(--lightblue);
    font-size: 35px;
    font-family: "Hel Bold";
    margin-top: 5px;
    margin-bottom: 10px;
}

.emptyCart p
{
    font-family: "Hel Bold";
    color: #54585a;
    font-size: 17px;
}

.emptyCartBackground img
{
    margin-top: 11%;
}


/*Checkout Info*/


.addresses h2 
{
    text-align: center;
    font-family: "Hel Regular";
}

div.addr
{
    text-align: center;
}

div.addr label
{
    display: inline-block;
    font-family: "Hel Bold";
}

.logCorpCardP 
{
    font-family: "Hel Bold";
    padding-bottom: 10px;
}

div.express-addr {
    margin-top: 30px;
}
div.express-addr .address .formElement label 
{
    margin-left: 0px;
}

.continue {
    text-align: center;
}

.formElement span.ui-helper-hidden-accessible 
{
    display: none;
}

table.shopts 
{
    margin: 0 auto;
    margin-bottom: 20px;
}
table.shopts tbody tr td 
{
    display: inline-flex;
    font-family: "Hel Regular";
}

/*Summary*/
.checkout h2 {
    font-family: "Hel Bold";
    text-align: center;
}

table.cartTable 
{
    width: 100%;
}

table.cartTable tr.cartHeader 
{
    border-bottom: 1px solid var(--yellow);
}

.cartWrapper table tbody tr th {
    font-family: "Hel Bold";
}

table.cartTable td {
    display: table-cell;
    float: none;
    line-height: 36px;
    height: 36px;
    vertical-align: middle;
    text-align: center;
    padding-bottom: 5px;
    padding-top: 5px;
    font-family: "Hel Regular";
}

div.checkout table.cartTable tr.cartFooter {
    border-top: 1px solid var(--lightblue);
}

.payment .row a {
    font-family: "Hel Regular";
}

table.payment 
{
    margin: 0 auto;
}

td.po-col {
    padding-right: 10px;
    font-family: "Hel Regular";
}

.payment span.radio
{
    display: inline-flex;
}

.checkout .address 
{
    /*margin-top: 30px;*/
}

.checkout .addressSummary h2 
{
    text-align: left;
    font-family: 30px;
}

div.addressSummary .formElement label {
    margin-left: 0px;
}

div.same strong 
{
    font-family: "Hel Regular";
}

/*Confirmation*/
div.confirm {
    margin-bottom: 30px;
}

    div.confirm h3 {
        font-family: "Hel Regular";
        text-align: center;
    }

    div.confirm table {
        margin: 0 auto;
    }

    div.confirm p {
        text-align: center;
    }


/*Cart Breadcrumbs*/

div.breadcrumb {
    text-align: center;
    min-height: 85px;
}

div.breadcrumb ol {
    list-style: none;
    counter-reset: item;
    margin-top: 25px;
}

div.breadcrumb ol li {
    display: inline-block;
    counter-increment: item;
    margin-bottom: 5px;
    padding-top: 50px;
    position: relative;
    text-align: center;
    width: 100px;
    vertical-align: top;
    margin-left: 25px;
    margin-right: 25px;
    font-weight: bold;
    font-size: 13px;
    line-height: 15px;
    color: #acafb0;
    font-family: 'Hel Bold';
}

div.breadcrumb ol li:after {
    content: counter(item);
    border-radius: 100%;
    background-color: #ffffff;
    border: 3px solid #d1d1d1;
    color: #d1d1d1;
    width: 40px;
    height: 40px;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%,0);
}

div.breadcrumb ol li.active, div.breadcrumb ol li.check, div.breadcrumb ol li.active a, div.breadcrumb ol li.check a {
    color:black;
    text-decoration: none;
    font-family: 'Hel Bold';
}

div.breadcrumb ol li.active {
    color: var(--green);
}

div.breadcrumb ol li:nth-child(n+2)::before {
    content: '';
    border-top: 3px solid #d1d1d1;
    position: absolute;
    width: 100px;
    height: 1px;
    left: -50px;
    top: 22px;
    transform: translate(-27px,0);
    color: var(--lightblue);
}

div.breadcrumb ol li.active:before, div.breadcrumb ol li.check:before {
    border-top: 3px solid black;
}

div.breadcrumb ol li.active:after {
    border: 3px solid black;
    color: black;
}

div.breadcrumb ol li.check:after {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-size: 30px;
    font-weight: 900;
    text-decoration: inherit;
    border: 3px solid black;
    background-color: black;
    font-size: 28px;
    color: #ffffff;
}


/*Hidden on Desktop*/

.mobile-search-icon,
.mobile-cart,
div.mainmenu div.mobilenav,
div.mainmenu ul.moreNav {
    display: none;
}

div.login a.mobile-account,
div.login a.mobile-logout
{
    display: none;
}
/*Modal*/
div.custom-modal {
    display: none;
    position: fixed;
    z-index: 500;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    border-radius: 24px;
}

div.modal-content {
    position: fixed;
    width: 420px;
    background-color: white;
    left: 50%;
    top: 50%;
    max-height: 90%;
    transform: translate(-50%, -50%);
    text-align: center;
    overflow: auto;
}

div.modal-content form {
    margin-left: 10%;
    margin-right: 10%;
    padding-bottom: 6%;
}

.modal-content img {
    text-align: center;
    width: 250px;
    margin-bottom: 20px;
}

span.close-modal {
    display: flex;
    flex-direction: row-reverse;
    font-size: 38px;
    padding-top: 10px;
    padding-right: 25px;
}
span.close-modal:hover 
{
    cursor: pointer;
}
.modal-content h2 
{
    font-family: "Hel Bold";
    font-size: 23px;
}
.modal-content p 
{
    font-family: "Hel Regular";
    font-size: 16px;
}
.modal-content .custom-modal-form .formElement input,
.modal-content .custom-modal-form .formElement label,
.modal-content .custom-modal-form .formElement textarea {
    font-family: "Hel Light";
    font-size: 13px;
}

/*Login Page*/

.login-container {
    width: 375px;
    margin: 0 auto;
    padding: 30px;
    height: 530px;
    margin-top: 25px;
    text-align: center;
    margin-bottom: 50px;
}

.login-container h1 {
    font-family: "Hel Bold";
    font-size: 30px;
}
table.login {
    margin: 0 auto;
}

table.login td {
    display: flex;
    flex-direction: column;
}

table.login td.fields input {
    width: 250px;
    font-family: "Hel Regular";
}

/*Account Page*/

h1.account {
    color: black;
    padding-top: 25px;
    text-align: center;
    font-family: "Hel Bold";
}

.accountheader {
    text-align: center;
    margin-top: 20px;
    padding-bottom: 20px;
}

.accountheader a {
    font-family: "Hel Regular";
    padding: 20px;
    text-decoration: none;
}

    .accountheader a.active {
        text-decoration: underline;
        text-decoration-color: var(--yellow);
    }

table.accountform {
    margin: 0 auto;
}

    table.accountform .buttons {
        text-align: center;
    }

    table.accountform .formElement input {
        width: 120%;
    }
/*Order History*/

table.orders th {
    background-color: #000000;
    color: white;
    font-size: 16px;
    border: 1px solid #dedede;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    vertical-align: middle;
    height: 40px;
    font-family: "Hel Regular";
    font-weight: 100;
}

table.orders td {
    vertical-align: middle;
    border: 1px solid #000000;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    height: 40px;
    font-family: "Hel Regular";
}

table.orders tr:nth-child(2n+1) td {
    background-color: #dedede;
    font-family: "Hel Regular";
}

table.orders div.orderview {
    display: none;
    position: fixed;
    background-color: #ffffff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 25px;
    border: 1px solid #888888;
    z-index: 150;
    -webkit-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.5);
    font-family: "Hel Regular";
}

table.orders {
    margin: 0 auto;
    margin-bottom: 25px;
    width: 100%;
    text-align: center;
    font-family: "Hel Bold";
}

table.orders td {
    vertical-align: middle;
    text-align: left;
    padding: 5px;
    border: 1px solid #dedede;
}

table.orders h3 {
    text-align: center;
    font-size: 22px;
    margin-bottom: 0px;
}

table.orders th.subtable span,
table.orders table.t-details td {
    width: 20%;
}

table.orders th.subtable span:first-child,
table.orders table.t-details td:first-child {
    width: 60%;
}

table.orders table tr {
    background-color: #ffffff;
}

table.orders div.o-details,
table.orders div.reorder {
    display: none;
    position: fixed;
    max-width: 85%;
    max-height: 85%;
    min-width: 60%;
    min-height: 50%;
    z-index: 2500;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
}

table.orders a.view-more,
table.orders a.reorder-btn {
    cursor: pointer;
    display: inline-block;
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
}

table.orders table.t-details p {
    margin-bottom: 5px;
}

table.orders a.close {
    font-size: 30px;
    text-decoration: none;
    margin-bottom: 25px;
    margin-right: 5px;
    margin-top: 5px;
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 0px;
}

table.orders div.padding {
    padding: 32px;
}

table.orders table.t-details,
table.orders table.line-items {
    width: 100%;
    margin-bottom: 25px;
}

table.t-details h4 {
    font-size: 19px;
    line-height: 22px;
    margin-bottom: 10px;
    font-weight: bold;
}

table.orders td table.t-details tr {
    background-color: #ffffff;
}

div.overlay {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(84,88,90, 0.7);
    z-index: 2000;
}

/*Ipad*/

@media only screen and (max-device-width: 834px) and (max-device-height: 1194px) {

    div.header {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 500;
        background: white;
    }


    .mainmenu {
        max-height: none;
    }


    .mobile-content {
        margin-top: 150px;
    }

    .mainmenu {
        display: none;
    }

 
    .menu .orderstatus,
    .menu .search {
        display: none;
    }

    a.desktop-account, 
    a.desktop-logout 
    {
        display: none;
    }
    div.login a.mobile-account, 
    div.login a.mobile-logout {
        display: block;
    }


    .burger,
    .mobile-search-icon {
        display: block;
    }

    .header-left {
        grid-column: span 6;
        margin-left: 45px;
        display: flex;
    }

    .burger,
    .close-burger {
        font-size: 55px;
        margin-top: 12px;
    }

    .header-left img {
        width: 249px;
        margin-left: 70px;
        padding: 10px;
    }

    .header-right {
        grid-column: span 6;
        margin-left: 83px;
    }

    .cart {
        display: none;
    }

    div.login 
    {
        display: flex;
    }

    .mobile-cart,
    .mobile-account {
        display: block;
    }


    .header-right .logo {
        font-size: 25px;
        margin-top: 30px;
    }

    .header-right svg {
        font-size: 42px;
    }

    .menu .search {
        position: absolute;
        width: 100%;
        left: 0;
        margin-left: 0px;
        top: 95px;
        z-index: 500;
    }

    .menu .search form {
        background: black;
        padding: 20px;
    }

    .menu .search input {
        width: 98%;
    }

    div.searchicon {
        top: 18px;
        background: none;
        color: black;
        right: 54px;
    }

    .searchicon svg {
        font-size: 28px;
    }

    .mainmenu.open {
        display: block;
        position: fixed;
        top: 111px;
        width: 100%;
        z-index: 500;
        background: #575757;
        margin: 0px;
    }

    .mainmenu ul.navigation {
        display: flex;
        flex-direction: column;
        /*background: #575757;*/
        width: 100%;
        border: none;
    }

    .mainmenu ul.navigation li {
        width: 100%;
        line-height: 70px;
        border-bottom: 1px solid white;
        height: 25px;
    }

    ul.navigation li a {
        color: white;
        font-size: 19px;
        text-decoration: none;
        display: block;
    }

    li.subnav:hover div.subnav {
        display: none;
    }

    li.subnav.open div.subnav,
    li.subnav.open div.subnav ul.subcat,
    li.subcat.open ul.thirdlevel {
        display: block;
        position: relative;
        left: unset;
    }


    /*Modal*/

  


    /*default pg*/

    .whatsnew-text h2 {
        font-size: 33px;
    }

    .gifsection #gif {
        text-align: center;
        width: 100%;
    }

    .giftxt {
        left: 38%;
    }

    #shop {
        width: 100%;
    }

    .wackercustom {
        margin-left: 9%;
    }

    .customtxt {
        left: 56%;
    }

    .customtxt h2 {
        font-size: 22px;
    }

    .customtxt p {
        font-size: 15px;
    }

    .customtxt br {
        display: none;
    }

    .madewithlove div.search form input {
        width: 100px;
    }

    .madewithlove div.search div.searchicon {
        display: none;
    }

    div.search {
        width: 160px;
    }

    .footer {
        display: flex;
        flex-direction: column;
    }

    .footer ul.navigation li {
        padding: 5px;
    }

    .footer .contact,
    .footer .legal,
    .footer .madewithlove {
        margin-left: 0px;
        margin-top: 20px;
    }

    /*Breadcrumbs*/
    div.breadcrumb ol li {
        width: 65px;
    }

    div.breadcrumb ol li:nth-child(n+2)::before {
        width: 70px;
        height: 1px;
        left: -37px;
    }

    .catheader 
    {
       margin-top: 131px;
    }
}



    @media only screen and (max-device-width: 380px) and (max-device-height: 820px) {

        .catheader h1 {
            font-family: "Hel Regular";
            font-size: 27px;
            padding-top: 14px;
            margin-left: 21px;
            position: absolute;
        }

        .header-left 
        {
            grid-column: span 6;
            margin-left: 24px;
        }
        .burger, .close-burger
        {
            font-size: 36px;
        }
        .header-left img
        {
            width: 150px;
            margin-left: 27px;
            margin-top: 11px;
        }
        .header-right 
        {
            margin-left: 55px;
        }
        .header-right svg {
            font-size: 36px;
        }
        .header-right svg, .header-right .fas {
            font-size: 23px;
   
        }
        .header-right a {
            font-size: 12px;
            padding: 5px 5px;
        }


        .header-right .logo {
            margin-top: 22px;
        }
        .menu .search 
        {
            top: 62px;
        }
        div.searchicon 
        {
            top: 29px;
            right: 22px;
        }
        .searchicon svg 
        {
            font-size: 28px;
        }

        .mainmenu.open 
        {
            top: 80px;
        }

        .featured-grid {
            grid-template-columns: 1fr;

        }

        .whatsnew-hero 
        {
            background-position: 71%;
            margin-bottom: 87%;
        }

        .whatsnew-text
        {
            left: 10%;
            text-align: center;
            top: 104%;
        }
        .gifsection
        {
            margin-bottom: 76%;
        }
        .giftxt 
        {
            left: 26%;
            top: 82%
        }
        .shoptxt
        {
            top: 101%;
            left: 16%;
        }

        .card-background
        {
            margin-top: 140px;
        }

        .card-background h1 {
            font-family: 'Hel Regular';
            font-size: 20px;
            color: white;
        }

        .card-background img {
            max-width: 650px;
            margin-top: -133px;
            position: absolute;
            left: -8%;
            width: 376px;
        }


        .card-background .card-txt {
            position: absolute;
            top: 50%;
            left: 27%;
        }

        .wackercustom {
            margin-left: 0px;
            margin-bottom: 62%;
        }
        .customtxt {
            position: absolute;
            left: 1%;
            top: 106%;
            text-align: center;
        }
        .customtxt p 
        {
            display: none;
        }
        .customtxt h2 
        {
            font-size: 41px;
        }

        div.content .breadcrumb li {
            width: 55px;
            margin-left: 0;
            margin-right: 0;
        }

        div.breadcrumb ol li:nth-child(n+2)::before {
            width: 22px;
            height: 1px;
            left: 19px;
        }

        div.breadcrumb ol li.active, div.breadcrumb ol li.check,
        div.breadcrumb ol li.active a, div.breadcrumb ol li.check a {
            font-size: 11px;
        }


        div.carthead 
        {
            display: none;
        }
        div.qty {
            text-align: left;
        }
        span.cSale {
            margin-left: 0px;
        }

        .related hr {
            width: 100%;

        }


    }