@base-url: "/wp-content/themes/tsdfoundation/static";

@import "@{base-url}/styles/imports/bootstrap-grid.min.css";
@import "@{base-url}/styles/imports/reset.css";
@import "@{base-url}/styles/imports/fonts.css";
@import "@{base-url}/styles/imports/swiper-bundle.min.css";
@import "@{base-url}/styles/imports/jquery.fancybox.min.css";

//
// #Variables
//
/* Color Theme Swatches in Hex */
@white_off: fade(white, 90%);
@white_off_80: fade(white, 80%);
@white_off_60: fade(white, 60%);
//@primary: #8cb288;
@primary: #45d8ae;

//@primary_v1: #73a06c;


@Syne: 'Syne';
@Surimi: 'Surimi';

//
// #Base
//
html {
	font-size: 62.5%;
}

body {
	position: relative;
	font-size: 2rem;
	line-height: 1.6;
	background-color: #212121;
	font-family: @Syne;
	font-weight: 400;
	p {
		color: @white_off;
	}
	a {
		color: white;
		&:hover {
			text-decoration: none;
		}
	}
	img {
		max-width: 100%;
		height: auto;
	}
	&:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: fade(#333, 65%);
		content: "";
		opacity: 0;
		visibility: hidden;
		z-index: 98;
		transition: opacity .2s ease, visibility .2s ease;
	}
	&.body--has-overlay {
		&:after {
			opacity: 1;
			visibility: visible;
		}
	}
	@media (max-width: 991px) {
		font-size: 1.6rem;
	}
}

.main {
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	width: 100%;
	&__bg {
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		overflow: hidden;
		&:before {
			position: absolute;
			top: ~"calc(-120rem + 100vh)";
			left: ~"calc(-120rem + 100vw)";
			width: 240rem;
			height: 240rem;
			content: "";
			opacity: .3;
			//background: rgb(140,178,136);
			background: rgb(69,216,174);
			background: radial-gradient(circle, rgba(69,216,174,1) 0%, rgba(33,33,33,1) 65%, rgba(33,33,33,1) 100%);
			//transform: translate(50%, 50%);
		}
	}
	@media (max-width: 640px) {
		&__bg {
			&:before {
				top: ~"calc(-50rem + 100vh)";
				left: ~"calc(-50rem + 100vw)";
				width: 100rem;
				height: 100rem;
			}
		}
	}
}

.header {
	display: flex;
	justify-content: space-between;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 10rem;
	border-bottom: 1px solid fade(white, 30%);
	z-index: 10;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	&__logo-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		padding: 0 4rem;
		border-right: 1px solid fade(white, 30%);
	}
	&__logo {
		width: 200px;
		height: auto;
	}
	&__logo-anchor {
		display: flex;
		align-items: center;
	}
	&__right {
		display: flex;
		align-items: center;
		padding: 0 4rem;
		border-left: 1px solid fade(white, 30%);
	}
	&__nav-ul {
		display: flex;
		gap: 3rem;
		li {
			&.current-menu-item {
				a {
					color: white;
					text-shadow: 0 0 7px #fff;
				}
			}
		}
		a {
			text-decoration: none;
			color: @white_off_60;
			transition: color .2s ease, text-shadow .2s ease;
			text-transform: uppercase;
			&:hover {
				color: white;
				text-shadow: 0 0 7px #fff;
			}
		}
	}
	@media (max-width: 640px) {
		height: 6rem;
		&__logo-container {
			border-right: 0;
			padding: 0 0 0 2rem;
		}
		&__logo {
			width: 150px;
		}
		&__right {
			padding: 0 2rem;
			border-left: 0;
		}
		&__nav-ul {
			gap: 1rem;
			a {
				font-size: 1.4rem;
			}
		}
	}
}

.articles {
	&__item {
		display: flex;
		flex-flow: column nowrap;
		align-items: flex-start;
		padding-bottom: 3rem;
		margin-bottom: 3rem;
		border-bottom: 1px solid fade(white, 10%);
	}
	&__item-title {
		font-family: 'Surimi';
		font-size: 4rem;
		text-decoration: none;
		color: @white_off_80;
		transition: color .2s ease, text-shadow .2s ease;
		&:hover {
			color: white;
			text-shadow: 0 0 7px #fff;
		}
	}
	&__date {
		color: @white_off_60;
		font-style: italic;
		font-size: 1.8rem;
		margin-bottom: 2.6rem;
	}
	@media (max-width: 640px) {
		&__item-title {
			font-size: 3rem;
		}
	}
}

