/*  
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 */
@font-face {
    font-family: 'Playfair Display Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Playfair Display Bold'), url('fonts/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; }

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

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

/* 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 */
.masthead { overflow: hidden; }

.masthead img {
    width: auto;
    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;
}

.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;
}

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

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

.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;
}


/* 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;
}

.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 */
.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 {
    border-radius: 40px !important;
    margin: .25em;
    padding: 0.75rem 1.25rem;
    background: #e4f5ff;
    border: 1px solid #5ca6d1;
    color: #5ca6d1;
    font-size: 1.25em; /* 20px */
    line-height: normal;
    display: inline-block;
    text-decoration: none;
}

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

.pagination .page-numbers.current {
        background: #ff7353;
        border-color: #ff7353;
        color: #fff;
    }


/* 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-img img { height: 400px; }
    .sml-thumb .featured-img img { height: 250px; }
    .gam.ld { min-height: 150px; }
    footer ul li { display: inline-block; }
}

@media (min-width: 992px) {
    body.home {
        background: url(images/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; }
    .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(images/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 */ }
}
