@import '_vars.less';

body {
	background-color: #fff;
}

#page {
	@media @m1 { padding: 120px 20px 0; }
	position: relative;
	z-index: 1;
	@media screen and (max-width: 700px) {
		padding: 20px;
	}
	@media screen and (min-width: 701px) and (max-width: 1000px) {
		padding-top: 25vw;
	}
	@media screen and (min-width: 1001px) and (max-width: 1200px) {
		padding-top: 20vw;
	}
	@media screen and (min-width: 1201px) and (max-width: 1400px) {
		padding-top: 16.666vw;
	}
	@media screen and (min-width: 1401px) {
		padding-top: 14.285vw;
	}
}


.details {
	.title {
		color: @redonwhite;
	}
	div {
		display: inline-block;
		margin-bottom: 20px;
		&:not(:last-child) {
			padding-right: 30px;
		}
	}
	a {
		text-decoration: underline;
	}
}

body.grey {
	.details .title,
	h2 {
		color: @redongrey;
	}
}

#entrance {
	position: fixed;
	z-index: 6;
	@media screen and (max-width: 799px) {
		bottom: 0;
		background-color: @grey;
		left: 0;
		width: 100%;
		padding: 20px;
		* {
			width: 100%;
		}
		&:before {
			position: absolute;
			display: block;
			content: '';
			left: 20px;
			right: 20px;
			top: 0;
			background-color: #fff;
			height: 1px;
		}
	}
	@media screen and (min-width: 800px) {
		right: 40px;
		margin-top: -39px;
	}
	@media screen and (min-width: 800px) and (max-width: 1000px) {
		top: 25vw * 0.88;
	}
	@media screen and (min-width: 1001px) and (max-width: 1200px) {
		top: 20vw * 0.88;
	}
	@media screen and (min-width: 1201px) and (max-width: 1400px) {
		top: 16.666vw * 0.88;
	}
	@media screen and (min-width: 1401px) {
		top: 14.285vw * 0.88;
	}
	p, button, .tickets, .book-it {
		display: block;
		color: #fff;
		padding: 7px 15px;
	}
	p.info {
		background-color: #999;
		color: #000;		
	}
	p.free {
		background-color: #fff;
		color: #000;
	}
	p.private {
		border: 1px solid #fff;
		opacity: 0.5;
	}
	button, .tickets, .book-it {
		cursor: pointer;
		background-color: @red;
		&:hover {
			background-color: #fff;
			color: #000;
		}
	}
}