.article {
	&__header {
		display: flex;
		flex-flow: column nowrap;
		margin-bottom: 3rem;
	}
	&__title {
		font-size: 6rem !important;
		line-height: 1 !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		margin-bottom: 1rem;
	}
	&__date {
		color: @white_off_60;
		font-style: italic;
		font-size: 1.8rem;
	}
	@media (max-width: 640px) {
		&__title {
			font-size: 3rem !important;
		}
	}
}

.footer {
	position: relative;
	display: flex;
	width: 100%;
	margin-top: 10rem;
	&__inner {
		padding: 3rem 0;
	}
	&__text {
		font-family: @Syne;
		font-size: 1.4rem;
		line-height: 1.3;
		color: @white_off_80;
	}
	@media (max-width: 640px) {
		margin-top: 6rem;
		&__inner {
			padding: 1.6rem 0;
		}
	}
}

.container {
	width: 100%;
	max-width: 144rem;
	padding-left: 2.4rem;
	padding-right: 2.4rem;
	margin: 0 auto;
	&--centered {
		display: flex;
		justify-content: center;
	}
	&--specific {
		max-width: 80rem;
	}
	&--large {
		max-width: 108rem;
	}
	&--medium {
		max-width: 72rem;
	}
	&--grid {
		max-width: 128rem;
		max-width: 102.4rem;
	}
}

//
// #Buttons
//
.button,
button,
input[type="submit"] {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	line-height: 1.3rem;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	height: 5.4rem;
	padding: 0 3rem;
	margin: 0;
	font-family: @Syne;
	font-size: 2rem;
	font-weight: 300;
	color: white;
	background-color: darken(@primary, 15%);
	box-shadow: 0 0 0 0;
	border: 0;
	&:hover {
		background-color: darken(@primary, 25%);
	}
	&.button--disabled {
		pointer-events: none;
		opacity: .3;
	}
	&.button--uppercase {
		text-transform: uppercase;
	}
}
button,
input[type="submit"] {
	cursor: pointer;
}

.button {
	&--with-icon {
		gap: 10px;
	}
	&--ghost {
		background: transparent;
		color: @primary;
		border: 1px solid @primary;
	}

	@media (max-width: 640px) {
		font-size: 1.6rem;
		height: 4.4rem;
		padding: 0 1.8rem;
	}
}

.intro {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 30rem 0 6rem;
	&__name {
		display: none;
		flex-flow: column nowrap;
		font-size: 5.4rem;
		line-height: 1.3;
		color: @primary;
		font-weight: 700;
		span {
			color: @white_off;
		}
	}

	&__content {
		display: flex;
		justify-content: center;
	}

	&__logo {
		max-width: 45rem;
		width: 100%;
	}

	@media (max-width: 768px) {
		padding: 10rem 0 8rem;
		&__name {
			font-size: 3.8rem;
		}
	}
	@media (max-width: 768px) {
		//padding: 0;
		padding: 20rem 0 3rem;
		&__content {
			display: flex;
			align-items: flex-end;
			//height: 86vh;
			//padding-bottom: 20vh;
		}
		&__name {
			font-size: 3rem;
		}
	}
}

.content {
	position: relative;

	&--first {
		padding: 22rem 0 6rem;

		h3 {
			font-size: 2.6rem !important;
			margin-bottom: 1rem !important;
		}

		h5 {
			font-size: 1.6rem !important;
			font-style: italic;
			color: fade(white, 60%) !important;
		}

		h1 {
			display: flex;
			flex-flow: column nowrap;
			align-items: center;
			color: @white_off_80;
			font-size: 8rem;
			font-family: @Surimi;

			span {
				font-size: 2.6rem;
				font-weight: 500;
				font-family: @Syne;
			}
		}
	}

	&--tickets {
		padding: 3rem 0 6rem;
	}

	&--trailer {
		padding: 0 0 6rem;
	}

	&__title {
		font-family: @Surimi;
		text-transform: uppercase;
		font-size: 6rem !important;
	}

	@media (max-width: 640px) {
		&--first {
			padding: 14rem 0 3rem;

			h1 {
				font-size: 4.2rem;

				span {
					font-size: 2.2rem;
				}
			}
		}

		&--tickets {
			padding: 0;
		}

		&__title {
			font-size: 2.8rem !important;
		}
	}
}

