*, *:before, *:after {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	-ms-box-sizing: border-box !important;
	box-sizing: border-box !important;
}
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
html:not(.material-symbols-outlined){
	font-family:"Roboto Condensed", sans-serif;
}
a{
	text-decoration: none !important;
}
li,ul{
	list-style-type: none !important;
}
p{
	font-size: 1.15em;
}
body{
  position: relative;
  background: #1a1b1f;
  overflow-x: hidden;
}
@media(max-width:600px){
	body{
		background-attachment: local;
	}
}
body{
	font-size: 16px;
}
@media(max-width:600px){
	body{
    font-size: 14px;
	}
}
@media(max-width:800px){
	body{
    font-size: 12px;
	}
}
@media(max-width:400px){
	body{
    font-size: 10px;
	}
}
main{
	width: 98%;
	position: relative;
	padding: 0;
	margin: 0;
	margin: 0 auto;
	text-align: center;
	max-width: 120em;
	background: #f5deb3;
}
@media(max-width: 750px){
  main{
    width: 100%;
  }
}
h2,
h3,
h4,
h5{
	font-family: "Jaro";
}
/*==================*/
.phone-btn {
  transition: .3s;
  cursor: pointer;
  border: 0;
  background: none;
  text-transform: capitalize;
  text-align: center;
  font-size: 1.2em;
  line-height: .75em;
  color: #ffffff;
  display: inline-block;
  vertical-align: middle;
}
.phone-btn:hover{
	color: gold;
}
#phone-btn span.material-symbols-outlined {
  font-weight: bold;
  display: inline-block;
  color: #333
}

.phone-btn.active {
  position: fixed;
  color: white;
  z-index: 999;
  top: 1em;
	right: 1em;
}

#phone-btn.phone-btn.active span.material-symbols-outlined {
  color: white
}

#phone-btn span.material-symbols-outlined {
  font-weight: bold;
  font-size: 1.5em;
  display: inline-block;
  color: #ffffff;
}

#phone-btn span.material-symbols-outlined.close {
  display: none
}

#phone-btn span.material-symbols-outlined {
  display: inline-block;
  vertical-align: middle;
}

.phone-btn:after {
  content: "Call Now!";
  display: inline-block;
  text-align: center;
  margin: 0 auto
}

.phone-btn.active:after {
  content: "close"
}

#phone-btn.active span.material-symbols-outlined.close {
  display: block
}

#phone-btn.active span.material-symbols-outlined {
  display: none
}

#phone-menu ul {
  padding: 1em
}

#phone-menu ul li {
  list-style-type: none
}

#phone-menu ul li p {
  color: white;
  font-size: 1.25em;
  text-transform: capitalize
}

a.phone {
  color: #fed702;
  padding-top: 0.75em;
  display: inline-block;
  font-size: 1.5em;
  font-weight: bold
}

.menu-btn {
  position: absolute;
  right: 0em;
  top: 0.75em;
  width: 2.75em;
  height: 2em;
  transition: .3s;
  cursor: pointer;
  z-index: 997;
  background-color: transparent;
  border: 0;
  font-size: 1.2em;
  display: none;
}

.menu-btn.active {
  position: fixed;
  top: 1.5em;
  right: 1.5em;
  z-index: 999
}

.menu-btn hr {
  display: block;
  width: 100%;
  height: 0px;
  transition: .3s;
  position: absolute;
  border: 2px solid #ffffff;
  background-color: #ffffff;
}

.menu-btn.active hr {
  border: 2px solid white;
  background-color: white
}

.menu-btn-hr-1 {
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(0deg)
}

.menu-btn-hr-2 {
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%)
}

.menu-btn-hr-3 {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(0deg)
}

.menu-btn.active .menu-btn-hr-1 {
  top: 50%;
  transform: translate(-50%,-50%) rotate(-45deg)
}

.menu-btn.active .menu-btn-hr-2 {
  opacity: 0
}

.menu-btn.active .menu-btn-hr-3 {
  top: 50%;
  transform: translate(-50%,-50%) rotate(45deg)
}

header#header {
  width: 98%;
  display: table;
  margin: 0 auto;
  background: url("../images/ferns.jpg");
  background-size: contain;
  border-bottom: 0.24em solid #fffefe;
  max-width: 120em;
  position: relative;
}
header#header #header-content {
  position: relative;
  vertical-align: middle;
  padding: 2em;
  width: 100%;
  text-align: right;
}

menu#phone-menu {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  height: 20em;
  background-color: rgb(22 10 43 / 84%);
  overflow: hidden;
  text-align: center;
  z-index: 998;
  transform: translateX(-100%);
  padding: 4em;
  max-height: 15em;
  transition: .3s
}
menu#phone-menu.active {
  transform: translateX(0)
}

#header-center img {
  height: 6em
}


