/*
Theme Name:   Cosmic Crooner
Theme URI:    https://mutsaerts.dev
Description:  Cosmic Crooner
Author:       Michiel Mutsaerts
Author URI:   https://mutsaerts.dev
Template:     twentytwentyone
Version:      1.0.8
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:  cosmiccrooner
*/

:root {
	--cosmic-black: #0e3a49;
	
	--cosmic-blue: #e2c559;
	--cosmic-pink: #dc007d;
	--cosmic-grey: rgba(255, 255, 255, 0.1);
	--cosmi: white;
}

body {
	background: var(--cosmic-black);
}


/*
folio bold - 135 hoger

avenir next utralight

text - museo sans 500 - 900

*/

@font-face {
  font-family: Title;
  src: url(fonts/Lausanne-Regular.otf);
}

@font-face {
  font-family: Subtitle;
  src: url(fonts/Lausanne-Regular.otf);
}

@font-face {
  font-family: Body-bold;
  src: url(fonts/Lausanne-Regular.otf);
}

@font-face {
  font-family: Body;
  src: url(fonts/Lausanne-Regular.otf);
}

.bg {
	background: url(https://maidarose.com/wp-content/uploads/2023/11/mr-bg.jpg) !important;
	background-position: center !important;
	background-size: cover !important;
	position: fixed;
	width: 100vw;
	height: 100vh;
	margin: 0px;
	z-index: -1;
	
}

h1 {
	color: var(--cosmic-blue) !important;
	font-family: Title;
	
	
}

h2 {
	color: var(--cosmic-blue) !important;
	font-family: Title;
	text-transform: lowercase;
	letter-spacing: -0.2rem;
	
	
}

#content {
	min-height: calc(100vh - 140px) !important;
}

.no-widgets .site-footer {
	margin-top: calc(3 * var(--global--spacing-vertical));
}


#main h3 {
	color: var(--cosmic-blue) !important;
	font-family: Body;
	font-size: 1em;
	text-transform: lowercase;
	font-weight: 700 !important;
	//letter-spacing: -0.1rem;
	margin-top: 0px;
	margin-bottom: calc(0.25 * var(--global--spacing-vertical)) !important;
}

#main .lyrics h2 {
	margin-bottom: calc(1 * var(--global--spacing-vertical)) !important;
	line-height: 1 !important;
}

#main .lyrics h2,
#main .lyrics p {
	//color: var(--cosmic-pink) !important;
}

#main .lyrics h2:not(:first-of-type) {
	margin-top: calc( 3 * var(--global--spacing-vertical)) !important;
}


h3:not(:first-of-type) {
	margin-top: calc( 2 * var(--global--spacing-vertical)) !important;
}

p {
	color: var(--cosmic-blue) !important;
	font-family: Body;
	margin: 0px auto !important;
	text-transform: lowercase !important;
	font-size: 0.9rem !important;
	letter-spacing: 0.05rem;
}

a {
	//transition: ease-in-out text-shadow 0.3s;
	color: var(--cosmic-blue) !important;
}

//a:hover { text-shadow: 0 0 15px rgba(28, 125, 191, 0.7); }

a:focus {
	background: transparent !important;
	outline: none !important;
}

#colophon p {
	font-size: 0.7rem !important;
}

#colophon {
	padding: 20px 20px 10px 20px !important;
}


.home .home-header {
	position: fixed;
	width: 100vw;
}