//
// #Tickets
//
.tickets {
	position: relative;
	display: flex;
	margin-top: 6rem;

	&:after {
		position: absolute;
		top: 0;
		left: 50%;
		width: 1px;
		height: 100%;
		background-color: rgba(255,255,255, .1);
		content: '';
	}

	&__col {
		display: flex;
		flex: 0 0 auto;
		width: 50%;
		flex-flow: column nowrap;
		align-items: center;
	}

	&__qr {
		max-width: 21.8rem !important;
		margin-bottom: 0 !important;
	}

	.button {
		margin-right: 0 !important;
	}

	@media (max-width: 768px) {
		margin-top: 3rem;
		flex-flow: column nowrap;

		&:after {
			display: none;
		}

		&__col {
			width: 100%;
			padding-bottom: 4rem;
			margin-bottom: 4rem;

			&:not(:last-of-type) {
				border-bottom: 1px solid rgba(255,255,255, .1);
			}
		}
	}
}

//
// #Swiper
//
.swiper-pagination-bullets {
	display: inline-flex;
	height: 3rem;
	align-items: flex-end;
	@media only screen and (max-width: 768px) {
		display: flex;
		height: auto;
		left: 2.4rem;
	}
}
.swiper-pagination-bullet {
	position: relative;
	width: 6rem;
	height: 100%;
	max-height: 3rem;
	height: 3rem;
	margin-right: 2rem;
	border-radius: 0;
	opacity: 1 !important;
	background-color: transparent !important;
	&:after {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-height: .2rem;
		transition: background .5s ease, max-height .3s ease;
		background: fade(white, 30%);
		content: "";
	}
	&:hover {
		&:after {
			background: white;
			max-height: .6rem;
		}
	}
	&.swiper-pagination-bullet-active {
		&:after {
			background: fade(white, 80%);
			max-height: .6rem;
			transition: background .5s ease, max-height .3s .5s ease;
		}
	}
	@media only screen and (max-width: 768px) {
		width: 3rem;
		height: 3rem;
		margin-right: 0;
		margin-bottom: 1rem;
		&:after {
			max-height: 3rem;
			width: .4rem;
		}
		&.swiper-pagination-bullet-active {
			max-height: 3rem;
			&:after {
				max-height: 3rem;
			}
		}
	}
}

.poster {
	max-width: 52rem !important;
}

//
// #Editor
//
.editor {
	h2, h3, h4, h5, h6 {
		line-height: 1;
		font-weight: 500;
		margin-bottom: 2rem;
		line-height: 1.3;
		color: @white_off_80;
		strong {
			font-weight: 500;
			color: @primary;
		}
	}
	h2 {
		font-size: 4rem;
	}
	h3 {
		font-size: 3.6rem;
	}
	h4 {
		font-size: 3.2rem;
	}
	h5 {
		font-size: 2.4rem;
	}
	h6 {
		font-size: 1.8rem;
	}
	p, ul, ol {
		margin-bottom: 3rem;
	}
	ul li,
	ol li {
		color: @white_off_80;
		padding-left: 2rem;
		// font-style: italic;
	}
	ul li {
		position: relative;
		&:before {
			position: absolute;
			left: 0;
			top: 1.4rem;
			width: .6rem;
			height: .6rem;
			background: @primary;
			border-radius: 50%;
			content: "";
		}
	}
	ol {
		counter-reset: li-counter;
		li {	
			position: relative;
			&:before {
				position: absolute;
				left: 0;
				top: 50%;
				font-weight: 700;
				transform: translateY(-50%);
				content: counter(li-counter);
				counter-increment: li-counter;
			}
		}
	}
	img {
		max-width: 100%;
		width: 100%;
		height: auto;
		margin-top: 3rem;
		margin-bottom: 3rem;
	}
	p {
		//font-family: 'Source Sans Pro', 'Arial', sans-serif;
		color: @white_off_80;
	}
	a.button {
		margin-right: 1.6rem;
		margin-bottom: 1.6rem;
		margin-top: 3rem;
	}
	
	&--centered {
		text-align: center;
	}
	
	@media (max-width: 991px) {
		p, ul, ol {
			margin-bottom: 1.6rem;
		}
		ul {
			li {
				&:before {
					top: 1rem
				}
			}
		}
	}
	@media only screen and (max-width: 767px) {
		h2, h3, h4 {
			font-size: 2.2rem;
			margin-bottom: 1rem;
		}
		h5, h6 {
			font-size: 2rem;
			margin-bottom: 1rem;
		}
		p, ul, ol {
			margin-bottom: 1.6rem;
		}
	}
	@media only screen and (max-width: 640px) {

	}
}

