/*!
Theme Name:   Golden Hind
Author:       Web Arts Guys
Author URI:   https://web-arts.bg
Description:  This is the main WP Theme for Golden Hind. The theme is created and customized for Golden Hind and meets their requirements at highest level.
Version:      1.1
Requires PHP: 7.0.0
License:      Private
Text Domain:  GoldenHindTheme
Tags:         GoldenHind, Golden, Hind Customized, WebArtsGuys
*/

/* --- Global variables --- */
:root{
	--primary-color: #c5cfb9;  /* #ffeabb */
	--secondary-color: #1b2917;
	--third-color: #b19c6f;  /* #998C70 */
	--gray-color: #8f8f8f;
	--swiper-theme-color: #2275BC;
	--borderWidth: 2px;
  }

/* --- Reset settings --- */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
table { border-collapse: collapse; border-spacing: 0;}

/* --- General settings --- */
html, body {min-height: 100%; scroll-behavior: smooth; font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;}
body{margin: 0; padding: 0; color: var(--secondary-color) ; background: var(--primary-color);}
html, body, p{font-weight: 400;}

h1 {font-size: 1.95em; line-height: 1.25em; margin: 0.67em 0;}
h2 {font-size: 1.65em; line-height: 1.25em; margin: 0.83em 0; font-weight: 700;}
h3 {font-size: 1.30em; line-height: 1.25em; margin: 1.00em 0; font-weight: 700;}
h4 {font-size: 1.15em; line-height: 1.25em; margin: 1.33em 0; font-weight: 700;}
h5 {font-size: 0.75em; line-height: 1.25em; margin: 0.67em 0; font-weight: 700;}
h6 {font-size: 0.55em; line-height: 1.25em; margin: 0.67em 0; font-weight: 700;}

a{margin: 0; font: inherit; color: inherit; text-decoration: none; z-index: 3;} 
/* ul{padding: 0; list-style: none;} */
figure {margin: 0;}
figcaption{font-size: 0.85em;}

input, select, option{font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;}

/* .main{min-height: 76vh;} */
.narrow{margin: 0 auto; width: 92%; max-width: 1340px;}
.slim{margin: 0 auto; width: 92%; max-width: 1140px;}
.flexrow{display: flex; justify-content: space-between;}
.gridflow{display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 15px 2%;}
.section{margin: 6em auto;}
.sectionPadding{padding: 5em 0; margin: 0 auto;}
.anime{opacity: 0;}
/* 	color: var(--primary-color); background: var(--secondary-color); 
background: var(--primary-color); border: 2px solid var(--secondary-color); color: var(--secondary-color);	*/
.button{position: relative; padding: 10px 20px; display: inline-block; color: var(--third-color); background: var(--secondary-color); text-transform: uppercase; font-size: 0.75em; letter-spacing: 0.6px; font-weight: 500; margin-top: 15px; transition: 0.2s all; border: 2px solid var(--secondary-color); border-radius: 0.5em;}
.button:hover{background: var(--third-color); border: 2px solid var(--third-color); color: var(--secondary-color);}

.underlinedTitle{text-transform: uppercase;}
.underlinedTitle:after{content: ''; display: block; background-color: var(--secondary-color); width: 90%; max-width: 130px; height: 5px;}
.center{text-align: center;} 
.center .underlinedTitle, 
.center .underlinedTitle:after{margin: 5px auto; text-align: center;}
.swiper-wrapper{padding-bottom: 35px;}
.overlay{position: relative;}
.overlay .narrow{position: relative; z-index: 2;}
.overlay:before{content: ''; position: absolute; background: var(--secondary-color); opacity: 0.6; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}


.parallax{background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;}
.img-wrap img{width: 100%; height: 100%; object-fit: cover;}

/* === jQuery Datepicker === */
.ui-datepicker{width: 15em !important;}
.ui-widget{font: inherit !important; font-size: 0.8em !important;}

/* === Custom select === */
.custom-select{position: relative; height: 55px;}
.custom-select select{appearance: none; width: 100%; background-color: #fff; color: var(--secondary-color); cursor: pointer;}
.custom-select::before,
.custom-select::after {--size: 0.2em; content: ""; position: absolute; right: 15px; pointer-events: none;}
.custom-select::before {border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-bottom: var(--size) solid var(--secondary-color); top: 40%;}
.custom-select::after{border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-top: var(--size) solid var(--secondary-color); top: 55%;}

/* === Global Gallery === */
.gallery{display: grid; grid-gap: 20px; grid-auto-rows: 1fr;}
.gallery .gallery-item{overflow: hidden;}
.gallery .gallery-item img{width: 100%; max-height: 350px; object-fit: cover; border-radius: 5px;}
.gallery-columns-2{grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));}
.gallery-columns-3{grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));}
.gallery-columns-4{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));}
.gallery-columns-5{grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}
#single .gallery-columns-3 .gallery-item a{position: relative; display: block; height: 240px;}

