/*!
Theme Name: Sirikoi
Theme URI: http://underscores.me/
Author: Focus Online
Author URI: https://www.focusonline.co.za
Description: Custom theme built upon underscores.me
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: _sirikoi
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

The Overhang is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* Global */


body {
  background-image: url(images/watermark-2.jpg);
	scroll-behavior: smooth;
}
:root {
  --primary: #F68E2D;
  --dark-orange: #C06107;
  --brown: #653200;
  --heading-font: "Cormorant Garamond", serif;
  --body-font: "Inter", sans-serif;
}

body {
  margin: 0;
  background-color: #e9e5e1;
}

body, div, p, a, li, span, h4, h5, h6 {
  font-family: var(--body-font);
  font-weight: 400;
  line-height: 1.2;
}
ol li, ul li {
	    font-size: 16px;
    font-weight: 400;
    font-weight: 300;
    color: #000;
    line-height: 1.8;
}
}
main {
  margin-top: -32px;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1.5rem 0;
}

h1, h2, h3 {
  font-family: var(--heading-font);
  font-weight: 400;
  line-height: 1.2;
}

a {
  text-decoration: none;
}

p {
  font-size: 16px;
  font-weight: 400;
  font-weight: 300;
  color: #000;
  line-height: 1.8;
}
p strong {
  font-weight: 600 !important;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.center {
  text-align: center;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

p.sub {
  font-size: 15px;
  color: var(--dark-orange);
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.button {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 8px 20px;
  padding: 10px 22px;
  border-radius: 20px;
  letter-spacing: 1px;
  display: inline-block;
  transition: 0.2s all;
  color: #fff;
  font-family: var(--heading-font);
  background-color: var(--primary);
}

.button.dark {
  background-color: var(--brown);
}

.button.outline {
  background-color: transparent;
  color: var(--primary);
  border: solid 1px var(--primary);
}

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  max-width: 1440px;
}

.space-break {
  display: block;
  height: 1px;
}

small {
  font-size: 70%;
}

.overlay {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  background-color: #000;
  position: absolute;
}

/* Slick */

.slick-dots li button {
  text-indent: -9999px;
  background: var(--dark-orange);
  height: 12px;
  width: 12px;
  margin: 0 5px;
  border-radius: 10px;
  border: none !important;
  opacity: 0.6;
}

.slick-dots li {
  display: inline-block;
}

.slick-dots {
  text-align: center;
  padding: 0;
  margin: 26px auto 30px;
}

.slick-dots li.slick-active button {
  opacity: 1;
}

/* Header */

header {
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  padding: 5px 30px;
  z-index: 9;
  box-sizing: border-box;
}

.logged-in header {
  top: 32px;
  top: 0;
}

header .flex {
  align-items: center;
  justify-content: space-between;
}

header .flex .logo {
  width: 200px;
  text-align: center;
}

.home header .flex .logo img {
  width: 120px;
}

header .flex .logo a {
  display: inline-block;
}

header .flex .logo img {
  display: block;
}

header .flex ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

header .flex ul li {
  display: inline-block;
  margin-right: 15px;
}

header nav, header .nav-button, .nav-scroll nav, .nav-scroll .nav-button {
  width: 100%;
  max-width: calc(50% - 100px);
}

header .flex ul li {
  display: inline-block;
}

header li a {
  text-transform: uppercase;
  font-family: var(--heading-font);
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

header .burger-menu, .nav-scroll .burger-menu {
  display: inline-block;
  padding: 5px;
}

header .nav-button, .nav-scroll .nav-button.flex {
  justify-content: right;
  gap: 1.5rem;
}

header .burger-menu div, .nav-scroll .burger-menu div {
  display: block;
  height: 2px;
  background-color: #fff;
  width: 28px;
}

.burger-menu .second {
  margin: 7px 0;
}

/* Nav Scroll */

.nav-scroll {
  position: fixed;
  top: -80px;
  top: -140px;
  left: 0;
  z-index: 999;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
  background-color: #e9e5e1;
  transition: top .3s;
}

.nav-scroll .flex {
  justify-content: space-between;
  align-items: center;
}

.nav-scroll .flex ul {
  margin: 0 0 0 10px;
  padding: 0;
  list-style: none;
}

.nav-scroll .flex li {
  display: inline-block;
}

.nav-scroll .flex li a {
  font-size: 20px;
  color: var(--brown);
  padding: 5px;
  margin-right: 7px;
font-family: var(--heading-font);
text-transform: uppercase;
    font-weight: 600;
}

.nav-scroll .burger-menu div {
  background-color: var(--brown);
}

/* Overlay */

.overlay-menu {
  position: fixed;
  left: 0;
  top: -100px;
  width: 100vw;
  z-index: 99999;
  height: 0;
  opacity: 0;
  overflow: scroll;
  transition: 0.5s ease;
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: var(--dark-orange);
}

.overlay-menu.open {
  top: 0;
  opacity: 1;
  height: 100vh;
}

.overlay-menu .close-overlay {
  position: absolute;
  right: 30px;
  top: 30px;
  font-size: 26px;
  color: #fff;
  padding: 8px;
}

.overlay-menu .close-overlay i {
  font-weight: 300;
}

.overlay-menu .overlay-content {
  display: flex;
  justify-content: space-between;
  color: #fff;
  max-width: 1300px;
  margin: auto;
  width: 100%;
}

.overlay-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-transform: uppercase;
}

.overlay-menu li a {
  line-height: 1.5;
  margin-bottom: 7px;
  display: block;
  max-width: max-content;
  color: #fff;
  letter-spacing: 1px;
  opacity: 0.8;
  transition: 0.1s ease;
}

.overlay-menu li a:hover {
  opacity: 1;
}

.overlay-menu .overlay-left li a {
  font-weight: 600;
  font-size: 42px;
  font-family: var(--heading-font);
}

.overlay-menu .overlay-right li a {
  font-size: 18px;
}

.overlay-menu .overlay-left, .overlay-menu .overlay-right {
  width: 100%;
  max-width: 45%;
}

.overlay-menu .bottom {
  margin-top: 30px;
}

.overlay-menu .bottom .button {
  background-color: #fff;
  color: var(--dark-orange);
}

.overlay-menu .bottom .button.outline {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}

.overlay-menu .bottom .socials a {
  margin-right: 10px;
  display: inline-block;
  margin-top: 15px;
}

.overlay-menu .bottom i {
  color: #fff;
  font-size: 20px;
}

/* Footer */

footer .container {
  padding: 80px 20px 20px;
}

footer .flex {
  justify-content: space-between;
}

footer .col {
  width: 100%;
  max-width: 18%;
  margin-bottom: 40px;
}

footer .col.logo {
  position: relative;
  bottom: 30px;
  text-align: center;
}

footer .col h3 {
  font-size: 20px;
  color: var(--dark-orange);
  margin: 0 0 30px 0;
  font-weight: 700;
  letter-spacing: 1px;
}

footer .col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

footer .col ul li {
  margin-bottom: 5px;
}

footer .col ul a {
  padding: 4px 0;
  display: inline-block;
  color: var(--brown);
}

footer .col .socials a {
  font-size: 20px;
  display: inline-block;
  margin-right: 7px;
  margin-top: 10px;
  color: var(--primary);
}

footer .copy {
  padding: 25px;
  width: 100%;
  box-sizing: border-box;
}

footer .copy p, footer .copy a {
  margin: 0;
  font-size: 15px;
  color: var(--brown);
}

/* Banner / Hero */

.banner-content {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 0;
  z-index: 9;
  box-sizing: border-box;
  max-width: 1000px;
  padding: 50px 20px;
}

.banner-content.bottom {
  justify-content: flex-end;
  padding-bottom: 80px;
}

.banner-content.center {
  padding-top: 90px;
}

.banner {
  text-align: center;
  width: 100%;
  height: 90vh;
  background-color: #333;
  z-index: 2;
  overflow: hidden;
  margin-top: 80px;
	/* testing transition */

    width: 100%;
    /* height: 100vh; */
    background-image: url('your-banner-image.jpg');
    background-size: cover;
    background-position: center;
    transition: height 1s ease; /* Smooth transition over 1 second */
}

/*
.banner.short {
  height: 450px;
}
*/
.banner.short .banner-content {
  justify-content: flex-end;
  padding-bottom: 40px;
}

.banner.short .banner-content h1 {
  font-size: 80px;
}

.banner-content h1 {
  font-size: 80px;
  color: #f4f2f1;
  letter-spacing: 5px;
  line-height: 1;
	text-transform:uppercase;
  margin-bottom: auto;
}

.banner-content p {
  color: #fff;
  font-size: 18px;
  margin: 10px 0 20px;
}

.banner-overlay {
  background: rgba(0,0,0,0.3);
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.banner .slick-prev {
  left: 20px;
}

.banner .slick-next {
  right: 20px;
}

.top-fade {
    height: 200px;
    top: 0;
    width: 100%;
    position: absolute;
    left: 0;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    z-index: 2;
}


/* Slick */

.slick-list, .slick-track, .slick-slider {
		height: 100%;
	}

.slick-arrow {
  position: absolute;
  z-index: 99;
  top: calc( 50% - 14px);
  width: 28px;
  height: 28px;
  border: none !important;
  text-indent: -9999px;
  cursor: pointer;
  opacity: 0.8;
  transition: 0.1s ease;
  background-size: contain !important;
  background-position: center !important;
}

.slick-arrow:hover {
  opacity: 1;
}

.slick-prev {
  left: 0;
  background: url("/wp-content/themes/_sirikoi/images/arrow-left.svg") no-repeat;
}

.slick-next {
  right: 0;
  background: url("/wp-content/themes/_sirikoi/images/arrow-right.svg") no-repeat;
}

/* Heading */

.heading .container {
  width: 100%;
  max-width: 900px;
  margin: 20px auto;
}

.heading p:not(.sub) {
  font-size: 14px;
  font-size: 16px;
  color: #000;
  font-weight: 300;
  margin: 0;
}

.heading h1, .heading h2, .heading h3 {
  text-transform: uppercase;
  color: var(--brown);
  letter-spacing: 1px;
  margin: 0 0 40px 0;
  line-height: 1;
}

h1 {
  font-size: 70px;
}

h2 {
  font-size: 60px;
}

h3 {
  font-size: 45px;
}

h4 {
    font-size: 24px;
    color: var(--dark-orange);
    font-weight: 300 !important;
    letter-spacing: 2px;
    margin: 35px 0 10px;
}

h5 {
  font-size: 25px;
}

h6 {
  font-size: 18px;
}

/* Text Block */

.textblock.narrow {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.textblock.full {
  padding: 0 20px;
  box-sizing: border-box;
}

.textblock a {
  color: var(--dark-orange);
  font-weight: 500;
}

/* Content Carousel */

.content-carousel {
  padding-bottom: 60px;
}

.content-carousel .card {
  margin: 0 10px;
}

.content-carousel .card::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #000;
  opacity: 0.2;
  z-index: 1;
}

.content-carousel .card img {
  width: 100%;
  display: block;
  height: 550px;
  object-fit: cover;
}

.content-carousel .card .content {
  z-index: 2;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 50px 35px;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: baseline;
  justify-content: end;
}

.content-carousel .card .content h3 {
  color: #fff;
  font-size: 45px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: auto;
}

.content-carousel .card .content p {
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  margin: 0 0 15px 0;
}

.content-carousel .slick-arrow {
  top: unset;
  bottom: 50%;
  filter: brightness(0) invert();
}

.content-carousel .slick-prev {
  left: 25px;
}

.content-carousel .slick-next {
  right: 25px;
}

/* Block Columns */

.block-columns .flex {
  align-items: center;
  justify-content: space-between;
  max-width: 90%;
	margin: 0 auto;
}

.block-columns .narrow {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 20px;
}
.block-columns .container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 20px;
}

.block-columns .narrow .card {
  width: 49%;
}

.block-columns .card {
  width: 49.5%;
  margin-bottom: 30px;
}

.block-columns.three .card {
  width: 32.6%;
}

.block-columns.four .card {
  width: 24%;
}

.block-columns .card::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #000;
  opacity: 0.2;
  z-index: 1;
}

.block-columns .card img {
  width: 100%;
  display: block;
  height: 600px;
  object-fit: cover;
  transition: 0.4s ease all;
}

.block-columns .narrow .card img {
  height: 380px;
}

.block-columns .narrow .card .content {
  bottom: 0;
  padding: 30px;
}

.block-columns.three .card.active img {
  height: 680px;
}


/* customised code for 3 blocks with text underneath with NO hover effects, and spacing removed  - see /destination/ */
.block-columns.three.nohover .card.active img {
  height: 380px;
}

.block-columns.three.nohover .flex {
    align-items: flex-start !important;
}
.block-columns.three.nohover .card .content {
  padding: 15px;
  padding-top: 0;
  padding-bottom: 0;
}
.block-columns.three.nohover .card .content p {
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
}
.block-columns.three.nohover .card {
  margin-bottom: 0;
}


.block-columns .card .content {
  z-index: 2;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 60px 35px;
  box-sizing: border-box;
  transition: 0.4s ease all;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: baseline;
  justify-content: end;
}
.block-columns .container .card .content {
  padding: 35px;
}

.block-columns .card .content h3 {
  color: #fff;
  font-size: 42px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: auto;
}

.block-columns .narrow .card .content h3 {
  font-size: 38px;
}

.block-columns .card .content p {
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  margin: 0 0 15px 0;
}

.block-columns.text-after .card .content * {
color: #222;
}
.block-columns.text-after .card .content h3 {
  color: var(--brown);
margin-bottom: 20px;
}

.block-columns.text-after .card::after {
  display: none;
}




/* 404 */

.error-404 {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background-size: cover;
  background-position: center;
}

.error-404 h1 {
  font-size: 150px;
  letter-spacing: 5px;
  color: #fff;
  font-weight: 600;
  margin: 0;
}

.error-404 p {
  font-size: 22px;
  color: #fff;
  font-weight: 300;
}

.error-404 .content {
  padding: 20px;
}

  .space10 { clear: both; display: block; width: 100%; height: 10px; }
  .space15 { clear: both; display: block; width: 100%; height: 15px; }
  .space20 { clear: both; display: block; width: 100%; height: 20px; }
  .space25 { clear: both; display: block; width: 100%; height: 25px; }
  .space30 { clear: both; display: block; width: 100%; height: 30px; }
  .space35 { clear: both; display: block; width: 100%; height: 35px; }
  .space40 { clear: both; display: block; width: 100%; height: 40px; }
  .space45 { clear: both; display: block; width: 100%; height: 45px; }
  .space50 { clear: both; display: block; width: 100%; height: 50px; }
  .space55 { clear: both; display: block; width: 100%; height: 55px; }
  .space60 { clear: both; display: block; width: 100%; height: 60px; }
  .space65 { clear: both; display: block; width: 100%; height: 65px; }
  .space70 { clear: both; display: block; width: 100%; height: 70px; }
  .space75 { clear: both; display: block; width: 100%; height: 75px; }
  .space80 { clear: both; display: block; width: 100%; height: 80px; }
  .space85 { clear: both; display: block; width: 100%; height: 85px; }
  .space90 { clear: both; display: block; width: 100%; height: 90px; }
  .space95 { clear: both; display: block; width: 100%; height: 95px; }
.space100 { clear: both; display: block; width: 100%; height: 100px; }

/* Intro */

.intro {
  padding: 20px 0;
  position: relative;
  z-index: 9;
}

.intro.border {
  margin-bottom: 60px;
}

.intro .flex {
  align-items: center;
}

.intro .intro-heading {
  width: 100%;
  max-width: 40%;
  padding: 40px 40px 40px 0;
  box-sizing: border-box;
}

.intro.border .intro-heading {
  max-width: 37%;
  margin-right: 3%;
  padding: 50px 40px;
  position: relative;
}

.intro.border .intro-heading::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border: solid 4px var(--dark-orange);
}