@media (max-width: 767.98px) { 
	
	.main-header {
		padding: 20px 20px 0px 20px;
		line-height: 1;
		margin-bottom: -10px;
		font-size: 10vw !important;
		letter-spacing: -0.4vw;
	}
	
	.main-menu a {
	font-size: 1em !important;
	margin-top: 2px;
}
	
	.social-icons a {
		font-size: 1em !important;
		margin-top: -7px !important;
	}
	
	#main .bg {
		height: calc(100vh - 60px) !important;
		//transform: scale(1.5);
		//position: center bottom !important;
	}
	
	#main .lyrics h2 {
		font-size: 1.8rem !important;
		letter-spacing: -0.1rem;
	}
	
 }
 
 @media (min-width: 768px) { 
	 .main-header {
		 padding: 40px 40px 0px 40px;
		 line-height: 1;
		 margin-bottom: 0px;
		 font-size: 8vw;
		 letter-spacing: -0.5vw;
	 }
  }

.main-menu {
	width: fit-content;
	margin: 20px auto;
	//gap: 15px;
	align-items: center;
	
}

.main-menu > * {
	margin: 0px 7.5px;
}

.main-menu a {
	font-size: 1em;
	vertical-align: middle;
	color: var(--cosmic-blue);
	font-family: Subtitle;
	text-transform: lowercase;
	text-decoration: none !important;
}


.social-icons {
	width: fit-content;
	margin: auto;
	//gap: 15px;
	align-items: center;
}

.social-icons > * {
	margin: 0px 7.5px;
}

.social-icons a {
	font-size: 1em;
	vertical-align: middle;
	color: var(--cosmic-blue);
}

.home-header a {
	text-decoration: none !important;
}

#masthead,
#main header,
.home #colophon {
	display: none !important;
}

#main {
	padding: 0px !important;
}

/* seated */

.seated-events-table > *:not(.seated-event-row):not(.seated-no-events) {
	display: none !important;
}

.seated-no-events {

}

.seated-no-events {
  visibility: hidden;
  
}

.seated-events-table {
	border-top: none !important;
}

.seated-no-events:after {
  content: 'Upcoming shows will be announced soon';
  text-align: center;
  padding: 40px auto;
  visibility: visible;
  position: relative;
  margin: auto;
  display: block;
  width: 100%;
}

.seated-events-table {
	//border-top: 1px solid var(--cosmic-blue) !important;
}

.seated-event-row {
	border-bottom: 1px solid var(--cosmic-blue) !important;
}

.seated-event-date-cell {
	font-family: Body;
	text-transform: lowercase;
	color: var(--cosmic-blue);
	font-size: 1em !important;
}

.seated-event-venue-name,
.seated-event-venue-location,
.seated-event-details-cell {
	font-family: Body;
	text-transform: lowercase;
	color: var(--cosmic-blue);
	font-size: 0.9rem !important;
	opacity: 1 !important;
}

.seated-event-link1 {
	background: var(--cosmic-blue) !important;
	font-family: Body;
	text-transform: lowercase !important;
	color: var(--cosmic-black) !important;
	border-radius: 0.3rem !important;
	border: 2px solid var(--cosmic-blue) !important;
}

.seated-event-link1:hover {
	background: var(--cosmic-blue) !important;
	font-family: Body;
	text-transform: lowercase !important;
	color: var(--cosmic-black) !important;
	border-radius: 0.3rem !important;
	border: 2px solid var(--cosmic-blue) !important;
}

.seated-event-date-cell {
	text-transform: lowercase !important;
}

/* form */

input,
.select2-container {
	//background: transparent !important;
	border: 1px solid var(--cosmic-grey) !important;
	background: var(--cosmic-grey) !important;
	border: none !important;
	border-radius: 0.3rem !important;
	font-family: Body !important;
	color: var(--cosmic-blue) !important;
	padding: 0px 16px !important;
	line-height: 1 !important;
	font-size: 0.9rem !important;
	height: 2.6rem;
	
}

textarea {
	background: transparent !important;
	border: 1px solid var(--cosmic-blue) !important;
	border-radius: 0.3rem !important;
	font-family: Body !important;
	color: var(--cosmic-blue) !important;
	padding: 0px 16px !important;
	line-height: 1 !important;
	font-size: 0.9rem !important;
	//height: 2.6rem;
	padding: 12px 24px !important;
	min-height: 5rem;
}

