/*
Theme Name:   Soul Kitchen
Theme URI:    https://mutsaerts.dev
Description:  Soul Kitchen
Author:       Michiel Mutsaerts
Author URI:   https://mutsaerts.dev
Template:     twentytwentyone
Version:      2.1.5
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  soulkitchen
*/


:root {
	--blue-light: color(srgb 0.749 0.369 0.165 / 0.15);
	--red-light: color(srgb 0.749 0.369 0.165 / 0.15);
	--yellow-light: color(srgb 0.749 0.369 0.165 / 0.15);
	--black-light: rgba(0, 0, 0, 0.05);
	--off-white: #f0e6d0;
	--red: rgba(222, 10, 5, 1);
	--yellow: #bf5e2a;
	--blue-new: #bf5e2a;
	--responsive--aligndefault-width: min(calc(100vw - 40px), 810px) !important;
	--responsive--alignwide-width: min(calc(100vw - 40px), 810px) !important;
}

.card.bg-blue {
	background: var(--blue-light) !important;
	filter: none !important;
}

.card.bg-red {
	background: var(--red-light) !important;
	filter: none !important;

}



.card.bg-yellow, .accordion-item.bg-yellow {
	background: var(--yellow-light) !important;
	filter: none !important;
}

.col-lg-6 p:not(:last-of-type) {
	margin-bottom: 20px;
}

@media only screen and (min-width: 822px) {
:root {
	--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 810px) !important;
	--responsive--alignwide-width: min(calc(100vw - 10 * var(--global--spacing-horizontal)), 1840px) !important;
}

.card:hover .card-img-top {
	transform: scale(1.05);
}  

.card:hover .card-img-square {
	transform: scale(1.05);
}  

.p-l {
	padding: 160px 0px;
}

.pt-l {
	padding: 160px 0px 0px 0px;
}

.pb-l {
	padding:  0px 0px 160px 0px;
}

.pt-m {
	padding: 80px 0px 0px 0px;
}

.p-m {
	padding: 80px 0px;
}

.pf-s {
	padding: 40px;
}

.pb-s {
	padding:  0px 0px 40px 0px;
}

.pf-xs {
	padding: 20px;
}



.m-m {
	margin: 80px 0px;
}

.m-ms {
	margin: 60px 0px;
}

.p-s {
	padding: 40px 0px;
}

.m-s {
	margin: 40px 0px !important;
}

.p-xs {
	padding: 20px 0px;
}

.m-xs {
	margin: 05px 0px;
}

}

.card.double {
	flex-grow: 2;
}



@media (max-width: 1399.98px) { 
	.card-container > a,
	.card-container > .card {
	flex-basis: calc((100% / 2) - 20px) !important;
	}
	
	#lightSlider {
		padding: 0px calc(100vw / 6) !important;
	}
	
	.card-container > a, 
	.quart-container > * {
	max-width: calc((100% / 3) - (40px / (3 / 2))) !important;
	width: 100%;
	}
	
	.card-container, 
	.quart-container {
		gap: 25px !important;
		flex-wrap: wrap;
	
	}
	
	
 }
 
 @media (max-width: 1199.98px) { 
	 
	 .card-container > a, 
	 .quart-container > * {
	 max-width: calc((100% / 2) - (40px / (2 / 1))) !important;
	 width: 100%;
	 }
	 
 }
 
 @media (max-width: 991.98px) { 
	 #lightSlider {
		 padding: 0px calc(100vw / 4) !important;
	 }
 }

