/*600
Theme Name: Daad Gathering 2025
Theme URI: https://daad.hu
Author: Mnemotechnika Ltd.
Author URI: https://mnemotechnika.hu
Description: Daad Gathering 2024 Wordpress Theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: ajax, responsive, wordpress
*/

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
	font: inherit;
	text-align: inherit;
	text-transform: inherit;
	vertical-align: inherit;
	list-style-type: none;
	outline: none;
	text-decoration: none;
	border-collapse: collapse;
	border: none;
	border-color: transparent;
	color: inherit;
	line-height: inherit;
	transition: all 0s linear; 
	background-repeat: no-repeat;
	position: relative;
}

:root {
	--main-color: rgb( 249, 245, 228 );
	--address-bar-height: 0px;
	--vh: 1vh;
}

::-webkit-scrollbar {
	width: calc( 0.4vh + 0.2vw );
	height: calc( 0.4vh + 0.2vw );
	background: transparent;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: var(--main-color);
	border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--main-color);
}

html {
	text-align: center;
	font-family: "Anton", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: calc( 2vh + 1vw );
	line-height: calc( 2vh + 1vw );
	text-transform: uppercase;
	color: var(--main-color);;
	overflow-y: overlay;
	scroll-behavior: smooth;
	vertical-align: baseline;
	overflow: hidden;
	background-color: gray;
}

html.night {
	background-color: gray;
	color: var(--main-color);;
}


body {
	opacity: 0;
	transition: opacity 0s;
}

body > svg {
    height: 0;
	width: 0;
	display: block;
}

#rotor,
#osc {
	position: fixed;
	top: 0;
	left: 0;
}
#osc {
	mix-blend-mode: multiply;
}

#content,
#carousel,
#pass-content,
#menu-content,
#timeline-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100vh;
	visibility: hidden;
	z-index: 0;
}
#menu-content {
	width: calc( 100% );
	min-height: calc( 100vh );
	visibility: hidden;
}
#timeline-content {
	display: none;
}
#menu-content.open,
#pass-content.open,
#timeline-content.open,
#carousel.open,
#content.open {
	visibility: visible;
	overflow-y: auto;
	z-index: 1;
	height: 100%;
}
#timeline-content.open,
#menu-content.open {
	display: block;
}

#pass-button,
#menu-button,
#dtg-button,
#timeline-button {

	position: fixed;
	top: 0;
	display: block;

	z-index: 2;
	word-spacing: calc( -0.6vh - 0.3vw );
	font-family: 'Montserrat', sans-serif;
	font-size: calc( 1.2vh + 0.6vw );
	line-height: calc( 1.2vh + 0.6vw );
	text-orientation: upright;
	writing-mode: vertical-lr;
	letter-spacing: calc( -0.4vh - 0.2vw );
	transition: transform 0.5s linear;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	90% {
		opacity: 0;
	}
	100% {
		opacity: 1;

	}
}




#pass-button span,
#menu-button span,
#dtg-button span,
#timeline-button span {
	
}
.full {
	opacity: 0;
	fill: var(--main-color);
	stroke: none;
}
.menu-corner {
	fill:none;
	stroke:var(--main-color);
	stroke-width:calc( 0.8vh + 0.4vw );
	stroke-miterlimit:10;
}
.menu-typo {
	stroke: none;
	fill: var(--main-color);
	stroke-opacity: 0;
}
.menu-x-right {
	opacity: 0;
	fill:none;
	stroke:var(--main-color);
	stroke-width:calc( 0.8vh + 0.4vw );
	stroke-miterlimit:10;
}
.menu-x-left {
	opacity: 0;
	fill:none;
	stroke:var(--main-color);
	stroke-width:calc( 0.8vh + 0.4vw );
	stroke-miterlimit:10;
}

.menu-trbl,
.menu-tlbr,
.menu-bltr,
.menu-brtl {
	display:none;
	fill:var(--main-color);
	stroke:none;
}
.menu-circle {
	display:none;
	fill:none;
	stroke:var(--main-color);
	stroke-width:calc( 0.8vh + 0.4vw );
	stroke-miterlimit:10;
}
.corners {
	display: block;
	/*height: calc( 6vh + 3vw );*/
	width: calc(6vh + 3vw);
}
#pass-button {
	left: 0;
	transform: rotate(180deg);
}
#pass-button.open {
	transform: rotate(360deg);
}
#menu-button {
	right: 0;
	transform: rotate(270deg);
}
#menu-button.open {
	transform: rotate(90deg) !important;
}

