/* ==========================================================================
   FONTS
   ========================================================================== */
   @font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-Book.woff2') format('woff2'),
        url('../fonts/Jost-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

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

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-Light.woff2') format('woff2'),
        url('../fonts/Jost-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

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

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-Medium.woff2') format('woff2'),
        url('../fonts/Jost-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

/* ==========================================================================
   SITE SETTINGS
   ========================================================================== */
    :root {
      	
	    --font-light: 300;
        --font-regular: 400;
        --font-medium: 500;
        --font-semi: 600;
        --font-bold: 700;

        --grey-1: #FDFDFD;
        --accent-color: #560036;
        --highlight-color: #005B4C;
        --bg-accent: #eaebf2;
        --text-color-dark: #111111;
        --text-color-lighter: rgb(66, 76, 84);

        --spacing1: 1rem;
        --spacing2: 1.5rem;
        --spacing3: 2rem;
        --spacing4: 2.5rem;
        --spacing5: 3rem;
        --spacing6: 3.5rem;
        --spacing7: 4rem;
        --spacing8: 4.5rem;
        --spacing9: 5rem;
        --spacing10: 5.5rem;
        --spacing11: 6rem;
        --section-spacing: calc(var(--spacing8) * 2);
        --section-spacing-md: calc(var(--spacing6) * 2);
        --section-spacing-sm: calc(var(--spacing4) * 2);
    }

html{
    font-family: 'Jost', sans-serif;
    font-weight: var(--font-regular)
}
@media screen and (max-width: 1400px){
    html{--basicGrid-width: 1200px}
}
.page-wrap{
    overflow-x: hidden
}

/* ==========================================================================
   HELPER CLASSES
   ========================================================================== */
.full-height{
    height: 100%;
}
.center{
    width: 100%;
    display: flex;
    justify-content: center
}
/* ==========================================================================
   LINKS, BUTTONS
   ========================================================================== */
a{
    color: var(--accent-color);
}
a.underlined{
    text-decoration: underline
}
.cta-link{
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: var(--font-medium);
    color: #fff;
    text-transform: uppercase;
}
.cta-button{
    display: block;
    width: 224px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 3px;
    background-color: var(--accent-color);
    font-weight: var(--font-medium);
    margin-left: auto;
    margin-right: auto;
    transition: all .3s ease-in;
}
.cta-button:hover{
    background-color: #fff;
    color: var(--accent-color);
}

.default-link{
    font-size: 14px;
    font-weight:var(--font-regular);
    letter-spacing: 1px;
    color: #999;
    transition: color .2s;
}

.default-link:hover{
    color: var(--highlight-color)
}


/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
   .big-title{
       font-size: 96px;
       text-align: center;
       font-weight: var(--font-medium);
       color: #fff;
       margin-bottom: var(--spacing4)
   }
   .big-title + p{
       font-size: 48px;
       font-weight: var(--font-light);
       color: #fff;
       text-transform: uppercase
   }
   .big-title + p span{
       font-size: 18px;
       font-weight: var(--font-medium);
       color: #fff;
       text-transform: uppercase;
       letter-spacing: 8px;
       display: inline-block;
       vertical-align: middle;
       margin-left: var(--spacing2)
   }
   .section-title{
    font-size: 44px;
    font-weight: var(--font-medium);
    color: var(--text-color-dark);
    text-align: left;
    position: relative;
    line-height: 1.1;
    margin-bottom: var(--spacing2);
   }
   .section-title span{
       display: block;
       font-size: 13px;
       letter-spacing: 1px;
       color: var(--highlight-color);
       font-weight: var(--font-medium);
       text-transform: uppercase;
       margin-bottom: var(--spacing5)
   }
   .section-title::before{
       content: '';
       position: absolute;
       left: 0;
       bottom: -12px;
       width: 60px;
       height: 3px;
       background-color: var(--highlight-color);
       display: block;
   }
   .section-subhead{
    font-size: 21px;
    color: var(--text-color-lighter);
    margin-left: var(--spacing11);
    max-width: 420px;
    line-height: 1.4;
    margin-top: var(--spacing3)
   }
   .tour-card-title, .card_heading{
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.7;
    color: #fff;
    font-weight: var(--font-regular)
   }
   .tour-card-title a{
       color: inherit;
       transition: color .3s linear
   }
   .tour-title{
       font-size: 32px;
       font-weight: var(--font-medium);
       position: relative;
       color: var(--highlight-color);
       text-align: left;
       display: inline-block
   }
   .tour-title::before{
    content: '';
       position: absolute;
       left: 0;
       bottom: 0;
       width: 30px;
       height: 3px;
       background-color: var(--highlight-color);
       display: block;
   }
   .overlay-title{
       max-width: 920px;
       font-size: 32px;
       color: #fff;
       line-height: 1.8;
       text-align: center
   }
   @media screen and (max-width: 1440px){
    .big-title{
        font-size: 82px
    }
    .big-title + p{
        font-size: 42px
    }
    .big-title + p span{
        font-size: 16px;
        letter-spacing: 6px
    }
   }
   @media screen and (max-width: 1366px){
       .section-title{font-size: 40px}
   }
   @media screen and (max-width: 1280px){
       .section-subhead{
           font-size: 20px
       }
   }
   @media screen and (max-width: 1024px){
       .big-title{
           font-size: 76px
       }
       .big-title + p{
           font-size: 40px;
       }
       .big-title + p span {
           font-size: 15px;
           letter-spacing: 5px;
           margin-left: var(--spacing1)
       }
   }
   @media screen and (max-width: 900px){
       .section-title{
           font-size: 36px
       }
   }
   @media screen and (max-width: 680px){
    .big-title{
        font-size: 60px;
        line-height: 1.1
    }
    .tour-title{font-size: 30px}
}
    @media screen and (max-width: 560px){
        .big-title{
            font-size: 56px;
            margin-bottom: var(--spacing2)
        }
        .big-title + p{
            font-size: 32px;
        }
        .big-title + p span{
            font-size: 14px;
            letter-spacing: 4px;
            margin-left: 8px
        }
    }
    @media screen and (max-width: 480px){
        .big-title{font-size: 54px}
        .section-title{font-size: 34px}
        .section-subhead{margin-left: var(--spacing1);font-size: 17px;margin-top: var(--spacing2)}
        .tour-title{font-size: 28px}
    }

/* ==========================================================================
   HEADER
   ========================================================================== */
header {
    width: 100%;
    height: 130px;
    background-color: #fff;
    position: relative;
    border-bottom: 1px solid #eee
}
header.absolute{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    background-color: transparent;
    border-bottom-color: rgba(238, 238, 238,0)
}
#main-nav a{
    font-size: 17px;
    color: var(--text-color-dark);
    letter-spacing: 1px;
    font-weight: var(--font-medium);
    margin-right: var(--spacing4);
    transition: color .3s ease
}
#main-nav a:hover{
    color: var(--highlight-color)
}
header.absolute #main-nav a{
    color: #fff
}
#main-nav a:last-of-type{
    margin-right: 0
}
.hamburger {
    position: fixed;
    right: 10px;
    top: 28px;
    display: block;
    width: 48px;
    height: 48px;
    cursor: pointer;
    z-index: 100;
    border-radius: 50%;
    background-color: transparent;
    opacity: 0;
    visibility: hidden;
}
.hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #000;
    border-radius: 2px;
    margin-left: 14px;
}
header.absolute .hamburger span{
    background: #fff
}
.hamburger span:nth-child(1) {
    margin-top: 16px;
}
.hamburger span:nth-child(2) {
    margin-top: 4px;
    opacity: 1;
}
.hamburger span:nth-child(3) {
    margin-top: 4px;
}
.hamburger[data-toggle="opened"] {
    transform: rotate(45deg);
}
.hamburger[data-toggle="opened"] span {
    transition: transform 0.2s ease;
}
header.absolute .hamburger[data-toggle="opened"] span {
    background-color: #000
}
.hamburger[data-toggle="opened"] span:nth-child(1) {
    transform: translateY(6px) rotate(180deg);
}
.hamburger[data-toggle="opened"] span:nth-child(2) {
    opacity: 0;
}
.hamburger[data-toggle="opened"] span:nth-child(3) {
    transform: translateY(-6px) rotate(90deg);
}
.logo{
    width: 120px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center
}
header.absolute .logo{
    width: 120px
}
header .cta-link{
    float: right;
}
header.absolute .cta-link{
    color: #fff
}
header .cta-link{
    color: var(--text-color-dark);
    font-size: 18px;
}