@media (max-width: 821.98px) { 
	
	.card-container > a,
	.card-container > .card {
	flex-basis: 100% !important;
	} 
	
	
	.card-container, 
	.quart-container {
		gap: 20px !important;
		flex-wrap: wrap;
	
	}
	
	

	#main p.lead {
		font-size: 1.2em !important;
		letter-spacing: -0.03rem !important;
		max-width: 269px !important;
	}
	
	p.lead-large {
		font-size: 1.2em !important;
		letter-spacing: -0.03rem !important;
	}
	
	h1.text-center, h2.text-center, h3.text-center {
		max-width: 320px !important;
	}
	
	h1, h2, h3 {
		//color: aqua !important;
		font-family: new-spirit-condensed, serif;
		font-weight: 300;
		font-style: normal;
		letter-spacing: -0.18rem !important;
		font-size: 3em !important;
		line-height: 0.9 !important;
		max-width: 420px !important;
	}
	
	#masthead nav {
	 padding: 0px !important;
	 }
	 
	 #main .full-img-container {
		 border-radius: 1rem !important;
		 overflow: hidden;
		 height: 400px !important;
		 width: calc(100vw - 40px) !important;
		 margin: auto;
		 min-height: 400px !important;
	 }
	 
	 #main .tba .full-img-container {
		 margin-bottom: 20px !important;
	 }
	 
	 .p-l {
		 padding: 80px 0px;
	 }
	 
	 .pb-l {
		 padding:  0px 0px 80px 0px;
	 }
	 
	 .p-m {
		 padding: 40px 0px;
	 }
	 
	 .pf-s {
		 padding: 20px;
	 }
	 
	 .pf-xs {
		 padding: 10px;
	 }
	 
	 .m-m {
		 margin: 40px 0px;
	 }
	 
	 .m-ms {
		 margin: 30px 0px;
	 }
	 
	 .p-s {
		 padding: 20px 0px;
	 }
	 
	 .m-s {
		 margin: 20px 0px !important;
	 }
	 
	 .p-xs {
		 padding: 10px 0px;
	 }
	 
	 .m-xs {
		 margin: 5px 0px;
	 }
	
}

@media (max-width: 575.98px) { 
	#lightSlider {
		 padding: 0px !important;
	 }
	 
	.card-container > a, 
	.quart-container > * {
	max-width: 100% !important;
	width: 100%;
	}

}

h4 {
	color: black !important;
}

@media only screen and (min-width: 482px) and (max-width: 822px) {
:root {
	--responsive--aligndefault-width: min(calc(100vw - 80px), 810px) ;
	--responsive--alignwide-width: min(calc(100vw - 80px), 810px) ;
}

}

a:not(.text-link) {
	text-decoration: none !important;
}

a:hover {
	color: unset !important;
}

/* FONTS */

@font-face {
  font-family: "body-text";
  src: url('/_assets/ae13d1567720.woff2');
  font-display: swap;
}

h1 {
	//color: aqua !important;
	font-family: new-spirit-condensed, serif;
	font-weight: 300;
	font-style: normal;
	letter-spacing: -0.48vw;
	font-size: 10vw;
	line-height: 0.9;
}

h2 {
	//color: aqua !important;
	font-family: new-spirit-condensed, serif;
	font-weight: 300;
	font-style: normal;
	letter-spacing: -0.28vw;
	font-size: 6vw;
	line-height: 0.9;
}

h3 {
	//color: aqua !important;
	font-family: new-spirit-condensed, serif;
	font-weight: 300;
	font-style: normal;
	letter-spacing: -0.28rem;
	font-size: 4em;
	line-height: 0.9;
}

h3 .sans {
	font-family: "body-text";
	font-size: 0.9em;
}

h4 {
	//color: aqua !important;
	font-family: new-spirit-condensed, serif;
	font-weight: 300;
	font-style: normal;
	letter-spacing: -0.08rem;
	font-size: 1.8em;
	line-height: 1.4;
}

h4 .sans {
	font-family: "body-text";
	font-size: 0.9em;
}

h5 {
	//color: aqua !important;
	font-family: new-spirit-condensed, serif;
	font-weight: 300;
	font-style: normal;
	letter-spacing: -0.04rem;
	font-size: 1.2em;
	line-height: 0.9;
}

h5 .sans {
	font-family: "body-text";
	font-size: 1em;
}

p,
li {
	font-size: 0.9em;
	font-family: "body-text";
	letter-spacing: -0.02rem;
	line-height: 1.5;
}

a {
	font-family: "body-text";
	letter-spacing: -0.01rem;
	
}

img:not(#logo) {
	width: 100% !important;
	max-height: 860px;
	object-fit: cover;
	object-position: 50% 50%;
}

p.lead {
	font-size: 1.6em;
	letter-spacing: -0.04rem;
}

p.lead-large {
	font-size: 2.5em;
}

h1 {
	max-width: 61vw;
}

h2 {
	max-width: 50vw !important;
}

p.text-center {
	max-width: 600px !important;
}

body:not(.single-post):not(.blog) .entry-header {
	display: none !important;
}

.text-center {
	margin: auto !important;
}

.mx-auto .btn.btn-primary {
	max-width: fit-content;
	margin: auto;
}



#page .m-0 {
	margin: 0px !important;
	margin-top: 0px !important;
	
}

#page .mt-0 {

	margin-top: 0px !important;
	
}

#page .mr-5 {

	margin-right: 5px !important;
	
}



.fullframer {
	width: 100vw;
	min-height: 100vh;
	align-items: center;
	justify-content: center;
	display: flex;
	
}

