/*
Theme Name: Whitespace Kokanee Inn
Theme URI: https://www.valice.com/
Author: Valice
Author URI: https://www.valice.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Template: whitespace
Text Domain: nourish-your-life
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 with others.

Whitespace is based on Underscores https://underscores.me/, (C) 2012-2017 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/
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&family=Hurricane&family=Montserrat:wght@300;600&family=Pathway+Gothic+One&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
}

a,
a:visited {
    color: #18488f;
}

a:hover {
    color: #cd2027;
}

a.button,
.button,
.wp-block-button__link,
.wp-block-button__link:visited {
    background: #fff;
    color: rgba(0,0,0,.64);
    border: 1px solid rgba(33,33,33,.64);
    text-align: center;
    padding: 5px 10px;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    border-radius: 0;
    margin: 3px 0;
}

a.button:hover,
.button:hover,
.wp-block-button__link:hover {
    background: #0096a4;
    color: #fff;
}


/* Site Header */

.site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
}

.site-header .site-branding img {
    max-width: 200px;
    height: auto;
    margin: 10px;
}

/* Navigation */

.site-header .main-navigation {
    text-align: center;
    font-family: 'Pathway Gothic One', sans-serif;
    text-transform: uppercase;
}

.site-header .main-navigation ul {
    justify-content: space-between;
    max-width: 700px;
    margin: 0 auto;
    font-size: 22px;
}

.site-header .main-navigation ul li a {
    border-bottom: 1px solid transparent;
}

.site-header .main-navigation ul li a:hover {
    border-bottom: 1px solid #0096a4;
}

.site-header .main-navigation ul.sub-menu {
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    align-items: flex-start;
    background: #f5f6f6;
    font-family: 'Cormorant Garamond', serif;
    text-transform: none;
    font-size: 18px;
}

.site-header .main-navigation ul.sub-menu li a {
    padding: 10px;
    line-height: 1;
}

@media screen and (max-width: 37.5em) {
    button.menu-toggle {
        color: transparent;
        margin: 0 auto;
        border: none;
        background-color: transparent;
    }

    button.menu-toggle:before {
        content: "\f349";
        font-family: 'dashicons';
        color: #18488f;
        display: block;
    }

    .site-header .main-navigation {
        text-align: left;
        padding: 0 20px;
    }
}

/* Footer */

.site-footer {
    padding: 0 0 20px 0;
    background: #000;
    color: #fff;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    max-width: 1140px;
    margin: 0 auto;
    padding: 40px 10px;
    text-align: left;
    flex-wrap: wrap;
}

.site-footer a,
.site-footer i {
    color: #18488f;
    text-decoration: none;
}

.footer-content a:hover {
    color: #fff;
}

.footer-content .social {
    font-size: 30px;
    text-align: center;
}

.footer-content .site-links a {
    color: #fff;
}

.footer-content .site-links a:hover {
    color: #18488f;
}

.site-footer .site-info {
    border-top: 1px solid #18488f;
}

@media only screen and (max-width: 500px) {
    .site-footer .footer-content {
        flex-direction: column;
        align-items: center;
    }
}

/* Page Layout */

.page-header,
.single-post .entry-header,
.single-product .entry-header {
    text-align: center;
    padding: 20px 10px;
    margin-top: 10px;
    color: #fff;
    background-color: #000;
    text-transform: uppercase;
    border-bottom: 5px solid #18488f;
    font-family: 'Pathway Gothic One', sans-serif;
    letter-spacing: 1.5px;
}

.blog .content-area {
    border-top: 5px solid #18488f;
    margin-top: 10px;
}

article {
    background: #f5f6f6;
    padding-bottom: 40px;
}

.page-content,
.single-post .entry-content,
.single-post .entry-footer,
.single-product .entry-content {
    background: #fff;
    padding: 40px;
    margin: 0 auto;
    max-width: 1050px;
}

.wp-block-cover-image .wp-block-cover__inner-container,
.wp-block-cover .wp-block-cover__inner-container {
    line-height: 1;
}

.wp-block-cover-image .wp-block-cover__inner-container a,
.wp-block-cover .wp-block-cover__inner-container a {
    text-decoration: none;
}

.page-content .wp-block-cover, .wp-block-cover-image {
    margin: 40px -40px 40px -40px;
    width: auto;
}

.page-content .wp-block-column .wp-block-cover, .wp-block-cover-image {
    margin: 0;
}

h1.headline {
    color: #fff;
    z-index: 99;
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: 1;
}

.sub-headline {
    color: #18488f;
    z-index: 99;
}

/* Toggle */

.toggleable {
    margin-bottom: 30px;
}

.toggleable .toggle-body {
    display: none;
    background: #f5f6f6;
    font-family: 'Cormorant Garamond', serif;
    padding: 0 20px 20px 20px;
    font-size: 18px;
}

.toggleable.open .toggle-body {
    display: block;
}

.toggleable .toggle-handle {
    border-bottom: 1px solid #cd2027;
    font-size:  20px;
}
    