@media screen and (max-width: 1024px){
    #main-nav a {
        font-size: 16px;
        margin-right: var(--spacing3)
    }
    header .cta-link{
        font-size: 17px
    }
}
@media screen and (max-width: 768px){
    #main-nav a {
        margin-right: var(--spacing1)
    }
    header .logo, header.absolute .logo{
        width: 100px
    }
   
}
@media screen and (max-width: 640px){
  body.stop-scroll{overflow-y: hidden;height: 100vh;}
  header  .cta-link{float: left}
  .hamburger{
      opacity: 1;
      visibility: visible;
  }
  #main-nav{
    position: fixed;
    z-index: 99;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    height: 100vh;
    left: 0;
    width: 100%;
    padding-left: 18%;
    background-image: url(../images/mobile-nav-bg.jpg);
    background-size: cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, transform .7s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    transform: translate3d(0, 76%, 0)
}
#main-nav::before{
    content: '';
    background-image: url(../images/logo_madsnail_grey_alt.png);
    position: absolute;
    top: 80px;
    left: 12%;
    display: block;
    width: 100px;
    height: 100px;
    background-size: 100px 100px;
    transform: translate3d(20px,0,0);
    opacity: 0;
    transition: all .4s cubic-bezier(0.215, 0.610, 0.355, 1.000) .4s
}

#main-nav.active{
   opacity: 1;
   visibility: visible;
   transform: translate3d(0,0,0)
}
#main-nav.active::before{
    opacity: 1;
    transform: translate3d(0,0,0)
}
#main-nav a{
    margin-right: 0;
    margin-bottom: var(--spacing2);
    font-size: 22px;
    letter-spacing: 2px;
    opacity: 0;
    transform: translate3d(-80px, 0, 0);
    color: var(--text-color-dark);
    text-transform: uppercase
}
header.absolute #main-nav a{
    color: var(--text-color-dark)
}
#main-nav a:last-of-type{
    margin-bottom: 0
}
#main-nav.active a{
    transform: translate3d(0,0,0);
    opacity: 1;
    transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000) .5s;
}
#main-nav.active a:nth-of-type(2){
    transition-delay: .7s
}
#main-nav.active a:nth-of-type(3){
    transition-delay: .9s
}

}

@media screen and (max-width: 560px){
    header{height: 100px;}
    header .logo, header.absolute .logo{width: 90px;}
    header .cta-link{font-size: 15px}
}
@media screen and (max-width: 480px){
    header .logo, header.absolute .logo{width: 80px}
    header.absolute .row{margin: 0}
    header .cta-link{font-size: 13px}
}



/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
    width: 100%;
    height: 100vh;
    padding-top: 65px;
    background-size: cover;
    position: relative;
    background-position: center bottom;
    background-attachment: fixed;
    background-image: url(../images/hero-image-sm.jpg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}
@media screen and (min-width: 1280px){
    .hero{background-image: url(../images/hero-image-md.jpg)}
}
@media screen and (min-width: 1600px){
    .hero{background-image: url(../images/hero-image-lg.jpg)}
}
.hero .cta-button{
    margin-top: var(--spacing8)
}
#award-img{
    width: 180px;
    margin-top: var(--spacing3);
    margin-left: auto;
    margin-right: auto
}
@media screen and (max-height: 800px){
    .hero{padding-top: 50px}
  #award-img{
      width: 140px;
  }
}
@media screen and (max-width: 1024px){
    #award-img{width: 140px}
}
@media screen and (max-width: 480px){
    #award-img{width: 130px}
}
/* ==========================================================================
   FOOTER
   ========================================================================== */
   footer{
       background-color: #4A3A44;
       padding-top: var(--spacing5);
   }
   .footer-logos{
       width: 100%;
       max-width: 280px;
       display: flex;
       justify-content: space-between;
       margin: 0 auto
   }
   .madsnail-statement{
       width: 100%;
       max-width: 374px;
       margin: var(--spacing2) auto var(--spacing11) auto;
   }
   .madsnail-statement p{
       font-size: 16px;
       font-weight: var(--font-medium);
       color: #080507;
       text-align: center;
       line-height: 1.8
   }
   .madsnail-statement p a{
       color: #FFFFFF;
       transition: color.2s ease;
   }
   .madsnail-statement p a:hover{
       color: #080507
   }
   .footer-columns{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    position: relative;
   }
   .footer-column:nth-of-type(1){
      margin-right: auto;
      flex: 0 1 1;
   }
   .footer-column:nth-of-type(3){
       margin-left: auto;
       
   }
   .footer-column:nth-of-type(2){
       width: 180px;
       margin-right: auto;
   }

   .footer-column-title{
       font-size: 16px;
       text-transform: uppercase;
       letter-spacing: 1px;
       color: #FFFFFF;
       font-weight: var(--font-medium);
       margin-bottom: var(--spacing1);
       text-align: left
   }
   .footer-legal{
       color: #080507;
       font-size: 16px;
       line-height: 2
   }
   .footer-list a{
       display: inline-block;
       color: #080507;
       font-weight: var(--font-medium);
       line-height: 1.9;
       transition: color .2s ease;
   }
   .footer-list a:hover{
       color: #fff
   }
   .footer-skyline{
       width: 100%;
   }
   .footer-skyline img{
       width: 100%;
       height: 100%;
       object-fit: contain;
       mix-blend-mode: multiply;
   }
   @media screen and (max-width: 1200px){
       .footer-columns{max-width: 90%}
   }
   @media screen and (max-width: 640px){
      .footer-columns{max-width: 100%;flex-direction: column;padding-left: 15%}
      .footer-column:nth-of-type(3){
          margin: 0
      }
      .footer-column:nth-of-type(2){
          margin: var(--spacing3) 0
      }

   }