#masthead {
	display: contents;
	justify-content: space-between;
	
}

#masthead nav {
	padding: 40px ;
	justify-content: space-between;
	position: fixed;
	width: 100vw;
}

#masthead nav a:not(.btn) {
	max-width: fit-content;
	font-size: 1rem;
	color: #000000 !important;
}

.close-menu {
	position: fixed;
	top: 49px;
	right: 56px;
	z-index: 99;
	font-size: 1rem;
}

/* GRIDPLANNER */

input[type="password"] {
	border-radius: 80px;
	background: transparent;
	border: 1px solid black;
	padding: 0px 20px !important;
	font-size: 2em !important;
	line-height: 1 !important;
	
}

.post-password-message {
	display: none !important;
}

.page-id-202 form {
	//margin-top: calc(50vh - 120px);
	//display: flex;
	//max-width: 420px !important;
}

.page-id-202 form input {
	//width: 100%;
	//margin: 10px 0px !important;
	//height: 80px !important;
}

.page-id-202 form label {
	display: none !important;
}

.insta-grid {
	gap: 10px;
	flex-wrap: wrap !important;

	
}

.insta-grid .post {
	background: black;
	min-width: calc((100% / 3) - (10px / 1.5));
	max-width: calc((100% / 3) - (10px / 1.5));
	padding-bottom: calc((100% / 3) - (10px / 1.5));
	position: relative;
	
}

.overlay { 
	position: absolute; 
	transition: ease-in-out opacity 0.3s; 
	top: 0; 
	left: 0; 
	right:0; 
	bottom:0; 
	opacity: 0;
	background-color: rgba(0,0,0,0.5); 
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
}
	
.insta-grid .post:hover .overlay { 
	opacity: 1; 
}

.page-id-202 #main .dropdown {
	position: relative;
	margin: auto;
	width: fit-content;
	
}

.page-id-202 #main .dots {
	opacity: 0;
}

.page-id-202 #main .dropdown button {
	color: white !important;
	
}

.hide {
	display: none !important;
}



.page-id-202 #main .post:hover .dots {
	opacity: 1 !important;
	transition: ease-in-out opacity 0.3s;
}

.page-id-202 #main form.clearstyling {
	padding: 0px !important;
	margin: 0px !important;
}

.page-id-202 #main .clearstyling input {
	padding: 0px !important;
	background: transparent !important;
	color: black !important;
	border-radius: none !important;
	border: none !important;
	height: fit-content !important;
}

#main .upload-form {
	margin: 0px !important;
	max-width: 400px !important;
	margin: -20px auto 60px auto !important;
}

#main #inputGroupFile04 {
	background: transparent;
	border: 1px solid black;
}

#main .upload-form input {
	max-height: fit-content !important;
	height: fit-content !important;
	font-size: 10pt !important;
	letter-spacing: -0.2pt !important;
	font-family: "body-text" !important;
}

#main .upload-form input[type="submit"] {
	width: fit-content;
	padding: 6px 20px !important;
}

#main .dots {
	color: var(--off-white) !important;
	background: transparent !important;
	border: none !important;
}

#main .dots h4 {
color: var(--off-white) !important;
}

.dropdown-toggle::after {
	display: none !important;
}


/* MORE PAGE INSTAGRAM */

.page-id-200 .first-header {
	margin-top: 150px !important;
	margin-bottom: 20px !important;
}

.page-id-200 .right.d-flex.aic,
.page-id-200 .top-insta {
	display: none !important;
}

.page-id-200 .card-body {
	padding: 1.5rem !important;
}

.page-id-200 .card-rectangle {
	margin-bottom: 15px !important;
}

.page-id-200 h4 {
	line-height: 1 !important;
}

.page-id-200 .btn {
	width: 100% !important;
}

#post-200 .redClass .btn {
	background: var(--off-white) !important;
	border: 1px solid var(--off-white) !important;
	color: var(--red) !important;
}

#post-200 .col-md-12 {
	max-width: 420px !important;
	margin: auto !important;
}

#post-200 .card-container {
	gap: 20px !important;
}

#post-200 .card-container > a {
	flex-basis: 100% !important;
}

/* FORM */

@media (max-width: 821.98px) { 
	
	#main .wpcf7-form {
	padding: 20px !important;
}


}

.wpcf7-form {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	margin: 0px !important;
	padding: 40px !important;
	width: 100%;
}

.modal-content {
	border-radius: 25px;
}



.wpcf7-form > * {
	width: 100%;
}

.modal-lg .modal-content {
	background: var(--off-white);
}

