/* ----- IMPORT FONTS ----- */
@font-face {
    font-family: "Amatic SC";
    src: url("../fonts/amatic-sc.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Mulish';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url("https://fonts.gstatic.com/s/mulish/v12/1Ptvg83HX_SGhgqk2wotcqA.woff2") format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ----- VARIABLES MAP ----- */
:root {
    --white: #ffffff;
    --black: #000000;
    --green: #65BC7B;
    --h-demult: 1;
    --hero-title: calc((8.515635vw + 1.55988px) * var(--h-demult, 1));
    --pages-title: calc((6.515635vw + 1.55988px) * var(--h-demult, 1));
    --font-h1: calc((2.515635vw + 1.55988px) * var(--h-demult, 1));
    --font-h2: calc((1.89555vw + 1.55988px) * var(--h-demult, 1));
    --font-h3: calc((1.7512vw + 1.55988px) * var(--h-demult, 1));
    --font-small: calc((1.7658vw + 1.55988px) * var(--h-demult, 1));
    --preloader-font: calc((2.377vw + 30px) * var(--h-demult, 1));
    --button-size: calc((3.715635vw + 1.55988px) * var(--h-demult, 1));

    --site-padding-v: 25px;
    --site-padding-h: 25px;
    --section-padding: 8vw;
    --gap-padding: 4vw;

    --animation-fast: all .3s cubic-bezier(.7, 0, .3, 1);
    --animation-smooth: all .7s cubic-bezier(.7, 0, .3, 1);
    --animation-slow: all .9s cubic-bezier(.7, 0, .3, 1);
    --ease-smooth: cubic-bezier(0.36, 0.07, 0.19, 0.97);
    --ease-out-swift: cubic-bezier(0.55, 0, 0.1, 1);
    --ease-out-bounce: cubic-bezier(0, 1.49, 0.105, 0.94);
    --ease-out-snap: cubic-bezier(0, 0.96, 0.22, 1);
    --ease-out-snap-2: cubic-bezier(0, 0.975, 0, 1);
    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in-out-bounce: cubic-bezier(0.865, -0.005, 0, 1.47);
    --ease-in-out-bounce-2: cubic-bezier(0.865, -0.005, 0, 1.64);
    --ease-in-out-snap: cubic-bezier(1, 0.02, 0.11, 0.995);
    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
    
}

@media screen and (max-width: 1200px){
    :root { 
        --section-padding: 6vw;
    }
}
@media screen and (max-width: 720px){
    :root { 
        --section-padding: 8vw;
    }
}
@media screen and (max-width: 540px){
    :root { 
        --section-padding: 4vw;
    }
}

/* NORMALIZE */
*, *::after, *::before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
a,abbr,acronym,address,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframeimg,ins,kbd,label,legend,li,mark,menu,nav,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    font-weight: inherit;
}
ol,
ul {
    list-style: none;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block;
}
html {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-touch-callout: none;
}
body {
    -webkit-text-size-adjust: 100%;
}
/*
button,input,select,textarea,
*/
input,select,textarea {
    margin: 0;
    padding: 0;
    color: inherit;
    background: inherit;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    outline: 0;
}
textarea {
    overflow: auto;
    vertical-align: top;
    resize: none;
}
h1, h2, h3, h4, h5 ,h6, a, p, span, figure {
    margin: 0;
    padding: 0;
    font-style: normal;
}
h1{
    font-size: var(--font-h1);
}
h2{
    font-size: var(--font-h2);
}
h3{
    font-size: var(--font-h3);
}
p,a,span,strong{
    font-size: var(--font-small);
}
*, *::after, *::before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
a {
    text-decoration: none;
    outline: none;
    color: inherit;
}
img{
    height: 100%;
    width: 100%;
    max-width: 100%;
    vertical-align: middle;
    border-style: none;
}
button {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
}

/* HTML SETUP */
html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;  
    touch-action: manipulation;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    -webkit-overflow-scrolling: touch;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-display: swap;
    cursor: default;
}
html a{
    cursor: pointer;
}
body {
    width: 100%;
    height: 100%;
    min-height: -webkit-fill-available;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll;
    overscroll-behavior: contain;
    background-color: var(--black);
    color: var(--white);
    font-family: "Mulish";
    font-weight: lighter;
}

body {
    overflow-y: scroll;
    scrollbar-width: none; /* Also needed to disable scrollbar Firefox */
    -ms-overflow-style: none;  /* Disable scrollbar IE 10+ */
}
body::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* Disable scrollbar Chrome/Safari/Webkit */
}
::-webkit-scrollbar {
    width: 0; /* change to 6px or keep disabled */
}
::-webkit-scrollbar-thumb {
    border-radius: 0px; /* change to 6px or keep disabled */
    background-color: transparent; 
}

/* CROSS-PAGES STYLE */

/* display = flex */
._flex_h {
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    justify-content: center;
}
._flex_v {
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
    justify-content: center;
}

/* hide SVG */
.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}
.icon {
	display: block;
	width: var(--button-size);
	height: var(--button-size);
	fill: var(--white);
}

.buttons {
    position: relative;
    display: block;
    --size: calc(var(--button-size) * 1);
    height: var(--size);
    width: var(--size);
    pointer-events: all !important;
}

/* WELCOME WRAP */
.welcome_wrap_check{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--black);
    display: none;
    z-index: 11;
}
.welcome_wrap_check.welcome {
	display: block;
}
.welcome_wrap{
    position: relative;
    width: 100%;
    height: 100%;
}
.welcome_wrap h2{
    font-family: 'Amatic SC';
    font-size: var(--hero-title);
    padding-bottom: calc(var(--font-small) / 1.5);
}
.welcome_wrap p{
    font-size: calc(var(--font-small) / 1.2);
    padding-bottom: calc(var(--font-small) * .3);
}
.welcome_wrap_btns{
    position: relative;
}
.check-ok,
.check-no{
    font-family: 'Amatic SC';
    color: var(--white);
    font-size: var(--font-h1);
    padding: var(--font-small);
    margin: 0 var(--font-small);
    transition: var(--animation-fast);
}
.check-ok:hover,
.check-no:hover{
    color: #65BC7B;
}
  
/* LOADING SCREEN */
.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    overflow-y: hidden;
    cursor: none;
    z-index: 10;
}
.loading-screen {
    position: relative;
    left: 0;
    top: 0;
    padding: 0;
    width: 100%;
    height: 100%; 
    will-change: top;
} 
.loading-screen,
.loading-container .rounded-div-wrap.top .rounded-div,
.loading-container .rounded-div-wrap.bottom .rounded-div {
    background: var(--black);
}
.loading-container .rounded-div-wrap.top .rounded-div,
.loading-container .rounded-div-wrap.bottom .rounded-div {
    height: 745%;
} 
.loading-container .rounded-div-wrap.top {
    position: absolute;
    top: 0;
    transform: translateY(-99%) scale(1,-1);
    height: 0vh;
    will-change: height;
    z-index: 2;
}
.loading-container .rounded-div-wrap.bottom {
    position: absolute;
    top: unset;
    bottom: 0;
    transform: translateY(99%);
    height: 0vh;
    will-change: height;
    z-index: 2;
}
.loading-container .loading-words {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    display: block;
    will-change: opacity;
}
.loading-container .loading-words img{
    display: block;
    height: calc(var(--preloader-font) * 4);
    padding-bottom: var(--font-small);
}
.loading-container .loading-words span {
    display: none;
    font-family: "Amatic SC";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    color: var(--white);
    font-size: var(--preloader-font);
    white-space: nowrap;
    will-change: opacity;
}
.loading-container .loading-words span.active {
    display: block;
} 
.loading-container .loading-words .home-active,
.loading-container .loading-words .home-active-last {
    opacity: 0;
    display: none;
}
.rounded-div-wrap {
    width: 100%;
    top: 0;
    position: relative;
    height: 10vh;
    overflow: hidden;
}
.rounded-div {
    display: block;
    position: absolute;
    content: "";
    width: 150%;
    height: 750%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -86.666%);
    z-index: 1;
}
.once-in {
    will-change: transform;
}