#logo{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 997;
}
#logo img {
    width: 18em;
}
menu#main-nav {
    border-left: 0.15em solid white;
    text-align: left;
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    display: inline-block;
    vertical-align: middle;
    margin-left: 2em;
}

menu#main-nav ul {
    width: 100%;
}

menu#main-nav li {display: inline-block;padding-right: 1em;}

menu#main-nav a {
    color: white;
    text-transform: capitalize;
    font-size: 1.1em;
}
menu#main-nav a:hover{
	color: gold;
}

@media(max-width:750px){
main,header#header{
	width: 100%;
}
header#header{
	background-color: #1a1b1f;
	padding: 1em;
}
.menu-btn{
	display: block;
}
.phone-btn{
	right: 5em;
	position: absolute;
	top: 0.75em;
	font-size: 1.5em;
}
menu#main-nav {
  width: 100%;
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  background-color: #333333ed;
  overflow: hidden;
  text-align: center;
  z-index: 998;
  padding: 3em;
  transform: translateX(100%);
  transition: .3s;
  transform-origin: right
}

menu#main-nav.active {
  transform: translateX(0)
}
#main-nav ul {
  padding: 1em
}

menu#main-nav li {
  padding: .5em;
  list-style-type: none;
	display: block;
}
#main-nav ul li a {
  color: white;
  font-size: 1.5em;
  text-transform: capitalize;
  line-height: 2em;
}
}

@media(max-width: 650px) {
  #logo{
      height:auto;
      width: 8em;
  }
  menu#phone-menu,menu#main-nav {
      padding: 3em 1em;
      text-align: center
  }
}
@media(max-width: 500px) {
	header#header{
		font-size: 0.9em;
	}
}
@media(max-width: 450px) {
  #header-center img {
      margin-top:.75em
  }
  header#header{
	font-size: 0.8em;
  }
}
/*====================================*/


/*=====================*/
.footer {
  width: 100%;
  padding: 4em 0em 2em 0em;
  font-size: 1em;
  background-size: cover;
  text-align: center;
  border-top: 0.5em solid #1a1b1f;
  background-size: cover;
  background-position: top center;
  background: #333333;
}
#logo-footer img {
  width: 10em;
}
#logo-footer b{
  font-size: 2.25em;
  font-weight: lighter;
  line-height: 1em;
  text-transform: capitalize;
}
.social {
 text-align:center;
 display: inline-block;
 vertical-align: text-bottom;
 width: 25%;
}
.social p {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 2em;
  text-transform: capitalize;
  color: white;
  padding: 0em 2em;
}
.social ul{
  display: table;
  width: 8em;
  margin: 0 auto;
}
.social ul li{
  display: table-cell;
  width: 25%;
  padding: 0.25em;
}
.social ul li a{
  width: 100%;
  display: block;
  background-color: white;
  border-radius: 2em;
  padding: 0.25em;
}
.social ul li img {
  width: 100%;
  display: block;
  opacity: 00.8;
}
.footer-section{
  width: 100%;
  padding: 1em;
}
.footer section ul{
  display: inline-block;
  vertical-align: top;
  width: 50%;
  margin-left: -5px;
  text-align: center;
  padding-top: 4em;
}
.footer section ul li{
  width: 100%;
  list-style-type: none;
  line-height: 2em;
}
.footer section ul li b{
  font-size: 1.3em;
  color: white;
  text-transform: capitalize;
}
.footer section ul li a{
  display: inline-block;
  color: white !important;
  padding: 0.25em;
  text-transform: capitalize;
}
a#logo-footer {
    display: inline-block;
    vertical-align: top;
    width: 25%;
}

a.footer-logo.alt {
    width: 25%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

@media(max-width:700px){
	a#logo-footer,
  .social,
  .logo-footer.alt {
    display: block;
    width: 100%;
    margin-bottom: 5em;
  }
  .footer section ul{
    padding: 2em;
  }
  .footer section ul li a{
    font-size: 1.2em;
  }
}
/*============== shared ==============*/
.anchor-main {
    background: beige;
    font-family: 'Jaro';
    text-transform: capitalize;
    color: #22491d;
    font-size: 1.75em;
    padding: 0.25em 1em;
    display: inline-block;
	transition: 0.3s;
}
.anchor-main:hover{
	background: gold;
}

.anchor-gold{
    font-family: "Jaro";
   font-weight: lighter;
  color: #333;
  background-color: gold;
  border: 0.15em solid;
  padding: 0.5em 2em;
  display: inline-block;
  text-transform: capitalize;
  font-size: 1.25em;
  margin-top: 1em;
}


#why-book-with {
    width: 100%;
    margin: 0 auto;
    display: block;
    position: relative;
    padding-bottom: 3em;
    border-top: 1em solid #dad7cd;
    background: #fea500;
}

@media (max-width: 650px) {
    #why-book-with {
        width:100%
    }
}

