/*  
Web:          Original Maraschino
Author:       BozooArt
Author URI:   https://www.bozooart.com
*/



:root {   
    --bordo:  #A32436;
    --external: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA3LjYgNy43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3LjYgNy43OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxnPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTQuOCwwLjhoMC44aDAuN0M2LjEsMS4xLDUuOSwxLjMsNS42LDEuNkM1LjIsMS45LDQuOSwyLjMsNC41LDIuN2MtMC4zLDAuMy0wLjcsMC43LTEsMUMzLjQsMy44LDMuMiw0LDMsNC4xCgkJYzAsMCwwLDAsMCwwQzIuOSw0LjMsMi45LDQuNSwzLDQuNmMwLjEsMC4xLDAuNCwwLjEsMC41LDBjMC4xLTAuMSwwLjMtMC4zLDAuNC0wLjRjMC4zLTAuMywwLjYtMC42LDAuOS0wLjlDNS4yLDIuOSw1LjYsMi42LDYsMi4yCgkJYzAuMy0wLjMsMC42LTAuNiwwLjktMC45djEuMnYwLjNDNi44LDMsNywzLjIsNy4yLDMuMmMwLjIsMCwwLjMtMC4yLDAuMy0wLjNjMC0wLjMsMC0wLjUsMC0wLjhjMC0wLjQsMC0wLjgsMC0xLjMKCQljMC0wLjEsMC0wLjIsMC0wLjNjMCwwLDAsMCwwLDBjMC0wLjEsMC0wLjItMC4xLTAuMmMwLDAtMC4xLTAuMS0wLjEtMC4xYzAsMCwwLDAsMCwwYzAsMC0wLjEsMC0wLjEsMGMwLDAsMCwwLDAsMAoJCWMtMC4zLDAtMC41LDAtMC44LDBjLTAuNCwwLTAuOCwwLTEuMywwYy0wLjEsMC0wLjIsMC0wLjMsMGMtMC4yLDAtMC40LDAuMi0wLjMsMC4zQzQuNSwwLjcsNC42LDAuOCw0LjgsMC44eiIvPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTcuMiw0QzcsNC4xLDYuOCw0LjIsNi44LDQuNHYwLjh2MS4yYzAsMC4xLDAsMC4yLDAsMC4zYzAsMCwwLDAsMCwwLjFjMCwwLDAsMCwwLDAuMWMwLDAsMCwwLDAsMAoJCWMwLDAsMCwwLTAuMSwwYzAsMCwwLDAtMC4xLDBjLTAuMSwwLTAuMSwwLTAuMiwwYy0wLjEsMC0wLjMsMC0wLjQsMGMtMC40LDAtMC45LDAtMS4zLDBjLTAuNSwwLTEuMSwwLTEuNiwwYy0wLjUsMC0wLjksMC0xLjQsMAoJCWMtMC4yLDAtMC40LDAtMC43LDBjMCwwLDAsMCwwLDBjMCwwLDAsMC0wLjEsMGMwLDAsMCwwLTAuMSwwYzAsMCwwLDAsMCwwYzAsMCwwLDAsMC0wLjFjMCwwLDAsMCwwLTAuMWMwLTAuMSwwLTAuMSwwLTAuMgoJCWMwLTAuMSwwLTAuMywwLTAuNGMwLTAuNCwwLTAuOSwwLTEuM2MwLTAuNSwwLTEuMSwwLTEuNmMwLTAuNSwwLTAuOSwwLTEuNGMwLTAuMiwwLTAuNCwwLTAuN2MwLDAsMCwwLDAsMGMwLDAsMCwwLDAtMC4xCgkJYzAsMCwwLDAsMC0wLjFjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLjEsMGMwLDAsMCwwLDAuMSwwYzAuMSwwLDAuMSwwLDAuMiwwaDAuNUgzaDAuM2MwLjIsMCwwLjQtMC4yLDAuMy0wLjNjMC0wLjItMC4yLTAuMy0wLjMtMC4zCgkJYy0wLjIsMC0wLjUsMC0wLjcsMGMtMC40LDAtMC44LDAtMS4yLDBjLTAuMSwwLTAuMiwwLTAuMywwYy0wLjMsMC0wLjUsMC4xLTAuNywwLjNDMC4yLDAuNiwwLjEsMC44LDAuMSwxLjF2MC4yVjJ2MS4xdjEuMnYxLjJ2MC44CgkJYzAsMC4yLDAsMC4zLDAsMC41YzAsMC4yLDAuMSwwLjQsMC4zLDAuNWMwLjEsMC4xLDAuMSwwLjEsMC4yLDAuMmMwLjEsMC4xLDAuMiwwLjEsMC40LDAuMWMwLDAsMC4xLDAsMC4xLDBoMC42aDFINGgxLjJoMC45aDAuNQoJCWMwLjMsMCwwLjUtMC4xLDAuNy0wLjNjMC4xLTAuMSwwLjEtMC4xLDAuMi0wLjJDNy41LDcsNy41LDYuOSw3LjUsNi43YzAsMCwwLTAuMSwwLTAuMWMwLTAuMywwLTAuNiwwLTAuOWMwLTAuNCwwLTAuNywwLTEuMQoJCWMwLTAuMSwwLTAuMSwwLTAuMkM3LjUsNC4yLDcuNCw0LDcuMiw0eiIvPgo8L2c+Cjwvc3ZnPgo=');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'STIX Two Text', serif;
    color: #000;
    line-height: 1.6;
    font-size: 16px;
    background: url(../images/bg.jpg);
    background-attachment: fixed;
}