/* ==========================================================================
   HOME PAGE
   ========================================================================== */
   #testimonials{
    padding: var(--spacing4) 0;
    position: relative;
    z-index: 1;
   }
   .prev{
    display: block;
    position: absolute;
    z-index: 1000;
    left: var(--spacing10);
    top: 48%;
    cursor: pointer;
   }
   .next{
    display: block;
    position: absolute;
    z-index: 1000;
    right: var(--spacing10);
    top: 48%;
    cursor: pointer;
   }
   #testimonials-slider{
    width: 100%;
    padding: var(--section-spacing-sm) 0
   }
   .testimonial-slide-wrap{
     width: 100%;
     display: flex;
     justify-content: center
   }
   .testimonial-slide{
    flex: 0 0 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
   }

   .testimonial-logo{
       width: 80px;
       margin-left: auto;
       margin-right: auto;
       margin-bottom: var(--spacing2);
       transform: translateY(-40px);
    }
    .testimonial-text p{
     font-size: 32px;
     font-weight: var(--font-regular);
     line-height: 1.6;
     color: var(--text-color-dark);
     text-align: center;
     margin-bottom: var(--spacing2);
     padding: 0 var(--spacing5)
    }
    .testimonial-stars{
        width: 90px;
        margin-bottom: var(--spacing1);
        margin-left: auto;
        margin-right: auto
    }
    .testimonial-author{
        font-size: 16px;
        color: var(--text-color-lighter);
        font-weight: var(--font-medium);
        text-align: center;
    }
    .testimonial-link{
        font-size: 13px;
        font-weight:var(--font-regular);
        letter-spacing: 1px;
        color: #999;
        text-align: center;
        transform: translate3d(0,3rem,0);
        transition: color .2s;
    }
    .testimonial-link:hover{
        color: var(--highlight-color)
    }
    @media screen and (max-width: 1200px){
        .testimonial-text p{
            font-size: 28px;
            padding: 0 var(--spacing4)
        }
        .testimonial-slide{
            flex: 0 0 700px
        }
    }
    @media screen and (max-width: 1024px){
        .prev{left: var(--spacing3);}
        .next{right: var(--spacing3);}
    }
    @media screen and (max-width: 768px){
        .testimonial-text p{
            font-size: 26px;
        }
        .testimonial-slide{
            flex: 0 0 600px
        }
        .prev, .next{
            width: 50px
        }
        .prev{left: var(--spacing1);}
        .next{right: var(--spacing1);}
    }
    @media screen and (max-width: 640px){
        .testimonial-text p{
            padding: 0 var(--spacing1);
            font-size: 24px;
            line-height: 1.6
        }
        .testimonial-slide{flex: 0 0 96%}
        .prev, .next{display: none}
        #testimonials-slider{padding-bottom: 0}
    }
    @media screen and (max-width: 480px){
        .testimonial-logo{width: 60px}
        .testimonial-text p{
            font-size: 22px;
            padding: 0 8px
        }
        .testimonial-stars{
            width: 60px
        }
        .testimonial-author{
            font-size: 14px
        }
    }
    @media screen and (max-width: 400px){
        .testimonial-text p{
            font-size: 20px
        }
    }
    #guides-home{
        width: 100%;
        height: 840px;
        background-image: url(../images/guides-home-md.jpg);
        background-position: center center;
        background-size: cover;
        padding-top: var(--section-spacing-sm)
    }
    @media screen and (min-width: 1600px){
        #guides-home{
            background-image: url(../images/guides-home-lg.jpg)
        }
    }
    @media screen and (max-width: 480px){
        #guides-home{
            height: 920px;
        }
    }
    .guides-cards-wrap{
        margin-top: var(--section-spacing-md);
        display: flex;
    }
    .guide-card{
        width: 320px;
        padding: 0 0 var(--spacing2) 0;
        border: 1px solid #eee;
        border-radius: 3px;
        background-color: #fff;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: var(--spacing3);
    }
    .guide-profile-pic{
        margin: 0 auto;
        max-width: 102px;
        margin-top: -51px
    }
    .guide-name{
        font-weight: var(--font-medium);
        font-size: 16px;
        text-align: center;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--text-color-dark);
        margin-top: var(--spacing2);
        margin-bottom: var(--spacing3)
    }
    .guide-desc{
        max-width: 90%;
        margin: 0 auto;
    }
    .guide-desc p{
        text-align: left;
        font-size: 15px;
        color: var(--text-color-lighter);
        line-height: 1.8;
        margin-bottom: var(--spacing5)
    }
    .guide-card .default-link{
        margin-top: auto;
        margin-right: var(--spacing2);
        align-self: flex-end
    }
    @media screen and (max-width: 768px){
        .guide-profile-pic{
            width: 84px;
            margin-top: -42px
        }
        .guide-card{
            max-width: 320px;
        }
    }

    @media screen and (max-width: 480px){
        .guides-cards-wrap{
            flex-direction: column;
            margin-top: var(--spacing8);
        }
        .guide-card{margin-right: auto;max-width: 80%;margin-left: auto;padding-bottom: 12px}
        .guide-card:nth-of-type(1){
            margin-bottom: var(--spacing8)
        }
        .guide-name{
            font-size: 15px;
            margin: 8px 0 var(--spacing1) 0
        }
        .guide-desc{max-width: 92%;}
        .guide-desc p{
            line-height: 1.7;
            margin-bottom: var(--spacing3);
            font-size: 14px
        }
    }

    #most-popular-tours{
        width: 100%;
        padding: var(--section-spacing) 0;
        background-color: #f9f9f9;
        background-image: url(../images/topographic-tile-8.svg);
        background-repeat: repeat
    }
    /*---------- CARDS LAYOUT ----------*/
