/*
Theme Name: SavoyTheme
Theme URI: https://devadesign.eu/
Author: devaDesign
Author URI: https://devadesign.eu/
Description: modular, responsive.
Version: 1.0
License: DevaDesign License v1
License URI: https://devadesign.eu/license
Tags: custom-theme, responsive
Text Domain: savoytheme
*/

/* ===================================================================================================
   Reset & Box Sizing
   =================================================================================================== */
html {
	font-size: 1.2vw;
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

*, *::before, *::after {
	box-sizing: inherit;
}

/* ===================================================================================================
   Base Typography
   =================================================================================================== */
@font-face {
    font-family: 'Acorn';
    src: url('fonts/Acorn-Light.woff2') format('woff2'),
        url('fonts/Acorn-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Acorn';
    src: url('fonts/Acorn-Bold.woff2') format('woff2'),
        url('fonts/Acorn-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Acorn';
    src: url('fonts/Acorn-SemiBold.woff2') format('woff2'),
        url('fonts/Acorn-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Acorn';
    src: url('fonts/Acorn-Regular.woff2') format('woff2'),
        url('fonts/Acorn-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "Acorn", sans-serif;
    font-style: normal;
	font-size: 1rem;
	font-weight: 400;
    line-height: 1.25;
	color: #231f20;
	background: #e5e5e4;
	text-align: left;
	text-rendering: optimizeLegibility;
    text-rendering: auto;
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
	font-variant-ligatures: normal;
	min-height: 100vh;
    opacity: 0;
    animation: body-fade-in .54s ease-in-out forwards;
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}
@keyframes body-fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}

h1, h2, h3, h4, h5, h6 {
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
	color: #000;
	margin-bottom: 0;
}
h1 { font-size: clamp(2rem, 1.1rem + 3.2vw, 2.9rem); line-height: 1.15; }
h2 { font-size: clamp(1.6rem, 1rem + 2.1vw, 2.2rem); line-height: 0; text-transform: uppercase; font-weight: 300; }
h3 { font-size: clamp(1.6rem, 1rem + 2.1vw, 2.2rem); line-height: 0; font-weight: 600; margin-bottom: 3rem; }

.page-template-default h2,
.page-template-default h3{
    color: #4d6563;
    padding-top:2rem;
    font-weight: 600;
    margin-bottom: 2rem;
    line-height: clamp(1.6rem, 1rem + 2.1vw, 2.2rem);
}

/* Optical balancing of title breaks where supported */
h1, h2, h3 { text-wrap: balance; }

blockquote, ul, ol, dl, form, table, pre {
	margin-bottom: 1.5rem;
}
p{
    margin: 0 0 1.5rem 0;
}

table, input, textarea, select, li, button, p{
    font-family: inherit;
}

small { font-size: 0.8rem; }
strong, b { font-weight: 700; }
em, cite, q { font-style: italic; }

abbr, acronym {
	text-transform: uppercase;
	border-bottom: 1px dotted #000;
	cursor: help;
}

::selection {
	background: #422b3d;
	color: #fff;
}
::-moz-selection {
	background: #422b3d;
	color: #fff;
}

/* ===================================================================================================
   Images & Figures
   =================================================================================================== */
img {
	display: block;
	max-width: 100%;
	height: auto;
	border: none;
}
figure {
	margin: 0 0 .5rem 0;
}

/* ===================================================================================================
   Numbers, prices...
   =================================================================================================== */

.number_display{font-variant-numeric: tabular-nums;}

/* ===================================================================================================
   Links
   =================================================================================================== */
a, a:visited {
	color: #a35570;
	text-decoration: none !important;
}
a:hover, a:focus {
	color: #c9a84a;
	text-decoration: none !important;
}
a:focus {
  outline: none;
}

a:focus-visible {
  outline: 2px solid #1976d2 !important;
  outline-offset: 2px;
}

/* ===================================================================================================
   Accessibility
   =================================================================================================== */
.screen-reader-text {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	height: 1px; width: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: #f1f1f1;
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 1rem;
	font-weight: bold;
	left: 5px; top: 5px;
	height: auto; width: auto;
	padding: 15px 23px 14px;
	z-index: 100000;
}

/* ===================================================================================================
   Helpers & Utilities
   =================================================================================================== */
.hidden {display: none !important;}
.clear {clear: both;}
.block {display: block;}
.no_link > a,
a.no_link {
    pointer-events: none;
    cursor: pointer;
}

/* ===================================================================================================
   Main structure
   =================================================================================================== */
.site-container{
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
}
.site-main {}

.scrollPoint {
    height: 100vh;
    scroll-snap-align: start;
}

.inner,
.container{
	width: 90%;
	max-width: 1440px;
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
}

.page-template-default .container{
    max-width: 990px;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* ===================================================================================================
   Header
   =================================================================================================== */
.header{}
.header .inner{
    width: 100%;
    max-width: 81%;
}

h1.site-branding{
    display: block;
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
h1.site-branding .site-title-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

h1.site-branding .logoHolder{
    display: block;
    width: 100%;
    aspect-ratio: 16/3.6;
    text-align: center;
    font-size: 0;
    position: absolute;
    top:41.4%;
    left:0;
    transform: translateY(-50%);
}
h1.site-branding .logoHolder .heading{
    position: absolute;
    bottom:0;
    left:0;
    transform: translateY(162%);
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 3.6vw;
    color: #4d6563;
}

h1.site-branding .logoHolder .heading .word {
	display: inline-block;
}

/* keyframes */
@keyframes wordFade {
	to {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

.logoHolder .logo-img{
    position: absolute;
    bottom:0;
    display: block;
    width: 20%;
}
.logoHolder .logo-img.logo-s{
    left:4.5%;
}
.logoHolder .logo-img.logo-a{
    left:25%;
}
.logoHolder .logo-img.logo-v{
    left:50%;
    transform: translateX(-50%);
}
.logoHolder .logo-img.logo-o{
    right:22%;
    transform: translateY(6%);
}
.logoHolder .logo-img.logo-j{
    right:4%;
    transform: translateY(6%);
}

.logoHolder .logo-img .logo-main{
    display: block;
    width: 100%;
    height: auto;
}
.logoHolder .logo-img .logo-main svg{
    display: block;
    width: 100%;
    height: auto;
}
.logoHolder .logo-img .logo-sec{
    position: absolute;
    top:0;
    left:0;
    display: block;
    width: 100%;
    height: auto;
}
.logoHolder .logo-img .logo-sec svg{
    display: block;
    width: 100%;
    height: auto;
}

/* ===================================================================================================
   Content
   =================================================================================================== */
.content-area{}
.content-area .inner{
    max-width: 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.content-area .star{
    margin-bottom: 1.5rem;
}
.content-area .star svg{
    width: 6vw;
}

.content-area .logoHolder{
    display: block;
    width: 18vw;
    height: auto;
    aspect-ratio: 16/3.6;
    position: relative;
    text-align: center;
    font-size: 0;
    margin: 0 auto;
}

.wine-box {
    position: relative;
    z-index: 0;
}

.wine {
    display: flex;
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.wine-box:nth-of-type(odd) .wine {
  flex-direction: row-reverse;
}

.story{
    position: relative;
    width:50%;
    z-index: 2;
}

.grasevina .story{background: #84967d;}
.rose .story{background: #f5969d;}
.orange .story{background: #f26a5e;}
.rouge .story{background: #ef4d54;}
.blanc .story{background: #f3f4bd;}

.story .category{
    position: absolute;
    top: 0;
    width: 4vw;
    height: 15vw;
    border-radius: 0 0 2vw 2vw;
}

.story .category span{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 15vw;
    height: 4vw;
    line-height: 4vw;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-90deg) translate(-36%,137%);
}

.grasevina .story .category{
    right: 0;
    background: #5a6447;
}
.rose .story .category{
    left: 0;
    background: #a45671;
}
.orange .story .category{
    right: 0;
    background: #f8a676;
}
.rouge .story .category{
    left: 0;
    background: #231f20;
}
.blanc .story .category{
    right: 0;
    background: #cba94a;
}

.story .storyText{
    position: relative;
    padding: 12% 20% 0 10%;
    z-index: 2;
}
.wine-box:nth-of-type(even) .wine .story .storyText{
    padding: 12% 10% 0 20%;
}

.storyText p:first-of-type::first-letter {
    font-size: 400%;
    line-height: 0;
    font-weight: 300;
}

.story .storyImg{
    position: absolute;
    bottom:0;
    left:50%;
    transform: translateX(-50%);
    width: 63%;
    height: 100%;
    z-index: 1;
}
.story .storyImg .storyImg-main{
    position: absolute;
    bottom:0;
    left:0;
    width: 100%;
    height: auto;
}
.story .storyImg .storyImg-main img{
    display: block;
    width: 100%;
    height: auto;
}
.story .storyImg .storyImg-sec{
    position: absolute;
    bottom:0;
    left:0;
    width: 100%;
    height: auto;
}
.story .storyImg .storyImg-sec img{
    display: block;
    width: 100%;
    height: auto;
}

.description{
    position: relative;
    width:50%;
    z-index: 1;
}
.description .box{
    position: absolute;
    left:0;
    right: 0;
    top:6%;
    padding:0 55% 0 10%;
    z-index: 2;
}
.description .wineImg{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}
.description .wineImg img{
    display: block;
    width: 100%;
    height: auto;
}
.description .wine-bg{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}
.description .wine-bg img{
    display: block;
    width: 100%;
    height: auto;
}

.grasevina .description .box h2{color: #5a6447;}
.rose .description .box h2{color: #a45671;}
.orange .description .box h2{color: #f26a5e;}
.rouge .description .box h2{color: #ef4d54;}
.blanc .description .box h2{color: #4b6462;}

/* ===================================================================================================
   Footer
   =================================================================================================== */
.footer{position: relative;overflow: hidden;}
.footer .inner{
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 90vw;
    z-index: 0;
}

.footer .inner .logoHolder{
    display: block;
    width: 27vw;
    height: auto;
    aspect-ratio: 16/3.6;
    position: relative;
    text-align: center;
    font-size: 0;
    margin: 0 auto 1.5vw;
}

.footer .inner .boxHolder{
    display: none;
}

.footer .inner .box p{
    margin-bottom: 0;
}

.footer-bottles {
    display: flex;
    justify-content: stretch;
    align-items: flex-end;
    width: 41.4vw;
    position: relative;
    margin:3vw auto;
    z-index: 1;
}

.footer-bottles .box {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    position: relative;
    margin-left: -0.5vw;
    z-index: 1;
}
.footer-bottles .box:first-child {
    margin-left: 0;
}

.footer-bottles .box .shadow {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.footer-bottles .box .bottle img,
.footer-bottles .box .shadow img{
    display: block;
    width: 100%;
    height: auto;
}

.footer-bottles .paragraph{
    position: absolute;
    bottom: 0;
}
.footer-bottles .paragraph.box-one{
    left:0;
}
.footer-bottles .paragraph.box-two{
    right:0;
}

/* ===================================================================================================
   Bottom Bar
   =================================================================================================== */
.bottom-bar{
    position: absolute;
    left:0;
    bottom:0;
    width: 100%;
    display: flex;
    z-index: 1;
}
.bottom-bar div{
    width: 20%;
    height: 36px;
}
.bottom-bar div.one{background: #adbda8;}
.bottom-bar div.two{background: #a45570;}
.bottom-bar div.three{background: #f9a777;}
.bottom-bar div.four{background: #e2605f;}
.bottom-bar div.five{background: #caa94b;}

/* ===================================================================================================
   DOT NAVIGATION
   =================================================================================================== */
.dot-nav {
    position: fixed;
    top: 50%;
    right: 27px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1001;
    pointer-events: auto;
}

.dot-nav a {
    width: 12px;
    height: 12px;
    display: block;
    border-radius: 50%;
    background: #abbda7;
    border: 1px solid #4d6563;
    outline: none;
    transition: transform .2s ease, background-color .2s ease;
}

.dot-nav a:hover,
.dot-nav a:focus-visible {
    background: #e5e5e4;
}

.dot-nav a.active,
.dot-nav a[aria-current="true"] {
    background: #4d6563;
    border-color: #4d6563;
    transform: scale(1.3);
}

/* ===================================================================================================
   Clearfix
   =================================================================================================== */
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}

/* ===================================================================================================
   Transitions
   =================================================================================================== */
a {
    transition: color 0.36s ease-in-out, background 0.36s ease-in-out;
}
a::before, a::after, a svg, a img, .transition {
    transition: all 0.36s ease-in-out;
}

/* ===================================================================================================
   Animations
   =================================================================================================== */
/* state before animation */
.logo-s .logo-main,
.logo-a .logo-main,
.logo-v .logo-main,
.logo-o .logo-main,
.logo-j .logo-main,
.logo-a .logo-sec {
  opacity: 0;
  transform: translateY(36%);
}

.logo-s .logo-sec,
.logo-o .logo-sec{
  opacity: 0;
  transform: translateY(-36%);
}
.logo-j .logo-sec {opacity: 0;transform: translateX(36%);}
.logo-v .logo-sec {
    opacity: 0;
    transform: rotate(-360deg) scale(0);
    transform-origin: 50% 63%;
}

h1.site-branding .logoHolder .heading .word:first-child,
h1.site-branding .logoHolder .heading .word:nth-child(2),
h1.site-branding .logoHolder .heading .word:nth-child(3),
h1.site-branding .logoHolder .heading .word:nth-child(4),
h1.site-branding .logoHolder .heading .word:last-child {
	opacity: 0;
	transform: translateY(45%);
}

/* keyframes */
@keyframes wordFade {
	to {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

.star {opacity: 0;transform: rotate(-360deg) scale(0);}
.page-content {opacity: 0; transform: translateY(18px);}

.page-template-default .page-content {opacity: 1; transform: translateY(0);}

.story{opacity: 0;}

.storyImg-main{opacity: 0; transform: translateY(36%);}
.storyImg-sec{opacity: 0; transform: translateY(-36%);}
.orange .storyImg-sec{opacity: 0; transform: translateY(0) rotate(-360deg) scale(0);transform-origin: 50% 63%;}
.blanc .storyImg-sec{opacity: 0; transform: translate(36%,0);}
.storyText{opacity: 0; transform: translateX(18px);}
.category{opacity: 0; transform: translateY(-36%);}

.wineImg {opacity: 0;transform: translateY(-18%);}
.wine-bg {opacity: 0; transform: translateY(18%);}
.description h2{opacity: 0; transform: translateY(-36px);}
.description h3{opacity: 0; transform: translateX(-36px);}
.description-text{opacity: 0; transform: translateY(18px);}

.box-one{opacity: 0; transform: translateY(18px);}
.footer-border{opacity: 0;transform: scale(0);}
.box-two{opacity: 0; transform: translateY(18px);}

.footer-bottles .bottle{opacity: 0;transform: translateY(-18%);}
.footer-bottles .shadow{opacity: 0;}

.footer-bottles .paragraph.box-one{opacity: 0; transform: translate(-120%,18px);}
.footer-bottles .paragraph.box-two{opacity: 0; transform: translate(120%,18px);}

.belje{opacity: 0;transform: translateY(18px);}

.bottom-bar div.one,
.bottom-bar div.two,
.bottom-bar div.three,
.bottom-bar div.four,
.bottom-bar div.five{
    opacity: 0; transform: translateY(100%);
}

/* animation (.anim-on-view.in-view) */

/* Logo header */
body.age-gate-passed .anim-on-view.in-view .logo-s .logo-main { animation: fadeMove 0.72s ease-out 0.3s forwards; }
body.age-gate-passed .anim-on-view.in-view .logo-a .logo-main { animation: fadeMove 0.72s ease-out 0.4s forwards; }
body.age-gate-passed .anim-on-view.in-view .logo-v .logo-main { animation: fadeMove 0.72s ease-out 0.5s forwards; }
body.age-gate-passed .anim-on-view.in-view .logo-o .logo-main { animation: fadeMove 0.72s ease-out 0.6s forwards; }
body.age-gate-passed .anim-on-view.in-view .logo-j .logo-main { animation: fadeMove 0.72s ease-out 0.7s forwards; }

body.age-gate-passed .anim-on-view.in-view .logo-s .logo-sec { animation: fadeMove 0.72s ease-out 1.2s forwards; }
body.age-gate-passed .anim-on-view.in-view .logo-a .logo-sec { animation: fadeMove 0.72s ease-out 1.3s forwards; }
body.age-gate-passed .anim-on-view.in-view .logo-v .logo-sec { animation: fadeRotateScale 0.72s ease-out 1.4s forwards; }
body.age-gate-passed .anim-on-view.in-view .logo-o .logo-sec { animation: fadeMove 0.72s ease-out 1.5s forwards; }
body.age-gate-passed .anim-on-view.in-view .logo-j .logo-sec { animation: fadeMove 0.72s ease-out 1.6s forwards; }

/* Logo content */
.content-area.anim-on-view.in-view .logo-s .logo-main { animation: fadeMove 0.72s ease-out 0.8s forwards; }
.content-area.anim-on-view.in-view .logo-a .logo-main { animation: fadeMove 0.72s ease-out 0.9s forwards; }
.content-area.anim-on-view.in-view .logo-v .logo-main { animation: fadeMove 0.72s ease-out 1s forwards; }
.content-area.anim-on-view.in-view .logo-o .logo-main { animation: fadeMove 0.72s ease-out 1.1s forwards; }
.content-area.anim-on-view.in-view .logo-j .logo-main { animation: fadeMove 0.72s ease-out 1.2s forwards; }

.content-area.anim-on-view.in-view .logo-s .logo-sec { animation: fadeMove 0.72s ease-out 1.4s forwards; }
.content-area.anim-on-view.in-view .logo-a .logo-sec { animation: fadeMove 0.72s ease-out 1.5s forwards; }
.content-area.anim-on-view.in-view .logo-v .logo-sec { animation: fadeRotateScale 0.72s ease-out 1.6s forwards; }
.content-area.anim-on-view.in-view .logo-o .logo-sec { animation: fadeMove 0.72s ease-out 1.7s forwards; }
.content-area.anim-on-view.in-view .logo-j .logo-sec { animation: fadeMove 0.72s ease-out 1.8s forwards; }

body.age-gate-passed h1.site-branding .logoHolder .heading.anim-on-view.in-view .word:first-child {animation: wordFade 0.72s ease 2s forwards;}
body.age-gate-passed h1.site-branding .logoHolder .heading.anim-on-view.in-view .word:nth-child(2) {animation: wordFade 0.72s ease 2.2s forwards;}
body.age-gate-passed h1.site-branding .logoHolder .heading.anim-on-view.in-view .word:nth-child(3) {animation: wordFade 0.72s ease 2.4s forwards;}
body.age-gate-passed h1.site-branding .logoHolder .heading.anim-on-view.in-view .word:nth-child(4) {animation: wordFade 0.72s ease 2.5s forwards;}
body.age-gate-passed h1.site-branding .logoHolder .heading.anim-on-view.in-view .word:last-child {animation: wordFade 0.72s ease 2.8s forwards;}

body.age-gate-passed .anim-on-view.in-view.star { animation: fadeRotateScale 0.72s ease-out 0.2s forwards; }
body.age-gate-passed .anim-on-view.in-view.page-content { animation: fadeMove 0.72s ease-in-out 0.4s forwards; }

.anim-on-view.in-view.story { animation: fadeIn 0.72s ease-in-out 0.25s forwards; }

.anim-on-view.in-view.story .storyImg-main{animation: fadeMove 1s ease-in-out 0s forwards;}
.anim-on-view.in-view.story .storyImg-sec{animation: fadeMove 1s ease-in-out 0s forwards;}
.orange .anim-on-view.in-view.story .storyImg-sec{animation: fadeRotateScale2 1s ease-in-out 0s forwards;}
.blanc .anim-on-view.in-view.story .storyImg-sec{animation: fadeMoveLeft 1s ease-in-out 0s forwards;}
.anim-on-view.in-view.story .storyText{animation: fadeMove 1s ease-in-out 0.5s forwards;}
.anim-on-view.in-view.story .category { animation: fadeMove 1s ease-in-out 0.75s forwards; }

.anim-on-view.in-view .wineImg { animation: fadeMove 1s ease-in-out 1.15s forwards; }
.anim-on-view.in-view .wine-bg { animation: fadeMove 1s ease-in-out 1.15s forwards; }
.anim-on-view.in-view.description h2{animation: fadeMove 0.72s ease-in-out 1.65s forwards;}
.anim-on-view.in-view.description h3{animation: fadeMove 0.72s ease-in-out 1.65s forwards;}
.anim-on-view.in-view .description-text{animation: fadeMove 0.72s ease-in-out 1.65s forwards;}

.anim-on-view.in-view.box-one{animation: fadeMove 0.72s ease-in-out .75s forwards;}
.anim-on-view.in-view.footer-border{animation: zoom 0.36s ease-out 1.1s forwards;}
.anim-on-view.in-view.box-two{animation: fadeMove 0.72s ease-in-out 1.25s forwards;}

.anim-on-view.in-view.footer-bottles .bottle{animation: fadeMove 0.72s ease-in-out 1.5s forwards;}
.anim-on-view.in-view.footer-bottles .shadow{animation: fadeIn2 0.72s ease-in 1.5s forwards;}

.anim-on-view.in-view.footer-bottles .bottle-a .bottle{animation: fadeMove 0.72s ease-in-out 1.7s forwards;}
.anim-on-view.in-view.footer-bottles .bottle-a .shadow{animation: fadeIn2 0.72s ease-in 1.7s forwards;}

.anim-on-view.in-view.footer-bottles .bottle-v .bottle{animation: fadeMove 0.72s ease-in-out 1.9s forwards;}
.anim-on-view.in-view.footer-bottles .bottle-v .shadow{animation: fadeIn2 0.72s ease-in 1.9s forwards;}

.anim-on-view.in-view.footer-bottles .bottle-o .bottle{animation: fadeMove 0.72s ease-in-out 2.1s forwards;}
.anim-on-view.in-view.footer-bottles .bottle-o .shadow{animation: fadeIn2 0.72s ease-in 2.1s forwards;}

.anim-on-view.in-view.footer-bottles .bottle-j .bottle{animation: fadeMove 0.72s ease-in-out 2.3s forwards;}
.anim-on-view.in-view.footer-bottles .bottle-j .shadow{animation: fadeIn2 0.72s ease-in 2.3s forwards;}

.anim-on-view.in-view.footer-bottles .paragraph.box-one{animation: fadeParagraph1 0.72s ease-in-out 2.5s forwards;}
.anim-on-view.in-view.footer-bottles .paragraph.box-two{animation: fadeParagraph2 0.72s ease-in-out 2.5s forwards;}

.anim-on-view.in-view.belje{animation: fadeMove 0.72s ease-in 2.75s forwards;}

.bottom-bar.anim-on-view.in-view div.one{animation: fadeMove 0.72s ease-in-out 3s forwards;}
.bottom-bar.anim-on-view.in-view div.two{animation: fadeMove 0.72s ease-in-out 3.1s forwards;}
.bottom-bar.anim-on-view.in-view div.three{animation: fadeMove 0.72s ease-in-out 3.2s forwards;}
.bottom-bar.anim-on-view.in-view div.four{animation: fadeMove 0.72s ease-in-out 3.3s forwards;}
.bottom-bar.anim-on-view.in-view div.five{animation: fadeMove 0.72s ease-in-out 3.4s forwards;}

@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes fadeIn2 {
  0% { opacity: 0; }
  81% { opacity: 0.36; }
  100% { opacity: 1; }
}
@keyframes fadeMove {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeParagraph1 {
  to { opacity: 1; transform: translate(-120%,0); }
}
@keyframes fadeParagraph2 {
  to { opacity: 1; transform: translate(120%,0); }
}
@keyframes fadeMoveLeft {
  to { opacity: 1; transform: translate(0,0); }
}
@keyframes fadeRotateScale {
  to { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes fadeRotateScale2 {
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes zoom {
  to { opacity: 1; transform: scale(1); }
}

@keyframes wordFade {
	to {opacity: 1;transform: translateY(0);}
}

/* ===================================================================================================
   Responsive (1280px) Medium Laptop
   =================================================================================================== */
@media (max-width: 1280px) {
    html {font-size: 1.35vw;}
}

/* ===================================================================================================
   Responsive (990)
   =================================================================================================== */
@media (max-width: 990px) {
    html {font-size: 18px;}

    .site-container {
        height: auto;
        overflow-y: visible;
        scroll-snap-type: none;
        -webkit-scroll-snap-type: none;
    }
    .scrollPoint{height: auto;scroll-snap-align: none;}
    
    .header .inner{max-width: 100%;}
    h1.site-branding {height: auto;padding: 3rem 0;}
    h1.site-branding .logoHolder {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        margin: 0 auto 10%;
    }
    h1.site-branding .logoHolder .heading{
        font-size: 4.5vw;
        z-index: 99;
    }
    .content-area .inner {max-width: 90%;min-height: 0; }
    .footer .inner {min-height: 0;}
    
    .dot-nav{display: none;}
    
    .content-area .star{margin-top: 0;margin-bottom: 3rem;}
    .content-area .star svg{width: 24vw;max-width: 126px;}
    .content-area .logoHolder{width: 90vw;margin: 2rem auto 5rem;}

    .wine {
        height: auto;
        flex-direction: column !important;
        overflow: visible;
    }
    .story {width:100%;aspect-ratio:1/1; overflow: hidden;}
    .description {width:100%;aspect-ratio:1/1.2;}

    .description .box {padding: 1rem;}
    .description-text{width: 54%;}
    

    .story .category{
        width: 54px;
        height: 220px;
        border-radius: 0 0 18px 18px;
    }

    .story .category span{
        width: 220px;
        height: 54px;
        line-height: 54px;
        transform: rotate(-90deg) translate(-36%,155%);
    }

    .footer .inner .boxHolder{display: block;margin-bottom: 4.5rem;}
    
    .footer .inner .logoHolder{
        width: 90%;
        max-width: 360px;
        margin: 4.5rem auto;
    }
    .footer-border{margin: 1.5rem auto;}
    .footer-border svg{height: 18px; width: auto;}
    
    .footer-bottles {
        width: 100%;
        margin:0 auto 3rem;
    }
    .footer-bottles .paragraph{display: none;}
    
    .belje{margin-bottom: 3.5rem;}
    
    .anim-on-view.in-view .wineImg { animation: fadeMove 1s ease-in-out 0s forwards; }
    .anim-on-view.in-view .wine-bg { animation: fadeMove 1s ease-in-out 0s forwards; }
    .anim-on-view.in-view.description h2{animation: fadeMove 0.72s ease-in-out .5s forwards;}
    .anim-on-view.in-view.description h3{animation: fadeMove 0.72s ease-in-out .5s forwards;}
    .anim-on-view.in-view .description-text{animation: fadeMove 0.72s ease-in-out .5s forwards;}
    
    .anim-on-view.in-view.box-one{animation: fadeMove 0.72s ease-in-out 0s forwards;}
    .anim-on-view.in-view.footer-border{animation: zoom 0.36s ease-out 0.35s forwards;}
    .anim-on-view.in-view.box-two{animation: fadeMove 0.72s ease-in-out 0.5s forwards;}

    .anim-on-view.in-view.footer-bottles .bottle{animation: fadeMove 0.72s ease-in-out 0.75s forwards;}
    .anim-on-view.in-view.footer-bottles .shadow{animation: fadeIn2 0.72s ease-in 0.75s forwards;}

    .anim-on-view.in-view.footer-bottles .bottle-a .bottle{animation: fadeMove 0.72s ease-in-out 0.95s forwards;}
    .anim-on-view.in-view.footer-bottles .bottle-a .shadow{animation: fadeIn2 0.72s ease-in 0.95s forwards;}

    .anim-on-view.in-view.footer-bottles .bottle-v .bottle{animation: fadeMove 0.72s ease-in-out 1.15s forwards;}
    .anim-on-view.in-view.footer-bottles .bottle-v .shadow{animation: fadeIn2 0.72s ease-in 1.15s forwards;}

    .anim-on-view.in-view.footer-bottles .bottle-o .bottle{animation: fadeMove 0.72s ease-in-out 1.35s forwards;}
    .anim-on-view.in-view.footer-bottles .bottle-o .shadow{animation: fadeIn2 0.72s ease-in 1.35s forwards;}

    .anim-on-view.in-view.footer-bottles .bottle-j .bottle{animation: fadeMove 0.72s ease-in-out 1.55s forwards;}
    .anim-on-view.in-view.footer-bottles .bottle-j .shadow{animation: fadeIn2 0.72s ease-in 1.55s forwards;}

    .anim-on-view.in-view.footer-bottles .paragraph.box-one{animation: fadeParagraph1 0.72s ease-in-out 1.75s forwards;}
    .anim-on-view.in-view.footer-bottles .paragraph.box-two{animation: fadeParagraph2 0.72s ease-in-out 1.75s forwards;}

    .anim-on-view.in-view.belje{animation: fadeMove 0.72s ease-in 1.95s forwards;}
}

/* ===================================================================================================
   Responsive (720)
   =================================================================================================== */
@media (max-width: 720px) {
    .story {aspect-ratio:1/1.04;}
    .bottom-bar div{height: 27px;}
}

/* ===================================================================================================
   Responsive (630)
   =================================================================================================== */
@media (max-width: 630px) {
    .rouge .story {aspect-ratio:1/1.2;}
}

/* ===================================================================================================
   Responsive (450)
   =================================================================================================== */
@media (max-width: 450px) {
    html { font-size: 16px; }
    .story {aspect-ratio:1/1.2;}
    .rouge .story {aspect-ratio:1/1.3;}
    .description {aspect-ratio:1/1.25;}
    .orange .description {aspect-ratio:1/1.35;}
    .bottom-bar div{height: 18px;}
}

/* ===================================================================================================
   Responsive (400)
   =================================================================================================== */
@media (max-width: 400px) {
    html { font-size: 16px; }
    .story {aspect-ratio:1/1.3;}
    .rouge .story {aspect-ratio:1/1.4;}
    .description {aspect-ratio:1/1.4;}
    .orange .description {aspect-ratio:1/1.5;}
}