#why-book-with h2 {
    color: #fff;
    font-size: 3em;
    width: 100%;
    text-align: center;
    padding: 5em 0em 2em 0em;
    background: url(../images/kauai-backcountry-footer.jpg);
    background-size: cover;
    text-transform: capitalize;
    text-shadow: 0em 0em .5em rgb(0 0 0 / 88%);
    background-position: center;
    font-family: "Jaro"
}

#why-book-with h3 {
    text-transform: capitalize;
    font-size: 2em;
    margin-bottom: 2em;
    width: 100%;
    text-align: center;
    color: #692600
}

#why-book-with h3 br {
    display: none
}

#why-book-with ul {
    display: table;
    width: 100%;
    margin: 0 auto;
    max-width: 60em
}

#why-book-with ul li {
    display: table-cell;
    width: 33.3%;
    text-align: center;
    vertical-align: middle;
    padding: 1em
}

.booking-details {
    width: 100%;
    border-radius: 2em;
    position: relative;
    text-align: center;
    padding: 2em 2em 2em 1em;
    background-size: 55em;
    background-position: center;
    background-color: wheat;
}

.booking-details img {
    position: absolute;
    height: 100%
}

.booking-details p {
    color: #333;
    line-height: 1.5em;
    font-size: 1.25em
}

.booking-img-container {
    background: #728b4d;
    border: .25em solid white;
    height: 6em;
    width: 6em;
    position: absolute;
    overflow: hidden;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    top: -4em;
}

.booking-img-container:after {
    content: "";
    position: relative
}

.booking-details h4 {
    text-align: center;
    font-size: 1.33em;
    text-transform: capitalize;
    margin-bottom: 1em;
    line-height: 1em;
    margin-top: 1em;
    font-family: "jaro";
    color: #22491d;
}

#book-with-cta {
    background: #f7b801;
    width: 92%;
    display: block;
    max-width: 11.35em;
    margin: 0 auto;
    margin-top: 0;
    padding: .5em;
    font-size: 1.5em;
    border-radius: 1em;
    margin-top: 1em;
    color: #9a031e;
    text-transform: capitalize
}

@media(max-width: 900px) {
    #why-book-with ul {
        display:block
    }

    #why-book-with ul li {
        display: block;
        width: 100%;
        margin-top: 2em
    }

    .booking-details {
        max-width: 25em;
        margin: 2em auto
    }
}

/*============= product index ================*/



#activity-reading {
    width: 100%;
    padding: 2em;
    text-align: center;
    position: relative;
    max-width: 1000px;
    margin: 0 auto
}

#activity-reading.hidden {
    height: 18em;
    overflow: hidden
}

#activity-reading.expand {
    height: auto
}

.activity-article {
    text-align: left;
    height: 0;
    overflow: hidden;
    padding: 0;
    display: inline-block;
    vertical-align: top;
    line-height: 2em
}

.activity-article h2 {
    font-size: 1.5em;
    text-transform: capitalize;
    margin-bottom: 1em;
    color: #b91382;
    text-align: center
}

.activity-article.active {
    height: auto;
    padding: 1em
}

.activity-article p {
    line-height: 1.75em;
    margin-bottom: 1.5em
}

.activity-article a {
    font-size: 1.15em;
    text-transform: capitalize;
    background: #b40d7a;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    margin-bottom: 1em;
    color: gold;
    border-radius: 1em;
    padding: .25em .5em
}

.article-buttons button {
    display: inline-block;
    background-color: gainsboro;
    border: 0;
    border-radius: 2em;
    padding: .25em 1em;
    font-size: 1em
}

.article-buttons span {
    display: inline-block;
    vertical-align: middle
}

#expand {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0
}

#expand-more {
    width: 100%;
    background: #fff;
    background: #fff;
    background: linear-gradient(180deg,rgb(255 255 255 / .25) 0%,rgb(255 255 255 / .75) 33%,rgb(255 255 255) 100%);
    border: 0;
    cursor: pointer;
    padding: 5em 0 1em 0
}

#expand-less {
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer
}

#expand-more .material-symbols-outlined,#expand-less .material-symbols-outlined {
    font-size: 2em
}

#expand-more span,#expand-less span {
    display: inline-block;
    vertical-align: middle;
    text-transform: capitalize;
    font-size: 1.5em;
    font-weight: 700;
    color: #00438b
}




.activity-container {
    padding: 1em;
    border-top: .2em solid #00a00e;
    margin-top: 1em;
    font-size: .9em;
    background-color: whitesmoke
}

.activity {
    display: block;
    width: 100%;
    padding: 2em;
    margin-bottom: 1em;
    max-width: 60em;
    overflow: auto;
    margin: 1em auto;
    position: relative;
    background: #fff;
    border-top: 1em double #728b4d;
}