.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: var(--section-spacing-sm)
  }
  
  .cards_item {
    display: flex;
    margin-top: 0;
  }
 
  .no-flexbox .cards_item {
    float: left;
  }
  @media screen and (min-width: 42em) and (max-width: 60em) {
    .cards_item {
      width: 50%;
    }
    .no-flexbox .cards_item:nth-child(2n+1) {
      clear: both;
    }
  }
  @media screen and (min-width: 60em) {
    .cards_item {
      width: 30%;
    }
    .no-flexbox .cards_item:nth-child(3n+1) {
      clear: both;
    }
  }
  @media screen and (max-width: 1200px){
      .cards_item{
          width: 31%;
      }
  }
  @media screen and (max-width: 900px){
      .cards_item{
          width: 46%
      }
      .cards_item:nth-of-type(1), .cards_item:nth-of-type(2){
          margin-bottom: var(--spacing3)
      }
  }
  @media screen and (max-width: 768px){
      .cards_item{
          width: 48%
      }
  }

  @media screen and (max-width: 480px){
      .cards_item{
          width: 360px;
          max-width: 90%;
      }
      .cards{justify-content: center}
  }
  
  .card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #eee;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    position: relative;
  }
  .card_image{
      position: relative;
  }
  .card_image::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, rgba(22, 26, 33, 0.40) 0%, rgba(255, 255, 255, 0));
    display: block;
   
  }
  .card_image img {
    width: 100%;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  
  .card_content {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    margin-top: 0;
    padding: var(--spacing2) var(--spacing2) var(--spacing4) var(--spacing2);
  }
  .card_heading{
    position: absolute;
    z-index: 2;
    top: var(--spacing2);
    left: var(--spacing2);
    max-width: 245px;
  }

  .card_content p {
    flex: 1 0 auto;
    color: var(--text-color-lighter);
    margin-bottom: var(--spacing2);
    font-size: 17px
  }
  .card .cta-button{
      font-size: 16px;
      width: 100%;
      height: 50px;
      line-height: 50px;
      margin-left: auto;
      margin-right: auto;
      margin-top: var(--spacing3);
      border: 1px solid transparent
  }
  .card .cta-button:hover{
    border-color: rgb(245, 245, 245) 
  }
  
    .tour-card{
        max-width: 380px;
        position: relative;
        z-index: 1;
        border-radius: 3px 3px 0 0;
    }
    .tour-card-body{
        background-color: #fff;
        border-radius: 0 0 3px 3px;
        border: 1px solid #eee;
        padding-bottom: var(--spacing5)
    }
    .tour-card-icons{
        width: 86%;
        margin: var(--spacing5) auto;
        display: flex;
        justify-content: space-between;
        align-items: baseline
    }
    .card .tour-card-icons{
        width: 100%;
        margin: 0;
        
    }
    .tour-card-icons > div{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }
    .tour-card-icons img{
     
    }
    .tour-card-icons p{
        font-size: 14px;
        color: var(--text-color-dark);
        text-align: center;
        line-height: 1.3;
        margin-top: 0.3rem;
        font-weight: var(--font-medium)
    }
    .tour-card .cta-button{
        font-size: 16px;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid transparent
    }
    .tour-card .cta-button{
        border-color: rgb(245, 245, 245)
    }
    .tour-card .tour-card-title{
        position: absolute;
        z-index: 2;
        top: var(--spacing2);
        left: var(--spacing2);
        max-width: 245px;
    }
    #top-themes{
        padding: var(--section-spacing) 0;
        display: flex;
    }
    .top-themes-text{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: var(--spacing2)
    }

    .top-themes-text .section-title{
        width: 100%;
        max-width: 480px;
        margin-bottom: var(--spacing8)
    }
    .top-themes-text .section-title + p{
        width: 100%;
        max-width: 480px;
        font-size: 20px;
        line-height: 1.7;
        color: var(--text-color-lighter);
        padding-right: var(--spacing4)
    }
    #themes-carousel-wrap{
       max-width: 1280px;
       overflow: hidden;
    }
   
    #themes-carousel{
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        cursor: -webkit-grab;
        cursor: -moz-grab;
        cursor: -o-grab;
        cursor: -ms-grab;
        cursor: grab;
    }
    .card-tall{
      position: relative;
      z-index: 1;
      margin-right: var(--spacing6)
    }
    .card-tall:active{
        cursor: -webkit-grabbing;
        cursor: -moz-grabbing;
        cursor: -o-grabbing;
        cursor: -ms-grabbing;
        cursor: grabbing;
    }
    .card-tall img{
        max-width: none;
        transition: all .3s linear;
    }
    .card-tall:hover img{
        filter: sepia(0.7)
    }
    .card-tall:not(:last-of-type){
        margin-right: var(--spacing8)
    }
    .card-tall .tour-card-title{
        position: absolute;
        z-index: 2;
        top: var(--spacing2);
        left: var(--spacing2);
        max-width: 245px;
    }
    .card-tall .default-link{
        margin-top: var(--spacing1)
    }
    @media screen and (max-width: 1500px){
        .top-themes-text{
            flex: 0 0 480px;
        }
        .top-themes-text .section-title{
            max-width: 400px;
        }
        .top-themes-text .section-title + p{
            max-width: 400px;
            font-size: 17px;
            line-height: 1.8
        }
        .card-tall:not(:last-of-type){
            margin-right: var(--spacing5)
        }
    }
    @media screen and (max-width: 1200px){
        .tour-card-icons img{
        
        }
        .card_content p{
            font-size: 16px
        }
        .tour-card-icons p{
            font-size: 13px
        }
        .card-tall{
            max-width: 300px;
            min-width: 300px;
        }
        .card-tall:not(:last-of-type){
            margin-right: var(--spacing3)
        }
        .card-tall img{
          max-width: 100%;
        }
        
    }
    @media screen and (max-width: 1140px){
        .card_content{
            padding: var(--spacing1) 12px var(--spacing3) 12px;
        }
    }
    @media screen and (max-width: 1024px){
        .card_content p:not(.tour-card-icons p){
            font-size: 15px
        }
        
    }
    @media screen and (max-width: 900px){
        .card_content{
            padding: var(--spacing1) var(--spacing3) var(--spacing3) var(--spacing3);
        }
        .top-themes-text{
            flex: 0 0 400px
        }
        .top-themes-text .section-title{
            max-width: 90%;
        }
        .top-themes-text .section-title + p{
            max-width: 90%;
        }
    }
    @media screen and (max-width: 768px){
        .card_content{
            padding: var(--spacing1) 12px var(--spacing3) 12px;
        }
        #top-themes{
            flex-direction: column
        }
        .top-themes-text{
            flex: 0 0 100%;
            display: flex;
            padding: 0 var(--spacing2) var(--spacing10) 8%;
            flex-direction: row;
            align-items: flex-start
        }
        .top-themes-text .section-title{
            max-width: 320px;
        }
        .top-themes-text .section-title + p{
            flex: 1;
            max-width: 100%;
            line-height: 1.7;
            padding-right: 0
        }
        #themes-carousel-wrap{
            max-width: 92%;
            margin-left: 8%
        }
    }

    @media screen and (max-width: 480px){
        .top-themes-text{flex-direction: column}
        .card-tall{
            max-width: 260px;
            min-width: 260px;
        }
    }

    #go-private{
        height: 720px;
        background-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 76.43%), url(../images/customize-hero-blank-md.jpg);
        background-position: center center;
        background-size: cover;
        display: flex;
        flex-direction: column;
    }
    #go-private.light-blue{
        background-image: linear-gradient(180deg, #f9f9f9 0%, rgba(249, 249, 249, 0) 76.43%), url(../images/customize-hero-blank-md.jpg);
    }
    #go-private.gray{
        background-image: linear-gradient(180deg, #f9f9f9 0%, rgba(249, 249, 249, 0) 70.43%), url(../images/customize-hero-blank-md.jpg);
    }
    @media screen and (min-width: 1600px){
        #go-private.light-blue{
            background-image: linear-gradient(180deg, #f9f9f9 0%, rgba(249, 249, 249, 0) 76.43%), url(../images/customize-hero-blank-lg.jpg)
        }
        #go-private.gray{
            background-image: linear-gradient(180deg, #f9f9f9 0%, rgba(249, 249, 249, 0) 70.43%), url(../images/customize-hero-blank-lg.jpg);
        }
        #go-private{
          background-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 76.43%), url(../images/customize-hero-blank-lg.jpg)
        }

    }
    .cta-button.private{
        width: 320px;
        height: 70px;
        line-height: 70px;
        font-size: 18px;
        letter-spacing: 2px;
        align-self: flex-end;
        margin-top: -30px;
        margin-right: 10%;
        position: relative;
        z-index: 10;
        border: 1px solid transparent
    }
    .cta-button.private:hover{
        border-color: rgb(245, 245, 245)
    }
    #why-questions{
        max-width: 440px;
        background-color: #fff;
        margin: 10% 0 0 15%;
        
    }
    .why-list{
        list-style-type: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center
    }
    .why-list li{
        display: flex;
        width: 80%;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing2) 0;
        border-bottom: 1px solid #CBCBCB;
       
    }
    .why-list li:last-of-type{
        border-bottom: none
    }
    .why-list li a{
        font-size: 22px;
        font-weight: var(--font-medium);
        color: var(--text-color-dark)
    }
    @media screen and (max-width: 1200px){
        #why-questions{
            max-width: 400px;
            margin-left: 5%
        }
        .why-list li a {
            font-size: 20px
        }
    }
    @media screen and (max-width: 900px){
        .cta-button.private{
            width: 280px;
            height: 60px;
            font-size: 17px;
            line-height: 60px
        }
    }
    @media screen and (max-width: 768px){
        .cta-button.private{
            margin-right: 4%
        }
        .why-list li{
            padding: var(--spacing1) 0
        }
        .why-list li a{
            font-size: 19px
        }
    }
    @media screen and (max-width: 480px){
        #why-questions{
            margin-left: var(--spacing2);
            margin-right: var(--spacing2);
            margin-top: 40%
        }
        .cta-button.private{
            margin-left: auto;
            margin-right: auto
        }
    }
  