.intro .intro-text {
  width: 100%;
  max-width: 60%;
  padding-left: 30px;
  box-sizing: border-box;
}

.intro .intro-text.center {
  max-width: 920px;
  padding-left: 0;
  margin: 30px auto 0;
}

.intro.border .intro-text {
  margin-top: 30px;
}

.intro h2 {
  font-size: 70px;
  color: var(--brown);
  margin: 0;
  line-height: 1;
}

.intro h2 span {
  font-family: var(--heading-font);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  font-size: 80px;
}

.intro p {
  color: var(--brown);
    opacity: 0.6;
    font-size: 23px;
    line-height: 1.6;
    font-weight: 400;
}

.intro .button {
  margin-top: 15px;
}

/* Intro */

.intro-with-image {
  padding: 60px 0;
  position: relative;
  z-index: 9;
}

.intro-with-image .flex {
  align-items: center;
}

.intro-with-image .intro-image {
  max-width: 30%;
  margin-right: 5%;
  position: relative;
  /*bottom: 85px;*/
}

.intro-with-image .intro-image img {
  width: 100%;
  aspect-ratio: 1/1;
  display: block;
  object-fit: cover;
}

.intro-with-image .intro-image::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: -25px;
  top: -25px;
  border: solid 4px var(--dark-orange);
}

