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

  [class*=grid-][class*=-equalHeight]>[class*=col] {
    display:block;
    /* This overrides a quirk where contents inside of equal height containers become columns themselves */
  }

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

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

  /* Override default gridlex padding */ 
  [class*=col] { padding: 0; }
  [class*=grid] { margin: 0; }

  html {
    scroll-behavior: smooth;
  }

  section { position: relative;}

  .gallery [class*="col-"] {
    padding: 0.5%;
  }


  
  /* big elements */
  section, header, footer {
    padding: 1% 5%;
  }
  
  /* Typography */
  h1, h2, h3, hr, p {
    margin-bottom: 1.5rem;
  }
  
  h1 {
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
  }
  
  h2 {
    font-family: orpheuspro, serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: rgba(33,33,33,0.88);
    /* margin:  */
  }
  
  h3 {
    font-family: halyard-display, sans-serif;
    font-style: normal;
    font-size: 15px;
    font-weight: normal;
  }
  
  h4 {
    font-family: orpheuspro, serif;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .2rem;
    color: rgba(33,33,33,0.88);
  }
  
  p {
    font-family: miller-display, serif;
    font-style: normal;
    font-weight: 300;
    color: #404040;
    line-height: 1.5;
    font-weight: 13px;
  }
  a {
    text-decoration: none;
    color:inherit;
  }
  
  /* This is a line element */
  hr {
    border: none;
    border-bottom: 3px solid;
    width: 4rem;
    margin-bottom: 1rem;
    margin: auto;
  }
  
  nav a {
    text-decoration: none;
    color: #F8A39B;
    letter-spacing:0.1rem;
    text-transform: uppercase;
    font-size: 12px;
    padding: 1rem;
    display: inline-block;
  }
  
  header a {
    text-decoration: none;
    color: #F8A39B;
  }
  
  footer p {
    font-size: 13px;
  }
  
  footer h3 {
    /* color: #404040; */
    font-weight: 100;
    padding:0  1rem;
    margin-bottom: 0;
  }
  footer .mobile-center a {
    display: block;
  }
  
  span {
    font-family: miller-display, serif;
    font-style: normal;
    font-size: 16px;
    font-weight: normal;
    color:#F8A39B;
  }
  
  
  /* Utility classes */
  [class*=bg]{
    background-position: center;
    background-size: cover;
  }
  
  /* background colors */
  .light-bg { background-color: #f5f5f5; }
  .featured-bg { background-color: #404040;  }
  
  /* text-alignment classes */
  
  .centered { text-align: center; }
  .left { text-align: left; }
  .right { text-align: right; }


  .emphasis       { font-size: 1.2rem; }
  .subtle         { opacity: 0.8;     }
  .v-subtle       { opacity: 0.5;     }
  .subtitle       { font-size: 0.8rem; }
  .bold           { font-weight: bold; }
  .italic         { font-style: italic; }

  .text-left {text-align: left;}

  .text-xs   { font-size: 1rem; line-height: 0.9; } 
  .text-m   { font-size: 3.1rem; line-height: 0.9; } 
  .text-l   { font-size: 4.1vw; line-height: 1;}
  .text-xl  { font-size: 5.5vw;  }
  .text-xxl { font-size: 10vw; }

  .text-hotel { font-size: 2.8rem; line-height: 0.9;}

  .text-w-600 { font-weight: 600; }
  .text-w-700 { font-weight: 700; }
  .text-w-800 { font-weight: 800; }
  
  /* Padding */
  
  .padded {padding: 5%}
  .padded-5px { padding: 5px}
  .padded-1 { padding: 1rem; }
  .padded-2 { padding: 2rem;}
  .padded-3 { padding: 3rem;}
  .padded-bottom {padding-bottom: 10rem;}
  .padded-top {padding-top: 2rem;}
  .padded-bottom-0 {padding-bottom: 0}


  .bob .padded-0 { padding: 0; }
  .padded-t-0 { padding-top: 0; }
  .bob .padded-b-0 { padding-bottom: 0; }
  .padded-l-0 { padding-left: 0; }
  .padded-r-0 { padding-right: 0; }
  
  
  /* Margin */
  
  .margin-1 { margin:1rem;}
  .margin-2 { margin:2rem;}
  .margin-5 { margin:5rem;}
  .margin-3 { margin:3rem;}
  .margin-bottom-2 {margin-bottom: 2rem;}
  .margin-bottom-5 {margin-bottom: 5%;}
  .margin {margin: 2rem 15rem;}
  .margin-auto { margin: auto;}


  .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-tb { margin-top: 5%; margin-bottom: 5%; }
  .margin-lr { margin-left: 5%; margin-right: 5%; }

  .flex-end { justify-content: flex-end; }
  .jusitfy { text-align: justify;}

  .z-0 { position: relative; z-index: 0; }
  .z-1 { position: relative; z-index: 1; }
  .z-2 { position: relative; z-index: 2; }
  .z-3 { position: relative; z-index: 3; }


  
  .verticle-line {
    margin: 0 1rem;
    border-left: 2px solid black;
  }
  
  .block {
    display: block;
  }
  
  /* Header section */
  
  .logo {
    font-family: "sydneyregular";
    font-size: 32px;
    margin-top: 2rem;
    padding-top:1rem;
    position: fixed;
    top: 2px;
    left: 80px;
    position: fixed;
  }
  
  .top-bg {
    background-image: url("/images/Instagram_Karen_9W3A0482.jpg");
    max-width: 1600px;
    min-height: 800px;
    background-position: 50% 50%;
  }
  
  footer p {
    font-size: 13px;
  }
  
  footer h3 {
    /* color: #404040; */
    font-weight: 100;
    padding:0  1rem;
    margin-bottom: 0;
  }
  
  /* pop-up gallery */
  
  .popup-gallery .bg-image {
    border: 2px solid white;
  }
  
  
  /* Masonry Gallery */
  
  .masonry { /* Masonry container */
    column-count: 3;
    column-gap: 1rem;
  }
  
  .masonry .item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin-bottom: 1rem;
    width: 100%;
  }



  
 
   /* ------------ Responsive Styles ----------------------- */

/* General CSS Responsive Styles (Apply everywhere unless overriden) */ 

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

.inline { 
  display: inline-block;
  vertical-align: top;
}

/* XL Screens  */

@media(min-width: 1800px) {
  .text-l,
  .text-xl,
  .text-xxl { font-size: 7rem; }
}

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


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

@media(max-width:64em) {

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

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

  .md-flex-1 { order: 1; }
  .md-flex-2 { order: 2; }
  .md-flex-3 { order: 3; }

}

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


@media(max-width:48em) {

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

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

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

  .sm-padded-0   { padding: 0; }
  .sm-padded-t-0 { padding-top: 0; }
  .sm-padded-b-0 { padding-bottom: 0; }
  .sm-margin-t-0 { margin-top: 0; }
  .sm-margin-b-0 { margin-bottom: 0; }

  .sm-padded-r-0 { padding-right: 0;}
  .sm-padded-l-0 { padding-left: 0;}

  .sm-margin-b-1 { margin-bottom: 1rem; }
  .sm-margin-b-2 { margin-bottom: 2rem; }

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

  .sm-landscape-wide{ padding-bottom: 45% ; }
  .sm-landscape     { 
    padding-bottom: 66% ;
    background-size: cover;
    background-position: center;
   }
  .sm-portrait-tall { padding-bottom: 175%; }
  .sm-portrait      { padding-bottom: 125%; }
  .sm-square        { padding-bottom: 100%; }
  .sm-no-bg-image   { background-image: none!important; }
  .sm-no-bg-image::after {background: none }
  .sm-no-border { border: none!important; }

  .sm-flex-flip { flex-direction: row-reverse; }
  .sm-flex-1 { order: 1; }
  .sm-flex-2 { order: 2; }
  .sm-flex-3 { order: 3; }

  .banner-title { font-size: 15vw;}
  .sm-text-dark { color: var(--dark-text); }
  .columns-3, .columns-2 { column-count: 1;}
  .sm-bump-up {
    margin-top: -10vh;
    position: relative; 
  }

  .sm-overlay-dark::after {
    background-color:rgba(0, 0, 0, 0.4);
  }

  .gallery-section{
    padding: 1rem;
  }
  .gallery-grid{
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  p {
    font-weight: 400;
  }

   .masonry {
      column-count: 2;
    }

}

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

@media(max-width:36em) {

    .bg-image{ min-height: 0; }  /* or height: auto; */

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

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

    .xs-padded     { padding: 5%; }
    .xs-padded-10  { padding: 10% }

    .xs-margin-b-1 { margin-bottom: 1rem; }

    .xs-padded-r-2 { padding-right: 2rem; }
    .xs-padded-l-2 { padding-left: 2rem; }

    .xs-square { padding-bottom: 100%; }

    .xs-text-small { font-size: 2rem; }

    .xs-bg-fixed {background-attachment: scroll;}

    .emphasis { font-size: 1rem;}

    .xs-padded-3 { padding: 3rem; }

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

    .quote-mark {
      font-size: 9rem;
    }

    .text-small {
      font-size: 7vw;
      padding-top: 2rem;
    }

    
  .capped-width.grid{
    display: flex;        /* if your grid system is flex-based */
    flex-direction: column;
    align-items: center;  /* centers children */
  }

  .capped-width.grid > [class*="col-"]{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* image on top + centered */
  .capped-width .bg-image{
    order: 1;
    width: 100%;
    min-height: 16rem;     /* mobile height */
    margin-bottom: 1.5rem;
  }

  /* text underneath */
  .capped-width .col-5_sm-12-middle{
    order: 2;
    text-align: left;      /* or center if you prefer */
  }

 .portrait-tall{
    width: 100%;
    margin: 0 auto 1rem;
 }

 .mob-horizontal-scroll {
          overflow-x: auto;
          flex-wrap: nowrap;
          -webkit-overflow-scrolling: auto;
        }
       
        .mob-horizontal-scroll a {
          margin-bottom: 2rem;
        }

    .gallery-section{
    padding: 1rem;
  }
  .gallery-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }

  p {
    font-weight: 400;
  }

  .itinerary-hero {
    height: 22rem;
  }

   .masonry {
      column-count: 1;
    }


}