.wpcf7-form p {
	margin: 0px 0px 15px 0px;
}

input,
textarea {
	background: transparent;
	border: 1px solid black !important;
	border-radius: 12px !important;
	padding: 12px !important;
	width: 100%;
	margin: 5px !important;
	
}

textarea {
	height: 200px;
}

.wpcf7-spinner {
	display: none !important;
}

.wpcf7 form .wpcf7-response-output {
	background: var(--red) !important;
	border: 1px solid var(--red) !important;
	border-radius: 12px !important;
	color: var(--off-white) !important;
	font-family: "body-text" !important;
	font-size: 0.9rem !important;
	padding: 20px !important;
	margin-top: 0px !important;
}

.wpcf7 form.sent .wpcf7-response-output {
	background: rgba(5, 5, 130, 0.22) !important;
	border: 1px solid rgba(5, 5, 130, 0.22) !important;
	color: rgba(5, 5, 130, 1) !important;
}

.wpcf7-form.sent p
{
display:none;
}

.t-w {
	color: var(--off-white) !important;
}

/* BLOG */

.post-navigation {
	display: none;
}

.n-m {
	margin-bottom: 0px !important;
	margin-top: 0px !important;
}

.single-post #logo,
.single-post .entry-footer {
	display: none !important;
}

#comments {
	display: none;
}

/* membership */

.wpcf7-list-item label {
	display: flex;
	align-items: center;
}

.wpcf7-list-item label input::after {
	margin: 3px
}

.modal-body.membership {
	padding: 3rem;
}

.modal-body.membership p:not(:last-of-type) {
	margin-bottom: 20px;
}

.modal-body.membership ul {
  list-style-position: outside;
  padding-left: 15px;

}

.modal-body.membership ul li {
	
	padding-left: 5px;
}

/* TESTIMONIAL */

.card.event p {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.card.testimonial p {
	max-width: 520px;
	//margin-bottom: 30px !important;
}

.card.full-testimonial p:not(:last-of-type) {
	margin-bottom: 30px !important;
}

.image_person {
	width: 120px !important;
	height: 120px !important;
	min-width: 120px !important;
	border-radius: 300px;
	object-fit: cover !important;
	margin-right: 30px;
	max-width: 120px !important;
}

@media (max-width: 575.98px) { 
.hide-phone {
	display: none;
}
.card.testimonial .d-flex {
	flex-flow: column !important;
	gap: 2em;
}
}


/* NEWZ */

.card-body.collab p:not(:last-of-type) {
	margin-bottom: 1em;
}

.quart-container .flow a {
	display: block !important;
}

.events .nav-link {
	border: 2px solid black !important;
	background: transparent !important;
	border-radius: 20px !important;
	padding: 5px 15px !important;
	font-family: "body-text" !important;
	color: black !important;
	margin-right: 5px;
	font-size: 11pt !important;
}

.events .nav-link.active {
	border: 2px solid black !important;
	background: black !important;
	color: var(--off-white) !important;
 }
 
 .event .card-body {
	 display: flex;
	 flex-flow: column;
	 justify-content: space-between;
 }
 
 .flow .card-body {
	  display: flex;
	  flex-flow: column;
	  justify-content: space-between;
  }
 
 .event h4 {
	 line-height: 1 !important;
	 max-width: 90%;
 }

.grecaptcha-badge {
	display: none;
}

#page .btn-close {
	position: absolute;
	margin-left: auto;
	float: right;
	margin-right: 10px;
	right: 20px;
	top: 30px;
	background: transparent url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e) center/1em auto no-repeat !important;
	background-color: transparent !important;
}

.form-header {
	margin: 40px 40px 0px 40px;
}

.skip-link {
	display: none !important;
}

.breadcrumb-item .collab-badge,
.header-date .collab-badge {
	margin-left: 6px;
	display: inline;
}

.card-img-container .collab-badge {
	position: absolute;
	margin-left: 10px;
	left: 10px;
	top: 20px;
}

.collab-badge {
	
	background: var(--yellow) !important;
	font-family: "body-text" !important;
	font-weight: normal !important;
	border-radius: 0.7rem !important;
	padding: 8px 12px !important;
	
}

.card-podcast .card-body {
	display: flex;
	flex-direction: column;
}

h2.accordion-header {
	max-width: 100% !important;
}

.page-id-11 h1 {
	max-width: 900px;
}

.redClass h4,
.redClass .btn-secondary,
.blueClass h4,
.blueClass .btn-secondary,
.yellowClass h4,
.yellowClass .btn-secondary {
	color: var(--off-white) !important;
	border-color: var(--off-white) !important;
}



