@media(min-width:1025px) {
    .d-hide {
        display: none !important;
    }

    header.navigation .container {
        padding: 0;
    }

    .mainnav {
        display: flex;
        justify-content: space-between;
        width: 61%;
        flex-direction: row;
        align-items: center;
    }

    .mainnav>li>a {
        text-transform: uppercase;
        letter-spacing: .5px;
        color: rgba(68, 68, 68);
        transition: all .2s ease-out;
        padding: 34px 0;
        font-weight: 500;
    }


    .mainnav>li>a:hover,
    .mainnav>li.active>a,
    .mainnav>li.active {
        color: #001d89 !important;
        background-color: transparent !important;
    }

    .navcontainer {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }


    .desk_cat {
        position: fixed;
        top: -1000px;
        left: 0;
        background: #001d89;
        display: block;
        z-index: 1;
        width: 100%;
        padding: 0.5vw 0 1vw;
        overflow: hidden;
        -webkit-transition: top 0.5s ease-in;
        -moz-transition: top 0.5s ease-in;
        -o-transition: top 0.5s ease-in;
        -ms-transition: top 0.5s ease-in;
        transition: top 0.5s ease-in;
    }

    .desk_cat .container {
        display: flex;
        align-items: baseline;
    }

    .nav-container,
    .logo {
        z-index: 99;
    }

/*     header.navigation .logo a,
    .cat_img,
    footer .logo a img {
        transform: scale(1);
        transition: all .2s ease-out;
    }

    header.navigation .logo a:hover,
    footer .logo a:hover img {
        transform: scale(1.15);

    } */
	header.navigation .logo{
		position:relative;
		width:80px;
		height:54.4px;
	}
	header.navigation .logo a{
		display:block;
		position:absolute;
		top:0;
		left:0;
		width:80px;
		transition: all .2s ease-out;
	}
	header.navigation .logo a img{
		width:100%;
		max-width: 100% !important;
	}
	header.navigation .logo a:hover{
		top:-6px;
		left:-6px;
		width:92px;
		height:57px;
	}
	    .cat_img,footer .logo a img {
        transform: scale(1);
        transition: all .2s ease-out;
    }

    footer .logo a:hover img {
        transform: scale(1.15);

    }

    header.navigation.tranp {
        background-color: transparent;
    }

    .mainnav>li:hover .desk_cat {
        display: block;
        top: 86px;
    }

    .mainnav>li {
        position: relative;
    }

    .pro_mega i {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: 0.3s ease-in;
        -moz-transition: 0.3s ease-in;
        -o-transition: 0.3s ease-in;
        -ms-transition: 0.3s ease-in;
        transition: 0.3s ease-in;
        margin-left: 3px;
    }

    .arr_rotate i {
        -ms-transform: rotate(180deg);
        /* IE 9 */
        -webkit-transform: rotate(180deg);
        /* Chrome, Safari, Opera */
        transform: rotate(180deg);
        -webkit-transition: 0.3s ease-in;
        -moz-transition: 0.3s ease-in;
        -o-transition: 0.3s ease-in;
        -ms-transition: 0.3s ease-in;
        transition: 0.3s ease-in;
    }

    .mega_menu {
        top: 80px;
        -webkit-backface-visibility: hidden;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: top 0.5s ease-in;
    }

    header.navigation::before {
        content: "";
        height: 84px;
        background-color: #fff;
        width: 100%;
        position: absolute;
        top: 0;
        z-index: 99;
    }

    .navigation {
        position: relative;
    }

    .navigation .container {
        position: static;
    }

    .desk_cat .container {
        display: flex;
        justify-content: space-between;
        flex-flow: row wrap;
        padding-bottom: 0 !important;
    }

    .desk_cat>ul {
        color: #fff;
        max-width: 270px;
    }

    .main_cat {
        padding: 10px 0;
        margin-right: 5%;
        width: 20%;
        flex: 0 0 20%;
    }

    .main_cat:nth-last-of-type(1) {
        margin-right: -5%;
    }

    .subcategory,
    .category_heading {
        color: #fff;
    }

    .category_heading {
        font-size: 24px;
        font-family: hwt-artz, sans-serif;
        font-weight: 700;
        padding: 0.58em 0 0.2em;
    }

    .category_heading a:hover {
        cursor: default;
    }

    .subcategory {
        font-family: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif;
        text-transform: capitalize;

    }

    .subcategory li a {
        font-size: 1.65rem;
        padding: 0.3em 0;
        display: block;
        white-space: nowrap;
    }

    .subcategory li a:hover {
        text-decoration: underline
    }

    li.cat_img img {
        max-width: 90%;
    }

    .all_pro {
        width: 100%;
        flex: 0 0 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-end;

    }

    .all_pro a {
        font-size: 1.5rem;
        color: #fff;
        font-family: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif;
        display: flex;
        align-items: center;
        text-transform: uppercase;
    }

    .silk_nav-logo {
        width: 5vw;
        padding-top: 0.4vw;
        padding-right: 0.8vw;
    }

    .desk_cat.m-hide {
        padding-bottom: 5.82vw;
    }

    .oaty-nav {
        position: absolute;
        right: 0;
        bottom: 0.3vw;
    }

    .oat_yeah-navimg {
        max-width: 35.06944444444444VW;
    }
}