.activity-title,.activity-description {
    text-align: left;
    width: 50%;
    padding-left: 1em;
    position: relative;
    float: right
}

.activity-title .title {
    text-transform: capitalize;
    color: #032442;
    font-weight: 400;
    line-height: 1em;
    margin-bottom: 1em;
    margin-top: 0;
    text-align: left
}

.title a {
    color: #00438b
}

.sub-title {
    text-transform: capitalize;
    line-height: 1em;
    color: #333;
    font-size: 1.25em
}

.duration {
    white-space: normal;
    display: block;
    margin-top: .5em;
    padding-right: .5em
}

.duration b,.duration span {
    color: #333;
    display: inline-block;
    vertical-align: bottom;
    white-space: normal;
    word-wrap: normal
}

.ribbon {
    background: #b4007a;
    position: absolute;
    left: -5.75em;
    top: 2em;
    z-index: 2;
    width: 20em;
    text-align: center;
    transform: rotate(-45deg);
    border-bottom: .25em solid #74004f
}

.ribbon-content {
    margin: 0 auto
}

.ribbon-content p {
    color: #fff;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1em;
    padding: .25em 0;
    text-transform: capitalize
}

.ribbon-content span {
    font-size: .65em
}

.activity-image {
    width: 50%;
    overflow: hidden;
    position: relative;
    height: 18em;
    max-width: 25em;
    float: left
}

.activity-image img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    transform: translate(-50%,-50%)
}

.activity-description {
    padding-top: 1em
}

.activity-description p {
    line-height: 1.75em;
    font-size: 1em
}

.activity-footer {
    display: table;
    margin-top: 1em;
    width: 100%;
    padding-top: 1em
}

.activity-left {
    text-align: left
}

.activity-right {
    text-align: right
}

.activity-footer li {
    display: table-cell;
    vertical-align: middle;
    font-size: 1.1em
}

.activity-anchor {
    background: #ffc700;
    display: inline-block;
    border-radius: 2em;
    padding: .5em .5em .5em 1em;
    text-align: center
}

.activity-anchor p {
    text-transform: capitalize;
    font-weight: 700;
    color: #930064;
    display: inline-block;
    vertical-align: middle
}

.sale-price,.list-price {
    font-weight: 700
}

p.sale-price {
    color: #125112;
    font-size: 1.25em
}

.list-price::before {
    content: "Was ";
    font-size: .75em
}

.sale-price::before {
    content: "From ";
    font-size: .75em
}

.list-price.strike {
    opacity: .5
}

.list-price.strike:after {
    content: "";
    position: absolute;
    left: 0;
    top: 1.65em;
    width: 70%;
    border-top: 2px solid;
    text-decoration: line-through;
    left: 50%;
    transform: translateX(-50%)
}

.activity-anchor .material-symbols-outlined {
    color: gold;
    background: #930064;
    border-radius: 1em;
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
    margin-left: .5em;
    padding: .05em 0 .05em .1em
}

.GreenLrg {
    font-size: 1.2em
}

@media (max-width: 900px) {
    .activity-title,.activity-description {
        width:45%
    }

    .duration {
    }
}

@media (max-width: 750px) {
    .activity {
        max-width:40em;
        margin: 1em auto
    }

    .activity-title,.activity-description,.activity-footer,.activity-image {
        float: none;
        width: 100%;
        max-width: 100%
    }

    .activity-description {
        font-size: 1.1em
    }

    .ribbon {
        position: absolute;
        left: 2.5em;
        top: 18em;
        width: 8em;
        border-radius: 50%;
        transform: rotate(0deg);
        border-bottom: .25em solid #74004f
    }

    .ribbon-content p {
        padding: 1.33em 0;
        line-height: 1em
    }

    .activity-image {
        margin-top: 1em;
        margin-bottom: 1em
    }

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

    .sub-title {
        padding-bottom: .5em
    }

    .sale-price,.list-price {
        font-size: 1.5em
    }
}


/*============== product detail ==============*/

#activity-header {
  width: 100%;
  overflow: hidden;
  text-align: center;
  position: relative;
  height: 25em;
}
#activity-header img {
  position: absolute;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
@media(max-width:550px){
	  #activity-header {
		  height: 10em;
	  }
  #activity-header img{
    height: 100%;
    width: auto;
  }
}
#activity-header.activity-header-wide img {
  height: 100%;
  width: auto;
}
#product-content {
  text-align: left;
  display: table;
  width: 100%;
  transform: scaleX(-1);
  padding-top: 2em;
  padding-bottom: 2em;
  background: wheat;
}
@media(max-width:500px){
	#product-content {
			background-size: 15em,15em,auto;
	}
}
#player-wrapper {
  display: table-cell;
  width: 45%;
  vertical-align: middle;
  text-align: center;
  padding: 1em;
  transform: scaleX(-1);
}
#product-main {
  display: table-cell;
  vertical-align: top;
  width: 55%;
  padding-top: 1em;
  transform: scaleX(-1);
}
#player-wrapper iframe {
  width: 95%;
  height: 20em;
  max-width: 30em;
}