a {
    transition: all 0.4s ease;
    text-decoration: none;
}

ul {
    list-style-type: none;
}

.intro {
    width: 530px;
    margin: 0 auto;
}

.intro span {
    color: var(--bordo);
}

.intro .about {
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.4;
}

h1 {
    color: var(--bordo);
    font-size: 2.8rem;
    text-align: center;
    margin-bottom: 20px;
    font-style: italic;
    line-height: 1.2;
    font-weight: 400;
}

#history h2 {
    font-size: 3.25rem;
    color: #fff;
    font-style: italic;
    line-height: 1.2;
    font-weight: normal;
    margin: 0 0 30px 0;
    text-align: center; 
}

#history h2 span {
    display: block;
    color: #000;
}

p {
    margin-bottom: 20px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 1200px;
    margin: 0 auto;
}

#header {
    background: #000;
    height: 140px;
    display: flex;
    transition: height 0.8s ease, box-shadow 0.3s ease; 
    position: fixed;
        width: 100%;
    z-index: 100;
        top: 0; 
}

.header-holder {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    justify-content: start;
    align-items: center;
    height: 100%;
}

#header.sticky {
    box-shadow: 0 1px 22px rgba(0, 0, 0, 0.2);
    height: 60px;
}



#header.sticky + .content {
    padding-top: 60px;
}



#header ul {
    display: flex;
    justify-content: center;
    gap: 60px;
    list-style: none;
    padding: 0;

}

#header .mobile-menu-icon { display: none }

#header li {
    display: inline-block;
    font-family: 'Nunito Sans', sans-serif;
}

#header li a {
    text-decoration: none;
    color: #fff;
    padding: 5px 0;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 3px solid #000;
    position: relative
}


#header li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px; 
  width: 0;
  height: 2px; 
  background-color: var(--bordo); 
  transition: all .5s ease;
}

#header li a:hover::after {
  width: 100%;
}

#header .logo-2 img { ; height: 40px; margin: 0 auto; }
#header li.contact a {  text-align: left  }

/* About */ 

#about {
    padding: 220px 0 150px;
    text-align: center;
}
#about.form { text-align: left; }


#about .container {
    position: relative;
}

#about img.brand-title {
    margin: 0 auto 80px;
}

#about .img-left {
    position: absolute;
    margin: -20px 0 0 -160px;
     transition: transform 0.5s ease; 
    width: 450px; 
}

