/*
https://7sky.liqium.com/
https://peaqwellness.com/
https://theplayersclub.it/stories/
https://casaobsidiana.com/
https://www.thisismaja.com/
https://www.muselaserspa.com/
https://www.mycontentcollective.co/
*/

/* Touche */
@font-face {
  font-family: Touche;
  font-style: normal;
  font-weight: 100 200;
  src: url(assets/fonts/Touche-Light.otf);
}
@font-face {
  font-family: Touche;
  font-style: normal;
  font-weight: 300 400 500;
  src: url(assets/fonts/Touche.otf);
}
@font-face {
  font-family: Touche;
  font-style: normal;
  font-weight: 600 700;
  src: url(assets/fonts/Touche-Semibold.otf);
}
@font-face {
  font-family: Touche;
  font-style: normal;
  font-weight: 800 900;
  src: url(assets/fonts/Touche-Bold.otf);
}

@font-face {
  font-family: Baskerville;
  font-style: normal;
  src: url(assets/fonts/baskerville-display-pt.otf);
}
@font-face {
  font-family: Baskerville;
  font-style: italic;
  src: url(assets/fonts/Baskerville-Italic.ttf);
}


/*
div{
  cursor: url(assets/img/icons/cursor.svg), auto;
}
*/
::-webkit-scrollbar {
  display: none;
}

::-moz-selection { /* Code for Firefox */
  color: #fff;
  background: #282828;
}

::selection {
  color: #fff;
  background: #282828;
}

a.::-moz-selection, img::-moz-selection { /* Code for Firefox */
  background: none;
}

a.cta::selection, img::selection {
  background: none;
}

/*** basic style ***/
html, body{
  margin:0;
  padding:0;
	margin-top:0!important;
	color:#2c2c2c;
  font-family: Touche, Arial, Helvetica, sans-serif;
  font-size: clamp(12px, calc( 0.5 * (.25vw + 1rem)), 24px);
  font-weight: 200;
  font-style: normal;
  line-height: 1.3;
	letter-spacing: .05em;
	text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
}

html {
  scroll-behavior: smooth;
}
/*
html::-webkit-scrollbar, *::-webkit-scrollbar {
	display: none;
}
*/

div{
	vertical-align:top;
}

p{
  font-size: 12px;
  font-size: clamp(13px, calc( 0.5 * (.25vw + 1rem)), 24px);
  margin: 10px auto 20px auto;
  max-width: 900px;
  font-weight: 200;
  font-style: normal;
  line-height: 1.5;
  font-family: Baskerville, "Times New Roman", Times, serif;
  font-family: Touche, Arial, Helvetica, sans-serif;
  color: #2c2c2c;
  white-space: pre-line;
}

h1, h2, h3, h4, h5, h6{
  font-size: 35px;
  font-family: Touche, Arial, Helvetica, sans-serif;
	margin: 5px 0 10px 0;
  line-height: 1.3;
  font-weight:400;
  color: #2c2c2c;
}

h1, h2, h3{
  font-style: italic;
}
h1{
	font-size: clamp(50px, calc( 0.5 * (1vw + 1rem)), 100px);
  font-weight: 100;
  margin-bottom: 20px;
  font-family: Touche, Arial, Helvetica, sans-serif;
  font-style: normal;
}
h1 span{
  font-family: Baskerville, "Times New Roman", Times, serif;
  font-size: clamp(50px, calc( 0.5 * (6vw + 1rem)), 100px);
  font-style: italic;
  transform: skewX(-10deg);
  display: inline-block;
}
h2{
	font-size: clamp(40px, calc( 0.5 * (5vw + 1rem)), 70px);
  font-weight: 400;
}
h2 span{
  font-family: Baskerville, "Times New Roman", Times, serif;
  font-size: clamp(40px, calc( 0.5 * (6.5vw + 1rem)), 100px);
  font-style: italic;
  transform: skewX(-10deg);
  display: inline-block;
  text-transform: lowercase;
}
h3{
	font-size: clamp(30px, calc( 0.5 * (4vw + 1rem)), 60px);
  font-weight: 400;
}
h3 span{
  font-family: Baskerville, "Times New Roman", Times, serif;
  font-size: clamp(40px, calc( 0.5 * (6vw + 1rem)), 100px);
  font-style: italic;
  transform: skewX(-10deg);
  display: inline-block;
  text-transform: lowercase;
}
h4{
  font-family: Baskerville, "Times New Roman", Times, serif;
  font-size: clamp(30px, calc( 0.5 * (3vw + 1rem)), 50px);
  font-weight: 400;
}
h4 span{
  font-family: Baskerville, "Times New Roman", Times, serif;
  font-style: italic;
  display: inline-block;
  text-transform: lowercase;
}
h5{
  font-family: Baskerville, "Times New Roman", Times, serif;
  font-size: clamp(20px, calc( 0.5 * (2vw + 1rem)), 35px);
  font-weight: 400;
  font-style: italic;
}
h6{
	font-size: clamp(20px, calc( 0.5 * (1vw + 1rem)), 24px);
  font-weight: 400;
  margin-bottom: 20px;
}

header nav a{
  color:#fff;
  font-family: Touche, Arial, Helvetica, sans-serif;
}

/*
main h2:after,
main h3:after,
h1.b1:after,
.sp li h4:after{
  content: "";
  height: 5px;
  width: 0;
  display: block;
  background: #2c2c2c;
  opacity: 0;
  transition: all 1s ease .5s;
}
*/

/*
main h2:after, main h3:after{
  height: 40px;
  width: 100px;
  margin-top: -40px;
  margin-left: -20px;
  background: #e7e7e994;
}
*/

main section.active h2:after,
main section.active h3:after,
main section.active h1.b1:after,
main section.active h1.p1:after{
  opacity: 1;
  width: 22px;
}

hr {
  border: 0;
  height: 1px;
  width: 100%;
  background: #2c2c2c;
  margin-bottom: 65px;
}

a{
	font-family: Touche, Arial, Helvetica, sans-serif;
	text-decoration:none;
	outline: 0;
  color: #2c2c2c;
  transform: translate3d(0, 0, 0);
}

main p span a,
main p > a:not(.cta):not(.readmore),
main p strong > a:not(.cta):not(.readmore){
  font-weight: 500;
}
main p span a:hover,
main p > a:not(.cta):not(.readmore):hover,
main p strong > a:not(.cta):not(.readmore):hover{
  text-decoration: underline;
}


a:hover, a:focus, a:active{
	text-decoration:none;
	outline: 0;
	color:#2c2c2c;
}

ul, li{
	padding:0;
	margin:0;
	color:#2c2c2c;
  list-style: none;
}

ol{
  padding-left: 20px;
}
ol li{
  list-style: auto;
  margin-bottom: 10px;
}

.single-post article ul li {
  padding-left: 20px;
}
.single-post article ul li:before {
    content: "";
    width: 5px;
    height: 5px;
    display: inline-block;
    border-radius: 50%;
    margin-left: -17px;
    margin-right: 10px;
    background: #2c2c2c;
}

.single-post .col > ul{
  margin: 0.5em 0 1em 0;
}

.single-post .col > ul li{
  margin-left: 30px;
}


main .col p li:before {
  content: "";
  width:5px;
  height: 5px;
  display: inline-block;
  border-radius: 50%;
  margin-left: -17px;
  margin-right: 10px;
  background: #2c2c2c;
}


nav li{
  list-style: none;
}

strong, b {
	font-weight: 600;
}

input,
select,
textarea{

}
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

/*
blockquote {
  position: relative;
  padding: 20px 30px;
  font-family: Baskerville, "Times New Roman", Times, serif;
  font-style: italic;
  transform: skewX(-10deg);
}
blockquote:before, blockquote:after {
  position: absolute;
  font-size: 50px;
}
blockquote:before {
  content:'“';
  top: -5px;
  left: 0;
}
blockquote:after {
  content:'”';
  bottom: -5px;
  right: 0;
}

blockquote cite{
  margin-top: 20px;
}
blockquote cite:before {
  content:'-';
  display: inline-block;
  margin-right: 10px;
}
/*
blockquote:after {
  content:'”';
  bottom: -50px;
  right: 0;
}
*/

blockquote{
  max-width: 300px;
  padding: 0 30px;
position: relative;
margin: 10px auto;

  font-size: 14px;
  font-family: Baskerville, "Times New Roman", Times, serif;
  font-style: italic;
  transform: skewX(-10deg);
}
cite{
  font-size: 12px;
}

main img, video{
  width: 100%;
  max-width:100%;
  height:auto;
}

header img{
  height: auto;
  width: 100%;
}
.hero{
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

img.alignright{
  float:right;
  margin-left:1.5em;
}
img.alignleft{
  float:left;
  margin-right:1.5em;
}
img.aligncenter {
	display: block;
	margin:0 auto;
}

img.icon{
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom:15px;
}
img.icon.small{
  width: 35px;
  height: 35px;
}
img.icon.large{
  width: 85px;
  height: 85px;
}

main img{
  object-fit: cover;
}

figure{
  margin: 0;
  padding: 0;
}
.col > figure{
  width: 100%;
}

main .col > img.wp-post-image{
  /*display: block;*/
}

main{
  width: 100%;
  /*margin: calc(100vh + 150px) 0 100vh;*/
  background: #fff;
  position: relative;
  overflow: hidden;
}

main > * {
  flex: 1 100%;
}

section{
  position: relative;
  padding: 100px 0;
  padding: 5vh 0;
}


.row, section > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 0 40px;
  max-width: calc(100% - 80px);
  margin: 20px auto;
  justify-items: center;
  position: relative;
  z-index: 1;
}

main .row, main section > div, footer .row {
  max-width: 1270px;
}

article section > div, nav > div{
  grid-gap: 20px;
}

ul.row{
  width: 100%;
}

section > div.full {
  grid-gap: 0;
  width:100%;
  max-width: 100%;
}

.col,
section > div > div{
  width: 100%;
  /*padding: 15px;*/
  /* max-width: 1270px; */
  position: relative;
  margin: 20px auto;
}