#menu-button .full {
	animation: fadeIn 0.5s linear;
	animation-fill-mode: forwards;
}
#menu-button.open .full {
	animation: none;
	opacity: 0;
}
#menu-button .menu-x-left,
#menu-button .menu-x-right {
	animation: none;
	opacity: 0;
}
#menu-button.open .menu-x-left,
#menu-button.open .menu-x-right {
	animation: fadeIn 0.5s linear;
	animation-fill-mode: forwards;
}



#dtg-button {
	bottom: 0;
	top: auto;
	right: 0;
	transform: rotate(0deg);
}
#dtg-button.open {
	transform: rotate(180deg);
}
#timeline-button {
	left: 0;
	top: auto;
	bottom: 0;
	transform: rotate(90deg);
}
#timeline-button.open {
	transform: rotate(-90deg);
}


#menu-button.open .menu,
#pass-button.open .pass,
#timeline-button.open .timeline,
#menu-button .close,
#pass-button .close,
#timeline-button .close {
	display: none;
}
#menu-button.open .close, 
#pass-button.open .close,
#timeline-button.open .close {
	display: initial;
}
#reg,
.cut,
.line {
	width: calc( 4vh + 2vw );
	fill: black;
}
.cut {
	height: calc( 2vh + 1vw );
}
html.night #reg,
html.night .cut,
html.night .line {
	fill:  var(--main-color);
}


#list,
#category, 
.category {
	font-size: calc( 4vh + 2vw );
	padding: 0 calc( 6vh + 3vw );
}

.separator {
	display: inline-flex;
	font-size: calc( 4vh + 2vw );
	vertical-align: middle;
	line-height: calc( 4vh + 2vw );
}

#list a,
#category a,
.category a {
	display: inline-flex;
	margin: 0 calc( 0.6vh + 0.3vw );
	padding: calc( 0.6vh + 0.3vw );;
	line-height: calc( 4vh + 2vw );
	vertical-align: middle;
}

#list a:hover,
#category a:hover,
.category a:hover  {
	background:
		linear-gradient( to right, var(--main-color) calc( 0.4vh + 0.2vw ), transparent calc( 0.4vh + 0.2vw ) ) 0 0,
		linear-gradient( to right, var(--main-color) calc( 0.4vh + 0.2vw ), transparent calc( 0.4vh + 0.2vw ) ) 0 100%,
		linear-gradient( to left, var(--main-color) calc( 0.4vh + 0.2vw ), transparent calc( 0.4vh + 0.2vw ) ) 100% 0,
		linear-gradient( to left, var(--main-color) calc( 0.4vh + 0.2vw ), transparent calc( 0.4vh + 0.2vw ) ) 100% 100%,
		linear-gradient( to bottom, var(--main-color) calc( 0.4vh + 0.2vw ), transparent calc( 0.4vh + 0.2vw ) ) 0 0,
		linear-gradient( to bottom, var(--main-color) calc( 0.4vh + 0.2vw ), transparent calc( 0.4vh + 0.2vw ) ) 100% 0,
		linear-gradient( to top, var(--main-color) calc( 0.4vh + 0.2vw ), transparent calc( 0.4vh + 0.2vw ) ) 0 100%,
		linear-gradient( to top, var(--main-color) calc( 0.4vh + 0.2vw ), transparent calc( 0.4vh + 0.2vw ) ) 100% 100%;
	background-repeat: no-repeat;
	background-size: calc( 1.2vh + 0.6vw ) calc( 1.2vh + 0.6vw );
}



#footer {
	font-family: 'Montserrat', sans-serif;
	font-size: calc( 1vh + 0.5vw );
	line-height: calc( 1vh + 0.5vw );
    position: relative;
	bottom: 0;
    width: 100%;
	height: calc(6vh + 3vw);
}
#footer b {
	font-weight: 700;
}
#footer #logo {
	padding: calc( 1vh + 0.5vw ) calc( 0.6vh + 0.3vw );
	width: calc( 4vh + 2vw );
	fill: var(--main-color);
}
html.night #footer #logo {
	fill: var(--main-color);
}
#footer #left,
#footer #right {
	display: inline-block;
	padding: calc( 2vh + 1vw ) calc( 0.6vh + 0.3vw );
	vertical-align: top;
}
#footer #left {
	text-align: right;
}
#footer #right {
	text-align: left;
} 

