/*
	Theme Name: eryoga
	Theme URI: https://www.erikraynal.com/yoga/
	Description: eryoga 2023
	Version: 1.0
	Author: atn.zone
	Author URI: http://atn.zone
*/		



/* FONTS */


/* GLOBAL */

:root {
	/* Color styles */
	--color-black: #000000;
	--color-white: #ffffff;
	--color-gray-1: rgba(30,30,30,.6);

	/* Text-size styles */
	--base-size: 1.15rem;
	--footer-size: 50%;
	--schedule: 75%;
	--disclaimer: 60%;
	--h3: 70%;
	--button: 80%;
	

}

:root {
	--font-main: 'Inter', sans-serif;
}

:root {
	--header-height: 9rem;
	--header-height-mobile: 4rem;
	--margin-unit: 2.5vw;
	
	--grid-header: 25% 1fr 3rem;
	--grid-header-mobile: 3rem 1fr 3rem;
	

	--spacing-unit: .8rem;
	--margin-unit: 1em;
}

:root {
	--transition-hover: all 150ms linear;
}


html {
 --scroll-behavior: smooth;
  scroll-behavior: smooth;
}

.no--scroll {
	overflow-y: auto;
}

.fadein {
    opacity:0.1;
}

.show {
	opacity: 1;
	transition: 1s;
}

* {
	outline:0;
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	transition: var(--transition-hover);
	-webkit-font-smoothing: antialiased;
}


.border-box, a, article, aside, blockquote, body, code, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, html, input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=url], legend, li, main, nav, ol, p, pre, section, table, td, textarea, th, tr, ul {
	box-sizing: border-box;
}

figure, figcaption, img, small, span, input, p, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-weight: var(--font-normal);
	font-size: var(--size-base);
	line-height: var(--size-base);
}

body {
	width: 100vw;
	background-color: var(--color-white);
    color: var(--color-white);
	font-family: var(--font-main);
	font-weight: 600;
	font-size: var(--base-size);
	display: flex;
	flex-direction: column;
}



/* STYLING CLASSES */

h1, h2, h3, h4, h5, h6 {
	color: var(--color-base);
}

h1 { 
	font-size: var(--h1); 
	line-height: var(--line-title); 
	letter-spacing: -1px;
}
h2 { 
	font-size: var(--h1); 
	line-height: var(--line-title); 
	color: #000000;
	text-decoration: underline;
	margin-bottom: calc(var(--margin-unit) * 1);
}

h3 { 
	font-size: var(--h3); 
	line-height: var(--line-title); 
	color: #000000;
	margin: calc(var(--margin-unit) * 2.5) 0 calc(var(--margin-unit) * 1.5);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	
	border-bottom: 1px solid #000000;
}

p  { 
	color: var(--color-black);
	font-size: var(--size-base); 
	line-height: var(--line-text); 
	padding-bottom: calc(var(--margin-unit) * 1.5);
}

.list li {
	color: #000000;
	font-size: var(--h3);
	line-height: 1.5; 
}

.list:first-of-type {
	padding-bottom: calc(var(--margin-unit) * 1);
}

p.disclaimer {
	color: var(--color-gray-1);
	font-size: var(--disclaimer);
	font-weight: 500;
	padding: calc(var(--margin-unit) * 1) 0 0;
}

.credit {
	color: #000000;
	font-size: calc(var(--disclaimer) * 0.85);
	font-weight: 500;
	padding: calc(var(--margin-unit) * 6) 0 0;
}

.credit a {
	font-weight: 600;
}

p a {
	color: var(--color-black);
	text-decoration: none;
	
}

p a:hover, p a:focus {
	text-decoration: underline;
}

small  {
	font-size: var(--size-small); 
	line-height: var(--line-base); 
	letter-spacing: var(--upper-spacing);
}

a {
	color: var(--color-black);
}

figure {

	width: 100%;
	object-fit: cover;
	max-height: 90%;
}

figure img {
	width: 100%;
}


figure video {
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 110vh;
  object-fit: cover;

}

.cta {
    display: inline-flex;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
	letter-spacing: 0;
}

.cta:hover {
    letter-spacing: .05em;
}

.cta::after {
	content: '';
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg fill='%23000000' height='800px' width='800px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 330 330' xml:space='preserve'%3E%3Cpath id='XMLID_27_' d='M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255 s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0 c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z'/%3E%3C/svg%3E");
	width: 1.5em;
	height: 1.5em;
	display: block;
	    background-size: contain;
    background-repeat: no-repeat;
	margin-left: .6em;
}

