@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Comforter&family=Gasoek+One&family=Oi&family=Sigmar&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Grand+Hotel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Belanosima&family=Rubik+Vinyl&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Grand+Hotel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');

.parallax {
    will-change: transform;
  }
  
/* html, body {
    overflow-x: hidden;
  } */

  html, body {
    overflow-x: hidden;
    position: relative;
    width: 100vw;
    max-width: 100%;
  }

  body::-webkit-scrollbar {
    width: 0px;
    background: transparent;
  }

* {
    /* outline: 1px solid red; */
}



/* ----- Navigation Bar section-----  */
html
{
    scroll-behavior: smooth;
}
body
{
    margin: 0;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    font-family: "Poppins", sans-serif;
    /* background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); */
    background-image: linear-gradient(to right, #60606057 0%, #87878765 50%);
    overflow-x: hidden;
    
}
.ishei-navbar
{
    position: fixed;
    width: 100%;
    height: 60px;
    display: flex;
    z-index: 100;
    /* background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); */
    background-image: linear-gradient(to right, #60606057 0%, #87878765 50%);
    /* backdrop-filter: blur(20px); */
    background: transparent;
    backdrop-filter: none;
}
.ishei-navbar .brand
{
    margin: auto;
    width: fit-content;
    height: 60px;
    margin-left: 20px;
    margin-top: 5px;
    display: flex;

}
.ishei-navbar .brand h1
{
    font-family: "Comforter", cursive;
    margin: auto;
    color: #000000; /* black text */
    /* color: rgb(255, 255, 255); */
}
.ishei-navbar ul
{
    width: 50%;
    height: 100%;
    margin: auto;
    margin-left: 0px;
    display: flex;


}
.ishei-navbar ul li
{
    margin: auto;
    margin-left: 0px;
    list-style: none;
    font-weight: 400;
}
.rect
{
    margin: auto;
    margin-left: 0px;
    width: 0%;
    height: 2px;
    background-color:goldenrod;
    /* background-color: rgb(255, 255, 255); */
}
.ishei-navbar ul li:hover .rect
{
    width: 100%;
    transition: all 0.5s;
}
.ishei-navbar ul li a
{
    font-family: "Poppins", sans-serif;
    font-size: smaller;
    font-weight:500;
    text-decoration: none;
    color: #494949; /* black text */
    /* color: rgb(255, 255, 255); */
}

.ishei-navbar .navbar-toggler
{
    margin: auto;
    width: 50px;
    height: 40%;
    display: none;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.5s;
    margin-right: 20px;

}
.ishei-navbar .navbar-toggler .line1, .ishei-navbar .navbar-toggler .line2
{
    margin: auto;
    width: 20px;
    height: 1px;
    background-color: rgb(255, 255, 255);

}
.overlay-dropdown
{
    display: none;
}
.overlay-dropdown ul li
{
    display: none;
}

.hide-navbar {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* Glassmorphic navbar */
.glass-navbar {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.15));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    transition: all 0.3s ease;
  }
  
  /* Hide navbar completely */
  .hide-navbar {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
  }
  

/* #intro-div, #about-div, #services-div, #careers-div, #contact-div
{
    margin: auto;
    width: 100%;
    height: 100vh;
    display: flex;
}
#intro-div h2, #about-div h2, #services-div h2, #careers-div h2, #contact-div h2
{
    margin: auto;
    font-size: 7vw;
    color: rgb(255, 255, 255);
} */


/* @media only screen and (max-width: 1000px) */
@media only screen and (max-width: 641px)
{
    /* new */
    #toggler{
        display: none;
    }

    /* -------------------------------------------------- */
    .ishei-navbar ul
    {
        display: none;
    }
    .ishei-navbar .navbar-toggler
    {
        display: flex;
    }
    .overlay-dropdown
{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: auto;
    display: none;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
}
.overlay-dropdown .brand
{
   margin: auto;
   height: 60px;
   margin-left: 20px;
   margin-top: 12px;
}
.overlay-dropdown .brand h1
{
    font-family: "Comforter", cursive;
    margin: auto;
}
.overlay-dropdown ul
{
    width: 50%;
    height: 60%;
    margin: auto;
    display: flex;
    flex-direction: column;
    margin-left: -16px;
    margin-top: 20px;
}
.overlay-dropdown ul li
{
    display: flex;
    list-style-type: none;
    margin-left: 20px;

}
.overlay-dropdown ul li a
{
    text-decoration: none;
    color: black;
    font-size: 50px;
}
}

/* .disclaimer
{ 
    margin: auto; 
    margin-bottom: 20px;
    width: fit-content;
    color: rgb(255, 255, 255);
    text-align: center;
    font-family: 'Belanosima', sans-serif;
}
.disclaimer a
{
    text-decoration: none;
    color: #ffffff;
    font-family: "Kaushan Script", cursive;
    font-weight: 900;
}
.disclaimer a:hover
{
    text-decoration: overline;
} */

/* ---------------OurStory section ------------------- */

#OurStoryFlexboxDiv{
    margin-top: -15%;
}

/* ---------------Shopping section ------------------- */

.jacket-swap {
    transition: opacity 0.3s ease-in-out;
}

.legends i {
    padding-left:10px;
    color: #000;
    transition: transform 0.2s ease;
    padding-right: 10px;
}
.legends a:hover i {
    transform: scale(1.2);
    color: goldenrod; /* example hover color */
}

/* Shopping sectio0n - Glasmorphic orbs */

/* Reusable glasmorphic effect */
/* .glasmorphic-leaf {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15),
        rgba(255, 255, 255, 0.05)
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
} */
.glasmorphic-leaf {
    position: relative; /* Required for pseudo-element positioning */
    /* background: url('../img/WhereToBuyOb2.png'); optional if not inline */
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    overflow: hidden;
}

/* Add the overlay */
/* .glasmorphic-leaf::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    z-index: 1;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15),
        rgba(255, 255, 255, 0.05)
    );
    border-radius: 30px;
    pointer-events: none;
} */
 .glasmorphic-leaf::after {
    content: '';
    position: absolute;
    inset: -10%; /* expands beyond boundaries */
    z-index: 1;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.04)
    );
    border-radius: 50%; /* soften sharp edges */
    pointer-events: none;
    box-shadow: 0 0 60px 15px rgba(255, 255, 255, 0.08); /* smooth glow to hide borders */
}


/* .glasmorphic-leaf::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1; 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15),
        rgba(255, 255, 255, 0.05)
    );
    border-radius: 20px;
    pointer-events: none;
} */



#caroDida {
    text-align: right;
    position: absolute;
    right: 0;
    top: 320px;
}

#fQ {
    margin-bottom: 0px !important;
}

#text-intro h3 {
    margin-bottom: 0px !important
}

#buttons-intro {
    margin-top: 10px !important
}

#questions {
    padding: 10px !important
}

;
#fQ,
#sQ {
    _height: 66px;
}

#sQ {
    margin-bottom: 0 !important
}

#menuSocial,
#fInsta {
    font-size: 15px;
}

#tWhere {
    margin-top: 70px;
}

#_askImg img {
    margin-left: -157px;
}

#vabbedai {
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 56px;
    background: white;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%);
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 70%);
}

#fInsta {
    position: absolute;
    top: 0;
    right: 0;
}

#fInsta a {
    text-decoration: none;
}

#_overQ {
    height: 75px;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

#questions {
    position: relative;
    display: block;
    transition: .5s ease all;
    padding: 0 10px;
    max-width: 350px;
    margin: 0 auto;
}

#_questions.up {
    transform: translateY(-75px);
    transition: .5s ease all;
}

#sQ {
    opacity: 0;
    visibility: hidden;
    transition: .3s ease all;
}

#fQ {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

#questions.up #fQ {
    opacity: 0;
    visibility: hidden;
    transition: .3s ease all;
}