.img-left.move {
    transform: translateY(20px); 
}

#about .img-right {
    position: absolute;
    right: 0;
    top: 200px;
}

.fade {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s; 
}

.delay-3 {
    transition-delay: 0.3s; 
}

.delay-4 {
    transition-delay: 0.4s; 
}

.delay-5 {
    transition-delay: 5s; 
}


.fade.show {
    opacity: 1;
    transform: translateY(0);
}





/* History */

#history {
    background: var(--bordo);
    padding: 30px 0 700px;
    position: relative;
    max-width: 2000px;
}


#history .floating {
    width: 820px;
    margin: 0 auto 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg); 
    transition: transform 0.1s ease-out; 
    transform-origin: center;
}
#history h3  { margin: 0 auto;  }

#history h3 img {
    margin: 0 auto 60px;
    height: auto;
    display: block; 
}

.timeline-items {
    padding: 0 5%; 
    position: relative;   
}

.timeline-items:before {
    content: ''; 
    position: absolute;
    top: calc(46.5%);
    left: 0;
    width: 100%;
    height: 2px;
    background: #000;
    transform: translateY(-50%);
}



.timeline-items ul {
    display: flex;
    justify-content: space-between;
    gap: 5%; 
    padding: 0;
    list-style: none;
}

.timeline-items li {
    text-align: center;
    color: #fff; 
    margin-top: 363px;
    position: relative;
    flex-grow: 1;
    width: calc((100% - 4 * 5%) / 5); 
    display: flex;
    flex-direction: column;
}



.timeline-items li:nth-child(2n) .thumb {
    order: 1; 
}

.timeline-items li:nth-child(2n) .content {
    order: 2; 
}

.timeline-items li:nth-child(2n) h3 {
    order: 3; 
}

 
.timeline-items li:nth-child(2n) {
    margin-top: 30px;
    height: 550px; 
    display: flex; 
    justify-content: end
}

.timeline-items li:nth-child(2n) .thumb:before,
.timeline-items li:nth-child(2n) h3:after {
    display: none
}

.timeline-items li:nth-child(2n) h3:before {
    content: ''; 
    display: block;
    width: 10px; 
    height: 10px; 
    background: #fff; 
    border-radius: 50%; 
    position: absolute; 
    left: 50%; 
    transform: translate(-50%, -50%);
    top: 428px; 
    border: 5px solid var(--bordo);
}

.timeline-items li:nth-child(2n) .content:after {
    height: 50px;
    display: block; 
    content: ''; 
    width: 2px; 
    background: #fff;
    margin: 30px auto 0; 
}

.timeline-items li:nth-child(2n) h3 { margin-top: 34px }




.timeline-items li img {
    display: block; 
    margin: 30px auto; 
}


.timeline-items .content {
    font: 0.75rem 'Nunito Sans', sans-serif;
    color: #fff;
    text-align: center; 
    font-weight: 600; 
    line-height: 1.6
}

.timeline-items h3 {
    font-size: 3.3rem; 
    line-height: 1;
    font-style: italic;
    height: 70px;
}

#history ul img {
    height: 220px;
}

.timeline-items .thumb:before {
    height: 50px;
    display: block; 
    content: ''; 
    width: 2px; 
    background: #fff;
    margin: 30px auto 0; 
}

.timeline-items h3:after {
    content: ''; 
    display: block;
    width: 10px; 
    height: 10px; 
    background: #fff; 
    border-radius: 50%; 
    position: absolute; 
    left: 50%; 
    transform: translate(-50%, -50%);
    top: 95px; 
        border: 5px solid var(--bordo);
}


.timeline-items h3 sup {
    font-size: 1.8rem   
}

.timeline-items h3 span {
    font-size: 1rem; 
    display: block; 
    letter-spacing: .12em; 
}





#footer {
    background: #000;
    padding: 60px 0;
    text-align: center;
    color: #fff;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.85rem;
}

#footer img {
    margin: 0 auto;
}

#footer .image {
    margin: 60px auto;
}