.intro-with-image .intro-text {
  width: 100%;
  max-width: 65%;
  box-sizing: border-box;
}

.intro-with-image h2 {
  font-size: 70px;
  color: var(--brown);
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
}

.intro-with-image h2 span {
  font-family: var(--heading-font);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  font-size: 80px;
  line-height: 1;
}

.intro-with-image p {
  color: var(--brown);
  max-width: 75%;
  margin-top: 50px;
  font-weight: 300;
}

.intro-with-image .button {
  margin-top: 15px;
}

/* Image Text */

.image-text {
  padding: 40px 0;
}

.image-text .container.full {
  max-width: 100%;
  padding: 0;
}

.image-text.vertical img {
  width: 100%;
  display: block;
  object-fit: cover;
  height: 550px;
}

.image-text.vertical .image {
  width: 100%;
  height: auto;
}

.image-text.vertical .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-text.vertical .card {
  max-width: 49%;
  text-align: center;
}

.image-text .card {
  width: 100%;
  margin-bottom: 40px;
}

.image-text.vertical .content {
  padding: 20px 40px;
}

.image-text.vertical .content {
  padding: 30px 50px;
}

.image-text .content p.sub {
  font-size: 15px;
  color: var(--dark-orange);
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.image-text .content p:not(.sub) {
  line-height: 1.8;
  font-weight: 300;
}

.image-text .content h3 {
  font-size: 48px;
  letter-spacing: 1px;
  color: var(--brown);
  text-transform: uppercase;
  margin: 0 0 20px 0;
	line-height: 1;
}

.image-text .content .button {
  margin-top: 15px;
}

.image-text.horizontal .flex {
  align-items: center;
}

.image-text.horizontal .image {
  width: 100%;
  max-width: 55%;
  position: relative;
}

.image-text.horizontal .image img {
  width: 100%;
  display: block;
  object-fit: cover;
  height: 620px;
}

.image-text .image video {
  width: 100%;
  display: block;
  object-fit: cover;
}

.image-text.verticle .image video {
  height: 550px;
}

.image-text.horizontal .image video {
  height: 600px;
}

.image-text.horizontal .content {
  width: 100%;
  max-width: 45%;
  padding: 40px 80px;
  box-sizing: border-box;
}

.image-text.horizontal .container.full .content {
  max-width: 45%;
}

.image-text.horizontal.left .container.full .content, .image-text.horizontal.right .container.full .card:nth-child(2n) .content {
  margin-right: 0%;
  margin-left: 0;
}

.image-text.horizontal.right .container.full .content, .image-text.horizontal.left .container.full .card:nth-child(2n) .content {
  margin-left: 0%;
  margin-right: 0;
}

.image-text.horizontal.left .content, .image-text.horizontal.right .card:nth-child(2n) .content {
  text-align: left;
}

.image-text.horizontal.right .content, .image-text.horizontal.left .card:nth-child(2n) .content {
  text-align: right;
}

.image-text.horizontal.left .card:nth-child(2n) {
  flex-direction: row-reverse;
}

.image-text.horizontal.right .card:nth-child(2n-1) {
  flex-direction: row-reverse;
}

.image-text p a {
  color: var(--dark-orange);
  font-weight: 500;
}

/* Experiences List */

.experiences-list .container {
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: nowrap;
  justify-content: center;
  text-align: center;
}

.experiences-list a {
  font-size: 18px;
  color: #999;
  font-weight: bold;
  font-family: var(--heading-font);
  text-transform: uppercase;
}

.experiences-list .active a {
  color: var(--dark-orange);
}

.experiences-list .item {
  flex: 1;
  padding: 15px 25px;
  border-right: solid 2px #D9D9D9;
}

.experiences-list .item:first-child {
  padding-left: 0;
}

.experiences-list .item:last-child {
  padding-right: 0;
  border: none;
}



/* CTA */

.cta {
  background-position: center;
  background-size: cover;
  height: 80vh;
}

.cta.small {
  height: 50vh;
}

.cta.medium {
  height: 80vh;
}

.cta.large {
  height: 100vh;
}

.cta .cta-inner {
  text-align: center;
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: end;
  padding: 60px 20px;
  box-sizing: border-box;
}

.cta .cta-content {
  width: 100%;
  max-width: 1000px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

.cta h3 {
  font-size: 65px;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: auto;
  line-height: 1;
}

.cta p {
  font-size: 18px;
  color: #fff;
  margin: 10px 0 20px;
}

/* Reviews */

.reviews {
  padding: 90px 0;
  background-color: #d8ae86;
}

.reviews .container {
  position: relative;
}

.reviews h2 {
  font-size: 50px;
  color: var(--brown);
  margin: 0 0 50px;
}

.review-slider {
  max-width: 900px;
  margin: 0 auto;
  position: unset;
}

.review-slider .review img {
  margin: 0 auto;
}

.review-slider p {
  font-weight: 300;
  color: #000;
  font-style: italic;
}

.review-slider h3 {
  font-weight: 600;
  color: #000;
  font-size: 16px;
  margin: 25px 0 0;
  font-family: var(--body-font);
}

/* Images */

.images.narrow {
  max-width: 900px;
  margin: 0 auto;
}

/* Icon List */

.icons {
  padding: 20px 0;
}

.icons .narrow {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.icons.dark {
  padding: 100px 0 120px;
  /* background-color: var(--dark-orange); */
  background: url(images/bg-orange.jpg);
}

.icons h2 {
  margin: 0 0 50px;
  font-size: 50px;
  color: var(--brown);;
}

.icons.dark h2 {
  color: #fff;
}

.icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.icon-list li {
  width: 100%;
  max-width: 12%;
  padding: 15px;
  box-sizing: border-box;
	font-size: 15px;
    line-height: 1.5;
}

.icons .narrow li {
  max-width: 16%;
}

.icon-list li img {
  width: 80px;
  height: 80px;
	width: 56px;
    height: 56px;
  margin: 0 auto 25px;
  object-fit: contain;
  display: block;
 filter:brightness(0) saturate(100%) invert(33%) sepia(73%) saturate(2066%) hue-rotate(20deg) brightness(53%) contrast(94%);
}

.icons .narrow li img {
    width: 56px;
    height: 56px;
  margin-bottom: 20px;
}

.icon-list li i {
  font-size: 80px;
  color: var(--brown);
  margin: 0 auto 25px;
  display: block;
}

.icons .narrow li i {
  font-size: 65px;
  margin-bottom: 20px;
}

.icon-list li p {
  display: block;
  color: var(--brown);
  font-weight: 300;
  line-height: 1.3;
  margin: 0;
}

.icons.dark li i, .icons.dark li p {
  color: #f4f2f0;
}

/* Gallery */

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery a {
  display: block;
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  max-width: 33%;
}

.gallery img {
  width: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 5/4;
}

.slick-lightbox .slick-arrow {
  filter: brightness(0) invert();
}

.slick-lightbox-close::before {
  font-size: 40px;
}

.slick-lightbox-close {
  top: 10px;
  right: 10px;
  height: 40px;
  width: 40px;
}

/* Single Image */

.single-image {
  padding: 30px 0;
}

.single-image img {
  width: 100%;
  display: block;
  margin: 0 auto;
}

.single-image .narrow {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.single-image.white  {
  background-color: #fff;
}

.single-image h2  {
  text-transform: uppercase;
  color: var(--brown);
  letter-spacing: 1px;
  margin: 0 0 40px 0;
  line-height: 1;
}
@media(max-width:1000px) {
  .single-image {
    height: auto !important;
  }
  .image-object-fit {
  object-fit: none; height: auto;
  }
  }
.image-object-fit {
object-fit: cover; height: inherit;
}
.height-100 {
  height: 100%;
}



/* Contact */

.contact.flex {
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 0;
  align-items: center;
  justify-content: space-between;
}

.contact.flex h2 {
  text-transform: uppercase;
  color: var(--brown);
  letter-spacing: 1px;
  margin: 0 0 40px 0;
}

.contact.flex .form, .contact.flex .details {
  width: 100%;
  max-width: 40%;
}

.contact.flex .details p, .contact.flex .details a {
  color: var(--brown);
  font-weight: 300;
  margin: 0;
  font-size: 16px;
  line-height: 2;
}

.contact.flex .details a {
  text-decoration: underline;
}

.contact.flex .details h4 {
  font-weight: 300;
  margin: 40px 0 5px;
  color: var(--brown);
  font-size: 16px;
}

.contact form input:not(.button), .contact form textarea, .contact form select {
  border: none;
  padding: 11px !important;
  outline: none !important;
  font-family: var(--body-font);
  background-color: #ffffff87;
  font-size: 14px !important;
}

.contact form input.button {
  border: none;
  padding: 8px 40px;
  cursor: pointer;
  margin-bottom: 0 !important;
}

/* Awards */

.awards {
  padding: 90px 0;
  background-color: #f4f2f0;
}

.awards h2 {
  font-size: 50px;
  color: var(--brown);
  margin: 0;
}

.awards .flex {
  gap: 3rem;
  justify-content: center;
  align-items: center;
  margin: 60px 0 50px;
}

.awards .flex img {
  display: block;
  width: 140px;
  height: 140px;
  object-fit: contain;
  object-position: center;
  filter: brightness(0) saturate(100%) invert(62%) sepia(65%) saturate(997%) hue-rotate(347deg) brightness(94%) contrast(88%);
}

.awards a.link {
  color: var(--brown);
  font-family: var(--heading-font);
  text-transform: uppercase;
  font-weight: 500;
}

/* Blog */

.blog-banner img {
  height: 100vh;
  width: 100%;
  display: block;
  object-fit: cover;
}

.blog-banner::after, .single-post-hero::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #000;
  opacity: 0.2;
  z-index: 1;
}

.blog-banner .content {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 0;
  z-index: 2;
  box-sizing: border-box;
  max-width: 1000px;
  padding: 20px;
}

.blog-banner h1 {
  font-size: 80px;
  color: #f4f2f1;
  letter-spacing: 5px;
  margin: 0;
  line-height: 1;
}

.blog-banner p {
  color: #fff;
  font-size: 18px;
  margin: 10px 0 20px;
}

.blog-wrapper .flex {
  gap: 2%;
  margin: 60px 0;
}

.blog-wrapper article {
  width: 100%;
  max-width: 32%;
  margin-bottom: 40px;
}

.blog-wrapper article .content {
  padding: 20px 15px;
}

.blog-wrapper article img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
}

.blog-wrapper article .content .meta {
  margin: 0;
  font-size: 14px;
  color: #777;
}

.blog-wrapper article .content h3 {
  font-size: 36px;
  margin: 0 0 20px 0;
}

.single-post-hero {
  margin-bottom: 60px;
}

.single-post-hero img {
  width: 100%;
  height: 500px;
  display: block;
  object-fit: cover;
}

.single-post-hero h1 {
  left: 0;
  right: 0;
  width: 100%;
  bottom: 60px;
  color: #f4f2f1;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 2;
  line-height: 1;
}

.single-post-wrapper h2 {
  font-size: 52px;
}

.single-post-wrapper h3 {
  font-size: 42px;
}

.single-post-wrapper h4 {
  font-size: 30px;
}

.post-navigation {
  margin: 80px auto 60px;
}

.post-navigation a {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 20px;
  letter-spacing: 1px;
  display: inline-block;
  transition: 0.2s all;
  color: #fff;
  font-family: var(--heading-font);
  background-color: var(--primary);
}

.post-navigation .nav-next {
  margin-left: auto;
}

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

  header nav {
    display: none;
  }

  header .flex .logo img {
    width: 85px;
  }

  header .flex .logo {
    max-width: max-content;
  }

  header {
    padding: 20px;
  }

  header .nav-button {
    max-width: max-content;
  }

}

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

  .content-carousel .slick-arrow {
    bottom: 0;
    filter: unset;
  }

  .content-carousel .slick-next {
    right: calc(50% - 50px);
  }

  .content-carousel .slick-prev {
    left: calc(50% - 50px);
  }

  .banner-content.bottom {
    justify-content: flex-end;
    padding-bottom: 60px;
  }

  .banner {
    margin-top: 70px;
  }

  .contact.flex .form, .contact.flex .details {
    max-width: 100%;
  }

  .contact.flex .details {
    margin-bottom: 60px;
  }

  .contact.flex .details {
    margin-bottom: 60px;
  }

  .contact-map iframe {
    height: 300px;
  }

  .blog-wrapper article {
    max-width: 100%;
  }

  header .nav-button .button {
    display: none;
  }

  .banner-content h1, .blog-banner h1, .banner.short .banner-content h1 {
    font-size: 45px;
    letter-spacing: 3px;
  }

  .banner-content p, .blog-banner p {
    line-height: 1.5;
    font-size: 16px;
  }

  .blog-wrapper article img {
    height: 300px;
  }

  .nav-scroll .button, .nav-scroll nav {
    display: none;
  }

  footer .container {
    padding: 50px 20px 20px;
  }

  footer .copy {
    padding: 20px;
  }

  footer .copy .flex {
    justify-content: center;
    text-align: center;
  }

  footer .col.logo {
    bottom: 0;
  }

  footer .col {
    max-width: 100%;
  }

  footer .col.logo {
    order: 1;
  }

  footer .col:first-child {
    order: 2;
  }

  footer .col:nth-child(2) {
    order: 3;
  }

  footer .col:nth-child(4) {
    order: 4;
  }

  footer .col:nth-child(5) {
    order: 5;
  }

  footer .col h3 {
    margin: 0 0 20px 0;
  }

  footer .col.logo a {
    bottom: 0;
    text-align: center;
    display: block;
  }

  .cta h3 {
    font-size: 45px;
  }

  .cta p {
    font-size: 16px;
  }

  .cta .cta-inner {
    padding-bottom: 60px;
  }

  p {
    line-height: 1.6;
  }

  .reviews, .awards, .icons {
    padding: 70px 0;
    padding: 50px 0;
  }

  .reviews h2, .awards h2, .icons h2 {
    font-size: 38px;
    margin: 0 0 40px;
  }

  .reviews .slick-next {
    right: 5px;
  }

  .reviews .slick-prev {
    left: 5px;
  }

  .awards .flex {
    gap: 2rem;
    margin: 50px 0;
  }

  .awards .flex img {
    width: 80px;
    height: 80px;
  }

  .icon-list li, .icons .narrow li {
    max-width: 50%;
    padding: 15px;
    margin-bottom: 10px;
  }

  .icon-list li img, .icons .narrow li img {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
  }

  .icon-list li i, .icon .narrow li i {
    font-size: 50px;
  }

  .icon-list li p {
    font-size: 14px;
  }

  h1 {
    font-size: 50px;
  }

  h2 {
    font-size: 42px;
  }

  h3 {
    font-size: 30px;
  }

  h4 {
    font-size: 26px;
  }

  h5 {
    font-size: 22px;
  }

  h6 {
    font-size: 16px;
  }

  .image-text.vertical .card {
    max-width: 100%;
  }

  .image-text.vertical img {
    height: 300px;
  }

  .image-text .content h3 {
    font-size: 36px;
  }

  .image-text.vertical .content {
    padding: 25px 20px;
  }

  .image-text .content p:not(.sub) {
    line-height: 1.6;
  }

  .image-text {
    padding: 20px 0;
  }

  .content-carousel .card .content, .block-columns .card .content {
    padding: 35px 25px;
  }

  .content-carousel .card .content h3, .block-columns .card .content h3 {
    font-size: 34px;
  }

  .content-carousel .card .content p, .block-columns .card .content p {
    font-size: 16px;
    margin: 5px 0 15px 0;
  }

  .content-carousel .card img {
    height: 400px;
  }

  .block-columns .flex {
    max-width: 100%;
  }

  .block-columns .card {
    width: 100% !important;
  }

  .block-columns .card .content {
    bottom: 0 !important;
  }

  .block-columns .card img {
    height: 400px !important;
  }

  .intro.border .intro-heading, .intro .intro-heading {
    max-width: 100%;
    margin-right: 0;
  }

  .intro.border .intro-heading {
    padding: 30px;
  }

  .intro h2, .intro-with-image h2 {
    font-size: 40px;
    color: var(--brown);
    margin: 0;
    line-height: 1;
  }

  .intro.border .intro-heading::after {
    height: 130%;
    top: -20%;
  }

  .intro h2 span, .intro-with-image h2 span {
    font-size: 50px;
  }

  .intro.border {
    padding-top: 0;
    margin-bottom: 20px;
  }

  .intro.border .intro-text, .intro .intro-text {
    max-width: 100%;
    padding-left: 0;
    margin-top: 50px;
  }

  .intro-with-image .intro-image, .intro-with-image .intro-text {
    max-width: 100%;
  }

  .intro-with-image .intro-image {
    max-width: 85%;
    bottom: 0px;
    margin: 10px auto 40px;
    left: 10px;
  }

  .intro-with-image p {
    max-width: 100%;
    margin-top: 40px;
  }

  .image-text .content, .image-text .image {
    max-width: 100% !important;
  }

  .image-text .content {
    padding: 20px !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
	.image-text .content ul li {
line-height: 1.6 !important;
    font-weight: 300 !important;
}

  .image-text .image img, .image-text .image video {
    height: 350px !important;
  }

  .image-text .slick-dots {
    margin-bottom: 0;
  }

  .image-text .slick-list {
    height: auto;
  }

  .gallery a {
    padding: 7px;
    max-width: 50%;
  }

  .gallery {
    justify-content: center;
  }

  .experiences-list .container {
    overflow: scroll;
    justify-content: unset;
    max-width: 95%;
  }

  .experiences-list a {
    font-size: 14px;
    display: block;
    width: 120px;
  }

  .overlay-menu {
    padding: 80px 25px 40px;
  }

  .overlay-menu .overlay-content {
    flex-wrap: wrap;
  }

  .overlay-menu .overlay-left, .overlay-menu .overlay-right {
    max-width: 100%;
  }

  .overlay-menu .overlay-left {
    margin-bottom: 25px;
  }

  .overlay-menu .close-overlay {
    right: 15px;
    top: 15px;
  }

  .overlay-menu .overlay-left li a {
    font-size: 28px;
    line-height: 1.2;
  }

}

/* overrides for single images - accommodation layouts */

/* sirikoi house */
.page-id-322 .single-image img {
  max-width: 1200px;
  }

  /* sirikoi cottage */
  .page-id-324 .single-image img {
  max-width: 1200px;
  }

  /* sirikoi tents */
  .page-id-326 .single-image img {
  max-width: 1500px;
  }





  /* gravity form overrides
  .gform_body input, .gform_body select, .gform_body textarea {
    border: none !important;
    }

    .page-id-147 {

    }

    .gform_wrapper {
      max-width: 600px;
      margin: 0 auto;
    }

    .gfield_label {
      text-transform: uppercase;
      font-size: 13px;
      font-weight: normal;
    }*/



/* gravity forms overrides */

.page-id-147 .textblock.narrow {
max-width: 700px;
}

.gform_wrapper.gravity-theme input[type=color], .gform_wrapper.gravity-theme input[type=date], .gform_wrapper.gravity-theme input[type=datetime-local], .gform_wrapper.gravity-theme input[type=datetime], .gform_wrapper.gravity-theme input[type=email], .gform_wrapper.gravity-theme input[type=month], .gform_wrapper.gravity-theme input[type=number], .gform_wrapper.gravity-theme input[type=password], .gform_wrapper.gravity-theme input[type=search], .gform_wrapper.gravity-theme input[type=tel], .gform_wrapper.gravity-theme input[type=text], .gform_wrapper.gravity-theme input[type=time], .gform_wrapper.gravity-theme input[type=url], .gform_wrapper.gravity-theme input[type=week], .gform_wrapper.gravity-theme select, .gform_wrapper.gravity-theme textarea {
    font-size: 15px;
    margin-bottom: 0;
    margin-top: 0;
    padding: 8px;
    border: none;
}
.gform_wrapper.gravity-theme .gfield_label {
    display: inline-block;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-bottom: 8px;
    padding: 0;
    text-transform: uppercase !important;
}
.gform_wrapper.gravity-theme .gform_footer input {
border: none !important;
}
.gform_wrapper.gravity-theme .ginput_container_date input {
    width: calc(100% - 49px);
width: 100% !important;
}
.gform_wrapper.gravity-theme .ginput_container_date img.ui-datepicker-trigger {
    margin-left: -29px !important;
}

.gform_wrapper.gravity-theme .gfield textarea.medium {
    font-family: 'Inter', Arial, sans-serif;
}

select.gfield_select {
  background-color: #fff;
}


/* admin bar css  */


.admin-bar .site-container {
  padding-top: 32px !important;
}

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

  .admin-bar .site-container {
    padding-top: 46px;
  }

}