#questions.up #sQ {
    opacity: 1;
    visibility: visible;
    transition: .3s ease all;
}

#sakari-logo-min,
#menuLogoDaje {
    cursor: pointer;
}

#i-sublimio {
    position: absolute;
    bottom: 20px;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    margin-bottom: 20px;
}

.icuzza {
    width: 16px;
}

.bubble {
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
}

.bubble::before {
    background-color: #F2F2F2;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform: rotate( 29deg) skew( -35deg);
    -moz-transform: rotate( 29deg) skew( -35deg);
    -ms-transform: rotate( 29deg) skew( -35deg);
    -o-transform: rotate( 29deg) skew( -35deg);
    -webkit-transform: rotate( 29deg) skew( -35deg);
    width: 20px;
}

.me {
    float: left;
    margin: 5px 45px 5px 20px;
}

.me::before {
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4);
    left: -9px;
}

#site-preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background: #fff;
    z-index: 9999;
}

#site-preloader-bar {
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background: #F0F0F0;
}

.open #blocchi {
    transform: translateY(-31px);
    transition: .3s ease all;
}

#blocchi {
    transform: translateY(0);
    transition: .3s ease all;
    position: relative;
    display: block;
}

.open #sakarone {
    transform: translateY(0);
    transition: .3s ease all;
}

#sakarone {
    transform: translateY(42px);
    transition: .3s ease all;
}

#site-preloader-box {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    text-align: center;
}

site-preloader-image {
    transform-origin: center;
}

#news {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 800;
    opacity: 1;
    transition: .5s ease all;
    transform: translateY(-100%);
    transition-delay: 0s;
}

.canViewBo #news {
    transform: translateY(0);
    transition-delay: .9s;
}

#newsC {}

#newsC {
    max-width: 750px;
    background: #fff;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 10px 20px;
    width: 90%;
}

#newsCoco {
    max-width: calc(100% - 20px);
    overflow-x: auto;
    white-space: nowrap;
    padding-right: 30px;
    position: relative;
    display: inline-block;
    float: left;
}

#closeNews {
    float: right;
}

#closeNews img {
    width: 14px;
    height: 14px;
}

#newsData {
    font-family: Roboto-Medium;
    font-size: 10px;
    color: #BEBEBE;
    letter-spacing: 0;
    line-height: 22px;
    margin-right: 20px;
}

#newsContent {
    font-family: Roboto-Regular;
    font-size: 13px;
    color: #969696;
    letter-spacing: 0;
    line-height: 22px;
}

#newsContent a {
    color: #969696;
    text-decoration: underline;
}

#wrap {
    position: relative;
}

#wrap {
    opacity: 1;
}

#wrap.wrappo {
    opacity: 1;
    transition: .3s ease all;
}

#menuOver {
    border-radius: 0 0 16px 16px;
    position: fixed;
    width: 100vw;
    height: calc(100vh - 150px);
    background: white;
    z-index: 999;
    left: 0;
    top: 0;
    z-index: 7500;
    opacity: 0;
    transition: .5s ease all;
    visibility: hidden;
    transition-delay: .6s;
}

.open #menuOver {
    opacity: 1;
    transition: .3s ease all;
    visibility: visible;
}

#menuOverContent {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

.yop {
    display: inline-block;
}

.open .yop {
    transform: translateY(100px);
}

#lopo {
    stroke-dasharray: 1650;
    stroke-dashoffset: 1650;
}

.slide-bl {
    -webkit-transform: translateY(-100px) translateX(100px);
    transform: translateY(-100px) translateX(100px);
    transition: .5s ease all;
}

.open .slide-bl {
    -webkit-animation: slide-bl 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-bl 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-bl {
    0% {
        -webkit-transform: translateY(-100px) translateX(100px);
        transform: translateY(-100px) translateX(100px)
    }
    100% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
}

@keyframes slide-bl {
    0% {
        -webkit-transform: translateY(-100px) translateX(100px);
        transform: translateY(-100px) translateX(100px)
    }
    100% {
        -webkit-transform: translateY(100px) translateX(-100px);
        transform: translateY(0) translateX(0);
    }
}

.open #lopo {
    animation: draw2 5s cubic-bezier(0.190, 1.000, 0.220, 1.000) forwards;
    animation-delay: .3s;
}

@keyframes draw2 {
    to {
        stroke-dashoffset: 0;
    }
}

#pattozzo {
    position: absolute;
    right: -300px;
    top: 50%;
    transform: translateY(-50%);
}

#menuOverContent li {
    margin: 10px 0;
}

#menuOverContent li a {
    font-family: Roboto-Regular;
    font-size: 18px;
    color: #969696;
    letter-spacing: 0;
    line-height: 22px;
    transition: .3s ease color;
}

#menuOverContent li a:hover {
    color: #000;
    transition: .3s ease color;
}

#menuOverContent #menuLangs li a {
    font-family: Roboto-Bold;
    font-size: 10px;
    letter-spacing: 1px;
    text-align: right;
}

#menuOverContent #menuLangs li {
    margin-top: 5px;
    margin-bottom: 5px;
}

#menuOver ul {
    margin: 0;
    padding: 0;
}

#menuOver #menuLinks {
    margin: 120px 0px;
}

#menuOver #menuSocial {
    margin-left: 0px;
}

#menuOver ul,
#menuOver li {
    list-style: none;
}

#menuOver li {
    display: block;
}

#closeMenu {
    position: absolute;
    width: 100%;
    top: 70px;
}

#closeMenu .grid-container {
    padding-right: 1.9375rem;
    padding-left: 1.9375rem;
}

/* #bottom-carou {
    margin-top: 350px;
} */

#carou {
    margin-top: 0px;
    height: 350px;
    position: absolute;
    margin-left: -31px;
    width: 100vw;
    background-size: cover;
    background-position: center;
}

.slide {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

.grid-container {
    padding-right: 1.9375rem;
    padding-left: 1.9375rem;
}

#menu {
    z-index: 1001;
    position: fixed;
    width: 100%;
    padding: 0;
    padding: 15px 0;
    transition: .3s ease all;
    z-index: 8000;
}

.fixed #menu {
    _position: fixed;
    width: 100%;
    transform: translateY(-70px);
    background: #fff;
    transition: .3s ease all;
    top: 70px;
}

#menu .grid-container {
    padding-right: 1.9375rem;
    padding-left: 1.9375rem;
}

.s-hidden {
    visibility: hidden;
    padding-right: 10px;
    height: auto;
    margin: auto;
}

#sakari-logo {
    transform-origin: center;
    transform: rotate(0);
    width: 160px;
}

/* img#sakeImg {
    position: relative !important;
    margin: 0 auto;
    width: 55%;
    transform: translateX(0) translateY(0);
} */

.select {
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-family: Roboto-Bold;
    font-size: 10px;
    color: #969696;
    letter-spacing: 1.25px;
    line-height: 22px;
}

.styledSelect {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 60px;
    text-align: right;
    padding: 0 10px;
    font-weight: bold;
    height: 20px;
}

.options li {
    text-align: right;
}

.styledSelect:after {
    content: "";
    width: 5px;
    height: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 3px;
    background: url(../img/arrow.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.styledSelect:active,
.styledSelect.active {}

.options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 999;
    margin: 0 0;
    padding: 5px 0;
    list-style: none;
    text-align: left;
    background-color: white;
}

.options li {
    padding: 0 6px;
    margin: 0 0;
    padding: 5px 10px;
}

.options li:hover {
    background-color: #39f;
    color: white;
}

.start #section-intro {
    display: none;
}

.i-button {
    font-size: 12px;
    font-family: Roboto-Bold;
    margin: 0 auto;
    display: inline-block;
    margin: 0 7.5px;
    color: #969696;
    width: 80px;
    padding: 5px 0;
}