/* HEADER */
.site_header {
    position: fixed;
    top: 0;
    width: 100%;
    backface-visibility: hidden;
    transition: all .6s var(--ease-out-swift);
    z-index: 3;
}
.site_header-inner{
    position: relative;
    justify-content: space-between;
    padding: calc(var(--gap-padding) / 3) 0;
    width: 100%;
    background-color: transparent;
    transition: all .6s var(--ease-out-swift);
}
.header-logo {
    box-sizing: border-box;
    overflow: hidden;
    padding-left: calc(var(--gap-padding) / 1.5);
    transition: .3s ease-in .5s;
    z-index: 4;
}
.header-logo a{
    position: relative;
    padding: 0;
    padding-left: 0;
    justify-content: flex-start;
}
.header-logo a img{
    position: relative;
    --size: 60px;
    overflow: hidden;
    width: var(--size);
    height: var(--size);
} 
.burger__button {
    position: relative;
    --size: 45px;
    overflow: hidden;
    width: var(--size);
    height: var(--size);
    background: var(--white);
    border: 2px solid rgba(38, 196, 51, 0.2);
    border-radius: 90px;
    margin-right: calc(var(--gap-padding) / 1.5);
    transition: border-color .8s var(--ease-out-swift),transform 1.3s var(--ease-out-swift),visibility 1.3s var(--ease-out-swift);
    z-index: 4;
}
.burger__button::before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 50% 50% 0 0;
    content: "";
}
.burger__icon div:nth-child(1) {
    transform: translateY(-6px);
}
.burger__icon div {
    position: absolute;
    top: calc(50% - 1.5px);
    left: calc(25%);
    width: 50%;
    height: 3px;
    background: var(--green);
    border-radius: 3px;
    transition: transform .6s var(--ease-in-out-bounce-2),background .6s var(--ease-in-out-bounce-2);
}
.burger__icon div:nth-child(2) {
    transform: none;
}
.burger__icon div:nth-child(3) {
    transform: translateY(6px);
}
body.nav-active .burger__icon div:nth-child(1) {
    transform: rotate(-45deg);
}
body.nav-active .burger__icon div:nth-child(2) {
    transform: scale(1,0);
}
body.nav-active .burger__icon div:nth-child(3) {
    transform: rotate(45deg);
}
.button-outlined-bg {
    display: block;
    border-radius: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%) translateY(-50%);
    width: auto;
    height: 3.5rem;
}
.cart {
    cursor: pointer;
    position: relative;
    margin-top: 0.5em;
    margin-right: 1em
}
.cart .total-count {
    position: absolute;
    right: 3px;
    text-align: center;
    top: -5px;
    width: 20px;
    color: var(--white); 
}
.cart .total-count span{
    font-size: var(--font-small);
    font-weight: bold !important;
    font-family: "Mulish";
}
.korpa-description{
    position: relative;
    width: 100%;
    color: var(--black);
}
.korpa-description p{
    width: 33%;
    text-align: center;
    font-size: calc(var(--font-small) / 1.8);
    margin-bottom: var(--font-small);
    font-weight: bold;
}
.korpa-description p:nth-child(1){
    text-align: left;
    padding-left: calc(var(--font-small) / 2);
}
.delete-item{
    position: relative;
    width: var(--font-small);
    height: var(--font-small);
    background-color: #d9534f;
    color: var(--white);
    font-family: "Mulish";
    font-weight: lighter;
    cursor: pointer;
    font-size: calc(var(--font-small) / 1.5);
    margin-left: .5em;
    transform: translateY(-1px);
}
.show-cart {
    position: relative;
    width: 100% ;
    padding: 0 calc(var(--font-small) / 2);
    font-size: var(--font-small);
    color: var(--black);
}
.item-order{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin-bottom: calc(var(--font-small) / 1.5);
}
.item-order td:first-child{
    width: 35%;
}
.item-order td:nth-child(2){
    width: 30%;
}
.item-order td:nth-child(3){
    width: 25%;
    text-align: right;
}
.item-name{
    position: relative;
    font-weight: 600;
    font-size:  calc(var(--font-small) / 1.2);
}
.item-price{
    font-weight: 600;
    padding: 0 calc(var(--font-small) / 2);
    font-size:  calc(var(--font-small) / 1.2);
}
.input-group{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}
.item-count{
    border: none;
    width: 40%;
    font-weight: bold;
    text-align: center;
    pointer-events: none;
    font-size: calc(var(--font-small) / 1.2);
    margin-left: .7em;
}
.minus-item,
.plus-item{
    position: relative;
    width: var(--font-small);
    height: var(--font-small);
    background-color: #65BC7B;
    color: var(--white);
    font-family: "Mulish";
    font-weight: lighter;
    cursor: pointer;
    font-size: calc(var(--font-small) / 1.5);
}
.item-current-price{
    font-weight: 600;
    font-size:  calc(var(--font-small) / 1.2);
}
.cart-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
.cart-notification-wrap{
    position: relative;
    width: 100%;
    text-align: center;
    padding-bottom: calc(var(--font-small) / 1.2);
}
.cart-notification{
    position: absolute;
    font-size: calc(var(--font-small) / 1.35);
    font-weight: bold;
}
.checkout-notification{
    position: relative;
    width: 100%;
}
.total-price{
    width: 100%;
    font-weight: bold;
    font-size: var(--font-h1);
    font-family: "Amatic SC";
    padding: calc(var(--font-small) / 1.5) 0;
    background: var(--green);
    color: var(--black);
}
.total-cart{
    color: var(--black);
    font-size: var(--font-h1);
    font-weight: bold;
    margin-left: .25em;
}
.cart-continue{
    width: 100%;
    font-weight: bold;
    font-size: var(--font-h1);
    font-family: "Amatic SC";
    padding: calc(var(--font-small) / 1.5) 0;
    background: var(--black);
    color: var(--white);
    text-align: center;
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: all;
}
.fixed-nav-back {
    opacity: 0;
    transition: opacity .8s cubic-bezier(.7, 0, .2, 1);
    background: linear-gradient(to right,hsla(220, 13%, 0%, .5) 40%, hsla(220, 13%, 0%, 1) 70%);
    z-index: 2;
    pointer-events: none;
    will-change: opacity;
}
body.nav-active .fixed-nav-back,
body.cart-active .fixed-nav-back {
    opacity: .8;
    pointer-events: all;
}
body.nav-active,
body.cart-active{
    overflow-y: hidden;
}
.fixed-nav,
.cart-nav {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 35%;
    background: #141414;
    transform: translate(calc(100% + 6vw),0) rotate(0.001deg);
    transition: transform .8s cubic-bezier(.7, 0, .2, 1);
    will-change: transform;
    z-index: 3;
}
.cart-nav {
    z-index: 4;
    background: var(--white);
}
.korpa-cart .checkout-notification{ 
    cursor: not-allowed !important;
}
.korpa-cart .cart-continue{
    pointer-events: none !important;
}
.clear-cart{
    padding: calc(var(--font-small) / 2);
    position: absolute;
    left: calc(var(--gap-padding) / 2);
    background: #d9534f;
    color: var(--white);
    border-radius: .5em;
}
body.nav-active .fixed-nav,
body.cart-active .cart-nav {
    transform: translate(0,0) rotate(0.001deg);
}
.cart-close-wrap{
    justify-content: flex-end;
    padding: calc(var(--gap-padding) / 2);
}
.close__cart,
.close__store{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    --size: 45px;
    width: var(--size);
    height: var(--size);
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.5);
    border-radius: 50%;
    opacity: 1;
    transition: transform .3s cubic-bezier(.55,0,.1,1);
    backface-visibility: hidden;
}
.close__cart:hover,
.close__store:hover{
    transform: scale(.95);
}
.close__cart:before,
.close__store:before {
    transform: rotate(45deg);
    transition: transform .3s cubic-bezier(.55,0,.1,1);
}
.close__cart:hover::before,
.close__store:hover::before{
    transform: rotate(135deg);
}
.close__cart:before, .close__cart:after,
.close__store:before, .close__store:after{
    position: absolute;
    width: 1px;
    height: 16px;
    content: "";
    background-color: #231f20;
}
.close__cart:after,
.close__store:after{
    transform: rotate(-45deg);
    transition: transform .3s cubic-bezier(.55,0,.1,1);
}
.close__cart:hover::after,
.close__store:hover::after{
    transform: rotate(45deg);
}
.close__cart:before, .close__cart:after,
.close__store:before .close__store:after{
    position: absolute;
    width: 1px;
    height: 16px;
    content: "";
    background-color: #231f20;
}
.fixed-nav-rounded-div,
.cart-nav-rounded-div {
    position: absolute;
    left: 1px;
    transform: translateX(-100%);
    height: 100%;
    top: 0;
}
.fixed-nav-rounded-div .rounded-div-wrap,
.cart-nav-rounded-div .rounded-div-wrap{
    width: 6vw;
    height: 100%;
    transition: var(--animation-slow);
    transition: all .85s cubic-bezier(.7, 0, .2, 1);
    will-change: width;
}
body.nav-active .fixed-nav-rounded-div .rounded-div-wrap,
body.cart-active .cart-nav-rounded-div .rounded-div-wrap{
    width: 0vw;
}
.fixed-nav-rounded-div .rounded-div-wrap .rounded-div,
.cart-nav-rounded-div .rounded-div-wrap .rounded-div {
    background: #141414;
    height: 150%;
    content: "";
    display: block;
    position: absolute;
    width: 775%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-6.5%, -50%);
}
.cart-nav-rounded-div .rounded-div-wrap .rounded-div{
    background: var(--white);
}
.fixed-nav-inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--gap-padding);
    transform: translate(0,0) rotate(0.001deg);
    transition: all .6s cubic-bezier(.7, 0, .2, 1);
    will-change: transform;
}
body.nav-active .fixed-nav-inner {
    transform: translate(0,0) rotate(0.001deg);
}
.menu-inner{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    align-items: flex-start;
}
.menu-inner-links{
    padding: 0;
}
.menu-inner-links ul li a{
    font-family: "Amatic SC";
    font-size: var(--font-h1);
}
body.nav-active .menu-inner-links ul li a:hover::after {
    transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
}
.menu-inner-links ul li {
    transform: translate(15vw,0) rotate(0.001deg);
    transition: all .8s cubic-bezier(.7, 0, .2, 1);
    will-change: transform;
}
body.nav-active .menu-inner-links ul li{
    transform: translate(0,0) rotate(0.001deg);
}
.menu-inner-links ul li:nth-child(1) {transition-delay: .02s;}
.menu-inner-links ul li:nth-child(2) {transition-delay: .05s;}
.menu-inner-links ul li:nth-child(3) {transition-delay: .08s;}
.menu-inner-links ul li:nth-child(4) {transition-delay: .11s;}
.menu-inner-links ul li:nth-child(5) {transition-delay: 0.14s;}
.menu-inner-links ul li:nth-child(6) {transition-delay: 0.17s;}
.menu-inner-links ul li:nth-child(7) {transition-delay: 0.2s;}
.menu-inner-links ul li:nth-child(8) {transition-delay: 0.23s;}
.menu-inner-links ul li a{
    transition: all .35s cubic-bezier(.7, 0, .2, 1);
}
.menu-inner-links ul li:last-child {
    border-top: 2px solid #fff;
}
.menu-inner-links ul li a:hover{
    color: var(--green);
}
@media screen and (max-width: 480px){
    .fixed-nav,
    .cart-nav {
        width: 100%;
        transform: translate(calc(100% + 20vw),0) rotate(0.001deg);
    }
}
@media screen and (min-width: 481px) and (max-width: 767px) {
    .fixed-nav,
    .cart-nav {
        width: 50%;
        transform: translate(calc(100% + 20vw),0) rotate(0.001deg);
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .fixed-nav,
    .cart-nav {
        width: 50%;
        transform: translate(calc(100% + 20vw),0) rotate(0.001deg);
    }
}
.active-page a,
.highlighted{
    color: var(--green)
}
.sub-menu{
    position: relative;
    display: none;
    transition: all .8s cubic-bezier(.7, 0, .2, 1);
    padding: calc(var(--gap-padding) / 2) var(--gap-padding);
}
.sub-menu-open.sub-menu{
    display: block;
}
.cart-nav-inner{
    position: relative;
    width: 100%;
    height: 100%;
}
.cart-nav-inner h2{
    font-family: "Amatic SC";
    color: var(--black);
    text-align: center;
    font-size: var(--font-h1);
    margin-bottom: var(--font-small);
}

/* AUDIO BUTTON */
.sound_fx{
    position: absolute;
    bottom: calc(var(--gap-padding) / 1.5);
    left: calc(var(--gap-padding) / 1.2);
    z-index: 3;
}
.button--music {
    display: block;
    transform: scale(1);
}
.button--music .button__content {
    position: relative;
    z-index: 1;
    padding: .3em .5em;
    color: var(--green);
}
.button--music .button__bg {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: var(--green);
    border-radius: 3px;
    transform: skewX(-8deg) translateX(.09em);
}
.button--music .button__bg::before {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white);
    border-radius: 50% 50% 0 0;
    transform: translateY(100%);
    content: "";
}
.button--music .button__bg::before {
    transition: transform 0.6s var(--ease-out-snap), border-radius 1.2s var(--ease-out-snap);
}
.button--music:hover .button__bg::before {
    border-radius: 0;
    transform: translateY(0);
}
.volume-icons{
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events : none;
}
.button--music .mute__icons {
    position: relative;
    transform: scale(1.7) translate(8%,0%);
    transition: opacity .2s;
}
.button--music .icon-volume {
    position: relative;
    z-index: 1;
}
.button--music .icon-volume-on {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
.button--music .icon-v {
    width: .75em;
    height: auto;
    fill: var(--black);
    pointer-events: none;
}
.icon-volume-on {
    transition: transform 1s var(--ease-out-bounce) 120ms;
}

/* FOOTER */
.site_footer {
    position: relative;
    width: 100%;
}
.footer-rounded-div {
    width: 100%;
    position: relative;
    height: 10vh;
    display: block;
    background: #65bc7b46;
    z-index: 2;
}
.footer-rounded-div .rounded-div-wrap {
    transform: rotate(180deg) translateY(10vh);
    will-change: height;
}
.footer-rounded-div .rounded-div{
    background: #65bc7b46;
    display: block;
    position: absolute;
    content: "";
    width: 150%;
    height: 750%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -86.666%);
    z-index: 1;
}
.site_footer-inner{
    position: relative;
    height: 100%;
    width: 100%;
    background: #65bc7b46;
}
.footer-inner-container{
    width: 100%;
    padding-left: calc(var(--section-padding) * 1);
    padding-right: calc(var(--section-padding) * 1);
}
.footer-inner-c-wrap{
    width: 100%;
    justify-content: space-between;
    padding-top: calc(var(--gap-padding) / 1);
    padding-bottom: calc(var(--gap-padding) / 1);
}
.footer-inner-c-wrap:nth-child(1){
    align-items: flex-start;
    padding-top: 0;
    padding-left: calc(var(--section-padding) / 2);
    padding-right: calc(var(--section-padding) / 2);
    border-bottom: 2px solid rgba(196, 196, 196, 0.2);
}
.footer-title,
.footer-logo,
.contact-center{
    position: relative;
    width: 100%;
}
.footer-logo{
    pointer-events: none;
}
.footer-logo a img{
    position: relative;
    width: calc(var(--button-size) * 5); 
    height: calc(var(--button-size) * 5); 
    transform: translateY(-2.5vw);
    pointer-events: all;
}
.social_icon img{
    width: var(--button-size);
}
.footer-title span{
    text-transform: uppercase;
    font-weight: bold;
    opacity: .5;
    font-size: calc(var(--font-small) / 1.2);
    line-height: 2;
}
.footer-title p{
    font-family: "Amatic SC";
    font-size: calc(var(--font-small) * 1.5);
}