/* === Global Form === */
.globalForm {display: flex; flex-flow: column; justify-content: space-between;}
.globalForm .input{margin: 10px 0; padding: 1em 0 0.9em 1.2em; font: inherit; font-size: 0.8em; outline: 0; border: 0; border-radius: 5px;}
.globalForm .message{resize: vertical;}
.globalForm .submit{display: flex; align-items: center; justify-content: center; margin: 10px 0 0; padding: 1em 0 0.9em 1.2em; cursor: pointer; font-weight: 500; border: 2px solid var(--secondary-color);}
.globalForm .submit:hover{border: 2px solid var(--third-color);}
.globalForm .response{flex: 0 0 100%; margin-bottom: 15px; font-size: 0.7em;}
.globalForm .response.error{border-left: 5px solid #f00; padding: 7px 16px; background: #fff; color: #1e1e1e;}
.globalForm .response.success{border-left: 5px solid #0f0; padding: 7px 16px; background: #fff; color: #1e1e1e;}

/* === Header === */
#header{width: 100%; margin: 0; font-size: 0.8em; position: fixed; top: 0; left: 0; right: 0; z-index: 10; padding: 10px 0; transition: 0.3s all;}
#header .headerBar{align-items: center;}
#header.scrolled{background: var(--primary-color);} 
#header{background: rgba(197,207,185,0.9); /* background: rgba(0,0,0,0.5); */}
#header .logo{height: 90px; transition: 0.3s all;}
#header.scrolled .logo{height: 70px;}
#header .logo img{width: auto;}

#nav{display: flex; justify-content: space-between; align-items: center;}
#nav.mobile{display: none;}
#nav .menu{display: flex; justify-content: space-between; align-items: center; list-style-type: none; margin: 0; padding: 0; flex-flow: row nowrap;}
#nav .menu .menu-item{flex-grow: 1; text-align: center; margin: 5px; transition: all 0.3s ease-out; color: var(--secondary-color); position: relative;}
#nav .menu .menu-item a{display: block; text-decoration: none; font-weight: 500; letter-spacing: 0.5px; color: inherit; padding: 15px 8px;}
#nav .menu .menu-item:hover,
#nav .menu .menu-item.current-menu-item{color: var(--third-color);}
#nav .menu .first-menu-item{margin-left: 0;}
#nav .menu .last-menu-item{margin-right: 0;}


#nav .menu-item .sub-menu{display: none; border-left: 2px solid var(--third-color); overflow: hidden; position: absolute; left: 5px; top: 100%; flex-flow: column; list-style-type: none; padding: 0; z-index: 11;}
#nav .menu-item .sub-menu a{padding: 5px 8px;}
#nav .menu-item:hover .sub-menu{display: flex; background: var(--primary-color); /* rgba(197,207,185,0.9) */}
#nav .sub-menu .menu-item{text-align: left;}

	/* --- Hamburger --- */
#hamburger{display: none; background: none; outline: 0; border: 0; border-top: 5px solid var(--secondary-color); border-bottom: 5px solid var(--secondary-color); width: 46px; height: 34px; position: relative; font-size: 0px; color: #080357; transition: border 0.1s ease-out; z-index: 10; cursor: pointer;}
#hamburger:before, #hamburger:after{content: ''; display: block; width: 100%; height: 5px; position: absolute; top: 50%; left: 50%; background: var(--secondary-color); transform: translate(-50%, -50%); transition: transform 0.3s ease; z-index: 120;}
#hamburger.active:before{transform: translate(-50%, -50%) rotate(45deg); transition-delay: 0.2s; }
#hamburger.active:after{transform: translate(-50%, -50%) rotate(-45deg); transition-delay: 0.2s; }
#hamburger.active{border: unset;}


/* --- Intro --- */
#intro{position: relative;}
#intro .introImage{position: relative; height: 90vh; overflow: hidden;}
#intro .introImage .kenburns-top.active{opacity: 1;}
#intro .textContainer{width: 860px; width: 45%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; background: rgba(197,207,185, 0.8); border-radius: 50px; padding: 50px; border-radius: 100px 20px; z-index: 1;}
#intro .textContainer.active{opacity: 1;}
#intro .textContainer .slogan{font-size: 1.2em; font-weight: 400; margin: 10px 0;}

/* === Reservation Form Global === */
#reservationForm{display: flex; justify-content: center; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 1; gap: 30px; width: 92%; max-width: 1340px;}
#reservationForm input{flex-basis: 12%; width: 100%; min-width: 105px;}
#reservationForm .custom-select.accommodation{flex-basis: 20%; min-width: 230px;}
/* #reservationForm .custom-select.guests{flex-basis: 15%;} */

/* #reservationForm .custom-select.accommodation{width: 20%;} */
/* #reservationForm input.datepicker{width: 10%;} */

#reservationForm input,
#reservationForm select{height: 55px; padding: 0 15px; font: inherit; font-size: 0.9em; outline: 0; background: transparent; border: 1px solid var(--secondary-color); color: var(--secondary-color); border-radius: 0.25em; box-sizing: border-box; font-weight: 500;}
#reservationForm select{height: 100%; margin-right: 20px;}
#reservationForm .custom-select::after {--size: 0.2em; content: ""; position: absolute; right: 15px; pointer-events: none;}
#reservationForm .custom-select::before {border-bottom: var(--size) solid var(--primary-color); top: 40%;}
#reservationForm .custom-select::after{border-top: var(--size) solid var(--primary-color); top: 55%;}
#reservationForm .button{height: 55px; margin: 0; padding: 0 20px; border: 0; font-size: 0.8em; display: flex; align-items: center; box-sizing: border-box;}

#frontPage #reservationForm .custom-select::before {border-bottom: var(--size) solid var(--secondary-color); top: 40%;}
#frontPage #reservationForm .custom-select::after{border-top: var(--size) solid var(--secondary-color); top: 55%;}


.containerGradient::before{content: '';  position: absolute; background: var(--primary-color); z-index: 1;}
/* .containerGradient.left::before{background: rgba(170,139,75,0.4); left: 0; height: 100%; width: 80%; background: -webkit-gradient(linear, right top, left top, from(rgba(170,139,75,0.9)), to(rgba(0,0,0,0))); background: linear-gradient(90deg, rgba(170,139,75,0.9) 40%, rgba(0,0,0,0) 100%);} */
/* .containerGradient.bottom::before{background: rgba(170,139,75,0.9); left: 0; height: 100%; width: 100%; background: -webkit-gradient(linear, right top, left top, from(rgba(170,139,75,0.9)), to(rgba(0,0,0,0))); background: linear-gradient(0deg, rgba(170,139,75,0.9) 10%, rgba(0,0,0,0) 50%);} */
.containerGradient.bottom::before{background: rgba(1197,207,185, 0.9); left: 0; height: 100%; width: 100%; background: -webkit-gradient(linear, right top, left top, from(rgba(197,207,185,1)), to(rgba(0,0,0,0))); background: linear-gradient(0deg, rgba(197,207,185,1) 0%, rgba(0,0,0,0) 50%);}

/* #intro .logo{position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); height: 200px; z-index: 2; max-width: 100%;} */
/* #intro .logo img{width: auto; max-width: 100%; object-fit: contain;} */

#smallIntro{display: flex; height: 75vh; background-position: center; background-repeat: no-repeat; background-size: cover; color: var(--primary-color);}
#smallIntro .wrapper{display: flex; flex-flow: column; justify-content: flex-end; margin: 15px auto;}
#smallIntro .underlinedTitle:after{background-color: var(--primary-color);}
#smallIntro .wrapper .subtitle{font-size: 1em; max-width: 780px; font-weight: inherit;}

#smallIntro .underlinedTitle,
#smallIntro .wrapper .subtitle,
#smallIntro #breadcrumbs a{color: #fff; text-shadow: 1px 0 10px #000;}
#smallIntro .underlinedTitle:after{background-color: #fff;}




/* === Breadcrumbs === */
#breadcrumbs{display: flex; flex-flow: row wrap; list-style: none; padding: 10px 0 0; font-size: 0.8em; text-transform: uppercase;}
#breadcrumbs a{color: var(--primary-color);}
/* #breadcrumbs a:hover{color: var(--third-color);} */
#breadcrumbs a:hover{color: #dedede;}
#breadcrumbs .chunk{display: inline; vertical-align: top;}
#breadcrumbs .chunk:last-child a{color: #dedede;}
/* #breadcrumbs .chunk:last-child a{color: var(--third-color);} */
#breadcrumbs .separator{padding: 0 10px; font-size: 26px; line-height: 10px; vertical-align: top;}
#breadcrumbs img.separator {transform: rotate(+90deg); width: 13px; height: auto; filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(262deg) brightness(104%) contrast(103%);}


/* === Pagination === */
.postPagination{margin: 70px auto 0; display: flex; flex: 0 0 100%; justify-content: center;}
.postPagination .page-numbers{display: flex; justify-content: space-between; width: 4vh; height: 4vh; align-items: center; justify-content: center; font-size: 1em; font-weight: 700; transition: 0.2s all ease-in-out; background: #454545; margin: 0 2px;}
.postPagination .page-numbers:hover{background: var(--secondary-color);}
.postPagination .page-numbers.current{background: var(--secondary-color);}

/* --- Article sharer --- */
.sharer{margin: 45px auto 60px; max-width: 980px; border-top: 1px solid var(--third-color); border-bottom: 1px solid var(--third-color); }
.sharer .list{list-style-type: none; display: flex; justify-content: center; flex-flow: row nowrap; padding: 10px 0; }
.sharer .list .item{display: inline; margin: 0 1%;}
.sharer .list .item .dashicons:before{font-size: 28px; width: 28px; height: 28px;}
.sharer .list .item a{color: var(--third-color); text-decoration: none; padding: 10px; }
.sharer .list .sms{display: none;}
.sharer .list .fb a:hover{color: #1877F2;} 
.sharer .list .tw a:hover{color: #1da1f2;} 
.sharer .list .li a:hover{color: #0077B5;} 
.sharer .list .wa a:hover{color: #25D366;} 
.sharer .list .ml a:hover{color: #0489c9;} 
.sharer .list .ig a:hover{color: #833AB4;} 
.sharer .list .yt a:hover{color: #ff0000;} 
.sharer .list .sms a:hover{color: #0084ff;}


/* --- Icon list with description --- */
.iconList{list-style: none; margin: 50px auto; padding: 0; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 25px 5%;}
.iconList .item{flex: 0 0 30%; display: flex; flex-flow: column; align-items: flex-start;}
.iconList .item .icon{height: 35px; width: auto; margin-bottom: 15px;}
.iconList .item .title{font-size: 1em;  margin-right: auto;}
.iconList .item .desc{font-size: 0.9em;}
.iconList .item br{display: none;}


/* --- Sections with image background --- */
.imageBackground{position: relative; min-height: 60vh;}
.imageBackground .title{margin: 15px auto;}
.imageBackground .containerImage{position: absolute; top: 0; left: 0; width: 55%; /* 60% */ height: 100%; box-sizing: border-box;}
.imageBackground .wrapper{position: relative; z-index: 3; width: 40%; height: 60vh; display: flex; flex-flow: column; justify-content: center;}


/* --- Counter Section --- */
.counter{background: var(--secondary-color); color: var(--third-color);}
.counter .underlinedTitle:after{background: var(--third-color);}

#counter{margin-bottom: 0;}
#counter .box{display: flex; flex-flow: column; justify-content: center; align-items: center;}
#counter .box .digit{font-size: 2.5em; font-weight: 900;}
#counter .box .text b{display: block; text-transform: uppercase; font-size: 1.3em;}

/* --- Accents Section --- */
#frontPage .accents {background: var(--secondary-color); color: var(--third-color);}
#frontPage .accents .underlinedTitle:after{background: var(--third-color);}
#accents{margin: 3em auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 30px 4%;}
#accents .item{display: flex; flex-flow: column; text-align: left;}
/* #accents .item{display: flex; flex-flow: column; align-items: center; flex: 0 0 22%; text-align: left;} */
#accents .item .title{font-weight: 700; text-transform: uppercase; margin-bottom: 0.6em;}
#accents .item .icon{max-width: 96px; height: auto; object-fit: contain; text-align: justify;}
#frontPage #accents .item .icon{filter: invert(64%) sepia(35%) saturate(349%) hue-rotate(3deg) brightness(92%) contrast(88%);}
#accents .item .text{font-size: 0.9em; margin: 0;}


/* --- Offers Section --- */
#frontPage .text.small{max-width: 850px; margin: 1em auto;}


/* --- Accommodation Section --- */
.section.accommodations{flex-flow: row wrap; gap: 5em;}
.section.accommodations .article{flex: 0 0 100%;}
.section.accommodations .article.even{flex-flow: row-reverse;}
.section.accommodations .priceRibbon{position: absolute; left: 5%; top: 5%; display: flex; align-items: baseline; background: var(--third-color); color: var(--secondary-color); padding: 5px 15px; border-radius: 0.4em; font-size: 0.7em;}
.section.accommodations .article.even .priceRibbon{right: 5%; left: unset;}
.section.accommodations .priceRibbon span{margin-left: 5px; margin-right: 1px; font-size: 1.2em; font-weight: 500;}

.section.accommodations .imageContainer{flex-basis: 55%;}
.section.accommodations .imageContainer img{width: 100%; height: auto; border-radius: 100px 20px;}
.section.accommodations .textContainer{flex-basis: 40%; align-self: center; text-align: left;}
.section.accommodations .textContainer .button{margin-top: 2em;}
.section.accommodations .textContainer .icons,
#single.accommodation .intro .wrapper .textContainer .icons{display: flex; gap: 15px;}
.section.accommodations .textContainer .icons .icon,
#single.accommodation .intro .wrapper .textContainer .icons .icon{height: 1.2em; margin-right: 5px;}

/* --- Testimonials Section --- */
#reviews{background-position: center; background-repeat: no-repeat; background-size: cover; padding: 4em 0; margin-bottom: 0;}
#reviews:before{opacity: 0.5;}
#reviews .button{z-index: 3;}
#reviews .title{color: #fff; position: relative; z-index: 3; margin: 10px auto; text-shadow: 1px 0 10px #000}
#reviews .title:after{background-color: #fff;}
#reviews .googleReviews{z-index: 2; margin-top: 2.5em;}
#reviews .googleReviews .wp-gr:not(.wp-dark) .grw-review-inner.grw-backgnd{background: rgba(197,207,185, 0.7) !important;}

/* #reviews .title{color: var(--primary-color); position: relative; z-index: 3; margin: 10px auto;}
#reviews .title:after{background-color: var(--primary-color);}
#reviews .reviewsSlider{margin: 15px auto 10px; color: var(--primary-color); overflow: hidden;}
#reviews .reviewsSlider .item{display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; min-height: 260px;}
#reviews .reviewsSlider .item .text{ width: 70%; margin: 10px 0 35px; text-align: center; font-size: 24px;}
#reviews .reviewsSlider .item .text blockquote{margin: 0;}
#reviews .reviewsSlider .item .text .signature{margin-top: 25px; font-size: 16px;}
#reviews .reviewsSlider .swiper-button-next,
#reviews .reviewsSlider .swiper-button-prev {color: var(--primary-color); top: 40%;}
#reviews .reviewsSlider .swiper-pagination-bullet-active {background: var(--primary-color);} */


/* --- Subscribe Section --- */
#frontPage .subscribe{margin: 5em auto 3em;}
#frontPage .subscribe .desc{max-width: 70%; margin: 1em auto;}
#frontPage .subscribe input{font-size: 0.75em;}
#frontPage .subscribe .tnp-email{outline: none;}
#frontPage .subscribe .tnp-submit{background: var(--secondary-color); margin: 0 auto; padding: 8px 16px;}
#frontPage .subscribe .tnp-submit:hover{background: var(--primary-color);}


/* --- Post Aricles --- */
.section.news .button{display: block; width: fit-content; margin: 30px auto;}

.gridflow.singles{margin: 4em auto;}
.gridflow.singles .article{align-items: flex-start; text-align: left;}
.gridflow.singles .article .imageContainer{height: 300px; width: 100%;  position: relative; overflow: hidden;}
.gridflow.singles .article .textContainer{display: flex; flex-flow: column; flex-grow: 1; margin: 15px 0;}
.gridflow.singles .article .title{margin: 0 0 auto 0; font-size: 1.2em; transition: 0.3s color;}
.gridflow.singles .article:hover .title{color: var(--secondary-color);}
.gridflow.singles .article .date{font-size: 0.8em; margin: 5px 0;}
.gridflow.singles .article .underlinedButton{display: block; width: fit-content; margin-top: auto;}

#single li{line-height: 1.5em;}

/* --- Page Global--- */
#page a,
#single .content a{color: #2c5200;}

/* === Archive: Post & Home Page Articles === */
.gridflow.post .article{overflow: visible;}
.gridflow .article{position: relative; display: flex; flex-flow: column; align-items: center; overflow: hidden;}
.gridflow .article .image{width: 100%; height: 100%; object-fit: cover; transition: 0.3s all; border-radius: 10px 50px;}
.gridflow .article:hover .image{transform: scale(1.1);}

/* === Home Page === */
#home .featuredOffer .wrapper{display: flex; gap: 30px;}
#home .featuredOffer .img-wrap{flex: 0 0 45%;}
#home .featuredOffer .img-wrap img{border-radius: 50px 10px;}
#home .latest .underlinedTitle{text-align: center;}
#home .latest .underlinedTitle:after{margin: 0 auto;}


/* === Archive: Accommodations === */ 

#bookBanner{min-height: 50vh; display: flex; flex-flow: column; align-items: center; justify-content: center; gap: 50px; z-index: 2;}
#bookBanner.noMargin{margin-bottom: 0;}
#bookBanner .underlinedTitle{flex-basis: 100%; color: var(--primary-color); z-index: 2;}
#bookBanner .underlinedTitle:after{background: var(--primary-color);}
#bookBanner #reservationForm{position: relative; bottom: unset; left: unset; transform: none; justify-content: center;}
#bookBanner #reservationForm .input{border: 1px solid var(--primary-color); color: var(--primary-color);}
#bookBanner #reservationForm select option{color: var(--secondary-color);} 
#bookBanner #reservationForm select option:nth-child(1){color: var(--gray-color);}
/* #bookBanner #reservationForm .button{background: var(--primary-color); border: 1px solid var(--secondary-color); color: var(--secondary-color);}
#bookBanner #reservationForm .button:hover{background: var(--secondary-color); border: 1px solid var(--primary-color); color: var(--primary-color);} */
/* #bookBanner #reservationForm input.datepicker::placeholder{color: var(--primary-color);} */
#bookBanner #reservationForm .button{background: var(--third-color); border: 1px solid var(--third-color); color: var(--secondary-color);}
#bookBanner #reservationForm .button:hover{background: var(--secondary-color); border: 1px solid var(--secondary-color); color: var(--third-color);}

#bookBanner ::-webkit-calendar-picker-indicator{filter: invert(87%) sepia(14%) saturate(240%) hue-rotate(45deg) brightness(92%) contrast(91%);}

.section.accents.accommodation .desc.small{width: 92%; max-width: 850px; margin: 1em auto 3em;}
#accents.accommodation{grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));}
#accents.accommodation .item{align-items: center; text-align: center;}
#accents.accommodation .item .title{font-size: 1em;}


/* === Single: Accommodation === */
#single.accommodation #breadcrumbs{padding-top: 3em;}
#single.accommodation #breadcrumbs a{color: var(--secondary-color);}
#single.accommodation #breadcrumbs a:hover,
#single.accommodation #breadcrumbs li:last-child a{color: #2c5200;}
#single.accommodation #breadcrumbs img.separator{filter: invert(64%) sepia(35%) saturate(349%) hue-rotate(3deg) brightness(92%) contrast(88%);}
/* #single.accommodation #breadcrumbs li:last-child a{color: #8a937f;} */
/* #single.accommodation #breadcrumbs img.separator{filter: invert(11%) sepia(45%) saturate(493%) hue-rotate(61deg) brightness(94%) contrast(92%);} */
#single.accommodation .intro .wrapper{display: flex; justify-content: space-between;}
#single.accommodation .intro .wrapper .left{flex: 0 0 55%;}
#single.accommodation .intro .wrapper .right{flex: 0 0 40%; align-self: center;}
#single.accommodation .intro .wrapper .img-wrap img{border-radius: 10px;}
#single.accommodation .intro .wrapper .textContainer .title{font-size: 1.6em;}
#single.accommodation .intro .wrapper .textContainer .subtitle{font-size: 1.1em; font-weight: 400; margin-bottom: 2em;}
#single.accommodation .intro .wrapper .textContainer .icons{flex-flow: column;}
#single.accommodation .intro .wrapper .textContainer .button{margin-top: 2em;}

#single.accommodation .recent .article .textContainer .icons{display: flex; gap: 20px;}
#single.accommodation .recent .article .textContainer .icons .icon{height: 1.2em; margin-right: 5px;}
#single.accommodation .recent .article .textContainer .title{margin-top: 0.5em;}


/* --- Page Global --- */
#page ol, #page ul{line-height: 1.5em; padding-inline-start: 30px;}
#page ol li{margin: 1em 0; font-size: 0.9em}



/* --- About us Page --- */
/* #page.about .gallery {column-count: 4; column-gap: 10px; row-gap: 0; margin: 3em 0} */
/* #page.about .gallery .gallery-item {margin: 0 0 10px; display: grid; text-align: center; grid-template-rows: 1fr auto; break-inside: avoid} */
#page.about .gallery .gallery-item {display: grid;}
/* #page.about .gallery .gallery-item img {grid-row: 1/-1; grid-column: 1; max-width: 100%; object-fit: cover} */

/* === Reservation Page === */
#page.reservation ::-webkit-calendar-picker-indicator{margin-right: 10px;}
#page.reservation #bookingForm{flex-flow: row wrap; justify-content: space-between;}
#page.reservation #bookingForm .input{flex: 0 0 48%; box-sizing: border-box;}
#page.reservation #bookingForm .requirements{flex-basis: 100%;}
#page.reservation #bookingForm .submit{flex: 0 0 auto; padding: 10px 20px}
#page.reservation #bookingForm .custom-select{flex: 0 0 48%; box-sizing: border-box; height: 100%;}




/* === Contacts Page === */
#contactPage .contactInfo {display: flex; flex-flow: row wrap; justify-content: space-between;}
#contactPage .contactInfo .article{display: flex; flex-flow: column; align-items: center; line-height: 1.5em;}
/* #contactPage .contactInfo .article .dashicons{width: auto; height: 50px; font-size: 3em; color: var(--secondary-color);} */
#contactPage .contactInfo .article .icon{width: auto; height: 50px; font-size: 3em; color: var(--secondary-color);}
#contactPage .contactInfo .article .title{text-transform: uppercase;}
#contactPage .contactInfo .article .text{max-width: 260px;}

#contactPage .mapForm{display: flex; justify-content: space-between; gap: 2%;}
#contactPage .mapForm .item.left{flex: 0 0 45%; text-align: right; box-sizing: border-box;}
#contactPage .mapForm .item.right{flex: 0 0 45%;}
#contactPage .mapForm .item.left .desc{margin-bottom: calc(1em + 40px);}
#contactPage .mapForm .item.left .video{position: relative; aspect-ratio: 16 / 9; width: 100%;}
#contactPage .mapForm .item.left iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#contactPage .mapForm .item.left .underlinedTitle:after{margin-left: auto;}
#contactPage .mapForm .item .title{margin: 0.5em 0;}


.mapFullWidth{width: 100%; height: 50vh;}
.mapFullWidth iframe{width: 100%; height: 100%;}


/* --- 404 Page --- */
#errorPage{display: flex; flex-flow: column; text-align: center; min-height: unset; padding: 5% 0 7%;}
#errorPage .digits{display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;}
#errorPage .digits .errorText{font-size: 19vw; line-height: 0; margin: 0 3%; text-align: justify;}
#errorPage .digits .null{height: 13vw; object-fit: contain;}


/* Footer */
/* #footer{padding: 40px 0; background: var(--secondary-color); color: var(--primary-color);} */
#footer{padding: 40px 0; background: var(--primary-color); color: var(--secondary-color);}

#footer a{transition: 0.3s color; color: inherit;}
#footer a:hover{color: var(--third-color)}
#footer .credit a{color: var(--third-color);}
/* #footer .credit a:hover{color: var(--primary-color);} */
#footer .credit a:hover{color: var(--secondary-color);}
#footer .rowF{display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-end;}
/* #footer .rowF:after{content: ''; display: block; width: 100%; height: 1px; background: var(--primary-color); margin: 20px 0;} */
#footer .rowF:after{content: ''; display: block; width: 100%; height: 1px; background: var(--secondary-color); margin: 20px 0;}
#footer .rowF:before{content: ''; display: block; width: 100%; height: 1px; background: var(--secondary-color); margin: 20px 0;}
#footer .slogan{font-weight: 500;}
#footer .logo{display: flex; flex-flow: column;}
#footer .img-wrap{width: 150px;}
#footer .img-wrap img{object-fit: contain;}
#footer .socialNetworks{display: flex; justify-content: flex-start;}
#footer .socialNetworks .dashicons{width: 28px; height: 28px; padding: 15px; font-size: 28px;}
#footer .fNav{flex: 1 0 100%;}
#footer .fNav ul{display: flex; justify-content: flex-end; margin: 0; padding: 0;}
#footer .fNav ul .dashicons-before{font-size: 1em;}
/* #footer .fNav ul li{display: flex; gap: 10px; align-items: center; border-right: 1px solid var(--primary-color); padding-right: 1vw; margin-right: 1vw;} */
#footer .fNav ul li{display: flex; gap: 10px; align-items: center; border-right: 1px solid var(--secondary-color); padding-right: 1vw; margin-right: 1vw;}
#footer .fNav ul li:last-child{border: none; padding: 0; margin: 0;}
#footer .fNav li a{line-height: 1em; font-size: 16px;}
#footer .fInfo{display: flex; justify-content: space-between; letter-spacing: 0.5px;}
#footer .fInfo .cpr{display: flex; align-items: center; margin: 0 0 15px; flex-grow: 1;}
#footer .fInfo .cprText{margin: 0 1vw 0 0; line-height: 1em; font-size: initial;}
/* #footer .fInfo .sepr{font-size: initial; border-left: 1px solid var(--primary-color); padding: 2px 1vw 0; line-height: 1em;} */
#footer .fInfo .sepr{font-size: initial; border-left: 1px solid var(--secondary-color); padding: 2px 1vw 0; line-height: 1em;}
#footer .fInfo .credit{font-size: initial; margin: 0;}

#performance{font-size: 12px;}

/* --- Responsive design ---*/

@media screen and (max-width:1340px){
	.gallery-columns-4 {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}

}

@media screen and (max-width:1024px){
	#header{background: var(--primary-color);}
	#header .logo{height: 70px;}
	#hamburger{display: flex;}
	#nav.headernav{display: none;}
	#nav.mobile{display: flex;}
	#nav{position: absolute; top: 100%; left: 0; transform: translateX(+100%); background: var(--primary-color); transition: all 0.5s ease-in-out; padding: 0 4%; border-radius: 0; width: 100%; margin-left: 0;}
	#nav .menu{flex-flow: column; align-items: flex-start;}
	#nav.active{display: block; transform: translateX(0);}
	#nav .menu .menu-item a{padding: 15px 15px 11px; font-size: 1.2em;}
	#nav .menu .menu-item.about:hover .sub-menu{display: flex; padding: 0;}
	#nav .menu .menu-item:hover .sub-menu{display: none;}

	#intro .textContainer{width: 60%;}
	#reservationForm{flex-flow: row wrap; bottom: 100px; width: 92%;}
	#reservationForm .datepicker,
	/* #reservationForm .custom-select.guests{flex-basis: 20%;} */
	#reservationForm .custom-select.accommodation{flex-basis: 30%;}

	#accents{gap: 50px;}

	#contactPage .contactInfo{gap: 30px;}
	#contactPage .contactInfo .article{flex: 0 0 46%;}
	
	#footer .rowF{flex-flow: column; align-items: center; text-align: center;}
	#footer .socialNetworks{justify-content: center;}
	#footer .fNav ul{flex-flow: column; align-items: center;}
	#footer .fNav ul li{padding: 0; margin: 0; border-right: 0;}
	#footer .fNav ul li a{line-height: 2em;}
	#footer .fInfo{flex-flow: column; text-align: center;}
	#footer .fInfo .cpr{flex-flow: column wrap;}
	#footer .fInfo .sepr{border: 0; padding: 0; line-height: 2em;}
	#footer .fInfo .cprText{line-height: 2em;}
	#footer .fInfo .credit{overflow: hidden;}
}

@media screen and (max-width:1024px) and (orientation:landscape) {
	#intro .textContainer{top: 40%;}
	#reservationForm{bottom: 30px;}
}

@media screen and (max-width:900px){
	.gridflow{gap: 4em;}
	#accents{gap: 80px;}

	#single.accommodation .intro .wrapper{flex-flow: column;}
	#single.accommodation .intro .wrapper .right{align-self: flex-start;}
	#single.accommodation .intro .wrapper .textContainer .subtitle{max-width: 500px; width: 100%;}
	
	#contactPage .mapForm{flex-flow: column; gap: 20px;}
	#contactPage .mapForm .item.left,
	#contactPage .mapForm .item.right{text-align: center;}
	#contactPage .mapForm .item .underlinedTitle:after{margin: 0 auto;}
	#contactPage .mapForm .item.left .video{height: 400px;}
	#contactPage .mapForm .item.left iframe{height: 40vh;}
}


@media screen and (max-width:786px){
	html, body {font-size: calc(16px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));}
	h1 {font-size: 1.65em;}
	.flexrow{flex-flow: row wrap;}
	.button{font-size: 0.9em;}
	#reservationForm{bottom: 30px;}
	/* #reservationForm .datepicker, #reservationForm .custom-select.guests {flex-basis: 25%;} */
	#frontPage #reservationForm .accommodation,
	#frontPage #reservationForm .guests{display: none;}
	.section.accommodations .article,
	.section.accommodations .article.even{flex-flow: column;}	
	#counter{gap: 2.5em 0;}
	#counter .box{flex: 0 0 50%;}
	#home .featuredOffer .wrapper{flex-flow: column-reverse;}

	#page.reservation #bookingForm{flex-flow: column;}
	
}

@media screen and (max-width:600px){
	#intro .textContainer{width: 80%; padding: 25px;}
	#accents .item{text-align: center;}
	#accents .item .text{width: 80%; margin: 0 auto;}
	#accents .item .icon{max-width: 80px;}
	#single .gallery-columns-3 .gallery-item a{height: 350px;}
	.custom-select::before, .custom-select::after, #reservationForm .custom-select::after{--size: 0.3em;}

}

@media screen and (max-width:500px){
	#reservationForm input, #reservationForm .custom-select.accommodation, #reservationForm .custom-select.guests {flex-grow: 1;}
	#reservationForm{justify-content: space-between}
	
	
	.imageBackground .wrapper{width: 100%;}
	#counter .box{flex: 0 0 100%;}
	#contactPage .contactInfo{flex-flow: column;}
	.tnp-subscription input[type=submit], .tnp-profile input[type=submit]{width: auto !important;}
}

@media screen and (max-width:440px){
	#frontPage #reservationForm .button{margin: 0 auto;}
}

@media screen and (max-width:345px){
	.gridflow{overflow: hidden;}
}