#buttons-intro {
    margin-top: 10px;
}

.i-button {
    background: transparent;
    border: 1px solid #969696;
    color: #969696;
    transition: .5s ease all;
}

.i-button:hover {
    background: #000;
    border: 1px solid #000;
    color: #fff;
    transition: .5s ease all;
}

#section-intro {
    background: #F1F1F1;
    z-index: 8001;
    position: fixed;
    height: 100vh;
    width: 100vw;
    overflow: auto;
    background-repeat: no-repeat;
    background-position: top center;
}

#section-intro .d2 img {
    position: absolute;
    z-index: -1;
}

.d1,
.d2,
.d3 {
    text-align: center;
}

.d2 {
    text-align: left;
}

#section-intro .grid-container {
    top: 50%;
    position: absolute;
    width: 100%;
    margin: 0 auto;
    left: 0px;
    right: 0;
    transform: translateY(-50%);
    max-width: 1100px;
    padding: 0;
}

#dIntro {
    margin: 0 auto;
    max-width: 900px;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

#text-intro {
    margin-top: 5px;
}

#section-intro .d1 {
    margin-top: -97px;
    z-index: 1;
}

#section-intro .d2 {
    margin-top: -390px;
}

#section-intro .d3 {
    margin-top: 21px;
}

#text-intro h3,
#text-intro p {
    font-family: Roboto-Bold;
    font-size: 16px;
    color: #000000;
    letter-spacing: 0;
    text-align: center;
    line-height: 22px;
    margin-bottom: 10px;
}

#text-intro p {
    color: #444444;
    font-family: Roboto-Regular;
}

html {
    width: 100%;
}

body {
    background: #F0F0F0;
    width: 100vw;
    overflow: auto; /* overflow: hidden; */
    width: 100%;
}

body.canView {
    overflow: auto;
    overflow-x: hidden;
    overflow-y: visible;
}

/*
.grid-container {
    padding-right: 1.9375rem;
    padding-left: 1.9375rem;
}
*/

#wrap {
    overflow-x: hidden;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    width: 100vw;
    margin: 0 auto;
    padding-top: 70px;
    _transform: translateY(100vh);
}

.grid-container {
    max-width: 1100px;
}

h1.title {
    font-family: 'Orbitron'; /* font-family: 'Mirador-SemiBold'; */
    font-size: 36px;
    color: #000000;
    letter-spacing: -0.09px;
    line-height: 42px;
    margin-bottom: 30px;
}

h1.title span {
    font-family: 'Mirador-BookItalic' !important;
}


#cursor {
    display: inline-block;
    font-weight: 400;
    color: #646464;
    animation: blink 0.8s infinite;
  }
  
  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
  




h2 {
    font-family: Mirador-SemiBold;
    font-size: 28px;
    color: #000000;
    letter-spacing: 0;
    line-height: 33px;
    margin-bottom: 30px;
    max-width: 320px;
}

section {
    position: relative;
    /*overflow: visible !important;*/
}

.wave {
    position: absolute;
    width: 110%;
    left: 0;
    right: 0;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

#rice {
    height: 450px;
    width: 450px;
    position: absolute;
    background-size: contain;
    top: -510px;
    left: -40%;
    background-repeat: no-repeat;
}

#water {
    background-image: url(img/water.png);
    transform: translate3d(0px, 0px, 0px);
    height: 400px;
    width: 400px;
    left: 30px;
    bottom: -90px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
}

#wave1 {
    bottom: 0;
    height: 234.67px;
    background-image: url("../img/wave1.svg");
    background-position: -780px;
}

#wave2 {
    background-image: url(img/_wave2.svg);
    height: 150.36px; /* height: 110.36px; */
    width: 100%;
    background-size: cover;
    background-position: -880px;
    position: absolute;
    top: -2px;
    background-repeat: no-repeat;
}

#wave4 {
    bottom: -2px;
    height: 180px; /*height: 155px;*/  /* height: 125.58px; */
    background-image: url("../img/wave4.svg");
}

#wave5 {
    height: 156.9px;
    top: -2px;
}

#wave6 {
    background-image: url(../img/wave6.svg);
    bottom: -2px;
    height: 362.43px;/* height: 262.43px; */
}

#wave7 {
    background-image: url(../img/wave7.svg);
    top: -3px; /*top: -2px;*/
    height: 176.51px; /* height: 76.51px; */
}

#wave8 {
    background-image: url(../img/wave8.svg);
    top: -2px;
    height: 170.05px; /* height: 114.05px; */
}

#wave9 {
    background-image: url(../img/wave9.svg);
    top: -1px;
    height: 174.18px; /* height: 74.18px; */
}

#tova {
    background-image: url(../img/bgT.png);
    background-size: contain;
    width: 1000px;
    height: 1000px;
    position: absolute;
    background-repeat: no-repeat;
    z-index: 0;
    top: -27%;
    left: -10%;
    top: -140px;
    left: -25vw;
    width: 150vw;
    height: 150vh;
}

.bottle-name-ita {
    margin-right: 0;
    margin-left: auto;
    position: absolute;
    right: 0;
    top: 300px;
    width: 65px;
    /* right: 10px; */
    /* right: -200px; */
}

.bottle-name-ita .bottle-name-jp {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 30px;
}

.bottle-name-ita span {
    writing-mode: vertical-lr;
    text-orientation: upright;
    -webkit-text-orientation: upright;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    font-family: Roboto-Bold;
    font-size: 8px;
    color: #A5A5A5;
    letter-spacing: 4px;
    line-height: 13px;
    text-transform: uppercase;
}

.leaf {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
}

#leafIntro {
    width: 600px;
    height: 600px;
    top: -500px;
    left: -480px;
}

#leaf1 {
    width: 80px;
    height: 80px;
    right: 40%;
}

#orb2 {
    width: 200px;
    height: 170px;
    right: -150px;
    top: 480px;
}

#orb1 {
    width: 500px;
    height: 620px;
    left: -380px;
    top: -384px;
}

#orb4 {
    width: 400px;
    height: 400px;
    top: 0px;
    left: -410px;
}

#orb5 {
    width: 600px;
    height: 600px;
    top: 22%;
    right: -510px;
}

#orb6 {
    width: 600px;
    height: 600px;
    top: 62%;
    left: -530px;
}

#leafCarou {
    width: 600px;
    height: 600px;
    top: -160px;
    left: -530px;
}

#leafU {
    width: 300px;
    height: 300px;
    right: -450px;
    top: -350px;
}

#heroSectionImageAboveCircle {
    height: 900px;    /* height: 450px; */
    width: 600px;    /* width: 228px; */
    position: absolute;
    background-size: contain;
    left: 44%;   /* left: -44%; */
    top: -700px; /* top: -600px; */
    background-repeat: no-repeat;
    z-index: 1;
    transform: rotate(0deg); /* transform: rotate(-12deg); */
    transform-origin: 50% 50%;
    transform: translate3d(0px, 101.164px, 0px) rotate(0deg);
    opacity: 1;
}


/* @media only screen and (min-width: 40.063em) {
    #heroSectionImageAboveCircle {
        height: 900px;
        width: 600px;
        left: 0;
        top: 0;
    }
} */


#heroSectionCircle {
    height: 663px;
    width: 120%;
    position: absolute;
    background-size: contain;
    left: -40px;
    top: -558px;
    z-index: 0;
    background-repeat: no-repeat;
    background-position: top center;
}

.glfF {
    position: relative;
    display: block;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 20px;
}

#glf {
    position: relative;
    width: 42px;
    margin-bottom: 60px;
    margin-left: 20px;
}

p {
    font-family: Roboto-Regular;
    font-size: 16px;
    color: #646464;
    letter-spacing: 0;
    line-height: 22px;
    margin-left: 20px;
    max-width: 350px
}

