/*

Theme Name: Mountain Station 
Theme URI: https://project.studio
Author: Joshua Hall
Author URI: https://project.studio
Description: Custom Theme powered by Project Studio.
Tags: responsive-layout,one-column,two-columns,three-columns,four-columns,left-sidebar,right-sidebar,custom-background,custom-colors,featured-images,full-width-template,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready
Version: 1.01
*/


@font-face {
  font-family: 'GeneralSans-Medium';
  src: url('/wp-content/themes/mountainstation/fonts/GeneralSans-Medium.woff2') format('woff2'),
       url('/wp-content/themes/mountainstation/fonts/GeneralSans-Medium.woff') format('woff'),
       url('/wp-content/themes/mountainstation/fonts/GeneralSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

html {scroll-behavior: smooth; -webkit-font-smoothing: antialiased !important;}
body { margin:0; padding:0 }
::selection {}

/* Structure*/

.container { position: relative; height: 100%; width: 100%;}
.row { height: 100%; position: relative;}
.row-width { width: 80%;  margin: 0 auto;}
.row-width-90 { width: 90%; max-width: 90%; margin: 0 auto;}
.full-width { width: 100%;  margin: 0 auto;}

.absolute-center { position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; height: fit-content; width: fit-content; z-index: 2;}

/* Widths */

.col1{width: 8.33%;}
.col2{width: 16.66%;}
.col2-5{width: 20.00%}
.col3{ width: 25%;}
.col4{width: 33.33%;}
.col5{width: 41.33%;}
.col6{width: 50%; position: relative;}
.col7{width: 58.33%;}
.col8{width: 66.66%;}
.col9{width: 75%;}
.col10{width: 83.88%;}
.col11{width: 91.66%;}
.col12{width: 100%;}

.height-0 { height:0vh; box-sizing: border-box;}
.height-20 { height:20vh;box-sizing: border-box; }
.height-40 { height:40vh;box-sizing: border-box; }
.height-60 { height:60vh;box-sizing: border-box; }
.height-80 { height:80vh;box-sizing: border-box; }
.height-100 { height:100vh; box-sizing: border-box; }
.height-auto { height: auto; }

.flex-row {display: flex;flex-direction: row;}
.flex-column { display: flex; flex-direction: column;}
.justify-center { display: flex; align-items: center; justify-content: center; }
.justify-bottom { justify-content: flex-end;}

.flex-wrap {flex-wrap: wrap}
.align-center  {align-items: center; }
.justify-left {  justify-content: left }
.justify-right { justify-content: right }
.align-top { align-items: flex-start; }
.align-bottom { align-items: flex-end;}
.align-left {  align-items: flex-start }
.align-right {  align-items: flex-end;}
.justify-spaced { justify-content: space-between;}
.text-center { text-align:center;}
.text-right { text-align:right;}
.text-left { text-align:left;}


.padding-0 {padding:0 !important}
.padding-b-0 {padding-bottom: 0px}
.padding-t-0 {padding-top: 0px}
.padding-10 {padding:10px 0}
.padding-b-10 {padding-bottom: 10px}
.padding-t-10 {padding-top: 10px}
.padding-20 {padding:20px 0}
.padding-b-20 {padding-bottom: 20px}
.padding-t-20 {padding-top: 20px}
.padding-40 {padding:40px 0}
.padding-b-40 {padding-bottom: 40px}
.padding-t-40 {padding-top: 40px}
.padding-60 {padding:60px 0}
.padding-b-60 {padding-bottom: 60px}
.padding-t-60 {padding-top: 60px}
.padding-80 {padding:80px 0}
.padding-b-80 {padding-bottom: 80px}
.padding-t-80 {padding-top: 80px}
.padding-100 {padding:100px 0}
.padding-b-100 {padding-bottom: 100px}
.padding-t-100 {padding-top: 100px}
.padding-120 {padding:120px 0}
.padding-b-120 {padding-bottom: 120px}
.padding-t-120 {padding-top: 120px}
.padding-140 {padding:140px 0}
.padding-t-140 {padding-top:140px}
.padding-b-140 {padding-bottom:140px}
.padding-160 {padding:160px 0}
.padding-t-160 {padding-top:160px}
.padding-b-160 {padding-bottom:160px}
.mobile { display:none; }


.gap-0 {gap:0 !important}
.gap-1 {gap:8.33%}
.gap-2 {gap:16.33%}
.gap-10 {gap:10px}
.gap-20 {gap:20px}
.gap-40 {gap:40px}
.gap-60 {gap:60px}
.gap-80 {gap:80px}
.gap-100 {gap:100px}
.gap-120 {gap:120px}
.gap-140 {gap:140px}

.margin-auto { margin:0 auto; }
.margin-0 {margin:0 !important}
.margin-b-0 { margin-bottom: 0; }
.margin-t-0 { margin-top: 0; }
.margin-10 {margin:10px !important}
.margin-b-10 { margin-bottom: 10px; }
.margin-t-10 { margin-top: 10px; }
.margin-20 {margin:20px 0}
.margin-b-20 { margin-bottom: 20px; }
.margin-t-20 { margin-top: 20px; }
.margin-40 {margin:40px 0}
.margin-b-40 { margin-bottom: 40px; }
.margin-t-40 { margin-top: 40px; }
.margin-60 {margin:60px 0}
.margin-b-60 { margin-bottom: 60px; }
.margin-t-60 { margin-top: 60px; }
.margin-80 {margin:80px 0}
.margin-b-80 { margin-bottom: 80px; }
.margin-t-80 { margin-top: 80px; }
.margin-100 {margin:100px 0}
.margin-b-100{ margin-bottom: 100px; }
.margin-t-100 { margin-top: 100px; }
.margin-120 {margin:120px 0}
.margin-b-120  { margin-bottom: 120px; }
.margin-t-120  { margin-top: 120px; }

.xsm-text {display: block; font-size: var(--xsmall); line-height: 1.4;}
.sm-text {display: block; font-size: var(--small); line-height: 1.4;}
.med-text {display: block; font-size: var(--medium); line-height: 1.4}
.lrg-text {display: block; font-size: var(--large); line-height: 1.4}

.image-fill {object-fit: cover; object-position: center;}

a, button, .text-link { color: inherit; text-decoration: none;cursor: pointer; transition: 0.5s ease all;}
a:hover { text-decoration: none;transition: 0.5s ease all;transition: 0.5s ease all;}

h1, h2, h3, h4, h5, h6 { z-index: 2; margin: 0; line-height: 1}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration:none; color: inherit; }
h1 {  font-size: var(--xlarge); font-family: 'GeneralSans-Medium'; font-weight: normal }
h2{ font-size: var(--large); font-family: 'GeneralSans-Medium'; font-weight: normal }
h3{ font-size: var(--medium); font-family: 'GeneralSans-Medium'; font-weight: 300 }
h4{ font-size: var(--small); font-family: 'GeneralSans-Medium'; font-weight: normal}
h5{ font-size: var(--small); font-family: 'GeneralSans-Medium'; font-weight: normal}
h6{ font-size: var(--xxsmall); font-family: 'GeneralSans-Mediums'; font-weight: normal}
body,p  { font-size: var(--xxsmall); font-family: 'GeneralSans-Medium'; font-weight: 300}
span {line-height: 1.4; font-family:inherit;}
iframe {border: 0;}

.cursive {font-family: "adobe-handwriting-ernie", sans-serif; }

img, svg {width: 100%;}
li, ul {list-style: none; padding: 0;}

.hide { display:none; transition: opacity 0.7s ease-in; opacity: 0;}

/* Colours */
:root {
    --white: #ffffff;
    --black: #000000;
  --primary: #EBE9E2;
  --secondary: #938F81;
  --tertiary: #292121;
  --quartiary:#1D2227;
    --xxlarge: 40px;
    --xlarge: 32px;
    --large: 22px;
    --medium: 18px;
    --small: 16px;
    --xsmall: 14px;
  --xxsmall: 12px;
    --micro: 10px;
    
}
.white, .white p { color: var(--white);}
.whitebg { background: var(--white);}
.black, .black p { color: var(--black);}
.blackbg { background: var(--black);}
.primary, .primary p { color: var(--primary);}
.primarybg { background: var(--primary);}
.secondary, .secondary p { color: var(--secondary);}
.secondarybg { background: var(--secondary);}
.tertiary, .tertiary p { color: var(--tertiary);}
.tertiarybg { background: var(--tertiary);}
.quartiary, .quartiary p { color: var(--quartiary);}
.quartiarybg { background: var(--quartiary);}

/* Input */

input.text, input.title, input[type=email], input[type=password], input[type=number], input[type=tel], input[type=text], select, textarea { border: 2px solid var(--secondary) !important;  padding: 3px 15px !important;height: fit-content !important;border-style: none none solid !important;-webkit-appearance: none; box-sizing: border-box; font-size: var(--xsmall) !important; width: -webkit-fill-available; color: var(--secondary) !important; background: transparent !important;border-radius: 0 !important;box-shadow: none !important;}
::placeholder, ::input-placeholder { color: var(--black) !important; }

.gform_fields {grid-row-gap: 5px !important; grid-column-gap: 0 !important;}
.gform_button { background: transparent !important;color: var(--black) !important;box-shadow: none !important; padding: 0 !important;}
.gform-datepicker { width: 100% !important;}
.gfield textarea { max-height: 50px !important;}
.name_first {padding: 0 !important;}
.gform_footer {margin: 10px 0 !important;}
img.gform_ajax_spinner { width: 20px; height: 20px }
/* Buttons */
.button-wrapper {}

.primary-button { cursor: pointer; }
.primary-button:hover {}
.primary-button a {}

.secondary-button { cursor: pointer; }
.secondary-button:hover {}
.secondary-button a {}

.tertiary-button { cursor: pointer; }
.tertiary-button:hover {}
.tertiary-button a {}


.text-link {color: inherit;text-decoration: none;font-size: var(--xsmall);}
.text-link svg { transform: translateX(0px); transition: 0.5s ease all; width: 20px; height: fit-content; }
.text-link:hover svg { transform: translateX(10px); transition: 0.5s ease all }


.text-link.white svg path { stroke: var(--white); }


/* Responsivness */
.mobile { display: none }

/* Menu */
header {width: 90%;margin: 0 auto; padding: 20px 5% 0;z-index: 100;position: fixed; top: 0;left: 0; right: 0;background: transparent}
header .row {padding: 15px 0 ; justify-content: space-between;}
.hero {position: relative;}
.menu { display: flex;padding: 15px 0;margin: 0;   align-items: center;}
.menu-item {margin: 0 7px; position: relative;}
.menu-item:hover {text-decoration: underline;}
.current-menu-item a {text-decoration: underline;}
.menu-item a {color: var(--black); padding: 10px 0; text-decoration: none; font-size: var(--xsmall); }
.menu-item .active:after {display:none;}
.menu-item-has-children {margin-right: 20px;} 
.menu-item-has-children::after {content: '';position: absolute;right: -12px;  width: 0; height: 0; top: 0;bottom: 0;border-right: transparent 4px solid; border-left: 4px solid transparent; border-top: 4px solid var(--darkblue); margin: auto;}
.menu-item-has-children:hover::after {border-top: 0px solid transparent; border-bottom: 4px solid var(--primary);}

.sub-menu {display: none;}
.sub-menu.active { position: absolute;top: 25px; display: block; z-index: 9999; background: var(--white); padding: 5px 0;}
.sub-menu .menu-item { width: max-content; padding: 10px;}
.sub-menu .menu-item:hover {text-decoration: underline;}

.logo-wrapper .logo {height: 40px;width: fit-content;}
.nav-wrapper {width: fit-content;flex: 1;display: flex; justify-content: center;}


/* Password */
.protected header {display: none;}
.password {width: 500px;height: fit-content; position: absolute; left: 0; right: 0; top: 0;bottom: 0; margin: auto;}
.password .row {padding: 20px; border-radius: 4px;}
.post-password-form { margin:0 }
.post-password-form p { margin:0 }
.post-password-form p:first-of-type {display: none;}
.post-password-form label input { margin-top:10px; }
.post-password-form input[type="submit"] {  margin-bottom: 0px;padding: 10px 20px; width: 100%; border-radius: 20px; border: 0;}
.post-password-form input { margin-bottom: 10px; border-radius: 20px;height: 40px;}
.password h5 { margin-bottom:10px }
.password h6 { margin-bottom:20px }


/* Swiper */
.swiper-pagination {position: relative;bottom: 20px !important;margin: 0 auto 0;width: 90% !important; left: auto; right: auto; background: var(--secondary) !important}
.swiper-pagination-progressbar-fill {background: var(--black) !important;}
.swiper-button-next, .swiper-button-prev {top: auto !important; bottom: auto !important;}
.swiper-slide img { display:block; }

.swiper-actions {position: absolute;bottom: 15px; width: 95%; left:0; right:0; z-index: 9; margin: 0 auto;}
.swiper-button-next:after, .swiper-button-prev:after { display: none }
.swiper-button-next, .swiper-button-prev {height: fit-content;margin: 0 !important;color: var(--black);}


/* Home Page */

.hero-swiper .swiper-slide {height: 700px;object-fit: cover;}

.gallery-swiper {height: 600px; width: 100%}
.gallery-swiper .swiper-actions {bottom: 5px;z-index: 9;}


.about-content h2 { font-size: var(--xlarge); width: 63.33%; line-height: 1.2;}

.functions-container {height: 700px;  width: 100%;}
.functions-content {position: relative; overflow: hidden;}
.content-underlay { position: absolute;top: 0;left: 0; width: 100%; z-index: 0;height: 100%;}
.content-underlay img {height: 100%; width: auto; min-width: 100%;object-fit: cover;}
.content-overlay { background: var(--tertiary); z-index: 1; height: 100%;width: 100%;opacity: 0.9;}
.function-type-wrapper h4 {opacity: 0.4; transition: 0.3s ease-in all}
.function-type-wrapper h4:hover {opacity: 1; transition: 0.3s ease-in all}
.functions .cursive {position: absolute; transform: rotate(-15deg); font-size: 120px;opacity: 0.2; z-index:11; left: 75%;top: -15%;color: var(--secondary);}
.functions-media img {height: 100%;width: auto; min-width: 100%;object-fit: cover;}

.attraction-content { position: relative; z-index: 4}

.booking-content {position: relative;}
.booking-container {width: 100%;}
.booking .cursive {position: absolute; transform: rotate(-15deg); font-size: 120px;opacity: 0.2; z-index:11; left: 10%;top: -5%;color: var(--secondary);}

/* Modals */
.mfp-content { width: 80% !important; margin: 0 auto;background: var(--primary); padding: 40px; box-sizing: border-box;}
.mfp-content .gform_button {border: 2px solid var(--tertiary);border-radius: 25px !important;background: transparent !important;text-transform: uppercase;padding: 10px 20px !important;}
.mfp-close-btn-in .mfp-close {color: var(--tertiary);border: 2px solid var(--tertiary);opacity: 1;border-radius: 28px;top: 20px;right: 40px;}

/* Footer */

.footer-content > div { min-height: 120px;}
.phone {transition: 0.5s ease all;}
.reveal {transition: 0.5s ease all;}
.reveal:hover {color: var(--black);transition: 0.5s ease all;}
.author-link {font-size: var(--xsmall);}

.hidden { visibility: hidden; opacity:0; transition: 0.5s ease all; width:0; display: block;height: 0;}


@media (max-width: 750px) {

:root { 
    --xxlarge: 34px;
    --xlarge: 28px;
    --large: 22px;
    --medium: 16px;
    --small: 14px;
    --xsmall: 12px;
    --xxsmall: 10px;
    --micro: 8px; }

.swiper-pagination { width: 70% !important }

.desktop { display:none }
.mobile {display: block;}

.menuslide { display: none; position: absolute; top: 0; left: 0;width: 100%; height: fit-content; padding: 140px 30px 100px;  box-sizing: border-box;background: var(--primary);z-index: -1;}
.header-wrapper { gap: 20px; justify-content: space-between;}
header .menu {flex-direction: column;align-items: flex-start;padding: 0;}
header .menu-item { margin: 10px 0px;}
header .menu-item a { font-size: var(--large);}
.nav-wrapper {display: none !important;}


.cursive {font-size: 60px !important; left: 0 !important;}

.introduction-container .lrg-text {width: 90%;}

.about .container {padding: 0;}
.about-content {width: 100%;}
.about-feature {width: 100%;}
.about-container {flex-direction: column;}
.about-wrapper { max-width: 80%;}

.content-underlay {height: 100%;overflow: hidden;}
.content-underlay img { width: auto; height: 100%;}


.functions-content {position: inherit;}
.functions-container {flex-direction: column;}
.function-content-wrapper {width: 80%;}
.functions-media.col4 { display: none;}
.function-type-wrapper {flex-direction: row;flex-wrap: wrap;}
.functions .cursive {top: -5%;left: 20% !important;}

.booking-container {flex-direction: column;}
.booking-media { width: 100%; order: 2;}
.booking-content { width: 100%; order: 1;}
.booking-content-wrapper {position: relative; width: 80% !important;padding: 80px 0;}

.attraction-content {width: 90%;}
.footer-content { width:100% }
.footer-wrapper {flex-direction: column;  width: 80%; gap:40px}
footer .menu { flex-direction: column;}
.footer-legal { padding-top: 40px;flex-direction: column;gap: 0;}

.mfp-content { width: 95% !important;}
.mfp-content h3 { width: 71%;}


}