span {
	color: #000000;
}
.social {
	font-style: italic;
	letter-spacing: 0;
color: blue;

}

.social:hover {
    letter-spacing: .05em;
}

.social::after {
	content: ' and ';
	color: #000000;

	font-style: normal;
}

.social:last-child::after {
	display: none;
}

.rte-link {
	display: block;
	text-decoration: underline;
}

.rte-link:hover {
	text-decoration: none;
}

.block-links {
	display: grid;
	grid-template-columns: 50% 50%;
	margin-top: calc(var(--margin-unit) * 3);
	align-items: flex-start;
}



/* Schedule */

.schedule {
	display: flex;
	flex-direction: column;
	margin: calc(var(--margin-unit) * 1) 0;
}

.schedule li {
	display: grid;
	grid-template-columns: 6em 1fr 35% 1fr 20%;
	padding: calc(var(--margin-unit) * 2) 0;
	border-bottom: 1px solid #000000;
	font-size: var(--schedule);
	color: #000000;
	align-items: center;
}

.circle {
	object-fit: cover;
  border-radius: 50%;
  height: 3em;
  width: 3em;
}

.schedule li:last-child {
	border-bottom: 0;
}

.schedule li div:last-child {
	display: flex;
	justify-content: flex-end;
}

.schedule li div:nth-child(4) span {
	color: var(--color-gray-1);
}

.schedule li div time {
	display: block;
	color: #000000;
}


.button {
	border: 1px solid #000000;
	padding: 0.5em 1em;
	border-radius: 24px;
	background-color: #ffffff;
	color: #000000;
}

.schedule li:hover .button, .button:hover, .button:focus {
	background-color: #000000;
	color: #ffffff;
} 

.button-inactive, .button-inactive:hover, .button-inactive:focus {
	border: 1px solid var(--color-gray-1);
	padding: 0.5em 1em;
	border-radius: 24px;
	background-color: #ffffff;
	color: var(--color-gray-1);
	opacity: 0.5;
	pointer-events: none;
}

h6 {
	display: flex;
	flex-direction: row;
}

h6 span {
	margin-left: 4px;
	border-radius: 50%;
	width: 1em;
	height: 1em;
	display: flex;
		justify-content: center;
	align-items: center;
	font-size: 60%;
	color: #ffffff;
	background-color: var(--color-gray-1);
}
/* AREAS */

.container-full {
	width: calc(100vw - calc(4 * var(--margin-unit)));
	margin: 0 auto;
		display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.container {
	width: calc(100vw - calc(4 * var(--margin-unit)));
	margin: 0 auto;
		display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.container-header {
	width: calc(100vw - calc(2 * var(--margin-unit)));
	margin: calc(1 * var(--margin-unit)) auto 0;
}



main {
	width: 100%;
	display: flex;
	flex-direction: column;
	z-index: 1;
	justify-content: flex-start;
}

main section {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
}

.wrapper {
	width: 70%;
	padding: calc(var(--margin-unit) * 6) 0;	
}


/* HEADER */

header {
	/*padding: 1.7rem 0;*/
	height: var(--header-height);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: var(--color-background);
	z-index: 3;
	
	width: 100%;
	position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
	pointer-events: none;
}

header nav ul {
	display: flex;
	flex-direction: column;
}

header nav ul > * + * { 

}

header nav ul li{
	display: flex;
	align-items: center;
}

header nav ul li {
	margin-left: var(--margin-unit);
}

header nav ul li.active {
	margin-left: 0;
	font-style: italic;
}

header nav ul li.active h1 {
	font-style: normal;
}

header nav ul li a {
		pointer-events: all;
}


/* FOOTER */
footer {
	z-index: 5;
position: fixed;
  bottom: calc(var(--margin-unit) * 2);
  left: var(--margin-unit);
  transform-origin: top left;
  transform: translateY(100%) rotate(-90deg);
	font-size: var(--footer-size);
	font-weight: 500;
	display: none;
}

footer nav ul {
	display: flex;
	flex-direction: row;
}

footer nav ul li::before {
	content: '—';
	display: inline-block;
	color: #000000;
	padding: 0 1em;
}

footer nav ul li:first-child::before {
	content: '';
	display: inline-block;
	color: #000000;
	padding: 0 0;
}

footer nav ul li a:hover {
	letter-spacing: .05em;
}

/* ASIDE */

aside {
padding: calc(var(--margin-unit) * 1) 0;
    background-color: rgba(255,255,255,.3);
    /* border-top: 1px solid #000000; */
    position: fixed;
    z-index: 5;
    bottom: 0;
    width: calc(100% - calc(2*var(--margin-unit)));
    color: #000000;
    font-size: var(--schedule);
    margin: var(--margin-unit);
	-webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
	box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}

aside:hover {
    background-color: rgba(255,255,255,1);
}

.inactive:hover span, .inactive:focus span {
	display: none;
}

.inactive:hover::before, .inactive:focus::before {
  content: "coming soon";
	color: blue;
}

/* HELPER CLASSES */

.desktop--hide {
	display: none;
}

.dark, .light {
	transition: all 1000ms;
}

.no--scroll {
	overflow: hidden !important;
}



/* MAILCHIMP */

#mc_embed_signup_scroll {
	display: flex;
	flex-direction: row;
}

#mc-embedded-subscribe, #mc-embedded-subscribe:hover, #mc-embedded-subscribe:focus {
	content: '';
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg fill='%23000000' height='800px' width='800px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 330 330' xml:space='preserve'%3E%3Cpath id='XMLID_27_' d='M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255 s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0 c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z'/%3E%3C/svg%3E");
	width: 1.5em;
	height: 1.5em;
	display: block;
	    background-size: contain;
    background-repeat: no-repeat;
	margin-left: .6em;
	border: 0;
	background-color: #ffffff;
	outline: 0;
	box-shadow: 0 0 0 0 #ffffff;
	border-radius: 0;
	cursor: pointer;
}