p.min {
    font-family: Roboto-Regular;
    font-size: 13px;
    color: #9B9B9B;
    letter-spacing: 0;
    line-height: 18px;
    margin-left: 20px;
    max-width: 350px;
    position: relative;
}

.seg {
    color: #3F3F3F;
    position: absolute;
    right: 0;
    top: -20px;
    font-size: 16px;
}

.overflow {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.products img.bbottle {
    position: absolute;
    height: 300px;
    width: auto;
    max-width: none;
    right: 60%;
}

.imgjp {
    margin-left: 20px;
}

.row-prod {
    margin-bottom: 100px;
}

.products img.bbottle.left {
    right: auto;
    left: -80%;
}

.products p {
    margin: 0;
}

.all-right {
    margin-left: 20px;
}

.products p {
    margin: 0;
}

.products p.ishei-product-text {
    margin-top: 30px;
    margin-bottom: 20px;
}

.products h4 {
    font-family: 'Mirador-SemiBold';
    font-size: 28px;
    line-height: 32px;
    color: #000000;
    margin-bottom: 0px;
}

.products h4 span {
    color: #646464;
    font-size: 24px;
    font-family: 'Mirador-Medium';
}

.products .ishei-min {
    font-family: Roboto-Bold;
    font-size: 10px;
    color: #646464;
    letter-spacing: 1.67px;
    line-height: 15px;
    text-transform: uppercase;
    margin-left: 0px;
}

.products .ishei-min.tw {
    font-family: Roboto-Bold;
    font-size: 10px;
    color: #9B9B9B;
    letter-spacing: 1.67px;
    line-height: 17px;
}

.products .ishei-min.tw span {
    color: #444;
}

.products .legends {
    margin-top: 30px;
    margin-bottom: 20px;
}

.products .legends span {
    cursor: pointer;
}

.products .imgjp {
    width: 23px;
}

a.a-button {
    font-family: Roboto-Bold;
    font-size: 9px;
    color: #9B9B9B;
    letter-spacing: 1.5px;
    text-align: center;
    border: 2px solid white;
    padding: 6px 20px;
    transition: .5s ease all;
}

a.a-button:hover {
    background: white;
    transition: .5s ease all;
}

#pin {
    background-image: url("../img/pin.svg");
    width: 20px;
    height: 22px;
}

.extra-info {
    position: relative;
    text-align: center;
    overflow: hidden;
}

.extra-info img {
    display: block;
    margin: 0 auto;
    max-height: 130px;
    margin: 20px auto;
}

.extra-info img.imgjp {
    margin-left: 40%; /*30px;*/
}

.bottle-info-right {
    height: 300px !important;
}

.bottle-info-right .extra-info {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
}

#s1 {
    margin-top: 140px;
    z-index: 3;
}

#s2 {
    /* background-image: url(img/Washi.png); */
    /* background-size: cover; */
    /* background-position: top; */
    z-index: 2;
    margin-top: 0px;
    padding-top: 80px; /* padding-top: 680px; */
    padding-bottom: 0px;
    /* background-color: red; */
}

#marginotto {
    padding-top: 550px;
}

#nature {
    margin-top: -130px;
    padding-top: 450px;
    padding-bottom: 250px;
    z-index: 1;
}

#history {
    background-image: url("../img/bk2.jpg");  /* background-image: url("../img/bg.jpg"); */
    background-size: auto 50%;
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #171717;
    padding-top: 50%; /* padding-top: 50%; */
    padding-bottom: 20%;
    z-index: 1;
}

#s5 {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../img/mappa_mobile.jpg"); 
    height: 150px; /* height: 400px; */
}

#location {
    padding-top: -200px;
}

#OurStory {
    /* background-image: url("../img/bg009.png"); */
    background-image: url("../img/ISHEIRoadRunner.png");
    background-size: auto 65%;
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #171717;
    padding-top: 100%;
    padding-bottom: 60%;
}

#OurStory .customHeading {
    font-family: 'Orbitron';
    font-weight: 1.5rem; /* bold;*/
    font-size: 1.7em;
    color: #3b3b3b;
    padding-bottom:20px;
}

#OurStory p {
    /* color: #9b9b9b; */
    /* color: #646464; gray */
    color: #5a5a5a;
}

#OurStory a {
    color: #9b9b9b;
    text-decoration: underline;
    overflow: hidden;
}

#our-story-img {
        width: 400px;
        height: auto;
        /* object-fit: cover; */
        /* border-radius: 50%; */
        background-color: transparent;
        background-blend-mode: multiply;
      }


#products {
    /* padding-top: 80px; */
    overflow: hidden;
    z-index: 1;
}

#s9 {
    _height: 1200px;
    background-image: url("../img/bg_testimonials.jpg");
    background-size: auto 50%;
    background-position: top center;
    overflow: hidden;
    background-color: #171717;
    background-repeat: no-repeat;
    overflow: visible;
    z-index: 1;
}

#carousel-wrap {
    padding-top: 700px;
    padding-bottom: 150px;
}

.carousel-content {
    width: 100%;
    margin: 0 20px;
    padding: 0 5px;
}

.carousel-content p {
    font-family: 'Mirador-BookItalic';
    font-size: 24px;
    /*color: #646464;*/
    color: #fff;
    letter-spacing: 0;
    line-height: 33px;
    max-width: 100%;
    margin-bottom: 30px;
    margin-left: 0;
}

.carousel-content p span {
    color: #646464;
}

.carousel-content p.min {
    font-family: Roboto-Regular;
    font-size: 16px;
    color: #9B9B9B;
    letter-spacing: 0;
    line-height: 22px;
}

.carousel-content p.min span {
    color: #FFFFFF;
}

#s10 {
    overflow: hidden;
    position: relative;
    height: 750px;
}

#contact {
    background: white;
}

.footer-content {
    padding-top: 120px;
    padding-bottom: 130px;
}

#askDiv {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 40%;
    max-width: 900px;
    text-align: center;
    /*
    max-width: 700px;
    top: 65%;
    */
    width: 100%;
}

#ask .title {
    margin-bottom: 0px;
}

#ask {
    position: absolute;
    text-align: left;
    width: 50%;
    top: 50%;
    transform: translateY(-50%);
}

#askImg {
    position: absolute;
    width: 50%;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
}

#logo-small-b {
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    top: 50%;
}

#wb {
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-image: url("../img/wave3.svg");
    height: 120.8px; /* height: 77.8px; */
    top: -1px;
}

.tete h5 {
    margin-top: 10px;
    margin-bottom: 20px;
    font-family: Roboto-Bold;
    font-size: 10px;
    color: #000000;
    letter-spacing: 1.67px;
    line-height: 15px;
}

.tete p {
    font-family: Roboto-Regular;
    font-size: 16px;
    color: #646464;
    letter-spacing: 0;
    line-height: 22px;
    max-width: auto;
    margin-left: 0;
    margin-bottom: 70px;
}

/*TOOLTIP*/

/* Tooltip container */

.mtooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */

.mtooltip .tooltiptext {
    transition: .5s ease all;
    transform: translateY(-0px) translateZ(0);
    visibility: hidden;
    width: 135px;
    background-color: #fff;
    color: #9B9B9B;
    text-align: center;
    padding: 5px 0 3px 0;
    border-radius: 0px;
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -68px;
    /* Fade in tooltip */
    opacity: 0;
    -webkit-box-shadow: 0px 2px 4px 0px rgba( 178, 178, 178, .4);
    -moz-box-shadow: 0px 2px 4px 0px rgba( 178, 178, 178, .4);
    box-shadow: 0px 2px 4px 0px rgba( 178, 178, 178, .4);
    font-family: Roboto-Bold;
    font-size: 8px !important;
    color: #9B9B9B;
    letter-spacing: 1.33px;
    text-align: center;
    backface-visibility: hidden;
}

