#qodef-page-header{
    /*display: none;*/
}

#dunker_core_woo_dropdown_cart-2,
#search-3{
    display: none !important
}

/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/

#title{
    width: 100%;
    padding-bottom: 2.5vw;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 2.5vw;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.15vw;
}

#main{
    width: 100%;   
    height: 110vw;
}
.frame{
    width: 100%;
    height: 100% !important;
    top: 0;
    left: 0;
    background-color: white;
}
 #main #styles{
    z-index: 1;
    padding: 0 10vw;
 }
 #main #catalog{
    z-index: -1;
    height: auto !important;
 }


/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/

#main #styles .top{
    width: 100%;
    height: 35%;
    margin-bottom: 1vw;
}
#main #styles .middle{
    width: 100%;
    height: 30%;
    padding: 0 0.75vw;
    margin-bottom: 1vw;
} 
#main #styles .bottom{
    width: 100%;
    height: 30%;
} 

#main #styles .top .style,
#main #styles .bottom .style{
    width: 48%;
    height: 100%;
    margin: 0 1%;
    overflow: hidden;
    border: 0.1vw solid lightgrey;
    cursor: pointer;
}
#main #styles .middle .style{
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    overflow: hidden;
    border: 0.1vw solid lightgrey;
    cursor: pointer;
}



#main #styles .top .style .view,
#main #styles .middle .style .view,
#main #styles .bottom .style .view{
    width: 100%;
    height: auto;
    bottom: 0;
    left: 0;
    padding: 0.75vw 1.5vw;
    background-color: white;
    color: black;
    font-size: 1vw;
    font-weight: bold;
    justify-content: left;
    z-index: -1;
}
#main #styles .top .style .view:hover,
#main #styles .middle .style .view:hover,
#main #styles .bottom .style .view:hover{
    background-color: black;
    color: white;
}



#main #styles .top .style .image,
#main #styles .middle .style .image,
#main #styles .bottom .style .image{
    width: 100%;
    height: 100%;
    overflow: hidden;

}

#main #styles .top .style .image img,
#main #styles .middle .style .image img,
#main #styles .bottom .style .image img{
    width: 100%;
    max-width: none;
    z-index: 2;
}

#main #styles .top .style:hover .image,
#main #styles .middle .style:hover .image,
#main #styles .bottom .style:hover .image{
    transform: translateY(-3vw);
}



#main #styles .top #h .image img {
    width: auto;
    height: 100%;
    left: -25%;
}
#main #styles .top #d .image img {
    width: auto;
    height: 110%;
    top: -5%;
    left: -30%;
}


#main #styles .middle #x .image img {
    width: auto;
    height: 166%;
    top: -27%;
    left: -6%;
}


#main #styles .bottom #v .image img {
    width: auto;
    height: 160%;
    left: -77%;
    top: -49%;
}
#main #styles .bottom #n .image img {
    width: auto;
    height: 180%;
    left: -114%;
    top: -80%;
}




#main #styles .top .style .image .overlay,
#main #styles .middle .style .image .overlay,
#main #styles .bottom .style .image .overlay{
    width: 100%;
    height: 100%;   
    background-color: transparent;
    font-family: "Gochi Hand", Sans-serif;
    font-size: 6vw;
    font-weight: bold;
    letter-spacing: 0.1vw;
    color: white;
    opacity: 1;
    z-index: 100;
}

#main #styles .top .style:hover .image .overlay,
#main #styles .middle .style:hover .image .overlay,
#main #styles .bottom .style:hover .image .overlay{
    opacity: 1;
    background: rgb(20 20 20 / 33%);
    font-size: 6.5vw;
}


#main #styles .top .style .image .title,
#main #styles .middle .style .image .title,
#main #styles .bottom .style .image .title{
    width: auto;
    height: auto;
    bottom: 0;
    padding: 1vw;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.1vw;
    font-weight: bold;
    letter-spacing: 0.1vw;
    color: white;
    z-index: 100;
    display: none;
}


#main #styles .top #h .image .title{
    left: 0;
}
#main #styles .top #d .image .title{
    right: 0;
}


#main #styles .middle #x .image .title{
    width: 100% !important;
    text-align: center;
}

#main #styles .bottom #v .image .title{
    left: 0;
}
#main #styles .bottom #n .image .title{
    right: 0;
}

#main #styles .top .style:hover .image .title,
#main #styles .middle .style:hover .image .title,
#main #styles .bottom .style:hover .image .title{
    opacity: 0;
}


/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/

.slider .slide {
    height: 30vw;
}
.product .image img {
    height: 80%;
}
.product .shopping,
.product .more {
    display: none !important;
}


/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/


#main #catalog .slider{
    display: none;
}










/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////// MOBILE STYLE ///////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////*/



@media (max-width: 991px) and (orientation: portrait) {



    #main {
        height: 675vw;
    }
    .frame {
        height: auto;
    }
    #main #styles {
        z-index: 1;
        padding: 0 2vw;
    }


    #main #styles .top,
    #main #styles .middle,
    #main #styles .bottom {
        width: 100%;
        height: auto;
        padding: 0;
        margin-bottom: 0;
    }


    #main #style{
        height: auto;
    }
    #main #styles .top .style, 
    #main #styles .middle .style,
    #main #styles .bottom .style {
        width: 100%;
        height: 130vw;
        margin: 0;
        margin-bottom: 5vw;
    }




    #main #styles .top .style .image .overlay,
    #main #styles .middle .style .image .overlay,
    #main #styles .bottom .style .image .overlay{
        font-size: 16vw;
    }


    #main #styles .top .style:hover .image .overlay, 
    #main #styles .middle .style:hover .image .overlay, 
    #main #styles .bottom .style:hover .image .overlay {
        font-size: 16.5vw;
    }


    #main #styles .top .style .image,
    #main #styles .middle .style .image,
    #main #styles .bottom .style .image,
    #main #styles .top .style:hover .image,
    #main #styles .middle .style:hover .image,
    #main #styles .bottom .style:hover .image{
        transform: translateY(-9vw);
    }

    #main #styles .top .style .view, 
    #main #styles .middle .style .view, 
    #main #styles .bottom .style .view {
        padding: 2.5vw 0;
        font-size: 4vw;
        justify-content: center;
    }


    #main #styles .top #h .image img {
        width: auto;
        height: 100%;
        left: -39%;
    }
    #main #styles .top #d .image img {
        width: auto;
        height: 110%;
        top: -5%;
        left: -62%;
    }


    #main #styles .middle #x .image img {
        width: auto;
        height: 120%;
        top: 7%;
        left: -83%;
    }

    #main #styles .bottom #v .image img {
        width: auto;
        height: 150%;
        left: -108%;
        top: -40%;
    }
    #main #styles .bottom #n .image img {
        width: auto;
        height: 150%;
        left: -34%;
        top: -50%;
    }




}