#wpadminbar {
  top: 50% !important;
  width: 40px !important;
  min-width: auto !important;
  }
  #wp-admin-bar-root-default li {
  display: none !important;
  }

  #wp-admin-bar-root-default li#wp-admin-bar-edit {
  display: block !important;
  }

  #wp-admin-bar-root-default li#wp-admin-bar-edit a {
  color: transparent !important;
      width: 21px !important;
      padding-left: 13px !important;
  }
  #wp-admin-bar-top-secondary {
    display: none !important;
  }


.textblock blockquote p {
	font-family: var(--heading-font);
    font-size: 30px;
    line-height: 1.2;
    color: var(--brown);
}
.textblock h3 {
	color: var(--brown);
}



/* lity overrides */

.lity {
    background: rgba(0, 0, 0, 0.7) !Important;
}

/* Lightbox Modal */

.lightbox-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #0009;
  left: 0;
  top: 0;
  z-index: 999;
  display: none;
}

.lightbox-modal .container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  max-width: unset;
}

.lightbox-modal .close-lightbox {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.lightbox-modal iframe {
  position: relative;
  background-color: #000;
  z-index: 2;
  aspect-ratio: 5/3;
  height: unset;
  width: 100%;
  max-width: 800px;
}

.close-lightbox-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 20px;
  color: #fff;
  display: block;
  z-index: 3;
}




  /* ------------------------------------------------------------
  # Accordion
  ---------------------------------------------------------------*/