#mce-EMAIL {
	color: var(--color-black);
	font-size: var(--base-size); 
	-webkit-appearance: none;
	-webkit-border-radius:0px;
	border: 0;
	background-color: #ffffff;
	min-width: 11.5em;
	color: var(--color-black);
	font-size: var(--base-size); 
	font-weight: 600;
	border-bottom: 2px solid #ffffff;
	padding-bottom: 2px;
}

#mce-EMAIL:hover, #mce-EMAIL:focus {
	border-bottom: 2px solid #000000;
}

#mce-EMAIL::-webkit-input-placeholder { /* Edge */
color: var(--color-black);
	font-size: var(--base-size); 
	font-weight: 600;
}

#mce-EMAIL::-ms-input-placeholder { /* Internet Explorer 10-11 */
color: var(--color-black);
	font-size: var(--base-size); 
	font-weight: 600;
}

#mce-EMAIL::placeholder {
color: var(--color-black);
	font-size: var(--base-size); 
	font-weight: 600;
}

#mce-EMAIL:focus::-webkit-input-placeholder {
	color: var(--color-gray-1);
}

#mce-EMAIL:focus::-ms-input-placeholder {
	color: var(--color-gray-1);
}

#mce-EMAIL:focus::placeholder {
	color: var(--color-gray-1);
}


#mc_embed_signup div.mce_inline_error {
	margin: 0 0 0 0 !important;
    padding: 10px 0px !important;
    z-index: 1 !important;
	color: var(--color-gray-1) !important;
	font-size: var(--disclaimer) !important;
	font-weight: 500 !important;
	background-color: #ffffff !important;

}



/* SLIDER */

.slider {
	width: 100%;
	height: 110vh;
}

.slider img {
	width: 100%;
	height: 110vh;
	object-fit: cover;
}


.slider img:nth-child(1){
  position: absolute;
  z-index: 5;
  animation: xfade 20s -0s infinite;
  animation-timing-function: ease-in-out;
}

.slider img:nth-child(2){
  position: absolute;
  z-index: 4;
  animation: xfade 20s -4s infinite;
  animation-timing-function: ease-in-out;
}

.slider img:nth-child(3){
  position: absolute;
  z-index: 3;
  animation: xfade 20s -8s infinite;
  animation-timing-function: ease-in-out;
}

.slider img:nth-child(4){
  position: absolute;
  z-index: 2;
  animation: xfade 20s -12s infinite;
  animation-timing-function: ease-in-out;
}

.slider img:nth-child(5){
  position: absolute;
  z-index: 1;
  animation: xfade 20s -16s infinite;
  animation-timing-function: ease-in-out;
}

@keyframes xfade {

     0% {opacity: 0;}

    50% {opacity: 1;}
    83% {opacity: 0;}
    100% {opacity: 0;}
}



/* MODAL */

.modalContent, .bannerContent {
    background-color: rgba(255,255,255,.3) !important;
    webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.3) !important;
}