b {
	font-weight: 600;
}


#carousel .flickity-viewport {
	margin-top: calc( 1.2vh + 0.6vw );
	height: calc(100vh - ( 2.4vh + 1.2vw ) ) !important;
	width: 100%;
	position: absolute;
	overflow-y: auto;
}
#carousel .carousel-cell {
	background: none;
	padding: 0 calc( 24vh + 24vw );
	width: calc( 24vh + 24vw );
}


.address-bar-active svg { 
	background-color: red;
}
#carousel .carousel-cell .content {
	
}
#carousel .carousel-cell.wide {
	
}
#carousel .carousel-cell .title {
	height: calc( ( ( ( var( --vh, 1vh ) * 100 ) - ( 26.4vh + 25.2vw ) ) / 2 ) - calc( 2vh + 1vw ) );
	display: grid;
	align-items: end;
	padding: calc(1vh + 0.5vw) 0;
	font-size: calc( 4vh + 2vw );
	line-height: calc( 4vh + 2vw );

}
@media (max-height: 100vw) {
	#carousel .carousel-cell {

	}
	#carousel .carousel-cell .title {
		width: 300%;
		margin-left: -100%;

	}
  
}
#carousel .carousel-cell img.featured {
	width: 100%;
	filter: grayscale( 1 );
	filter: url( #cmDaadStage );
	-webkit-filter: grayscale( 1 );
	-webkit-filter: url( #cmDaadStage );
	cursor: pointer;
}
#carousel .carousel-cell.wide img,
#carousel .thumbnail:hover img {

}
#carousel #spectro {
	position: absolute;
    top: calc( ( ( var( --vh, 1vh ) * 100 ) - ( 26.4vh + 25.2vw ) ) / 2 );
    left: 0;
    width: calc( 24vh + 24vw );
	height: calc( 24vh + 24vw );
    margin: 0 calc( 24vh + 24vw );
	mix-blend-mode: multiply;
	z-index: 1000;
}
#carousel .thumbnail {
    display: block;
}
#carousel .title {

}
#carousel .content {
	font-family: 'Montserrat', sans-serif;
	font-size: calc( 1.4vh + 0.7vw );
	line-height: calc( 1.6vh + 0.8vw );
	text-align: center;
	text-transform: none;
}
#carousel .content .ticket {
	font-size: 1.4em;
	line-height: 1em;
	position: relative;
	color: black;
	background-color: var(--main-color );
	text-align: left;
	display: block;
	text-decoration: none;
	min-height: calc( 8vh + 4vw );
	font-family: "Anton";
	padding: calc( 1vh + 0.5vw );
	margin-right: calc( 10vh + 5vw );
}
#carousel .content .ticket::after {
	content: "";
	position: absolute;
	top: 0px; 
	right: calc( -10vh - 5vw ); 
	bottom: 0px; 
	left: 0px; 
	background-image: url('./images/TICKET+.png'); 
	background-size: contain; 
	background-repeat: no-repeat; 
	background-position: center right; 
	z-index: -1; 
}
#carousel .content .ticket span {
	font-size: 0.8em;
	line-height: 0.8em;
}
#carousel .content span.ticket {
	color: gray;
}
#carousel .soundcloud {
	width: calc( 100% - 20px );
	opacity: 0.8;
	margin: 0 10px;
}
#carousel .content a {
	text-decoration: underline;
}
#carousel .content p {
	margin: calc( 1vh + 0.5vw ) 0;
}
#carousel h2 {
	margin: 0;
}
#carousel .content strong {
}



.page {
	background: none;
	padding: calc( 3vh + 3vw );
	text-transform: none;
}

.flickity-slider {
	height: auto;
}

.flickity-prev-next-button {
	width: calc( 4vh + 2vw );
	height: calc( 4vh + 2vw );
	border-radius: 0;
	background: none;
}
.flickity-button svg {
}
.flickity-prev-next-button.next {
}
.flickity-prev-next-button.previous {
}
.flickity-button:hover {
	background: none;
}
.flickity-button:active {
}
.flickity-button:disabled {
	display: none;
}
.flickity-button-icon {
	fill: var(--main-color);
}