/* Colours & fonts */
/*  Dark: #21383C - new: #1f292d
    Light Blue: #B8C4CB - new: #adbec5
    Light Neutral: #EFE4DA -- new: #f6f3ef
    Beige: #D9BDA2 - new: #e1d7c9
    Rust: #B86E49 - new: #ac5122
    Neutral background: #F5F6F7 - new: #f6f3ef

    Font Heading font-family: 'Playfair Display', serif;
    Body font-family: 'Libre Franklin', sans-serif;
    Featured font-family: 'WindSong', cursive;
    
*/


*{
    padding: 0;
    margin:0;
    box-sizing: border-box;
}
  
html {
    overflow-x: hidden;
    width: 100%;
}
  
[class*="col-"] {
    padding: 0;
}

[class*=grid] {
    margin:0;
}
  

/* Reusale Utility classes*/
.padded { padding: 5%; }
.padded-sm { padding: 2.5%; }
.padded-lg { padding: 10%;  }
  
.padded-05 { padding: 0.5rem; }
.padded-1 { padding: 1rem; }
.padded-2 { padding: 2rem; }
  
.padded-t { padding-top: 5%; }
.padded-b { padding-bottom: 5%; }
.padded-l { padding-left: 5%; }
.padded-r { padding-right: 5%; }

.padded-lg-t { padding-top: 10%;  }
.padded-lg-b { padding-bottom: 10%;  }

.padded-r-1 {padding-right: 1rem;}
.padded-l-1 {padding-left: 1rem;}
.padded-b-1 { padding-bottom: 1rem; }
.padded-t-1 { padding-top: 1rem;}

.padded-t-2 { padding-top: 2rem; }

.padded-tb-sm { padding-bottom: 2.5%; padding-top: 2.5%; }

.padded-t-0 { padding-top: 0; }
.padded-b-0 { padding-bottom: 0; }
  
.margin-t { margin-top: 5%; }
.margin-b { margin-bottom: 5%; }
.margin-l { margin-left: 5%; }
.margin-r { margin-right: 5%; }
  
.margin-t-1 { margin-top: 1rem; }
.margin-b-1 { margin-bottom: 1rem; }
.margin-l-1 { margin-left: 1rem; }
.margin-r-1 { margin-right: 1rem; }
  
.margin-t-2 { margin-top: 2rem; }
.margin-b-2 { margin-bottom: 2rem; }
.margin-l-2 { margin-left: 2rem; }
.margin-r-2 { margin-right: 2rem; }
  
.margin-t-0 { margin-top: 0; }
.margin-b-0 { margin-bottom: 0; }
.margin-l-0 { margin-left: 0; }
.margin-r-0 { margin-right: 0; }

.margin-b-05 {margin-bottom: 0.5rem;}
  
.margin-tb { margin-top: 5%; margin-bottom: 5%; }
.margin-lr { margin-left: 5%; margin-right: 5%; }

.margin-l-negative { margin-left: -0.7rem;}
  
  
.left   { text-align: left; }
.center { text-align: center; }
.right  { text-align: right; }
  

/* Height Classes */
.tall-10 { min-height: 10vh; }
.tall-20 { min-height: 20vh; }
.tall-30 { min-height: 30vh; }
.tall-40 { min-height: 40vh; }
.tall-50 { min-height: 50vh; }
.tall-60 { min-height: 60vh; }
.tall-70 { min-height: 70vh; }
.tall-80 { min-height: 80vh; }
.tall-90 { min-height: 90vh; }
.tall-100 { min-height: 100vh; }
  
  
/* Typography font styles———-————————-----------—*/
body {
    font-family: 'Libre Franklin', sans-serif;
    color: #1f292d;
    background-color: #f6f3ef;
  
}
/* CSS */



  
h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 4.1rem;
    line-height: 1.1;
    text-align: center;
}
  
.eyebrow-heading {
    font-size: 1rem;
    font-weight: 500;
    font-family: 'Libre Franklin', sans-serif;
}
  
h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    font-weight: 400;
}
  
h4 {
    font-size: 1.7rem;
    font-weight: 500;
}
  