.pretplata-group{
    padding-top: calc(var(--gap-padding) / 2);
}
.pretplata-group,
.pretplata-form{
    position: relative;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
}
.pretplata-form-control{
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 1em 0 .9em;
    overflow: auto;
    border: none;
    box-shadow: 0 0 0 transparent;
    border-bottom: 2px solid #fff;
    font-size: calc(var(--font-small) / 1.2);
    color: #fff;
    transition: color 0.1s;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
    font-family: "Mulish";
    font-weight: 400;
    transition: var(--animation-smooth);
    cursor: pointer;
}
.pretplata-form button {
    position: relative;
    --size: 45px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--white);
    margin-left: var(--font-small);
    transition: var(--animation-smooth);
    z-index: 1;
}
.pretplata-form button:hover{
    --tw-bg-opacity: 1;
    background-color: rgba(255,208,116,var(--tw-bg-opacity));
}
.pretplata-form button img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50%;
    height: 35%;
}
.pretplata-form button input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    cursor: pointer;
    background: none;
}
.pretplata-form-control::selection {
    background: var(--black);
    color: var(--white);
}
.pretplata-form-control::placeholder{
    font-size: calc(var(--font-small) / 1.2);
    opacity: 0.6;
    color: inherit;
    transition: transform 0.5s var(--ease-out-swift), opacity 0.3s var(--ease-out-swift);
}
.pretplata-form-control:focus::placeholder{
    opacity: 0;
}
.pretplata-form-control:focus{
    border-bottom-color: #65BC7B;
}
.pretplata__msg{
    position: absolute;
    bottom: -70%;
    left: 0;
    color: var(--white);
    font-size: calc(var(--font-small) / 1.5);
    font-weight: 400;
}
.pretplata__msg.alert-success{ 
    color: #fff;
}
.pretplata__msg.alert-danger{
    color: #d9534f;
}
.contact-center h3{
    text-align: right;
    text-transform: uppercase;
    font-weight: bold;
    opacity: .5;
    font-size: calc(var(--font-small) / 1.2);
    line-height: 2;
    padding-bottom: calc(var(--font-small) / 2);
}
.contact-center p,
.contact-center a{
    position: relative;
    text-align: right;
    font-size: calc(var(--font-small) / 1.2);
    padding-bottom: calc(var(--font-small) / 2);
    transition: var(--animation-fast);
}
.contact-center a::after{
    position: absolute;
    content: "";
    bottom: 25%;
    left: 0;
    width: 100%;
    height: 0.05em;
    background: var(--white);
    transition: var(--animation-fast);
}
.contact-center a:hover::after{
    background: var(--green);
}
.copyright p{
    font-size: calc(var(--font-small) / 1.5);
    padding-bottom: calc(var(--font-small) / 3);
    margin-right: var(--font-small);
}
.copyright p:last-child{
    margin-right: 0;
}
.copyright a{
    position: relative;
    font-size: calc(var(--font-small) / 1.5);
    text-transform: uppercase;
    font-weight: bold;
    transition: var(--animation-fast);
}
.copyright a::after{
    position: absolute;
    content: "";
    bottom: -5%;
    left: 0;
    width: 100%;
    height: 0.1em;
    background: var(--white);
    transition: var(--animation-fast);
}
.copyright a:hover,
.contact-center a:hover{
    color: var(--green);
}
.copyright a:hover::after{
    background: var(--green);
}
.social p{
    font-size: calc(var(--font-small) / 1.5);
}
.social_icon{
    margin-left: var(--font-small);
}


/* MAIN WRAP */
main {
    position: relative;
    width: 100%; 
    height: 100%;
}
.main-wrap {
    position: relative;
    width: 100%; 
    height: 100%;
    box-sizing: border-box;
} 
main.touch {
    position: relative;
    height: auto;
} 
main.touch .main-wrap {
    position: relative;
}
@media screen and (max-width: 1024px) {
    main {
        position: relative;
    }
    .main-wrap {
        position: relative;
    }
}

.content{
    position: relative;
    width: 100%;
}
.section {
    position: relative;
    padding-left: var(--section-padding);
    padding-right: var(--section-padding);
}