/* Blog */

.blog .site-main,
.archive .archive-content {
    max-width: 1050px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.blog .site-main article,
.archive .site-main article {
    max-width: 300px;
    margin: 20px;
    background: #fff;
}

.blog .site-main article .entry-header,
.archive .site-main article .entry-header,
.entry-footer {
    padding: 20px;
} 

.image-header {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 30px;
    color: #000;
    position: relative;
}

.woocommerce-shop .image-header {
    justify-content: flex-start;
}

.image-header:before {
    content: "";
    background: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.image-header h1.page-title {
    color: #fff;
    z-index: 999;
}

.blog .site-main article .entry-header,
.archive .site-main article .entry-header {
    line-height: 1;
    font-family: 'Pathway Gothic One', sans-serif;
}

article .entry-header a {
    text-decoration: none;
}

.blog .site-main article .entry-content,
.archive .site-main article .entry-content {
    text-align: center;
    padding: 0 20px;
}

.posts-navigation {
    clear: both;
    width: 100%;
}

.posts-navigation .nav-links {
    max-width: 1050px;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    padding: 5px;
}

/* Forms */

.gform_wrapper table {
	border: 1px solid;
	margin: 20px auto;
}

.gform_wrapper table th {
	background:#f5f5f5;
	padding: 10px
}

.gform_wrapper table td {
	line-height:1;
	padding: 5px;
}

.gform_wrapper.abn_wrapper .gf_left_ten {
    width: 5% !important;
    display: inline-block;
    vertical-align: top;
    float: none;
}

.gform_wrapper.abn_wrapper .gf_right_ninety {
    width: 95%;
    display: inline-block;
    vertical-align: top;
    float: none;
}

body .gform_wrapper.abn_wrapper ul li.gfield.gf_left_ten  {
	margin-top:0 !important;
}

.image-gallery {
    margin-top: 40px;
}

/* Rooms */

.room-header {
    width: 300px;
    height: 300px;
    background-position: center;
    background-size: cover;
    margin: 0 auto;
}

.rooms-content .the-title {
    font-size: 20px;
    font-weight: bold;
}

.rooms-content .sleeps {
    font-size: 14px;
    font-style: italic;
    color: #18488f;
    margin-top: -15px;
}

.rooms-content .sleeps p {
    padding-right: 5px;
    padding-top: 4px;
}

.room-content {
    background: #fff;
}

.room-content .room-image-header {
    height: 500px;
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    background-size: cover;
    background-position: center;
    flex-direction: column;
    justify-content: center;
}

.room-content .the-title {
    color: #fff;
    background-color: #000;
    height: 200px;
    padding: 20px;
    display: flex;
    align-items: center;
    font-size: 20px;
    border-bottom: 5px solid #18488f;
}

.room-content .the-title h1 {
    font-size: 24px;
}

.room-content .the-title h1:before {
    content: '';
    display: block;
    width: 75px;
    height: 40px;
    background-image: url(images/mountain.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.room-content .content {
    max-width: 1400px;
    margin: 0 auto;
}

.room-content .top-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 20px;
}

.room-content .top-section .features {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #cd2027;
    min-width: 250px;
    max-width: 100%;
}

.room-content .top-section .description {
    max-width: 800px;
    margin: 0 20px 0 50px;
}

.room-content .top-section .floor-plan {
    min-width: 250px;
    max-width: 100%;
    padding: 20px;
}

.room-content .sleeps, .room-content .beds, .room-content .room, .room-content .summer-rate, .room-content .winter-rate {
    display: flex;
    align-items: center;
    text-align: center;
    padding: 10px 0;
}

.room-content .sleeps p, .room-content .beds p, .room-content .summer-rate p, .room-content .winter-rate p {
    margin: 0;
    padding-right: 5px;
}

.room-content .top-section .winter-rate-content, .room-content .top-section .summer-rate-content {
    display: flex;
    flex-wrap: wrap;
}

.room-content .fas,
.room-content .far,
.room-content .fa {
    margin-right: 5px;
    width: 20px;
}

.room-content .middle-section {
    display: flex;
    align-items: center;
}

.room-content .middle-section .amenity-title {
    text-align: center;
}

@media only screen and (max-width: 1200px) {
    .room-content .middle-section {
        flex-direction: column;
    }

    .room-content .room-amenities {
        display: flex;
    }

    .room-content .room-amenities > div {
        width: 50%;
    }
}

@media only screen and (max-width: 1020px) {
    .room-content .top-section .features {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .room-content .top-section .features > div {
        margin: 0 20px;
    }

    .room-content .top-section {
        flex-direction: column;
    }
}

@media only screen and (max-width: 820px) {
    .room-content .room-amenities > div {
        width: 100%;
    }

    .room-content .room-amenities {
        flex-direction: column;
    }
}

@media only screen and (max-width: 500px) {
    .room-content .top-section .features {
        flex-direction: column;
        margin-bottom: 20px;
    }
}

/* Rooms Shortcode */

.rooms-list {
    max-width: 1060px;
    margin: 10px auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.rooms-list .rooms-content {
    margin: 20px;
}

.rooms-list .rooms-content h2 {
    margin: 0;
    padding: 0;
}

.rooms-list .rooms-content a {
    text-decoration: none;
    color: #000;
}

h2.explore {
    text-align: center;
    background: #18488f;
    color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: 30px;
}

/* Slick Styles */

.room-gallery {
    text-align: center;
    width: 600px;
    margin: 0 auto;
    max-width: 100%;
}

.slider-for .slick-slide img {
    height: 400px;
    width: auto;
    text-align: center;
    margin: 0 auto;
}

.slider-nav {
    margin-top: 10px;
}

.slick-slider button.slick-prev,
.slick-slider button.slick-next {
   background: none;
   border: none;
   color: transparent;
   position: absolute;
   z-index: 999;
   padding: 0;
   margin: 0;
}
 
.slick-slider button.slick-prev {
       top: 45%;
       left: 20px;
}

.rooms-list-slider.slick-slider button.slick-prev {
    left: 0;
}
 
.slick-slider button.slick-next {
       top: 45%;
       right: 20px;
}

.rooms-list-slider.slick-slider button.slick-next {
    right: 0;
}

.slick-slider button.slick-prev:before {
   content: "\f341";
   font-family: 'dashicons';
   color: #bf301a;
   font-size: 40px;
}
 
.slick-slider button.slick-next:after {
   content: "\f345";
   font-family: 'dashicons';
   color: #bf301a;
   font-size: 40px;
}

ul.slick-dots {
	text-align: center;
    margin: 10px 0;
    padding: 5px;
}

ul.slick-dots li {
	list-style-type: none;
	display: inline-block;
}

ul.slick-dots button {
	text-indent: -9999px;
	background: transparent;
	border: 2px solid #a02f3e;
	border-radius: 100%;
	padding: 0;
	height: 15px;
	width: 15px;
	margin: 0 3px;

}

ul.slick-dots button:hover {
	background: #a02f3e;
}

ul.slick-dots li.slick-active button {
	background: #fff;
}

@media only screen and (max-width: 600px) {
    .slider-for .slick-slide img {
        height: 200px;
    }
}


/* Amenities Shortcode */

ul.property-amenities {
    margin: 0;
    padding: 0;
}

ul.property-amenities li {
    list-style-type: none;
    font-size: 16px;
    margin: 10px;
}

ul.property-amenities li .icon {
    margin-right: 10px;
}

/* Home Page */

.home-video .overlay-content h1 {
    line-height: 1;
    color: #fff;
    margin-bottom: 0;
    padding-bottom: 0;
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: 60px;
}

.home-video .overlay-content h2 {
    margin-top: 5px;
    padding-top: 0;
    font-family: 'Pathway Gothic One', sans-serif;
}

.home-page-content .rooms-section {
    max-width: 1060px;
    margin: 60px auto;
}

.rooms-list-slider .room-header {
    margin: 0 auto;
}

.rooms-list-slider .rooms-content {
    text-align: center;
}

.home-page-content .rooms-section .rooms-content .sleeps {
    margin-top: 0;
}

.home-page-content .rooms-section .rooms-content a {
    text-decoration: none;
}

.home-page-content .notices {
    background: #0096a4;
    padding: 20px 10px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.home-page-content .notices .notice {
    margin: 10px;
}

.home-page-content .home-row.white {
    background: #fff;
}

.home-page-content .image-content-section {
    padding: 20px;
    display: flex;
    max-width: 1060px;
    margin: 0 auto;
    align-items: center;
}

.home-page-content .image-content-section > div {
    width: 50%;
    margin: 20px;
}

.home-page-content .image-content-section .image-section {
    height: 400px;
    background-size: cover;
    background-position: center;
}

.home-page-content .image-content-section h2 {
    color: #cd2027;
}

.home-page-content .image-separator {
    background-size: cover;
    background-position: center;
    height: 400px;
    background-attachment: fixed;
}

.home-video {
    position: relative;
    height: 400px;
    overflow: hidden;
}

.home-video video {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: 1;
}

.home-video .overlay-content {
    position: absolute;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

@media only screen and (max-width: 900px) {
    .home-page-content .image-content-section {
        flex-direction: column;
    }

    .home-page-content .image-content-section > div {
        width: 100%;
    }

    .home-page-content .image-content-section .image-section {
        height: 300px;
    }

    .home-page-content .image-separator {
        height: 300px;
    }
}

@media only screen and (max-width: 740px) {
    .home-video {
        height: 250px;
    }

    .home-video .overlay-content h1 {
        font-size: 30px;
        line-height: 1;
    }
}

.single-product .woocommerce div.product {
    background: #fff;
    padding: 40px;
    margin: 0 auto;
    max-width: 1050px;
}

.related.products h2 {
    text-align: center;
    color: #18488f;
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: #cd2027;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background-color: #18488f;
}