#footer a {
    text-decoration: none;
    color: #fff;
}

#footer a:hover {
    color: var(--bordo);
}

#footer h3 {
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 900;
}

#footer .soc { margin: 60px 0; display: flex; align-items: center; justify-content: center; padding-left: 15px }

#footer a svg { fill: #fff; width: 32px; transition: all .5s ease;  margin: 0 20px }
#footer a:last-child svg { width: 42px }
#footer a:hover svg { fill: var(--bordo) }


.footer-bottom a {
    margin: 0 20px;
}

.contact {
    color: #fff;
    text-align: center;

}

.contact li:not(:last-child) {
    margin-bottom: 10px;
}






.banner {
    min-height: 450px;
    background: url(../images/banner.png) no-repeat 0 100%;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: start;
    overflow: hidden;
}

.banner .container {
    width: 950px;
}

.banner img {
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.8s ease-out;
}

.banner img.visible {
    opacity: 1;
    transform: translateY(0);
}

/* cocktails */


.cocktail-wrapper {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch; 
}

.cocktail-image img {
    max-width: 100%;
    height: auto;
}

.cocktail .cocktail-info {
    margin: 0 auto 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding-top: 15px;
}

.cocktail .cocktail-info h2 img {
    width: unset !important;
    margin: 0 auto; 
}
.cocktail .serving {
    font-style: italic;
    font-size: 0.875rem;
    text-align: left;
}

.cocktail h2:after {
    content: '';
    display: block;
    height: 2px;
    width: 150px;
    margin: 30px auto;
    background: var(--bordo);
}

.cocktail .cocktail-description { 
        width: 460px;
    color: var(--bordo);
    font-style: italic;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.4;
}

.cocktail .ingredients dl {
    margin: 20px 0 20px;
    text-align: left;
    min-height: 150px; 

}

.cocktail .ingredients dl.glass-1 {
    background: url('../images/glass-1.svg') no-repeat 0 60px;
}
.cocktail .ingredients dl.glass-2 {
    background: url('../images/glass-2.svg') no-repeat 0 60px;
}
.cocktail .ingredients dl.glass-3 {
    background: url('../images/glass-3.svg') no-repeat 0 60px;
}

.cocktail .ingredients dl.glass-4 {
    background: url('../images/glass-4.svg') no-repeat 0 60px;
}




.cocktail .ingredients dt {
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: .1em;
    font-size: 1.25rem; 
    text-align: ce
}