/* Tooltip arrow */

.mtooltip .tooltiptext::before {
    content: "";
    position: absolute;
    top: 75%;
    left: 50%;
    margin-left: -5px;
    /*border-width: 5px; 
     border-style: solid; 
     border-color: #fff transparent transparent transparent; */
    /*width: 10px;
    height: 10px;*/
    background: white;
    transform: rotate(45deg);
    -webkit-box-shadow: 2px 2px 2px 0 rgba( 178, 178, 178, .4);
    -moz-box-shadow: 2px 2px 2px 0 rgba( 178, 178, 178, .4);
    box-shadow: 2px 2px 2px 0 rgba( 178, 178, 178, .4);
    z-index: 0;
    backface-visibility: hidden;
    width: 10px;
    height: 10px;
}

/* Show the tooltip text when you mouse over the tooltip container */

.mtooltip:hover .tooltiptext {
    font-family: Roboto-Bold;
    font-size: 8px;
    visibility: visible;
    opacity: 1;
    transition: .5s ease all;
    transform: translateY(0) translateZ(0);
    backface-visibility: hidden;
    z-index: 1;
}

/*FINE TOOLTIP*/

#s9 .credits {
    position: absolute;
    transform: translateY(-80px);
    font-size: 10px;
}

.flickity-page-dots {
    margin-top: 20px;
    position: relative;
    text-align: center;
}

.flickity-page-dots .dot {
    width: 20%;
}

.flickity-page-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 8px;
    background: #333;
    border-radius: 50%;
    opacity: .25;
    cursor: pointer;
}

.flickity-page-dots .dot {
    opacity: 1;
    width: 20%;
    margin-left: 0px;
    height: 4px;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    height: 20px;
    max-width: 100px;
    display: inline-block;
}

.flickity-page-dots .dot {
    background: transparent;
}

.fill {
    background: #fff;
}

.pre-fill {
    position: absolute;
    height: 2px;
    top: 8px;
    width: 100%;
    background: #646464;
}

.flickity-page-dots .dot .fill {
    width: 0;
    height: 100%;
    position: absolute;
    height: 2px;
}

.footer {
    font-family: Roboto-Regular;
    font-size: 13px;
    color: #9B9B9B;
    letter-spacing: 0;
    line-height: 17px;
    margin: 0;
}

.footer span {
    display: block;
    color: #9B9B9B;
}

.footer a {
    color: #9B9B9B;
    text-decoration: underline;
}

.footer .f-title {
    font-family: Roboto-Bold;
    color: #444444;
    margin-bottom: 20px;
}

.footer .f-title.gray {
    color: #9B9B9B;
}

.footer .f-p-j {
    margin: 30px 0;
}

.footer .wtb .f-p {
    margin-bottom: 5px;
}

.footer .wtb {
    margin: 10px 0;
}

.footer .wtb.tomin {
    margin: 10px 0;
    margin-top: 0;
}

.footer span.mini {
    font-family: Roboto-Bold;
    font-size: 8px;
    color: #646464;
    letter-spacing: 1.14px;
}

.fader {
    position: relative;
    padding-top: 60%;
    overflow: hidden;
}

.fader .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    z-index: 1;
    opacity: 0;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
}

.fader img.slide {
    height: auto;
}

.fader .prev,
.fader .next {
    position: absolute;
    height: 80px;
    line-height: 55px;
    width: 50px;
    font-size: 100px;
    text-align: center;
    color: #fff;
    top: 50%;
    left: 0;
    z-index: 4;
    margin-top: -25px;
    cursor: pointer;
    opacity: .7;
    transition: all 150ms;
}

.fader .prev:hover,
.fader .next:hover {
    opacity: 1;
}

.fader .next {
    left: auto;
    right: 0;
}

.fader .pager_list {
    position: absolute;
    width: 100%;
    height: 40px;
    line-height: 40px;
    bottom: 0;
    text-align: center;
    z-index: 4;
}

.fader .pager_list li,
.fader .page li {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 7px;
    background: #fff;
    opacity: .7;
    text-indent: -999px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 150ms;
}

.fader .pager_list li:hover,
.fader .pager_list li.active {
    opacity: 1;
}

.open #scrollUp {
    display: none;
}

#scrollUp {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 100%;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    transition: .3s ease all;
}

.canView.fixed #scrollUp {
    opacity: 1;
    transition: .3s ease all;
}

#scrollUp svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: .3s ease all;
}

#scrollUp:hover {
    background: #979797;
    transition: .3s ease all;
}

#scrollUp:hover #strokaus {
    stroke: #fff;
    transition: .3s ease all;
}

#sakari-logo-min {
    opacity: 1;
    transition: .2s ease all;
    transition-delay: 1s;
}

#flag {
    width: 70px;
}

#menuLinks .yop.active {
    color: #000;
}

#privacy {
    position: fixed;
    /* background: white; */
    z-index: 10000;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    transform: translateY(150%);
    transition: .5s ease all;
    opacity: 0;
    visibility: hidden;
    margin: 0 auto;
    top: 50%;
}

#privacy p {
    margin-left: 0;
    max-width: none;
    font-size: 14px;
}

#privacy.open {
    transform: translateY(-50%);
    opacity: 1;
    visibility: visible;
    transition: .5s ease all;
}


#overflowwo {
    max-width: 900px;
    max-height: 800px;
    margin: 0 auto;
    background: white;
    height: 100%;
    width: 100%;
    padding: 20px;
    padding-top: 50px;
    position: relative;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2);
    -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2);
    box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2);
    top: 50%;
    transform: translateY(-50%);
}

#closePrivacy {
    position: absolute;
    right: 20px;
    top: 12px;
}

#overflowwo-inside {
    overflow: auto;
    background: white;
    height: 100%;
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
}

#davvero-dentro {
    max-width: 720px;
    margin: 0 auto;
}

#privacy ol {
    list-style: decimal;
    list-style-position: outside;
}

#privacy ol li {
    color: #646464;
    font-family: 'Roboto-Regular';
}

#privacy strong {
    font-family: 'Mirador-SemiBold';
    color: #000;
}


#heroSectionCircle {
    height: 663px;
    width: 100%;
    position: absolute;
    background-size: contain;
    left: 0;
    top: 410px;
    z-index: 0;
    background-repeat: no-repeat;
    background-position: top center;
}



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

/*MEDIA QUERRIES FOR THE VERTICAL NAME*/
/* @media only screen and (min-width: 2000px) {
    .bottle-name-ita {
        margin-top: -60px;
        right: -5px;
    }
} */

/* 1999px | 125em*/
/* @media (min-width: 1999px) {
    .bottle-name-ita {
        margin-top: -60px;
        right: 10px;
    }    
}

@media only screen and (min-width: 1964px) {
    .bottle-name-ita {
        margin-top: -60px;
        right: 10px;
    }
}

@media only screen and (max-width: 1410px) {
    .bottle-name-ita {
        margin-top: -60px;
        right: -120px;
    }
}

@media only screen and (min-width: 1228px) {
    .bottle-name-ita {
        margin-top: -60px;
        right: -130px;
    }
} */


p.HeroSection-Small-Text, p.min{
    margin-left: 0;
}



