/*  
Theme Name: Hawaii.com
Theme URI: https://www.hawaii.com
Author: Hawaii.com
Author URI: https://www.hawaii.com
Description: A theme for Hawaii.com
Year: 2023
*/

/* Web Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@font-face {
    font-family: 'Playfair Display Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Playfair Display Bold'), url('../woff/playfairdisplay-bold.woff') format('woff');
}


/* CSS Reset - do not touch */
html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
b, strong { font-weight: bold; }
i, em { font-style: italic; }
small { font-size: 0.75em; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
#usm-admin-notification-widget { display: none; }


/* General Elements */
body {
    font: 16px 'Trebuchet MS', Helvetica, Arial, sans-serif;
    color: #242020;
}

h1, h2, h3, h4, h5, h6 { font-weight: bold; }

.btn {
    border-radius: 40px;
    padding-left: 1.5em;
    padding-right: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
}

.btn-yellow {
    background: #f7ee22;
    border-color: #f7ee22;
    color: #000;
}

.btn-yellow:hover, .btn-yellow:focus {
    background: #f7d122;
    border-color: #f7d122;
}

.btn-salmon {
    background: #ff7353;
    border-color: #ff7353;
    color: #fff;
}

.btn-salmon:hover, .btn-salmon:focus {
    background: #ec4c28;
    border-color: #ec4c28;
    color: #fff;
}

.btn-light { border-color: #a6cbee; }
.text-sml { font-size: 0.75em; }
.text-heading { color: #00bee7; }
.text-dark-green { color: #01816d; }
.text-hi-green { color: #26a894; }
.text-salmon { color: #f37565; }
.text-grey { color: #ddd; }
.bg-black { background: #000; }

.bg-tropical {
    background: #b3e3ff url(../jpg/bg-tropical.jpg) no-repeat;
    background-size: cover;
    font-size: 1.125em; /* 18px */
}
.bg-blue { background: #e4f5ff; }
.bg-yellow { background: #f8f3df; }
.bg-green { background: #a1e4e6; }

.featured-heading, .page-heading { font-size: 2em; /* 32px */ }

.bg-yellow {
    background: #f8f3df;
}

.bg-green {
    background: #a1e4e6;
}

.bg-beige {
    background: #fffbf6;
}

.featured-heading, .page-heading {
    font-size: 2em;
    /* 32px */
}


/* Top nav bar */
.navbar-top { background: #e4f5ff; }

.navbar-top .navbar-nav .nav-link {
    text-transform: uppercase;
    color: #383838;
    font-size: 0.75em;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.navbar-top .navbar-nav .nav-link:hover { color: #000; }

/* Main nav bar */
.navbar-light {
    border-bottom: 3px solid #f8f3df;
}

.navbar-light .navbar-nav .nav-link {
    color: #242020;
    font-weight: bold;
    text-transform: uppercase;
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color: #ff7353; }

.navbar-nav .nav-item { margin: 1em 0; }

.navbar-nav .nav-link[data-bs-toggle=dropdown]:after {
    content: '\f0d7';
    font-family: 'icomoon';
    padding-left: 5px;
}

.navbar-nav .dropdown-menu {
    min-width: 300px;
    border-radius: 0;
    border-left: 4px solid #ff9f89;
}

.navbar-nav .dropdown-menu .nav-item:hover, .navbar-nav .dropdown-menu .nav-item:focus { background: #fffcec; }

.navbar-nav .nav-button {
    background: #ff7353;
    margin: 0 !important;
    padding: 0.5rem 1rem;
}

.navbar-nav .nav-button .nav-link, .navbar-nav .nav-button .nav-link:hover { color: #fff !important; }


/* Homepage Elements */
.page-id-115687 .navbar-brand img {
    width: 117px;
    height: 43px;
}
@media(min-width: 992px){
	.page-id-115687 .navbar-light{
		border: none;
	}
}


.page-id-115687 .marketplace-logo {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -150px;
    width: 300px;
    height: 117px;
    object-fit: none;
}

.masthead {
    overflow: hidden;
}

.masthead img {
    width: auto;
    height: 100%;
    object-fit: cover;
    margin-left: -30px;
}

.masthead .photo-credit {
    position: absolute;
    bottom: 53px;
    right: 1em;
    padding: 5px;
    background: rgba(0, 0, 0, 0.3);
    color: #eee;
    font-size: 8px;
    text-transform: uppercase;
}

.latest-posts-top:before {
    content: '';
    display: block;
    background: url(../gif/divider-pattern.gif) repeat-x;
    width: 100%;
    height: 47px;
    position: absolute;
    top: 0;
}

.latest-posts-bottom:after {
    content: '';
    display: block;
    background: url(../gif/divider-pattern.gif) repeat-x;
    width: 100%;
    height: 47px;
    position: absolute;
    bottom: 0;
}

/*.masthead:after {
    content: '';
    display: block;
    background: url(images/tapa-blue.gif) repeat-x;
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
}*/

.masthead .category-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    color: #fff;
    text-align: center;
    line-height: 1.5em;
    text-shadow: #000 1px 0 10px;
}

.masthead .category-caption h1 {
    text-transform: uppercase;
    font-size: 2em;
}

.masthead .category-caption p { font-size: 1.125em; /* 18px */ }

.cat-desc .row { border-radius: 30px; }

.featured-img img {
    width: 100%;
    height: 250px;
    -webkit-object-fit: cover;
    -moz-object-fit: cover;
    object-fit: cover;
}

.featured-title {
    font-family: 'Playfair Display Bold', Garamond, Times, serif;
}

.featured-title a {
    color: #242020;
    text-decoration: none;
}

.featured-title a:hover, .featured-title a:focus { color: #000; }

.featured-title .island-label {
    display: inline-block;
    text-transform: uppercase;
    font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 0.6em; /* 12px */
    color: #5ca6d1;
    margin: 0 0.5em 1em 0;
    padding: 3px 6px;
    border-radius: 40px;
    background: #e4f5ff;
}

.read-more {
    color: #287bba;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
}

.read-more:after {
    content: ' \00BB';
    color: #287bba;
    font-weight: bold;
}

.read-more:hover, .read-more:focus {
    color: #105386;
}


/* ShopType Elements on Homepage */
#awake-products .product-image img {
    width: 100% !important;
    height: auto !important;
}

#awake-products .product-info { text-align: center; }

#awake-products .product-info .product-title {
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
    overflow: hidden;
}

#awake-products a.am-product-link {
    text-decoration: none;
}

#awake-products .on-sale {
    background: #f37565;
}

#awake-products .on-sale, #awake-products .sold-out {
    font-size: 14px;
    border-radius: 13px;
    padding: 1px 6px;
    top: 50%;
}

.st-next, .st-prev {
	display: inline-block;
	margin: 0 1.5rem;
	cursor: pointer;
	opacity: 0.75;
	position: absolute;
	z-index: 1;
	font-size: 3em;
}

.st-next:hover, .st-prev:hover { opacity: 1; }

.st-next {
	right: -1rem;
	top: 40%;
}

.st-prev {
	left: -1rem;
	top: 40%;
}


/* Post Elements */
.post-entry {
    font-size: 1.125em; /* 18px */
    line-height: 1.5em; /* 27px */
}

.post-entry p {
    margin-bottom: 1em;
}

.post-entry h1, .post-entry h2, .post-entry h3, .post-entry h4, .post-entry h5, .post-entry h6 {
    font-family: 'Playfair Display Bold', Garamond, Times, serif;
    margin-top: 1.5em;
    margin-bottom: 1em;
}

.post-entry img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    display: block;
	width:100%;
}

.post-entry .wp-caption {
    margin: 2em auto;
    max-width: 100%;
    /* width: auto !important; */
}

.post-entry .wp-caption-text {
    font-size: 0.875em;
    color: #888;
}

.post-entry a {
    color: #ff7353;
    text-decoration: underline;
}

.post-entry a:hover, .post-entry a:focus { color: #ec4c28; }

.post-entry .btn-primary, .related-content .btn-primary {
    background: #ff7353;
    border-color: #ff7353;
    color: #fff;
    text-decoration: none;
}

.post-entry .btn-primary:hover, .post-entry .btn-primary:focus, .related-content .btn-primary:hover, .related-content .btn-primary:focus {
    background: #ec4c28;
    border-color: #ec4c28;
    color: #fff;
    text-decoration: none;
}

.post-entry .btn-light {
    border-color: #5ca6d1;
    color: #5ca6d1;
    text-decoration: none;
}

.post-entry .btn-light:hover, .post-entry .btn-light:focus {
    background: #e4f5ff;
    color: #5ca6d1;
}

.post-entry ul {
    list-style-type: disc;
    margin-left: 1em;
    margin-bottom: 1em;
}

.post-entry ol {
    list-style-type: decimal;
    margin-left: 1em;
    margin-bottom: 1em;
}

.post-content iframe {
    margin: auto !important;
}

.post-entry blockquote {
    background: #e4f5ff;
    padding: 1em;
    margin-bottom: 1em;
    border-left: 10px solid #98d4f8;
    display: block;
    color: #006baa;
    border-radius: 5px;
}

.post-entry blockquote a { color: #006baa; }
.post-entry blockquote a:hover, .post-entry blockquote a:focus { color: #004872; }

.post-entry blockquote p { margin-bottom: 0; }

.related-content .featured-heading {
    font-size: 2rem;
    font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
    margin-top: 0;
}

.related-content .btn-salmon, .related-content .btn-salmon:hover, .related-content .btn-salmon:focus {
    color: #fff;
    text-decoration: none;
}

.related-content .featured-title a {
    color: #242020;
    text-decoration: none;
}

.related-content .featured-title a:hover, .related-content .featured-title a:focus { color: #000; }

.related-content .featured-img img { margin-bottom: 0; }


/* Category and Page Elements */
.masthead.island { height: 300px; }

.cat-entry h5 { font-size: 1.125em; /* 18px */ }

.cat-entry h5 a {
    background: #fff;
    color: #242020;
    padding: 1em;
    margin-bottom: 1em;
    border-radius: 5px;
    display: block;
}

.cat-entry h5 a:hover, .cat-entry h5 a:focus {
    text-decoration: none;
    background: #fffee6;
    color: #b62a39;
}

.searchform #search {
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}

.searchform input, .searchform button { font-size: 1.125em; }

.sfsi_shortcode_container {
    float: none !important;
    margin-bottom: 1.5rem;
}

.pagination .page-numbers, .pagination .page-link, .pagination li span {
    margin: .25em;
    padding: 0.15rem 0.5rem;
    color: #ff7353;
    font-size: 1.25em; /* 20px */
    line-height: normal;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    border: 0;
}

.pagination .page-numbers.dots, .pagination .page-numbers.dots:hover, .pagination .page-numbers.dots:focus {
    color: #242020;
    font-weight: normal;
    background: none;
    margin: 0;
    padding: 0;
}

.pagination .ellipse {
    color: #242020;
    font-weight: normal;
    background: none;
}

.pagination .page-numbers:hover, .pagination .page-numbers:focus, .pagination .page-link:hover, .pagination .page-link:focus {
    background-color: #ff7353;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
}

.pagination li.active {
    background: none !important;
}

.pagination .page-numbers.current, .pagination li.active span.current {
    background: #e4f5ff;
    color: #242020;
    border-radius: 50px;
}

.breadcrumbsNav {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.breadcrumbsNav .nav-link {
    color: #242020;
    font-weight: bold;
    text-transform: uppercase;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 1.125em; /* 18px */
}

.breadcrumbsNav .nav-link:hover, .breadcrumbsNav .nav-link:focus {
    color: #ff7353;
}

.breadcrumbsNav .nav-link:after {
    font-family: 'icomoon';
    content: '\f054';
    vertical-align: middle;
    margin-top: -2px;
    margin-left: 4px;
    display: inline-block;
}


/* Sidebar Elements */
.single .sidebar { margin: 2em 0; }

.sidebar .widget { margin-bottom: 3em; }


/* Footer Elements */
footer {
    background: #e4f5ff;
    color: #555;
}

footer a {
    color: #555;
    text-decoration: underline;
}

footer ul li {
    display: block;
    margin: 1.5em;
}

footer ul a {
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
}

footer ul a:hover, footer ul a:focus {
    color: #000;
    text-decoration: none;
}

footer a:hover, footer a:focus { color: #000; }

footer .social {
    font-size: 1.5em; /* 24px */
    vertical-align: middle;
    margin: 1em .5em;
}


/* Ads */
.vac-pkg .featured-img img { margin-bottom: 0; }

.vac-pkg .featured-title a {
    color: #242020;
    text-decoration: none;
}

.vac-pkg .featured-title a:hover, .vac-pkg .featured-title a:focus { color: #000; }

.gam {
    text-align: center;
    position: relative;
}

/*.gam > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}*/

.gam.ld { min-height: 250px; }

.post-entry .ad-unit {
    margin: 2em auto;
}

.gam > div:before, .post-entry .ad-unit > div:before {
    content: 'Advertisement';
    font-size: 0.75em;
    color: #888;
    display: block;
    margin-bottom: 3px;
}

.sidebar .gam.tl:before {
    content: 'Specials';
    color: #00bee7;
    display: block;
    padding-bottom: 5px;
    margin-bottom: 10px;
    text-align: left;
    font-weight: bold;
    font-size: 1.5em;
    border-bottom: 1px solid #ddd;
    text-transform: uppercase;
}

.gam.tl a {
    background: #e4f5ff;
    margin: 2em 0;
    padding: 2em;
    color: #006baa;
    display: block;
    border-radius: 5px;
    border-left: 10px solid #98d4f8;
    border-right: 10px solid #98d4f8;
    text-decoration: none;
}

.gam.tl a:hover, .gam.tl a:focus {
    text-decoration: none;
    background: #98d4f8;
    color: #004872;
}

.gam.tl a:before {
    content: 'Advertisement';
    font-size: 0.75em;
    font-style: italic;
    color: #888;
    display: block;
    margin-bottom: 3px;
}

.gam.tl > div {
    position: static;
    transform: none;
}

.gam.tl > div:before {
    content: '';
    margin-bottom: 0;
}

.sidebar .gam.tl a {
    margin: 0 0 1em;
    padding: 1em;
    text-align: left;
}

.sidebar .gam.tl a:before { content: ''; }


/* Media Queries */
@media (min-width: 480px) {
    .masthead img { margin-left: -800px; }
}

@media (min-width: 576px) {
    .masthead img { margin-left: -750px; }
}

@media (min-width: 768px) {
    .masthead img {
        width: 100%;
        height: auto;
        margin-left: 0;
    }
    .featured-heading, .page-heading { font-size: 3em; /* 48px */ }
    .masthead .category-caption h1 { font-size: 3em; }
    .featured-img img { height: 400px; }
    .sml-thumb .featured-img img { height: 250px; }
    .jumbotron.market .btn { font-size: 2rem !important; }
    .breadcrumbsNav { flex-direction: row; }
    .gam.ld { min-height: 150px; }
    footer ul li { display: inline-block; }
}

@media (min-width: 992px) {
    body.home {
        background: url(../jpg/bg-plumeria.jpg) 1400px 800px no-repeat;
    }
    .navbar-nav .nav-item { margin: 0; }
    .navbar-nav .nav-button {
        background: none;
        margin: 0;
        padding: 0;
    }
    .navbar-nav .nav-button .nav-link {
        background: #ff7353;
        color: #fff;
        padding-left: 1em;
        padding-right: 1em;
        border-radius: 40px;
    }
    .navbar-nav .nav-button .nav-link:hover {
        background: #ec4c28;
        color: #fff;
    }
    #menu-top-menu.navbar-nav { flex-direction: row; }
    #menu-top-menu.navbar-nav .nav-item { margin-left: 0.5em !important; }
    
    .page-id-115687 .navbar .container-fluid {
        position: absolute;
        top: 20px;
    }
    
    .page-id-115687 .navbar.bg-white {
        background: none;
    }
    
    .page-id-115687 .navbar-brand img {
        width: 252px;
        height: 92px;
    }
    
    .page-id-115687 .shop-button {
        /* display: none; */
    }
    
    .page-id-115687 .marketplace-logo {
        top: 140px;
        left: auto;
        right: 1.75rem;
        margin-left: 0;
        width: 252px;
        height: 92px;
    }

>>>>>>> a04a090... Hawaii.com Marketplace 2024 revamp
    .featured-img img {
        width: 160px;
        height: 100px;
    }
    .featured .featured-img img { width: 100%; height: 400px; }
    .sml-thumb .featured-img img { height: 250px; }
    .gam.ld { min-height: 300px; }
    .sidebar { min-width: 300px; }
    .sidebar .widget { margin-bottom: 4em; min-height: 0 !important; height: auto !important; }
    .sidebar .gam.tl, .sidebar .related-content { max-width: 300px; }
    .sidebar .sticky-lg-top { top: 6em; z-index: 1010; }
    .sidebar-sticky-wrapper { min-height: 1500px; }
    .sidebar .related-content .featured-img img { height: 80px; }
    footer {
        background: #e4f5ff url(../jpg/bg-hibiscus.jpg) -100px 30px no-repeat;
    }
    footer .social {
        font-size: 2.5em; /* 40px */
        vertical-align: middle;
        margin: .5em;
    }
}

@media (min-width: 1200px) {
    .home .container, .home .container-lg, .home .container-md, .home .container-sm, .home .container-xl { max-width: 1350px; }
    .single .container, .single .container-lg, .single .container-md, .single .container-sm, .single .container-xl { max-width: 1140px; }
    .page-heading { font-size: 3.5em; /* 56px */ }
}

.bg-404 {background: url("../jpg/bg_404.jpg") center top no-repeat;
    background-size: cover;
    padding-top: 3rem;
    padding-bottom: 26%;
  }
  .section-404{
    max-width: 1000px;
  }
  .section-404 h1{
    font-size: 4.5rem;
  }
  .section-404 h1 small{
    font-weight: normal;
    font-size: 2.25rem;
    display: block;
  }
  .quick-link-404{
    line-height: 1.6;
  }
  .quick-link-404 a{
    text-decoration: none;
    color: inherit;
  }
  .tips-404{
    font-size: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
  }
@media(max-width: 767px){
  .bg-404 {
    background: url("../jpg/bg_404_mobile.jpg") center bottom no-repeat;
    background-size: 200% auto;
    padding-bottom: 130vw;
  }
  .tips-404{
    font-size: 1.2rem;
  }
  .quick-link-404{
    font-size: 0.875rem;
  }
}
.post-entry img.post-image-uniform{
	width: 100%;
    margin-left: auto;
    margin-right: auto;
    object-fit: cover;
/*     aspect-ratio: 16 / 9; */
    display: block;
}
.post-entry .caption-left{
/* 	max-width:450px !important; */
	width:100% !important;	
}
@media(min-width: 768px){
	.post-entry .caption-left{
			margin-left:0 !important;
	}
}

.navbar-search{
	margin-left:auto;
	margin-right:1rem
}
@media(min-width: 992px){
	.navbar-search{
		display:none
	}
	.is-fixed{
		position: fixed !important;
		top: 0 !important;
		background: white;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		border-bottom: 3px solid #f8f3df;
		z-index: 1000
	}
	.is-fixed img{
		width:117px !important;
		height: auto !important
	}
	.search-mobile{
		display:none
	}
}

@media(max-width: 991px){
	.navbar-sticky{
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 1000;
		border-bottom: 3px solid #f8f3df;
	}
	.search-desktop{
		display:none
	}
	.search-mobile{
		padding-left: 0.75em;
    	padding-right: 0.75em;
	}
}

.search-group{
	border-radius: 40px;
	overflow: hidden;
}

/* vacation packages page style */

.list-disc{
    list-style: disc;
}

.fs-15{
    font-size: 15px!important;
}

.mt-80{
    margin-top: 80px !important;
}

.mb-80{
    margin-bottom: 80px !important;
}
.pt-80{
    padding-top: 80px !important;
}
.pt-120{
    padding-top: 120px !important;
}
.pb-80{
    padding-bottom: 80px !important;
}
.mb-36{
    margin-bottom: 36px !important;
}

@media(min-width: 992px){
    .lg-mt-90{
        margin-top: 90px !important;
    }
    .lg-mb-90{
        margin-bottom: 90px !important;
    }
    .lg-pt-90{
        padding-top: 90px !important;
    }
    .lg-pb-90{
        padding-bottom: 90px !important;
    }
    .lg-pb-0{
        padding-bottom: 0 !important;
    }
}
/*slick*/
.details-panel .slick-arrow{
    cursor: pointer;
    background: rgba(255, 255, 255, 0.16); 
    backdrop-filter: blur(8px);           
    -webkit-backdrop-filter: blur(8px);   
    border-radius: 100%;
}
.details-panel .slick-prev {
    bottom: 50px;
    position: absolute;
    right: 60px;
    z-index: 2;
}

.details-panel .slick-next {
    bottom: 50px;
    position: absolute;
    right: 15px;
    z-index: 2;
}
/*headline*/

.vacation-header{
    font-family: "Open Sans";
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.vacation-header .header-title{
    font-family: "Trebuchet MS";
    color: #135071;
    font-size: 40px;
    margin-bottom: 0;
}
.vacation-header .subheader{
    font-size: 24px;
    font-family: "Open Sans";
}



.btn-orange{
    text-align: center;
    font-family: "Open Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: #fff !important;
    background-color: #FE7354;
    text-transform: none;
    padding: .65rem 1.25rem;
}
.btn-orange:hover{
    background-color: #ec4c28 !important;
}
.btn-outline-darkblue{
    color: var(--Hawaii-Tours-Pacific-Blue-Shade-01, #135071);
    text-align: center;
    font-family: "Open Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 165%; /* 23.1px */
   border:2px solid  #135071;
    text-transform: none;
    padding: .65rem 1.25rem;
}
.btn-outline-darkblue:hover{
    color: #ffffff;
    background-color: #135071 !important;
}
/*https://codepen.io/GusRuss89/pen/bVwNrE*/
.hero {
    /*background-image: url('');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;*/
    min-height: 620px;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 0;
}

.hero__body {
    text-align: center;
}

.hero h1 {
    color: white;
    font-size: clamp(3.125rem, 2.113rem + 4.319vw, 6rem);
    margin-bottom: 2vw;
}


.overlay {
    background-color: #000000;
    bottom: 0;
    height: 100%;
    left: 0;
    opacity: 0.35;
    position: absolute;
    right: 0;
    top: 0;
    transition: background-color .1s linear;
/ / video is z-index: - 1;
    width: 100%;
    z-index: 3;
}

.hero__video {
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translate(-50%, -50%);
    z-index: -1;
}

@media only screen and (max-width: 480px) {
    /*// mobile styles go here*/

}

@media only screen and (min-width: 481px) and (max-width: 768px) {
    /*// tablet styles go here*/
}

@media only screen and (min-width: 769px) {
    .hero {
        background-image: unset;
    }

    .hero__video {
        display: block;
    }
}

.hero__content {
    align-items: center;
    display: flex;
    height: 100%;
    inset: 0;
    justify-content: center;
    position: absolute;
    width: 100%;
    z-index: 4;
    padding: 12px;
}


/*tile*/
.tiles {
    display: flex;
    /*width: 1040px;*/
    margin: 0 auto;
    gap: 19px;
    padding-left: 60px;
    padding-right: 60px;
}
.tiles-item{
    flex: 1;
}
.tiles .tile {
    display: block;
    overflow: hidden;
    position: relative;
    flex: 1;
    border-radius: 25px;
}
.tile img{
    transition: all 0.3s ease 0s;
}
.tile:hover img{
    transform:scale(1.2)
}
.tiles .tile:before {
    content: '';
    /*background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);*/
    background: rgba(0, 0, 0, 0.35);
    width: 100%;
    height: 100%;
    /*opacity: 0;*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transition-property: top, opacity;
    transition-duration: 0.3s;
}
/*.tile:hover:before{
    background: rgba(0, 0, 0, 0.5);
}*/
.tiles .tile img {
    display: block;
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.tiles .tile .details {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    padding: 36px 24px;
}
.tiles .tile .details span {
    display: block;
}
@media (min-width: 992px) {
    .tiles .tile .details span {
       max-width: 190px;
    }
}
.tiles .title {
    color: var(--White, #FFF);
    /* Hawaii Tours/Subheads/Sub 4 */
    font-family: "Open Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%; /* 35px */
}
/*  .tiles .tile:focus:before, .tiles .tile:hover:before{
    opacity: 1;
  }
  .tiles .tile:focus:before, .tiles .tile:hover:before {
    top: 50%;
  }
  .tiles .tile:focus span, .tiles .tile:hover span {
    top: 0;
  }*/
.learn_more{
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 36px 24px;
}
.learn_more .btn-orange{
}

.island-section{
    background: linear-gradient(180deg, #FFF 23.12%, #EBF6FC 100%);
}


/*map*/

#city {
    display: flex;
    font-family: sans-serif;
    gap: 30px;
    padding-left: 90px;
    padding-right: 90px;
}
.details-panel{
    border-radius:25px;

}
.details-panel,.info-panel {
    width: 25%;
}
.map-panel{
    width: 50%;
}
.details-panel, .map-panel, .info-panel {
    /*flex: 1;*/
}

.info-panel{
    display: flex;
    flex-direction: column;
    gap: 50px;
}
@media (min-width: 992px) and (max-width: 1199px) {
    #city {
        flex-wrap: wrap;
    }
    .details-panel{
        width: 30%;
    }
    .map-panel{
        width: calc(70% - 40px);
    }
    .info-panel{
        width: 100%;
        flex-direction: row;
        /*order: -1;*/
    }
    .info-item{
        flex: 1;
    }
}
.info-item{
    /*flex: 1;*/
    background: white;
    border-radius:25px;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.20);
    padding: 32px;
    cursor: pointer;
}
.details-header{
    font-family: "DM Serif Display";
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 31.2px */
    margin-bottom: 4px;
}
.details-subheader{
    color: var(--hawaii-com-salmon, #FE7354);
    /* Hawaii Tours/Paragraphs/P1 Bold Italic */
    font-family: "Open Sans";
    font-size: 16px;
    font-style: italic;
    font-weight: 700;
    line-height: 165%; /* 26.4px */
    margin-bottom: 12px;
}
.details-txt{
    font-family: "Open Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 24px;
}


.details-item {
    overflow: hidden;
}

.details-item, .info-item {
    border-radius: 25px;
    /*cursor: pointer;*/
    display: none;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.20);
}

.info-item {
    display: block;
}

.details-item.active {
    display: block;
}

.info-item.active {
    display: none;
}

.info-item:hover {
    /*background-color: #fca5a5;*/
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.50);
}

.map-panel svg {
    height: auto;
    width: 100%;
    /*border: 1px solid #ddd;*/
}

.island {
    cursor: pointer;
    fill: #0f4c81;
    transition: fill 0.3s;
}
.island:hover {
    fill: tomato;
}

.island.active {
    fill: tomato;
}

.details-item-footer{
    position: relative;
    border-radius:25px;
    overflow: hidden;
    background-color: #ffffff;
    padding: 32px;
    margin-top: -32px;
}
/*spotlight*/
.tiles-details {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 80px;
    padding-bottom: 80px;
    padding-right: 140px;
    padding-left: 140px;
    background: linear-gradient(180deg, #08212F 0%, rgba(8, 33, 47, 0.51) 49.04%, #08212F 100%), url('../jpg/bg-vacation-packages.jpg') lightgray 50% / cover no-repeat;
}
.spotlight {
    font-family: "Open Sans";
    color: white;
    align-items: center;
    display: flex;
    gap: 40px;
}
.spotlight  h2{
    font-family: "Trebuchet MS";
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 105%; /* 58.8px */
}
.spotlight p,.spotlight ul{
    margin-bottom: 25px;
}
.spotlight-tro{
    color: var(--White, #FFF);
    /* Hawaii Tours/Subheads/Sub 3 Bold */
    font-family: "Open Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.spotlight .image {
    order: 1;
    border-radius: 20px;
    overflow: hidden;
    width: 55%;
}
.spotlight .content {
    order: 2;
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 36px;

}
.spotlight:nth-child(2n) {
    flex-direction: row-reverse;
}
.spotlight li{
    margin-bottom: 16px;
}
@media (max-width: 991px) {
    .hero {
        min-height: 436px;
    }
    .hero h2{
        line-height: 105%; /* 52.5px */
        margin-bottom: 36px;
    }

    .tiles {

        flex-flow: column;
        padding-left: 12px;
        padding-right: 12px;
    }
    .tiles .tile img{
        aspect-ratio: 369 / 477;
        object-fit: cover;
    }
    .learn_more{
        padding-bottom: 24px;
    }

    #city {
        flex-direction: column-reverse;
        padding-left: 12px;
        padding-right: 12px;
    }
    .details-panel, .map-panel, .info-panel {
        width: 100%;
    }
    .info-panel{
        display: none;
    }
    .details-item{
        display:block;
    }
    .details-item .slider,.details-item .details-txt,.details-item .btn{
        display: none !important;
    }
    .details-item.active .slider,.details-item.active .details-txt,.details-item.active .btn{
        display: block !important;
    }
    .details-panel{
        display: flex;
        flex-direction: column;
        gap: 36px;
    }
    .details-item-footer{
        margin-top: 0;
    }
    .details-item.active .details-item-footer{
        margin-top: -32px;
    }

    .tiles-details{
        gap: 40px;
        padding-top: 80px;
        padding-bottom: 80px;
        padding-right: 12px;
        padding-left: 12px;
    }
    .spotlight {
        align-items: center;
        flex-direction: column;
        gap: 40px;
    }
    .spotlight:nth-child(2n) {
        flex-direction: column;
    }
    .spotlight .image,.spotlight .content{
        width: 100%;
    }
}

/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}