#video-alt-wrapper {
    position: relative;
    display: table-cell;
    width: 45%;
    overflow: hidden;
    border: 2em solid transparent;
    text-align: center;
    transform: scaleX(-1);
}

#img-alt {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#video-alt-wrapper section {
  max-width: 10em;
  overflow: hidden;
  display: block;
  position: relative;
  height: 6em;
  margin: 0 auto;
  font-size: 4em;
  width: 100%;
  background-image: url("../images/hawaii-discount-image-default.jpg");
  background-size: contain;
  background-repeat: no-repeat;
}

h1#product-header {
  text-transform: capitalize;
  FONT-WEIGHT: 200;
  font-size: 2.5em;
  margin-top: 0.25em;
  line-height: 1em;
  font-family: "Jaro";
  color: #21491D;
}
#product-subtitle {
  text-transform: capitalize;
  color: #333;
  font-size: 1.5em;
  margin-bottom: 0.75em;
  margin-top: 0.5em;
}
#product-features {
  display: block;
  width: 100%;
  margin-bottom: 2em;
  margin-top: 2em;
  max-width: 40em;
}
#product-features li {
  display: inline-block;
  vertical-align: middle;
  margin: 0.25em;
  background: #61875d;
  padding: 0.25em;
  border-radius: 1em;
}
#product-features .material-symbols-outlined {
  color: #ffd700;
  font-weight: bold;
  font-size: 1.5em;
}
#product-features span {
  color: #ffd700;
  font-size: 1.15em;
  display: inline-block;
  vertical-align: middle;
  text-transform: capitalize;
}

.product-duration {
  color: #333;
  margin: 1em auto;
}
.product-duration span {
  display: inline-block;
  vertical-align: middle;
}

#product-prices {
  display: inline-table;
  width: 50%;
  margin-top: 1em;
  vertical-align: middle;
}
#product-prices li {
  display: table-cell;
  text-align: left;
  padding-right: 1em;
  width: 50%;
}
#before-price {
  font-size: 1.25em;
  text-transform: capitalize;
  color: #333;
  opacity: 0.5;
}
#before-price span {
  font-size: 1.5em;
  text-decoration: line-through;
  font-weight: bold;
  display: block;
}
#after-price {
  font-size: 1.25em;
  text-transform: capitalize;
  color: #333;
}
#after-price span {
  font-size: 1.5em;
  font-weight: bold;
  display: block;
}
#product-buttons {
  display: inline-block;
  vertical-align: middle;
  margin-top: 1em;
}
#product-button {
}
#product-button  p{
	display: inline-block;
	vertical-align: middle;
	color: #780116;
	text-transform: capitalize;
	font-size: 1.25em;
	font-weight: bold;
	padding-left: 0.5em;
	line-height: 1em;
}
 #product-button .material-symbols-outlined{
  color: #780716;
  border-radius: 5em;
  font-size: 2em;
  margin-left: 0.25em;
  display: inline-block;
  vertical-align: middle;
}
a#gallery-button {
    background: white;
    padding: 0.5em 0.5em;
    border-radius: 3em;
    color: #333;
    display: inline-block;
    margin-top: 1em;
    border: 0.15em solid grey;
    margin: 0 auto;
}
a#gallery-button .material-symbols-outlined{
    vertical-align: middle;
}
#seating {
  display: block;
  border-radius: 5em;
  font-size: 1.1em;
  border: 0.15em solid #032541;
  color: #042342;
  text-align: center;
  padding: 0.5em 0em;
  max-width: 10em;
  margin: 1em auto;
  padding: 0.5em 1.5em;
}
#book-now-alt {
  position: fixed;
  bottom: 0.5em;
  left: 0.5em;
  z-index: 988;
  background: #dfbc00;
  border: 0;
  font-size: 1.25em;
  text-transform: capitalize;
  color: #1d1d1d;
  padding: 0.75em;
  font-weight: bold;
  cursor: pointer;
}
#book-now-alt.hidden {
  display: none;
}
#book-now-alt.visible {
  display: none;
}
#book-now-alt span {
  display: inline-block;
  vertical-align: text-top;
}
.activity-details {
    padding: 3em 0em;
    margin: 0 auto;
    display: block;
    background-size: 10em;
    background-size: 100%;
    background-position: top center;
    background: #718b4c;
}
#activity-article {
    margin: 0 auto;
    padding: 4em;
    background-color: wheat;
    width: 95%;
    max-width: 60em;
    border-radius: 2em;
    text-align: left;
}
#activity-article p{
	line-height: 2em;
	text-align: left;
}
strong {
    margin: 0 auto;
    text-align: center;
    display: block;
}
.bulletpoint-row {
  column-count: 2;
  padding: 2em;
  column-fill: balance;
}
#img-alt{
	max-width: 28em;
}
p#price-attributes {
    max-width: 40em;
}
@media(max-width:800px){
  .bulletpoint-row{
    column-count: 1;
    text-align: center;
    list-style-position: inside;
  }
}
.bulletpoint-header {
  margin: 1em auto;
  color: #790052;
}
.bulletpointstyles li {
  line-height: 1.25em;
  list-style-type: disc;
  margin-bottom: 0.5em;
  text-align: left;
  color: #333;
}
.activity-article h3 {
	color: #145586;
}
.activity-article p {
  margin-bottom: 1em;
  line-height: 1.5em;
  color: #333;
  font-size: 0.9em;
}
.activity-article ul {
  max-width: 30em;
  margin: 1em auto;
  line-height: 1em;
	text-align: left;
}
.activity-article ul li {
  color: #333;
  list-style-type: disc !important;
	text-align: left;
}
#activity-article ul {
    line-height: 2em;
}
#activity-aside {
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: bottom;
  overflow: hidden;
  padding: 2em 0em;
  background-size: 100%;
  background-position: top center;
  background: #728c4d;
}
#activity-aside article{
 max-width: 900px;
 margin: 0 auto;
 width: 90%;
 background-color: #f5deb3;
 padding: 3em;
 border-radius: 2em;
}
#activity-aside article h3{
  width: 100%;
  text-align: center;
  text-transform: capitalize;
  font-size: 2em;
  color: orangered;
}
#activity-aside article ul {
  margin-top:2em;
}
#activity-aside article dl {
  display:table;
  width:100%;
  margin-bottom:1em;
  font-size: 1.15em;
}
#activity-aside article dd {
  display:table-cell;
  width:20%;
  color:#032442;
  vertical-align:top;
  font-weight: bold;
}
#activity-aside article dt {
  display:table-cell;
  width:60%;
  line-height: 1.5em;
  vertical-align:top;
  text-align:left;
}
#activity-aside article p b {
  display:block;
  width:auto;
  color:#333;
}
@media(max-width:600px) {
  #activity-aside article dl,
  #activity-aside article dd,
  #activity-aside article dt {
    display:block;
    width:100%;
    padding:.5em
  }
}
@media (max-width: 900px) {
  #book-now-alt {
    left: 0;
    bottom: 0;
    width: 100%;
  }

  #player-wrapper {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 1em;
  }
  #product-main {
    display: block;
    width: 100%;
    padding: 0em 1em;
    text-align: center;
    font-size: 1.15em;
  }
  #product-features {
    margin: 1em auto;
  }
  #product-prices {
    display: table;
    width: 100%;
    text-align: center;
  }
  #product-prices li {
    text-align: center;
    padding: 1em;
  }
  #product-buttons {
    display: block;
    width: 100%;
    text-align: center;
  }
}