@media(min-width:1025px) and (max-width:1440px) {
    li.cat_img img {
        max-width: 13.2vw;
    }

    .category_heading {
        font-size: 1.5vw;
        padding: 0.5vw 0 0.2em;
    }

    .subcategory li a {
        font-size: 1vw;
        padding: 0.2vw 0;
    }

    .all_pro a {
        font-size: 1vw;
    }
    .desk_cat.m-hide {
        padding-bottom: 7.2vw;
    }
}

@media(min-width:1025px) and (max-width:1200px) {
    .mainnav {
        width: 67%;
    }

    .desk_cat {
        padding-top: 1vw;
    }

    .mainnav>li>a {
        font-size: 13px;
    }

    .subcategory li a,
    .all_pro a {
        font-size: 1.35rem;
    }

    .category_heading {
        font-size: 18px;
    }
}

@-webkit-keyframes nav-down {
    0% {
        top: 0%;
    }

    100% {
        top: 100%;
    }
}

@-moz-keyframes nav-down {
    0% {
        top: 0%;
    }

    100% {
        top: 100%;
    }
}

@-o-keyframes nav-down {
    0% {
        top: 0%;
    }

    100% {
        top: 100%;
    }
}

@keyframes nav-down {
    0% {
        top: 0%;
    }

    100% {
        top: 100%;
    }
}