/* Accordion */

.accordion {
  width: 90%;
  max-width: 900px;
  margin: 40px auto;
  border-bottom: solid 1px var(--primary);
}

.accordion .question {
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  cursor: pointer;
  font-size: 17px;
  padding: 15px;
  letter-spacing: 1px;
  border-top: solid 1px var(--primary);
}

.accordion .question span {
  font-size: 24px;
  margin-right: 5px;
  padding-left: 10px;
  width: 20px;
  text-align: right;
}

.accordion .accordion-content:first-child .answer {
  display: block;
}

.accordion .answer {
  display: none;
  /*background-color: #fff;*/
  padding: 5px 20px;
}

.accordion .answer ul {
  margin: 1.5em;
  padding: 0;
}
.accordion .answer a {
	color: #C06107 !important;
}
.accordion .answer a:hover {
	color: #F68E2D !important;
}
.accordion .answer ul li {
	font-size: 16px;
    font-weight: 400;
    font-weight: 300;
    color: #000;
    line-height: 1.8;
}


html {
  scroll-behavior: smooth;
}


/* adjust styling for  affliations based on awards element */
#affiliations .flex img {
    display: block;
    width: 140px;
    height: 95px;
    object-fit: contain;
    object-position: center;
}




a.signup {
color: #fff;
	font-family: var(--heading-font);
    background: var(--dark-orange);
	text-transform:uppercase;
    padding: 10px 14px;
    margin-top: 20px;
    position: absolute;
    border-radius: 26px;
}
a.signup:hover {
color: #fff;
    background: var(--primary);
}
#mc_embed_signup {
	    width: 100% !important;
    background: transparent !important;
}
#mc_embed_signup .button  {
	font-family: var(--heading-font) !important;
    background: var(--dark-orange) !important;
    position: absolute !important;
    border-radius: 26px !important;
}

