/*
Theme Name: Plaza Khao Gaeng
Version: 1.0
Description: WordPress theme for Plaza Khao Gaeng
Author: INSPIRE
Author URI: http://www.inspiredm.co.uk
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: plazakhaogaeng

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.
*/

/*** General ***/
* { padding: 0px; margin: 0px; }
p { margin: 10px 0px }
body { font-family: 'Noto', sans-serif; font-size: 20px; background: #F7F0E9; margin:0; font-weight:400; overflow-x: hidden; color: #273D7F }
.inwrap { width: 100%; margin: 0 auto; }
.contentwrap { width: 100%; display:flex; flex-direction: column }
.content { width: 90%; margin: 130px auto 0; }
.contenthome { width: 100%; margin: 0 auto; }
.clear { clear: both; display: block; }
a, a:link, a:active, div a { text-decoration:none; }
a img {border:none }
@font-face { font-family: 'ClearfaceHeavy'; src: url('fonts/ClearfaceStd-Heavy.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'ClearfaceItalic'; src: url('fonts/ClearfaceStd-Italic.woff2') format('woff2'); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: 'Noto'; src: url('fonts/NotoSerifThai-VariableFont.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sati'; src: url('fonts/Sati.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0E00-0E7F; }

/*** Header ***/
.header { margin: 0 auto; width:100%; position:absolute; z-index: 1000; height: 110px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.2) }
.header .logo { position: fixed; z-index: 10000; background: url("images/plaza-blue.png") no-repeat center; width:200px; background-size: contain; height: 100px; left: calc(50% - 100px); bottom: 25px }
.header .headerbuttons { position: absolute; right: 25px; top: 25px; display: flex; align-items: center}
.cream { background: #F7F0E9 }
.stick { position: fixed }
.mobilebook { display: none}
.mobile-active .logo { width: 150px; left: calc(50% - 75px); bottom: 5px}

/*** Mobile Menu ***/
#mobile-menu .sub-menu { display: none; }
#mobile-menu .sub-menu.active { display: block; }
.mobile-active .location li a { }
.menu-toggle { display: none; }
.menu-toggle-label { position: fixed; top:25px; left: 25px; cursor: pointer; z-index: 100000; flex-direction: column; width: 25px; display: none }
.menu-toggle-label::before { content: ""; background: url("images/bracket-cream.svg"); background-size: cover; width: 40px; height: 8px; background-repeat: no-repeat; margin: 0 0 5px -7.5px; display: block }
.menu-toggle-label::after { content: ""; background: url("images/bracket-cream.svg"); background-size: cover; width: 40px; height: 8px; background-repeat: no-repeat; transform: rotate(180deg); margin: 5px 0 0 -7.5px; display: block }
.menu-toggle-label span { display: block; width: 100%; height: 3px; background-color: #F7F0E9; margin-bottom: 4px; transition: transform 0.3s, opacity 0.3s; transform-origin: center; }
.menu-toggle-label span.visually-hidden { height: 0 !important; margin: 0 !important }
.menu-toggle-label span:last-child { margin-bottom: 0; }
.menu-toggle:checked + .menu-toggle-label span:nth-child(1) { transform: translateY(6px) rotate(45deg) }
.menu-toggle:checked + .menu-toggle-label span:nth-child(2) { opacity: 0; }
.menu-toggle:checked + .menu-toggle-label span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }
.mobile { position: fixed; top: 0; left: 0; width: 100%; height: 100%; ; z-index: 1000; overflow-y: auto; transition: transform 0.3s ease; transform: translateX(-100%); background: #F7F0E9; flex-direction: column }
.mobile-main { font-size: 3.25em; font-family: 'ClearfaceHeavy', serif; width:100%; text-transform: uppercase; padding-left: 15px; padding-right: 15px}
.mobile.active { transform: translateX(0%); display: flex; justify-content: center; align-items: center }
.mobile-active .menu-toggle-label::before, .cream .menu-toggle-label::before { content: ""; background: url("images/bracket-blue.svg"); background-size: cover; width: 40px; height: 8px; background-repeat: no-repeat; margin: 0 0 5px -7.5px; display: block }
.mobile-active .menu-toggle-label::after, .cream .menu-toggle-label::after { content: ""; background: url("images/bracket-blue.svg"); background-size: cover; width: 40px; height: 8px; background-repeat: no-repeat; transform: rotate(180deg); margin: 5px 0 0 -7.5px; display: block }
.mobile-active .menu-toggle-label span, .cream .menu-toggle-label span { background-color: #273D7F; }

.menu-mobile-container { width: 100% }
.mobile ul { list-style: none; padding: 0; margin: 0; line-height: 1.1 }
.mobile .mobile-main ul li a { position: relative; color: #273D7F; }
.mobile .mobile-main ul li a span { font-family: 'Sati'; font-weight: 700 }
.mobile-active span.top { transform: translateY(8px) rotate(45deg); }
.mobile-active span.middle { display: none }
.mobile-active span.bottom { transform: rotate(-45deg); margin: 0 0 12px }
.mobile ul.sub-menu { font-size: 0.6em; text-transform: none; margin: 0.5em 0 1em }
.mobile ul.sub-menu li a:hover::before, .mobile ul.sub-menu li a:hover::after { display: none !important }
.mobile li.menu-item-has-children a:hover::before, .mobile li.menu-item-has-children a:hover::after { content: none !important; width: auto; height: auto; background: none; }
.menu-item-has-children > a { position: relative; display: block; text-align: center; }
.toggle-icon {  stroke: currentColor; display: block; }
.toggle-icon .vertical { transition: opacity 0.2s ease; }
.toggle-icon .vertical.hidden { opacity: 0; }

.main-nav { position: relative; width: 100%; z-index: 1000; }
.main-nav::before, .main-nav::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; background-color: #F7F0E9; border-radius: 50%; transform: translateY(-50%); }
.cream .main-nav::before, .cream .main-nav::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; background-color: #273D7F; border-radius: 50%; transform: translateY(-50%); }
.main-nav::before { left: 2rem; }
.main-nav::after { right: 2rem; }
.nav-inner { max-width: 1400px; margin: 0 auto; padding: 1rem 2rem; display: flex; align-items: center; justify-content: center; gap: 2rem; }
.nav-left, .nav-right { list-style: none; margin: 0; padding: 0; display: flex; gap: 2rem; flex: 1; text-align: center; font-size: 17px; justify-content: center}
.nav-left li, .nav-right li { margin: 0 0.5em; line-height: 120% }
.nav-left li span, .nav-right li span { font-size: 15px }
.nav-left a, .nav-right a { text-decoration: none; font-weight: 600; color: #F7F0E9; letter-spacing: 1% }
.cream .nav-left a, .cream .nav-right a { text-decoration: none; font-weight: 600; color: #273D7F; letter-spacing: 1% }
.nav-logo { flex: 0 0 auto; }
.nav-logo img { display: block; height: 85px; }
.nav-instagram { position: absolute; left: 4rem;  top: 50%; transform: translateY(-50%); width: 29px; height: 35px; background: url("images/instagram-cream.svg") no-repeat center; background-size: contain; display: block; }
.cream .nav-instagram { position: absolute; left: 4rem;  top: 50%; transform: translateY(-50%); width: 29px; height: 35px; background: url("images/instagram-blue.svg") no-repeat center; background-size: contain; display: block; }
.nav-tiktok { position: absolute; left: 7rem;  top: 50%; transform: translateY(-50%); width: 29px; height: 35px; background: url("images/tiktok-cream.svg") no-repeat center; background-size: contain; display: block; }
.cream .nav-tiktok { position: absolute; left: 7rem;  top: 50%; transform: translateY(-50%); width: 29px; height: 35px; background: url("images/tiktok-blue.svg") no-repeat center; background-size: contain; display: block; }

/*** Content ***/
.page { float:left; width:100%; }
.page .postHead { background: none; }
.postContent { padding: 0; max-width: 1200px; margin: 0 auto }
.contenthome .postContent { padding: 0; }
h1, h2, h3, h4, h5, h6 { line-height: 120%; font-weight: normal; font-family: 'ClearfaceHeavy', 'Sati', system-ui, serif;  }
.postContent h1 { font-size: 3em; margin:0.5em 0; }
.postContent h1 span, .postContent h2 span { font-family: 'Sati'; font-weight: bold }
body.page-template-tpl_aboutpage h1 { font-size: 6em; position: relative; margin: 0}
.postContent h2 { font-size: 2.5em; margin:.5em 0; }
.postContent h3 { font-size: 2em; margin: 0.5em 0; font-weight: normal}
.location-heading { display: flex; align-items: center; gap: 1.5rem; font-family: 'ClearfaceHeavy', serif; white-space: nowrap; }
.location-heading .name-wrap { position: relative; display: inline-block; }
.location-heading .name-en, .location-heading .name-th { display: inline-block; transition: opacity .3s ease; }
.location-heading .name-th { position: absolute; left: 0; opacity: 0; pointer-events: none; font-family: 'Sati', serif; }
.location-heading:hover .name-en { opacity: 0; }
.location-heading:hover .name-th { opacity: 1; }
.location-heading .address { margin-left: auto; letter-spacing: 0.05em; font-size: 0.9em; }
.postContent h3 span.address{ font-size: 0.375em; text-transform: uppercase; margin: 0 1em }
.postContent h4 { font-size: 1.5em; margin: 0.5em 0; }
.postContent h5 { font-size: 1.25em; margin: 0.5em 0; font-family: 'Noto', serif; letter-spacing: 1%; font-weight: 600}
.postContent h6 { font-size: 1em; margin: 0.5em 0; font-family: 'Noto', serif; letter-spacing: 30%;}
.postContent p { margin: 1.25em 0 ; font-family: 'Noto', serif }
.postContent p a { text-decoration: underline; color: #273D7F }
.postContent p a:hover { color: #000 }
.postContent p.clearfaceitalic { font-family: 'ClearfaceItalic', serif; margin: 0 }
.postContent ul { margin: 1em; line-height: 126%; }
.postContent ul li { margin: 1% 0; }
.postContent ol li { padding:5px 0; }
.postContent ol { margin: 1em; line-height: 126% }
.postContent blockquote { font-weight:normal; margin: 2em 0; padding: 0.5em 0.5em 1em ; border-left: 10px solid rgba(0,0,0,1); background: rgba(0,0,0,0.1) }
.postContent blockquote p { margin: 1%; font-size: 1.25em; }
.postContent blockquote cite { margin: 1%; font-size: 1em; }
.postContent hr { margin: 5% 0 }
.postContent img { max-width: 100%; height:auto }
.postContent h1 a { text-decoration: none }
.postContent .noto { font-family: 'Noto'; font-weight: 700 }
.visually-hidden { align-content: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.featuredimage { position: absolute; right: 0; width: 40%; height: 800px; background-size: cover; background-repeat: no-repeat}
h2.ruledcream { position: relative; display: flex; align-items: center; justify-content: center; gap: 1.5rem; text-align: center; color: #F7F0E9; padding: 1.5em 1rem; letter-spacing: 15%; font-size: 0.75em; font-weight: 400; text-transform: uppercase; font-family: 'Noto', serif;
  --dot-size: 12px;
  --gap: 24px;
  --line-thickness: 1px; }
h2.ruledcream::before, h2.ruledcream::after, h2.ruledblue::before, h2.ruledblue::after { content: ""; flex: 1 1 0; height: var(--dot-size); background-repeat: no-repeat; }
h2.ruledcream::before { background-image: radial-gradient(circle, #F7F0E9 50%, transparent 51%), linear-gradient(#F7F0E9, #F7F0E9); background-size: var(--dot-size) var(--dot-size), calc(100% - var(--dot-size) - var(--gap)) var(--line-thickness); background-position: left center, right center; }
h2.ruledcream::after { background-image: linear-gradient(#F7F0E9, #F7F0E9), radial-gradient(circle, #F7F0E9 50%, transparent 51%); background-size: calc(100% - var(--dot-size) - var(--gap)) var(--line-thickness), var(--dot-size) var(--dot-size); background-position: left center, right center; }

h2.ruledcreamemailpopup { position: relative; display: flex; align-items: center; justify-content: center; gap: 1.5rem; text-align: center; color: #F7F0E9; padding: 1.5em 1rem; letter-spacing: 10%; font-size: 0.75em; font-weight: 400; text-transform: uppercase; font-family: 'Noto', serif;
  --dot-size: 6px;
  --gap: 12px;
  --line-thickness: 1px; }
h2.ruledcreamemailpopup::before, h2.ruledcreamemailpopup::after { content: ""; flex: 1 1 0; height: var(--dot-size); background-repeat: no-repeat; }
h2.ruledcreamemailpopup::before { background-image: radial-gradient(circle, #F7F0E9 50%, transparent 51%), linear-gradient(#F7F0E9, #F7F0E9); background-size: var(--dot-size) var(--dot-size), calc(100% - var(--dot-size) - var(--gap)) var(--line-thickness); background-position: left center, right center; }
h2.ruledcreamemailpopup::after { background-image: linear-gradient(#F7F0E9, #F7F0E9), radial-gradient(circle, #F7F0E9 50%, transparent 51%); background-size: calc(100% - var(--dot-size) - var(--gap)) var(--line-thickness), var(--dot-size) var(--dot-size); background-position: left center, right center; }

h2.ruledblue { position: relative; display: flex; align-items: center; justify-content: center; gap: 1.5rem; text-align: center; color: #273D7F; padding: 1.5em 1rem; letter-spacing: 10%; font-size: 0.75em; font-weight: 400; text-transform: uppercase; font-family: 'Noto', serif;
  --dot-size: 12px;
  --gap: 24px;
  --line-thickness: 1px; }
h2.ruledblue::before { background-image: radial-gradient(circle, #273D7F 50%, transparent 51%), linear-gradient(#273D7F, #273D7F); background-size: var(--dot-size) var(--dot-size), calc(100% - var(--dot-size) - var(--gap)) var(--line-thickness); background-position: left center, right center; }
h2.ruledblue::after { background-image: linear-gradient(#273D7F, #273D7F), radial-gradient(circle, #273D7F 50%, transparent 51%); background-size: calc(100% - var(--dot-size) - var(--gap)) var(--line-thickness), var(--dot-size) var(--dot-size); background-position: left center, right center; }

h2.fullruled { padding: 0; margin: 0 }

/*** Book page menu ***/
.postContent .menu-container { text-align: center; text-transform: none; color: #273D7F; font-family: 'ClearfaceHeavy', serif; }
.postContent .menu-container ul li { position: relative; font-size: 30px; padding-block: 15px; line-height: 1; margin: 0 }
.postContent .menu-container ul li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: radial-gradient(circle, #273D7F 4px, transparent 4px) 10px center, radial-gradient(circle, #273D7F 4px, transparent 4px) calc(100% - 10px) center, linear-gradient(to right, transparent 0, transparent 30px, #273D7F 30px, #273D7F calc(100% - 30px), transparent calc(100% - 30px), transparent 100%); background-size: 8px 8px, 8px 8px, 100% 1px; background-repeat: no-repeat; background-position: 10px center, calc(100% - 10px) center, 0 center; }
.postContent .menu-container ul li:first-child::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: radial-gradient(circle, #273D7F 4px, transparent 4px) 10px center, radial-gradient(circle, #273D7F 4px, transparent 4px) calc(100% - 10px) center, linear-gradient(to right, transparent 0, transparent 30px, #273D7F 30px, #273D7F calc(100% - 30px), transparent calc(100% - 30px), transparent 100%); background-size: 8px 8px, 8px 8px, 100% 1px; background-repeat: no-repeat; background-position: 10px center, calc(100% - 10px) center, 0 center; }

/*** Specials ***/
.postContent .wp-caption { background: #f8f7eb; border: solid 1px #EBE9D7; text-align: center; padding-bottom: 4px; }
.postContent .wp-caption img { border: solid 5px #f8f7eb; }
.postContent .alignleft { float: left; margin: 0px 15px 5px 0px; display: block; max-width: 50% }
.postContent .alignright { float: right; margin: 0px 0px 5px 15px; display: inline; }
.postContent .aligncenter { width: 100%}
.postContent .wp-caption p { margin: 0px; }
.alignfull { margin: 0 calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.alignfull img { display: block }
.alignwide { max-width: 1300px; margin-left: auto; margin-right: auto }
.kadence-blocks-gallery-item__caption { font-family: 'ClearfaceHeavy', serif; }
.kadence-blocks-gallery-item__caption br + br { margin-bottom: 1em; display: block; content: ""; }
.wp-block-kadence-advancedgallery .kt-blocks-carousel .splide__arrow--next { right: calc(50% - 100px); background: none; top: 5px; opacity: 1; z-index: 100;}
.wp-block-kadence-advancedgallery .kt-blocks-carousel .splide__arrow--prev { left: calc(50% - 100px); background: none; top: 5px; opacity: 1; z-index: 100;}
.thai-text { font-family: 'Sati', sans-serif; }
.monotone-blue img { filter: grayscale(100%) contrast(1.2); mix-blend-mode: multiply; background-color: #273D7F; }

/*** Buttons ***/
.button-1 .wp-block-button__link { background: url("images/button-1.svg") no-repeat; width: 200px; height: 60px; background-size: contain; font-family: 'Noto'; font-size: 15px; letter-spacing: 10%; color: #F7F0E9; display: inline-flex; justify-content: center; align-items: center }
.button-1 .wp-block-button__link::before { content:""; background: url("images/button-1-circle.svg"); width: 5px; height: 5px; background-size: contain; display: inline-block; margin: 0 5px 3px 0}
.button-1 .wp-block-button__link::after { content:""; background: url("images/button-1-circle.svg"); width: 5px; height: 5px; background-size: contain; display: inline-block; margin: 0 0 3px 5px}
.button-1 .wp-block-button__link:hover { background: url("images/button-1-hover.svg"); background-size: contain; }

.button-2 .wp-block-button__link { background: url("images/button-2.svg") no-repeat; width: 138px; height: 48px; background-size: contain; font-family: 'Noto'; font-size: 15px; letter-spacing: 10%; color: #F7F0E9; display: inline-flex; justify-content: center; align-items: center }
.button-2 .wp-block-button__link:hover { background: url("images/button-2-hover.svg") no-repeat; background-size: contain; }

.button-3 .wp-block-button__link { background: url("images/button-3.svg") no-repeat; width: 138px; height: 48px; background-size: contain; font-family: 'Noto'; font-size: 15px; letter-spacing: 10%; color: #273D7F; display: inline-flex; justify-content: center; align-items: center }
.button-3 .wp-block-button__link:hover { background: url("images/button-3-hover.svg") no-repeat; background-size: contain; }

.divider { display: flex; align-items: center; justify-content: center }
.divider .wp-block-kadence-column:first-child::after { content: ""; width: 2px; height: 34px; background: #F7F0E9; align-self: center; position: absolute; right: calc(50% - 1.5px)}

.dividers { display: flex; justify-content: space-between; align-items: center; position: relative; }
.dividers .wp-block-button { flex-shrink: 0; width: 138px; }
.button-divider { width: 2px; height: 34px; background: #F7F0E9; pointer-events: none; z-index: 1; }
.dividersblue .button-divider { background: #273D7F; }

.button-blue .wp-block-button__link { background: url("images/blue-arrow-button.svg") no-repeat center; background-size: contain; width: 80px; height: 34px; line-height: 1px; color: rgba(0,0,0,0); }
.button-blue .wp-block-button__link:hover { background: url("images/blue-arrow-button-hover.svg") no-repeat center; background-size: contain; width: 80px; height: 34px;}
.button-cream .wp-block-button__link { background: url("images/cream-arrow-button.svg") no-repeat center; background-size: contain; width: 80px; height: 34px; line-height: 1px; color: rgba(0,0,0,0) }
.button-cream .wp-block-button__link:hover { background: url("images/cream-arrow-button-hover.svg") no-repeat center; background-size: contain; width: 80px; height: 34px;}

/*** Category ***/
.catpost { width: 85%; display: flex; justify-content: flex-start; margin: 0 auto }
.catpost .postContent { width: 30% }

/*** Footer ***/
.footer { width: 100%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; }
.footer h2, .footer h3, .footer h4, .footer h5, .footer h6 { margin: 0.5em 0; font-family: 'ClearfaceHeavy', 'Sati', system-ui, serif; }
.footer h2 { font-size: 2.5em; }
.footer h3 { font-size: 2em; }
.footer h4 { font-size: 1.5em; }
.footer h5 { font-size: 1em; }
.footer h6 { font-size: 0.75em; }
.footer .footer-content { width: 100%; position: relative }
.footer .footer-content h3 { font-size: 1.5em; margin: 0.5em 0; letter-spacing: 2px }
.footer .sidebarItem p { line-height: 1.5; letter-spacing: 10%; }
.menu-footer-container { margin: 1em 0 0 0; text-transform: uppercase; }
.menu-footer-container ul { display: flex; padding: 0; margin: 0; list-style: none; flex-wrap: wrap; justify-content: center; font-size: 0.8em }
.menu-footer-container ul li { list-style: none; white-space: nowrap; letter-spacing: 10%; margin: 0 0 0 1.5em }
.menu-footer-container ul li a { color: #F7F0E9; text-decoration: none }

/* Scrolling Footer */
.footer-reveal-bg { position: sticky; top: 0; height: 50vh; z-index: 1; }
.footer-panel { position: sticky !important; bottom: 0; z-index: 2; background-image: url('/wp-content/uploads/footer-background-3.jpg'); background-attachment: fixed; background-size: cover; background-position: center center;     background-repeat: no-repeat; }

/*** Booking Modal ***/
.custom-modal { display: none; position: fixed; z-index: 1000; inset: 0; background: #F7F0E9; }
.custom-modal-overlay { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.custom-modal .modal-content { background: #F7F0E9; width: 100%; position: relative; max-width: 1200px }
.custom-modal-close { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 2rem; background: none; border: none; color: #273D7F; cursor: pointer; }
body.modal-open { overflow: hidden; }
#booking-navigation .menu-book-container ul li:first-child::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; background: radial-gradient(circle, #273D7F 4px, transparent 4px) 10px center, radial-gradient(circle, #273D7F 4px, transparent 4px) calc(100% - 10px) center, linear-gradient(to right, transparent 0, transparent 30px, #273D7F 30px, #273D7F calc(100% - 30px), transparent calc(100% - 30px), transparent 100%); background-size: 8px 8px, 8px 8px, 100% 1px; background-repeat: no-repeat; background-position: 10px center, calc(100% - 10px) center, 0 center; }
#booking-navigation .menu-book-container ul li::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 8px; background: radial-gradient(circle, #273D7F 4px, transparent 4px) 10px center, radial-gradient(circle, #273D7F 4px, transparent 4px) calc(100% - 10px) center, linear-gradient(to right, transparent 0, transparent 30px, #273D7F 30px, #273D7F calc(100% - 30px), transparent calc(100% - 30px), transparent 100%); background-size: 8px 8px, 8px 8px, 100% 1px; background-repeat: no-repeat; background-position: 10px center, calc(100% - 10px) center, 0 center; }
#booking-navigation .menu-book-container ul li { position: relative; padding: 0.4em 0; list-style: none; }
.modal-content .mobile-main { padding: 0; text-align: center; font-size: 2em  }
#booking-navigation a { color: #273D7F; text-transform: initial; display: inline-block; transition: 0.2s }
#booking-navigation a:hover { transform: scale(110%)}
.modallogo { position: fixed; z-index: 10000; background: url("images/plaza-blue.png") no-repeat center; width:150px; background-size: contain; height: 100px; left: calc(50% - 75px); bottom: 5px }

/*** Skip Links ***/
.skip-link { position: absolute; top: -100px; left: 0; padding: 8px; background: #fff; z-index: 100; }
.skip-link:focus { top: 0; }
.screen-reader-text {  clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }

/*** Cookie Notice ***/
#moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme { background: #FAEFE1 !important; z-index: 100000 }
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li button { background: #FAEFE1 !important }
button.mgbutton.moove-gdpr-infobar-settings-btn:hover { background: #370E01 !important}
#moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme { border-top: 1px solid #370E01 !important }

/* -- Media Queries -- */

@media only screen and (min-width : 601px) and (max-width : 1024px) {
.nav-instagram, .cream .nav-instagram { left: 5rem; }
.nav-tiktok, .cream .nav-tiktok { left: 8rem; }
.nav-logo { position: relative; top: 0}
.nav-logo img { height: 60px }
.main-nav::before, .main-nav::after, .cream .main-nav::before, .cream .main-nav::after { display: none }
ul.nav-left, ul.nav-right { display: none }
.menu-toggle-label {  display: block }
.mobile-main { font-size: 1.5em; text-align: center; text-transform: none }
.header { height: 90px }
.mobilebook { position: absolute; right: 25px; top: 40px; font-size: 18px; letter-spacing: 1%; color: #F7F0E9; font-family: 'ClearfaceHeavy', serif; display: block }
.mobile .mobile-main ul li { position: relative; padding: 0.4em 0; }
.mobile .mobile-main ul li::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 8px; background: radial-gradient(circle, #273D7F 4px, transparent 4px) 10px center, radial-gradient(circle, #273D7F 4px, transparent 4px) calc(100% - 10px) center, linear-gradient(to right, transparent 0, transparent 30px, #273D7F 30px, #273D7F calc(100% - 30px), transparent calc(100% - 30px), transparent 100%); background-size: 8px 8px, 8px 8px, 100% 1px; background-repeat: no-repeat; background-position: 10px center, calc(100% - 10px) center, 0 center; }
.mobile .mobile-main ul li:first-child::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 8px; background: radial-gradient(circle, #273D7F 4px, transparent 4px) 10px center, radial-gradient(circle, #273D7F 4px, transparent 4px) calc(100% - 10px) center, linear-gradient(to right, transparent 0, transparent 30px, #273D7F 30px, #273D7F calc(100% - 30px), transparent calc(100% - 30px), transparent 100%); background-size: 8px 8px, 8px 8px, 100% 1px; background-repeat: no-repeat; background-position: 10px center, calc(100% - 10px) center, 0 center; }
.contenthome .postContent { max-width: 90% }
.footer-reveal-bg { height: 25vh; }
.footer-panel { margin-top: -10vh; background: none }
.postContent p { font-size: 0.9em }
.postContent h3 { font-size: 1.5em }
.postContent h3 span { display: block; margin: 0; }
.postContent h3 span.address { margin: 0; font-size: 10px}
.button-1 .wp-block-button__link { width: 150px; height: 45px; font-size: 12px; letter-spacing: 4% }
.button-2 .wp-block-button__link { width: 100px; height: 36px; font-size: 12px; }
.button-3 .wp-block-button__link { width: 100px; height: 36px; font-size: 12px; }
.divider .wp-block-kadence-column:first-child::after { content: ""; width: 2px; height: 24px; }
.button-blue .wp-block-button__link { width: 52px; height: 30px }
.button-blue .wp-block-button__link:hover { width: 52px; height: 30px;}
.button-cream .wp-block-button__link { width: 52px; height: 30px; }
.button-cream .wp-block-button__link:hover { width: 52px; height: 30px; }
.button-divider { height: 25px; }
.dividers .wp-block-button { width: 100px; }
}

@media only screen and (max-width : 600px) {
.featuredimage { width: 100%; margin: 25vh 0 0; height: 450px }
.nav-instagram, .cream .nav-instagram, .nav-tiktok, .cream .nav-tiktok { display: none; }
ul.nav-left, ul.nav-right { display: none }
.main-nav::before, .main-nav::after, .cream .main-nav::before, .cream .main-nav::after { display: none }
.nav-logo { position: relative; top: 0}
.nav-logo img { height: 60px }
.mobile-main { font-size: 1.5em; text-align: center; text-transform: none }
.mobilebook { position: absolute; right: 25px; top: 40px; font-size: 18px; letter-spacing: 1%; color: #F7F0E9; font-family: 'ClearfaceHeavy', serif; display: block }
.cream .mobilebook { color: #273D7F;  }
.menu-toggle-label {  display: block }
.mobile .mobile-main ul li { position: relative; padding: 0.4em 0; }
.mobile .mobile-main ul li::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 8px; background: radial-gradient(circle, #273D7F 4px, transparent 4px) 10px center, radial-gradient(circle, #273D7F 4px, transparent 4px) calc(100% - 10px) center, linear-gradient(to right, transparent 0, transparent 30px, #273D7F 30px, #273D7F calc(100% - 30px), transparent calc(100% - 30px), transparent 100%); background-size: 8px 8px, 8px 8px, 100% 1px; background-repeat: no-repeat; background-position: 10px center, calc(100% - 10px) center, 0 center; }
.mobile .mobile-main ul li:first-child::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 8px; background: radial-gradient(circle, #273D7F 4px, transparent 4px) 10px center, radial-gradient(circle, #273D7F 4px, transparent 4px) calc(100% - 10px) center, linear-gradient(to right, transparent 0, transparent 30px, #273D7F 30px, #273D7F calc(100% - 30px), transparent calc(100% - 30px), transparent 100%); background-size: 8px 8px, 8px 8px, 100% 1px; background-repeat: no-repeat; background-position: 10px center, calc(100% - 10px) center, 0 center; }
.header { height: 90px }
.header .careersbutton a.book { display: none }
.contentwrap { flex-direction: column}
.content { width: 100%; margin: 80px auto 0 }
.contenthome .postContent { max-width: 90% }
.menu-footer-container ul li { margin: 0.5em }
.mobile-footer { bottom: 3em }
.mobile-footer ul#mobile-footer-menu {  }
.postContent { max-width: 90% }
.postContent h1 { font-size: 1.5em }
.postContent h2 { font-size: 1.25em }
.postContent h2.ruledcream { font-size: 12px; padding: 1.5em 0; --dot-size: 8px; --gap: 12px; }
.postContent h2.ruledblue { font-size: 12px; padding: 1.5em 0; --dot-size: 8px; --gap: 12px; }
.postContent h3 { font-size: 1.05em }
.postContent h3 span { display: block; margin: 0; }
.postContent h3 span.address { margin: 0; font-size: 10px}
.postContent p { font-size: 0.75em }
.postContent ul, .postContent ol { font-size: 0.75em }
.mobile ul li a:hover::before { width: 40px; height: 25px; }
.mobile ul li a:hover::after { width: 40px; height: 25px; background-size: 25px }
.button-1 .wp-block-button__link { width: 150px; height: 45px; font-size: 12px; letter-spacing: 4% }
.button-2 .wp-block-button__link { width: 100px; height: 36px; font-size: 12px; }
.button-3 .wp-block-button__link { width: 100px; height: 36px; font-size: 12px; }
.divider .wp-block-kadence-column:first-child::after { content: ""; width: 2px; height: 24px; }
.button-blue .wp-block-button__link { width: 52px; height: 30px }
.button-blue .wp-block-button__link:hover { width: 52px; height: 30px;}
.button-cream .wp-block-button__link { width: 52px; height: 30px; }
.button-cream .wp-block-button__link:hover { width: 52px; height: 30px; }
.button-divider { height: 25px; }
.dividers .wp-block-button { width: 100px; }
.modal-content .mobile-main { font-size: 1.5em  }
.footer-reveal-bg { height: 25vh; }
.footer-panel { margin-top: -10vh; background: none }
}