/* ***************************************************************************************************** */
/*MEDIA QUERRIES*/
@media only screen and (min-width: 40.063em) {
    #heroSectionCircle {
        height: 450px;
        width: 450px;
        left: auto;
        right: -8%;
        top: -46%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: -1;
    }
    
    #caroDida {
        text-align: right;
        position: absolute;
        right: 0;
        top: 710px;
        padding-right: 70px;
    }
    #location .cello {
        padding: 0 70px;
    }
    #location .cello p {
        max-width: auto !important;
    }
    .footer .wtb.tomin {
        margin: 10px 0;
        margin-top: 10px;
    }
    #_askImg img {
        width: 400px;
        max-width: none;
        margin-left: -200px;
    }
    #tWhere {
        margin-top: 0px;
    }
    /* img#sakeImg {
        width: 75%;
    } */
    #sakari-logo {
        transform-origin: center;
        transform: rotate(0);
        width: 190px;
    }
    #s1 {
        margin-top: 180px;
    }
    .footer-content {
        padding-top: 170px;
    }
    #s10 {
        height: 900px;
    }
    #s5 {
        background-image: url("../img/mappa.jpg");
    }
    #menuOver {
        border-radius: 6px;
        width: 95vw;
        height: 92vh;
        left: 2.5vw;
        top: 4vh;
    }
    #pattozzo {
        right: -140px;
    }
    #backPros {
        background: none;
        height: auto;
    }
    #section-intro {
        overflow: hidden;
    }
    .bottle-name-ita {
        top: 0px;
    }
    #nature {
        margin-top: -300px;
    }
    /* #history {
        padding-top: 40%;
        padding-bottom: 10%;
    } */
    #history {
        padding-top: 15%; /* padding-top: 10%; */
        padding-bottom: 1%;
    }
    #fInsta {
        position: relative;
        margin-top: 60px;
        margin-bottom: 30px;
    }
    #menuOver #menuLinks {
        margin: 120px 0px;
    }
    #menuOver #menuSocial {
        margin-left: 0px;
    }
    .open #sakari-logo-min {
        opacity: 0;
        transition-delay: 0s;
    }
    #section-intro .d1 {
        margin-top: 0;
    }
    #section-intro .d2 {
        margin-top: 0;
    }
    #section-intro .d3 {
        margin-top: 0;
    }
    #marginotto {
        padding-top: 0px;
    }
    #menu {
        padding: 0;
    }
    .fixed #menu {
        top: 70px;
        background: transparent;
        transform: translateY(0px);
    }
    .grid-container {
        padding-right: 5.9375rem;
        padding-left: 5.9375rem;
    }
    h1.title {
        font-size: 40px;
    }
    #heroSectionImageAboveCircle {
        height: 700px;
        width: 700px;
        left: 35%;
        top: -800px;
    }
    
    /* #heroSectionImageAboveCircle {
        height: 600px;
        width: 300px;
        left: 68%;
        top: -1280px;
    } */

    

    #heroSectionCircle {
        /* height: 1003px;
        width: 769px;
        left: 33%;
        top: -990px; */
        height: 1200px;
        width: 780px;
        left: 40%;
        top: -990px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .bottle-name-ita {
        margin-top: -60px;
        right: 10px; /* right: -120px */
    }
    #s2 {
        /* margin-top: -80px; */
        /* padding-top: 800px; */
        /* padding-bottom: 300px; */
    }
    #orb1 {
        width: 550px;
        height: 670px;
        left: -500px;
        top: -184px;
    }
    #orb2 {
        /* width: 200px;
        height: 170px;
        right: -200px;
        top: 80px; */
        width: 300px;
        height: 270px;
        right: -150px;
        top: 110px;
    }
    #wave1 {
        background-position: top center;
    }
    #wave2 {
        background-position: bottom center;
    }
    #rice {
        height: 500px;
        width: 500px;
        top: -230px;
        left: -210px;
    }
    #history {
        background-size: 99%;
    }
    #s5 {
        height: 900px;
    }
    #water {
        background-image: url(img/water.png);
        transform: translate3d(0px, 0px, 0px);
        height: 500px;
        width: 500px;
        left: -60px;
        bottom: 0px;
        position: absolute;
        background-size: contain;
        background-repeat: no-repeat;
    }
    #carou {
        margin-top: 120px;
        height: 550px;
        width: 100%;
        margin-left: 20px;
        width: 75vw;
    }
    /* Old Code */
    /* #bottom-carou {
        margin-top: 850px;
    } */

    #bottom-carou {
        margin-top: 85px;
    }

    /* #location {
        padding-top: 80px;
    } */
    #OurStory {
        background-size: 100%;
        background-position: top center;
        padding-top: 30%;
        padding-bottom: 20%;/* padding-bottom: 30%; increase value on smaller screens for more space*/ 
    }
    #section-intro .grid-container {
        left: 50px;
    }
    /* img#sakeImg {
        position: absolute !important;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 39%;
        transform: translateX(47px) translateY(-50%);
        top: -66%;
    } */
    .bottle-info-right .divo {
        position: absolute;
        width: 280px;
        height: 100%;
        right: 0;
    }
    .bottle-info-right.left .divo {
        position: absolute;
        width: 280px;
        height: 100%;
        right: auto;
        left: 0;
    }
    .bottle-info-right .extra-info {
        left: auto;
        right: 0;
    }
    /* .products img.bbottle {
        height: 100%;
        left: -234px;
        right: auto;
    } */
    .products img.bbottle {
        top: 15%;
        height: auto;
        width: 250px;
        left: -40%;
        right: auto;
    }
    .bottle-info-right {
        height: auto !important;
    }
    .bottle-info-right.left .extra-info {
        left: 0;
        right: auto;
    }
    /* .products .bottle-info-right.left img.bbottle {
        right: 0;
        left: auto;
        left: 150px;
    } */
    .products .bottle-info-right.left img.bbottle {
        right: 0;
        /* left: auto; */
        /* top: 50px;
        left: 150px; */
        top: 15%;
        left: 55%;
        height: auto;
        width: 250px;
    }
    .bottle-info-right.left .imgjp {
        margin-right: 40%;/*30px;*/
        margin-left: auto;
    }
    .row-prod {
        margin-bottom: 190px;/* margin-bottom: 300px; */
    }
    #products {
        /* padding-top: 200px; */
    }
    #s9 {
        background-size: cover;
        background-position: bottom center;
    }
    #carousel-wrap {
        padding-bottom: 300px;
    }
    .flickity-page-dots {
        margin-top: 50px;
        text-align: left;
    }
    .flickity-page-dots .dot {
        width: 10%;
        margin-left: 5px;
    }
    #tova {
        top: -40vh;
        left: -15vw;
        width: 100vw;
        height: 100vh;
    }
    #askDiv {
        top: 50%;
    }
    #leafIntro {
        width: 600px;
        height: 600px;
        top: -500px;
        left: -380px;
    }
    #leaf1 {
        width: 80px;
        height: 80px;
        right: 40%;
    }
    #orb2 {
        /* width: 200px;
        height: 170px;
        right: -150px;
        top: 130px; */
        width: 300px;
        height: 270px;
        right: -150px;
        top: 110px;
    }
    #orb1 {
        /* width: 500px;
        height: 620px;
        left: -380px;
        top: -614px; */
        width: 950px;
        height: 920px;
        left: -380px;
        top: -694px; /* top: -494px; */
    }
    #orb4 {
        width: 400px;
        height: 400px;
        left: -360px;
    }
    #orb5 {
        width: 600px;
        height: 600px;
        right: -510px;
    }
    #orb6 {
        width: 600px;
        height: 600px;
        left: -450px;
    }
    #leafCarou {
        width: 600px;
        height: 600px;
        top: -440px;
        left: -430px;
    }
    #leafU {
        width: 300px;
        height: 300px;
        right: -450px;
        top: -350px;
    }
    .footer .grid-container {
        padding-right: 4.5rem;
        padding-left: 4.5rem;
    }
    .footer .grid-margin-x>.cell {
        margin-left: .9375rem;
        margin-right: .9375rem;
    }
    .carousel-content p {
        font-size: 28px;
    }
}