.first-header {
	margin-top: 220px !important;
}

.top-logo {
	position: absolute;
	left: calc(50vw - 80px);
	top: 40px;
	z-index: 999;
}

.top-insta {
	margin: 10px;
	padding: 15px;
	border-radius: 50%;
	transition: ease background 0.3s, transform 0.3s;
}

.socials a {
	padding: 15px;
	margin: -15px -15px;
	border-radius: 50%;
	transition: ease background 0.3s, transform 0.3s;
}

.top-insta:hover, .socials a:hover {
	background: var(--black-light);
	transform: scale(1.05);
}

img.sk-icons-center {
	max-width: 120px !important;
	width: 120px !important;
	margin: 80px auto 20px auto;
	padding: 20px;
	object-fit: contain;
	object-position: 50% 50%;
	display: block;
}

.retreat-page {
	background: var(--off-white);
	margin-bottom: calc(100vh - 145px);
	border-bottom-left-radius: 2rem;
	border-bottom-right-radius: 2rem;
	overflow-x: hidden;
}

.retreat-footer {
	position: fixed;
	bottom: 0px;
	background: black;
	width: 100vw;
	height: 100vh;
	left: 0px !important;
	z-index: -1 !important;
	margin: 0px !important;
	
}


.retreat-footer h3,
.retreat-footer p {
	color: var(--off-white) !important;
}

.alignfull.has-slider {
	overflow: hidden;
	max-width: 100vw;
	margin: -40px 0px;
}

#lightSlider {
	padding: 0px calc(100vw / 8);
}

#lightSlider .card {
	margin: 40px 20px !important;
}

.lSAction > .lSPrev {
	left: 40px;
}

.lSAction > .lSNext {
	right: 40px;
	
}

.lSAction h4 {
	color: var(--off-white);
}

#myCarousel {
	//padding: 20px;
}

button:not(:hover):not(:active):not(.has-background) {
	//background: none !important;
}

.carousel-item .col-md-3 {
	padding: 40px 20px;
}

.accordion-item {
	margin-bottom: 20px;
	color: #000000 !important;
	border-radius: 2em !important; 
	padding: 1rem;
}

.accordion-button {
	background: transparent !important;
	border-radius: 2em !important; 
	color: #000000 !important;
	border: 0px !important;
	box-shadow: none !important;
}

.entry-content img.sk-svg {
	max-width: 60px !important;
	float: right;
	margin-top: 120px !important;
}

.entry-content img.sk-svg-alt {
	max-height: 60px !important;
	object-fit: contain !important;
	object-position: left;
	float: left;
	margin-bottom: 40px !important;
}

.socials {
	display: inline-flex;
	gap: 12px;
	//float: right;
	width: 100%;
}

#main .d-flex:not(.quart-container) .socials a:last-of-type:not(.test-soc) {
	margin-left: auto;
	float: right;
}

#main .hfc {
	height: fit-content;
	margin-top: auto !important;
}

.quart-container .socials {
	margin: 20px 0px 0px 0px;
	margin-top: auto;
}

.mw-600 {
	max-width: 600px;
}

.mwfc {
	max-width: fit-content;
}

.break {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.img-holder {
	height: 100%;
	//width: 100%;
	//background: blue;
	border-radius: 1rem;
	min-width: 300px;
	overflow: hidden;
}

.img-holder img {
	object-fit: cover;
	object-position: 50% 50%;
	height: 100% !important;
	max-height: 100% !important;
}



/* FLEX */

.fb-m {
	flex-basis: 400px;
	height: 400px
}

.fb-l {
	flex-basis: 100%;
	height: 650px
}

.fg-1 {
	flex-grow: 1;
}

.fg-2 {
	flex-grow: 2;
}

.aic {
	align-items: center;
}

.logo {
	width: 160px;
}

.logo:focus, .logo:active {
	outline: none !important;
	box-shadow: none !important;
}

body,
body a,
body input,
body button {
	//cursor: none !important;
}



body.blueClass #masthead nav a,
body.videoClass #masthead nav a {
	color: black !important;
	transition: ease-in-out color 0.5s;
}

body.blueClass #masthead nav #bowl,
body.videoClass #masthead nav #bowl {
	fill: #e8e3d5 !important;
	transition: ease-in-out fill 0.5s;
}

.framer-container {
	max-height: fit-content;
}

#colophon {
	display: none !important;
}

.site-header, .site-main, .widget-area, .site-footer {
	padding: 0px !important;
}