@media(max-width:1024px) {
    .m-hide {
        display: none !important;
    }

    #bg_img {
        position: absolute;
        left: 0;
        bottom: 13vw;
        z-index: 9;
        width: 100%;
    }

    #bg_img .oaty-nav,
    #bg_img .oaty-nav a,
    #bg_img .oaty-nav a img {
        display: block;
        width: 100%;
    }

    #mobile-menu {
        width: 100%;
        position: fixed;
        height: 100%;
        top: 55px;
        right: 0;
        display: none;
        overflow-y: auto;
        box-sizing: border-box;
        background: #001d89;
    }

    .mo-category {
        height: 100vh;
    }

    /* #mobile-menu::after{
    content: "";
    background: url(/wp-content/themes/silk/img/hero-splash-top.png) no-repeat;
    background-size: 100%;
    background-position-x: center;
    background-position-y: 89%;
    position: absolute;
    left: 0;
    right: 0;
    height: 50vw;
    width: 100vw;
    bottom: 30px;
} */
    .slide-menu {
        transition: -webkit-transform 300ms ease-in-out;
        transition: transform 300ms ease-in-out;
        transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        will-change: transform;
        z-index: 1000;
    }

    .slide-menu nav {
        max-width: 320px;
        width: 100%;
        margin: auto;
        position: relative;
        text-align: left;
        height: 100vh;
        overflow: hidden;
        font-family: hwt-artz, sans-serif;
        font-weight: 700;
        z-index: 1;
    }

    .slide-menu .slider {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        transition: -webkit-transform 300ms ease-in-out;
        transition: transform 300ms ease-in-out;
        transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        will-change: transform;
    }

    .slide-menu .slider {
        top: 0px;
    }

    .slide-menu .controls {
        overflow: hidden;
    }

    .slide-menu .slide-menu-control {
        font-size: 30px;
        text-transform: uppercase;
        margin-left: -14px;
        font-weight: 600;
        padding: 20px 16px 20px 30px;
        line-height: 1;
        position: relative;
        margin-bottom: 5px;
    }

    li.category-link #searchform input[type="text"] {
        background: transparent;
        padding: 10px;
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.42);
        color: #fff;
        font-size: 16px;
        margin-top: 15px;
    }

    li.category-link #searchform input[type="text"]::placeholder {
        opacity: 0.5;
        color: #fff;
    }

    li.category-link #searchform input[type="text"]::-ms-input-placeholder {
        opacity: 0.5;
        color: #fff;
    }

    li.category-link #searchform input[type="text"]:-ms-input-placeholder {
        opacity: 0.5;
        color: #fff;
    }

    li.category-link #searchform #searchsubmit {
        position: absolute;
        min-width: 0px;
        right: 9px;
        top: 25px;
        font-size: 0;
        background-image: url(/wp-content/themes/silk/img/icon-search-white.png);
        background-repeat: no-repeat;
        width: 10px;
        height: 10px;
        border: none;
        background-position: 50%;
        background-color: transparent;
        background-size: 100%;
        opacity: 0.5;
        padding: 10px;
    }


    li.category-link #searchform {
        position: relative;
        max-width: 90%;
    }

    .slide-menu ul {
        padding-left: 0;
        list-style: none;
        position: relative;
        width: 320px;
        max-width: 100%;
        margin: 0 auto;
    }

    .slide-menu ul ul {
        position: absolute;
        top: 9vw;
        left: 100%;
        display: none;
    }

    ul.mo-category {
        padding: 15vw 23px;
    }

    .slide-menu ul a {
        display: block;
        color: #fff;
        text-decoration: none;
        font-size: 30px;
        padding: 8px 5px;
        opacity: 1;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 2px;
    }

    .slide-menu ul.sub-category li a {
        font-size: 16px;
        padding: 3px 2px;
        opacity: 0.7;
        font-family: Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif;
        text-transform: capitalize;
        font-weight: 500;
        letter-spacing: 1px;
        display: block;
        margin-bottom: 0;
    }

    .slide-menu ul li {
        padding: 5px 15px;
    }

    .slide-menu ul.mo-category>li {
        padding-left: 10px;
        padding-right: 10px;
    }

    .slider[style="transform: translateX(0%)"]~nav::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        background: url(http://dev1.silk.com/wp-content/themes/silk/img/hero-splash-top.png) no-repeat;
        background-size: 100%;
        background-position: center center;
        height: 37vw;
        bottom: 49px;
    }

    .slide-menu ul a:hover {
        color: #fff;
    }

    .slide-menu ul li ul.sub-category li {
        padding: 3px 20px;
    }

    .slide-menu ul a.categorylink:hover,
    .slide-menu ul a.submenu:hover,
    .slide-menu ul a.subsubmenu:hover {
        color: #fff;
    }

    .slide-menu.no-transition,
    .slide-menu.no-transition * {
        transition: none !important;
    }

    .slide-menu ul a.nav_smimg {
        position: relative;
        height: 80px;
        padding: 0;
        padding-left: 88px;
        text-align: left;
        font-size: 19px;
        display: inline-flex;
        align-items: center;
        letter-spacing: 1px;
    }

    .nav_smimg::before {
        width: 68px;
        height: 68px;
        position: absolute;
        left: 12px;
        top: 0;
    }

    .nav_smimg.silk_img::before {
        width: 70px;
        height: 70px;
        position: absolute;
        left: 3px;
        top: 10px;
    }

    .sub-category::before {
        content: "";
        width: 225px;
        height: 250px;
        position: absolute;
        margin: 0 auto;
        top: -255px;
        left: 18px;
    }

    .nav_smimg.palnt_img::before,
    .sub-category.palnt_img::before {
        content: "";
        background: url("/wp-content/themes/silk/img/plant-based-milks_sm.png") no-repeat;
        background-size: 100%;
        background-position: center center;
    }

    .nav_smimg.creamers_img::before,
    .sub-category.creamers_img::before {
        content: "";
        background: url("/wp-content/themes/silk/img/creamers_sm.png") no-repeat;
        background-size: 100%;
        background-position: center center;
    }

    .nav_smimg.yogurt-alternative_img::before,
    .sub-category.yogurt-alternative_img::before {
        content: "";
        background: url("/wp-content/themes/silk/img/soy-milk-yogurt-alt-vanilla-strawberry_sm.png") no-repeat;
        background-size: 100%;
        background-position: center center;
    }

    .nav_smimg.silk-latte_img::before,
    .sub-category.silk-latte_img::before {
        content: "";
        background: url("/wp-content/themes/silk/img/silk-latte_sm.png") no-repeat;
        background-size: 100%;
        background-position: center center;
    }

    .nav_smimg.silk_img::before {
        content: "";
        background: url("/wp-content/themes/silk/img/silk-nav_logo.jpg") no-repeat;
        background-size: 100%;
        background-position: center center;
    }

    ul.sub-category.mnav_active {
        top: 250px;
        margin-top: 0;
    }

    .mo-category>li:first-child>a {
        position: relative;
    }

    .mo-category>li:first-child>a::after {
        content: "\f105";
        position: absolute;
        top: 20%;
        margin: auto 0 0 10px;
        font-size: 20px;
        font-weight: 600;
        color: #fff;
        font-family: Font Awesome\ 5 Free;
        opacity: 0.5;
        line-height: 30px;
    }

    .mo-category>li>.category>li:first-child>a::before {
        content: "\f104";
        position: absolute;
        margin: auto 0 0 1rem;
        font-size: 2.5rem;
        font-weight: 600;
        color: #fff;
        font-family: Font Awesome\ 5 Free;
        left: 0;
        opacity: 0.5;
    }

    .slide-menu ul.sub-category li a.slide-menu-control[data-action="back"]::before {
        content: "\f104";
        position: absolute;
        /* top: 0; */
        margin: auto 0 0 0;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        font-family: Font Awesome\ 5 Free;
        left: -13px;
        opacity: 0.5;
        line-height: 20px;
    }

    .mo-category>li>.mnav_active>li:first-child>a::before {
        content: "\f104";
        position: absolute;
        /* top: 33%; */
        margin: auto 0 0 1rem;
        font-size: 18px;
        font-weight: 600;
        color: #fff;
        font-family: Font Awesome\ 5 Free;
        left: 0;
        opacity: 0.5;
        line-height: 30px;
    }

    .mo-category>li>.mnav_active>li>a.submenu::after {
        content: "\f105";
        position: absolute;
        /* top: 23%; */
        margin: auto 0 0 1rem;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        font-family: Font Awesome\ 5 Free;
        right: -13px;
        opacity: 0.5;
        line-height: 20px;
    }

    .slide-menu ul.sub-category li a.slide-menu-control {
        padding-left: 0;
        opacity: 1;
        font-family: hwt-artz, sans-serif;
        font-weight: 700;
        font-size: 20px;
        margin-left: 0;
    }
	#bg_img.show {
                display: block;
            }

            #bg_img {
                display: none;
            }
}
@media(max-width:380px){
    #bg_img {
        bottom: 17vw;
    }
}
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (orientation: portrait)
	and (-webkit-min-device-pixel-ratio: 2){
	ul.mo-category {
    padding-top: 5vw;
}
	.slide-menu ul ul{
		 padding-top: 0vw;
	}
	.slide-menu .slide-menu-control {
    padding: 10px 16px 10px 30px;
    margin-bottom: 0;
}
	.slide-menu ul li {
    padding: 5px 15px;
}
	.slide-menu ul a.nav_smimg {   
    height: 63px;
}
	.nav_smimg::before {
    width: 65px;
    height: 65px;
}
}
@media(max-width:375px){
    
    .slide-menu ul ul {
        top: 4vw;
    }

    .slide-menu ul li {
        padding: 2px 15px;
    }

    .slide-menu ul a.nav_smimg {
        height: 65px;
    }

    .nav_smimg::before {
        width: 65px;
        height: 65px;
    }

    .slide-menu .slide-menu-control {
        padding: 10px 16px 10px 30px;
    }

    ul.sub-category.mnav_active {
        top: 195px;
    }

    .sub-category::before {
        content: "";
        width: 192px;
        height: 187px;
        position: absolute;
        margin: 0 auto;
        top: -190px;
        left: 18px;
    }
}