/*
.col,
section > div > div:not(.slider-container),
nav > div > div{
  width: 100%;
  padding: 15px;
  position: relative;
}
*/

.break{
  font-style: italic;
  transform: skewX(-10deg);
  text-transform: capitalize;
  font-family: Baskerville, "Times New Roman", Times, serif;
  color: #fff;
  margin-bottom: 50px;
}
.break:before,
.break:after{
  content: "";
  display: inline-block;
  width: 60px;
  height: 1px;
  background: #fff;
  margin: 5px 10px;
}

.slider-container{
  display:block;
  width:100%;
}

.container{

}
.content{

}

.search ul.row > li{
  width:100%;
}

header .container{
  padding: 0;
}

.home header .container{
  padding: clamp(100px, 23vh, 250px) 0 0;
}

.bold{
  font-weight: bold;
}
/*
main .col{
  max-width: 600px;
}
*/
.col.full{
  max-width: 100%;
}

.row.centered{
  max-width: 950px;
  text-align: center;
}
.col.centered{
  max-width: 800px;
  text-align: center;
}
.container.centered{
  max-width: 650px;
  padding: 5% 0 0;
  text-align: center;
}
.content.centered{
  text-align: center;
}

.row.centered h2:after,
.row.centered h3:after,
.row.centered h4:after{
  margin: 0 auto;
}

.right{
  text-align: right;
}

.mobile{
  display: none;
}

.usps .icon{
  opacity: 0;
  transform: scale(0);
}
.active .usps > div:nth-child(1) .icon{
  animation: show .8s forwards .3s;
}
.active .usps > div:nth-child(2) .icon{
  animation: show .8s forwards .6s;
}
.active .usps > div:nth-child(3) .icon{
  animation: show .8s forwards .9s;
}