.row p {
	max-width: 670px;
}

.modal.fade .modal-dialog {
	  -webkit-transform: translate(0, 0);
	  -ms-transform: translate(0, 0); // IE9 only
		  transform: translate(0, 0);

 }

.scrollsection {
	transition: 1s;
}

body {
	transition: ease-in-out background 0.5s;
	background: var(--off-white);
}

.spacer {
	width: 100%
}

.spacer.xxl {
	height: 160px;
}

.spacer.xl {
	height: 120px;
}

.spacer.l {
	height: 64px;
}

.spacer.m {
	height: 32px;
}

.spacer.s {
	height: 16px;
}

.spacer.xs {
	height: 8px;
}

.spacer.xxs {
	height: 4px;
}

.spacer.6rem {
	height: 6rem;
}

.btn,
input[type="submit"] {
	padding: 16px 28px !important;
	border-radius: 80px !important;
	margin-top: 10px !important;
	font-size: 10pt !important;
	letter-spacing: -0.2pt !important;
}





.modal-content.menu {
	background: #000000;
}

.modal-content.bio {
	background: var(--off-white);
}

body .menu a,
body .modal-content.menu a h2,
body .modal-content.menu a h4 {
	color: var(--off-white) !important;
	text-decoration: none !important;
	
}

body .sec-men-item h4 {
	font-family: "body-text" !important;
	line-height: 1.2 !important;
	font-weight: normal !important;
}

body a.sec-men-item:first-of-type {
	margin-top: 80px !important;
}

body .modal-content.menu a h2 {
 //display: inline-block;
 position: relative;
}

body .modal-content.menu a h2::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: var(--off-white);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

body .modal-content.menu a h2:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.yellowClass {
	background: var(--yellow) !important;
}

.blueClass {
	background: var(--blue-new) !important;
}

.redClass {
	background: var(--red) !important;
}

.entry-content {
	margin: 0px !important;
}

#main .bg-faded.yellow {
	background: var(--yellow) !important;
	
}

body:not(.blueClass):not(.videoClass):not(.redClass) h1,
body:not(.blueClass):not(.videoClass):not(.redClass) h2,
body:not(.blueClass):not(.videoClass):not(.redClass) p,
body:not(.blueClass):not(.videoClass):not(.redClass) h3 {
	color: #000000;
	transition: ease-in-out color 0.5s;
}

p .serif {
	font-family: new-spirit-condensed, serif;
	font-weight: 300;
	font-style: normal;
	font-size: 1.5rem;
	letter-spacing: -0.5;
}



.card, .accordion-item {
	border-radius: 2rem;
	border: none !important;
	overflow: hidden !important;
	background: var(--off-white);
	filter: drop-shadow(0 2px 20px rgba(33,35,36,.1));
	-webkit-filter: drop-shadow(0 2px 20px rgba(33,35,36,.1));
	-webkit-transform: translateZ(0);
	transition: ease-in-out background 0.5s;
}

.carousel-item .card {
	//background: #e69034 !important;
	//filter: none !important;
	max-width: 800px;
	width: calc(100vw - 40px);
	margin: 40px auto;
	display: flex;
	filter: drop-shadow(0 2px 20px rgba(33,35,36,.1)) !important;
}

.carousel-inner {
	padding-bottom: 40px;
}

.carousel-control-next, .carousel-control-prev {
	background: transparent !important;
	display: none !important;
}

button:not(:hover):not(:active):not(.has-background) {
	//background: transparent;
}

.card-square {
	filter: drop-shadow(0 2px 20px rgba(33,35,36,.05));
	-webkit-filter: drop-shadow(0 2px 20px rgba(33,35,36,.05));
	-webkit-transform: translateZ(0);
	padding-bottom: 100%;
	background: var(--off-white) !important;
	border-radius: 1rem;
	margin-bottom: 2rem;
	overflow: hidden !important;
}

.card-rectangle {
	filter: drop-shadow(0 2px 20px rgba(33,35,36,.05));
	-webkit-filter: drop-shadow(0 2px 20px rgba(33,35,36,.05));
	-webkit-transform: translateZ(0);
	padding-bottom: 45%;
	background: var(--off-white) !important;
	border-radius: 1rem;
	margin-bottom: 2rem;
	overflow: hidden !important;
}

header nav {
	z-index: 999;
}

.full-img-container {
	border-radius: 1rem !important;
	overflow: hidden;
	height: calc(100vh - 80px) !important;
	width: calc(100vw - 80px) !important;
	margin: auto;
	min-height: 600px !important;
}