@media(max-width:330px) {
    ul.mo-category {
        padding: 10vw 23px;
    }

    .slide-menu ul a,
    .slide-menu .slide-menu-control {
        font-size: 20px;
        padding-left: 15px;
    }

    .slide-menu ul,
    .slide-menu nav {
        width: 250px;
    }

    .slide-menu ul a.nav_smimg {
        height: 55px;
        padding-left: 60px;
        font-size: 15px;
    }

    .nav_smimg::before {
        width: 47px;
        height: 50px;
        left: 0;
    }

    .nav_smimg.silk_img::before {
        width: 45px;
        height: 45px;
    }

    .slide-menu ul ul {
        top: 8vw;
    }

    li.category-link #searchform {
        position: relative;
        max-width: 87%;
        margin: 0 auto;
    }

    .mo-category>li>.mnav_active>li:first-child>a::before {
        line-height: 20px;
        margin: auto 0 0 0px;
        font-size: 15px;
    }

    .sub-category::before {
        content: "";
        width: 155px;
        height: 155px;
        position: absolute;
        margin: 0 auto;
        top: -160px;
        left: 18px;
    }

    ul.sub-category.mnav_active {
        top: 156px;
    }

    .slide-menu ul li ul.sub-category li {
        padding: 1px 20px;
    }

    .slide-menu ul.sub-category li a {
        font-size: 13px;
    }

    .mo-category>li:first-child>a::after {
        line-height: 20px;
        margin: auto 0 0 5px;
        font-size: 15px;
    }

    li.category-link #searchform input[type="text"] {
        font-size: 14px;
        margin-top: 10px;
    }

    li.category-link #searchform #searchsubmit {
        top: 20px;
        padding: 8px;
    }

    .slide-menu ul.sub-category li a.slide-menu-control {
        font-size: 16px;
    }

    .mo-category>li>.mnav_active>li>a.submenu::after,
    .slide-menu ul.sub-category li a.slide-menu-control[data-action="back"]::before {
        font-size: 14px;
        line-height: 18px;
    }
}