/* ==========================================================================
   TOUR PAGE
   ========================================================================== */

   .fold-intro{
       width: 100%;
       padding: var(--section-spacing-sm) 0 var(--section-spacing-sm) 0;
   }
   .fold-intro.categories{
    background-size: cover;
    padding: var(--section-spacing-md) 0;
    background-position: center center
   }
   .fold-intro.food-wine{
    background-image: url(../images/fold_intro_bg.png);
   }
   .fold-intro.half-day{
    background-image: url(../images/fold_intro_bg_2.png);
   }
   .fold-intro.full-day{
    background-image: url(../images/fold_intro_bg_3.png);
   }
   .fold-intro .section-title{
       max-width: 480px;
       line-height: 1.2
   }
   .fold-intro .section-title::before{
       bottom: -16px
   }
   .tour-callout-wrap{
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       display: flex;
       justify-content: flex-end;
       align-items: flex-start;
       display: none !important
   }
   .tour-callout{
       max-width: 280px;
       background-color: #fff;
       border: 1px solid #eee;
       transform: translateY(-30%)
}
   .tour-callout-text{
       font-size: 15px;
       text-align: center;
       color: var(--text-color-dark);
       opacity: 1;
       max-width: 100%;
       padding: 0 var(--spacing1);
       margin-left: auto;
       margin-right: auto;
       line-height: 1.6;
   }
   .tour-callout .tour-card-icons{
    justify-content: space-between;
    width: 100%;
    padding: 0 var(--spacing1);
    margin: var(--spacing3) auto var(--spacing2);
   }
   .tour-callout .tour-card-icons > div{
       flex: 0 1 1
   }
   .tour-callout .tour-card-icons img{
       width: 30px;
       max-width: 30px;
   }
   .tour-callout .tour-card-icons p{
       font-size: 13px;
       color: var(--text-color-dark);
       font-weight: var(--font-medium);
   }
   .tour-hero-image{
       width: 100%;
       position: relative;
   }
   .tour-callout .cta-button{
    margin: var(--spacing4) auto var(--spacing3) auto;
    width: calc(100% - var(--spacing4));
}
   @media screen and (max-width: 900px){
     .tour-callout{max-width: 260px;}
     .tour-callout .tour-card-icons img{
        width: 24px
     }
     .tour-callout .tour-card-icons p{
         font-size: 12px
     }
     .tour-callout-text{padding: 0 6px}
   }
   @media screen and (max-width: 640px){
     .tour-callout{max-width: 340px;}
     .tour-callout .tour-card-icons img{
        width: 24px
     }
     .tour-callout .tour-card-icons p{
         font-size: 12px
     }
     .tour-callout-text{padding: 0 6px}
   }
 
   #tour-overview{
       padding: var(--section-spacing) 0 var(--spacing6) 0;
       position: relative;
       z-index: 1;
       background-color: #f9f9f9;
       background-image: url(../images/portugal_map_pin.svg);
       background-position: 25% 0;
       background-size: 28vw
   }
   .map-path-top{
       position: absolute;
       z-index: -1;
       width: 19.2vw;
       top: 26vw;
       left: 0;
   }
   .map-path-top img{
     width: 100%;
     height: 100%;
     object-fit: cover
   }
   .map-path-bottom{
       position: absolute;
       z-index: -1;
       width: 20vw;
       top: 38vw;
       left: 0;
   }
   .map-path-bottom img{
     width: 100%;
     height: 100%;
     object-fit: cover
   }
   .tour-intro-text{
       margin: var(--spacing8) 0 0 0;
   }
   .tour-intro-text.left{
       max-width: 590px;
   }
   .tour-intro-text.right{
      margin-left: auto
   }
   .tour-intro-text.right{
       max-width: 530px;
   }
 
   .tour-intro-text p{
       font-size: 20px;
       color: var(--text-color-dark);
       text-align: left;
       line-height: 1.7;
   }
 
   @media screen and (max-width: 1366px){
      #tour-overview{
          background-size: 42vw
      }
      .tour-intro-text p{
          font-size: 19px;
          line-height: 1.7
      }
   }
   @media screen and (max-width: 1200px){
       #tour-overview{
           background-position: 5% 0
       }
       .tour-intro-text p{
           font-size: 18px;
           line-height: 1.8;
           max-width: 480px;
       }
     
   }
   @media screen and (max-width: 900px){
       #tour-overview{
           background-size: 70vw
       }
   }
   @media screen and (max-width: 640px){
       #tour-overview{
           background-size: 86vw
       }
       .tour-intro-text.right{margin-left: 0}
       .tour-intro-text p{max-width: 100%;}
   }
   @media screen and (max-width: 480px){
    .tour-intro-text{
        width: 100%;
    }
    .tour-intro-text p{
        font-size: 17px;
        line-height: 1.7
    }
    #tour-overview{
        background-size: 110vw
    }
   }
   #tour-carousel-wrap{
       width: 1350px;
       margin-top: var(--section-spacing-md);
       margin-bottom: var(--section-spacing);
       overflow: hidden;
       margin-left: auto
   }
   @media screen and (max-width: 1600px){
    #tour-carousel-wrap{
        max-width: 70%;
    }
   }
   #tour-carousel{
       width: 100%;
       display: flex;
       flex-wrap: nowrap;
       align-items: flex-start;
       cursor: -webkit-grab;
       cursor: -moz-grab;
       cursor: -o-grab;
       cursor: -ms-grab;
       cursor: grab;
   }
   .tour-carousel-item img{
    max-width: none;
   }
   .tour-carousel-item:not(:last-of-type){
       margin-right: var(--spacing4);
   }
   .tour-carousel-item:active{
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: -o-grabbing;
    cursor: -ms-grabbing;
    cursor: grabbing;
   }
   .carousel-item{
       flex: 0 0 480px;
       height: 360px;
       border-radius: 3px
   }
   .carousel-item.square{
       flex-basis: 360px;
   }
   .carousel-item.wide{
       flex-basis: 640px
   }
   .carousel-item.vertical{
       flex-basis: 280px
   }
   .carousel-item img{
       max-width: none;
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 3px
   }
   .carousel-item:not(:last-of-type){
    margin-right: var(--spacing4);
}