/* HOME PAGE */
.hero{
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: url("../media/hero.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.hero::after{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--black);
    opacity: .3;
    z-index: 1;
}
.home_section{
    position: relative;
    width: 100%;
    text-align: center;
    margin: var(--hero-title) 0;
}
.home_section h2{
    font-family: "Amatic SC";
    font-size: var(--pages-title);
    padding-bottom: var(--font-h1);
}
.home_section p{
    font-size: var(--font-small);
    line-height: 1.4;
    padding-bottom: var(--font-h1);
}
.home_section h3{
    font-family: "Amatic SC";
    text-transform: uppercase;
    font-size: var(--font-h1);
    color: var(--green);
}

.naj-proizvodi{
    position: relative;
    width: 100%;
    margin-top: 0;
    margin-bottom: var(--hero-title);
}
.naj-proizvodi h2{
    font-family: "Amatic SC";
    font-size: var(--pages-title);
    padding-bottom: var(--font-h1);
}

/* SLICK THEME */
.slick-dots{
    position: absolute;
    bottom: -35px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.slick-dots li{
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    padding: 0;
    cursor: pointer;
}
.slick-dots li button{
    font-size: 0;
    line-height: 0;
    display: block;
    width: var(--font-small);
    height: var(--font-small);
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before{
    opacity: 1;
}
.slick-dots li button:before{
    font-family: 'Mulish';
    font-size: var(--font-small);
    line-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--font-small);
    height: var(--font-small);
    content: '•';
    text-align: center;
    opacity: .25;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before{
    opacity: 1;
    color: #05e63d;
}

/* SLICK CSS */
.slick-slider{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus{
    outline: none;
}
.slick-list.dragging{
    cursor: pointer;
}
.draggable {
    cursor: move;
    /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab; 
}
.draggable:active {
    cursor: move;
    /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing; 
}
.slick-disabled .slick-list {
    cursor: default !important; 
}
.slick-slider .slick-track,
.slick-slider .slick-list{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slick-track{
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after{
    display: table;
    content: '';
}
.slick-track:after{
    clear: both;
}
.slick-loading .slick-track{
    visibility: hidden;
}
.slick-slide{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide{
    float: right;
}
.slick-slide img{
    display: block;
}
.slick-slide.slick-loading img{
    display: none;
}
.slick-slide.dragging img{
    pointer-events: none;
}
.slick-initialized .slick-slide{
    display: block;
}
.slick-loading .slick-slide{
    visibility: hidden;
}
.slick-vertical .slick-slide{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/* CUSTOM SLICK */
.slider {
    width: 100%;
    margin: 0 auto;
}
.slick-slide {
    margin: 0px 20px;
    border-radius: 10px;
    z-index: 1;
}
.slick-slide h3{
    font-family: "Amatic SC";
    text-align: center;
    font-size: var(--font-h3);
    padding-top: 5px;
    color: var(--white);
}
.slick-slide p{
    text-align: center;
    font-family: "Mulish";
    font-size: calc(var(--font-small) / 1.2);
    font-weight: bold;
    padding-top: 2px;
    color: #65BC7B;
}
.slider-img{
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 5px;
    backface-visibility: hidden;
}
.slider-img::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff31;
    transition: .4s var(--ease-smooth);
    backface-visibility: hidden;
    opacity: 0;
}
.slick-slide:hover .slider-img::after{
    opacity: 0.5;
    backface-visibility: hidden;
}
.slick-slide:hover{
    cursor: pointer;
}
.slick-slide img {
    width: 100%;
    transition: .5s var(--ease-out-quart);
    backface-visibility: hidden;
}
.slick-slide {
    transition: all ease-in-out .3s;
    opacity: 1;
    /*
    opacity: .2;
    */
    backface-visibility: hidden;
}
.slick-active {
    opacity: 1;
}
.slick-current {
    opacity: 1;
}
.slick-slide:hover img{
    transform: scale(1.03);
}
.add-to-cart {
    margin-top: calc(var(--font-small) / 1.8);
    width: 100%;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    border-radius: 3px;
    padding: calc(var(--font-small) / 1.5) 0;
    display: inline-block;
    text-align: center;
    background-color: var(--white);
    color: var(--black);
    text-transform: uppercase;
    font-family: "Mulish";
    font-weight: 700;
    font-style: normal;
    font-size: calc(var(--font-small) / 1.5);
}
.add-to-cart:hover{
    background-color: var(--green);
}

.kategorije{
    position: relative;
    width: 85%;
    margin-top: 0;
    margin-bottom: calc(var(--hero-title) * 2);
}
.kategorije h2{
    font-family: "Amatic SC";
    font-size: var(--pages-title);
    padding-bottom: var(--font-h1);
}
.kategorije-inner,
.kategorije-box-wrap{
    position: relative;
    width: 100%;
}
.kategorije-box-wrap{
    margin-bottom: var(--font-h1);
}
.kategorije-box-wrap:last-child{
    margin-bottom: 0;
}
.kategorije-box{
    position: relative;
    width: 100%;
    margin-right: var(--font-h1);
    text-align: center;
    border-radius: .5em;
    box-sizing: border-box;
    overflow: hidden;
    transition: .5s var(--ease-smooth);
}
.kategorije-box img{
    position: relative;
    object-fit: cover;
}
.kategorije-box:hover{
    box-shadow: 10px 10px 15px #65bc7b69;
}
.kategorije-box:nth-child(even){
    margin-right: 0;
}
.kategorije-box h3{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Amatic SC";
    font-size: var(--pages-title);
    color: var(--white);
    backface-visibility: hidden;
    text-shadow: 2px 2px 5px #000;
    z-index: 1;
}
.kategorije-box::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #202020;
    transition: .4s var(--ease-smooth);
    opacity: .67;
}
.kategorije-box:hover::after{
    background-color: #e6dbdb;
    opacity:0;
}

/* HERO PAGES */
.pages-hero{
    position: relative;
    width: 100%;
}

/* UTISCI I ZELJE */
.testimonials{
    position: relative;
    width: 100%;
}
.testimonials h3{
    font-size: var(--font-h1);
    font-family: "Amatic SC";
}
.testimonials-wrap {
    position: relative;
    width: 100%;
    min-height: calc(var(--vh, 1vh) * 25);
    padding-left: calc(var(--section-padding) * 2);
    padding-right: calc(var(--section-padding) * 2);
    margin-bottom: var(--pages-title);
}
.quote {
    position: absolute;
    top: 20%;
    width: 100%;
    display: none;
}
.quote p{
    font-size: var(--font-small);
    line-height: 1.4;
}

.utisci-wrap{
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: calc(var(--pages-title) * 1.5);
    margin-bottom: calc(var(--pages-title) * 2);
}
.utisci-wrap h2{
    font-family: "Amatic SC";
    font-size: var(--pages-title);
    margin-bottom: var(--pages-title);
}
.newsletter,
.form-group{
    position: relative;
    width: 100%;
    justify-content: center;
}
.newsletter-form{
    width: 100%;
    padding-left: calc(var(--section-padding) * 2);
    padding-right: calc(var(--section-padding) * 2);
    align-items: flex-start;
    overflow: hidden;
}
.newsletter h3{
    font-size: var(--font-h1);
    font-family: "Amatic SC";
    padding-bottom: calc(var(--font-small) / 1.5);
}

.validator__mail-input,
.validator__name-input,
.checkout__name-input div,
.checkout__surname-input div,
.checkout__street-input div,
.checkout__city-input div,
.checkout__postanski-input div,
.checkout__phone-input div,
.checkout__mail-input div,
.checkout__info-input div{
    position: relative;
    width: 100%;
    margin-top: 1.2em;
    font-size: var(--font-small);
}
.checkout__name-input div,
.checkout__surname-input div,
.checkout__street-input div,
.checkout__city-input div,
.checkout__postanski-input div,
.checkout__phone-input div,
.checkout__mail-input div,
.checkout__info-input div {
    margin-top: 0;
}
.validator__mail-input input,
.validator__name-input input,
.checkout__name-input div input,
.checkout__surname-input div input,
.checkout__street-input div input,
.checkout__city-input div input,
.checkout__postanski-input div input,
.checkout__phone-input div input,
.checkout__mail-input div input,
.checkout__info-input div textarea{
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 1.1em 0.5em 1.3em;
    border: none;
    box-shadow: 0 0 0 transparent;
    font-size: var(--font-small);
    color: #fff;
    transition: color 0.1s;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
    font-family: "Mulish";
    font-weight: 400;
    cursor: pointer;
}
.checkout__name-input div input,
.checkout__surname-input div input,
.checkout__street-input div input,
.checkout__city-input div input,
.checkout__postanski-input div input,
.checkout__phone-input div input,
.checkout__mail-input div input,
.checkout__info-input div textarea{
    text-align: left;
    padding: 1.1em 1em 1.3em;
}
.validator__mail-input input::selection,
.validator__name-input input::selection,
.checkout__name-input div input::selection,
.checkout__surname-input div input::selection,
.checkout__street-input div input::selection,
.checkout__city-input div input::selection,
.checkout__postanski-input div input::selection,
.checkout__phone-input div input::selection,
.checkout__mail-input div input::selection,
.checkout__info-input div textarea::selection {
    background: var(--white);
    color: var(--black);
}
.validator__mail-input input::placeholder,
.validator__name-input input::placeholder,
.checkout__name-input div input::placeholder,
.checkout__surname-input div input::placeholder,
.checkout__street-input div input::placeholder,
.checkout__city-input div input::placeholder,
.checkout__postanski-input div input::placeholder,
.checkout__phone-input div input::placeholder,
.checkout__mail-input div input::placeholder{
    opacity: 0.6;
    color: inherit;
    transition: opacity 0.3s var(--ease-out-swift);
}
.checkout__info-input div textarea::placeholder{
    font-size: calc(var(--font-small) / 1.3);
    opacity: 0.6;
    color: inherit;
    transition: opacity 0.3s var(--ease-out-swift);
}
.validator__mail-input input:focus::placeholder,
.validator__name-input input:focus::placeholder,
.checkout__name-input div input:focus::placeholder,
.checkout__surname-input div input:focus::placeholder,
.checkout__street-input div input:focus::placeholder,
.checkout__city-input div input:focus::placeholder,
.checkout__postanski-input div input:focus::placeholder,
.checkout__phone-input div input:focus::placeholder,
.checkout__mail-input div input:focus::placeholder,
.checkout__info-input div textarea:focus::placeholder{
    opacity: 0;
}
.validator__mail-input input:-webkit-autofill,
.validator__mail-input input:-webkit-autofill:active,
.validator__mail-input input:-webkit-autofill:focus,
.validator__mail-input input:-webkit-autofill:hover,
.validator__name-input input:-webkit-autofill,
.validator__name-input input:-webkit-autofill:active,
.validator__name-input input:-webkit-autofill:focus,
.validator__name-input input:-webkit-autofill:hover,
.checkout__name-input div input:-webkit-autofill:hover,
.checkout__surname-input div input:-webkit-autofill:hover,
.checkout__street-input div input:-webkit-autofill:hover,
.checkout__city-input div input:-webkit-autofill:hover,
.checkout__postanski-input div input:-webkit-autofill:hover,
.checkout__phone-input div input:-webkit-autofill:hover,
.checkout__mail-input div input:-webkit-autofill:hover,
.checkout__info-input div textarea:-webkit-autofill:hover {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    -webkit-text-fill-color: inherit !important;
    -webkit-box-shadow: 0 0 0 30px red inset !important;
    box-shadow: 0 0 0 30px red inset !important;
}
.validator__mail-input .bg,
.validator__name-input .bg,
.checkout__name-input div .bg,
.checkout__surname-input div .bg,
.checkout__street-input div .bg,
.checkout__city-input div .bg,
.checkout__postanski-input div .bg,
.checkout__phone-input div .bg,
.checkout__mail-input div .bg,
.checkout__info-input div .bg {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #65bc7b46;
    border-radius: 5px;
    transform: skewX(-10deg);
}
.newsletter-form button {
    margin-top: var(--font-small);
    font-size: var(--font-h3);
    font-weight: bold;
    color: var(--black);
    background-color: var(--white);
    transition: var(--animation-fast);
    text-transform: uppercase;
    z-index: 1;
}
.newsletter-form button input{
    padding: var(--font-small) var(--font-small);
    border: none;
    cursor: pointer;
}
.newsletter-form button:hover{
    --tw-bg-opacity: 1;
    background-color: rgba(255,208,116,var(--tw-bg-opacity));
}
.newsletter__msg.alert-success{ 
    color: #65BC7B;
}
.newsletter__msg.alert-danger{
    color: #d9534f;
}
.newsletter__msg{
    text-align: center;
    color: var(--white);
    padding-top: var(--font-small);
    font-size: var(--font-small);
    font-weight: bold;
}

/* KAKO PORUCITI PAGE */
.accessories-wrap,
.streetwear-wrap,
.ostalo-wrap,
.onama-wrap,
.prodajna-mesta-wrap,
.proizvodi-wrap,
.korpa-wrap{
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: calc(var(--pages-title) * 1.5);
}
.accessories-wrap,
.streetwear-wrap,
.ostalo-wrap,
.prodajna-mesta-wrap,
.proizvodi-wrap{
    margin-bottom: calc(var(--pages-title) * 1.5);
}
.korpa-wrap{
    margin-bottom: calc(var(--pages-title) * 2.5);
}
.accessories-wrap h2,
.streetwear-wrap h2, 
.onama-wrap h2,
.ostalo-wrap h2,
.prodajna-mesta-wrap h2,
.proizvodi-wrap h2,
.korpa-wrap h2{
    font-family: "Amatic SC";
    font-size: var(--pages-title);
    padding-bottom: calc(var(--pages-title) / 1.5);
}
.sledeca-kategorija{
    text-align: center;
    font-size: var(--font-h1);
}
.proizvodi-wrap a{
    text-align: center;
    font-family: "Amatic SC";
    font-size: var(--pages-title);
    padding-bottom: calc(var(--pages-title) / 1.5);
    transition: transform .6s var(--ease-out-snap);
    color: var(--green);
    backface-visibility: hidden;
}
.next-category:hover{
    backface-visibility: hidden;
    transform: scale3d(0.92, 0.92, 1);
}
.onama-wrap p{
    line-height: 1.4;
}
.onama-wrap strong {
    font-family: "Amatic SC";
    font-size: var(--font-h1);
    color: var(--green);
}
.prodajna-mesta-lokacije h3{
    font-weight: bold;
    font-size: var(--font-h3);
    padding-top: var(--font-small);
    padding-bottom: var(--font-small);
}
.streetwear-wrap h3{
    font-family: "Amatic SC";
    font-size: var(--font-h1);
    font-size: calc(var(--pages-title) / 1.5);
    padding-bottom: var(--font-h1);
}

.tabs_wrap {
    position: relative;
    width: 100%;
    height: 100%;
}
.tabs_content {
    width: 100%;
    height: 100%;
    transition: 0.3s ease;
}
.tabs {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0 auto;
}
.tablinks,
.acc-links{
    position: relative;
    border: none;
    outline: none;
    width: auto;
    overflow: hidden;
    transition: 0.3s ease;
    border-bottom: 0.1em solid;
    border-color: var(--white);
    margin-right: calc(var(--gap-padding) / 2);
}
.tablinks:before,
.acc-links:before {
    background: var(--green);
    content: "";
    width: 100%;
    height: 0px;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 0.3s ease-in-out;
    z-index: -1;
}
.tablinks.selected-tab,
.acc-links.selected-accessorie{
    bottom: 0;
    overflow: hidden;
    border-bottom: 0.1em solid;
    border-color: transparent !important;
    backface-visibility: hidden;
}
.tablinks.selected-tab:before,
.acc-links.selected-accessorie:before{
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}
.tablinks.selected-tab p,
.tablinks.selected-tab:hover p,
.acc-links.selected-accessorie p,
.acc-links.selected-accessorie:hover p{
    opacity: 1;
}
.tablinks p,
.acc-links p{
    opacity: 0.6;
    color: var(--black);
    padding: 0;
    margin: 0;
    transition: 0.5s ease;
    backface-visibility: hidden;
}
.tablinks-title{
    font-family: "Amatic SC";
    font-size: var(--font-h1);
    font-weight: bold;
    color: var(--white);
    padding: 0.2em;
}
.tablinks:hover p,
.acc-links:hover p{
    opacity: 1;
}
.wrapper_tabcontent {
    position: relative;
    width: 100%;
    margin: 0 auto;
    opacity: 1;
    padding: calc(var(--gap-padding) / 2) 0;
    overflow: hidden;
    transition: all 1s ease;
}
.tabcontent,
.acc-content {
    display: none;
}
.tabcontent.selected-tab,
.acc-content.selected-accessorie {
    transition: all 1s ease;
    display: block;
    animation: fadeEffect 0.9s ease;
}
@keyframes fadeEffect {
    from {
        opacity: 0;
        transform: translateY(2em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.location-content-wrap{
    position: relative;
    width: 100%;
}
.location-wrap{
    position: relative;
    width: 100%;
    padding: calc(var(--gap-padding) / 2) calc(var(--gap-padding) / 2);
}
.location-wrap p{
    color: var(--white);
    font-size: var(--font-small);
    transition: var(--animation-fast);
    margin-right: calc(var(--font-small) / 1.5);
}
.location-wrap p strong{
    font-family: "Amatic SC";
    color: var(--green);
    font-size: calc(var(--font-small) * 1.2);
}
.note{
    position: relative;
    width: calc(var(--button-size) / 1.3);
    height: calc(var(--button-size) / 1.3);
    border-radius: 50%;
	/*background: var(--green);*/
	cursor: pointer;
	box-shadow: 0 0 0 #26c432;
	animation: pulse 2s infinite;
}
.note-2{
    animation: pulse 2.5s infinite;
}
.note-3{
    animation: pulse 1.5s infinite;
}
.note-4{
    animation: pulse 2s infinite;
}
.note-5{
    animation: pulse 1.5s infinite;
}
.note-6{
    animation: pulse 2s infinite;
}
.note-7{
    animation: pulse 2.2s infinite;
}
@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 #26c43381;
    }
    70% {
        -webkit-box-shadow: 0 0 0 15px #26c43300;
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 #26c43300;
    }
}
@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 #26c43381;
        box-shadow: 0 0 0 0 #26c43381;
    }
    70% {
        -moz-box-shadow: 0 0 0 15px #26c43300;
        box-shadow: 0 0 0 10px #26c43300;
    }
    100% {
        -moz-box-shadow: 0 0 0 0 #26c43300;
        box-shadow: 0 0 0 0 #26c43300;
    }
}
.note svg{
    position: relative;
    width: 70%;
    height: 70%;
}
.map_pin {
    fill: #fff;
    filter: url("#dropShadow");
}

.close__store{
    position: absolute;
    right: 2.5%;
    top: 5%;
}
.store_content{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: .5s var(--ease-out-swift), visibility .3s ease;
}
.store_content p{
    position: absolute;
    top: 5%;
    left: 2.5%;
    font-family: "Amatic SC";
    font-size: calc(var(--font-h1) * 1.5);
    backface-visibility: hidden;
}
.store_overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--black);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: .5s var(--ease-out-swift), visibility .3s ease;
}
body.open .store_overlay{
    opacity: .9;
    visibility: visible;
    z-index: 4;
}
.store_content.selected-store{
    opacity: 1;
    visibility: visible;
}
.store_content img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* KAKO PORUCITI PAGE */
.kako-poruciti-wrap,
.inostranstvo-wrap{
    text-align: center;
    margin-top: var(--pages-title);
}
.inostranstvo-wrap {
    padding-left: calc(var(--section-padding) * 2);
    padding-right: calc(var(--section-padding) * 2);
    text-align: center;
    margin-bottom: calc(var(--pages-title) * 2);
}
.inostranstvo-wrap img{
    width: calc(100% - 2 * var(--site-padding-h));
    max-width: calc(var(--pages-title) * 10);
}
.kako-poruciti-wrap h2,
.inostranstvo-wrap h2{
    font-family: "Amatic SC";
    font-size: var(--pages-title);
    padding-bottom: calc(var(--pages-title) / 1.5);
}
.inostranstvo-wrap h4{
    font-family: "Amatic SC";
    font-size: var(--font-h1);
    padding-top: var(--font-small);
}
.inostranstvo-wrap h4,
.kako-poruciti-wrap p{
    padding-bottom: var(--font-small);
    letter-spacing: 0.03em;
}
.kako-poruciti-wrap p{
    line-height: 1.4;
}
.kako-poruciti-wrap p strong{
    font-size: calc(var(--font-small) * 3);
}
.inostranstvo-wrap img{
    padding-bottom: calc(var(--font-small) / 2);
}
.inostranstvo-wrap p,
.inostranstvo-wrap p a{
    font-size: var(--font-small);
    padding-bottom: calc(var(--font-small) / 2);
    transition: var(--animation-fast);
    letter-spacing: 0.03em;
}
.inostranstvo-wrap p a:hover{
    color: var(--green);
}


.proizvodi-wrap-inner,
.proizvodi-list{
    position: relative;
    width: 100%;
}
.proizvodi-list{
    margin-bottom: var(--font-h1);
}
.proizvodi-box{
    position: relative;
    margin: var(--font-small);
    justify-content: flex-start;
    align-items: flex-start;
    width: 33%;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
}
.pr-box-images{
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.pr-box-images img{
    transition: opacity .5s ease-in-out;
    position: relative;
    z-index: 50;
    min-width: 100%;
    vertical-align: middle;
}
.proizvodi-box:hover img{
    opacity: 0;
}
.proizvodi-box:hover .no-hover{
    opacity: 1;
}
.pr-box-images .hover-image {
    position: relative;
    transform: translateX(-100%);
    z-index: 50;
    min-width: 100%;
    vertical-align: middle;
    opacity: 0;
}
.proizvodi-box:hover .hover-image{
    opacity: 1;
}
.proizvodi-box h3{
    font-family: "Amatic SC";
    font-size: var(--font-h1);
    line-height: 2em;
    letter-spacing: 1px;
    padding-left: var(--font-small);
}
.proizvodi-box p{
    color: #65BC7B;;
    font-weight: bold;
    padding-left: var(--font-small);
}
.proizvodi-box .cart-btn{
    position: relative;
    width: 100%;
    margin-top: calc(var(--font-small) / 1.8);
}
.proizvodi-list:nth-child(3){
    justify-content: flex-start;
}


/* LEGALNO PAGE */
.privacy-inner-width{
    position: relative;
    margin-top: calc(var(--pages-title) * 1.5);
    margin-bottom: calc(var(--pages-title) * 1.5);
    text-align: left;
}
.privacy-inner-width h2{
    font-size: var(--pages-title);
    padding-bottom: var(--font-small);
    font-family: "Amatic SC";
    font-weight: bold;
    color: var(--green);
}
.privacy-inner-width h3{
    font-size: var(--font-h2);
}
.privacy-inner-width p{
    font-size: var(--font-small);
}
.in-use{
    font-size: var(--font-small);
    padding-top: .5em;
}
.privacy-policy-info{
    padding: 2em 0 0 0;
}
.privacy-policy-info p{
    line-height: 1.4;
    font-size: var(--font-small);
    letter-spacing: .5px;
}
.privacy-policy-info strong{
    font-family: "Amatic SC";
    color: var(--green);
    font-weight: bold;
}
.privacy-policy-info a{
    color: var(--green);
}
.privacy-policy-info strong{
    font-size: var(--preloader-font);
}
.privacy-policy-info p span{
    color: var(--green);
    font-size: inherit;
}
.privacy-policy-info p span{
    font-size: var(--font-small);
}
#copyright-year{
    font-weight: bold;
    color: var(--green);
}
.privacy-list,
.terms-list{
    padding: 1em 0 1em 2em;
}
.privacy-list li,
.terms-list li{
    list-style: outside;
}
.privacy-list li::marker,
.terms-list li::marker {
    font-size: var(--font-small);
    color: var(--green);
}

/* TEHNICKA PODRSKA PAGE */
.technical-wrap-inner{
    position: relative;
    margin-top: calc(var(--pages-title) * 1.5);
    margin-bottom: calc(var(--pages-title) * 1.5);
    text-align: left;
}
.technical-wrap-inner h2{
    font-family: "Amatic SC";
    font-size: var(--font-h1);
    color: var(--green);
    padding-bottom: var(--font-small);
}
.technical-wrap-inner p{
    font-size: var(--font-small);
    line-height: 1.4;
}
.technical-wrap-inner p a{
    position: relative;
    color: var(--green);
}
.technical-wrap-inner p a::after{
    position: absolute;
    content: "";
    bottom: -5%;
    left: 0;
    width: 100%;
    height: 0.1em;
    background: var(--green);
}
.technical-wrap-inner strong{
    position: relative;
    font-size: var(--preloader-font);
    font-family: "Amatic SC";
    color: var(--green);
    font-weight: bold;
    margin: var(--font-small) 0;
}
.technical-wrap-inner span{
    color: var(--green);
}

/* KORPA PAGE */
.checkout-wrap,
.checkout-wrap-inner{
    position: relative;
    width: 100%;
    align-items: flex-start;
}
.checkout__name_wrap{
    position: relative;
    width: 100%;
}
.checkout-form{
    position: relative;
    width: 100%;
    align-items: flex-start;
}
.checkout_form_left,
.checkout_form_right{
    position: relative;
    width: 100%;
}
.checkout__name-input,
.checkout__surname-input,
.checkout__street-input,
.checkout__city-input,
.checkout__postanski-input,
.checkout__phone-input,
.checkout__mail-input,
.checkout__info-input,
.checkout__items_wrap,
.checkout__items-input {
    position: relative;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
}
.checkout__items-input input{
    position: relative;
    width: 100%;
    padding: var(--font-small) var(--font-small);
    border: none;
    cursor: pointer;
    background: #65bc7b46;
}
.checkout__name-input{
    margin-right: var(--font-small);
}
.checkout__name-input label,
.checkout__surname-input label,
.checkout__city-input label,
.checkout__info-input label,
.checkout__mail-input label{
    margin-bottom: calc(var(--font-small) / 2);
}
.checkout__items-input,
.checkout__info-input label{
    margin-top: calc(var(--font-small) / 1);
}
.checkout__street-input label,
.checkout__postanski-input label,
.checkout__phone_input label,
.checkout__phone-input label{
    margin: calc(var(--font-small) / 2) 0;
}
.clear_both{
    position: relative;
    width: var(--section-padding);
}
.region{
    padding: var(--font-small) 0;
}
.checkout-form button {
    margin-top: var(--font-small);
    font-size: var(--font-h3);
    font-weight: bold;
    color: var(--black);
    background-color: var(--white);
    transition: var(--animation-fast);
    text-transform: uppercase;
    z-index: 1;
}
.checkout-form button input{
    padding: var(--font-small) var(--font-small);
    border: none;
    cursor: pointer;
}
.checkout-form button:hover{
    --tw-bg-opacity: 1;
    background-color: rgba(255,208,116,var(--tw-bg-opacity));
}
.checkout__msg.alert-success{ 
    color: #65BC7B;
}
.checkout__msg.alert-danger{
    color: #d9534f;
}
.checkout__msg{
    text-align: center;
    color: var(--white);
    padding-top: var(--font-small);
    font-size: calc(var(--font-small) / 1.2);
    font-weight: normal;
}

/* HOVER ANIMATIONS */
@media (hover: hover) {
    .header-logo img {
        transition: transform .6s var(--ease-out-snap);
    }
    .header-logo a:hover img{
        transform: scale3d(0.92, 0.92, 1);
    }
    .burger__button::before {
        transition: top 0.5s var(--ease-out-swift), border-radius 0.4s var(--ease-out-swift);
    }
    .burger__button:hover {
        border-color: var(--green);
    }
    .burger__button:hover .burger__icon div {
        background: var(--green);
    }
    .burger__button:hover::before {
        top: 0;
        border-radius: 0;
    }
    
}
@media (hover: none) and (pointer: coarse) {
    .header-logo img {
        transition: transform 0.2s var(--ease-out-swift);
    }
    .header-logo a:active {
        transform: scale3d(0.9, 0.9, 0.9);
    }
    .burger__button {
        transition: border-color 0.2s var(--ease-out-swift), transform 0.6s var(--ease-out-swift), visibility 0.6s var(--ease-out-swift);
    }
    .burger__button:active {
        border-color: var(--green);
    }
}



@media screen and (min-width: 481px) and (max-width: 767px) {
.hero {
  	height: calc(var(--vh, 1vh) * 80);
	}
}
@media (max-width: 480px) {
.hero {
  	height: calc(var(--vh, 1vh) * 90);
	}
}

@media screen and (max-width: 480px) {
    :root {
        --hero-title: calc((8.515635vw + 1.55988px) * var(--h-demult, 1));
        --pages-title: calc((8.515635vw + 1.55988px) * var(--h-demult, 1));
        --font-h1: calc((5.515635vw + 1.55988px) * var(--h-demult, 1));
        --font-h2: calc((2.89555vw + 1.55988px) * var(--h-demult, 1));
        --font-h3: calc((2.66512vw + 1.55988px) * var(--h-demult, 1));
        --font-small: calc((2.33658vw + 1.55988px) * var(--h-demult, 1));
        --preloader-font: calc((3.377vw + 30px) * var(--h-demult, 1));
    }
    .welcome_wrap h2 {
        font-size: calc(var(--hero-title) * 1.8);
    }
    .welcome_wrap p {
        font-size: calc(var(--font-small) * 1.5);
    }
    .check-ok, .check-no {
        font-size: calc(var(--font-h1) * 1.5);
        padding: calc(var(--font-small) * 1.5);
    }
    .header-logo a img {
        width: calc(var(--button-size) * 2);
    }

    .fixed-nav-inner {
        padding: calc(var(--gap-padding) * 2);
    }
    .menu-inner-links ul li {
        margin-bottom: calc(var(--font-small) / 2.5);
    }
    .menu-inner-links ul li a {
        font-size: calc(var(--font-h1) * 1.4);
    }
    .hero{
        background-position: right;
    }
    .home_section h2,
    .naj-proizvodi h2,
    .kategorije h2 {
        padding-bottom: var(--pages-title);
    }
    .home_section p {
        padding-bottom: var(--pages-title);
        font-size: calc(var(--font-small) * 1.5);
    }

    .slick-slide h3 {
        font-size: var(--font-h1);
    }
    .slick-slide p {
        font-size: calc(var(--font-small) * 1.2);
    }
    .slick-dots {
        bottom: -50px;
    }
    .slick-dots li button,
    .slick-dots li button:before {
        width: var(--font-h1);
        height: var(--font-h1);
        font-size: var(--font-h1);
    }

    .add-to-cart {
        margin-top: calc(var(--font-small) / 1.5);
        padding: calc(var(--font-small) * 1.2) 0;
        font-size: calc(var(--font-small) * 1.2);
    }

    .cart-nav-inner h2 {
        margin-bottom: var(--font-h1);
    }
    .korpa-description p{
        margin-bottom: calc(var(--font-small) * 1.5);
        font-size: calc(var(--font-small) / 1);
    }
    .cart-notification-wrap {
        padding-bottom: calc(var(--font-small) * 1.5);
    }
    .cart-notification {
        font-size: calc(var(--font-small) * 1.3);
    }
    .total-price,
    .total-cart,
    .cart-continue{
        font-size: calc(var(--font-h1) * 1.2);
    }
    .checkout-wrap{
        margin-top: var(--pages-title);
    }
    .validator__mail-input .bg, .validator__name-input .bg, .checkout__name-input div .bg, .checkout__surname-input div .bg, .checkout__street-input div .bg, .checkout__city-input div .bg, .checkout__postanski-input div .bg, .checkout__phone-input div .bg, .checkout__mail-input div .bg, .checkout__info-input div .bg {
        background: #65bc7b7e;
    }

    .item-name,
    .item-current-price {
        font-size: calc(var(--font-small) * 1.5);
    }
    .item-count {
        margin-left: 0.2em;
        font-size: calc(var(--font-small) * 1.5);
    }
    .minus-item, .plus-item, .delete-item{
        width: calc(var(--font-small) * 2);
        height: calc(var(--font-small) * 2);
        font-size: calc(var(--font-small) * 1.5);
    }
    .clear-cart {
        padding: calc(var(--font-small) / 1.5);
    }

    .kako-poruciti-wrap{
        margin-top: calc(var(--pages-title) * 2);
    }

    .site_footer-inner {
        background: #65bc7b7e;
    }
    .footer-rounded-div{
        display: none;
    }
    .footer-inner-container {
        width: 100%;
        padding-top: calc(var(--section-padding) * 5);
        padding-bottom: calc(var(--section-padding) * 2);
    }
    .footer-inner-c-wrap{
        flex-direction: column;
    }
    .footer-logo {
        display: none;
    }
    .contact-center h3,
    .contact-center p{
        text-align: left;
    }
    .footer-title, .contact-center {
        margin-bottom: var(--pages-title);
    }

    .social p,
    .copyright p {
        font-size: calc(var(--font-small) * 1.2);
    }
    .copyright p {
        margin-bottom: calc(var(--font-small) * 1.5);
    }
    .copyright a {
        position: relative;
        font-size: calc(var(--font-small) * 1.5);
    }
    .social_icon img {
        width: calc(var(--button-size) * 2);
    }
    .footer-title span,
    .contact-center h3 {
        font-size: calc(var(--font-small) * 1.2);
    }
    .footer-title p {
        font-size: calc(var(--font-small) * 2.5);
    }
    .contact-center p, .contact-center a {
        font-size: calc(var(--font-small) * 1.5);
    }
    .pretplata-form-control,
    .pretplata-form-control::placeholder{
        font-size: calc(var(--font-small) * 1.5);
    }

    .footer-inner-c-wrap:nth-child(2){
        justify-content: flex-start;
        align-items: flex-start;
        padding-left: calc(var(--section-padding) / 2);
        padding-right: calc(var(--section-padding) / 2);
    }
    .copyright {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: calc(var(--pages-title) / 1.5);
    }
    .close__store {
        right: 2.5%;
        top: 1%;
    }
    .privacy-inner-width,
    .technical-wrap-inner{
        margin-top: calc(var(--pages-title) * 2.5);
        margin-bottom: calc(var(--pages-title) * 2);
    }


    .accessories-wrap,
    .streetwear-wrap,
    .ostalo-wrap,
    .onama-wrap,
    .prodajna-mesta-wrap,
    .utisci-wrap,
    .proizvodi-wrap,
    .korpa-wrap{
        position: relative;
        width: 100%;
        text-align: center;
        margin-top: calc(var(--pages-title) * 2);
    }
    .accessories-wrap,
    .streetwear-wrap,
    .ostalo-wrap,
    .prodajna-mesta-wrap,
    .utisci-wrap,
    .proizvodi-wrap,
    .korpa-wrap{
        margin-bottom: calc(var(--pages-title) * 2.5);
    }
    .onama-wrap p,
    .kako-poruciti-wrap p,
    .inostranstvo-wrap p, .inostranstvo-wrap p a,
    .quote p {
        font-size: calc(var(--font-small) * 1.5);
    }

    .testimonials-wrap {
        min-height: calc(var(--vh, 1vh) * 20);
    }


    .tablinks, .acc-links {
        margin-bottom: calc(var(--gap-padding) / 2);
    }

    .tabs {
        flex-direction: column;
    }
    
    .naj-proizvodi {
        margin-bottom: calc(var(--pages-title) * 2);
    }
    .kategorije-box-wrap{
        flex-direction: column;
        margin-bottom: 0;
    }
    .kategorije-box{
        margin-right: 0;
        margin-bottom: var(--font-h1);
    }

    .proizvodi-list{
        flex-direction: column;
        margin-bottom: 0
    }
    .proizvodi-box{
        width: 100%;
        margin: var(--font-h1) var(--font-small);
    }
    .proizvodi-box p {
        font-size: var(--font-h2);
    }

    .checkout-form{
        flex-direction: column;
    }
    .clear_both {
        height: var(--font-small);
    }

    .location-wrap p,
    .location-wrap p strong  {
        font-size: calc(var(--font-small) * 1.5);
    }

    .privacy-inner-width h3 {
        font-size: calc(var(--font-h2) * 1.2);
    }
    .privacy-inner-width p,
    .privacy-policy-info p,
    #copyright-year,
    .privacy-policy-info a,
    .technical-wrap-inner p,
    .technical-wrap-inner span,
    .technical-wrap-inner p a,
    .privacy-list li::marker, .terms-list li::marker {
        font-size: calc(var(--font-small) * 1.5);
    }

    .validator__mail-input input,
    .validator__name-input input,
    .checkout__name-input div input,
    .checkout__surname-input div input,
    .checkout__street-input div input,
    .checkout__city-input div input,
    .checkout__postanski-input div input,
    .checkout__phone-input div input,
    .checkout__mail-input div input,
    .checkout__info-input div textarea{
        padding: 1.1em 0.8em 1.3em;
        font-size: calc(var(--font-small) * 1.5);
    }
    .region,
    .region strong {
        font-size: calc(var(--font-small) * 1.2);
    }

    .checkout__name-input label, .checkout__surname-input label, .checkout__city-input label, .checkout__info-input label, .checkout__mail-input label {
        margin-bottom: calc(var(--font-small) / 1);
    }
    .checkout__street-input label, .checkout__postanski-input label, .checkout__phone_input label, .checkout__phone-input label {
        margin: calc(var(--font-small) / 1) 0;
    }

    .checkout__info-input div textarea::placeholder{
        font-size: calc(var(--font-small) * 1.1);
    }
    .checkout-form button {
        font-size: calc(var(--font-h2) * 1.2);
    }
    .checkout__msg {
        font-size: calc(var(--font-small) * 1.1);
    }
    
}

@media screen and (min-width: 481px) and (max-width: 767px) {
    .menu-inner-links ul li a {
        font-size: calc(var(--font-h1) * 1.8);
    }
    .fixed-nav-inner {
        padding: calc(var(--gap-padding) * 2);
    }


    .cart-nav-inner h2 {
        margin-bottom: var(--font-h1);
    }
    .korpa-description p{
        margin-bottom: calc(var(--font-small) * 1.5);
        font-size: calc(var(--font-small) / 1);
    }
    .cart-notification-wrap {
        padding-bottom: calc(var(--font-small) * 1.5);
    }
    .cart-notification {
        font-size: calc(var(--font-small) * .9);
    }
    .total-price,
    .total-cart,
    .cart-continue{
        font-size: calc(var(--font-h1) * 1.2);
    }
    .checkout-wrap{
        margin-top: var(--pages-title);
    }
    .validator__mail-input .bg, .validator__name-input .bg, .checkout__name-input div .bg, .checkout__surname-input div .bg, .checkout__street-input div .bg, .checkout__city-input div .bg, .checkout__postanski-input div .bg, .checkout__phone-input div .bg, .checkout__mail-input div .bg, .checkout__info-input div .bg {
        background: #65bc7b7e;
    }

    .item-name,
    .item-current-price {
        font-size: calc(var(--font-small) * 1.5);
    }
    .item-count {
        margin-left: 0.2em;
        font-size: calc(var(--font-small) * 1.5);
    }
    .minus-item, .plus-item, .delete-item{
        width: calc(var(--font-small) * 2);
        height: calc(var(--font-small) * 2);
        font-size: calc(var(--font-small) * 1.5);
    }



    .footer-rounded-div{
        display: none;
    }
    .site_footer-inner {
        background: #65bc7b7e;
    }
    .footer-rounded-div{
        display: none;
    }
    .footer-inner-container {
        width: 100%;
        padding-top: calc(var(--section-padding) * 2);
        padding-bottom: calc(var(--section-padding) * 1.5);
    }
    .footer-inner-c-wrap{
        flex-direction: column;
    }
    .footer-logo {
        display: none;
    }
    .contact-center h3,
    .contact-center p{
        text-align: left;
    }
    .footer-title, .contact-center {
        margin-bottom: calc(var(--pages-title) * 1);
    }

    .social p,
    .copyright p {
        font-size: calc(var(--font-small) * 1.2);
    }
    .copyright p {
        margin-bottom: calc(var(--font-small) * 1.2);
    }
    .copyright a {
        position: relative;
        font-size: calc(var(--font-small) * 1.5);
    }
    .social_icon img {
        width: calc(var(--button-size) * 2);
    }
    .footer-title span,
    .contact-center h3 {
        font-size: calc(var(--font-small) * 1.2);
    }
    .footer-title p {
        font-size: calc(var(--font-small) * 2.5);
    }
    .contact-center p, .contact-center a {
        font-size: calc(var(--font-small) * 1.5);
    }
    .pretplata-form-control,
    .pretplata-form-control::placeholder{
        font-size: calc(var(--font-small) * 1.5);
    }

    .footer-inner-c-wrap:nth-child(2){
        justify-content: flex-start;
        align-items: flex-start;
        padding-left: calc(var(--section-padding) / 2);
        padding-right: calc(var(--section-padding) / 2);
    }
    .copyright {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: calc(var(--pages-title) / 1.5);
    }
    .close__store {
        right: 2.5%;
        top: 1%;
    }
    .privacy-inner-width,
    .technical-wrap-inner{
        margin-top: calc(var(--pages-title) * 2.5);
        margin-bottom: calc(var(--pages-title) * 2);
    }


    .accessories-wrap,
    .streetwear-wrap,
    .ostalo-wrap,
    .onama-wrap,
    .prodajna-mesta-wrap,
    .utisci-wrap,
    .proizvodi-wrap,
    .korpa-wrap{
        position: relative;
        width: 100%;
        text-align: center;
        margin-top: calc(var(--pages-title) * 2);
    }
    .accessories-wrap,
    .streetwear-wrap,
    .ostalo-wrap,
    .prodajna-mesta-wrap,
    .utisci-wrap,
    .proizvodi-wrap,
    .korpa-wrap{
        margin-bottom: calc(var(--pages-title) * 2.5);
    }
    .onama-wrap p,
    .kako-poruciti-wrap p,
    .inostranstvo-wrap p, .inostranstvo-wrap p a,
    .quote p {
        font-size: calc(var(--font-small) * 1.5);
    }

    .testimonials-wrap {
        min-height: calc(var(--vh, 1vh) * 20);
    }


    .tablinks, .acc-links {
        margin-bottom: calc(var(--gap-padding) / 2);
    }
    
    .naj-proizvodi {
        margin-bottom: calc(var(--pages-title) * 2);
    }
    .proizvodi-box{
        margin: var(--font-h1) var(--font-small);
    }
    .proizvodi-box p {
        font-size: var(--font-h2);
    }

    .checkout-form{
        flex-direction: column;
    }
    .clear_both {
        height: var(--gap-padding);
    }

    .location-wrap p,
    .location-wrap p strong  {
        font-size: calc(var(--font-small) * 1.5);
    }

    .privacy-inner-width h3 {
        font-size: var(--font-h1);
    }
    .privacy-inner-width p,
    .privacy-policy-info p,
    #copyright-year,
    .privacy-policy-info a,
    .technical-wrap-inner p,
    .technical-wrap-inner span,
    .technical-wrap-inner p a,
    .privacy-list li::marker, .terms-list li::marker {
        font-size: calc(var(--font-small) * 1.5);
    }

    .validator__mail-input input,
    .validator__name-input input,
    .checkout__name-input div input,
    .checkout__surname-input div input,
    .checkout__street-input div input,
    .checkout__city-input div input,
    .checkout__postanski-input div input,
    .checkout__phone-input div input,
    .checkout__mail-input div input,
    .checkout__info-input div textarea{
        padding: 1.1em 0.8em 1.3em;
        font-size: calc(var(--font-small) * 1.5);
    }
    .region,
    .region strong {
        font-size: calc(var(--font-small) * 1.2);
    }

    .checkout__name-input label, .checkout__surname-input label, .checkout__city-input label, .checkout__info-input label, .checkout__mail-input label {
        margin-bottom: calc(var(--font-small) / 1);
    }
    .checkout__street-input label, .checkout__postanski-input label, .checkout__phone_input label, .checkout__phone-input label {
        margin: calc(var(--font-small) / 1) 0;
    }

    .checkout__info-input div textarea::placeholder{
        font-size: calc(var(--font-small) * 1.1);
    }
    .checkout-form button {
        font-size: calc(var(--font-h2) * 1.2);
    }
    .checkout__msg {
        font-size: calc(var(--font-small) * 1.1);
    }
}


@media screen and (min-width: 768px) and (max-width: 1024px) {
    .menu-inner-links ul li a {
        font-size: calc(var(--font-h1) * 1.8);
    }
    .fixed-nav-inner {
        padding: calc(var(--gap-padding) * 2);
    }


    .cart-nav-inner h2 {
        margin-bottom: var(--font-h1);
    }
    .korpa-description p{
        margin-bottom: calc(var(--font-small) * 1.5);
        font-size: calc(var(--font-small) / 1);
    }
    .cart-notification-wrap {
        padding-bottom: calc(var(--font-small) * 1.5);
    }
    .cart-notification {
        font-size: calc(var(--font-small) * 1.5);
    }
    .total-price,
    .total-cart,
    .cart-continue{
        font-size: calc(var(--font-h1) * 1.2);
    }
    .checkout-wrap{
        margin-top: var(--pages-title);
    }
    .validator__mail-input .bg, .validator__name-input .bg, .checkout__name-input div .bg, .checkout__surname-input div .bg, .checkout__street-input div .bg, .checkout__city-input div .bg, .checkout__postanski-input div .bg, .checkout__phone-input div .bg, .checkout__mail-input div .bg, .checkout__info-input div .bg {
        background: #65bc7b7e;
    }

    .item-name,
    .item-current-price {
        font-size: calc(var(--font-small) * 1.5);
    }
    .item-count {
        margin-left: 0.2em;
        font-size: calc(var(--font-small) * 1.5);
    }
    .minus-item, .plus-item, .delete-item{
        width: calc(var(--font-small) * 2);
        height: calc(var(--font-small) * 2);
        font-size: calc(var(--font-small) * 1.5);
    }



    .footer-rounded-div{
        display: none;
    }
    .site_footer-inner {
        background: #65bc7b7e;
    }
    .footer-rounded-div{
        display: none;
    }
    .footer-inner-container {
        width: 100%;
        padding-top: calc(var(--section-padding) * 2);
        padding-bottom: calc(var(--section-padding) * 1);
    }
    .footer-inner-c-wrap{
        flex-direction: column;
    }
    .footer-logo {
        display: none;
    }
    .contact-center h3,
    .contact-center p{
        text-align: left;
    }
    .footer-title, .contact-center {
        margin-bottom: calc(var(--pages-title) * 1);
    }

    .social p,
    .copyright p {
        font-size: calc(var(--font-small) * 1.2);
    }
    .copyright p {
        margin-bottom: calc(var(--font-small) * 1.2);
    }
    .copyright a {
        position: relative;
        font-size: calc(var(--font-small) * 1.5);
    }
    .social_icon img {
        width: calc(var(--button-size) * 2);
    }
    .footer-title span,
    .contact-center h3 {
        font-size: calc(var(--font-small) * 1.2);
    }
    .footer-title p {
        font-size: calc(var(--font-small) * 2.5);
    }
    .contact-center p, .contact-center a {
        font-size: calc(var(--font-small) * 1.5);
    }
    .pretplata-form-control,
    .pretplata-form-control::placeholder{
        font-size: calc(var(--font-small) * 1.5);
    }

    .footer-inner-c-wrap:nth-child(2){
        justify-content: flex-start;
        align-items: flex-start;
        padding-left: calc(var(--section-padding) / 2);
        padding-right: calc(var(--section-padding) / 2);
    }
    .copyright {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: calc(var(--pages-title) / 1.5);
    }
    .close__store {
        right: 2.5%;
        top: 1%;
    }
    .privacy-inner-width,
    .technical-wrap-inner{
        margin-top: calc(var(--pages-title) * 2.5);
        margin-bottom: calc(var(--pages-title) * 2);
    }


    .accessories-wrap,
    .streetwear-wrap,
    .ostalo-wrap,
    .onama-wrap,
    .prodajna-mesta-wrap,
    .utisci-wrap,
    .proizvodi-wrap,
    .korpa-wrap{
        position: relative;
        width: 100%;
        text-align: center;
        margin-top: calc(var(--pages-title) * 2);
    }
    .accessories-wrap,
    .streetwear-wrap,
    .ostalo-wrap,
    .prodajna-mesta-wrap,
    .utisci-wrap,
    .proizvodi-wrap,
    .korpa-wrap{
        margin-bottom: calc(var(--pages-title) * 2.5);
    }
    .onama-wrap p,
    .kako-poruciti-wrap p,
    .inostranstvo-wrap p, .inostranstvo-wrap p a,
    .quote p {
        font-size: calc(var(--font-small) * 1.5);
    }

    .testimonials-wrap {
        min-height: calc(var(--vh, 1vh) * 20);
    }


    .tablinks, .acc-links {
        margin-bottom: calc(var(--gap-padding) / 2);
    }
    
    .naj-proizvodi {
        margin-bottom: calc(var(--pages-title) * 2);
    }
    .proizvodi-box{
        margin: var(--font-h1) var(--font-small);
    }
    .proizvodi-box p {
        font-size: var(--font-h2);
    }

    .checkout-form{
        flex-direction: column;
    }
    .clear_both {
        height: var(--gap-padding);
    }

    .location-wrap p,
    .location-wrap p strong  {
        font-size: calc(var(--font-small) * 1.5);
    }

    .privacy-inner-width h3 {
        font-size: var(--font-h1);
    }
    .privacy-inner-width p,
    .privacy-policy-info p,
    #copyright-year,
    .privacy-policy-info a,
    .technical-wrap-inner p,
    .technical-wrap-inner span,
    .technical-wrap-inner p a,
    .privacy-list li::marker, .terms-list li::marker {
        font-size: calc(var(--font-small) * 1.5);
    }

}


@media (max-height: 949px) and (min-aspect-ratio:17/10) {
    :root {
        --h-demult: 0.96
    }
}
@media (max-height: 949px) and (min-aspect-ratio:18/10) {
    :root {
        --h-demult: 0.88
    }
}
@media (max-height: 949px) and (min-aspect-ratio:20/10) {
    :root {
        --h-demult: 0.84
    }
}
@media (max-height: 949px) and (min-aspect-ratio:22/10) {
    :root {
        --h-demult: 0.7
    }
}
@media (max-height: 949px) and (min-aspect-ratio:28/10) {
    :root {
        --h-demult: 0.72
    }
}
@media (max-width: 767px) {
    :root {
        --site-padding-h: 15px;
        --site-padding-v: 15px;
    }
}