/* Search */

.search-wrapper .search-form {
  display: none;
  position: absolute;
  bottom: -40px;
  right: 30px;
}

.search-wrapper .search-form.show {
  display: block;
}

.search-wrapper i {
  color: var(--primary);
  font-size: 18px;
}

.search-wrapper .search-submit {
  padding: 5px 10px;
  border-radius: 50px;
  border: solid 1px var(--primary);
  background-color: var(--primary);
  color: #fff;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
}

.search-wrapper .search-field {
  padding: 5px 7px;
  border-radius: 0;
  border: solid 1px #aaa;
  outline: none !important;
}

/* Search Results */

.search-hero {
  text-align: center;
  padding: 130px 20px 20px;
}

.search-hero h1 {
  font-size: 40px;
}

.no-results {
  width: 100%;
  text-align: center;
}

.no-results h3 {
  font-size: 32px;
}

.search-results .container {
  max-width: 1200px;
  justify-content: space-between;
  gap: 2%;
}

.search-results .container .result {
  width: 100%;
  max-width: 32%;
  margin-bottom: 40px;
  padding: 35px 20px;
  box-sizing: border-box;
  text-align: center;
  border: solid 1px #aaa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.search-results .container .result h3 {
  color: var(--primary);
  font-size: 30px;
  font-weight: 600;
}