.cosmic-form.d-flex {
	gap: 10px;
	flex-wrap: wrap;
}

.page-id-28 .btn.btn-primary {
	min-width: fit-content;
	max-width: 100%;
	flex-basis: 80px;
	flex-grow: 2;
}

.btn.btn-primary,
.post-password-form__submit,
#main .button {
	background: var(--cosmic-blue) !important;
	border: 1px solid var(--cosmic-blue) !important;
	border-radius: 0.3rem !important;
	font-family: Body !important;
	color: var(--cosmic-black) !important;
	line-height: 1 !important;
	height: 2.6rem;
	padding: 12px 24px !important;
	max-width: 320px;
	//width: 100%;
	font-size: 0.9rem !important;
	}
	
	.post-password-form::before {
		content: 'haruki';
		width: 100%;
		margin: 2rem;
		text-align: center;
		color: var(--cosmic-blue) !important;
		font-family: Title;
		text-transform: lowercase;
		letter-spacing: -0.2rem;
		font-size: 3rem;
	}
	
	#main .post-password-form__input {
		margin-right: 0px !important;
		margin-left: 0px !important;
	}
	
	.post-password-form {
		width: 400px;
		max-width: 80vw;
	}
	
	.post-password-form__label {
		display: none !important;
	}
	
	.post-password-form__submit {
		max-width: 100% !important;
		margin-left: 0px !important;
	}
	
	::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	  color: var(--cosmic-blue) !important;
	  opacity: 0.5; /* Firefox */
	}
	
	#main .trash {
		max-width: 40px !important;
		padding: 0px !important;
	}
	
	hr {
		border-bottom: 1px dashed var(--cosmic-blue) !important;
		opacity: 0.5 !important; 
		margin-top: 3px;
	}
	
	.spinner-border {
		color: var(--cosmic-blue) !important;
		height: 8rem !important;
		width: 8rem !important;
		margin-top: calc(50vh - 8rem) !important;
		//border-width: 0.15em !important;
	}
	
	.post-password-message {
		display: none !important;
	}
	
	@media (max-width: 767.98px) { 
		
		.cosmic-form > * {
			width: 100%
		}
		
		.page-id-28 .btn {
		width: calc(100% - 52px) !important;
		flex-basis: unset !important;
	}
		
	 }
	
	
	
	/* store */
	
	.woocommerce-breadcrumb,
	.woocommerce-result-count,
	.woocommerce-ordering,
	.woocommerce-tabs,
	.related.products,
	.product_meta,
	.shipping-calculator-button,
	.woocommerce-product-gallery__trigger {
		display: none;
	}
	
	.products .add_to_cart_button {
		display: none;
	}
	
	.products.columns-4 {
		margin-top: 20px;
	}
	
	.products h2,
	.product_title.entry-title,
	.cart_totals h2 {
		color: var(--cosmic-blue) !important;
		font-family: Body;
		font-size: 1em !important;
		text-transform: lowercase;
		font-weight: 600 !important;
		letter-spacing: -0px;
		margin-top: 0px;
		margin-bottom: calc(0.25 * var(--global--spacing-vertical)) !important;
		text-align: center;
		margin-top: 1rem !important;
	}
	
	.entry.product {
		margin-top: 30px !important;
	}
	
	.shop_table tr:not(.woocommerce-cart-form__cart-item.cart_item) td {
		padding: 16px 0px !important;
	}
	
	.product_title.entry-title,
	.cart_totals h2 {
		text-align: left !important;
	}
	
	.cart_totals h2 {
		margin-bottom: 16px !important;
		margin-top: 5rem !important;
	}
	
	.products .price,
	.price,
	.shop_table,
	label,
	.woocommerce-Price-amount.amount,
	.woocommerce-product-details__short-description ul li,
	.woocommerce-notice.woocommerce-notice--info.woocommerce-info,
	.woocommerce-error li {
		color: var(--cosmic-blue) !important;
		font-family: Body;
		margin: 0px auto !important;
		text-transform: lowercase !important;
		font-size: 0.9rem !important;
		letter-spacing: 0.05rem;
		
	}
	
	.woocommerce-error li {
		padding: 0px !important;
		display: block;
	}
	
	.woocommerce-product-details__short-description ul {
		padding: 0px 0px 0px 15px;
		//list-style-type: none;
		margin: 20px 0px;
	}
	
	.products .price {
		text-align: center;
	}
	
	.woocommerce ul.products.columns-4 li.product {
		width: calc(33% - 32px)!important;
	}
	