/* only screen and (min-width: 1300px) */
@media only screen and (min-width: 1300px) {
    #sakari-logo {
        margin-left: 55px;
    }
    #leafIntro {
        width: 600px;
        height: 600px;
        top: -500px;
        left: -480px;
    }
    #leaf1 {
        width: 120px;
        height: 120px;
        right: 44.8%;
        top: -55px;

        /* width: 80px;
        height: 80px;
        right: 40%; */
    }
    #orb2 {
        width: 200px;
        height: 170px;
        right: -150px;
        top: 110px;
    }
    #orb1 {
        /* width: 500px;
        height: 620px;
        left: -380px;
        top: -294px; */
        width: 950px;
        height: 920px;
        left: -380px;
        top: -840px;/*top: -694px;*/ /* top: -494px; */
    }
    #orb4 {
        width: 400px;
        height: 400px;
        left: -410px;
    }
    #orb5 {
        width: 600px;
        height: 600px;
        right: -510px;
    }
    #orb6 {
        width: 600px;
        height: 600px;
        left: -530px;
    }
    #leafCarou {
        width: 600px;
        height: 600px;
        top: -440px;
        left: -530px;
    }
    #leafU {
        width: 300px;
        height: 300px;
        right: -450px;
        top: -350px;
    }
}

/*LARGE*/
@media only screen and (min-width: 1400px) {
    #s1 {
        margin-top: 230px;
    }
}

/*XLARGE*/
@media only screen and (min-width: 2000px) {
    #caroDida {
        top: 1010px;
    }
    #carou {
        margin-top: 220px;
        height: 750px;
    }
    #bottom-carou {
        margin-top:250px;  /* margin-top: 1150px; */
    }
    #s5 {
        height: 1100px;
    }
    .grid-container {
        max-width: 1300px;
    }
    rice {
        height: 500px;
        width: 600px;
        top: -230px;
        left: -180px;
    }
    #water {
        height: 500px;
        width: 600px;
        left: 20px;
        bottom: 70px
    }
    #heroSectionCircle {
        left: 38%;
        top: -1020px;
    }
}



/*IPADS PORTRAIT*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1096px) and (orientation: portrait) {
    #caroDida {
        top: 670px;
    }

    .bottle-name-ita {
        display: none;
    }
}

/* FROM PHONE TO AT LEAST 1100PX MAKE THE VERTICAL LOGO VANISH */
@media only screen and (min-device-width: 300px) and (max-device-width: 1099px) {
    .bottle-name-ita {
        display: none;
    }
}

 /*  */
 @media only screen and (min-device-width: 1100px) {
    .bottle-name-ita {
        right: -115px;
    }
}

@media only screen and (min-device-width: 1999px) {
    .bottle-name-ita {
        right: 10px;
    }
}


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

/* Tablet and below (approx. your current view size) */
/* max-width: 1232px */
@media only screen and (max-width: 1300px) {
    /* Adjust padding, font-sizes, image sizes, and layout shifts here */
    #orb4 {
        width: 310px;
        height: 310px;
        left: 80px;
    }

    #orb5 {
        width: 400px;
        height: 400px;
        right: -150px;
    }
    
    /* wave above the footer */
    #wave9 {
        background-image: url(../img/wave9.svg);
        top: -1px;
        height: 120px;
        /* height: 74.18px; */
    }
  }


  @media only screen and (max-width: 1230px) {
    #heroSectionCircle {
        height: 950px;
        width: 680px;
        left: 45%;
        top: -950px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    #heroSectionImageAboveCircle {
        height: 600px;
        width: 600px;
        left: 42%;
        top: -800px;
    }

    #orb1 {
        width: 950px;
        height: 920px;
        left: -350px;
        top: -694px;
        /* top: -494px; */
    }
  }
  

  /* Mid-tablets / Small laptops */
  @media only screen and (max-width: 1024px) {
    /* Stack elements vertically, reduce gaps/margins */

    /* hero section circle */
    #heroSectionCircle {
        height: 750px;
        width: 680px;
        left: 45%;
        top: -820px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* hero section - double jackets */
    #heroSectionImageAboveCircle {
        height: 560px;
        width: 560px;
        left: 45%;
        top: -770px;
    }

    /* hero section - two left orbs */
    #orb1 {
        width: 850px;
        height: 820px;
        left: -290px;
        top: -694px;
        /* top: -494px; */
    }

    /* hero section - bottom right orb */
    #orb2 {
        width: 300px;
        height: 270px;
        right: -50px;
        top: 170px;
    }

    /* above the OurStory section */
    #wave5 {
        height: 115px;
        top: -2px;
    }

    /* below the OurStory section */
    #wave6 {
        background-image: url(../img/wave6.svg);
        bottom: -2px;
        height: 250px;
    }

    /* products 1st image */
    .products img.bbottle {
        top: 17%;
        height: auto;
        width: 230px;
        left: -30%;
        right: auto;
    }

     /* products 2nd image */
    .products .bottle-info-right.left img.bbottle {
        right: 0;
        /* left: auto; */
        top: 17%;
        left: 50%;
        height: auto;
        width: 230px;
    }
  }
  

  @media only screen and (max-width: 925px) {
    /* hero section - left orbs */
    #orb1 {
        width: 750px;
        height: 720px;
        left: -290px;
        top: -694px;
        /* top: -494px; */
    }

    /* hero section - circle */
    #heroSectionCircle {
        height: 650px; /* height: 750px; */
        width: 680px;
        left: 50%;
        top: -820px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* hero section -  two jackets */
    #heroSectionImageAboveCircle {
        height: 460px;
        width: 460px;
        left: 50%;
        top: -770px;
    }

    /* ======================= OUR STORY SECTION =======================*/

    /* OurStory Flexbox Container Div */
    #OurStoryFlexboxDiv{
        margin-top: 10%;
    }

    #our-story-img {
        width: 100%;
    }

    /* #our-story-img {
        width: 100%;
        margin-bottom: 50%;
    } */

    /* #OurStoryFlexboxDiv {
        margin-top: 50%;
    } */
    
    /* ======================= PRODUCTS SECTION =======================*/
    #firstProduct {
        margin-left: 30px;
    }

    /* space between both products */
    .row-prod {
        margin-bottom: 150px;
        /* margin-bottom: 300px; */
    }

    #secondProduct {
        margin-left: 50px;
    }

    /* product section - right hand orb */
    #orb5 {
        width: 350px;
        height: 350px;
        right: -170px;
    }

    /* product section - left hand orb */
    #orb4 {
        width: 300px;
        height: 400px; /* height: 300px; */
        left: 50px;
    }
    

    /* #wave6 {
        background-image: url(../img/wave6.svg);
        bottom: 30px;
        height: 250px;
        background-color: #ffc0cb8c;
    } */

    #wave6 {
        background-image: url(../img/wave6.svg);
        bottom: -30px;
        height: 250px;
        /* top: -20px; */
        /* background-color: #ffc0cb8c; */
    }

    #OurStory {
        background-image: url('../img/ISHEIRoadRunner.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
        background-color: #171717;
        min-height: 80vh; /* min-height: 100vh;  */
        padding-top: 15%; /* padding-top: 15%; */
        /* padding-bottom: 30%; */
    }
  }


  @media only screen and (max-width: 867px) {
    /* product section  */
  
    /* product section -  first product */
    #firstProduct {
        margin-left: 0;
    }

    /* product section - left orb */
    #orb4 {
        width: 300px;
        height: 400px;
        left: 10px;
    }

    #productNoTwoIsheiMinMainTitle {
        margin-left: 50px;
    }

    #productNoTwoIsheiMinSubTitle{
        margin-left: 50px; 
    }
    
    } 


    @media only screen and (max-width: 787px) {
        /* Hero section - Orbs left side */
        #orb1 {
            /* top: -594px; */
        }

        /* Hero section - Orb right side */
        #orb2 {
            width: 280px;
            height: 230px;
            right: -60px;
            top: 200px;
        }
        /* product section  */
      
        /* product section -  first product [material circle] */
        #ProductOneMaterialCircle {
            display: block;
            margin: 0 auto;
            max-height: 50px;
            margin: 40px 5px auto;
            /* z-index: 10; */
        }

        /* product section -  first product [Vertical Logo] */
        #ProductOneVerticalLogo {
            margin-left: 40%;
            max-height: 100px;
        }


        /* product section -  first product [Product Image] */
        #productNoOneImage {
            top: 17%;
            height: auto;
            width: 250px;
            left: -40px; /* left: -10%; */
            right: auto;
        }


        /* product section -  first product [Vertical Logo + Material Circle] */
        #ProductOneVerticalLogoAndMaterialCircleContainer {
            left: 80%;
            right: 0;
        }
    
        /* product section -  SECOND product [Material Circle Logo] */
        #ProductTwoMaterialCircle {
            max-height: 50px;
            margin: 40px 5px auto;
        }

        /* product section -  SECOND product [Vertical Logo] */
        #ProductTwoVerticalLogo {
            /* margin-left: 40%; */
            max-height: 100px;
        }

        /* product section -  SECOND product [Vertical Logo] */
        #productNoTwoImage {
            top: 20%;
            height: auto;
            width: 250px;
            left: 30%;
        }

        /* product section -  SECOND product [Vertical Logo] */

        /* product section -  SECOND product [Vertical Logo] */

        /* product section -  SECOND product [Vertical Logo] */

    } 