.cocktail .ingredients dd {
    margin: 0px 0 0 70px;
    font-size: 1.1rem;
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.cocktail.slick-active .ingredients dd {
    opacity: 1;
    transform: translateX(0);
}

.cocktail.slick-active .ingredients dd:nth-child(1) {
    transition-delay: 0.2s;
}

.cocktail.slick-active .ingredients dd:nth-child(2) {
    transition-delay: 0.4s;
}

.cocktail.slick-active .ingredients dd:nth-child(3) {
    transition-delay: 0.6s;
}

.cocktail.slick-active .ingredients dd:nth-child(4) {
    transition-delay: 0.8s;
}

.cocktail.slick-active .ingredients dd:nth-child(5) {
    transition-delay: 1s;
}

.cocktail.slick-active .ingredients dd:nth-child(6) {
    transition-delay: 1.2s;
}

.cocktail.slick-active .ingredients dd:nth-child(7) {
    transition-delay: 1.4s;
}


.cocktail-specs .bottle-image {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
}

.cocktail-specs img {
    width: 140px;
    height: auto;
    position: absolute; 
    bottom: 0; 
}


.slick-controls {
    position: absolute;
    top: 50%;
    left: 9%;
    right: 9%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 100;
}

.slick-controls button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slick-dots {
    bottom: 40px;
    z-index: 100 ;
    bottom: -50px !important;   
}
.slick-slider { z-index: 100}

.slick-dots li.slick-active button:before {
    font-size: 1rem;
    color: var(--bordo) !important;
    width: 20px !important; 
    height: 20px !important; 
    z-index: 10000;
}


.slick-dots li.slick-active button:before {
    color: var(--bordo);
}

body .slick-prev:before,
body .slick-next:before {
    color: var(--bordo) !important;
}

.slick-prev:before,
.slick-next:before {
    display: none;
}

.slick-controls svg {
    fill: var(--bordo);
    width: 68px;
    height: 68px;
    transition: all .5s ease;
}

.slick-controls svg:hover {
    fill: #E3C185 !important;
}

.slick-prev,
.slick-next {
    width: 68px !important;
    height: auto !important;
}

.slick-slide {
    display: flex; 
    justify-content: center;
    
 }

.slick-initialized .slick-slide { border: none !important }


#cocktails { position: relative; padding: 150px 0 80px; z-index: 1 }
.bottle-image {position: absolute;bottom: 0;right: 10%;height: 360px; z-index: 1; }
.bottle-image img { height: 350px;   }
.slick-track { z-index: 10; }


/* contact */
.entry-row {
  position: relative;
  margin-bottom: 1.5em;
}

.input-text {
  width: 100%;
  padding: 12px 10px;
  font-size: 1.124em;
  border: 1px solid #fff;
  outline: none;
    font-family: 'STIX Two Text', serif
}

.input-text:focus,
.input-text:not(:placeholder-shown) {
  border-color: #000;
}

.input-text::placeholder { display: none }

label {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  background-color: white;
  padding: 0 5px;
  font-size: 1.125em;
  color: #666;
  transition: 0.2s ease all;
  pointer-events: none;
}

.input-text:focus + label,
.input-text:not(:placeholder-shown) + label {
  top: 12px;
  font-size: 1em;
  color: var(--bordo);
  transform: translateY(-100%);
}


.input-text::placeholder {
  color: transparent; /* Make the placeholder transparent by default */
  transition: color 0.2s ease;
}

.input-text:focus::placeholder {
  color: transparent; /* Ensure placeholder remains transparent on focus */
}


.form button {
  padding: 20px 40px;
  font: 1.25em 'STIX Two Text', serif;
  color: #ffffff;
  background-color: var(--bordo);
    font-weight: 700;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
}

.form button:hover {
  background-color: #000; 
}

.contact-info h1 { text-align: left; font-size: 4rem  }
.contact-grid {     display: grid; grid-template-columns: 50% 50%; }

.contact-info {
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.4;
    position: relative; 
}
.contact-info .info a { 
    color: var(--bordo);
    position: relative
}

.contact-info .info a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px; 
  width: 0;
  height: 2px; 
  background-color: #000; 
  transition: all .5s ease;
}

.contact-info .info a:hover::after {
  width: 100%;
}
.contact-info p { margin-bottom: 0 }