.woocommerce-message a {
	min-width: 116px;
}

.wc_payment_method input[type=radio]:checked+label::before {
	background: var(--cosmic-blue);
}

.wc_payment_method input[type=radio]+label::before {
	background: var(--cosmic-grey);
}
	
	@media only screen and (max-width: 768px) {
	.woocommerce ul.products.columns-4 li.product {
		width: 100% !important;
	}
	.woocommerce ul.products.columns-4 li.product a {
		margin: auto;
	}
	.woocommerce-message {
		flex-direction: column;
	}
	.woocommerce-message a {
		width: 100% !important;
		margin-top: 20px !important;
		max-width: 100% !important;
	}
	
	.coupon .button {
		margin-top: 10px;
		width: 100% !important;
		max-width: 100% !important;
	}
}
	
	#main .woocommerce-message,
	#main .woocommerce-info,
	.woocommerce-NoticeGroup,
	.woocommerce-form-coupon,
	.payment_box {
		background: var(--cosmic-grey) !important;
		border: none !important;
		border-radius: 0.5rem !important;
		color: var(--cosmic-blue) !important;
		padding: 1.5rem !important;
		margin-bottom: 1.5rem !important;
		font-family: Body;
	}
	
	.payment_box select {
		background: var(--cosmic-blue) !important;
		border: none !important;
		border-radius: 0.3rem !important;
		margin-top: 0.5rem !important;
		font-family: Body !important;
	}
	
	.payment_box p {
		font-family: Body !important;
	}
	
	#payment label {
		padding: 0.3rem !important;
	}
	
	.payment_box {
		margin-top: 1.5rem !important;
		font-family: Body !important;
	}
	
	@media only screen and (max-width: 768px) {
	.woocommerce table.shop_table_responsive tr:nth-child(2n+1) td, .woocommerce-page table.shop_table_responsive tr:nth-child(2n+1) td {
		background: transparent;
		-webkit-filter: brightness(88%);
		filter: brightness(88%);
	}
}
	
	.woocommerce-NoticeGroup {
	margin-bottom: 24px !important;
}
	
	#main .woocommerce-notices-wrapper {
		margin: 0px !important;
	}
	
	.woocommerce-input-wrapper span:not(.select2-container) {
		background: var(--cosmic-black) !important;
	}
	
	.woocommerce-input-wrapper span:focus-within,
	.woocommerce-input-wrapper span:target {
		outline: none !important;
		//border: none !important;
	}
	
	.select2-results__option[data-selected=true] {
		background: var(--cosmic-blue) !important;
		color: var(--cosmic-black) !important;
	}
	
	.product-remove a {
		background: transparent;
	}
	
	/* Remove spinner on WooCommerce checkout page */
	.woocommerce .blockUI.blockOverlay {
	  position: relative! important;
	  display: none! important;
	}
	
	.woocommerce-checkout form #order_review .woocommerce-checkout-review-order-table .cart-subtotal, .woocommerce-checkout form #order_review .woocommerce-checkout-review-order-table .order-total, .woocommerce-checkout form #order_review_heading .woocommerce-checkout-review-order-table .cart-subtotal, .woocommerce-checkout form #order_review_heading .woocommerce-checkout-review-order-table .order-total {
		border-top: 1px solid var(--cosmic-blue);
	}
	
	#main .woocommerce-input-wrapper span.select2-selection__rendered,
	#main .woocommerce-input-wrapper span.select2-selection {
		border: none !important;
		background: transparent !important;
		font-family: Body !important;
		color: var(--cosmic-blue) !important;
		padding: 7px 0px !important;
		line-height: 1 !important;
		font-size: 0.9rem !important;
		height: 2.6rem;
		
	}
	
	#main .woocommerce-input-wrapper span.select2-selection__arrow {
		background: transparent !important;
		margin: -4px 10px !important;
	}
	
	.select2-dropdown {
		background: var(--cosmic-black) !important;
		border: 1px solid var(--cosmic-blue) !important;
		border-radius: 0.3rem !important;
		overflow: hidden !important;
	}
	
	.select2-search,
	.select2-results {
		background: var(--cosmic-black) !important;
	}
	
	.woocommerce-notice.woocommerce-notice--info.woocommerce-info {
		padding: 20px !important;
	}
	
	.woocommerce-billing-fields__field-wrapper label {
		margin-top: 10px !important;
	}
	
	.form-row.address-field {
		//margin-bottom: 8px !important;
	}
	
	.woocommerce-error {
		border: 0px !important;
		background: transparent;
		padding-bottom: 0px;
		margin-bottom: 0px !important;
	}
	
	.checkout_coupon.woocommerce-form-coupon p {
		margin-bottom: 10px !important;
	}
	
	.woocommerce-error li {
		//background: transparent;
		//padding: 12px 12px 0px 12px !important;
	}
	
	.col2-set {
		background: var(--cosmic-black) !important;
		//border-radius: 0.5rem !important;
		//padding: 40px !important;
		//border: 1px solid var(--cosmic-blue);
	
	}
	
	.col2-set input {
		//border: 0px !important;
		//background: var(--cosmic-black) !important;
		margin-top: 5px !important;
	}
	
	.woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last {
		width: calc(50% - 6px);
	}
	
	.woocommerce-billing-fields input,
	#billing_country_field,
	#shipping_country_field,
	#billing_state_field {
		margin: 6px 0px !important;
	}
	
	.form-row-first {
		margin-right: 10px;
	}
	
	.woocommerce-shipping-fields,
	.woocommerce-additional-fields,
	#billing_address_2_field {
		display: none !important;
	}
	
	#main .select2-selection__rendered {
		text-transform: capitalize !important;
		letter-spacing: normal !important;
	}
	
	.woocommerce-checkout-review-order ul,
	.woocommerce-shipping-totals ul {
		margin: 1rem 0 2rem;
		padding-left: 0;
	}
	
	.woocommerce table.shop_table .product-thumbnail, .woocommerce-page table.shop_table .product-thumbnail {
		max-width: 80px;
		//margin: 20px !important;
	}
	
	.cart_item:not(:last-child) td {
		//padding-bottom: 0px !important;
	}
	
	.woocommerce-billing-fields h3 {
		margin-top: 2rem !important;
	}
	
	.select2-search {
		padding: 10px;
	}
	
	.select2-results__options {
		padding: 10px;
	}
	
	.select2-results__options li {
		border-radius: 0.3rem !important;
	}
	
	.woocommerce-shipping-methods {
		margin: 0rem !important;
	}

	.woocommerce #main {
		max-width: var(--responsive--alignwide-width);
		margin: auto
	}