/* @media only screen and (max-width: 787px) {*/
@media only screen and (max-width: 683px) {

    /* Hero Section - left orbs */
    #orb1 {
        left: -280px;
        top: -780px;
    }

    #heroSectionCircle {
        top: -970px;
    }

    #heroSectionImageAboveCircle {
        top: -940px;
    }

    /* Our Story Section - IMAGE  */
    #our-story-img {
        margin-bottom: 35%;
    }

    #ProductOneVerticalLogoAndMaterialCircleContainer {
        top: 40%;
    }

    #productNoOneImage {
        width: 240px;
        left: -20px;
    }

    #productNoTwoImage {
        left: 15%;
    }

    #ProductTwoVerticalLogoAndMaterialCircleContainer{
        top: 40%;
        left: -40px;
    }
} 

@media only screen and (max-width: 640px) {

/* -------------------------------- HERO SECTION -------------------------------- */

/* Circle */
#heroSectionCircle {
    height: 550px;
    width: 580px;
    left: 50%;
    top: -770px;
}

/* Both Jackets */
#heroSectionImageAboveCircle {
    height: 460px;
    width: 360px;
    left: 50%;
    top: -820px;
}

/* Hero section - Two Orbs - left side  */
/* #orb1 {
    width: 650px;
    height: 720px;
    left: -290px;
    top: -500px;
} */
#orb1 {
    left: -420px;
    top: -650px;
}

/* Hero section - Single Orb - Right side  */
#orb2 {
    width: 250px;
    height: 270px;
    right: -10px;
    top: 170px;
}

/* Our Story Section */
#OurStory {
    padding-bottom: 1%;
}

#photoCreditsSection {
    display: none;
}

/* -------------------------------- 1st PRODUCT SECTION -------------------------------- */

/* Material Circle + Vertical Logo */
#productNoOneTextSection {
    margin-top: 10%;
    margin-left: 10%; /* margin-left: 25%; */
}

/* Product Image + Logo Container */
#productNoOneImageSection {
    margin-left: 30%;
}

/* Product Image */
#productNoOneImage {
    width: 240px;
    left: 13%;
}

/* Vertical Logo + Material Circle */
#ProductOneVerticalLogoAndMaterialCircleContainer {
    top: 70%;
    left: -4%;
}

/* Vertical Logo */
#ProductOneVerticalLogo {
    margin-left: 3%;
}

/* -------------------------------- 2nd PRODUCT SECTION -------------------------------- */

#productNoTwoTextSection {
    margin-top: 10%;
    margin-left: 10%;
}

#productNoTwoImageSection {
    margin-left: 30%;
}

#ProductTwoVerticalLogoAndMaterialCircleContainer {
    top: 70%;
    left: -25px;
}

#ProductTwoVerticalLogo{
    margin-left: 25%;
}
}

@media only screen and (max-width: 580px) {
    #orb1 {
        left: -500px;
        top: -650px;
    }

    #heroSectionImageAboveCircle {
        height: 360px;
        width: 360px;
        left: 45%;
        top: -855px; /* top: -780px; */
    }


    #heroSectionCircle{
        height: 500px;
        width: 500px;
        left: 50%;
        top: -770px;
    }
}

@media only screen and (max-width: 485px) {
    /* left orb */
    #orb1 {
        left: -420px;
        top: -650px;
    }

    /* right orb */
    #orb2 {
        width: 200px;
        height: 250px;
        right: -10px;
        top: 210px;
    }

}

@media only screen and (max-width: 425px) {

    #HeroSectionSubHeadingOne{
        font-size: 1.8rem; /* or try 20px */
      }
    
    #HeroSectionSubHeadingTwo{
        font-size: 1.5rem; /* or try 16px */
      }

      #heroSectionCircle {
        top: -800px;
    }
}

@media only screen and (max-width: 403px) {
    #orb1 {
        width: 500px;
        height: 620px;
        left: -340px;
        left: -340px;
        top: -650px; /* top: -590px;top: -710px; top: -620px; */
    }
    

    #heroSectionImageAboveCircle {
        height: 310px;  /* height: 340px; */
        width: 340px;
        left: 40%; /* left: 48%; */
        top: -865px;
    }

    #heroSectionCircle {
        top: -890px; /* top: -860px; */
    }
}

@media only screen and (max-width: 352px) {
    #heroSectionImageAboveCircle {
        height: 310px;
        top: -890px;
    }


}

@media only screen and (max-width: 333px) {
    #heroSectionImageAboveCircle {
        height: 300px;
        left: 42%;
        top: -900px; /* top: -845px; */
    }

    #HeroSectionVerticalLogo{
        display: none;
    }
}

@media only screen and (max-width: 318px) {
    #heroSectionImageAboveCircle {
        height: 270px;
        left: 44%;
        /* top: -850px; */
    }

    #orb2 {
        width: 150px;
        height: 150px;
        right: -10px;
        top: 240px;
    }
}

@media only screen and (max-width: 305px) {
    #heroSectionImageAboveCircle {
        height: 250px;
        left: 46%;
        top: -900px;
    }

    #heroSectionCircle {
        top: -950px;
    }

    #orb1 {
        top: -650px;
    }
}

@media only screen and (max-width: 288px) {
    #heroSectionCircle {
        top: -1000px;
    }

    #heroSectionImageAboveCircle {
        left: 48%;
        top: -950px;
    }

    #orb1 {
        width: 400px;
        height: 420px;
        left: -270px;
        top: 695px;
    }

    #orb2 {
        top: 290px;
    }
}

@media only screen and (max-width: 430px) {
#allProductsContainer{
    margin-left:-10%;
}

#productNoOneImage {
    width: 210px;
    left: 20%;
    top: 30%;
}

#productNoTwoTextSection {
    margin-left: -10%;
}

#productNoTwoImage {
    top: 30%;
    width: 210px;
    left: 20%;
}
}


  /* Phones (landscape) */
  @media only screen and (max-width: 768px) {
    /* Make text smaller, images 100% width, reduce padding */

    #OurStory {
        background-image: url('../img/ISHEIRoadRunner.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
        background-color: #171717;
        min-height: 80vh; /* min-height: 100vh;  */
        padding-top: 15%; /* padding-top: 15%; */
        /* padding-bottom: 30%; */
    }
  }