h2, h3, h4, h5, h6 {
    line-height: 1.1;
    margin-bottom: 1.2rem;
}
  
p {
    font-size: 1rem;
    line-height: 1.3; 
    margin-bottom: 1rem;
}
  
h1:last-child, 
h2:last-child, 
h3:last-child, 
h4:last-child, 
h5:last-child, 
h6:last-child, 
p:last-child {
    margin-bottom: 0;
}

ol, ul {
    /*   list-style-position: inside; */
    margin-left: 1.8rem;
}
    
li {
    margin-bottom: 0.5rem;
    padding-left: 0.9rem;
    font-size: 0.95rem;
}
  
  
  
/* General typography & universal styles——————-———*/
  
.uppercase   { text-transform: uppercase;  }
.bold        {font-weight: bold;}
  
.subheading {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 500;
} 
.medium-heading {
    font-family: 'Playfair Display', serif;
    font-size: 2.3rem;
    font-weight: 400;
}

.medium-heading span {
    font-size: 1.1rem;
}

.extra-large-heading span {
    font-size: 0.9rem;
    vertical-align: super;
}

.large-heading {
    font-family: 'Playfair Display', serif;
    font-size: 3.4rem;
    font-weight: 400;
}
.extra-large-heading {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 3.9rem;
    line-height: 1.2;
    text-align: center;
}

.tiny-text {
    font-size: 0.6rem;
}
.smaller-text {
    font-size: 0.85rem;
}
.small-text {
    font-size: 0.95rem;
}
.small-text-1 {
    font-size: 1rem;
}
.medium-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.7rem;
    font-weight: 400;
}
.large-text   { 
    font-size: 3.4rem; 
}