#activity-gallery {
  width: 100%;
  text-align: center;
}
#activity-gallery{
  background-size: 42em;
  background-position: center;
  font-size: 1em;
  text-align: center;
  padding: 2em;
  background: url("../images/kauau-zipline-tour-background.jpg");
  background-size: cover;
  background-position: center;
  border-top: 1em solid white;
  border-bottom: 1em solid white;
}
@media(max-width:500px){
	#activity-gallery{
			background-size: 15em,15em,auto;
	}
}
#activity-gallery li {
  display: inline-block;
  width: 30%;
  overflow: hidden;
  position: relative;
  height: 20em;
  margin: 0.5em;
  text-align: center;
  background: #110101;
  border: 0.25em solid #dbb67f;
}
#activity-gallery li img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
#activity-gallery li .img-description {
  color: #333;
  padding: 0.75em;
  text-align: left;
}


@media(max-width:900px){
  #activity-gallery li{
    width: 100%;
    max-width: 20em;
  }
}
/* mini gallery */
#gallery-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  background: #000000a8;
}
#gallery-modal.modal-gallery-window{
  display: none;
}
#gallery-modal.modal-gallery-window.active{
  display: block;
}

.gallery-slide {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 90%;
  max-width: 50em;
}
#gallery-button-prev,
#gallery-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  line-height: 0;
  letter-spacing: 0px;
  word-spacing: 0px;
  border: 0;
}
#gallery-button-prev{
  left: 0em;
}
#gallery-button-next{
  right: 0em;
}
#gallery-button-prev .material-symbols-outlined,
#gallery-button-next .material-symbols-outlined{
  color: whitesmoke;
  font-size: 5em;
}
#gallery-button-prev .material-symbols-outlined{
  margin-left: -0.2em;
}
#gallery-button-next .material-symbols-outlined{
  margin-right: -0.2em;
}
.gallery-slide{
    display: none;
}
.gallery-slide.active{
    display: block;
}