.search-results .container .result .button {
  font-size: 14px;
}

.search-results .navigation {
  width: 100%;
  margin: 30px 0;
}

.search-results .navigation .nav-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.search-results .navigation .nav-next {
  margin-left: auto;
}

.search-results .navigation a {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  display: inline-block;
  transition: 0.2s all;
  color: #fff;
  font-family: var(--heading-font);
  background-color: var(--primary);
}

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

  .search-results .container {
    gap: 0;
  }

  .search-results .container .result {
    max-width: 100%;
    margin-bottom: 10px;
    padding: 20px 15px;
  }

  .search-results .container .result h3 {
    font-size: 28px;
    margin-bottom: 20px;
  }

}






/*  image comparison */


        .image-comparison {
            position: relative;
            width: 100%;
            max-width: 1015px;
            margin: 0 auto;
            /*height: 610px;*/
            overflow: hidden;
            cursor: col-resize;
            user-select: none;
			aspect-ratio: 1.66 / 1;
        }

        .image-comparison img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
        }

        .before-image {
            z-index: 2;
			clip-path: inset(0 50% 0 0);
        }

        .after-image {
            z-index: 1;
        }

        .slider {
            position: absolute;
            top: 0;
            left: 50%;
            width: 5px;
            height: 100%;
            background: var(--dark-orange);
            z-index: 3;
            cursor: col-resize;
        }

        .slider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background: var(--primary);
            border-radius: 50%;
            /*border: 3px solid #333;*/
			animation: gentlePulse 2s ease-in-out infinite;
        }

        .slider::after {
            content: '⟷';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 18px;
            color: #fff;
            font-weight: bold;
            z-index: 2;
			
			animation: gentlePulse 2s ease-in-out infinite;
        }
@keyframes gentlePulse {
            0%, 100% { 
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            }
            50% { 
                transform: translate(-50%, -50%) scale(1.2);
                opacity: 0.85;
            }
        }

        .image-comparison:hover .slider::before,
.image-comparison:hover .slider::after{
            animation: none;
        }

.image-comparison-caption {
	font-style: italic; font-size: 13px; margin: 3px auto; width: 100%; max-width: 1015px;
}