.tba .full-img-container {
	margin-bottom: 40px !important;
}

.full-img-container img {
	object-fit: cover;
	object-position: 50% 50%;
	height: 100% !important;
	max-height: 100% !important;
}

.card-rectangle img {
	position: absolute;
}

.card-square img {
	position: absolute;
}

.blueClass .card {
	background: var(--blue-new) !important;
}

.card-img-container {
	max-height: 260px;
	overflow: hidden !important;
}

.card-container {
	gap: 40px;
	flex-wrap: wrap;

}

.card-container > a,
.card-container > .card {
flex-basis: calc((100% / 3) - (40px / (3 / 2)));
}



.quart-container {
	gap: 40px;
	flex-wrap: wrap;
}

.quart-container > a,
.quart-container > * {
	max-width: calc((100% / 4) - (40px / (4 / 3)));
	width: 100%;
	
	//min-width: 240px !important;
	///flex-basis: 280px;
	//flex-grow: 2;
	//max-width: 320px;

}

.card-img, .card-img-top {
	border-top-left-radius: 2rem;
	border-top-right-radius: 2rem;
	object-fit: cover;
	object-position: 50% 50%;
	height: 260px;
	overflow: hidden !important;
	transition: ease-in-out transform 0.5s;
}

.card-img-square {
	object-fit: cover;
	object-position: 50% 50%;
	height: 100%;
	transition: ease-in-out transform 0.5s;
}



a .card p,
.card-container a,
.quart-container a {
	text-decoration: none !important;
	
}

.quart-container a {
	display: contents;
}

.card-full .card-body {
	padding: 4rem;
}

.card-body {
	padding: 2rem;
}

.card-body.large {
	//padding: 3rem;
}

.blueClass .fullframer h1,
.blueClass p,
.blueClass .text-link {
	color: var(--off-white) !important;
	transition: ease-in-out color 0.5s;
}

body:not(.blueClass):not(.videoClass):not(.redClass) .text-link {
	color: #000000;
}

body:not(.blueClass):not(.videoClass):not(.redClass) .text-link:hover {
	color: #000000;
}

.videoClass .fullframer h1,
.videoClass p,
.blueClass .text-link {
	color: var(--off-white) !important;
	transition: ease-in-out color 0.5s;
}

.videoClass .menu-icon span,
.blueClass .menu-icon span,
.redClass .menu-icon span {
	background: var(--off-white) !important;
}

.videoClass #myVideo {
	opacity: 1;
}

#myVideo {
  position: fixed;
  transition: ease-in-out opacity 0.5s;
  opacity: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  min-width: 100vw;
  min-height: 100vh;
  margin: 0px !important;
  object-fit: cover;
  object-position: 50% 50%;
  
}

a:focus {
	background: transparent !important;
}


body:not(.blueClass):not(.videoClass):not(.redClass) .btn-primary,
input[type="submit"] {
	background: #000000 !important;
	border: 1px solid #000000 !important;
	transition: ease-in-out background 0.5s;
	color: var(--off-white) !important;
}

body:not(.blueClass):not(.videoClass):not(.redClass) .btn-secondary {
	background: transparent !important;
	border: 1px solid #000000 !important;
	transition: ease-in-out background 0.5s;
	color: #000000 !important;
}

.blueClass .btn-primary,
.redClass .btn-primary,
.videoClass .btn-primary,
#main .retreat-footer a.btn-primary {
	background: var(--off-white) !important;
	border: 1px solid var(--off-white) !important;
	transition: ease-in-out background 0.5s;
	color: #000000 !important;
}

.videoClass {
	background: #000000 !important;
}

/* menu */



:root {
	--bar-bg: #212529;
}