.grid {
	width: calc(100% + 4.8rem);
	margin-left: -2.4rem;
	display: flex;
	flex-flow: row wrap;
	@media only screen and (max-width: 640px) {
		width: calc(100% + 2.4rem);
		margin-left: -1.2rem;
	}
}

//
// #Tour
//
.tours {
	display: flex;
	flex-flow: column nowrap;
	gap: 20px;
}

.tour {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	padding: 4rem;
	background-color: #212a28;

	&__left {
		display: flex;
		flex-flow: column nowrap;
	}
	&__date {
		color: @white_off_60;
		font-style: italic;
		font-size: 1.6rem;
	}
	h3.tour__theatre {
		color: @white_off_80;
		margin-bottom: 0 !important;
	}
	&__location {
		color: @white_off_60;
		font-size: 1.6rem;
	}
	&__right {
		display: flex;
		flex-flow: column nowrap;
		align-items: flex-end;
		justify-content: center;
		gap: 1rem;

		.button {
			min-width: 180px;
		}
	}
	&--passed {
		opacity: 0.5;
		pointer-events: none;
	}
	@media (max-width: 640px) {
		padding: 2rem;
		flex-flow: column nowrap;
		gap: 2rem;

		h3.tour__theatre {
			font-size: 1.8rem !important;
		}
		&__right {
			align-items: flex-start;
		}
	}
}

//
// #Gallery
//
.gallery {
	display: flex;
	flex-flow: row wrap;
	gap: 2rem;

	&__item {
		display: flex;

		&:hover {
			.gallery__img {
				scale: 1.1;
			}
		}
	}

	&__img {
		width: 150px;
		transition: scale 200ms ease;
	}

	@media (max-width: 480px) {
		&__item {
			width: ~"calc(50% - 10px)";
			flex-basis: ~"calc(50% - 10px)";
		}

		&__img {
			width: 100%;
		}
	}
}


//
// #Form-elements
//
input[type="text"],
input[type="textarea"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="tel"],
select,
textarea {
	width: 100%;
	font-size: 1.8rem;
	line-height: 2rem;
	height: 5rem;
	border: 0;
	padding: 0 1.8rem;
	margin-bottom: 2.4rem;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: 1rem;
	&::-webkit-input-placeholder {

	}
	&::-ms-input-placeholder { /* Internet Explorer 10-11 */

	}
	&::placeholder {

	}
}

textarea {
	min-height: 200px;
	resize: none;
	padding: 1.8rem;
}

input[type="file"] {
	margin-bottom: 2.4rem;
	font-size: 1.4rem;
}

label {
	font-size: 1.6rem;
	font-weight: 500;
	//color: @heading_green;
}

.wpcf7 {
	.wpcf7-form-control-wrap {
		display: flex;
		flex-flow: column nowrap;
	}
	.wpcf7-not-valid-tip {
		font-size: 1.6rem;
		transform: translateY(-1.6rem);
	}
	form {
		.wpcf7-response-output {
			margin: 2rem 0 0 0;
			padding: 1rem;
			font-size: 1.6rem;
			line-height: 1.3;
		}
	}
}

.form {
	&__row {

	}
}

.grecaptcha-badge {
	display: none;
}

iframe {
	max-width: 100%;

	@media (max-width: 450px) {
		height: 220px;
	}
}