@media(min-width:768px) and (max-width:1024px) {
    ul.mo-category {
        padding: 10vw 0vw;
    }

    #mobile-menu {
        top: 86px;
    }

    .slide-menu nav {
        max-width: 450px;
    }

    .slide-menu ul {
        width: 450px;
    }

    .slide-menu ul a {
        font-size: 40px;
        padding: 10px;
    }

    .mo-category>li:first-child>a::after {
        content: "\f105";
        position: absolute;
        top: 25%;
        margin: auto 0 0 1rem;
        font-size: 30px;
        font-weight: 600;
        color: #fff;
        font-family: Font Awesome\ 5 Free;
        opacity: 0.5;
    }

    li.category-link #searchform input[type="text"] {
        padding: 15px;
        border: 2px solid rgba(255, 255, 255, 0.42);
        font-size: 24px;
        margin-top: 15px;
    }

    li.category-link #searchform #searchsubmit {
        width: 50px;
        right: 15px;
        top: 32px;
        width: 25px;
        height: 25px;
    }

    .slide-menu .slide-menu-control {
        font-size: 40px;
        padding: 30px 24px 40px 40px;
        margin-bottom: 0;
    }

    .mo-category>li>.mnav_active>li:first-child>a::before {
        content: "\f104";
        position: absolute;
        /* top: 33%; */
        margin: auto 0 0 1rem;
        font-size: 30px;
        font-weight: 600;
        color: #fff;
        font-family: Font Awesome\ 5 Free;
        left: 0;
        opacity: 0.5;
    }

    .slide-menu ul a.nav_smimg {
        height: 120px;
        padding-left: 130px;
        font-size: 30px;
    }

    .nav_smimg::before {
        width: 110px;
        height: 120px;
        position: absolute;
        left: 0;
        top: 0;
    }

    .nav_smimg.silk_img::before {
        width: 100px;
        height: 100px;
        position: absolute;
        left: -5px;
        top: 10px;
    }

    .mo-category>li>.mnav_active>li>a.submenu::after {
        content: "\f105";
        position: absolute;
        /* top: 23%; */
        margin: auto 0 0 1rem;
        font-size: 24px;
        font-weight: 600;
        color: #fff;
        font-family: Font Awesome\ 5 Free;
        right: -20px;
        opacity: 0.5;
    }

    .sub-category::before {
        content: "";
        width: 350px;
        height: 350px;
        position: absolute;
        margin: 0 auto;
        top: -390px;
        left: 0;
    }

    .slide-menu ul li ul.sub-category li {
        padding: 5px 10px;
    }

    ul.sub-category.mnav_active {
        top: 400px;
        margin-top: 0;
        padding: 0 24px;
    }

    .slide-menu ul.sub-category li a.slide-menu-control {
        font-size: 30px;
    }

    .slide-menu ul.sub-category li a {
        font-size: 22px;
    }

    .slide-menu ul.sub-category li a.slide-menu-control[data-action="back"]::before {
        content: "\f104";
        position: absolute;
        /* top: 0; */
        margin: auto 0 0 0;
        font-size: 24px;
        font-weight: 600;
        color: #fff;
        font-family: Font Awesome\ 5 Free;
        left: -24px;
        opacity: 0.5;
        line-height: 28px;
    }
}