.e-con {
--container-max-width: 1280px;
}
@media only screen and (min-width: 1281px) {
.main-title-section-wrapper .main-title-section-container { padding: clamp(5.625rem, 4.5119vw, 9.0625rem) 0 clamp(3.625rem, 2.0127rem + 4.5119vw, 9.0625rem);
}
}
@media only screen and (max-width: 1280px) {
.main-title-section-wrapper .main-title-section-container {
padding: clamp(2.1875rem, 1.7092rem + 2.551vw, 3.75rem) 0 clamp(2.1875rem, 1.7092rem + 2.551vw, 3.75rem);
}
}
.wdt-search-menu-icon{
margin-right: 20px
}
.mobile-nav-container .menu-trigger>i, .mobile-nav-container .menu-trigger>span{
font-size: 24px;
}
#main{
margin-top: 60px
}
.selenite-spa-template #main{
margin-top: 0
}
.selenite-spa-template #header{
height: 20rem;
text-align: center;
padding: 50px 0;
transition: transform 0.6s ease-out, opacity 0.6s ease-out;
background: #1B3933 url(//selenitespa.ca/wp-content/themes/miss-spa-child/bg-header.png) no-repeat left center;
}
.selenite-spa-template #header #logo img{
max-height: 100%;
}
.selenite-spa-template #header .header-container{
height: 100%;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: flex-end;
max-width: 1280px;
margin: 0 auto;
}
.selenite-spa-template #header .header-container #logo{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 43.6rem;
height: 11.4rem;
}
.selenite-spa-template #header .button-container{
display: flex;
gap: 2.6rem;
align-items: center;
position: relative;
z-index: 12;
}
.selenite-spa-template #header .button-container .book-now-button, #selenite-offcanvas .book-now-button{
padding: 0.7rem 1rem 0.8rem 1rem;
font-weight: 500;
font-size: 1.5rem;
line-height: 130%;
letter-spacing: -0.05em;
display: flex;
align-items: center;
text-align: center;
background-color: #738A69;
text-transform: uppercase;
color: #F0EFEB;
transition: all .3s ease-in-out;
height: 3.5rem;
}
.selenite-spa-template #header .button-container .hamburger-container {
display: flex;
align-items: center;
gap: .5rem;
cursor: pointer;
}
.selenite-spa-template #header .button-container .hamburger-container .hamburger {
height: 3.3rem;
width: 5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: all .2s 
ease-in-out;
}
.selenite-spa-template #header .button-container .hamburger-container .hamburger span {
display: flex;
width: 100%;
height: 2px;
background-color: #738A69;
}
.selenite-spa-template #header .button-container .hamburger-container .menu-text p {
writing-mode: sideways-lr;
text-orientation: mixed;
color: #738A69;
font-size: 1.3rem;
margin: 0
}
.selenite-spa-template.sticky #header{
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 9999;
animation: slideDown 0.6s ease-out;
height: 10rem;
}
.admin-bar .selenite-spa-template.sticky #header{
top: 32px;
}
.selenite-spa-template.sticky #header #logo{
height: 8rem;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.selenite-spa-template.sticky #main{
padding-top: 16rem
}
.nagative-margin-300{margin-top: -300px;}
.nagative-margin-50{margin-top: -50px;}
.nagative-margin-50 img, .nagative-margin-300 img{border-radius: 60px;}
#primary > .commententries:last-child{
margin-bottom: 0;
}
.selenite-spa-template #header .button-container .hamburger-container .hamburger:hover{
height: 3rem;
}
.selenite-offcanvas{
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 22rem;
max-width: 85vw;
background: #F0EFEB;
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
transform: translateX(100%);
transition: transform 0.4s ease-out;
z-index: 10050;
padding: 3rem 2.5rem;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2rem;
}
.selenite-offcanvas .book-now-button{
width: 150px
}
.selenite-offcanvas.is-open{
transform: translateX(0);
}
.selenite-offcanvas__close{
align-self: flex-end;
background: transparent;
border: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2.5rem;
height: 2.5rem;
cursor: pointer;
padding: 0;
background: transparent !important;
position: absolute;
}
.selenite-offcanvas__close span{
width: 40px;
height: 2px;
background-color: #738A69;
display: block;
transform-origin: center;
}
.selenite-offcanvas__close span:first-child{
transform: rotate(45deg) translateY(1px);
}
.selenite-offcanvas__close span:last-child{
transform: rotate(-45deg) translateY(-1px);
}
.selenite-offcanvas__menu{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.selenite-offcanvas__menu a{
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 2.25rem;
letter-spacing: -0.02em;
color: #000000;
text-decoration: none;
transition: color 0.3s ease;
}
.selenite-offcanvas__menu a:hover,
.selenite-offcanvas__menu a:focus{
color: #738A69;
}
.selenite-offcanvas__backdrop{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 10040;
pointer-events: none;
}
.selenite-offcanvas__backdrop.is-active{
opacity: 1;
pointer-events: auto;
}
body.offcanvas-open{
overflow: hidden;
}
.admin-bar .selenite-offcanvas{
padding-top: 86px;
}
#menu-header-side-menu li{
display: flex;
}
#menu-header-side-menu li.current-menu-item a{
color: #738A69;
}
@media only screen and (max-width: 768px) {
.nagative-margin-50, .nagative-margin-300{
margin-top: 0
}
.selenite-spa-template #header, .selenite-spa-template.sticky #header{
padding: 10px 0;
height: 7rem;
}
.selenite-spa-template #header{
background-position: left top;
}
.admin-bar .selenite-spa-template.sticky #header{
top: 0
}
.selenite-spa-template #header .header-container #logo{
height: 5rem;
}
.selenite-spa-template #header .button-container .book-now-button{
display: none;
}
.selenite-spa-template #header .button-container .hamburger-container .hamburger{
height: 1.5rem;
width: 2rem;
}
.selenite-spa-template #header .button-container .hamburger-container .menu-text p{
font-size: 0.6rem;
}
.selenite-spa-template #header .button-container{
margin-right: 10px
}
}