.side-nav .engine-5-menu a,.sv-cta { text-transform: uppercase; font-weight: 700 } .side-nav,.sv-cta { top: 50%; transform: translate(0,-50%); position: fixed } #sv-mobile,.side-nav,.sv-cta,.sv-trigger,.sv_overlay { position: fixed } .side-nav.sv-full .sv-hover-close,.sv-widget { display: none } .side-nav { -webkit-transition: right .4s cubic-bezier(.25, .46, .45, .94); -moz-transition: right .4s cubic-bezier(.25, .46, .45, .94); -o-transition: right .4s cubic-bezier(.25, .46, .45, .94); -ms-transition: right .4s cubic-bezier(.25, .46, .45, .94); transition: right .4s cubic-bezier(.25, .46, .45, .94); display: inline-block; right: -240px!important; font-size: 20px; width: 300px; padding: 20px 0; z-index: -1 } .side-nav .engine-5-menu li,.side-nav .engine-5-menu li a,.side-nav .engine-5-menu li a i:before,.side-nav .engine-5-menu li.sv_li-option i:before { -webkit-transition: .3s cubic-bezier(0, 0, .2, 1); -moz-transition: .3s cubic-bezier(0, 0, .2, 1); -o-transition: .3s cubic-bezier(0, 0, .2, 1); -ms-transition: .3s cubic-bezier(0, 0, .2, 1); transition: .3s cubic-bezier(0, 0, .2, 1) } .side-nav .engine-5-menu li { position: relative; float: none; border: 1px solid #fff; } .side-nav .engine-5-menu li.sv_li-option a:hover,.side-nav .engine-5-menu li.sv_li-option a:hover i:before { background-color: #c70020 } .side-nav .engine-5-menu li.sv_li-option i:before { position: relative; display: flex; justify-content: center; align-items: center; width: 50px; height: 45px; text-align: cente; font-size: 24px!important; t;color: #fff; border-right: 0; background-color: #c70020; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; transition: .3s cubic-bezier(0, 0, .2, 1) } .side-nav .engine-5-menu li.sv_li-option .dock-link.sv-item-fixed i:before,.sv-cta:hover { background-color: #000 } .side-nav .engine-5-menu li.sv_li-option .dock-link,.side-nav .engine-5-menu li.sv_li-option .dock-link>span { position: relative; display: flex; width: 100%; height: 100%; align-items: center; color: #fff; letter-spacing: 1.5px; text-transform: uppercase; font-size: 15px; font-weight: 700; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer } .side-nav .engine-5-menu li.sv_li-option .dock-link { background-color: #c70020; border-radius: 15px 0 0 15px; border: 0 } .side-nav .engine-5-menu { position: relative } .side-nav.sv-full .engine-5-menu { background-color: #c70020; /* border-radius:15px 0 0 15px; */ /* box-shadow:rgb(144 144 144) 0 0 4px; */ /* padding:30px; */ } .side-nav .engine-5-menu li a { background-color: #c70020; } .side-nav .engine-5-menu li.sv_li-option a:hover span { color: #fff } .side-nav .engine-5-menu li:focus a,.side-nav .engine-5-menu li:hover a { text-decoration: none; color: #fff; background-color: #c70121 } .side-nav .engine-5-menu a { display: flex; align-items: center; letter-spacing: 1.5px; position: relative; color: #fff; font-size: 15px; padding: 0; border: 0 } .side-nav .engine-5-menu .dock-link:focus,.side-nav .engine-5-menu .dock-link:hover { text-decoration: none } .side-nav .engine-5-menu li .dock-link:hover i:before,.side-nav .engine-5-menu li:hover a i:before { color: #000!important } .side-nav .engine-5-menu .dock-link i { margin-right: 10px; background-color: #c70020; position: relative } .side-nav .engine-5-menu .dock-link i:before { position: relative; display: flex; justify-content: center; align-items: center; width: 50px; height: 45px; text-align: center; font-size: 24px; color: #ffffff !important; } .sv-cta { display: block; background-color: #ac0c33; border-radius: 5px 0 0 5px; box-shadow: 0 0 3px rgb(0 0 0 / .8); border: 2px solid #fff; color: #fff; height: 140px; padding: 0 8px; text-align: center; writing-mode: vertical-lr; left: 0; -webkit-transition: left .1s ease-in-out .3s,background-color .1s ease-in-out; -moz-transition: left .1s ease-in-out .3s,background-color .1s ease-in-out; -o-transition: left .1s ease-in-out .3s,background-color .1s ease-in-out; -ms-transition: left .1s ease-in-out .3s,background-color .1s ease-in-out; transition: left .1s ease-in-out .3s,background-color .1s ease-in-out; cursor: pointer } #sv-mbl-btn i,.sv-hover-close { transform: translate(-50%,-50%); top: 50% } .sv-hover,.sv-item-hover:hover { left: unset!important; right: 0!important } .side-nav.sv-item { -webkit-transition: right .4s ease-in-out; -moz-transition: right .4s ease-in-out; -o-transition: right .4s ease-in-out; -ms-transition: right .4s ease-in-out; transition: right .4s ease-in-out } .side-nav.sv-item .engine-5-menu li { box-shadow: none; -webkit-transition: .4s cubic-bezier(.4, 0, .2, 1); -moz-transition: .4s cubic-bezier(.4, 0, .2, 1); -o-transition: .4s cubic-bezier(.4, 0, .2, 1); -ms-transition: .4s cubic-bezier(.4, 0, .2, 1); transition: .4s cubic-bezier(.4, 0, .2, 1) } .side-nav.sv-item .engine-5-menu li:first-child { padding-bottom: 1px } .side-nav.sv-item .engine-5-menu li a { z-index: 999; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; transition: .3s cubic-bezier(0, 0, .2, 1) } .side-nav.sv-item .engine-5-menu a { box-shadow: 0 0 0 1px #fff; border: none } .side-nav.sv-item>div.sv-hover-close { width: 100%; left: 50%; height: 40px } .side-nav.sv-item>div.sv-hover-close:first-child { top: -20px } .side-nav.sv-item>div.sv-hover-close:last-child { top: 103.5% } .side-nav.sv-item>div.sv-hover-close:first-child,.side-nav.sv-item>div.sv-hover-close:last-child { width: 113%; left: 128px } .side-nav.sv-item>.sv-hover-close.lrg { position: absolute; width: 40px; height: 100%; top: 0; left: -42px; transform: none!important } .side-nav .engine-5-menu li.sv_li-option .dock-link.sv-item-fixed,.side-nav.sv-item .dock-link.hover,.side-nav.sv-item.m-hover .dock-link:hover,.sv-item-hover:hover .engine-5-menu li:hover { right: 0!important } .side-nav .engine-5-menu li.sv_li-option .dock-link.sv-item-fixed,.side-nav.sv-item .engine-5-menu li.sv_li-option .dock-link.sv-item-fixed { right: -250px!important; opacity: .5; background-color: #000!important } .side-nav .engine-5-menu li.sv_li-option .dock-link.sv-item-fixed>span { cursor: default!important; color: #fff } .side-nav .engine-5-menu li.sv_li-option .dock-link.sv-item-fixed:hover i,.side-nav .engine-5-menu li.sv_li-option .dock-link.sv-item-fixed:hover i:before,.side-nav.sv-item .engine-5-menu li.sv_li-option .dock-link.sv-item-fixed:hover i,.side-nav.sv-item .engine-5-menu li.sv_li-option .dock-link.sv-item-fixed:hover i:before { background-color: #000!important } .side-nav .engine-5-menu li.sv_li-option .dock-link.sv-item-fixed i,.side-nav.sv-item .engine-5-menu li.sv_li-option .dock-link.sv-item-fixed i { cursor: default!important } .side-nav.sv-full .wl-b_wishlistbasket .w-btn_icon .badge-pill,.side-nav.sv-item .engine-5-menu li.sv_li-option .wl-b_wishlistbasket .w-btn_icon .badge-pill { top: 4px; left: 4px } #sv-mobile { left: 10px; bottom: 20px; height: 0; z-index: 998 } #sv-mobile-wrapper { position: absolute; left: 0; bottom: 0; z-index: 999; background-color: #cc000f; display: none; padding: 6px; border-radius: 5px; border: 2px solid #fff; box-shadow: 2px 2px 4px rgba(0,0,0,.6); -moz-box-shadow: 2px 2px 4px rgba(0,0,0,.6); -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.6); -o-box-shadow: 2px 2px 4px rgba(0,0,0,.6) } #sv-mobile-wrapper i:before { font-size: 25px; color: #fff } #sv-mbl-close:before { font-size: 30px!important } #sv-mbl-btn { display: block; flex-direction: column; position: relative; width: 35px; height: 35px } #sv-mbl-btn i { position: absolute; left: 50%; -webkit-transition: opacity .2s!important; -moz-transition: opacity .2s!important; -o-transition: opacity .2s!important; transition: opacity .2s!important } .sv-hidden { visibility: hidden; display: none } .sv-hidden .widget-wishlist-basket { line-height: 0; font-size: 0px; height: 0 } .sv-hidden .widget-wishlist-basket #vs-wishlist-icon { padding: 0; border: 0; line-height: 0 } .sv-hidden .widget-wishlist-basket #vs-wishlist-icon span.badge.badge-pill.badge-light,.widget-wishlist-basket #vs-wishlist-icon i.fas.fa-heart { padding: 0!important; line-height: 0; font-size: .1px } .sv-hover-close { position: fixed; height: 100%; width: 50px; left: 8%; z-index: 997 } .sv-trigger { top: 50%; transform: translate(0,-50%); display: flex; justify-content: flex-end; align-items: center; right: 44px; z-index: 998 } .sv-item-hover:hover { max-width: 100%!important } .sv-item-hover:hover .engine-5-menu li { -webkit-transition: right .2s ease-in-out; -moz-transition: right .2s ease-in-out; -o-transition: right .2s ease-in-out; -ms-transition: right .2s ease-in-out; transition: right .2s ease-in-out } #sv-mbl-btn.open #sv-mbl-close,#sv-mbl-open,.sv-show { opacity: 1 } .notransition_full,.notransition_item { -webkit-transition: right,opacity .5s ease-in-out!important; -moz-transition: right,opacity .5s ease-in-out!important; -o-transition: right,opacity .5s ease-in-out!important; -ms-transition: right,opacity .5s ease-in-out!important; transition: right,opacity .5s ease-in-out!important } #sv-mbl-btn.open #sv-mbl-open,#sv-mbl-close { opacity: 0 } .wishlist-btn { display: inline-flex; border-radius: 5px; cursor: pointer } .wishlist-btn .w-btn_icon { position: relative; margin-right: 5px; font-size: 17px; color: #ed1b24 } .wishlist-btn .w-btn_icon .badge-pill,.wl-b_wishlistbasket .w-btn_icon .badge-pill { font-size: 10.5px; position: absolute; font-family: haval,Arial,sans-serif; font-weight: 600; top: -4px; left: -8px; display: flex; justify-content: center; text-align: center; height: 8px; width: 8px; line-height: 0; padding: 8px; border-radius: 50%; color: #c70020!important; background-color: #fff; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; transition: .3s cubic-bezier(0, 0, .2, 1) } .wishlist-btn .w-btn_copy { font-size: 14px; color: #fff } .side-nav.sv-item .wl-b_wishlistbasket .w-btn_icon .badge-pill { top: -6px; left: -8px } @media only screen and (max-width: 1400px) { #sv-mobile-wrapper { display:flex } .sv-cta { display: none!important } .side-nav .sv-hover-close { display: none } .side-nav .engine-5-menu { background-color: #fff } .side-nav .wl-b_wishlistbasket .w-btn_icon .badge-pill { top: 4px; left: 4px } } @media (max-width: 1366px) { .side-nav { right:-300px!important } .side-nav.open { width: 300px; right: 0!important } } @media only screen and (min-width: 960px) { .side-nav.sv-item .engine-5-menu li a { right:-250px } } @media only screen and (max-width: 767px) { .side-nav { width:260px } .side-nav .engine-5-menu .dock-link,.side-nav .engine-5-menu li.sv_li-option .dock-link>span { font-size: 12.5px } .side-nav .engine-5-menu li { height: 36px } .side-nav .engine-5-menu li.sv_li-option i:before { width: 45px; height: 35px; font-size: 18px!important } .side-nav .engine-5-menu .dock-link i:before { width: 45px; height: 35px; padding: 10px; font-size: 18px } .side-nav .wl-b_wishlistbasket .w-btn_icon .badge-pill { top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%,-50%); font-size: 12px; padding: 12px } } .sv_overlay { width: 100vw; height: 100vh; margin: 0; padding: 0; left: 0; z-index: -1; display: none } .sv_overlay.view-active { display: block; z-index: 996 } #fc_frame,#fc_frame.fc-widget-normal { right: 0!important; bottom: 10px!important } .okewa-pulse_3,div#okewa-floating_cta { bottom: 20px!important } .side-nav .engine-5-menu li:hover a i { background-color: #ccc; color: #fff } @media only screen and (max-width: 834px) { .side-nav { right:-300px!important } } @media only screen and (max-width: 1365px) { .side-nav { width:auto } .side-nav.open { width: 300px; right: 0!important } }.side-nav li { padding: 6px; }.side-nav .engine-5-menu li:hover, .side-nav .engine-5-menu li:hover a { background-color: #ccc; color: #000; } .side-nav .engine-5-menu li.sv_li-option:hover .dock-link { background-color: #ccc; } .side-nav .engine-5-menu li.sv_li-option:hover i:before { background-color: #ccc !important; color: #000 !important; }.side-nav .engine-5-menu li.sv_li-option:hover .dock-link, .side-nav .engine-5-menu li.sv_li-option:hover .dock-link>span {color: #000;}
@media only screen and (max-width: 1400px) {
    .side-nav li {
        padding: 0px;
    }
}