#subpage {

	@media @m3456 {
		padding-bottom: 70px;
	}

	@media screen and (min-width: 701px) and (max-width: 1000px) {
		padding-left: 25vw;
		.submenu {
			width: 25vw;
			margin-left: -25vw;
		}
	}
	@media screen and (min-width: 1001px) and (max-width: 1200px) {
		padding-left: 20vw;
		.submenu {
			width: 20vw;
			margin-left: -20vw;
		}
	}
	@media screen and (min-width: 1201px) and (max-width: 1400px) {
		padding-left: 16.666vw;
		.submenu {
			width: 16.666vw;
			margin-left: -16.666vw;
		}
	}
	@media screen and (min-width: 1401px) {
		padding-left: 14.285vw;
		.submenu {
			width: 14.285vw;
			margin-left: -14.285vw;
		}
	}

	.submenu {
		@media screen and (min-width: 701px) {
			float: left;
			padding: 40px 0 40px 40px;
		}

		.back {
			display: inline-block;
			background: url('/images/arrow-left.svg') no-repeat left center;
			padding-left: 30px;
			line-height: 19px;
			font-size: 14px;
			margin-top: 20px;
			@media @m12 {
				display: none;
			}
		}

		li a {
			display: block;
			line-height: 1.3em;
		}

		// .list > ul > li > a {
		// 	.bold;
		// }


		.list > ul > li {
			padding: 4px 0;
		}
		.list > ul > li a {
			padding: 3px 0;
		}

		ul ul ul {
			li {
				padding-left: 10px;
				a:before {
					content: '- ';
					display: block;
					float: left;
					margin-left: -10px;
				}
				&:last-child {
					margin-bottom: 4px;
				}
			}
		}

		ul ul ul li a {
			font-size: 80%;
			line-height: 1.45em;
			padding: 0;
		}

		ul:empty {
			display: none !important;
		}
		a.active {
			color: @red;
		}
		a.invisible {
			opacity: 0.3;
		}
		a:hover {
			opacity: 0.75;
		}
		.hide-in-tree {
			display: none;
		}
	}
	&:after {
		.clear;
	}
	.subpages-list {
		li {
			display: block;
			vertical-align: top;
			margin-bottom: 0.5em;
			@media @m3456 {
				// font-size: 18px;
				line-height: 1.5em;
			}
			a:hover {
				opacity: 0.75;
			}
			padding-left: 20px;
			&:before {
				display: block;
				content: '>';
				float: left;
				margin-left: -20px;
			}
		}
	}
	.gallerySection {
		border-bottom: 1px solid #000;
		@media @m {
			padding-bottom: 15px;
			margin-bottom: 20px;
			h2, p {
				margin-bottom: 10px;
			}
		}
		@media @td {
			padding-bottom: 25px;
			margin-bottom: 50px;
			h2, p {
				margin-bottom: 25px;
			}
		}
		.gallery {
			font-size: 0;
			line-height: 1em;
			.poster-thumb {
				display: none;
			}
			img {
				display: inline-block;
				@media @m {
					height: 50px;
					margin: 0 8px 8px 0;
				}
				@media @td {
					height: 80px;
					margin: 0 12px 12px 0;
				}
			}
			figure {
				display: none;
			}
			& + p {
				margin-top: 10px;
			}
		}
		a:hover {
			opacity: 0.75;
		}
	}
	.content {
		width: 100%;
		overflow-x: hidden;
		@media @m3 {
			padding: 0 40px;
		}
		@media screen and (min-width: 701px) {
			padding: 40px;
		}
		.poster {
			display: block;
			cursor: pointer;
			@media @m12 {
				width: 100%;
				margin: 40px 0;
			}
			@media @m3456 {
				float: right;
				margin: 0 0 50px 50px;
				width: 300px;
			}
		}
	}
}
body.grey #subpage .gallerySection {
	border-color: #fff;
}
.subpagePage {
	.submenu {
		@media @m12 {
			padding-bottom: 15px;
			margin-bottom: 20px;
		}
		@media screen and (max-width: 700px) {
			border-bottom: 1px solid #000;
		}
		@media @m3456 {
			font-size: 13px;
		}
		.toggleSubmenuList {
			all: unset;
			display: block;
			width: 100%;
			color: @red;
		}

		h2 {
			display: block;
			width: 100%;
			color: @red;
			font-size: 18px;
			.bold;
		}
		@media (max-width: 700px) {
			.list {
				display: none;
			}
			h2 {
				background: url('/images/icon-menu-open.svg') no-repeat right center;
				background-size: 12px auto;
				padding: 0.3em 0 0.7em;
			}
			.submenuOpen {
				h2 {
					background-image: url('/images/icon-menu-close.svg');
				}
				& + .list {
					display: block;
				}
			}
			.toggleSubmenuList {
				cursor: pointer;
				&:hover {
					opacity: 0.75;
				}
			}
		}
		@media (min-width: 701px) {
			.list {
				display: block !important;
				margin-top: 20px;
			}
		}
	}
}

body.grey {
	#subpage .submenu,
	#subpage .details,
	.mce-content-body hr {
		border-color: #fff;
	}
}

.list-with-thumbs {
	font-size: 0;
	margin-right: -240px;
	.item {
		font-size: 14px;
		padding-left: 90px;
		width: 340px;
		display: inline-block;
		vertical-align: top;
		padding-right: 20px;
		margin-bottom: 40px;
		img {
			display: block;
			float: left;
			width: 70px;
			height: 70px;
			margin-left: -90px;
			background-color: #000;
			margin-top: -2px;
		}
		.name {
			.bold;
		}
	}
}

.eventPage {
	.tags {
		font-size: 0;
		@media @m1 {
			margin-bottom: 20px;
		}
		@media @m23456 {
			margin-top: 10px;
		}
		a {
			font-size: 14px;
			display: inline-block;
			margin: 0 10px 10px 0;
			border: 1px solid #fff;
			color: #fff;
			padding: 1px 12px;
			opacity: 0.3;
			text-decoration: none !important;
			&:hover {
				opacity: 1;
			}
		}
		&:empty {
			display: none;
		}
	}
}