.contact-info .soc { padding-top: 40px;  }
.contact-info .soc h3 { margin-bottom: 10px; font-family: 'STIX Two Text', serif; }
.contact-info .soc h3 span { color: var(--bordo) }
.contact-info svg { width: 48px; margin-right: 40px; transition: all .5s ease; fill: #000 }
.contact-info svg#ig { width: 40px;  }
.contact-info svg#fb { top: 4px; position: relative;   }
.contact-info svg:hover {  fill: var(--bordo); }

.cherry { position: absolute; width: 170px; right: 50px; top: -100px;   }

.entry-title { padding: 30px 30px 0 30px; width: 50%; margin: 0 auto;  }


#contact { padding: 100px 0; }
#contact h2 {  font-size: 3.25rem; color: var(--bordo); margin-bottom: 20px; text-align: center; display: block; font-weight: normal;  }
#contact .form-wrapper { width: 50%; margin: 0 auto;  }



/* responsive */

@media (max-width: 1700px) { .timeline-items:before { top: 45.5%; } }
@media (max-width: 1600px) { .timeline-items:before { top: 44%; } }
@media (max-width: 1400px) { .timeline-items:before { top: 45.5%; } .timeline-items ul { gap: 30px; } .timeline-items { padding: 0 30px; } }
@media (max-width: 1300px) { .timeline-items:before { top: 44%; } }

@media (max-width: 1200px) {
    .container { width: 100%; }
    #header { padding: 0 3%; }
    #about { padding: 200px 0; }
    #about.form { padding: 300px 3% 100px; }
    .cherry { top: -150px; right: 0; }
    h1 { font-size: 1.8rem; }
    #about .brand-title { width: 80%; }
    #about .img-right { width: 200px; right: 2%; }
    #about .img-left { width: auto; height: 400px; margin-left: 2%; }
    .timeline-items, .timeline-items ul { gap: 2%; }
    .timeline-items { padding: 0; }
    #cocktails { padding: 100px 2%; }
    .cocktail-wrapper { width: 100%; }
    .cocktail .cocktail-description { font-size: 1.1rem; }
    .cocktail .cocktail-info { padding-top: 0; }
    .slick-controls button.slick-next { display: none; }
    .bottle-image img { height: 200px; }
    .cocktail .ingredients dd { font-size: 1rem; }
    #history .floating { width: 70%;}
    .timeline-items:before { top: 44%; }
}
@media (max-width: 1100px) { 
    .cocktail-wrapper { display: grid; grid-template-columns: 40% 55%; gap: 5%; } 
    .timeline-items:before { top: 44%; } 

    #history .timeline-items { margin-top: 120px; } 
    .timeline-items ul { gap: 0; } 
    .timeline-items { padding: 0 15px; } 
}


@media (max-width: 960px) {
    .container { padding: 0 30px; }
    .banner { background-position: 50%; }
    .banner .container { width: 100%; padding: 0 50px; }
    .banner img { width: 350px; }
    #history { width: 100%; padding: 60px 30px 600px; }
    .intro { width: 100%; }
    #about .img-left { width: 400px; height: auto; }
    .header-holder { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; position: relative; }
    .logo, .logo-2 { flex: 0 1 auto; }
    .logo { margin-left: 30px; }
    .logo-2 { display: none; }
    .nav { position: absolute; top: 100%; right: 0; width: 100%; max-height: 0; overflow: hidden; transition: all 0.3s ease-in-out; }
    .mobile-menu-icon { display: block !important; color: #fff; font-size: 30px; margin-top: 5px; margin-right: 30px; }
    .nav.open { max-height: 300px; background: #000; z-index: 1000 !important; padding: 0 30px;  }
    #header .container { padding: 0; }
    #header ul { display: block; padding: 15px 30px; align-content: center; }
    #header li { display: block; padding: 10px 0; }
    #header li a { display: block; }
    .header-holder { gap: 60px; }
    .timeline-items:before { display: none }
    #history .timeline-items { margin-top: 180px; }
    .contact-grid { display: block; }
    .contact-info { margin-bottom: 100px; }
    #history .floating { margin-top: -100px }
}


@media (max-width: 760px) {
    .cocktail-wrapper { display: block; }
    #cocktails { padding: 60px 0; min-height: auto; }
    #cocktails .cocktail-image img { margin: 0 auto 30px; display: block; width: 70%; }
    #cocktails .cocktail-image { margin-bottom: 40px; }
    #cocktails .cocktail-info { text-align: center; display: flex; align-items: center; padding: 0 30px; }
    #about .img-left { width: 250px; }
    #about .img-right { width: 180px; }
    .timeline-items ul { display: block; }
    .timeline-items li { width: 100%; }
    #history h2 { font-size: 2.7rem; }
    #footer span { display: block; margin: 20px 0 0; }
    .bottle-image { height: 270px; }
    .slick-controls svg { width: 48px; }
    .slick-controls button.slick-next { display: block; }
    .slick-controls { position: absolute; top: 25%; left: 30px; right: 30px; }
    .banner { justify-content: center; align-items: center; background-position: 80% bottom; }
    .banner img { margin: 0 auto; width: auto; }
    #footer { padding: 60px 0 30px 0; }
    #about { padding: 200px 0 50px 0; }
    #about .brand-title { width: 80%; }
    #about .img-left { position: absolute; }
    #footer .soc { margin: 40px 0; }

    .timeline { padding: 30px 30px 0; }
    .timeline-items { padding: 0; }
    .floating { display: block; position: relative; width: 90% !important; height: auto; margin-top: -300px !important }
    .timeline-items li { margin-top: 0; }
    .timeline-items li, .timeline-items li:nth-child(2n) { margin-bottom: 60px !important; }
    .timeline-items li:last-child { margin-bottom: 0; }
    .timeline-items h3:after { display: none; }
    .timeline-items li img { margin: 15px auto; }
    .timeline-items h3 { height: auto; }
    .timeline-items .content { font-size: .9rem; }
    .timeline-items li:nth-child(2n) h3 { order: unset; text-align: center; color: #fff; }
    .timeline-items li:nth-child(2n) h3:before { display: none; }
    .timeline-items li:nth-child(2n) .thumb:before { height: 50px; display: block; content: ''; width: 2px; background: #fff; margin: 30px auto 0; }
    .timeline-items li:nth-child(2n) .thumb { order: unset; }
    .timeline-items .thumb:before { margin: 30px auto; }
    .cocktail-description { padding: 0 60px; }
    .cocktail .cocktail-description { width: 100%; }
    .intro { margin-top: 400px; }
    #history .timeline-items { margin-top: 0; }
    .timeline-items .content { line-height: 1.4; }
    .timeline-items li.delay-5 h3 { font-size: 2.7rem; }
    .timeline-items li:nth-child(2n) { height: auto; }
    .timeline-items li:nth-child(2n) h3 { margin: 0; }
    #about.form { padding: 300px 0 100px; width: 100%;  }
        .timeline-items li:nth-child(2n) .content:after { display: none }
    #contact .form-wrapper { width: 100%;  }
    #contact { padding: 50px 0 }
    .entry-title { padding: 30px 0; width: 100% }
}


@media (max-width: 480px) {
    .logo { width: 160px; }
    #about { padding: 170px 0 50px; }
    #about .brand-title { width: 100%; }
    .cocktail-specs { display: block; padding: 20px 30px 0; }
    .cocktail-wrapper { gap: 0; }
    .slick-controls { top: 20%; left: 50px; right: 50px; }
    .slick-controls svg { width: 40px; }
    .cocktail-wrapper { display: flex; flex-direction: column; }
    #cocktails .cocktail-image img { width: 90%; }
    .cocktail-description { padding: 0; }
    #about .img-left { top: 90px; width: 280px; }
    #cocktails .cocktail-info { display: block; }
    #history .timeline-items { margin-top: 0px !important; }
    .intro { margin-top: 500px; }
    .slick-controls button.slick-next { display: block; }
    .slick-controls { position: absolute; top: 20%; left: 30px; right: 30px; }
    #history .floating { position: static !important; top: auto; left: auto; transform: none !important;
                        margin: 0 auto !important;  transform: rotate(-5deg) !important; width: 100% !important  }
    .contact-info h1 { font-size: 2rem;  }
    .cherry { width: 120px; right: 0 }
    .g-recaptcha div { width: 100% !important; }
    #header li.contact a { background-position: right center;  }
    .timeline-items:before { display: none;  }
        #history { padding-bottom: 100px } 
        #history h2 { font-size: 1.8rem; }
    


    

.delay-1 {
    transition-delay: 0s;
}

.delay-2 {
    transition-delay: 0s; 
}

.delay-3 {
    transition-delay: 0s; 
}

.delay-4 {
    transition-delay: 0s; 
}

.delay-5 {
    transition-delay: 0s; 
}

}


.error-message {
  color: red;
  font-size: 1.25em;
  margin-top: 15px;
    padding: 20px; 
    color: #fff; 
}

.success-message {
  background: green;
  font-size: 1.25em;
  margin-top: 15px;
    padding: 20px; 
    color: #fff; 
}



.grecaptcha-badge { display: none;  }