@keyframes show {
  50‰{
    opacity: 1;
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
  }
  100%{
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

/*
.usps > div:before{
  content:"";
  display:block;
  width:250px;
  height: 250px;
  position: absolute;
  background: #f2f2f2;
  z-index: -1;
  border-radius: 50%;
  left: 50%;
  transform: translate(-50%, 30%);
}
*/
.self h2{
  position: absolute;
  left: -5%;
}
.self h2 span:nth-child(1){
  font-size: clamp(50px, calc( 0.5 * (13vw + 1rem)), 150px);
  text-transform: uppercase;
  margin-left: 100px;
}
.self h2 span:nth-child(2){
  font-size: clamp(50px, calc( 0.5 * (18vw + 1rem)), 150px);
  text-transform: uppercase;
  float: left;
}
.self h2 span:nth-child(3){
  font-size: 35px;
  text-transform: uppercase;
}
.self h2 span:nth-child(4){
  font-size: clamp(50px, calc( 0.5 * (18vw + 1rem)), 150px);
  text-transform: uppercase;
  margin-left: 200px;
}

.self img{
  height: 450px;
  border-radius:10px;
  margin-bottom: 20px;
  object-fit:cover;
  object-position: top;
}

/*
main:after{
  content: "";
  position: absolute;
  bottom: -150px;
  width: 100%;
  height: 150px;
  background-image: url(assets/img/paper.png);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  transform: rotate(180deg);
}
*/


.arch-container{
  background: #e4e1d8;
}
.arch-container .row{
  z-index: 1;
  margin: 200px auto;
}
.arch{
  content: "";
  display: block;
  position: absolute;
  overflow: hidden;
  bottom:0;
  left: 50%;;
  transform: translate(-50%);
  height: 20vw;
  width: 20vw;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  z-index: 0;
  background: #fff;
}

.key-hole{
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 80px;
  padding: 0;
  border: .5px solid #fff;
  border-top-left-radius: 3em;
  border-top-right-radius: 3em;
  box-shadow: 0 0 20px rgba(255,255,255,.3);
  background-image: url(assets/img/icons/arrow-down-white-slim.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px;
}

/**/

.rama-round {
    display: inline-block;
    height: 200px;
    width: 200px;
    /*background: url(assets/img/rama-mirror.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    */
    position: absolute;
    bottom: -130px;
    right: calc(40% - 600px);
    display: inline-block;
    z-index: 2;
}
.rama-round div{
    display: inline-block;
    height: 300px;
    width: 300px;
    background: url(assets/img/empowering-wellbeing.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: -50px;
    left: -50px;
    display: inline-block;
}

.wc-booking-count{
  font-size: 15px;
}
.wc-booking-count:before{
  content:"";
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-right: 10px;
  background: url(assets/img/star-1.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
/*
.wc-booking-count:after{
  content:"";
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-left: 10px;
  background: url(assets/img/star-2.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
*/
.wc-booking-count:after{
  content:"";
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-left: 10px;
  background: url(assets/img/icons/celebration.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.unicorn:before{
  content:"";
  display: inline-block;
  height: 20px;
  width: 20px;
  vertical-align: middle;
  margin-right: 5px;
  background: url(assets/img/icons/unicorn.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}


.wc-bookings-availability-meta{
  font-size: 13px!important;
}

.woocommerce.slick-slide{
  display: none!important;
}
/* Marquee Base */
.marquee {
  display: flex;
  overflow: hidden;
  --marquee-count: 8;
  --marquee-speed: 16;
}
.marquee--overflow-visible {
  overflow: visible;
}
.marquee--paused .marquee__item {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  font-family: Baskerville, "Times New Roman", Times, serif;
  font-style: italic;
  color:#4f593b;
  transform: skewX(-10deg);

  --marquee-item-position: calc(var(--marquee-item-index) + 1);
  --duration: calc(var(--marquee-speed) * 1s);
  --duration-per-item: calc(var(--duration) / var(--marquee-count));
  --delay: calc(-1 * var(--duration-per-item) * (var(--marquee-count) - var(--marquee-item-position)));
  -webkit-animation: marquee var(--duration) var(--delay) linear infinite;
  animation: marquee var(--duration) var(--delay) linear infinite;
}

@-webkit-keyframes marquee {
  from {
    translate: calc(100% * (var(--marquee-count) - var(--marquee-item-position)));
  }
  to {
    translate: calc(-100% * var(--marquee-item-position));
  }
}

@keyframes marquee {
  from {
    translate: calc(100% * (var(--marquee-count) - var(--marquee-item-position)));
  }
  to {
    translate: calc(-100% * var(--marquee-item-position));
  }
}

.marquee-container {
  width: 100%;
}
.marquee__item{
  background: none;
  border: none;
  width: 16%
}

#standard-products .row .col:first-child,
#coffee-pouches .row .col:first-child,
#easy-ordering .row .col:first-child{
  order: 2;
}
#standard-products .row .col:last-child,
#coffee-pouches .row .col:last-child,
#easy-ordering .row .col:last-child{
  order: 1;
}

.blts ul li{
  font-size: 19px;
  font-weight: 400;
  opacity: 0;
}
.blts ul li:before{
  content:"✓";
  color:#8bd0f8;
  font-size: 22px;
  margin-left: -20px;
  margin-right: 10px;
  margin-top: 10px;
}
.blts ul li:nth-child(1){
  transition: .2s ease .5s;
}
.active .blts ul li:nth-child(1){
  opacity: 1;
}
.blts ul li:nth-child(2){
  transition: .2s ease .7s;
}
.active .blts ul li:nth-child(2){
  opacity: 1;
}
.blts ul li:nth-child(3){
  transition: .2s ease .9s;
}
.active .blts ul li:nth-child(3){
  opacity: 1;
}
.blts ul li:nth-child(4){
  transition: .2s ease 1.1s;
}
.active .blts ul li:nth-child(4){
  opacity: 1;
}
.blts ul li:nth-child(5){
  transition: .2s ease 1.3s;
}
.active .blts ul li:nth-child(5){
  opacity: 1;
}
.blts ul li:nth-child(6){
  transition: .2s ease 1.5s;
}
.active .blts ul li:nth-child(6){
  opacity: 1;
}
.blts ul li:nth-child(7){
  transition: .2s ease 1.7s;
}
.active .blts ul li:nth-child(7){
  opacity: 1;
}
.blts ul li:nth-child(8){
  transition: .2s ease 1.9s;
}
.active .blts ul li:nth-child(8){
  opacity: 1;
}
.blts ul li:nth-child(9){
  transition: .2s ease 2.1s;
}
.active .blts ul li:nth-child(9){
  opacity: 1;
}
.blts ul li:nth-child(10){
  transition: .2s ease 2.3s;
}
.active .blts ul li:nth-child(10){
  opacity: 1;
}
.blts ul li:nth-child(11){
  transition: .2s ease 2.3s;
}
.active .blts ul li:nth-child(11){
  opacity: 1;
}
.blts ul li:nth-child(12){
  transition: .2s ease 2.3s;
}
.active .blts ul li:nth-child(12){
  opacity: 1;
}
.blts .cta{
  margin: 20px!important;
  transition: .2s ease 2.5s;
  opacity: 0;
}
.active .blts .cta{
  opacity:1;
}

/** HEADER **/
header{
  overflow: hidden;
  width: 100%;
  top: 0;
  height: auto;
  min-height: 150px;
  position: relative;
}

body > header:before{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: calc(100% + 150px);
  background: rgba(0,0,0,.30);
  /*filter: brightness(0.6) blur(0px) grayscale(1);*/
}
/*
body.home > header:after{
  content: "";
  position: absolute;
  bottom:0;
  width: 100%;
  height: 150px;
  background-image: url(assets/img/paper.png);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}
*/

nav.top-nav {
  background: transparent;
}

nav.top-nav .row{
  margin: 0 auto;
  max-width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
nav.top-nav .col{
  position: static;
}

nav.top-nav .cta.active{
  float: right;
}

.logo img{
  height: 30px;
  width: auto;
}
.logo svg, svg.logo{
  width: 200px;
}

nav .logo{
  float: left;
  z-index: 11;
  display: inline-block;
  font-size: 0;
}
nav .logo img{
  height: 25px;
}


/* .home */
h1{
  color:#fff;
}
.single-product main h1{
  color: #000;
}
header a.cta svg path{
  stroke:#fff;
}
.home header{
  height: calc(100vh + 150px);
  position: relative;
}
.home header h1{
  text-align: center;
}

.home header section nav{
	max-width: 470px;
	margin: 0 auto;
}
.home .login svg{
  fill:#2c2c2c;
}


.logo{
  filter: brightness(0) invert(1);
}

.content .logo{
  filter: brightness(0) invert(1);
}

.cart-btn, .user-btn{
  filter: brightness(0) invert(1);
}


.contact article > section:nth-child(1){
  background: #d7dcd2;
}

.contact article > section:nth-child(3){
  background: #95a1bc;
}


.catalogue-popup{
	display: none;
	position: fixed;
	top: 0;
	z-index: 22;
	width:100%;
	height: 100%;
	background: rgba(0,0,0,.8);
	text-align: center;
  overflow: scroll;
}
.catalogue-popup .content{
	width: 800px;
	margin-top: 5%;
	background: #fff;
	text-align: left;
	display: inline-block;
}
.catalogue-popup .content > div img{
	width: 100%;
  height: 100%;
  object-fit: none;
}
.catalogue-popup .content > div{
	width: 350px;
	height: 570px;
	padding: 20px;
	display: inline-block;
	position: relative;
}
.catalogue-popup .content > div:first-child{
	background: #f6f6f8;
	padding: 20px 0;
	width: 405px;
}
.catalogue-popup label{
	display: none;
}

@media (max-width: 767px) {
	.catalogue-popup .content {
    width: 90%;
    margin-top: 5%;
	}
	.catalogue-popup .content > div{
		width: auto;
	}
	.catalogue-popup .content > div:first-child{
		display: none;
	}
}

.woocommerce-account main nav li a{
  font-size: 14px;
  margin-bottom: 3px;
}
/**/
.page-template-booking main section{
  padding: 0;
}



.wc-bookings-spots{
  font-size: 14px;
}
.wc-bookings-spots:before{
  content:"";
  display: inline-block;
  height: 16px;
  width: 16px;
  background: url(assets/img/icons/spots.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  vertical-align: top;
  margin-right: 5px;
}
.wc-block-components-product-details__free-trial{
  display: none;
}
.wc-bookings-availability-item a{
  font-family: Baskerville, "Times New Roman", Times, serif;
  font-size: 16px;
  font-style: italic;
}

.wc-bookings-availability-item a, .wc-bookings-availability-item-information span{
  background: none!important;
}
.wc-bookings-availability-item-information{
  margin: 0;
  padding: 0;
}
.wc-bookings-availability-item{
  border: none!important;
  border-radius: 10px;
  padding: 10px!important;
  background: #f7f6f1;
}
.wc-bookings-availability-item.Reformer{
  background: #f7f6f1;
  border-left: 4px solid #ada573 !important;
}
.wc-bookings-availability-item.Baby{
  background: #e8f3ff;
  border-left: 4px solid #87b9ef !important;
}

.wc-bookings-availability-item.Mornings{
  background: #fbf2e1;
  border-left: 4px solid #feb903 !important;
}
.wc-bookings-availability-item.Pilates{
  background: #f4f5f1;
  border-left: 4px solid #93a170 !important;
}
.wc-bookings-availability-item.Power{
  background: #fdf0ee;
  border-left: 4px solid #ef6950 !important;
}
.wc-bookings-availability-item.Lagree{
  background: #ebefff;
  border-left: 4px solid #3e65ff !important;
}
.wc-bookings-availability-item.Lagree.Intro{
  background: #f5f0f7;
  border-left: 4px solid #9d6cb2 !important;
}
.wc-bookings-availability-item.Open{
  background: #f2f7f8;
  border-left: 4px solid #87b6c3 !important;
}
.wc-bookings-availability-item.Classic{
  background: #faf8f6;
  border-left: 4px solid #dbc1a5 !important;
}

.wc-bookings-availability-event-table .wc-bookings-availability-item div {
  font-size: 15px;
}

/* .subscriptions */
.subscription{
  margin: 20px;
  max-width: 600px;
  border: 1px solid #282828;
  border-radius: 10px;
  padding: 10px;
}
.subscription img{
  height: 250px;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* four membership cards in one row */
.subscriptions .row.four{
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0 28px;
}
.subscriptions .row.four .subscription{
  box-sizing: border-box;
  margin: 20px 0;
}
@media (max-width: 950px){
  .subscriptions .row.four{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px){
  .subscriptions .row.four{
    grid-template-columns: 1fr;
  }
}

.price *{
  font-size: 16px;
}
.price small.price-period{
  display: block;
  margin-top: 2px;
  font-size: 13px;
  opacity: 0.7;
}
.price small.price-period *{
  font-size: 13px;
}

/* .classes */
.class img{
  height: 450px;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.class{
  /*margin: 0 10px;*/
  border-radius: 10px;
  /*background: rgba(0,0,0,0.8);
  backdrop-filter: saturate(180%) blur(10px);*/
}

.wp-block-image img{
  height: 450px;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* .services */
.services, .testimonials{
  background-image: url(assets/img/shadows.webp);
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
}
/*
.services:before{
  content: "";
  display: block;
  width: 60%;
  height: 60%;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url(assets/img/blur1.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(180deg);
  z-index: 0;
}
.services:after{
  content: "";
  display: block;
  width: 60%;
  height: 60%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(assets/img/blur2.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
*/
.service{
  text-align: center;
}
.service h5{
  font-family: Baskerville, "Times New Roman", Times, serif;
  font-style: italic;
  transform: skewX(-10deg);
  text-transform: capitalize;
}
.service figure{
  text-align: center;
  margin: 20px;
  display: inline-block;
}
.service img{
  width: 200px;
  height: 350px;
  border-radius: 100px;
  display: inline-block;
}

.shop img{
  max-height: 500px;
  object-fit: contain;
}

.shop .row .col:first-child:after{
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #f7f6f1;
  opacity: 0.2;
}

.beige{
  background: #f7f6f1;
}

.app img{
  margin: calc(-5vh + -30px) 0 calc(-5vh + -45px);
}


/* .posts */
.post img{
  height: 300px;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

div.wp-block-group{
  margin: auto;
  max-width: 1270px;
}
hr.wp-block-separator{
  border-top: 1px solid;
  margin: 50px auto;
  background: none;
}

/**/
.testimonials{
  text-align: center;
}
.testimonials figure{
  height: 100px;
  width: 100px;
  display: inline-block;
  margin-bottom: 10px;
}
.testimonials img{
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

.star {
  height: 20px;
  width: 20px;
  margin: 2px;
  background-image: url(assets/img/star.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
}
.star.half{
      position:relative;
}

/* Categories */
.slick-track {
  width: fit-content;
}

.single-post section, .single-product section{
  padding: 0;
}
.product_meta{
  display: none;
}

.single-post header section .col .content p{
  margin-top: 0;
}


/* Social */
#social .row .col:first-child {
  order: 2;
}


.logo svg path, .logo svg rect{
  opacity:0;
}
.logo svg > *:nth-child(1) *{
  animation:display .1s ease-in-out .0s forwards;
}
.logo svg > *:nth-child(2){
  animation:display .1s ease-in-out .05s forwards;
  transform: translateX(-18%);
}
.logo svg > *:nth-child(3){
  animation:display .1s ease-in-out .15s forwards;
  transform: translateX(-18%);
}
.logo svg > *:nth-child(4){
  animation:display .1s ease-in-out .2s forwards;
  transform: translateX(-18%);
}
.logo svg > *:nth-child(5){
  animation:display .1s ease-in-out .25s forwards;
  transform: translateX(-18%);
}
.logo svg > *:nth-child(6){
  animation:display .1s ease-in-out .3s forwards;
  transform: translateX(-18%);
}
@keyframes display {
  from {
    opacity:0
  }
  to {
    opacity:1;
    transform: translateX(0);
  }
}
header section .col{
  width: 100%;
}

.searchform{
  float: right;
}

.searchform{
  margin-right: 20px;
  display: inline-block;
}

.searchform > div{
  border: 1px solid #2c2c2c;
  border-radius: 3em;
  margin: 20px 0;
}

.searchform input[type=text]{
  border:none;
  background: none;
  font-size: 16px;
  font-weight: bold;
  width: 100px;
  vertical-align: middle;
}
.searchform input[type=submit]{
  font-size: 0;
  width:16px;
  height: 16px;
  vertical-align: inherit;
  cursor:pointer;
  border:none;
  background: none;
  background-image: url(assets/img/icons/search.png);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}



/* Categories Slider */
#catalogue{
  background: #cfd5e3;
}

#employees, #contact{
  background: #f2f2f2;
}
.page-id-29828 main section{
  background: rgba(121,142,110,0.3);
}

.slick-slide{
  outline: none;
  width: auto;
  width: calc(100vw - 40px);
  margin:20px;
}

.slick-dots li button:before{
  font-size: 20px;
}

button.slick-prev, button.slick-next{
  background: #f7f6f1!important;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  text-align: center;
}

button.slick-prev{
  left: 5px;
  z-index: 10;
}
button.slick-prev:before, button.slick-next:before{
  content:"";
  height: 14px;
  width:12px;
  background-image: url(assets/img/icons/slide-arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
button.slick-next{
  right: 5px;
}
button.slick-prev:before{
transform: rotate(-180deg);
}

.clients-slider{
  border-top: 1px solid #2c2c2c;
  border-bottom: 1px solid #2c2c2c;
  padding: 20px 0;
}
.clients-slider .slide{
  display: grid!important;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
}

.clients-slider .slide div{
  text-align: center;
}
.clients-slider .slide img{
  width: 100px;
  height: 100px;
  object-fit: contain;
  display: inline-block;
}



.slider h3{
  font-size: 7vh;
  /*margin-left: -20px;*/
  line-height: .8;
}
.slider h3:after{
  margin-left: 20px;
}

.home .slider .row .col:nth-child(1){
  display: none;
}

@media (max-width: 767px){
  .slick-slider {
    max-width: 100vw;
  }
  .clients-slider.slick-slider {
    max-width: calc(100vw - 40px);
  }
  .slider .row .col:nth-child(1){
    display: block;
  }
}

nav{
  position:relative;
}

.searchform {
  margin: 12px;
  display: none;
  position: relative;
  width: 200px;
  float: right;
}

.searchform:before {
  content: "";
  display: block;
  height: 1.5px;
  width: 100%;
  background: rgba(255, 255, 255, .25);
  position: absolute;
  bottom: 0;
}

.searchform input[type=text] {
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  vertical-align: middle;
  color: #000;
  background: none;
  display: inline-block;
  outline: none;
}

.searchform input[type=text]:focus {
  outline: none;
}

.searchform ::placeholder {
  color: rgba(0, 0, 0, .25);
}

.searchform input[type=submit] {
  display: none;
}

.search-btn,
.user-btn,
.cart-btn,
.wishlist-btn {
  display: inline-block;
  padding: 14px 10px;
  cursor: pointer;
}

.user-btn a,
.cart-btn a,
.wishlist-btn a {
  line-height: 0;
}

.search-btn:before,
.user-btn a:before,
.cart-btn a:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.user-btn a span,
.wishlist-btn a span.wishlist_products_counter_number {
  display: inline-block;
  font-weight: 500;
}

.wishlist-btn a span.wishlist_products_counter_number {
  margin-right: -9px;
}

.cart-count {
  vertical-align: -3px;
  display: none;
}

.search-btn:before {
  background-image: url(assets/img/icons/search.svg);
}

.user-btn a:before {
  background-image: url(assets/img/icons/account.svg);
}

.cart-btn a:before {
  background-image: url(assets/img/icons/cart4.svg);
}

.wc-block-cart .wc-block-cart__submit-container--sticky{
  background: #fff!important;
}

/* Menu handler */
div.login, .cart-button{
  height: 30px;
  width: 30px;
  margin: 4px 0 1px;
  float: right;
  display: inline-block;
  margin-left:20px;
}

.menu-handler {
  height: 30px;
  width: 30px;
  padding:0;
  margin: 0;
  text-align: center;
  position: relative;
  display: none;
  cursor: pointer;
  float: right;
  z-index: 3;
}

.menu-handler:before {
  content: "";
  height: 2px;
  width: 30px;
  display: block;
  position: absolute;
  top: 10px;
  left: 0px;
  background: #fff;
  transition: all .3s ease;
}

.menu-handler:after {
  content: "";
  height: 2px;
  width: 20px;
  display: block;
  position: absolute;
  top: 17px;
  left: 5px;
  background: #fff;
  transition: all .3s ease;
}

.menu-handler:hover:before {
  left: -17px;
}

.menu-handler:hover:after {
  left: 41px;
}

.menu-handler.active:hover:before {
  transform: rotate(45deg);
  width: 20px;
  top: 25px;
  left: 0px;
}

.menu-handler.active:hover:after {
  transform: rotate(-45deg);
  width: 20px;
  top: 25px;
  left: 0px;
}


/* Main menu */
.menu a{
  color:#fff;
}
ul.main-menu li{
  display: inline-block;
  padding: 0;
  margin: 0;
  color: #2c2c2c;
  font-size: 16px;
  font-weight: 400;
  position: relative;
  margin-left: 20px;
}
ul.main-menu > li > ul li{
  padding: 0;
  display: block;
}
ul.main-menu li ul{
  display: none;
  position: absolute;
  left: 0;
  margin-top: 18px;
  width: max-content;
  min-width: -webkit-fill-available;
}

@media (min-width: 767px) {
  ul.main-menu > li > ul{
      box-shadow: 0px 5px 5px rgb(0 0 0 / 10%);
  }
  ul.main-menu > li > ul > li > ul{
      box-shadow: 5px 5px 5px rgb(0 0 0 / 10%);
  }
}



ul.main-menu > li:hover > ul,
ul.main-menu > li > ul > li:hover > ul{
  display: block;
}
ul.main-menu > li > ul > li > ul{
  top: 0;
  left: 100%;
  margin: 0;
  margin-left: -5px;
}

ul.main-menu li.menu-item-has-children:after{
  content:"";
  height: 20px;
  width:20px;
  background-image: url(assets/img/icons/arrow-black.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 0 0 0 7px;
  vertical-align: top;
  transition: transform .5s ease;
  display: none;
}

ul.main-menu > li ul li.menu-item-has-children:after{
  display: inline-block;
}

.menu-main-container{
  display: inline-block;
  position: relative;
  float: right;
}

.top-nav.expand .menu-main-container{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  padding-top: 150px;
  display: block;
  text-align: center;
  background: #f7f6f1;
  z-index: -1;
}
header .top-nav.expand li:not(.cta) a{
  color:#4f593b;
  margin-bottom: 20px;
  display: block;
  margin-bottom: 10px;
}

.top-nav.expand .menu-main-container div > ul.main-menu li{
  width: 100%;
  text-align: left;
}
.searchform{
  float: none;
}

.top-nav.expand .menu-main-container div > ul.main-menu li.menu-item-has-children:after{
  display: inline-block;
}
.top-nav.expand .menu-main-container div > ul.main-menu li ul{
  position: relative;
}

.top-nav.expand .menu-main-container div > ul.main-menu > li > ul > li > ul{
  left:0;
}

.top-nav.expand .menu-main-container div > ul.main-menu li.menu-item-has-children:hover:after{
  display: none;
}

.store{
  display: inline-block;
  padding: 10px 20px 5px;
  float:right;
  color: #2c2c2c;
  font-size: 20px;
  font-weight: 400;
  z-index: 11;
  position: relative;
}

.grecaptcha-badge {
    visibility: hidden;
    opacity: 0;
}

.cryptedmail:after {
  content: attr(data-name) "@" attr(data-domain) "." attr(data-tld);
}

.menu-handler{
  cursor: pointer;
  position: relative;
  z-index: 11;
}
.top-nav.expand .menu-handler:before{
  transform: rotate(45deg);
  top: 11px;
  width: 25px;
  background: #4f593b;
}
.top-nav.expand .menu-handler:after{
  transform: rotate(-45deg);
  left: 0px;
  top: 11px;
  width: 25px;
  background: #4f593b;
}

.login img{
  width: 100%;
  height: 100%;
}


/* Menu
.main-menu{
  position: fixed;
  overflow: scroll;
  right: 0;
  top: 0;
  height: 100vh;
  background: #fff;
  display: none;
  padding: 150px 5%;
  width: 90%;
  z-index: 10;
  line-height: 1.3;
  box-shadow: 2px 5px 30px rgba(0,0,0,0.2);
  transition: transform .3s ease-in-out;
}
.main-menu .row{
  max-width: 100%;
  width: 100%;
  justify-items:left;
}
li.menu-item{
  margin: 0;
}
.main-menu .row ul li.menu-item{
  margin: 10px 0;
}
.main-menu .row ul:not(#menu-social) li a{
  font-size: 5vh;
  font-weight: 400;
  position: relative;
  line-height: 1.3;
}
.main-menu .row ul li.current_page_item a{
  opacity: 1;
}

.main-menu .row ul li a{
  opacity: .2;
}
.main-menu .row ul:hover li a{
  opacity: .2;
}
.main-menu .row ul li a:hover{
  opacity: 1;
}

.main-menu ul li{
  transition:all 1s cubic-bezier(0.2, 1, 0.3, 1);
  opacity:0;
}

.top-nav.expand .main-menu ul li{
  transform: translateY(0);
  opacity:1;
}

.top-nav.expand .main-menu ul li:nth-child(1){
  transition-delay: .2s;
}
.top-nav.expand .main-menu ul li:nth-child(2){
  transition-delay: .35s;
}
.top-nav.expand .main-menu ul li:nth-child(3){
  transition-delay: .5s;
}
.top-nav.expand .main-menu ul li:nth-child(4){
  transition-delay: .65s;
}
.top-nav.expand .main-menu ul li:nth-child(5){
  transition-delay: .7s;
}
.top-nav.expand .main-menu ul li:nth-child(6){
  transition-delay: .85s;
}
.top-nav.expand .main-menu ul li:nth-child(7){
  transition-delay: 1s;
}
.top-nav.expand .main-menu ul li:nth-child(8){
  transition-delay: 1.15s;
}
.top-nav.expand .main-menu ul li:nth-child(9){
  transition-delay: 1.3s;
}
.top-nav.expand .main-menu ul li:nth-child(10){
  transition-delay: 1.45s;
}
*/

.menu-item-has-children:hover ul{
  opacity: 1;
  height: auto;
}
.menu-item-has-children:hover > a:after{
  transform: rotate(180deg);
}

li.menu-item a{
  position: relative;
}
li.menu-item a:hover{
  color:#4f593b;
}

.top-nav.expand .main-menu{
  transform: translateX(0%);
}

.wc-block-components-shipping-rates-control{
  display: none;
}
/**/
.wp-block-woocommerce-cart-order-summary-totals-block,
.wp-block-woocommerce-cart-order-summary-shipping-block,
.wp-block-woocommerce-cart-order-summary-coupon-form-block,
.wp-block-woocommerce-cart-order-summary-block div:nth-child(4).wc-block-components-totals-wrapper{
  display: none!important;
}
.woocommerce form .form-row-first, .woocommerce-page form .form-row-first{
  float: none;
}

/* CTA */
.cta, .cta a,
.wp-element-button,
.wpcf7-submit,
.single_add_to_cart_button,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce button.button.alt.disabled,
button.wp-block-button__link,
.woocommerce a.button{
  display: inline-block;
  padding: 15px 15px;
  min-width: 135px;
  color: #fff;
  font-size: 13px;
	font-weight: 500;
  background: #4f593b;
  border-radius: 3em;
  border:1px solid #4f593b;
  transition: background .1s ease-in-out, border .1s ease-in-out;
  cursor: pointer;
  text-align: center;
  opacity: 1;
}
.cta:hover, .cta:hover a,
.wp-element-button:hover,
.wpcf7-submit:hover,
.single_add_to_cart_button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt.disabled:hover,
button.wp-block-button__link:hover,
.woocommerce a.button:hover{
  color: #4f593b;
  background: #fff;
  border:1px solid #fff;
}

.single-product .quantity{
  display: none;
}

a.cta svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
a.cta svg path {
  fill-opacity: 0;
  stroke: #282828;
  stroke-width: 1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  display: none;
}
header div.col > a.cta svg path {
  display: block;
  animation: draw 5s linear infinite;
}
a.cta.active, section.active a.cta svg path{
  display: block;
  animation: draw 5s linear infinite;
}
header a.cta:hover svg path, header div.col > a.cta:hover svg path, section.active .cta:hover svg path{
  display: block;
  animation: draw2 5s linear infinite;
}

@keyframes draw {
  25% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw2 {
  25% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}


.cta.disabled{
  opacity: .65;
  cursor: initial;
}

nav .cta, header .cta{
  color: #fff;
}

.mindbody-widget:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 200px;
    background: #fff;
}

.wpcf7 form.sent .wpcf7-response-output {
  border: none!important;
  color: #46b450;
  font-size: 20px;
}


.sigle article{
  border-bottom: 1px solid #2c2c2c;
}

.cta.clear{
  text-transform: capitalize;
  color: #4f593b;
  background: none;
  border: 1px solid #4f593b;
  box-shadow: none;
}
.cta.clear:after{
  filter: invert();
}

.cta.white{
  color: #4f593b;
  background: #fff;
  border: 1px solid #fff;
  margin-left: 20px;
}
.cta.white:hover{
  color: #fff;
  background: none;
  border-color: #fff;
  margin-left: 20px;
}
.cta.white:after{
  filter: invert();
}

.readmore{
  position: relative;
  font-size: clamp(12px, calc( 0.5 * (.25vw + 1rem)), 24px);
}


.more:after{
  content:"";
  display: inline-block;
  height: 16px;
  width: 20px;
  background-image: url(assets/img/icons/arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-left: 4px;
  margin-bottom: 2px;
}

/*
.readmore:before, main .cta:before, .woocommerce button.button:before{
  content:"";
  display: inline-block;
  height: 50px;
  width: 130px;
  left: 50%;
  top:5px;
  transform: translateX(-50%);
  position: absolute;
  background-image: url(assets/img/p.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.readmore:hover:before, main .cta:hover:before, .woocommerce button.button:hover:before{
  background-image: url(assets/img/p2.svg);
}
*/

.min_read{
  font-size: 16px;
}


section.active .readmore{
  visibility: visible;
  opacity: 1;
}


/* Contact */
.contact-button{
  position: fixed;
  cursor: pointer;
  right: 5%;
  bottom: 50px;
  font-size: 22px;
  font-weight: 400;
  color:#2c2c2c;
  z-index: 10;
}
.contact-button svg{
  height: 40px;
  width: 40px;
  display: block;
}

.contact-form{
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(16px);
  border-radius: 3px;
  padding: 30px;
  box-shadow: 0px 2px 20px rgba(0,0,0,.15);
}
.contact-form input:not([type=submit]),
.contact-form textarea{
  width:calc(100% - 20px);
  border: 1px solid rgb(209, 209, 209);
  color: rgb(31, 31, 31);
  box-shadow: rgb(0 0 0 / 4%) 1px 1px 3px;
  transition: border-radius 200ms ease 0s;
  padding: 8px 10px;
}

.contact-box {
    position: fixed;
    overflow: hidden;
    z-index: 21;
    bottom: 20px;
    left: 20px;
    width: 440px;
    border-radius: 3px;
    box-shadow: 0px 2px 20px rgba(0,0,0,.1);
    background: #fff;
    backdrop-filter: blur(16px);
    font-size: 20px;
    font-weight: 400;
    padding: 20px;
    opacity: 0;
    transform: translateX(150%);
    transition: all .2s ease;
}

.contact-box:hover{
  box-shadow: 0px 10px 20px rgba(0,0,0,.15);
}

.contact-box:before{
  content: "";
  width: 50px;
  height: 50px;
  background-image: url(assets/img/icons/paper_plane.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  margin-right: 10px;
  vertical-align: bottom;
}
.contact-box div{
  display: inline-block;
  width: calc(100% - 70px);
  vertical-align: baseline;
}
.contact-box h4 {
  font-size: 18px;
  color: #7eb7f4;
  margin: 0;
}
.contact-box p {
  margin: 0;
  font-size: 14px;
}
.contact-box svg {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}
.close {
    position: absolute;
    z-index: 99;
    cursor: pointer;
    top: 20px;
    right: 20px;
  transition: transform .2s ease;
}
.close:hover{
  transform: scale(1.3);
}
.contact-box.active{
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 767px) {
  .contact-box{
    width: calc(100% - 62px);
    padding: 10px;
  }
  .contact-box div{
    display: block;
    width: auto;
  }
  .contact-box:before{
    display: none;
  }
  .contact-box span {
    top: auto;
    bottom: 10px;
    right: 10px;
    font-size: 15px;
  }
}

/* home */
.col.bx-l:before{
  content:"";
  display:block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 90%;
  height: 80%;
  background: #f2f2f2;
  transform: translate(250px, 100px);
  z-index: -2;
}
.col.bx-r:before{
  content:"";
  display:block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 90%;
  height: 80%;
  background: #f2f2f2;
  transform: translate(-250px, 100px);
  z-index: -2;
}


nav.top-nav{
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10;
  transition: all 1s ease;
}

/*
header section .col{
  text-align: left;
  position: relative;
}
*/

.sp{
  grid-gap: 60px;
}

.sp li{
  border:1px solid #888;
  background: #fff;
  height: fit-content;
  min-height: 360px;
  padding: 20px;
  opacity: 0;
  transition: opacity .5s ease;
}
.sp li h4{
  font-size: 22px;
}

.active .sp li{
  opacity: 1;
}
.active .sp li:nth-child(1) {
    transition-delay: .3s;
}
.active .sp li:nth-child(2) {
    transition-delay: .6s;
}
.active .sp li:nth-child(3) {
    transition-delay: .9s;
}
.active .sp li:nth-child(4) {
    transition-delay: 1.2s;
}
.active .sp li:nth-child(5) {
    transition-delay: 1.5s;
}
.active .sp li:nth-child(6) {
    transition-delay: 1.8s;
}
.active .sp li h4:after{
  opacity: 1;
  width: 50px;
}


a.label > label {
  position: absolute;
  width: 80px;
  margin:60px;
  border-radius: 50%;
  z-index: 999;
  background-color: #f2f2f2;
  transition:transform .5s ease;
  text-align:center;
  font-size:18px;
  padding:12px 0;
  line-height:1;
  cursor: pointer;
  transform: scale(0);
}
.active a.label:nth-child(4) label{
  animation: labels 1.5s linear 3s forwards;
}
.active a.label:nth-child(6) label{
  animation: labels 1.5s linear 4s forwards;
}

@keyframes labels {
  0% {
      transform: scale(0);
  }
  25% {
      transform: scale(1);
  }
  75% {
      transform: scale(1);
  }
  100% {
      transform: scale(0);
  }
}

a.label:hover label{
  transform:scale(1)!important;
}

.home header  div > a.label:nth-child(4) img{
  animation: img1s 1.5s linear 3s forwards;
}

@keyframes img1s {
  0% {
    transform:rotate(20deg) scale(1.0);
  }
  25% {
    transform:rotate(20deg) scale(1.1);
  }
  75% {
    transform:rotate(20deg) scale(1.1);
  }
  100% {
    transform:rotate(20deg) scale(1.0);
  }
}
.home header  div > a.label:nth-child(6) img{
  animation: img2s 1.5s linear 4s forwards;
}

@keyframes img2s {
  0% {
    transform:rotate(45deg) scale(1.0);
  }
  25% {
    transform:rotate(45deg) scale(1.1);
  }
  75% {
    transform:rotate(45deg) scale(1.1);
  }
  100% {
    transform:rotate(45deg) scale(1.0);
  }
}

a.label img{
  transition:transform .5s ease!important;
}


.questions img{
  position: absolute;
  bottom:-100px;
  left: 5%;
  transform: none!important;
}

.polaroid{
  margin-top: 150px;
}
.polaroid img{
  position: absolute;
  bottom:-100px;
  left: 5%;
  width: 56%;
  transform: none!important;
}
.active.polaroid img:nth-child(1){
  filter: drop-shadow(-10px -15px 15px rgba(0,0,0,.1));
}
.active.polaroid img:nth-child(2){
  transition: opacity 10s ease;
  opacity: 0;
}

header section{
  padding: 100px 0 0;
}

/*
header section .col > a h4:after{
  content:"";
  position: absolute;
  left: 0;
  bottom: -10px;
  transition: .2s;
  height: 3px;
  width: 0;
  border-radius: 3px;
  background: #2c2c2c;
  display: block;
}
header section .col > a:hover h4:after{
  width: 100%;
}
*/

/* About Us */

/* Team */
.team figure{
  height: 400px;
  background: #f2f2f2;
  background-image: url(assets/img/icons/team.png);
  background-size: 50px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
}
.team img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 20px;
}
.team h5{
  font-size: 20px;
  font-weight: 500;
  margin-top: 10px;
}
.team .row{
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="radio"] {
    display: none;
}
input[type="radio"] +label {
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0 30px;
    position: relative;
}
.contact-form input[type="radio"] +label{
    display: block;
}

input[type="radio"] +label::before {
    -webkit-transition: all 250ms cubic-bezier(.4,.25,.3,1);
    transition: all .2s cubic-bezier(.4,.25,.3,1);
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #2c2c2c;
    border: 0px solid #2c2c2c;
    font-size: 0;
    position: absolute;
    top: -2px;
    left: 10px;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}
input[type="radio"] +label::after {
    -webkit-transition: all 250ms cubic-bezier(.4,.25,.3,1);
    transition: all .2s cubic-bezier(.4,.25,.3,1);
    content: "";
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: #2c2c2c;
    position: absolute;
    top: 3px;
    left: 10px;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}
input[type="radio"]:checked + label::before {
    background-color: transparent;
    width: 20px;
    height: 20px;
    border-width: 2px;
}
input[type="radio"]:checked + label::after {
    width: 15px;
    height: 15px;
}


/* Client */
.clients h3{
  font-size: 30px;
}
.clients ul.row{
  grid-gap: 0;
  margin: 0;
}
.clients > .row:nth-child(5) > .col:nth-child(2){
  border-right: 2px solid #2c2c2c;
  border-left: 2px solid #2c2c2c;
}
.clients hr{
  width: 100%;
  max-width: 1270px;
  height: 2px;
  background: #2c2c2c;
}
.clients img{
  width:150px;
  height: 100px;
  object-fit: contain;
}

.clients a img{
  transition: all .2s ease;
}
.clients a:hover img{
  transform: scale(1.1);
}

/*
.single-client header section,
.single-post header section{
  background-size: cover;
  height: 50vh;
}
*/

/* FAQs */
.faqs > li{
  padding: 20px 0;
  border-top:1px solid #2c2c2c;
  cursor: pointer;
  margin: 0;
  color:#2c2c2c;
  position: relative;
}
.faqs > li:hover{

}
.faqs > li h6,
.faqs > li p{
  margin: 5px 50px 0 0;
}
.faqs > li p,
.faqs > li > ul,
.faqs > li > ol{
  display: none;
}
.faqs > li:focus p,
.faqs > li:focus ul,
.faqs > li:focus ol{
  display: block;
}
.faqs > li:after{
  content: "+";
  font-size: 30px;
  border-radius: 50%;
  background: #2c2c2c;
  color:#fff;
  line-height: 1.04;
  padding: 10px;
  height: 20px;
  width: 20px;
  text-align: center;
  display: inline-block;
  position: absolute;
  top: 15px;
  right: 0;
  transition: transform .3s ease;
}
.faqs > li:hover:after{
  transform: rotate(180deg);
}
.faqs > li.active:after{
  content:"-";
  line-height: .9;
  padding: 10px;
  height: 20px;
  width: 20px;
  text-align: center;
}

/* breadcrumbs */
.meta-data > p{
  display: inline-block;
}
.meta-data hr{
  display: inline-block;
  width: 100%;
  height: 30px;
  background: #2c2c2c;
}
.post-date{
  float: right;
  visibility: hidden;
}
.breadcrumbs span,
.breadcrumbs a {
  font-size: 14px;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
.breadcrumbs a.home:after {
  right: -15px;
}
.icon-home{
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  background-image: url(assets/img/icons/home.svg);
  vertical-align: middle;
}


/* Packaging */
.home-options{
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 0;
}
.home-options div{
  height: 400px;
  position: relative;
}
.home-options img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.home-options h5{
  position: absolute;
  bottom: 20px;
  left: 50px;
  color: #fff;
  font-size: 35px;
  font-weight: 500;
  text-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

.btn-icon{
  content:"";
  display:block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: 18px solid #2c2c2c;
  border-bottom: 10px solid transparent;
  position:absolute;
  left:24px;
  top:20px;
}

.footer-menu li{
  display: inline-block;
  margin:15px;
}
/* footer */
footer{
  background: #f7f6f1;
  position: relative;
}
footer p, footer a{
  font-size: 12px;
  margin-bottom: 20px;
}
footer h4{
  font-size: 50px;
}
footer h4 span{
  display: block;
}

footer section > div{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

footer section:not(:first-child){
  background: #f6f2ee;
  border-top: 1px solid #e9e2db;
}

footer .logo{
  filter: invert(0);
}

form label{
  font-weight: bold;
}

form{
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.contact > div{
  margin-bottom: 20px;
}
.contact div > div{
  display: inline-block;
  margin-right: 20px;
}
.contact p{
  margin: 0;
}

input, textarea{
  background: #f6f2ee;
  border-radius: 15px;
  border: 1px solid #e9e2db;
  padding: 10px;
  width: calc(100% - 20px);
}




  .reviews-wrap { max-width: 900px; margin: 50px auto; }
  .reviews-header { display: flex; align-items: center; gap: 16px; margin-bottom: 1.5rem; }
  .avg-score { font-size: 48px; font-weight: 500; line-height: 1; margin-top: 10px; }
  .avg-meta { display: inline-block;; flex-direction: column; gap: 4px; }
  .avg-meta div{ display: block!important;}
  .stars { color: #F5A623; font-size: 20px; letter-spacing: 2px; }
  .reviews-count { font-size: 13px; color: #666; }
  .google-badge { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #666; margin-top: 4px; }
  .google-g { width: 16px; height: 16px; }
  .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
  .review-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 12px; padding: 1rem 1.25rem; }
  .reviewer { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; flex-shrink: 0; }
  .reviewer-info { flex: 1; min-width: 0; }
  .reviewer-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .review-date { font-size: 12px; color: #888; }
  .review-stars { color: #F5A623; font-size: 13px; margin-bottom: 6px; }
  .review-text { font-size: 13px; color: #555; line-height: 1.6; }


/* Language Switcher */
/* Language switcher is now injected as a .lang-switch-item menu item (see functions.php),
   so it inherits all menu-item styling automatically. */


/* Social */
.menu-social-container{
}
.menu-social-container li{
  display: inline-block;
}
.menu-social-container li a{
  display: inline-block;
  font-size: 0;
	width: 20px;
  height: 20px;
  margin: 10px 10px 0 0;
}

.menu-social-container li a:hover,
.menu-social-container li a:hover:before{
  filter: invert();
}

.menu-social-container li a:before{
  content:"";
	width: 20px;
  height: 20px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.smiley:before{
  content:"";
	width: 120px;
  height: 30px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.facebook a:before {
  background-image: url(assets/img/icons/social/facebook.svg);
}
.instagram a:before {
  background-image: url(assets/img/icons/social/instagram.svg);
}
.tiktok a:before {
  background-image: url(assets/img/icons/social/tiktok.svg);
}
.x a:before {
  background-image: url(assets/img/icons/social/x.svg);
}
.linkedin a:before {
  background-image: url(assets/img/icons/social/linkedin.svg);
}
.scroll-top a:before {
  background-image: url(assets/img/icons/arrow.svg);
  transform: rotate(-90deg);
}

.facebook a:hover:before {
  background-image: url(assets/img/icons/social/facebook.svg);
}
.instagram a:hover:before {
  background-image: url(assets/img/icons/social/instagram.svg);
}
.tiktok a:hover:before {
  background-image: url(assets/img/icons/social/tiktok.svg);
}
.x a:hover:before {
  background-image: url(assets/img/icons/social/x.svg);
}
.linkedin a:hover:before {
  background-image: url(assets/img/icons/social/linkedin.svg);
}

.scroll-top a:hover:before {
  background-image: url(assets/img/icons/arrow.svg);
  transform: rotate(-90deg);
}

.smiley:before{
  background-image: url(assets/img/icons/Smiley.jpg);
}

footer .col.grey{
  background: #f2f2f2;
  max-width: 900px;
  margin: 50px auto;
}


a.arrow{
  font-size: 20px;
  font-weight: 400;
  width: 100%;
  border-top: 1px solid;
  border-bottom: 1px solid;
  display: block;
  padding: 20px 0;'
}
a.arrow:before{
  float: right;
  width: 38px;
  height: 38px;
  background: #2c2c2c;
  border: 1px solid #2c2c2c;
  border-radius: 50%;
  display: inline-block;
  content:"";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
  margin-top: -10px;
  background-image: url(assets/img/icons/arrow-white.svg);
  transform: rotate(0deg);
}
a.arrow:hover:before{
  filter: invert();
  border: 1px solid #fff;
}

/*** Section active ***/
body.js main div > p,
body.js main div > h2,
body.js main div > h3,
body.js main div > h4,
body.js main div > h5,
body.js main div > h6,
body.js main section div > ul li:not(.col){
  transition: all .8s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
  opacity: 0;
  transform: translateY(20px);
}

body.js main figure img{
  transition: all .8s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}
body.js main a.cta,
body.js main section img.icon{
  transition: all .5s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
}

body.js main section.active div > p,
body.js main section.active div > h2,
body.js main section.active div > h3,
body.js main section.active div > h4,
body.js main section.active div > h5,
body.js main section.active div > h6,
body.js main section.active figure img,
body.js main section.active div a.cta,
body.js main section.active div > ul li:not(.col),
body.js main section.active img.icon{
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
  opacity: 1;
  transform: translateY(0);
}

body.js main section.active figure img {
  transition-delay: 0s;
}


body.js main section.active div > *:nth-child(1),
body.js section.active div ul li:nth-child(1){
  transition-delay: .1s;
}
body.js main section.active div > *:nth-child(2),
body.js section.active div ul li:nth-child(2){
  transition-delay: .3s;
}
body.js main section.active div > *:nth-child(3), body.js section.active div ul li:nth-child(3){
  transition-delay: .5s;
}
body.js main section.active div > *:nth-child(4), body.js section.active div ul li:nth-child(4){
  transition-delay: .7s;
}
body.js main section.active div > *:nth-child(5), body.js section.active div ul li:nth-child(5){
  transition-delay: .9s;
}
body.js main section.active div > *:nth-child(6), body.js section.active div ul li:nth-child(6){
  transition-delay: 1.1s;
}
body.js main section.active div > *:nth-child(7), body.js section.active div ul li:nth-child(7){
  transition-delay: 1.3s;
}
body.js main section.active div > *:nth-child(8), body.js section.active div ul li:nth-child(8){
  transition-delay: 1.5s;
}
body.js main section.active div > *:nth-child(9), body.js section.active div ul li:nth-child(9){
  transition-delay: 1.7s;
}
body.js main section.active div > *:nth-child(10), body.js section.active div ul li:nth-child(10){
  transition-delay: 1.9s;
}
body.js main section.active div > *:nth-child(11), body.js section.active div ul li:nth-child(11){
  transition-delay: 2.1s;
}
body.js main section.active div > *:nth-child(12), body.js section.active div ul li:nth-child(12){
  transition-delay: 2.3s;
}
body.js main section.active div > *:nth-child(13), body.js section.active div ul li:nth-child(13){
  transition-delay: 2.5s;
}
body.js main section.active div > *:nth-child(14), body.js section.active div ul li:nth-child(14){
  transition-delay: 2.7s;
}
body.js main section.active div > *:nth-child(15), body.js section.active div ul li:nth-child(15){
  transition-delay: 2.9s;
}



/*** Scrolling ***/
/*
body.scrollUp nav.top-nav:not(.expand){
  background: #282828;
}
body.scrollUp header nav a{
  color: #282828;
}
body.scrollUp header nav a.cta svg path{
  stroke: #282828;
}
body.scrollUp header .logo, body.scrollUp header .cart-btn, body.scrollUp header .user-btn{
  filter: invert(0);
}
*/

body.scrolling .menu-handler:before, body.scrolling .menu-handler:after{
  background: #4f593b;
}

/*
body.scrollDown nav.top-nav:not(.expand){
  transform: translateY(-100%);
  opacity: 0;
}
*/


/* scrollUp state — keep nav links white (not dark)*
body.scrollUp header nav a {
  color: rgba(255, 255, 255, 0.8) !important;
}

body.scrollUp header nav a:hover {
  color: rgba(255, 255, 255, 1) !important;
}

body.scrollUp nav.top-nav a.cta.active,
body.scrollUp nav.top-nav .col > a.cta {
  background: rgb(59, 51, 43) !important;
  color: rgb(249, 245, 241) !important;
}

body.scrollUp header .logo {
  filter: invert(0) !important;
}
 */

body.scrolling header nav{
  background: #f7f6f1;
  border-bottom: 1px solid #e9e2db;
}

body.scrolling header nav li:not(.cta) a{
  color: #4f593b!important;
}
body.scrolling header nav li:not(.cta) a:hover{
  text-decoration: underline;
}

body.scrolling header nav .logo{
  filter: invert(0);
  margin-top: 10px;
}

/*** Expanded ***/

.top-nav.expand .logo{
  filter: invert(0);
}

/*** Resposive CSS media queries ***/

/* Laptop */
@media screen and (max-width: 1300px) and (min-width: 767px){
  .searchform{
    display: none;
  }
}

/* Tablet */
@media (max-width: 1200px){
  .row{
    max-width: 1000px;
  }
}


@media (min-width: 1450px) {
  header .row{
    /*max-width: 1300px;*/
  }
}

@media (max-width: 950px) {
  .store{
    display: none;
  }
  .main-menu{
    width: calc(100% - 40px);
    padding: 80px 20px;
  }
  header > img, .play{
    display: block;
    transform: none;
  }
  .row, section > div, footer section > div{
    /*display: block;*/
    width: auto;
  }

  .single-post section{
    padding: 0!important;
  }
  body:not(.home) header .container, body:not(.home) header section{
    padding: 0;
  }
  .wp-element-button:hover:after, .cta:hover:after{
    display: none;
  }
  header section{
    padding: 65px 0 0;
  }
  .breadcrumbs{
    margin-bottom: 50px;
  }
  .team{
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  section > div > div:not(.slider){
    width: -webkit-fill-available;
    min-height: auto;
    padding: 20px!important;
  }
  section.green img{
    bottom: 0;
  }
  ul.row{
    text-align: center;
  }

  .sp li{
    opacity: 1;
    margin: 30px 0!important;
  }
  /* home */

  header section .col{
    width: auto;
  }
  header section .col > a h4, header section .col .bg h4{
    margin: 0;
    font-size: 20px;
    max-width: 100%;
  }
  .about-us header section img{
    display: inline-block;
    bottom: 0!important;
  }
  .ramawellness-play{
    display: none;
  }

  .readmore:before {
    opacity: 1;
    margin-left: 0;
  }
  .active .blts ul li, .active .blts .cta{
    opacity:1;
  }
  .col.bx-r:before, .col.bx-l:before{
    transform: none;
  }

  a.label > label {
    width: 65px;
    margin: 10px 30px;
    background-color: #fff;
    font-size: 14px;
  }

  div.filter-container{
    display: block;
  }
  .tag-cloud{
    margin-bottom: 20px;
  }
  .filter > li:after{
    top: 18px;
  }

  img.alignright,
  img.alignleft{
    float: none;
    display: inline-block;
  }

  .menu-main-container{
    display: none;
    width: 100%;
  }
  .menu-handler {
    display: inline-block;
  }

  .menu-handler:hover:before {
    left: 0px;
  }

  .menu-handler:hover:after {
    left: 5px;
  }

  .main-menu .row ul li.menu-item {
    margin: 2px 0;
  }

  .main-menu .row ul:not(#menu-social) li a{
    font-size: 2.5vh;
  }
  .main-menu .row{
    grid-gap: 20px;
    grid-template-columns: repeat(1, minmax(150px, 1fr));
  }

  input[type="radio"] +label{
    display: block;
    margin: 15px;
  }
  nav.top-nav li{
    display: block;
  }
  nav.top-nav .cta{
    position: relative;
    float: none;
    text-align: center;
  }


  main{
    margin: 0;
  }
  footer{
    position: relative;
    z-index: 1;
  }
  footer section{
    padding: 30px 0;
  }
  footer .col.centered{
    text-align: left;
  }
  .menu-social-container{
    text-align: left;
  }
  .menu-social-container li{
    margin-left: 0px;
    margin-right: 5px;
  }
  .col{
    /*width: auto;*/
  }
  header section .col .content p{
    margin: 0;
  }
  .about header > img{
    position: absolute;
    width: 100%;
    height: auto;
  }

  .self h2 span:nth-child(1){
    font-size: 60px;
    margin-left: 70px
  }
  .self h2 span:nth-child(2){
    font-size: 60px;

  }
  .self h2 span:nth-child(4){
    font-size: 60px;
    margin-left: 50px
  }

  .marquee {
    --marquee-speed: 20;
  }
  .marquee__item {
    width: 250px;
  }

  .rama-round{
    right: -150px;
  }
  .rama-round div{
    height: 200px;
    width: 200px;
  }
  header .top-nav .col > a.cta{
    display: none;
  }
  .search-btn,
  .user-btn,
  .cart-btn,
  .wishlist-btn {
    float: right;
  }
  .self h2{
    position: relative;
    left: 0;
  }

  .app{
    text-align: center;
  }
  .app .col:first-child{
    order: 2;
  }
  .app img {
    margin: calc(-5vh + -65px) 0;
  }
  .shop .col:first-child{
    order: 2;
  }

  .content .logo{
    display: none;
  }
  .home header .container{
    padding: 0;
  }
  h1{
    font-size: 35px;
  }
  .cta{
    margin-left: 0!important;
    margin-bottom: 20px;
  }
  .break:before{
    display: block;
    margin: 0 auto 20px 40%;
    width: 30px;
  }
  .break:after{
    display: none;
  }
  .class img{
    width: auto;
    width: 100%;
  }
  footer .col{
    margin: 0;
  }
  .footer-menu li{
    margin: 0;
    margin-bottom: 20px;
    display: block;
  }
  /*
  .mindbody-widget{
    margin-bottom: -100px;
  }*/
}

/* Text pages (Terms, Privacy Policy, App): keep block headings and lists
   in the same centred 900px column as paragraphs. */
main > article > p,
main > article > .wp-block-heading,
main > article > .wp-block-list {
  max-width: min(900px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}
main > article > .wp-block-heading {
  margin-top: 40px;
}
main > article > .wp-block-list {
  margin-top: 10px;
  margin-bottom: 20px;
  padding-left: 1.2em;
  list-style: disc;
}
main > article > .wp-block-list li {
  list-style: inherit;
  font-size: clamp(13px, calc( 0.5 * (.25vw + 1rem)), 24px);
  font-weight: 200;
  line-height: 1.5;
  margin-bottom: 6px;
}

/* Wholesale application form */
.wholesale-form {
  max-width: min(900px, calc(100% - 40px));
  margin: 10px auto 40px auto;
}
.wholesale-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wholesale-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}
.wholesale-form__wide { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .wholesale-form__grid { grid-template-columns: minmax(0, 1fr); }
}
.wholesale-form label > span,
.wholesale-form legend {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .02em;
}
.wholesale-form input[type="text"],
.wholesale-form input[type="email"],
.wholesale-form input[type="tel"],
.wholesale-form select,
.wholesale-form textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 200;
  color: #2c2c2c;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #dddbd2;
  border-radius: 10px;
  outline: none;
  transition: border-color .2s ease;
}
.wholesale-form input:focus,
.wholesale-form select:focus,
.wholesale-form textarea:focus { border-color: #4f593b; }
.wholesale-form__choices {
  margin: 24px 0 0;
  padding: 0;
  border: none;
}
.wholesale-form__choice,
.wholesale-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 200;
  line-height: 1.5;
}
.wholesale-form__choice input,
.wholesale-form__consent input { margin-top: 3px; }
.wholesale-form__message { display: block; margin-top: 24px; }
.wholesale-form__consent { margin-top: 24px; }
.wholesale-form button.cta { margin-top: 10px; cursor: pointer; }

.wholesale-notice {
  max-width: min(900px, calc(100% - 40px));
  margin: 10px auto 30px auto;
  padding: 18px 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 200;
}
.wholesale-notice--ok { background: #eceade; border-left: 3px solid #4f593b; }
.wholesale-notice--error { background: #f6e9e6; border-left: 3px solid #b3503f; }


/* ─────────────────────────────────────────────────────────────────────
   The shop loop's hover picture.

   The second image sits on top of the first inside the card's own link and
   fades in. It is laid over rather than swapped so there is no reflow and no
   flash of nothing while it loads.

   `@media (hover: hover)` keeps it off touch screens, where :hover sticks
   after a tap and would leave the wrong picture showing.
   ───────────────────────────────────────────────────────────────────── */
ul.products li.product a.woocommerce-loop-product__link{ position: relative; display: block; }
ul.products li.product img.rrc-hover-image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover){
  ul.products li.product img.rrc-hover-image{ transition: opacity .35s ease; }
  ul.products li.product:hover img.rrc-hover-image{ opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────
   The single product's gallery: one big picture, a row of thumbnails.

   WooCommerce already builds exactly this. flexslider is running on the
   gallery, `.flex-viewport` is clipping it correctly, and
   `ul.flex-control-thumbs` is its own thumbnail strip with the clicking
   already wired. What was missing is that the strip had no layout: its
   items were stacking full width, so three "thumbnails" came out as three
   more full-size pictures running down the page. That, plus the gallery
   being printed twice, is what the product page has looked like.

   So this styles what is already there rather than adding a second strip.
   `float: none` is deliberate: woocommerce.css floats these, and a float
   beside the grid below would put the first one in the wrong place. And the
   selector carries no tag name: flexslider writes an `<ol>`, so a rule
   written for `ul.flex-control-thumbs` matches nothing at all.
   ───────────────────────────────────────────────────────────────────── */
/* The little magnifier WooCommerce floats over the top corner, which opens
   its PhotoSwipe lightbox. Jaime does not want it: the thumbnails below are
   how you change picture, and clicking the picture itself still opens the
   full-size file. Hidden rather than unhooked, because the markup comes out
   of woocommerce_show_product_images and unhooking that would take the
   gallery with it. */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger{ display: none; }

.woocommerce-product-gallery .woocommerce-product-gallery__image img{ border-radius: 10px; }

.woocommerce-product-gallery .flex-control-thumbs{
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.woocommerce-product-gallery .flex-control-thumbs li{
  float: none;
  width: auto;
  margin: 0;
  list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs img{
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  opacity: 1;
  border: 1px solid #e9e2db;
  border-radius: 10px;
  transition: border-color .2s ease;
}
.woocommerce-product-gallery .flex-control-thumbs img:hover{ border-color: #4f593b; }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active{
  border-color: #4f593b;
  border-width: 2px;
}


/* ─────────────────────────────────────────────────────────────────────
   The product page, in the shape Jaime asked for: the thumbnails down the
   left of the picture, and the written detail folded away under the buttons.

   The thumbnail column is declared in CSS, which matters: flexslider sizes
   its slides in pixels from the width of the viewport when it starts up, and
   a stylesheet in <head> has already narrowed that viewport by the time the
   script runs. Narrowing it afterwards would leave every slide too wide
   until the window was resized.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 760px){
  .woocommerce-product-gallery{
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }
  .woocommerce-product-gallery .flex-viewport{
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
  }
  .woocommerce-product-gallery .flex-control-thumbs{
    order: 1;
    flex: 0 0 92px;
    width: 92px;
    grid-template-columns: 1fr;
    margin: 0;
  }
}

/* The trail above the name. */
.product-crumbs{
  font-size: 13px;
  color: #7c7a74;
  margin: 0 0 10px;
}
.product-crumbs a{ color: #7c7a74; text-decoration: none; }
.product-crumbs a:hover{ color: #2c2c2c; }
.product-crumbs__sep{ margin: 0 7px; opacity: .5; }

/* The folds under the buttons. A <details>, so no script is involved. */
.product-fold{
  border-top: 1px solid #e9e2db;
  margin-top: 26px;
}
.product-fold summary{
  list-style: none;
  cursor: pointer;
  padding: 17px 2px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-fold summary::-webkit-details-marker{ display: none; }
/* The chevron is drawn from two borders rather than loaded as an icon, and
   turns when the fold opens. */
.product-fold summary:after{
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid #2c2c2c;
  border-bottom: 1px solid #2c2c2c;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.product-fold[open] summary:after{ transform: rotate(-135deg) translate(-2px, -2px); }
.product-fold__body{ padding: 0 2px 20px; }
.product-fold__body p{ margin: 0 0 14px; }
.product-fold__body p:last-child{ margin-bottom: 0; }
.product-fold__body ul,
.product-fold__body ol{ margin: 0 0 14px 20px; }
.product-fold__body li{ list-style: inherit; margin-bottom: 6px; }

/* The price, which was reading like a caption under the description. It is
   the second thing anyone looks at after the name. */
.summary .price{
  font-size: 22px;
  margin: 6px 0 14px;
}


/* The colourways, as links to the sibling products. See rrc_colour_row(). */
.product-colours{ margin: 4px 0 18px; }
.product-colours__label{
  margin: 0 0 9px;
  font-size: 14px;
  color: #7c7a74;
}
.product-colours__label b{ font-weight: 500; color: #2c2c2c; }
.product-colours ul{ display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.product-colours li{ margin: 0; }
/* Squares, not circles, and a square ring around the one you are on: the
   shape of the selector Jaime pointed at. */
.product-colours a{
  display: block;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 5px;
  line-height: 0;
  transition: border-color .15s ease;
}
.product-colours a:hover{ border-color: #c9c4ba; }
.product-colours a[aria-current="true"]{ border-color: #2c2c2c; }
.product-colours a span{
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.14);
}

/* The payment marks under the express-checkout buttons. The fragment brings
   its own stylesheet, so this is only the room around it. */
.summary .rrc-marks{ margin: 20px 0 4px; }


/* The sizes, as links to the sibling products. See rrc_size_row(). */
.product-sizes{ margin: 0 0 20px; }
.product-sizes__label{
  margin: 0 0 9px;
  font-size: 14px;
  color: #7c7a74;
}
.product-sizes__label b{ font-weight: 500; color: #2c2c2c; }
.product-sizes ul{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.product-sizes li{ margin: 0; }
.product-sizes a{
  display: block;
  min-width: 52px;
  padding: 9px 14px;
  border: 1px solid #ddd6cb;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  color: #2c2c2c;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.product-sizes a:hover{ border-color: #4f593b; }
.product-sizes a[aria-current="true"]{
  border-color: #4f593b;
  background: #4f593b;
  color: #fff;
}


/* WooCommerce's add-to-cart form is painted as a white rounded card on this
   theme, with 30px of padding, a 20px radius and a shadow. That is what
   pushed the button in from the edge of the column, and what drew a second
   line under the "or" once the "or" moved inside the form: the card's own
   bottom edge. The form is layout here, not a panel. */
.summary form.cart{
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* A hairline above the buy block, and a button the width of the column. */
.summary form.cart{ border-top: 1px solid #e9e2db; padding-top: 20px; margin-top: 4px; }
.summary form.cart .single_add_to_cart_button{
  display: block;
  width: 100%;
  text-align: center;
}

/* Shaped like the express buttons under it.
   Everywhere else on the site a button is a pill, and that stays. Here it
   sits directly above Apple Pay, Google Pay and Link, which Stripe draws as
   squared-off rectangles of a fixed height and will not restyle. A pill
   above three rectangles reads as two different controls that happen to be
   stacked; the same shape reads as one set of ways to buy. Only the colour
   separates them, which is the thing that should separate them. */
.summary form.cart .single_add_to_cart_button{
  min-height: 48px;
  padding: 14px 18px;
  border-radius: 4px;
  font-size: 14px;
  /* Black, like Apple Pay and Google Pay under it. The olive is the brand
     and it stays everywhere else on the site; here it made the studio's own
     button look like the odd one out of four ways to pay, when it is the
     main one. Same colour, and only the wording tells them apart. */
  background: #111;
  border-color: #111;
  color: #fff;
}
.summary form.cart .single_add_to_cart_button:hover{
  background: #000;
  border-color: #000;
  color: #fff;
}

/* The "or" between the basket and paying now. A rule either side, drawn
   with borders rather than an <hr>, so the word sits in the gap. */
.buy-or{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  color: #7c7a74;
  font-size: 13px;
}
.buy-or:before,
.buy-or:after{
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid #e9e2db;
}


/* How long delivery takes, between the hairline and the button. */
.summary .delivery-estimate{
  margin: 0 0 14px;
  font-size: 14px;
  color: #7c7a74;
}

/* ─────────────────────────────────────────────────────────────────────
   The variation form: a size picker that looks like the page.

   theme.js draws a chip per option and drives the <select> underneath, so
   everything downstream of that select -- the price, Add to cart, the
   express-checkout buttons -- behaves exactly as WooCommerce built it. The
   select is only hidden once the chips exist, so a visitor whose JS never
   ran still gets a working dropdown.
   ───────────────────────────────────────────────────────────────────── */
.summary .variations{ margin: 0 0 4px; border: 0; }
.summary .variations td,
.summary .variations th{ display: block; padding: 0; border: 0; }
/* The label sits in a table cell WooCommerce centres; the colour row above
   it is left-aligned and these two have to agree. */
.summary .variations .label{ text-align: left; }
.summary .variations .label label{
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  color: #7c7a74;
  font-weight: 400;
}
.summary .variations .reset_variations{
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: #7c7a74;
}

.variation-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
/* The chips and the quantity box are one row of controls, so they are one
   size and one colour: 40px tall, the same grey fill, the same border. They
   were a beige box and an olive pill of different heights, which read as
   two unrelated things rather than as "pick a size, pick how many". The
   chosen chip is near-black, like the Add to cart below it. */
.variation-chips button{
  box-sizing: border-box;
  min-width: 56px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #ddd6cb;
  border-radius: 7px;
  background: #f6f5f3;
  font: inherit;
  font-size: 13px;
  color: #2c2c2c;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.variation-chips button:hover:not(:disabled){ border-color: #111; }
.variation-chips button[aria-current="true"]{
  border-color: #111;
  background: #111;
  color: #fff;
}
.variation-chips button:disabled{
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
}
select.variation-chips-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The quantity box, which a variable product shows and a simple one did not.
   It is a number field in the middle of a column of buttons, so it is given
   the same shape as everything else. */
.summary form.cart .quantity{ margin: 0 0 14px; }
.summary form.cart .quantity input{
  box-sizing: border-box;
  width: 56px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid #ddd6cb;
  border-radius: 7px;
  background: #f6f5f3;
  font: inherit;
  font-size: 13px;
  text-align: center;
}