.menu-icon {
	position: relative;
	width: 50px;
	height: 50px;
	cursor: pointer;
	z-index: 999999;
}

	.menu-icon .menu-icon__cheeckbox {
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
		cursor: pointer;
		z-index: 2;
		-webkit-touch-callout: none;
		position: absolute;
		opacity: 0;
	}
	
	.menu-icon div {
		margin: auto;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		width: 34px;
		height: 12px;
	}
	.menu-icon span {
		position: absolute;
		display: block;
		width: 100%;
		height: 2px;
		background-color: #000;
		border-radius: 1px;
		transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);

		
	}
	.menu-icon span:first-of-type {
		top: 0;
	}
	.menu-icon span:last-of-type {
		bottom: 0;
	}
	
	
	
	.menu-icon:focus-within span:first-of-type,
	.close-menu .menu-icon span:first-of-type {
				transform: rotate(45deg);
				top: 5px;
				background-color: var(--off-white);
			}
			
	.menu-icon:focus-within span:last-of-type,
	.close-menu .menu-icon span:last-of-type {
				transform: rotate(-45deg);
				bottom: 5px;
				background-color: var(--off-white);
				
	}
	
	.close-menu .menu-icon:hover span:last-of-type {
	width: 100% !important;
}

	.menu-icon:not(:active):hover span:last-of-type
	 {
		width: 12px;
	}

	body.blueClass .small, body.videoClass .small, body.redClass .small, body .menu .small {
		background-color: var(--off-white);
	}
	
	body:hover .small {
		//opacity: 1;
	}
	
	.small{
		opacity: 0;
		position: fixed;
	  width: 10px;
	  height: 10px;
	z-index: 99999;
	  background-position: center center;
		background-color: #000;
		border-radius: 50%;
		margin-bottom: 20rem;
	 pointer-events: none;
	   transition: width 0.3s, height 0.3s, opacity 0.1s;
	
	}
	.big {
	position: fixed;
	display: none;
	opacity: 0.2;
		z-index: 99999;
	  width: 30px;
	  height: 30px;
	  background-position: center center;
	  background-color: #000;
	  border-radius: 50%;
	 margin-bottom: 20rem;
	  pointer-events: none;
	  transition: width 0.3s, height 0.3s, transform 0.3s, opacity 0.3s;
	  mix-blend-mode: exclusion;
	  animation-name: stretch;
				animation-duration: 2.0s;
				animation-timing-function: ease-out;
				animation-direction: alternate;
				animation-iteration-count: infinite;
				animation-play-state: running;
	}
	
	.bigger {
		width: 50px;
		  height: 50px;
		  opacity: 1;
		  mix-blend-mode: exclusion;
		  animation-name: stretch;
		  animation-duration: 2.0s;
		  animation-timing-function: ease-out;
		  animation-direction: alternate;
		  animation-iteration-count: infinite;
		  animation-play-state: running;
	}
	
	.hidecursor {
		opacity: 0 !important;
	}
	
	.whitecursor {
		background-color: var(--off-white);
	}
	
	
	@keyframes stretch {
				0% {
				   
					
					background-color: #050582;
					border-radius: 100%;
				}
	  
				50% {
					background-color: orange;
				}
	  
				100% {
					//transform: scale(2.0);
					background-color: #de0a05
				}
			}
	
	

	
	
	/* custom video */ 
	
	.wrapper {
		 position:relative;
		 // width:760px !important;
		 overflow: hidden;
		 //padding: 0px !important;
		 width: 100%;
		 //height: 100%;
		 
	  }
	  
	  .wrapper img {
		  max-width:100%;
		  width: 100% !important;
		  height: 100%;
		  object-fit: cover;
		  position: absolute !important;
	  }
	  
	  .wrapper iframe {
		  display:none;
		  height: 100%;
		  width: 100%;
		  position: absolute !important;
	  }
	  
	  .play-btn {
		  position:absolute;
		  z-index:666;
		  top:50%;
		  left:50%;
		  transform:translate(-50%, -50%);
		  background-color:transparent !important;
		  border:0;
		  opacity: 0.5;
		  pointer-events: none;
		  transition: ease-in-out opacity 0.3s;
	  }
	  
	  .overlay {
		  position: absolute;
		  background: black;
		  top: 0px;
		  left: 0px;
		  width: 100%;
		  height: 100%;
		  opacity: 0.7;
		  transition: ease-in-out opacity 0.3s;
		  align-items: center;
		  justify-content: center;
		  display: flex;
	  }
	  
	  .overlay:hover {
		  opacity: 0.5;
		  cursor: pointer;
	  }
	  
	  .wrapper:hover .play-btn {
		  opacity: 1
	  }
	  
	  .overlay h2 {
		  color: var(--cosmic-blue) !important;
		  opacity: 1;
		  font-family: Title;
		  text-transform: uppercase;
		  max-width: 80%;
		  font-size: 3rem;
		  letter-spacing: -0.2rem;
		  text-align: center;
		  width: 100%;
		  margin: auto;
		  line-height: 2.5rem;
	  }
	  
	  .wrapper:hover .play-btn {
		  opacity: 1;
	  }
	  
	  .play-btn svg {
		  width: 30px;
	  }
	  
	  .play-btn:hover {
		  cursor:pointer;
	  }
	  
	  .play-btn:focus {
		  outline:0;
	  }