.woocommerce ul.products li.product {

margin: 0 16px 16px 16px;

}

	
/* linked */

.linked {
	flex-wrap: wrap;
	max-width: 400px !important;
}

.icon-box {
	min-width: 70px;
	width: 70px;
	height: 70px;
	border-radius: 0.4rem !important;
	background: var(--cosmic-black);
	display: flex;
	align-items: center;
}

.icon-box i {
	color: var(--cosmic-blue);
	font-size: 1.5rem;
	text-align: center;
	width: 100%;
}

.linked img,
.linked .overlay {
	border-radius: 0.4rem !important;
	overflow: hidden;

}

.linked img {
min-width: 70px;
width: 70px;
height: 70px;
object-fit: cover;
}

a.linked-link:focus {
background: var(--cosmic-blue) !important;
}

.linked-link {
	background: var(--cosmic-blue) !important;
	color: var(--cosmic-black) !important;
	width: 100%;
	padding: 0.6rem;
	border-radius: 0.7rem;
	text-decoration: none !important;
	text-align: center;
	font-family: Body;
	font-size: 0.9rem !important;
	max-width: 85vw !important;
	margin: auto !important;
	margin-bottom: 15px !important;
	text-transform: lowercase;
	letter-spacing: -0.03rem !important;
	display: flex;
	align-items: center;
}