.light-text     { color:#f6f3ef; } 
.dark-text      { color: #1f292d; }
.featured-text  { color: #ac5122; }
  
.bg-light    { background-color:#f6f3ef;  }
.bg-dark     { background-color: #1f292d;  }
.bg-featured { background-color: #B8C4CB;  }
.bg-featured-beige {background-color: #e1d7c9;}

.bg-gradient { 
    background: #B8C4CB; /* Background for old browsers */
    background: linear-gradient(to left, #a2b2bb, #B8C4CB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
  
a {
    color: #1f292d;
    text-decoration: none;
    display: inline-block;
    font-size: 0.9rem;
}  
a:hover {
    font-style: italic;
}

.underline {
    border-bottom: 1px solid;
}

/* Button styles—----———*/

.button-landing {
    background-color: #B8C4CB;
    color: inherit;
    border: 1px solid #B8C4CB;
    border-radius: 0.2rem;
     /*top +bottom then left +right */
    padding: 0.6rem 2rem;
    transition: all 0.2s;
    font-size: 0.75rem;
}
  
.button {
    background-color: #B8C4CB;
    color: inherit;
    border: 1px solid #B8C4CB;
    border-radius: 0.2rem;
     /*top +bottom then left +right */
    padding: 0.6rem 1.6rem;
    transition: all 0.2s;
    font-size: 0.75rem;
}

.button-color {
    background-color: #1f292d;
    color:#f6f3ef;
    border: 1px solid #1f292d;
    border-radius: 0.2rem;
     /*top +bottom then left +right */
     padding: 0.6rem 1.6rem;
    transition: all 0.2s;
    font-size: 0.75rem;
}
  
.button:hover {
    color:#f6f3ef;
    background-color: #ac5122;
    border: 1px solid #ac5122;
    font-style:normal;
}

.button-color:hover {
    color:#f6f3ef;
    background-color: #ac5122;
    border: 1px solid #ac5122;
    font-style:normal;
}

.border-line {
    border: none;
    border-bottom: 1px solid #1f292d;
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.capped-width {
    max-width: 1150px;
    margin: auto;
}
 
.capped-width-narrow {
    max-width: 800px;
    margin: auto;
}




/* NEW portfolio section----------------- */

.portfolio-intro {
    position: relative;
    display: inline-block;
}
.hover-image {
    position: absolute;
    top: -35%;
    left: 91%;
    transform: translateX(-50%);
    width: 250px;
    display: none;
}

.hover-image-2 {
    position: absolute;
    top: -25%;
    left: 9%;
    transform: translateX(-50%);
    width: 250px;
    display: none;
}

.hover-image,
.hover-image-2 {
    max-width: 100%; /* Ensures images are responsive */
    height: auto; /* Keeps aspect ratio */
}

.portfolio-intro:hover .hover-image {
    display: block;
}
.portfolio-intro:hover .hover-image-2 {
    display: block;
}

.portfolio-link a:hover {
    font-style: normal;
}



/*Accordion Block--------------------------------*/
.accordion {
    display: flex;
    flex-direction: column;
    max-width: 90vw;
}

.accordion-item {
    margin: -0.3rem 0;
}

.accordion-header {
    cursor: pointer;
    position: relative;
    margin: 0.2rem 0;
}

.accordion-header::after {
    content: '+';
    position: absolute;
    right: 8px;
}

.accordion-header.active::after {
    content: '-';
}

.accordion-content {
    display: none;
    padding: 8px;
 }



/*Testimonial Block--------------------------------*/

.cursive-text {
    font-family: 'Windsong', cursive;
    font-size: 1.4rem;
    margin-top: 1.8rem;
}

.overlay {
    background-color: rgba(0,0,0,0.05);
}



/* Testimonial Slider Styles-------*/
.testimonial-slider-container {
    padding: 5%;
    max-width: 900px;
    margin: auto;
}
.slider-item {
    padding: 0.9rem;
    display: none;
}
  
.slider-item:first-child {
    display: block;
}
  
/*DOTS----------*/
.slick-dots {
    bottom: 12px;
    left: 0; /* This align the dots perfectly to the center, do not delete */
}

.slick-dots li,
.slick-dots li button {
    width: 10px;
}

.slick-dots li button::before {
    font-size: 12px;
    background-color: transparent; /* Dot background color */
    color: #1f292d;
}

.slick-dots li.slick-active button::before {
    color: #e67b45;
}

.slick-dotted.slick-slider {
    margin-bottom: 0px;
}

.slick-next::before, .slick-prev::before {
    font-family: inherit;
    font-size: 25px;
    line-height: 1;
    opacity: .80;
    color: #1f292d;
}

.hidden-overfolow {
    overflow-x: hidden;
}

  
  
/* Header & Footer Styles———————————————-----------------—*/
  
header a {
    color: inherit;
    text-decoration: none;
    /*border: 1px solid grey;*/
    display: inline-block;
    padding: 0.5rem;
    font-size: 0.9rem;
    border: none;
}
  
header {
    padding: 1.5% 2.5%;
 
}

.logo {
    margin-top: 0.5%;
}
  
.logo h2 {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 500;
}

.logo img { max-width: 80%;}

.container-header {
    display: flex;
    align-self: flex-start;
}
.image-column {
    flex: 1;
}
.text-column {
    flex: 1;
    position: sticky;
    top: 0;
}

#typed {
    font-style: italic;
}
  
.typed-cursor {
    font-size: 3rem;
    color: #ac5122;
} 


/* new hero testing section------------------------------------------------- */

.hero-pin-wrapper {
  position: relative;
  height: 1850px; /* perfect height based on your measured scroll */
}

.hero-wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 10;
}

/* ensure hero text & original images are above the base scroll-stack */
.hero-text,
.original-img {
  position: relative;
  z-index: 20; /* hero level */
}

/* put the whole scroll-stack *below* the hero by default */
.scroll-stack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 440vh;
  pointer-events: none;
  z-index: 10; /* lower than .hero-text (20) */
}

/* default for images — they are behind the hero by default */
.scroll-img {
  position: absolute;
  width: 24vw;
  opacity: 0;
  transform: translateY(120vh);
  transition: opacity 0.4s ease-out;
  z-index: 5; /* below hero (20) */
}



/* specific images you want to appear ABOVE the hero must have higher z */
.img-3 { left: 43%; top: 0; z-index: 1; }   /* stays behind text */
.img-4 { left: 33%; top: 0; transform: translateX(-50%) translateY(120vh); z-index: 25; } /* on top of text */
.img-5 { left: 14%; top: 0; z-index: 25; }  /* on top of text */

.original-img {
  position: relative;
  z-index: 20; /* above base scroll-stack but below images with z-index >20 */
  will-change: transform;
}


/* end new testing section -----------------------------------------------------------*/


footer {
    padding: 8%;
}
footer a {
    color: inherit;
    text-decoration: none;
    display: block;
    padding: 0.3rem 0;
    font-size: 0.8rem;
}
footer a:hover {
    color: #ac5122;
}
.footer-info {
    padding-right: 10%;
}
footer h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 300;
}  
footer p {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.site-credit div {
    font-size: 0.6rem;
    font-style: italic;
    font-weight: 200;
    text-align: center;
}

.site-credit a {
    font-size: 0.6rem;
    font-style: italic;
    font-weight: 200;
    text-align: center;
    display: inline-block;
}
.site-credit a:hover {
  color:#ac5122;
}


.footer-info img {
    max-width: 70%;
}

/* navigation styles ------*/
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-title {
padding: 0.5rem;
display: inline-block;
font-size: 0.9rem;
}
.dropdown-content {
position: absolute;
top: 100%;
left: -1rem;
padding: 0.5rem;
display: none;
background-color: #1f292d;
z-index: 2;
text-align: left;
min-width: 9rem;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
display: block;
}

/* mobile menu styles ---------*/

.burger-button {
    position:fixed;
    /*this is the space from top and right or viewport*/
    top: 2.5vh;
    right: 2vh;
    z-index: 9;
    padding: 8px;
}
/*this is where you can change the color of the buttons*/
.burger-button span{
    /*this is how long the lines are*/
    width: 40px;
    border: 1.3px solid #ac5122;
    background-color: #ac5122;
    display: block;
    border-radius: 22px;
    transition: 2s;
}
.burger-button.active span{
    border-color:#EFE4DA;
    background-color:#EFE4DA;
}
  
.burger-top,
.burger-bottom{
    position: absolute;
}
  
.burger-top{
    top: -02px;
}
  
.burger-bottom{
    bottom: -02px;
}
/* make sure this has the same top as the burger button has padding*/
.burger-button.active .burger-top{
    position: absolute;
    top: 8px;
    transform: rotateZ(45deg);
}
  
.burger-button.active .burger-middle{
/* transform: rotateZ(270deg);*/
    border-color: rgba(0,0,0,0);
    background-color:rgba(0,0,0,0);
}
  
/* make sure this has the same bottom as the burger button has padding*/
.burger-button.active .burger-bottom{
    position: absolute;
    bottom: 8px;
    transform: rotateZ(-45deg);
}
  
.mobile-menu {
    display: flex;
    position: fixed;
    top:-100vh;
    left:20vw;
    right:0;
    bottom: 110vh;
    background-color: #1f292d;
    padding:5px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
    z-index: 8;
    transition:1s;
    align-content:space-around;
    /* This creates equal space around the text to spread out the links */
    justify-content:space-around;
    flex-direction: column;
}
  
.mobile-menu.active{
    top:0;
    bottom:0vh;
    left:0;
}
.mobile-menu a {
    text-decoration: none;
    font-size: 2.5rem;
    font-family: 'Playfair Display', serif;
    color:#f6f3ef;
    display:block;
    padding: 2% 10%;
    text-align: right;
    white-space: nowrap;
} 


/* Images & Background Images—————————-----—----------— */

.bg-image {
    background-color:  #B8C4CB;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}


.image-border {
    border: 10px solid #f6f3ef;
}
  
.gallery [class*="col-"] {
    padding: 0.5%;
}  

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

/* Aspect Ratio  */
.portrait-tall { padding-bottom: 134%; }
.portrait { padding-bottom: 125%; }
.portrait-short { padding-bottom: 101%; }
.square { padding-bottom: 100%; }
.landscape { padding-bottom: 61.6%; }
.landscape-wide { padding-bottom: 56%; }

/* Background Position */
.bg-pos-t { background-position: top; }
.bg-pos-b { background-position: bottom; }
.bg-pos-l { background-position: left; }
.bg-pos-r { background-position: right; }
.bg-pos-unique { background-position: 50% 50%; }

/*Position classes */

.img-holder {
    position:relative;
    width:100%;
}

.img-holder img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    z-index:-1;
}

/*Pop-up gallery classes (background of gallery when active)*/
.mfp-bg {
    opacity: 0.95;
}


/* Filterable Gallery Styles--------  */ 
.filterable-gallery {
    padding: 1rem;
}
.filterable-gallery [class*="col-"] {
    padding: 0.5%;
}  
.hidden { display: none; }

/* Filter navigation ---*/
.portfolio-filter span {
    text-transform: uppercase; 

    margin: 0.6rem 0.3rem;
    cursor: pointer;
}
.portfolio-filter .active {
    color: #ac5122;
}

/* Individual Images —————————-—-----------------------— */
.profile-image  { background-image: url('images/jcs-profile-image.jpg');}
.profile-image-2 { background-image: url('images/jcs-profile-photo-2.jpg');}
.building       { background-image: url('images/building-max.jpg');}
.towel-beach    { 
    background-image: url('images/chandra-oh-beach-towel.jpg');
    background-attachment: fixed;
}

.dusting-cake   { background-image: url('images/jcs-food-photography-dusting.jpg');}
.corn-fritter   { background-image: url('images/jcs-food-photography-corn-fritter.jpg');}
.bubble-drink   { background-image: url('images/jcs-drink-photography.jpg');}
.water-image    { background-image: url('images/the-mediterranean.jpg');}
.pomelo-drink   { background-image: url('images/jcs-drink-photography-pomelo-spritz.jpg');}
.laptop         { background-image: url('images/kaboompics_laptop.jpg');}

.cookies        { 
    background-image: url('images/jcs-photography-cookies.jpg');
    background-position: 50% 90%;
}


/* Photography Portfolio Images —————————-—----------— */
.acquafaba      { background-image: url('images/jcs-food-photography-acquafaba.jpg');}
.macro-biscuit  { background-image: url('images/jcs-food-photography-biscuits.jpg');}
.biscuit-flatlay { background-image: url('images/jcs-food-photography-flatlay.jpg');}


/* Website Portfolio Images —————————-—----------— */
.portfolio-cocktail-bar     { background-image: url('images/the-article-cocktail-venue.jpg');}
.portfolio-cocktail-mockup  { background-image: url('images/article-cocktail-mockup-elegant.png');}
.mob-bakery-mockup          { background-image: url('images/bakery-2.jpg');}
.bnb-mockup { 
    background-image: url('images/bed-breakfast-11.jpg');
    background-position: 59% 50%;
}


/*Video styles------------------------------*/
video {
    width:100%;
}

.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Contact Form Styles---------------------*/
form {
    max-width: 52vw;
    margin: auto;
} 

form label {
    display: block;
    margin-top: 1rem;
    color:#1f292d;
    font-size: 0.9rem;
}

form input, 
form select,
form textarea {
    width: 100%;
    padding: 0.5rem;
    margin: 0 0 0.5rem 0;
    border: none;
    outline: none;
    border-bottom: 1px solid #1f292d;
    border-top: 1px solid #f6f3ef;
    font-family: inherit;
    font-size: 0.9rem;
    background-color: #f6f3ef;
    color: rgb(99, 99, 99);
}

form input:focus,
form textarea:focus {
  border-bottom: 1px solid #ac5122;
}

textarea {
    min-height: 5rem;
}


form button {
    background-color: #B8C4CB;
    border: 1px solid #B8C4CB;
    border-radius: 0.2rem;
     /*top +bottom then left +right */
    padding: 0.6rem 1.6rem;
    transition: all 0.2s;
    font-size: 0.75rem;
}
  
form button:hover {
    color:#f6f3ef;
    background-color: #ac5122;
    border: 1px solid #ac5122;
    font-style:normal;
}

/* remove automatic rendering how safari shows drop down boxes */
select {
    -webkit-appearance: none;  /* Removes default Safari styling */
    -moz-appearance: none;      /* Removes Firefox styling */
    appearance: none;           /* Standardizes across browsers */
    background-color: transparent; /* Removes any unwanted background */
    border-radius: 0; /* Removes rounded corners */
    border: none; 
}

select:focus {
    outline: none; /* Removes Safari focus outline */
    border-bottom: 1px solid #ac5122;
}

/* Ticket Banner slider Styles-------------------*/
  
.text-block {
    padding: 0.8%;
}

:root {
--bannerBlockLength: 280px;
--bannerBlockTime: 10s;
}

.container-ticker-banner{
    overflow-X: hidden;
    display: flex;
    flex-direction: row-reverse;
    background-color: #1f292d;
    color:#f6f3ef;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.9rem;
}
.tickerBanner{
    display: flex;
    flex-direction: row-reverse;
    text-align: center;
}
  
.tickerBanner div{
    display: inline-block;
    padding: 1.5vw;
    flex-shrink: 0;
    position: relative;
    animation: ticker 2s infinite linear;
    animation-duration: var(--bannerBlockTime), 2s;
}
  
@keyframes ticker {
    from {left:0}
    to   {left:var(--bannerBlockLength)}
}
  


/*Explore page for Instagram----*/

.explore-page a {
    font-family: 'Playfair Display', serif;
    display: block;
    text-align: center;
    margin-bottom: 0.8rem;
    color: #1f292d;
     /*top +bottom then left +right */
    padding: 0.7rem 1.5rem;
    text-decoration: none;
    font-size: 1.5rem;
    text-transform: uppercase;
}


.explore-page .featured {
    color: #ac5122;
}
.bg-explore {background-color:#f6f3ef;}



/* General CSS Styles (apply everywhere)-MEDIA QUERIES */ 

.show-xs, 
.show-sm,
.show-md {
	display: none;
}
.mobile-only {
    display: none;
}

/* DESKTOP HERO ONLY */
.desktop-only {
    display: none;
}

/* Show desktop section, hide mobile section at large screens */
@media (min-width: 1024px) {
    
   .desktop-only {
        display: block !important;
    }
    .mobile-only {
        display: none !important;
    }
    
}

/* --------------- MD Media Query (64em / 1024px) --------------- */ 
/* Styles added here will apply at devices smaller than 1024px, or zoomed in equivalent */ 

@media (max-width: 64em) {

    /*body { border: 2px solid green; padding: 0.5rem;}*/
   

	.show-md { display: block; }
	.hide-md { display: none; }

  
    .mobile-only {
        display: flex !important;
    }
    .desktop-only {
        display: none !important;
    }

    

    h1              { font-size: 3.6rem;}
    h2              { font-size: 2.2rem}
    .extra-large-heading {font-size: 3.6rem;}
    .medium-heading { font-size: 2.1rem;}
    .medium-text    { font-size: 1.4rem;}

    .md-text-center {text-align: center;}
    .md-text-left   {text-align: left;}
    .md-text-right  {text-align: right;}

    .md-padded      {padding: 5%;}
    .md-padded-1    {padding: 1rem;}
    .md-padded-05   {padding: 0.5rem;}
    .md-padded-t-1  {padding-top: 1rem;}
    .md-padded-b-1  {padding-bottom: 1rem;}

    .md-padded-b-0  {padding-bottom: 0;}
    .md-padded-b    {padding-bottom: 5%;}

    .md-margin-l-1-negative  { margin-left: -1.2rem; }

    .md-tall-80 { min-height: 80vh; }

    .flex-flip-md   {flex-direction: column-reverse; }

    .footer-info {padding-right: 0;}
    .footer-info img {max-width: 45%; }

   
  
}

/* --------------- SM Media Query (48em / 768px) --------------- */ 
/* Styles added here will apply at devices smaller than 768px, or zoomed in equivalent */ 

@media (max-width: 48em) {
    html { font-size: 14px;}

    /*body { border: 2px solid blue;} */

    .show-sm { display: block; }
    .hide-sm { display: none; }

    h1                  { font-size: 2.9rem;}
    h2                  { font-size: 2rem}
    .eyebrow-heading    {
        font-size: 1rem;
        margin-top: 5%;
    }
    .subheading         {font-size: 1rem;}
    .extra-large-heading { font-size: 2.9rem;}
    .large-text         {font-size: 3.2rem;}
    .medium-text        { font-size: 1.4rem;}


    .sm-text-center {text-align: center;}
    .sm-text-left   {text-align: left;}
    .sm-text-right  {text-align: right;}

    .sm-padded-lg   {padding: 10%;  }
    .sm-sm-padded   {padding: 2.5%;}
    .sm-padded      {padding: 5%;}
    .sm-padded-1    {padding: 1rem;}
    .sm-padded-05   {padding: 0.5rem;}
    .sm-padded-t    {padding-top: 5%; }
    .sm-padded-b    {padding-bottom: 5%; }
    .sm-padded-t-0  {padding-top: 0;}
    .sm-padded-b-sm {padding-bottom: 2.5%; }
    .sm-sm-padded-lr   {padding-left: 2.5%; padding-right:2.5%;}
    .sm-padded-lr      {padding-left: 5%; padding-right:5%;}

    .sm-padded-t-75    {padding-top: 7.5%; }

    .sm-tall-50 { min-height: 50vh; }
    .sm-tall-70 { min-height: 70vh; }
    .sm-tall-80 { min-height: 80vh; }

    .dusting-cake   {margin-bottom: -35%;}

    .flex-flip-sm { flex-direction: column-reverse; }

    .accordion-item { margin: -0.1rem 0;}

    .logo img { max-width: 70%;}

    .extra-large-heading span {
        font-size: 0.8rem;
    }

    .tickerBanner div { padding: 3vw;}
    


    .sm-form {
        max-width: 50vw;
        margin: auto;
    } 


}

/* --------------- XS Media Query (36em / 576px) --------------- */ 
/* Styles added here will apply at devices smaller than 576px, or zoomed in equivalent */ 

@media (max-width: 36em) {

   /* body { border: 2px solid lightblue;}*/

    .show-xs { display: block; }
    .hide-xs { display: none; }

    .mobile-menu a { font-size: 2rem; }

    .logo { margin-top: 2.5%;}

    h1              { font-size: 2.6rem;}
    h2              { font-size: 1.9rem}
    .medium-heading { font-size: 2rem;}
    .extra-large-heading { font-size: 2.6rem;}
    .large-text     { font-size: 2.8rem;}
    .medium-text    { font-size: 1.3rem;}

    a               { font-size: 0.8rem;}

    footer h4 { font-weight: bold;}

    .xs-text-center {text-align: center;}

    .xs-sm-padded   {padding: 2.5%;}
    .xs-padded      {padding: 5%;}
    .xs-padded-1    {padding: 1rem;}
    .xs-padded-05   {padding: 0.5rem;}

    .xs-padded-t    {padding-top: 5%;}
    .xs-padded-b    {padding-bottom: 5%;}
    .xs-padded-t-lg {padding-top: 10%;}
    .xs-padded-b-lg {padding-bottom: 10%;}
    .xs-padded-tb   {padding:5% 0;}
    .xs-padded-tb-xl   {
        padding-top:12%;
        padding-bottom: 12%;
    }

    .xs-margin-t-2    {padding-top: 2rem;}

    .xs-margin-l-negative  { margin-left: -0.8rem; }

    .xs-tall-90     { min-height: 90vh; }

    .portfolio-cocktail-mob   { background-image: url('images/article-cocktail-mockup-mob.jpg');}


    .burger-button {margin-top: -0.2rem;}

    .logo img { max-width: 70%;}


    .xs-form {
        max-width: 85vw;
        margin: auto;
    } 


}

/* ------- XXS Media Query (25em / 400px) --------------- */ 
/* - Styles added here will apply at devices smaller than 576px, or zoomed in equivalent */ 

@media(max-width:25em) {

    html { font-size: 12px;}

	[class*="grid"] .xxs-stack { 
        flex-basis: 100%;
        max-width: 100%;
    }

    .burger-button {margin-top: -0.1rem;}

}