#footer {
	border-top: 1px solid #000;
	font-size: 12px;
	line-height: 1.6em;
	padding: 20px 0;
	margin: 20px 20px 0;
	@media screen and (min-width: 701px) {
		margin: 40px 40px 0;
		padding: 20px 0 35px;
	}
	
	// @media @m12 {
	// }
	// @media @m3456 {
	// 	position: absolute;
	// 	bottom: 0;
	// 	left: 40px;
	// 	right: 40px;
	// 	margin-top: -70px;
	// 	height: 70px;
	// 	padding: 18px 0 40px;
	// }
	// @media screen and (min-width: 701px) and (max-width: 1000px) {
	// 	margin: 20px 40px 10px;
	// }
	.contact {
		@media @m12 {
			&:after {
				.clear;
			}
		}
		@media @m12 {
			p {
				margin-bottom: 12px;
			}
		}
		@media screen and (min-width: 740px) {
			float: left;
			p {
				float: left;
				margin-right: 30px;
			}
		}
	}
	.feedback {
		@media @m12 {
			display: none;
		}
		@media @m3456 {
			float: right;
			span {
				color: @red;
				cursor: pointer;
				&:hover {
					opacity: 0.75;
				}
			}
		}
	}
	&:after {
		.clear;
	}
}

.modal {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background: rgba(196, 196, 196, 0.5);
	transition: background-color 0.4s @easing 0.1s;
	.content {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%) scale(0.97);
		width: 650px;
		height: 650px;
		background-color: #fff;
		padding: 50px;
		z-index: 2;
		transition: all 0.3s @easing;
		opacity: 0;
		transition-property: opacity, transform;
		.close {
			color: #555;
			cursor: pointer;
			&:hover {
				color: #000;
				opacity: 0.75;
			}
		}
	}
	.title {

	}
	h2 {
		color: @red;
		.bold;
		margin: 0 0 40px;
		font-size: 28px;
	}
	h3, .heading3 {
		display: block;
		margin: 20px 0 8px;
	}
	textarea {
		width: 100%;
		height: 70px;
		resize: none;
		&.bigger {
			height: 120px;
		}
		padding: 4px 8px;
		border: 1px solid #555;
		border-radius: 0;
		background-color: #fff;
	}
	button {
		margin-top: 35px;
		border: 0;
		-webkit-appearance: none;
		border-radius: 0;
		background-color: @red;
		margin-right: 20px;
		&:hover {
			text-decoration: underline;
		}
	}
	& > .close {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
}

body.modalVisible {
	.modal {
		background: rgba(225,225,225,0.8);
		transition-delay: 0s;
		.content {
			opacity: 1;
			transform: translate(-50%,-50%) scale(1);
			transition-delay: 0.1s;
		}
	}
}



#edit {
	position: fixed;
	bottom: 30px;
	left: 50vw;
	transform: translateX(-50%);
	z-index: 999;
}




.mce-content-body .form-button {
	background: #E4E4E4 no-repeat 1em center;
	color: #000 !important;
	padding: 0.6em 1em 0.6em 3em !important;
	display: block;
	max-width: 280px;
	text-decoration: none !important;
	margin: 1em 0 !important;
	&.form-button-events {
		background-image: url('/images/form-button-events.svg');
		&:hover {
			background-image: url('/images/form-button-events-hover.svg');
		}
	}
	&.form-button-licences {
		background-image: url('/images/form-button-licences.svg');
		&:hover {
			background-image: url('/images/form-button-licences-hover.svg');
		}
	}
	&.form-button-promotional {
		background-image: url('/images/form-button-promotional.svg');
		&:hover {
			background-image: url('/images/form-button-promotional-hover.svg');
		}
	}
	&.form-button-successes {
		background-image: url('/images/form-button-successes.svg');
		&:hover {
			background-image: url('/images/form-button-successes-hover.svg');
		}
	}
	&:hover {
		background-color: @red;
		color: #fff !important;
	}
}




.highlight {
	display: inline-block;
	background: #fe2;
	padding: 2px 3px !important;
	margin: -2px -3px !important;
	// outline: 5px solid #fc0 !important;
}

#breadcrumb {
	font-size: 12px;
	margin-top: 0.5em;
	a:hover {
		opacity: 0.75;
	}
	.separator {
		opacity: 0.6;
	}
}