#close-modal-gallery {
  position: absolute;
  right: 1em;
  top: 1em;
  font-size: 1em;
  background: none;
  border: none;
}

#close-modal-gallery .material-symbols-outlined{
  font-size: 2.5em;
  color: white;
    border: 2px solid;
    border-radius: 50%;
}
div#modal-gallery-nav {
    position: absolute;
    bottom: 1em;
    width: 100%;
    text-align: center;
}
button.gallery-nav-btn {
    margin: 0.25em;
    height: 1.5em;
    width: 1.5em;
    border-radius: 1em;
    border: 0;
    opacity: 0.5;
}
button.gallery-nav-btn.active{
    opacity: 1;
}
div#empty-cart {
    text-align: center;
    padding: 10em 2em 10em 2em;
    margin: 0 auto;
    margin-top: 0;
    background: url("../images/kauau-zipline-tour-background.jpg");
    background-size: cover;
    background-position: center;
}
div#empty-cart .material-symbols-outlined {
    color: white;
    font-size: 4em
}
div#empty-cart h3 {
    text-transform: capitalize;
    color: white;
    font-size: 2em
}

div#empty-cart p {
    color: white;
    line-height: 1.5em;
    max-width: 25em;
    margin: 0 auto;
    font-size: 1.25em;
}
#contact-us p {
    line-height: 2em;
    max-width: 45em;
    margin: 0 auto;
    width: 95%;
}
#contact-us h1.title {
    color: #18243f;
}
div#contact-us {
    text-align: center
}

#contact-us {
    background-position: center;
    padding-bottom: 2em
}

#contact-us h3.title {
    font-size: 2em;
    text-transform: capitalize;
    padding: 1.5em 0;
    margin: 0 auto;
    display: block;
    text-align: center;
    color: white;
    font-weight: normal;
    font-size: 2em;
    font-weight: lighter;
    color: #333;
}

#contact-form {
    margin: 1em auto;
    text-align: center;
    background-position: center;
    background: #f5deb3;
    max-width: 60em;
    break-inside: avoid;
    padding: 3em;
    width: 90%;
    border-radius: 0;
    border-radius: 1em;
}

@media(max-width: 900px) {
    #contact-form {
        column-count:0
    }
}

#contact-form .form-control {
    padding: 1em;
    width: 100%;
    max-width: 25em;
    margin: 1em auto;
    border-radius: .75em;
    text-transform: capitalize;
    transform: scaleY(-1);
    border: none;
    border: 0.12em solid;
}

#contact-form .row {
    break-inside: avoid
}

#contact-form .md-form label {
    display: block;
    color: #1a1b1f;
    font-size: 1em;
    font-weight: bold;
    transform: scaleY(-1)
}

#contact-form .container {
    text-align: center;
    padding: 2em 0
}

#contact-form .md-form.mb-0 {
    transform: scaleY(-1)
}

#contact-form .md-form {
    transform: scaleY(-1)
}

div#contact-us {
    text-align: center
}

div#contact-us {
    padding-top: 12em;
    background-size: 100%;
}

div#contact-us iframe {
    margin: 0 auto;
    display: block
}

.g-recaptcha {
    text-align: center;
    margin: 0 auto;
    display: block
}

.g-recaptcha div {
    margin: 0 auto
}

#contact-us h3.title {
    font-weight: 400;
    color: #145586;
    margin-top: 3em;
    font-weight: bold
}

div#contact-us input[type="submit"] {
    display: inline-block;
    padding: .5em 2em;
    text-transform: capitalize;
    font-size: 1.15em;
    background: #dcb14c;
    color: #1a1f1b;
    border: .15em solid white;
    transition: .3s
}
#about-content{
	background-size: 100%;
}
@media(max-width:500px){
	#about-content{
			background-size: 15em,15em,auto;
	}
}


div#hero-alt {
    width: 100%;
    position: relative;
    height: 25em;
    overflow: hidden;
    background-color: black;
}

#hero-alt img {
    width: 100%;
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 0.8;
}

#hero-alt section {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

#hero-alt h1 {
    color: white;
    font-family: 'Jaro';
    font-size: 3em;
    font-weight: lighter;
    letter-spacing: 1px;
    text-shadow: 0em 0em 1em black;
}

#hero-alt span.span-2 {
    color: gold;
    text-transform: capitalize;
    font-size: 2em;
    text-shadow: 0em 0em 1em black;
}



#about div#hero {
    border-top: 0;
    position: relative;
    text-align: center;
    height: auto;
    background: url("../images/kauau-zipline-tour-background.jpg");
    background-size: cover;
    background-position: center;
}

#about #hero h1 {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    font-size: 3em;
    text-transform: capitalize;
    color: white;
    padding: 4em 0em 1em 0em;
    background: #00000061;
}

div#about-content {
    padding: 5em 0;
    text-align: center;
    background-color: #879b68;
}