@media screen and (max-width: 1200px){
    .carousel-item{flex-basis: 440px;height: 320px;}
    .carousel-item.wide{flex-basis: 520px}
    .carousel-item.square{flex-basis: 320px}
    .carousel-item.vertical{flex-basis: 240px}
}
@media screen and (max-width: 640px){
    .carousel-item{
        height: 280px;
    }
    .carousel-item.square{
        flex-basis: 280px
    }
    #tour-carousel-wrap{
        max-width: 90%;
        margin-top: var(--section-spacing-sm)
    }
}
.info-boxes{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: var(--spacing11) 0 var(--spacing4) 0;
}
.info-box{
    background-color: #FFFFFF;
    border-radius: 1px;
    padding: var(--spacing2) 12px var(--spacing2) var(--spacing3);
    width: 100%;
    max-width: 300px;
    position: relative;
    display: flex;
    flex-direction: column
}
.info-box::before{
    content: attr(data-info);
    position: absolute;
    top: -25px;
    left: 12px;
    font-size: 14px;
    font-weight: var(--font-medium);
    color: var(--text-color-dark)
}
.info-box.spacey{
    padding-right: var(--spacing1)
}
.info-box-icons{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}
.info-box-icon{
    display: flex;
    align-items: flex-end;
}

.info-box-icon img{
   
}
.info-box-icon p{
    font-size: 12px;
    font-weight: var(--font-medium);
    text-transform: uppercase;
    color: var(--text-color-lighter);
    margin-left: var(--spacing1);
    line-height: 1.4
}
.info-box-icon p span{
    font-size: 14px;
    text-transform: none;
    color: var(--text-color-dark);    
}
.list-title{
    color: var(--text-color-dark);
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: var(--font-medium);
    position: relative;
    color: #007B6C
}
.list-title.negative{
    color: rgb(211, 57, 36)
}
.list-title.default{
    color: var(--text-color-dark)
}
.list-title.align{
    padding-top: 7px;
}
.list{
    list-style: circle;
    list-style-type: circle;
}
.list.align{
    padding-top: 7px
}
.list:first-of-type{
    margin-bottom: var(--spacing3)
}
.list li p{
    font-size: 14px;
    color: var(--text-color-dark);
    line-height: 1.6
}
.list.spacey li p{
    margin-bottom: 12px
}
.info-box-cta{
    width: 100%;
    display: flex;
    justify-content: center
}
.info-box-cta .cta-button{
    max-width: 100%;
    width: 100%;
    margin-left: -0.5rem
}
@media screen and (max-width: 1400px){
    .info-box{max-width: 280px;}
}
@media screen and (max-width: 1200px){
    .info-box{max-width: 260px;}
    .info-box-icon img{
        
    }
    .info-box-icon p{
        font-size: 11px
    }
    .info-box-icon p span{
        font-size: 13px
    }
    .list li p{
        font-size: 13px;
        line-height: 1.5
    }
}
@media screen and (max-width: 1140px){
    .info-boxes{
        justify-content: flex-start
    }
    .info-box{margin-right: 4%; max-width: 280px;}
    .info-box:nth-of-type(4){
        margin-top: var(--spacing6)
    }
}
@media screen and (max-width: 1024px){
    .info-box:nth-of-type(3){
        margin-top: var(--spacing6)
    }
    .info-box{margin-right: 10%;max-width: 300px;}
    .info-box-icon p{
        font-size: 12px
    }
    .info-box-icon p span{
        font-size: 14px
    }
    .list li p{
        font-size: 14px;
        line-height: 1.6
    }

}
@media screen and (max-width: 800px){
    .info-box{margin-right: 0}
    .info-boxes{justify-content: space-between}
}
@media screen and (max-width: 640px){
    .info-box{max-width: 290px;}
    .info-boxes{justify-content: space-between}
}
@media screen and (max-width: 600px){
    .info-box{max-width: 260px;}
    .info-boxes{justify-content: space-between}
}
@media screen and (max-width: 560px){
    .info-boxes{
        flex-direction: column;
        justify-content: center;
        align-items: center
    }
    .info-box{margin-right: 0;max-width: 300px;margin-top: 0;margin-bottom: var(--spacing6);min-height: 340px}
    .info-box:last-of-type{margin-bottom: 0}
}
   #tour-faq{
       padding: var(--spacing6) 0 0 0;
   }
   .tour-faq-block{
       width: 100%;
       background-color: #fff;
       padding: var(--spacing4) 0 var(--spacing8) 0;
       margin: var(--spacing1) 0 0 0;
       position: relative;
       z-index: 0;
   }
   .faq-list{
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
   }
   .faq-list li{
       padding: var(--spacing2) 0;
       border-bottom: 1px solid #eee;
       padding-left: var(--spacing1)
   }
   .faq-q{
       width: 100%;
       display: flex;
       align-items: baseline;
       cursor: pointer;
   }
   .faq-list li p{
       font-size: 18px;
       color: var(--text-color-dark);
       margin-left: var(--spacing8)
   }
   .faq-list .faq-a p{
       font-size: 16px;
       color: var(--text-color-lighter);
       margin-left: calc(var(--spacing5) * 2);
       max-width: 600px;
       line-height: 1.8;
       margin-top: var(--spacing1)
   }
   .faq-a{display: none}
   .faq-q span{
       font-size: 36px
   }
   .open-close {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
  }
  .open-close path {
    fill: none;
    stroke: var(--highlight-color);
    stroke-linecap: square;
    stroke-width: 2;
    stroke-dasharray: 14 40;
    stroke-dashoffset: -15;
    transition: stroke-dashoffset 0.3s;
  }
  .faq-item.is-active svg {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .faq-item.is-active svg path {
    stroke-dashoffset: 0;
  }
   .fold-intro .section-title + p{
       font-size: 24px;
       color: var(--text-color-lighter);
       margin-bottom: 0
   }
@media screen and (max-width: 1366px){
    .fold-intro .section-title + p{
        font-size: 22px
    }
}
@media screen and (max-width: 800px){
    .faq-list li p{
        font-size: 17px
    }
    .faq-list .faq-a p{
        font-size: 15px;
        line-height: 1.6
    }
    .fold-intro .section-title{
        max-width: 500px;
    }
}
@media screen and (max-width: 640px){
    .faq-list li p{
        max-width: 440px;
    }
}
@media screen and (max-width:  480px){
    .fold-intro .section-title{
        max-width: 92%;
    }
}
   /* ==========================================================================
   CATEGORIES PAGE
   ========================================================================== */
   .categories .section-title{
       font-size: 38px;
       margin-bottom: var(--spacing6);  
   }
   .categories .section-title + p{
       font-size: 17px;
       color: var(--text-color-lighter);
       line-height: 1.5;
       padding-right: 10%;
       max-width: 540px;
   }
   .categories-hero-image{
       position: relative;
       transform: translateY(110px)
   }
   #categories-listing{
       padding: var(--section-spacing) 0;
       background-color: #f9f9f9;
       background-image: url(../images/topographic-tile-8.svg);
       background-repeat: repeat
   }
   .categories-item{
       width: 100%;
       margin: 0 auto var(--section-spacing-md);
       border-radius: 1px;
       display: flex;
       height: 340px;
       border-top-right-radius: 2px;
       border-bottom-right-radius: 2px;
   }
   #categories-listing .column:last-of-type .categories-item{
       margin: 0 auto var(--section-spacing-sm)
   }
   .categories-item-info{
       padding: var(--spacing2) var(--spacing4) var(--spacing1) var(--spacing5);
       display: flex;
       flex-direction: column;
       flex: 1;
       background-color: #fff;
   }
   .categories-item-image{
       max-width: 340px;
       min-width: 340px;
       position: relative;
       border-top-left-radius: 2px;
       border-bottom-left-radius: 2px
   }
   .categories-item-image::before{
       content: '';
       position: absolute;
       z-index: 10;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       display: block;
       background-image: linear-gradient(180deg, rgba(22, 26, 33, 0.50) 0%, rgba(255, 255, 255, 0) 
       100%);
       background-size: 100% 100%;
       display: none
   }
   .categories-item-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px
   }
   .categories-item-title{
       font-size: 28px;
       color: var(--text-color-dark);
       line-height: 1.3;
       font-weight: var(--font-medium);
       margin-bottom: var(--spacing3);
       max-width: 86%;
   }
 
   .categories-info-desc{
       font-size: 15px;
       color: var(--text-color-lighter);
       line-height: 1.5;
       max-width: 460px;
   }
   .categories-item .default-link{
    align-self: flex-start;
    margin-top: auto
   }
   .info-icons{
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       padding: var(--spacing2) 0 var(--spacing1) 0;
       border-left: 1px solid #eee;
       height: 100%;    
       background-color: #fff
   }
   .info-icon{
       display:flex;
       align-items: center;
       padding: 0 var(--spacing3)
   }
   .info-icon img{
     
   }
   .info-icon p{
    font-size: 12px;
    font-weight: var(--font-medium);
    text-transform: uppercase;
    color: var(--text-color-lighter);
    margin-left: var(--spacing2);
    line-height: 1.2;
   }
   .info-icon p span{
       font-size: 13px;
       color: var(--text-color-dark);
       text-transform: none;
       display: block
   }
   .categories-item .cta-button{
       margin-left: 0;
       margin-top: var(--spacing3);
       width:  86%;
       height: 46px;
       line-height: 46px;
       font-size: 13px;
       color: #fff;
       font-weight: var(--font-medium);
       margin-left: auto;
       margin-right: auto;
       border: 1px solid transparent
   }
   .categories-item .cta-button:hover{
       color: var(--accent-color);
       border-color: rgb(245, 245, 245)
   }
   @media screen and (max-width: 1024px){
       .categories-item{height: 280px}
       .categories-item-image{min-width: 280px;max-width: 280px;}
       .categories-item-info{
        padding: var(--spacing1) var(--spacing1) var(--spacing1) var(--spacing2)
       }
       .categories-item-title{font-size: 25px}
       .categories-info-desc{max-width: 86%;font-size: 15px}
       .info-icon{padding: 0 var(--spacing1);margin-bottom: var(--spacing1)}
       .info-icon:last-of-type{margin-bottom: 0}
       .info-icon img{}
       .info-icon p{font-size: 11px}
       .info-icon p span{font-size: 12px}
       .categories-item .cta-button{height: 40px;line-height: 40px}
       .categories .section-title{font-size: 34px}
   }
   @media screen and (max-width: 900px){
       .categories-info-desc{max-width: 96%;line-height: 1.5}
       .categories-item-image{min-width: 220px;max-width: 220px;}
   }
   @media screen and (max-width: 800px){
    .categories-item-image{min-width: 280px;max-width: 280px;border-bottom-left-radius: 0}
       .categories-item{
           flex-wrap: wrap;
           height: 360px;
       }
       .info-icons{width: 100%;flex-direction: row;height: 50px;align-items: center;padding: var(--spacing4) var(--spacing1) var(--spacing3) var(--spacing1);border-left: none;justify-content: space-between;}
       .info-icon{margin-bottom: 0;padding: 0}
       .info-icon p{margin-left: var(--spacing1)}
       .categories-item .cta-button{width: 140px;margin-top: 0;min-width: 100px;max-width: 140px;margin: 0}
   }
   @media screen and (max-width: 700px){
      .categories-item-image{min-width: 220px;max-width: 220px;}
      .categories-info-desc{font-size: 15px;line-height: 1.4}
      .categories-item-title{font-size: 28px}
   }
   @media screen and (max-width: 640px){
       .info-icon p{margin-left: 4px}
       .categories-item .cta-button{width: 120px;max-width: 120px;font-size: 13px}
   }
   @media screen and (max-width: 580px){
    .categories-item-image{min-width: 200px;max-width: 200px;}
       .categories-item .cta-button{width: 110px;max-width: 110px;font-size: 12px}
       .categories-item-title{font-size: 27px}
       .info-icons{padding-right: 4px;padding-left: 4px}
       .categories-item-info{padding-left: var(--spacing1)}
   }
   @media screen and (max-width: 480px){
       .categories-item{height: auto;flex-direction: column}
       .categories-item-image{min-width: 100%;max-width: 100%;height: 340px;}
       .categories-item-info{flex: 0;display: block}
       .categories-item-info .default-link{margin-top: var(--spacing4)}
       .info-icon{flex-direction: column}
       .info-icons p{margin-left: 0;text-align: center;font-size: 10px;margin-top: 6px}
       .info-icon p span{font-size: 11px}
   }
   @media screen and (max-width: 400px){
    .info-icons{height: 80px;}
    .categories-item .cta-button{transform: translate3d(0,-70px,0);min-width: 96;max-width: 96;position: absolute;right: 22px}
   }

   #all-tours{
       padding: var(--section-spacing) 0;
       background-color: #f9f9f9;
       background-image: url(../images/topographic-tile-8.svg);
       background-repeat: repeat;
   }
   .flex-square{
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
       justify-content: space-between;
       
   }
   .tour-square{
       flex: 0 0 340px;
   }
   .tour-square h3{
       font-size: 24px;
       font-weight: var(--font-medium);
       color: var(--text-color-dark);
       margin-top: var(--spacing2);
       line-height: 1.2;
       padding-left: 2px
   }
   .tour-square img{
       transition: all .3s ease-in;
   }
   .tour-square:hover img{
       filter: sepia(0.7)
   }
   @media screen and (max-width: 1200px){
       .flex-square{max-width: 94%;}
       .tour-square{
           flex-basis: 32%
       }
   }
   @media screen and (max-width: 900px){
       .tour-square h3{
           font-size: 21px;
           margin-top: var(--spacing1)
       }
   }
   @media screen and (max-width: 768px){
       .tour-square h3{
           font-size: 19px;
           line-height: 1.1
       }
   }
   @media screen and (max-width: 560px){
       .tour-square{flex-basis: 340px;margin-bottom: var(--spacing4)}
       .tour-square:last-of-type{margin-bottom: 0}
       .flex-square{flex-wrap: wrap;justify-content: center;align-items: center;}
       .tour-square h3{font-size: 20px;line-height: 1.2;max-width: 90%;}
   }
      /* ==========================================================================
   GUIDES PAGE
   ========================================================================== */
   .fold-intro.white{
       background-color: #FFFFFF
   }
   .column-text{
       width: 100%;
       margin: var(--spacing6) 0;
       display: flex
   }
   .column-text.flush-right{
       justify-content: flex-end;
   }
   .column-text p{
       font-size: 22px;
       color: var(--text-color-dark);
       line-height: 1.7;
       max-width: 540px;
   }
   .guides-bg{
       width: 100%;
       height: 900px;
       background-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.07) 100%), url(../images/guides-bg-md.jpg);
       background-size: cover;
       background-position: center center;
       display: flex;
       justify-content: flex-end;
       margin-top: calc(var(--spacing8) * 2)
   }
   @media screen and (min-width: 1600px){
       .guides-bg{
        height: 1020px;
        background-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.07) 100%), url(../images/guides-bg-lg.jpg);
       }
   }
   .guide-card.wide{
       max-width: 380px;
       width: 380px;
       height: auto;
       align-self: flex-start;
       margin-right: var(--spacing8);
       margin-top: -100px
   }
   .guide-card-body{
       max-width: 100%;
       margin: var(--spacing4) auto;
       padding: 0 var(--spacing1)
   }
   .guide-card-body p{
    font-size: 16px;
    color: var(--text-color-lighter);
    line-height: 1.6;
    text-align: left
   }
   .guide-card-body p span{
       font-weight: var(--font-medium);
       color: var(--text-color-dark)
   }
   .guide-card-body p:first-of-type{
       margin-bottom: var(--spacing3)
   }
   @media screen and (max-width: 1280px){
       .column-text p{font-size: 20px;line-height: 1.6;max-width: 500px;}
        .guide-card-body p{font-size: 15px}
        .guides-bg{height: 800px;}
   }
   @media screen and (max-width: 960px){
       .column-text p{font-size: 18px;max-width: 98%;}
       .guides-bg{justify-content: space-between;padding-left: 1rem;padding-right: 1rem}
       .guide-card.wide{margin-right: 0;max-width: 360px;}
   }
   @media screen and (max-width: 800px){
       .guide-card.wide{max-width: 320px;}
       .guide-card-body p{font-size: 14px}
       .column-text p{font-size: 17px}
   }
   @media screen and (max-width: 640px){
       .column-text p{font-size: 19px;max-width: 90%;margin-left: auto;margin-right: auto}
       .column-text{margin: var(--spacing3) 0}
       .guides-bg{flex-direction: column;justify-content: center;align-items: center;margin-top: 3rem;height: 1000px;}
       .guide-card.wide{max-width: 440px;align-self: unset;}
       .guide-card.wide:nth-of-type(2){margin-top: 3rem}
       .guide-card.wide:nth-of-type(2) .guide-profile-pic{background-color: #fff;mix-blend-mode: multiply}
       .guide-card-body p{font-size: 15px}
   }
   @media screen and (max-width: 480px){
       .column-text p{font-size: 18px}
       .guide-card.wide{margin-left: 0;max-width: 98%}
       .guide-card.wide:nth-of-type(2){margin-top: 0}
   }
   /* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
   .about-bg{
       width: 100%;
       height: 800px;
       position: relative;
       background-size: cover;
       background-attachment: fixed;
       display: flex;
       justify-content: center;
       align-items: center;
       background-blend-mode: multiply
   }
   @media screen and (max-width: 1440px){
       .about-bg{
       background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/about-bg-md.jpg)
       }
   }
   @media screen and (min-width: 1441px){
       .about-bg{
           height: 900px;
           background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/about-bg-lg.jpg)
        }
       }
   

   .intro-text{
     font-size: 22px;
     color: var(--text-color-dark);
     line-height: 2;
   }
   .about-info{
       padding: var(--spacing10) 0 0 0;
       background-image: url(../images/portugal_map_pin.svg);
       background-size: 18vw;
       background-position: 12% 84%;
       position: relative;
   }
  .about-info::before{
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 500px;
      background-color: #f9f9f9;
      z-index: -2;
  }
   .paragraph{
       font-size: 18px;
       line-height: 1.8;
       color: var(--text-color-dark)
   }
  .about-info .intro-text{
      max-width: 840px;
      margin-bottom: var(--spacing10)
  }
  .about-info .paragraph{
      padding-left: var(--spacing6);
      font-size: 17px;
      color: var(--text-color-lighter)
  }
  .about-image-pull{
      margin-top: -70px
  }
.introducing-lisbon{
    width: 100%;
    height: 500px;
    margin-top: var(--section-spacing);
}
.introducing-lisbon div{
 margin-left: 36.5vw;
 padding-top: var(--spacing10)
}
.introducing-lisbon p {
  font-size: 36px;
  color: var(--highlight-color);
  max-width: 800px;
  line-height: 1.6;
  margin: 0
}
.introducing-lisbon p span{color: var(--accent-color)}

@media screen and (max-width: 1140px){
    .overlay-title{
        font-size: 28px;
        max-width: 800px;
    }
    .about-info{
        background-size: 28vw;
        background-position: 6% 80%
    }
    .about-info .intro-text{
        font-size: 20px;
        line-height: 1.8;
        max-width: 740px;
    }
    .about-info .paragraph{
        font-size: 16px;
        padding-left: var(--spacing4)
    }
    .introducing-lisbon div{margin-left: 24vw}
    .introducing-lisbon p{
        font-size: 30px;
        max-width: 700px
    }
    .about-bg{height: 700px;background-position: center top}
}
@media screen and (max-width: 800px){
    .overlay-title{font-size: 26px;max-width: 90%;}
    .about-info .intro-text{font-size: 19px;line-height: 1.7;max-width: 100%;}
    .about-info .paragraph{padding-left: var(--spacing1)}
    .introducing-lisbon div{margin-left: 16vw}
    .introducing-lisbon p{
        font-size: 24px;
        padding-right: var(--spacing2)
    }
    .about-bg{height: 600px;}
}
@media screen and (max-width: 640px){
    .overlay-title{font-size: 24px;line-height: 1.7;max-width: 98%;}
    .about-info .intro-text{font-size: 18px;line-height: 1.8;max-width: 94%;}
    .about-info .paragraph{padding-left: 0;font-size: 15px}
    .about-info .paragraph:last-of-type{margin-top: var(--spacing2);max-width: 90%;}
}
@media screen and (max-width: 480px){
    .overlay-title{font-size: 21px;line-height: 1.6;max-width: 80%;}
    .introducing-lisbon div{margin-left: 8vw}
    .introducing-lisbon p{
        font-size: 23px;
        padding-right: var(--spacing1)
    }
    .about-info{background-size: 36vw;}
}
@media screen and (max-width: 400px){
    .overlay-title{font-size: 20px;max-width: 94%}
    .about-info .intro-text{font-size: 17px;line-height: 1.7;max-width: 98%;}
}

   /* ==========================================================================
   VIDEO LIBRARY
   ========================================================================== */
   #video-library{
       padding: var(--spacing10) 0;
   }
   .video-block{
       width: 100%;
       max-width: 1140px;
       display: flex;
       height: 460px;
       margin-bottom: var(--spacing8)
   }
   .video-block:last-of-type{
       margin-bottom: 0
   }
   .video-info{
       width: 100%;
       max-width: 340px;
       background-color: #161A21;
       display: flex;
       flex-direction: column;
       padding-left: var(--spacing3);
       justify-content: center;
   }
   .video-media{
       width: 100%;
       max-width: 800px;
       position: relative;
   }
   .video-title{
       font-size: 16px;
       letter-spacing: 2px;
       color: #FFFFFF;
       text-transform: uppercase;
       font-weight: var(--font-regular);
       line-height: 1.4;
       max-width: 250px;
       margin-bottom: var(--spacing5);
   }
   .play-video{
       cursor: pointer;
   }