.linked-link p {
	text-decoration: none !important;
	text-align: center;
	font-family: Body;
	font-size: 0.9rem !important;
	color: var(--cosmic-black) !important;
	padding: 0.3rem 0.9rem !important;
	letter-spacing: -0.03rem !important;
	line-height: 1 !important;
	max-width: 220px;
}

.wrapper.thumbnail {
	padding-bottom: 75%;
}

.wrapper.thumbnail .cover {
	left: 0;
}

.wrapper.thumbnail button {
	opacity: 1 !important;
}

.spotify-cover {
	width: 100%;
	height: 100%;
	
}

.branded {
	height: 70px
}


/* newz */

#cancel-sort,
#sort {
	width: 100%;
}
.drag {
	
	cursor: grab;
	cursor: -moz-grab;
	cursor: -webkit-grab;
}

 /* (Optional) Apply a "closed-hand" cursor during drag operation. */
.drag:active {
	cursor: grabbing;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
}

.pen {
	pointer-events: none;
}

.hide {
	display: none;
}

.spacer {
	width: 100%;
}

.spacer.s {
	height: 1.25rem;
}

.spacer.m {
	height: 2.5rem;
}

.spacer.l {
	height: 5rem;
}

.videos {
	gap: 30px;
	flex-wrap: wrap;
}

@media (max-width: 767.98px) { 
	
	.video-frame {
		width: 100%;
		max-width: 100%;
		padding-bottom: 75%;
	}
	
	.overlay {
		opacity: 0 !important;
	}
	
	.play-btn {
		opacity: 1 !important;
	}
	
	
 }

@media (min-width: 768px) { 

.video-frame {
	width: calc((100% / 2) - (30px / 1));
	max-width: calc((100% / 2) - (30px / 1));
	padding-bottom: calc(((100% / 2) - (30px / 1)) * 0.75);
}

}


@media (min-width: 1200px) { 

.video-frame {
	width: calc((100% / 3) - (30px / 1.5));
	max-width: calc((100% / 3) - (30px / 1.5));
	padding-bottom: calc(((100% / 3) - (30px / 1.5)) * 0.75);
}

}

/* 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;
	  pointer-events: none;
	  transition: ease-in-out opacity 0.3s;
  }
  
  .overlay {
	  position: absolute;
	  background: var(--cosmic-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;
	  cursor: pointer;
  }
  
  .wrapper:hover .play-btn {
	  opacity: 1
  }
  
  .overlay h2 {
	  color: var(--cosmic-blue) !important;
	  opacity: 1;
	  font-family: Title;
	  text-transform: lowercase;
	  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;
  }
  
  .geeks {
	  position: fixed;
	  width: 100vw;
	  height: 100vh;
	  z-index: 1;
  }
  
  .page-id-28 .home-header {
	  display: none !important;
  }
  
  .home-header {
	  z-index: 999;
	  position: relative;
	  padding-bottom: 40px;
	  margin-top: 20px;
  }