#about-content article {
    display: block;
    margin: 0 auto;
    max-width: 60em;
    width: 90%;
    border-radius: 2em;
    position: relative;
    text-align: center;
    padding: 3em;
    background-size: 55em;
    background-position: center;
    background: #f5deb3;
}

#about-content article p {
    line-height: 2em;
    margin-bottom: 1em;
    text-align: left
}

@media (max-width: 950px) {
    #book-now-alt {
        left: 0;
        bottom: 0;
        width: 100%;
    }
	#video
    #activity-header.blank {
        height: 18em;
    }

    #player-wrapper {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 1em;
    }

    #video-alt-wrapper {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 1em;
        max-width: 30em;
        margin: 0 auto;
    }

    #product-main {
        display: block;
        width: 100%;
        padding: 0em 1em;
        text-align: center;
    }

    #product-features {
        margin: 1em auto;
    }

    #product-prices {
        display: table;
        width: 100%;
        text-align: center;
    }

    #product-prices li {
        text-align: center;
        padding: 1em;
    }

    #product-buttons {
        display: block;
        width: 100%;
        text-align: center;
    }
		#video-alt-wrapper{
			width: 100%;
		}
	#video-alt-wrapper section img{
		height: 100%;
		width: auto;
	}
}
div#seating-window {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: rgba(0,0,0,0.5);
    height: 100%;
    width: 100%;
}
div#seating-window img{
    width: 95%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    max-width: 40em;
}
div#seating-window button {
    position: absolute;
    right: 1em;
    top: 1em;
    background: none;
    color: white;
    border: none;
    font-size: 1.25em;
}
div#seating-window button .material-symbols-outlined{
    font-size: 2.5em !important;
    font-weight: bold;
}
div#seating-window{
    display: none;
}
div#seating-window.visible{
        display: block;
}
a.footer-logo.alt img{
	width: 12em;
}

div#activities-index {
    background-size: cover;
    background-position: bottom;
    background: #728b4d;
    padding-bottom: 1em;
}
.activity {
    display: table;
    width: 100%;
    vertical-align: middle;
    margin: 1em auto;
    overflow: hidden;
    max-width: 60em;
    margin: 2em auto;
    padding: 1em;
    background: white;
}

.activity .tour-img {
    display: table-cell;
    width: 45%;
    overflow: hidden;
    position: relative;
    height: 20em;
}

.activity .tour-details {
    display: table-cell;
    width: 55%;
    padding: 2em;
    text-align: left;
}

.activity .tour-img img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    height: 100%;
}

.activity .tour-details p {
    line-height: 1.5em;
    color: #333;
    margin: 1em 0em;
}

.activity .tour-details h2 {
    font-size: 2em;
    color: darkgreen;
}
@media(max-width:750px){
	.activity{
		max-width: 30em;
		font-size: 1.15em;
	}
	.activity .tour-img,
	.activity .tour-details {
		display: block;
		width: 100%;
		text-align: center;
	}

}

.activity-details,
#activity-article {
  text-align: left !important;
}

#activity-article p,
#activity-article ul,
#activity-article li,
#activity-article strong,
#activity-article h3 {
  text-align: left !important;
}

.bulletpointstyles {
  list-style-type: disc !important;
  padding-left: 20px !important;
  margin: 0 0 1em 0 !important;
}

.bulletpointstyles li {
  line-height: 2em !important;
  list-style: disc !important;
  display: list-item !important;
}

h3.info {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.6em;
  text-transform: uppercase;
  color: #22491d; /* dark green consistent with headings */
  background: linear-gradient(to right, #fff4d6, #f5deb3); /* soft gold to wheat */
  padding: 0.5em 1em;
  margin: 2em 0 1em;
  border-left: 6px solid #fea500; /* orange-gold tone like #why-book-with */
  border-radius: 0 0.5em 0.5em 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


h2.info {
  font-family: 'Jaro', sans-serif;
  font-size: 2em;
  font-weight: 400;
  color: #21491D; /* Deep green like #product-header */
  margin: 1em 0 0.5em;
  text-align: center;
  background: linear-gradient(to right, #fff4d6, #f5deb3); /* beige to wheat */
  padding: 0.5em 1em;
  border-left: 6px solid #fea500; /* orange-gold */
  border-radius: 0 0.5em 0.5em 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-transform: capitalize;
}
#message {
  height: 200px !important;
  resize: vertical; 
}
.activity dd {
    text-decoration: line-through;
    opacity: 0.3;
    font-family: "Jaro";
    display: inline-block;
	padding-left: 1.75em;
}

.activity dl {
    font-size: 1.75em;
}

.activity dt {
    font-family: "Jaro";
    color: #265925;
}
.activity dt:before{
	content: "from ";
	color: #333;
	text-transform: capitalize;
	font-size: 0.75em;
}