.content__monkeyRewards a, .content__monkeyRewards a img {
	display: none !important;
}

.content__titleDescription h4 {
	font-family: var(--font-main);
	font-size: var(--base-size);
}

/* MEDIA QUERIES */

@media (max-width: 857px) {
	
	
	:root {
	--spacing-headline-large: 4vw;
	--spacing-headline-medium: 4vw;
	--spacing-headline-small: 4vw;
}
	
	.desktop--hide {
		display: block;
	}
	.small--hide {
		display: none;
	}
	
	.wrapper {
		width: 100%;
		padding: calc(var(--margin-unit) * 4) 0;
}
	
	
	aside .container-full {
		justify-content: center;
	}
	
	aside .container-full .cta {
		display: flex;
    	width: 100%;
    	justify-content: center;
	}

.block-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
	
	.block-links div:first-child {
	margin-bottom: calc(2*var(--margin-unit));
}
	
	.schedule li {
		grid-template-columns: 6em 1fr 1fr;
		grid-template-rows: 3em 5em 3em;
		grid-template-areas: 
			"a c c"
            ". b d"
			"e e e";
		border-bottom: 1px solid #DDDDDD;
	}
	
	.schedule li div:nth-child(1) {
		grid-area: a;
	}
	.schedule li div:nth-child(2) {
		grid-area: b;
	}
	.schedule li div:nth-child(3) {
		grid-area: c;
	}
	.schedule li div:nth-child(4) {
		grid-area: d;
	}
	.schedule li div:nth-child(5) {
		grid-area: e;
	}
	
	.schedule li div:nth-child(5) a {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	
	.schedule li div:nth-child(4) span {
	opacity:0;
}
.button {
	background-color: #000000;
	color: #ffffff;
	padding: .75em 1em;
} 
	
	
	.solid {

   background-color: rgba(255,255,255,.5);
    
	-webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
	box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}
	
	
	
	/*.solid > div.filter,
.solid::before,
.solid::after {
  position: absolute;
  inset: 0;
}

.solid > div.filter:nth-of-type(1) {
  z-index: 7;
  backdrop-filter: blur(32px);
  mask: linear-gradient(
    to bottom,
 rgba(0, 0, 0, 1) 0%,
	  rgba(0, 0, 0, 1) 50%,
	   rgba(0, 0, 0, 0) 100%
  );
}*/

	
	.container-header {
		z-index: 10;
	}

}

.section-1-single {
	height: 100vh;
}

.section-1-single figure {
	height: 100vh;
	max-height: 100vh;
	object-fit: cover;
}

.section-1-single figure img {
	height: 100vh;
	object-fit: cover;
}

.section-1-single figure::after {
	content:"";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255,255,255,.5);
}

.section-1-single .container {
	position: absolute;
    left: 0;
    right: 0;
    z-index: 999;
    bottom: 0;
	flex-direction: column;
}


.event-preheader {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.section-1-single .container h1, 
.section-1-single .container h2, 
.section-1-single .container h3,
.single .section-3 .container h1, 
.single .section-3 .container h2, 
.single .section-3 .container h3 {
	color: #000000;
	text-decoration: none;
	font-size: 100%;
	text-transform: none; 
	letter-spacing: 0;
	border: 0;
	margin: 0;
	padding: 0;

}

.section-1-single .container h1,
.section-3 .container h1{
	font-size: 250%;
	padding-bottom: 2rem;
}

.section-1-single .container .booking .button,
.section-3 .container .booking .button{
    background-color: #000000;
    color: #ffffff;
}


.events-index li {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 3rem;
		margin-top: 3rem;
	color: #000000;
}

.events-index li h4 {
		margin-bottom: 1rem;
}

.events-index li p, .events-index li a {
		font-size: var(--schedule);
}

.events-index li p {
		margin-bottom: 1rem;
}

.events-index li a.button {
		color: #ffffff;
	background: #000000;
}


.events-index figure {
	width: 30%;
	height: auto;
}

.events-index figure img {
	width: 100%;
	height: auto;
}


@media (max-width: 857px) {
.event-preheader {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}
	
	.booking {
		margin-top: 2.5rem;
	}
	
	.section-1-single .container h1,
.section-3 .container h1{
	font-size: 220%;
	padding-bottom: 2rem;
}
	
	.events-index figure {
	width: 100%;
	height: auto;
}
	.events-index li {
	flex-direction: column;
	align-items: flex-start;
	margin-top: 3rem;
		gap: 2rem;

}
}