@charset "UTF-8";
/* CSS Document */

:root {
	--brand_color:#FBAD18;
	--brand_red:#d7144b;
	--brand_blue:#004b96;
	--brand_yellow:#ffe678;
	--brand_green:#AFDCDC;
	--touch_device_max_width:699px;
	--desktop_min_width:     700px;
}

/*				*/
/*				*/
/* Responsives 	*/
/*				*/
/*				*/


	@media screen and (min-width:1440px)                        {	/*	XXXL: 1440 -		*/	}
	@media screen and (min-width:1240px) and (max-width:1439px) {	/*	 XXL: 1240 - 1439	*/	}
	@media screen and (min-width:1040px) and (max-width:1239px) {	/*	  XL: 1040 - 1239	*/	}
	@media screen and (min-width: 960px) and (max-width:1039px) {	/*	   L:  960 -  375	*/	}
 	@media screen and (min-width: 860px) and (max-width: 959px) {	/*	   M:  860 -  959	*/	}
 	@media screen and (min-width: 700px) and (max-width: 859px) {	/*	   S:  700 -  859	*/	}
 	@media screen and (min-width: 580px) and (max-width: 699px) {	/*	  XS:  580 -  699	*/	}
 	@media screen and (min-width: 310px) and (max-width: 579px) {	/*	 XXS:    0 -  375, mirror: 310	*/	}

	/*
	@media screen and (min-width:   0px) and (max-width: 859px) {	div[data-desktop="1"], div[data-tablet="1"] { display: none!important; } }
	@media screen and (min-width: 860px) and (max-width:1039px) {	div[data-desktop="1"], div[data-mobile="1"] { display: none!important; } }
	@media screen and (min-width:1040px)                        {	div[data-tablet="1"],  div[data-mobile="1"] { display: none!important; } }
	*/


html,body {
margin: 0; padding: 0;
}
html {
	font-family: Poppins;
	font-size: 15px;
	line-height: 1.2;
	background-color: black;
	color: white;
}
body {
	overflow: hidden;
	/*overflow: overlay;*/
	overflow-y: auto;
	min-height: 100vh;
	min-height: 100svh;
}
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}

.layer {
	max-width: 100vw;
	overflow: hidden;
	overflow-y: auto;
}
input,textarea,select {
	font-family: Poppins;
}
ul,ol {
	list-style: none;
}
div,ul,ol,li,h1,h2,h3,h4,h5,h6,p { margin: 0; padding: 0; }
div,i,i:before,i:after {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
i,i:before,i:after { display: block; }
figure { background-size: contain; background-repeat: no-repeat; margin: 0; padding: 0; }

.no-break { white-space: nowrap; }
@media screen and (min-width:   0px) and (max-width: 399px) { .no-break { white-space: normal; } }

.opt-break { white-space: normal; }
small { display: block; height: 20px; }
big   { display: block; height: 40px; }

.hash-placeholder {
	position: relative;
	top: -100px;
}

header { z-index: 300; }
main   {}
footer {}


	/*				*/
	/* HEADER 		*/
	/*				*/

		header {
			display: block;
			position: fixed;
			width: 100vw;
			height: 100px;
			margin: 0 0 -100px 0; 
			padding: 0;
			white-space: nowrap;
		}
		header .background {
			position: fixed;
			width:         100%;
			height: 110px;
			margin-bottom: -110px;
			background-color: hsla(0,0%,0%,0.63);
			/*
			background: linear-gradient(0deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.8) 10%);
			*/
			box-shadow: 0 15px 15px 0 rgba(0,0,0,0.56);
			backdrop-filter:blur(10px);
			-webkit-backdrop-filter:blur(10px);
		}
		header[data-animated="1"] .background { transition: opacity 0.25s ease, transform 0.5s ease; }
		
		@media screen and (max-width:699px) { header .background { background-color: hsla(0,0%,0%,0.83); } }
		
		header .background:after {
			content:"";
			display: block;
			position: absolute;
			width: calc(100vw - 160px);
			left: 40px;
			height: 1px;
			margin-bottom: -1px;
			bottom: 0;
			background-color: hsla(0,0%,100%,0.37);
		}
		@media screen and (max-width:699px) { header .background:after { display: none; } }
		
		Xheader .background:before {
			position: absolute;
			content:"";
			inset:0;
			background-color: #612DAE;
			opacity: 0.25;
			mix-blend-mode:overlay;
		}
		
		html[data-scr="0"] header .background { transform:translateY(-50%); opacity: 0; }
		html[data-scr="1"] header .background { transform:translateY(  0%); opacity: 1; }
		@media screen and (max-width:699px) { html[data-scr="0"] header .background { transform:translateY(  0%); opacity: 1; } }	
		
		
		header .mirror {
			position: relative;
			left: 50%;
			transform: translateX(-50%);
			min-width: calc(100vw - 80px);
			max-width: calc(100vw - 40px);
		}
		header .header-item {
			display: inline-block;
			vertical-align: top;
			position: relative;
			margin: 0; padding: 0;
			white-space: normal;
		}
		XXheader .header-item.align-right-fixed { outline:0px solid yellow; background-color:hsla(359,43%,42%,0.3); }
		XXheader .header-item.align-left        { outline:0px solid blue; background-color:hsla(163,35%,45%,0.30); }
		XXheader .header-item.align-center      { outline:0px solid green; background-color:hsla(65,92%,24%,0.30); }
		XXheader .header-item.align-right       { outline:0px solid red; background-color:hsla(228,43%,56%,0.30); }

		header .header-item.align-right-fixed { }
		header .header-item.align-left        {width: 250px;}
		header .header-item.align-center      { width:calc(100% - 400px); }
		header .header-item.align-right       {width: 250px;left: -190px;}

		header .header-item.align-right-fixed { z-index: 100; }
		header .header-item.align-left        { }
		header .header-item.align-center      { }
		header .header-item.align-right       { }

	
	/* MENU ON RIGHT SIDE (EDGE) */

		header .header-item.align-right-fixed {
			display: block;
			position: relative;
			width: 50px;
			height: 500px;
			top: 15px;
			float: right;
			margin-right: 1vw;
			margin-right: -20px;
		}
		@media screen and (max-width:699px) { header .header-item.align-right-fixed { width: 30px; } }
		
			header .header-item.align-right-fixed a.toggle-menu {
				display: block;
				position: absolute;
				z-index: 100;
				left: 5px;
				width:         50px;
				height:        50px;
				outline: 0px solid red;
				display: none;
			}
			@media screen and (max-width:699px) { header .header-item.align-right-fixed a.toggle-menu { width: 35px; height: 35px; left: 5px; } }

			header .header-item.align-right-fixed a.toggle-menu i,
			header .header-item.align-right-fixed a.toggle-menu i:before,
			header .header-item.align-right-fixed a.toggle-menu i:after {
				display: block;
				position: relative;
				width: 100%;
				height: 100%;
				background-image: url("../../images/menu/toggle-button.white.svg");
			}
			header .header-item.align-right-fixed a.toggle-menu i:before,
			header .header-item.align-right-fixed a.toggle-menu i:after {
				position: absolute;
				inset:0;
				content:"";
				opacity: 0;
				filter:blur(0px);
				transition: filter 0.3s ease, opacity 0.0s ease;
				mix-blend-mode:hard-light;
				will-change: auto;
			}

			header .header-item.align-right-fixed a.toggle-menu:hover i:before {
				filter:blur(3px);
				opacity: 1;
			}
			header .header-item.align-right-fixed a.toggle-menu:hover i:after {
				filter:blur(4px);
				opacity: 1;
			}

			header .header-item.align-right-fixed .event-info {
				pointer-events: none;
				position: relative;
				position: absolute;
				top: -5px;
				padding-left:    5px;
				width:         500px;
				margin-right: -505px;
				height:         70px;
				margin-bottom: -70px;
				line-height:    70px;
				font-family: PoppinsLight;
				text-rendering:geometricPrecision;
				color: hsla(0,0%,100%,0.8);
				font-size:      20px;
				letter-spacing: 0.02pt;
				outline: 0px solid red;
				transform-origin: left top;
				transform: translateX(60px) rotate(90deg);
				white-space: nowrap;
			}
			@media screen and (max-width:899px) {
				header .header-item.align-right-fixed .event-info {
					height:         50px;
					margin-bottom: -50px;
					line-height:    50px;
					transform: translateX(50px) rotate(90deg);
					font-size:      15px;
					width: calc(100vh - 50px);
				}
			}	
			
			header .header-item.align-right-fixed .event-info p {
				padding: 0 20px 0 80px;
				padding: 0 20px 0 15px;
				position: absolute;
				border-bottom:1px solid hsla(0,0%,100%,0.5);
			}
			header .header-item.align-right-fixed .event-info p:before {
				content:"";
				display: block;
				position: fixed;
				pointer-events: none;
				width:         calc(100vh + 100px);
				width:         calc(100svh + 100px);
				height:         100px;
				margin-bottom: -100px;
				left:          -100px;
				bottom:         100px;
				z-index: -1;
				background-color: rgba(0,0,0,1);
				filter: blur(20px);
				Xbackground-color: rgba(245,245,220,0.47);
				Xfilter:none;
				opacity: .3;
			}
			@media screen and (min-width:1600px) and (max-width:9999px) { header .header-item.align-right-fixed .event-info p:before { height:100px; margin-bottom:-100px; } }
			@media screen and (min-width:1400px) and (max-width:1599px) { header .header-item.align-right-fixed .event-info p:before { height:100px; margin-bottom:-100px; } } 
			@media screen and (min-width:1200px) and (max-width:1399px) { header .header-item.align-right-fixed .event-info p:before { height:100px; margin-bottom:-100px; } }
			@media screen and (min-width:1000px) and (max-width:1199px) { header .header-item.align-right-fixed .event-info p:before { height:100px; margin-bottom:-100px; } }
			@media screen and (min-width: 800px) and (max-width: 999px) { header .header-item.align-right-fixed .event-info p:before { height: 90px; margin-bottom: -90px; } }
			@media screen and (min-width: 700px) and (max-width: 799px) { header .header-item.align-right-fixed .event-info p:before { height: 90px; margin-bottom: -90px; } }
			@media screen and (min-width: 600px) and (max-width: 699px) { header .header-item.align-right-fixed .event-info p:before { height: 90px; margin-bottom: -90px; } }
			@media screen and (min-width: 500px) and (max-width: 599px) { header .header-item.align-right-fixed .event-info p:before { height: 90px; margin-bottom: -90px; } }
			@media screen and (min-width: 400px) and (max-width: 499px) { header .header-item.align-right-fixed .event-info p:before { height: 90px; margin-bottom: -90px; } }
			@media screen and (min-width:   0px) and (max-width: 399px) { header .header-item.align-right-fixed .event-info p:before { height: 90px; margin-bottom: -90px; } }
			
			
			@media screen and (max-width:899px) { header .header-item.align-right-fixed .event-info p { padding: 0 10px 0 50px; position: relative; text-align:left; border-bottom:none; } }

	
	/* MENU ON LEFT SIDE */
	
	header .header-item.align-left {
		left: 0px;
		top: 15px;
	}
	@media screen and (max-width:699px) {
		header .header-item.align-left { left:10px; top: 20px; }
	}
	
		header .header-item.align-left .logo {
			position: relative;
			width: 100%;
			height: 80px;
			background-image: url("../../images/logo/metu-logos-cropped/metu-logo-landscape-1color-negative.png?v=2");
			background-size: contain;
			background-position: left center;
			outline: 0px solid red;
		}
		@media screen and (max-width:699px) { header .header-item.align-left .logo { left: -30px; height: 30px; } }
		
		header .header-item.align-left .logo a {
			display: block;
			position: absolute;
			inset:0;
			overflow: hidden;
			text-indent: -1000em;
		}
		
		
	/* MENU CENTER */
	
		header .header-item.align-center {
			top: 30px;
			text-align: center;
			
			transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease 0s;
		}
		@media screen and (max-width:1239px) {
			header .header-item.align-center {
				opacity:0; transform:scale(0.5,0.5); 
				visibility: hidden; 
				pointer-events: none;
				transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease 0.5s;
			}
		}
		@media screen and (max-width:699px) { Xheader .header-item.align-center { display: none; } }
		
			header .header-item.align-center nav {
				display: inline-block;
				margin: 0; padding: 0;
			}
			header .header-item.align-center nav > ul {
				color: white;
				font-family: PoppinsLight;
				font-size: 1.0rem;
				text-transform: uppercase;
			}
			header .header-item.align-center nav > ul > li {
				display: inline-block;
			}
			header .header-item.align-center nav > ul > li a {
				text-decoration: none;
				color: inherit;
				padding: 10px 20px;
				background-color: hsla(151,25%,53%,0.30);
				background-color: transparent;
			}
			header .header-item.align-center nav > ul > li a:hover {
				color: var(--brand_color);
				/*
				background-color: #FBAD18;
				color: black;
				*/
			}

			header .header-item.align-center nav > ul > li[data-label="fooldal"    ] {}
			header .header-item.align-center nav > ul > li[data-label="animaciok"  ] {}
			header .header-item.align-center nav > ul > li[data-label="rovidfilmek"] {}
			header .header-item.align-center nav > ul > li[data-label="ajanlok"    ] {}
	
	
	/* MENU ON RIGHT SIDE */
	
		header .header-item.align-right {
			top: 30px;
			text-align: right;
		}
		
			header .header-item.align-right nav {
				display: inline-block;
				margin: 0; padding: 0;
			}
			header .header-item.align-right nav > ul {
				color: white;
				font-family: PoppinsLight;
				font-size: 1.0rem;
				text-transform: uppercase;
			}
			header .header-item.align-right nav > ul > li {
				display: inline-block;
				margin-left: 5px;
			}
			header .header-item.align-right nav > ul > li a {
				text-decoration: none;
				color: inherit;
				margin: -2px;
				border: 2px solid hsla(0,0%,0%,0.00);
				padding: 10px 20px;
				background-color: hsla(201,29%,43%,0.30);
				background-color: transparent;
			}
			header .header-item.align-right nav > ul > li a:hover {
				/*
				background-color: #FBAD18;
				color: black;
				*/
				color: var(--brand_color);
				color: var(--brand_red);
			}
			header .header-item.align-right nav > ul > li[data-label="registration"] a,
			header .header-item.align-right nav > ul > li[data-label="pre-registration"] a {border-color: white;}
			header .header-item.align-right nav > ul > li[data-label="registration"] a:hover,
			header .header-item.align-right nav > ul > li[data-label="pre-registration"] a:hover {border-color: #FBAD18;border-color: var(--brand_red);}
			
			@media screen and (max-width:699px) {
				header .header-item.align-right { position: fixed; top: 25px; left: 0; width: calc(100% - 20px); }
				header .header-item.align-right nav > ul { font-size: 0.8rem; }
				header .header-item.align-right nav > ul > li a { padding: 5px 10px; }
			}
			
			/*body.tpl-pre-registration header .header-item.align-right { display: none; }*/
			
		

	/* MENU ON RIGHT SIDE > ACTIVE */
	
		html .layer[data-label="contents"] {
			opacity: 1;
			transform-origin: center center;
			transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
		}
		@media screen and (max-width:699px) { html .layer[data-label="contents"] { padding-top: 5vh; } }
		
		html               .side-menu {
			transition: transform 0.3s ease;
		}
		html[data-mnu="1"] .layer[data-label="contents"] {
			opacity: 0.5;
			filter: blur(3px) contrast(0.5) brightness(0.5);
			/*transform: scale(0.95,0.95) translateX(-12.5vw);*/
		}
		@media screen and (max-width:699px) { html[data-mnu="1"] .layer[data-label="contents"] { transform: scale(1.0,1.0) translateX(0vw); } }
		
		html[data-mnu="1"] .side-menu {
			transform:translateX(-25vw);
			position: fixed;
		}
		
		@media screen and (min-width:1440px)                        { html .side-menu { width: 20vw; opacity: 0.9; } html[data-mnu="1"] .side-menu { transform: translateX(-20vw); } }
		@media screen and (min-width:1240px) and (max-width:1439px) { html .side-menu { width: 25vw; opacity: 0.9; } html[data-mnu="1"] .side-menu { transform: translateX(-25vw); } }
		@media screen and (min-width:1040px) and (max-width:1239px) { html .side-menu { width: 30vw; opacity: 0.9; } html[data-mnu="1"] .side-menu { transform: translateX(-30vw); } }
		@media screen and (min-width: 960px) and (max-width:1039px) { html .side-menu { width: 40vw; opacity: 0.9; } html[data-mnu="1"] .side-menu { transform: translateX(-40vw); } }
		@media screen and (min-width: 860px) and (max-width: 959px) { html .side-menu { width: 50vw; opacity: 0.9; } html[data-mnu="1"] .side-menu { transform: translateX(-50vw); } }
		@media screen and (min-width: 700px) and (max-width: 859px) { html .side-menu { width: 90vw; opacity: 0.9; } html[data-mnu="1"] .side-menu { transform: translateX(-90vw); } }
		@media screen and (min-width: 580px) and (max-width: 699px) { html .side-menu { width: 90vw; opacity: 0.9; } html[data-mnu="1"] .side-menu { transform: translateX(-90vw); } }
		@media screen and (min-width: 310px) and (max-width: 579px) { html .side-menu { width: 90vw; opacity: 0.9; } html[data-mnu="1"] .side-menu { transform: translateX(-90vw); } }
		
		html[data-mnu="1"] .layer[data-label="contents"] {
			pointer-events: none;
		}
		
		
		.side-menu {
			position: fixed;
			left: 100%;
			z-index: 999;
			top: 0;
			background-color: #FBAD18;
			background-color: #000000;
			color: white;
			border-left: 1px solid white;
			box-shadow: 0 0 25px 0 black;
			width: 25vw;
			height: 100vh;
		}
		.side-menu a.hide-menu {
			position: fixed;
			left: -75vw;
			top: 0;
			width: 75vw;
			height: 100%;
		}
		.side-menu a.toggle-menu {
			display: block;
			position: absolute;
			right: 20px;
			top:   20px;
			width:         30px;
			height:        30px;
			outline: 0px solid red;
		}
		.side-menu a.toggle-menu i,
		.side-menu a.toggle-menu i:before,
		.side-menu a.toggle-menu i:after {
			display: block;
			position: relative;
			width: 100%;
			height: 100%;
			background-image: url("../../images/elements/close-button.black.svg");
			background-image: url("../../images/elements/close-button.white.svg");
		}
		.side-menu a.toggle-menu i:before,
		.side-menu a.toggle-menu i:after {
			background-image: url("../../images/elements/close-button.white.svg");
			position: absolute;
			z-index: -1;
			inset:0;
			content:"";
			opacity: 0;
			filter:blur(0px);
			transition: filter 0.3s ease, opacity 0.0s ease;
			mix-blend-mode:hard-light;
			will-change: auto;
		}

		.side-menu a.toggle-menu:hover i:before {
			filter:blur(3px);
			opacity: 1;
		}
		.side-menu a.toggle-menu:hover i:after {
			filter:blur(4px);
			opacity: 1;
		}
		
		.side-menu ul {
			display: inline-block;
			list-style: none;
			position: relative;
			left: 0;
			top: 0;
			font-size: 1.5rem;
			line-height: 1.2;
			color: white;
			font-size: 1.3rem;
			transform:none;
		}
		.side-menu ul li {
			display: block;
		}
		.side-menu ul li a {
			display: block;
			text-decoration: none;
			color: inherit;
			padding: 5px 0;
			user-select: none;
		}
		
		
		Xhtml[data-mnu="1"] body {
			touch-action: none;	
			overflow: hidden;
			height: 100vh;
		}
		html[data-mnu="1"] body::-webkit-scrollbar {
			display: none;
		}
		html[data-mnu="1"] body::-webkit-scrollbar {
		}
		html[data-mnu="0"] body::-webkit-scrollbar {
		}

		.layer[data-label="overlays"] {
			z-index: 99999;
			display: none;
		}
		.side-menu {

		}
		.side-menu a.toggle-menu {
			position: fixed;
			display: none;
		}
		html[data-mnu="1"] .side-menu a.toggle-menu {
			display: block;
		}
		html[data-mnu="0"] .side-menu .scroller {
			visibility: hidden;
			pointer-events: none;
		}
		html[data-mnu="1"] .side-menu .scroller {
			overflow-y: auto;
			visibility: visible;
			pointer-events: all;
			position: relative;
			left: 25px;
			top: 75px;
			width: calc(100% - 50px);
			transform: none;
			height: calc(100svh - 150px);
		}
		html[data-mnu="1"] .side-menu .scroller::-webkit-scrollbar {
			background-color: rgba(0,0,0,0);
			border-radius: 15px;
		}
		html[data-mnu="1"] .side-menu .scroller::-webkit-scrollbar-thumb {
			background-color:rgba(255,255,255,0.5);
			background-color:rgba(0,0,0,0.25);
			border-radius: 15px;
			border: 5px solid var(--brand_color);
		}
		
		/* pre site */
		
		.side-menu .scroller {
			height: 100%;
			overflow: hidden;
		}
		.side-menu .scroller #pre-site .logo {
			background-image: url("../../images/logo/metu-logos-cropped/metu-logo-landscape-1color-negative.png?v=2");
			background-repeat: no-repeat;
			background-position: top left;
			background-size: contain;
			width: 100%;
			height: 80px;
			margin-bottom: 30px;
		}
		.side-menu .scroller #pre-site .copies {
		}
		.side-menu .scroller #pre-site .copies .title {
			font-weight: bold;
			font-size: 1.6rem;
			line-height: 1.2;
			margin-bottom: 15px;
		}
		.side-menu .scroller #pre-site .copies .about {
			font-weight: normal;
			font-size: 1.0rem;
			line-height: 1.3;
			margin-bottom: 15px;
		}
		.side-menu .scroller #pre-site .copies .link {
			font-size: 1.0rem;
			line-height: 1.3;
			margin-top: 50px;
			margin-bottom: 10px;
			text-align: center;
			text-transform: uppercase;
		}
		.side-menu .scroller #pre-site .copies .link a {
			text-decoration: none;
			color: inherit;
		}
		.side-menu .scroller #pre-site .copies ul.socials {
			display: block;
			margin: 0; padding: 0;
			text-align: center;
		}
		.side-menu .scroller #pre-site .copies ul.socials > li {
			list-style: none;
			display: inline-block;
			margin: 0 5px 0 5px; 
			padding: 0;
			vertical-align: top;
			width: 30px;
			height: 30px;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: top center;
		}
		.side-menu .copies ul.socials > li > a {
			display: block;
			color: inherit;
			width:  30px;
			height: 30px;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: top center;
			filter:brightness(0) invert(1);
		}
		.side-menu .scroller #pre-site .copies ul.socials > li > a {
			display: block;
			color: inherit;
			width:  30px;
			height: 30px;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: top center;
			filter:brightness(0) invert(1);
		}
		.side-menu .scroller #pre-site .copies ul.socials > li > a:hover {
			filter:none;
		}
		.side-menu .scroller #pre-site .copies ul.socials > li[data-label="facebook"]  a { background-image:url(../../images/icon/social/positive.red/facebook.png); }
		.side-menu .scroller #pre-site .copies ul.socials > li[data-label="instagram"] a { background-image:url(../../images/icon/social/positive.red/instagram.png); }
		.side-menu .scroller #pre-site .copies ul.socials > li[data-label="youtube"]   a { background-image:url(../../images/icon/social/positive.red/youtube.png); }
		.side-menu .scroller #pre-site .copies ul.socials > li[data-label="tiktok"]    a { background-image:url(../../images/icon/social/positive.red/tiktok.png); }
		
		
		

		
	





/*				*/
/*				*/
/* MAIN 		*/
/*				*/
/*				*/

	main {

	}
	
	html .layer[data-label="contents"] main {
	}
	
		

	
	
	
	
	
	/*						*/	
	/*						*/	
	/* Articles 			*/
	/*						*/	
	/*						*/	
	
		main section.articles {
			min-height: 50vh;
			margin-block:10vh;
		}
		main section.articles .mirror {
			display: block;
			position: relative;
			left: 50%;
			transform: translateX(-50%);
		}
		@media screen and (max-width:699px) { main section.articles .mirror { left: 30px; transform:none; width: calc(100vw - 110px); } }
		
		main section.articles article[data-label="mi"] {}
		main section.articles article[data-label="hol"] {}
		
		main section.articles article {
			margin: 0; padding: 0;
			display: flex;
			align-items: center;
		}
		@media screen and (max-width:699px) { main section.articles article { display: block; } } 
		
		main section.articles article:nth-child(2n+0) { text-align:right; flex-direction:row; }
		main section.articles article:nth-child(2n+1) { text-align:left;  flex-direction:row-reverse; }
		
		@media screen and (max-width:699px) {
			main section.articles article:nth-child(2n+0) { text-align:left; flex-direction:row; }
			main section.articles article:nth-child(2n+1) { text-align:left; flex-direction:row; }
		}
		
		main section.articles article h2 {
			font-size: 2.5rem;
			margin-bottom: 0.5em;
		}
		@media screen and (max-width:699px) { main section.articles article h2 { font-size:1.5rem; } }

		main section.articles article p {
			font-size: 1.3rem;
			color: rgba(255,255,255,0.6);
		}
		@media screen and (max-width:699px) { main section.articles article p { font-size: 0.9rem; } }
		
		main section.articles article figure {
			display: block;
			vertical-align: top;
			width: 50%;
			background-position: top center;
			outline: 0px solid red;
		}
		@media screen and (max-width:699px) { main section.articles article figure { width: 100%; margin-block:15px; } }
		
		main section.articles article figure img { width: 100%; height: auto; visibility: hidden;}
		main section.articles article figcaption {
			width: 50%;
			white-space: normal;
			outline: 0px solid #8334D2;
		}
		@media screen and (max-width:699px) { main section.articles article figcaption { width: 100%; margin-bottom: 25px; } }





	
	/*						*/	
	/*						*/	
	/* Sliders 				*/
	/*						*/	
	/*						*/	
		
		main section.sliders {
			margin-block:10vh;
		}
		@media screen and (max-width:699px) { main section.sliders { margin-top: 0; margin-bottom:15vh; width: 100vw; } }
		
		main section.sliders .mirror {
			display: block;
			position: relative;
			left: 50%;
			transform: translateX(-50%);
		}
		main section.sliders .mirror > h4 {
			font-size: 1.4rem;
			font-size: 1.8rem;
			text-transform: uppercase;
			font-weight: normal;
			margin-bottom: 0.5em;
		}
		main section.sliders .mirror > h4 .count {
			display: inline-block;
			position: relative;
			top: -0.15rem;
			background-color: var(--brand_color);
			color: black;
			border-radius:25px;
			font-size:0.5em;
			line-height: 1;
			padding: 5px 15px 0 15px;
			margin: 0 0 0 10px;
		}
		
		@media screen and (max-width:699px) { main section.sliders h4 { font-size: 1rem; } }
		
		.slider {
			position: relative;
			width: 100vw;
			margin-left: 0;
			overflow: hidden;
			overflow: visible;
			margin-bottom: 150px;
			user-select: none;
		}
		/*
		@media screen and (max-width:1899px) { .slider { width: calc(125vw - 0px); margin-left:   0px; left: 50%; transform: translateX(-50%); } }
		@media screen and (max-width:1599px) { .slider { width: calc(135vw - 0px); margin-left:   0px; left: 50%; transform: translateX(-50%); } }
		@media screen and (max-width:1399px) { .slider { width: calc(150vw - 0px); margin-left:   0px; left: 50%; transform: translateX(-50%); } }
		@media screen and (max-width:1199px) { .slider { width: calc(165vw - 0px); margin-left:   0px; left: 50%; transform: translateX(-50%); } }
		@media screen and (max-width: 999px) { .slider { width: calc(155vw - 0px); margin-left:   0px; left: 50%; transform: translateX(-50%); } }
		@media screen and (max-width:699px)  { .slider { width: calc(155vw - 0px); margin-left: -30px; left: 50%; transform: translateX(-50%); } }
		
		@media screen and (min-width:1000px) { .slider { --slide_height:300px; } }
		@media screen and (max-width: 999px) { .slider { --slide_height:200px; } }
		@media screen and (max-width: 699px) { .slider { --slide_height:120px; } }
		*/

		.slider-covers {
			display: block;
			position: absolute;
			width: 100%;
			pointer-events: none;
			z-index: 1;
			top: 0; bottom: 0;
		}
		.slider-covers .slider-cover {
			position: absolute;
			height: 100%;
		}
		.slider-covers .slider-cover:first-child { width: 100px; left:  0px; background: linear-gradient( 90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); }
		.slider-covers .slider-cover:last-child  { width: 150px; right: 0px; background: linear-gradient(-90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%); }

		.slider .scroller {
			position: relative;
			left: 50%;
			transform: translateX(calc(-50% - 0px));
			width: calc(100vw - 0px);
			height: auto;
			margin: 0; padding: 0;
			scroll-behavior:smooth;
			scroll-snap-type: x mandatory;
			overflow: hidden;
			overflow-y: visible;
			overflow-x: auto;
			overscroll-behavior: auto;
		}
		.slider .scroller ul {
			display: flex;
			align-items:flex-start;
			justify-content:flex-start;
			flex-flow: row nowrap;
			width: 500%;
			margin:0; 
			padding: 0;
			font-size: 0; 
			line-height: 0;
		}
		
		/*
		.slider[data-view="1"][data-count="20"] .scroller ul { }
		.slider[data-view="2"][data-count="20"] .scroller ul { width: 500%; }
		.slider[data-view="3"][data-count="20"] .scroller ul { width: 500%; }
		.slider[data-view="4"][data-count="20"] .scroller ul { width: 500%; }
		.slider[data-view="5"][data-count="20"] .scroller ul { width: 500%; }
		
		.slider[data-count="1" ] .scroller ul { width: 100%; }
		.slider[data-count="2" ] .scroller ul { width: 200%; }
		.slider[data-count="10"] .scroller ul { width:1000%; }
		.slider[data-count="20"] .scroller ul { width: 500%; }
		.slider[data-count="30"] .scroller ul { width:3000%; }
		*/

		/*
		.slider[data-view="1"][data-count="20"] .scroller ul { width: 500%; }
		.slider[data-view="2"][data-count="20"] .scroller ul { width: 500%; }
		.slider[data-view="3"][data-count="20"] .scroller ul { width: 500%; }
		.slider[data-view="4"][data-count="20"] .scroller ul { width: 500%; }
		*/


		.slider .scroller ul li {
			position: relative;
			scroll-snap-align: start;
			flex: none;
			margin: 0;
			padding: 0;
			height: auto;
			aspect-ratio:16 / 12;
			font-size: 1rem;
			line-height: 1.2;
		}
		.slider .slider[data-view="1"] .scroller ul li { width:100.0vw; }
		.slider .slider[data-view="2"] .scroller ul li { width: 50.0vw; }
		.slider .slider[data-view="3"] .scroller ul li { width: 33.3vw; }
		.slider .slider[data-view="4"] .scroller ul li { width: 25.0vw; }
		.slider .slider[data-view="5"] .scroller ul li { width: 20.0vw; }
		
		.slider .scroller ul li.movie {
		}
		.slider .scroller ul li.placeholder {
			width: 160px;
		}
		.slider .scroller ul li.placeholder:first-child { width:  50px; }
		.slider .scroller ul li.placeholder:last-child  { width: 150px; }
		
		.slider .scroller ul li.movie > .content {
			display: block;
			position: relative;
			height: 100%;
			left: 40px;
		}
		.slider .scroller ul li.movie > .content figure {
			display: block;
			position: absolute;
			inset: 5px;
			background-size: cover;
			opacity: 0.7;
			cursor: pointer;
		}
		.slider .scroller ul li.movie > .content .dim {
			position: absolute;
			height: 80px;
			left: 0; right: 0;
			bottom: 0;
		}
		.slider .scroller ul li.movie > .content .dim:after {
			content:"";
			display: block;
			position: absolute;
			inset: 0px 0 0 0;
			background: linear-gradient( 0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
			outline: 0px solid orange;
			mix-blend-mode: multiply;
		}
		.slider .scroller ul li.movie > .content .dim:before {
			content:"";
			display: block;
			position: absolute;
			inset: -30px 0 0 0;
			background: linear-gradient( 0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%);
			outline: 0px solid green;
			mix-blend-mode: overlay;
		}
		.slider .scroller ul li.movie > .content figcaption {
			position: absolute;
			height: 80px;
			bottom: 5px;
			left: 60px;
			right: 0;
			margin: 0;
			padding: 0;
			font-size: 2.2rem;
			line-height: 1.2;
			color: white;
			text-align: center;
			text-align: left;
			transition: bottom .5s ease;
			user-select: none;
			pointer-events: none;
			z-index: 9999;
			text-shadow: 0 0 10px black;
		}
		.slider .scroller ul li.movie > .content figcaption h4 {
			font-size: 1.4rem;
			font-size: 1.8rem;
			font-weight: normal;
			position: relative;
			z-index: 999;
			padding: 30px 25px 0 25px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.slider .scroller ul li.movie > .content a.play-button {
			position: absolute;
			z-index: 1000;
			inset:0;
			color: white;
			cursor: pointer;
			transition: text-shadow 0.5s ease;
		}
		.slider .scroller ul li.movie > .content a.play-button:hover {
			/*color: var(--brand_color);*/
			text-shadow: 0 0  5px var(--brand_color),
			             0 0 10px var(--brand_color),
						 0 0 20px var(--brand_color),
			             0 0 40px var(--brand_color),
			             0 0 60px var(--brand_color),
			             0 0 80px var(--brand_color)
		}
		.slider .scroller ul li.movie > .content a.play-button i {
			display: block;
			position: absolute;
			pointer-events: none;
			bottom: 15px;
			left:   15px;
			width:       60px;
			height:      60px;
			font-size:   60px;
			line-height: 60px;
		}
		.slider .scroller ul li.movie > .content a.play-button i:before { content:"\EC25"; }
		
		@media screen and (max-width: 699px) {
			.slider .scroller { width: calc(100vw - 0px); }
			/*.scroller ul { width:1000%; }*/
			/*.scroller ul li { width:calc(10% - 50px); }*/
			.slider .scroller ul li.movie > .content { left:0px; }
			.slider .scroller ul li.placeholder:first-child { display: none; }
			.slider .scroller ul li.placeholder:last-child  { width: 50px; }
			main section.sliders .slider  .scroller ul li.movie > .content figcaption h4 { font-size: 1.0rem; }
			.slider-covers .slider .slider-cover:first-child { width:  20px; left:  0px; background: linear-gradient( 90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%); }
			.slider-covers .slider .slider-cover:last-child  { width:  50px; right: 0px; background: linear-gradient(-90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0) 100%); }
		}
		
		.slider .scroller ul li.movie:nth-child(2n+0) .content { background-color: hsla(121,19%,46%,1.00); background-color:black; }
		.slider .scroller ul li.movie:nth-child(2n+1) .content { background-color: hsla(359,41%,41%,1.00); background-color:black; }
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		::-webkit-scrollbar              {} /* addresses the background of the bar itself. It is usually covered by the other elements */
		::-webkit-scrollbar-button       {} /* addresses the directional buttons on the scrollbar */
		::-webkit-scrollbar-track        {} /* addresses the empty space “below” the progress bar */
		::-webkit-scrollbar-track-piece  {} /* is the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb) */
		::-webkit-scrollbar-thumb        {} /* addresses the draggable scrolling element that resizes depending on the size of the scrollable element */
		::-webkit-scrollbar-corner       {} /* addresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet */
		::-webkit-resizer                {} /* addresses the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements */



		::-webkit-scrollbar {
			background-color: rgba(0,0,0,0);
			Xdisplay:none;
		}
		::-webkit-scrollbar-track {
			background-color: rgba(201,44,47,0);
		}
		::-webkit-scrollbar-thumb {
			background-color:rgba(255,255,255,0.40);
			border-radius: 15px;
			border: 5px solid #000000;
		}
		.thumbnails-scroller::-webkit-scrollbar-button {
			display: block;
			background-size: contain;
		}
		.thumbnails-scroller::-webkit-scrollbar-button:horizontal:start:decrement {
			display: block;
			background-image: url("../../images/elements/arrow-left.white.svg");
		}
		.thumbnails-scroller::-webkit-scrollbar-button:horizontal:end:increment {
			background-image: url("../../images/elements/arrow-right.white.svg");
		}



		.thumbnails-scroller {
			position: relative;
			left: calc(50% - 0px);
			transform: translateX(-50%);
			max-width: calc(100vw - 160px);
			height: auto;
			margin: 15px 0 0 0;
			padding: 0 0 25px 0;
			scroll-behavior:smooth;
			scroll-snap-type: x mandatory;
			overflow: hidden;
			overflow-y: visible;
			overflow-x: auto;
		}
		.thumbnails.dragging {
			scroll-snap-type:none ;
		}
		.thumbnails.dragging ul li {
			scroll-snap-align: none;
		}
		
		.thumbnails-scroller ul {
			display: flex;
			align-items:flex-start;
			justify-content:center;
			flex-flow: row nowrap;
			width:100%;
			margin:0; 
			padding: 0;
			font-size: 0; 
			line-height: 0;
		}
		
		.thumbnails-scroller ul li {
			position: relative;
			scroll-snap-align: start;
			flex: none;
			margin: 0;
			padding: 0;
			width: 15%;
			height: auto;
			aspect-ratio:16 / 13;
			font-size: 1rem;
			line-height: 1.2;
		}
		.thumbnails-scroller ul li.movie {
			position: relative;
			height: 100%;
		}
		.thumbnails-scroller ul li.placeholder {
		}
		.thumbnails-scroller ul li.movie > .content {
			display: block;
			position: absolute;
			inset:3px;
			transform:translateX(20px);
		}
		.thumbnails-scroller ul li.movie > .content * {
			pointer-events: none;
		}
		.thumbnails-scroller ul li.movie > .content a.play-button { display: none; }
		
		.thumbnails-scroller ul li.movie > .content figure {
			display: block;
			position: absolute;
			inset: 5px;
			background-size: cover;
			opacity: 0.7;
			cursor: grab;
			cursor: pointer;
		}
		.thumbnails-scroller ul li.movie > .content figcaption {
			position: absolute;
			bottom: -20px;
			width: 100%;
		}
		.thumbnails-scroller ul li.movie > .content figcaption h4 {
			font-size: 0.6rem;
			color: white;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.thumbnails-scroller ul li.movie:nth-child(2n+0) .content { background-color: hsla(121,19%,46%,1.00); background-color:black; }
		.thumbnails-scroller ul li.movie:nth-child(2n+1) .content { background-color: hsla(359,41%,41%,1.00); background-color:black; }

		@media screen and (min-width: 700px) {
			.thumbnails-scroller ul li.placeholder {
				display: none; 
			}
		}
		@media screen and (max-width: 699px) {
			.thumbnails-scroller ul li { width: 20%; }
			.thumbnails-scroller ul li.movie > .content figure { inset:1px; }
			.thumbnails-scroller ul li.placeholder:first-child { width:20px; }
			.thumbnails-scroller ul li.placeholder:last-child  { width:20px; }
		}
		@media screen and (min-width:1440px)                        {
			.thumbnails-scroller ul li { width: 7%; }
		}
		@media screen and (min-width:1240px) and (max-width:1439px) {
		}
		@media screen and (min-width:1040px) and (max-width:1239px) {
		}
		@media screen and (min-width: 960px) and (max-width:1039px) {
		}
		@media screen and (min-width: 860px) and (max-width: 959px) {
		}
		@media screen and (min-width: 700px) and (max-width: 859px) {
		}
		@media screen and (min-width: 580px) and (max-width: 699px) {
		}
		@media screen and (min-width: 310px) and (max-width: 579px) {
		}
		
		



		.slider .scroller ul li.movie:before { 
			display: block;
			position: relative;
			width:       50px;
			height:      50px;
			margin-bottom: -60px;
			line-height: 60px;
			font-size:   40px;
			left: 50%;
			top: 0%;
			transform: translate(-50%,-50%);
			transform: translate(-50%,0%);
			overflow: hidden;
			content:"";
			z-index: 99999;
			background-color: green;
			color: white;
			text-align: center;
			padding: 5px;
			pointer-events: none;
			opacity: 0.3;
			
			display: none;
		}
		.slider .scroller ul li.movie:nth-child(1):before { content:"1"; }
		.slider .scroller ul li.movie:nth-child(2):before { content:"2"; }
		.slider .scroller ul li.movie:nth-child(3):before { content:"3"; }
		.slider .scroller ul li.movie:nth-child(4):before { content:"4"; }
		.slider .scroller ul li.movie:nth-child(5):before { content:"5"; }
		.slider .scroller ul li.movie:nth-child(6):before { content:"6"; }
		.slider .scroller ul li.movie:nth-child(7):before { content:"7"; }
		.slider .scroller ul li.movie:nth-child(8):before { content:"8"; }
		.slider .scroller ul li.movie:nth-child(9):before { content:"9"; }
		.slider .scroller ul li.movie:nth-child(10):before { content:"10"; }
		.slider .scroller ul li.movie:nth-child(11):before { content:"11"; }
		.slider .scroller ul li.movie:nth-child(12):before { content:"12"; }
		.slider .scroller ul li.movie:nth-child(13):before { content:"13"; }
		.slider .scroller ul li.movie:nth-child(14):before { content:"14"; }
		.slider .scroller ul li.movie:nth-child(15):before { content:"15"; }
		.slider .scroller ul li.movie:nth-child(16):before { content:"16"; }
		.slider .scroller ul li.movie:nth-child(17):before { content:"17"; }
		.slider .scroller ul li.movie:nth-child(18):before { content:"18"; }
		.slider .scroller ul li.movie:nth-child(19):before { content:"19"; }
		.slider .scroller ul li.movie:nth-child(20):before { content:"20"; }
		.slider .scroller ul li.movie:nth-child(21):before { content:"21"; }
		.slider .scroller ul li.movie:nth-child(22):before { content:"22"; }
		.slider .scroller ul li.movie:nth-child(23):before { content:"23"; }
		.slider .scroller ul li.movie:nth-child(24):before { content:"24"; }
		.slider .scroller ul li.movie:nth-child(25):before { content:"25"; }
		.slider .scroller ul li.movie:nth-child(26):before { content:"26"; }
		.slider .scroller ul li.movie:nth-child(27):before { content:"27"; }
		.slider .scroller ul li.movie:nth-child(28):before { content:"28"; }
		.slider .scroller ul li.movie:nth-child(29):before { content:"29"; }
		.slider .scroller ul li.movie:nth-child(30):before { content:"30"; }
		.slider .scroller ul li.movie:nth-child(31):before { content:"31"; }
		.slider .scroller ul li.movie:nth-child(32):before { content:"32"; }
		.slider .scroller ul li.movie:nth-child(33):before { content:"33"; }
		.slider .scroller ul li.movie:nth-child(34):before { content:"34"; }
		.slider .scroller ul li.movie:nth-child(35):before { content:"35"; }
		.slider .scroller ul li.movie:nth-child(36):before { content:"36"; }
		.slider .scroller ul li.movie:nth-child(37):before { content:"37"; }
		.slider .scroller ul li.movie:nth-child(38):before { content:"38"; }
		.slider .scroller ul li.movie:nth-child(39):before { content:"39"; }
		.slider .scroller ul li.movie:nth-child(40):before { content:"40"; }

		/* navigation */
		
		.navigation {
			position: relative;
			top: 0;
			float: right;
			width: auto;
			height: 0px;
		}
		.slider .navigation .buttons {
			position: relative;
			transform: translate(0%,calc(-100% - 20px));
		}
		.slider[data-navigation="on-slides"] .navigation .buttons {
			top: 0;
			height: 0px;
			width: 100%;
		}
		.slider[data-navigation="title-line"] .navigation .buttons {
			width: 100%;
			text-align: right;
			margin-top: 0px;
		}
		.navigation .buttons a {
			display: block;
			position: relative;
			text-decoration: none;
			background-color: rgba(0,0,0,0.62);
			box-shadow: 0 5px 25px 10px rgba(0,0,0,0.60);
			color: white;
			width:  40px;
			height: 40px;
		}
		.navigation .buttons a:hover {
			color: var(--brand_color);
		}
		
		.slider[data-navigation="on-slides"]  .navigation .buttons a { margin: -20px 0 0 -20px; }
		.slider[data-navigation="title-line"] .navigation .buttons a { margin: 0 0 0 10px; display: inline-block; }
		
		@media screen and (max-width:999px) { .navigation .buttons a { margin:0; } }
		
		.slider[data-navigation="on-slides"] .navigation .buttons a.prev {
			float: left;
			margin-left: 50px;
		}
		.slider[data-navigation="on-slides"] .navigation .buttons a.next {
			float: right;
			margin-right: 50px;
		}		
		@media screen and (max-width:999px) {
			.navigation .buttons a.prev { float:left; margin-left: 0; }
			.navigation .buttons a.next { float:right; margin-right: 0; }
		}
		.navigation .buttons a i {
			display: block;
			font-size:   30px;
			line-height: 40px;
			width:       40px;
			height:      40px;
			text-align: center;
			border: 2px solid white;
			pointer-events: none;
		}
		.navigation .buttons a:hover i {
			border-color: var(--brand_color);
		}
		.navigation .buttons a.prev i:before { content:"\EBA3"; }
		.navigation .buttons a.next i:before { content:"\EBA8"; }		


		@media screen and (min-width: 700px) {
		}
		@media screen and (max-width: 699px) {
			.navigation { display: none; }
		}

		












	/*						*/
	/* Account				*/
	/*						*/
	/* - side menus 		*/
	/* - columns 			*/
	/*						*/
	
		section.account {}
		section.account .columns {
			display: block;
			position: relative;
			font-size: 0; line-height: 0;
			margin: 0; padding: 0;
		}
		section.account .columns .column {
			display: inline-block;
			vertical-align: top;
			font-size: 1.5rem;
			line-height: 1.2;
		}
		section.account .columns .column:nth-child(1) {
			width: 200px;
		}
		section.account .columns .column:nth-child(2) {
			width: calc(100% - 200px);
		}
		section.account .columns .column:nth-child(1):before {
			display: block;
			position: relative;
			float: right;
			left: -30px;
			content:"";
			width: 1px;
			height: 500px;
			margin: 0 0 -100px 0;
			border-right: 1px solid hsla(0,0%,100%,0.5);
		}
		section.account ul.side-menus {
			display: block;
			width: 160px;
		}
		section.account ul.side-menus li {
			min-height: 40px;
			margin-bottom: 15px;
		}
		section.account ul.side-menus li.current {
			font-weight: bold;
			pointer-events: none;
		}
		section.account ul.side-menus li a {
			text-decoration: none;
			color: inherit;
		}
		
		@media screen and (min-width:1600px) and (max-width:9999px) {}
		@media screen and (min-width:1400px) and (max-width:1599px) {}
		@media screen and (min-width:1200px) and (max-width:1399px) {}
		@media screen and (min-width:1000px) and (max-width:1199px) {}
		@media screen and (min-width: 800px) and (max-width: 999px) {}
		@media screen and (min-width: 700px) and (max-width: 799px) {}
		@media screen and (min-width: 600px) and (max-width: 699px) {}
		@media screen and (min-width: 500px) and (max-width: 599px) {}
		@media screen and (min-width: 400px) and (max-width: 499px) {}
		@media screen and (min-width:   0px) and (max-width: 399px) {}
		
		@media screen and (min-width: 0px) and (max-width: 699px) {
			section.account .columns .column:nth-child(1) {
			
			}
			section.account .columns .column:nth-child(1):before {
				display: none;
			} 
			section.account ul.side-menus {
				width: calc(100% - 40px);
				padding: 15px 0px 0 10px;
				position: fixed;
				background-color: black;
				z-index: 1;
				text-align: left;
			}
			section.account
			ul.side-menus:after {
				display: block;
				position: relative;
				width: calc(100% - 40px);
				margin: -8px 0 0px 0;
				content:"";
				border-bottom:1px solid white;
			}
			
			section.account ul.side-menus li {
				display: inline-block;
				width: 120px;
				text-align: left;
			}
			
		}



















	/*						*/	
	/*						*/	
	/* FAQ 					*/
	/*						*/	
	/*						*/	
	
		@media screen and (min-width:700px) { main section.faq { --max_height:400px; } }
		@media screen and (max-width:699px) { main section.faq { --max_height:100vh; } }

		main section.faq {}
		main section.faq .mirror {
			display: block;
			position: relative;
			left: calc(50% - 10px);
			transform: translateX(-50%);
		}
		
		main section.faq h3 {
			font-size: 2.5rem;
			margin-bottom: 0.5em;
		}
		@media screen and (max-width:699px) { main section.faq h3 { font-size:1.5rem; } }
		
		main section.faq ul {
			margin-left: -25px;
		}
		main section.faq ul li {
			position: relative;
			color: white;
			overflow: hidden;
			background-color: rgba(255,255,255,0.10);
			margin-bottom: 5px;
			transition: max-height 0.1s ease;
		}
		@media screen and (max-width:699px) { main section.faq ul li { background-color: rgba(255,255,255,0.30); } }
		
		main section.faq ul li figcaption {
			position: relative;
			padding: 25px 35px;
		}
		@media screen and (max-width:699px) { main section.faq ul li figcaption { padding:15px 25px; } }
		
		main section.faq ul li figcaption h4 {
			font-size: 1.6rem;
			margin-bottom: 50px;
			color: inherit;
		}
		@media screen and (max-width:699px) { main section.faq ul li figcaption h4 { font-size: 1rem; } }
		
		main section.faq ul li figcaption p {
			font-size:1.3rem;
			color: rgba(255,255,255,0.6);
		}
		@media screen and (max-width:699px) { main section.faq ul li figcaption p { font-size:0.9rem; } }
		
		main section.faq ul li a {
			position: absolute;
			z-index: 2;
			inset:0;
			color: inherit;
			text-decoration: none;
		}
		main section.faq ul li a i {
			position: relative;
			font-weight: normal;
			font-size: 15px;
			float: right;
			right: 15px;
			top: 30px;
		}
		main section.faq ul li a i:before { content:"\E917"; }
		
		/* states */
		
		main section.faq[data-count="4"] {}
		main section.faq ul li { max-height: 70px; }
		@media screen and (max-width:699px) { main section.faq ul li { max-height: 60px; } }

		main section.faq[data-current= "1"] ul li:nth-child( 1),
		main section.faq[data-current= "2"] ul li:nth-child( 2),
		main section.faq[data-current= "3"] ul li:nth-child( 3),
		main section.faq[data-current= "4"] ul li:nth-child( 4),
		main section.faq[data-current= "5"] ul li:nth-child( 5),
		main section.faq[data-current= "6"] ul li:nth-child( 6),
		main section.faq[data-current= "7"] ul li:nth-child( 7),
		main section.faq[data-current= "8"] ul li:nth-child( 8),
		main section.faq[data-current= "9"] ul li:nth-child( 9),
		main section.faq[data-current="10"] ul li:nth-child(10),
		main section.faq[data-current="11"] ul li:nth-child(11),
		main section.faq[data-current="12"] ul li:nth-child(12),
		main section.faq[data-current="13"] ul li:nth-child(13),
		main section.faq[data-current="14"] ul li:nth-child(14),
		main section.faq[data-current="15"] ul li:nth-child(15),
		main section.faq[data-current="16"] ul li:nth-child(16),
		main section.faq[data-current="17"] ul li:nth-child(17),
		main section.faq[data-current="18"] ul li:nth-child(18),
		main section.faq[data-current="19"] ul li:nth-child(19),
		main section.faq[data-current="20"] ul li:nth-child(20) { max-height:var(--max_height); transition: max-height 0.3s ease; color:#FBAD18; }
		
		main section.faq[data-current= "1"] ul li:nth-child( 1) h4,
		main section.faq[data-current= "2"] ul li:nth-child( 2) h4,
		main section.faq[data-current= "3"] ul li:nth-child( 3) h4,
		main section.faq[data-current= "4"] ul li:nth-child( 4) h4,
		main section.faq[data-current= "5"] ul li:nth-child( 5) h4,
		main section.faq[data-current= "6"] ul li:nth-child( 6) h4,
		main section.faq[data-current= "7"] ul li:nth-child( 7) h4,
		main section.faq[data-current= "8"] ul li:nth-child( 8) h4,
		main section.faq[data-current= "9"] ul li:nth-child( 9) h4,
		main section.faq[data-current="10"] ul li:nth-child(10) h4,
		main section.faq[data-current="11"] ul li:nth-child(11) h4,
		main section.faq[data-current="12"] ul li:nth-child(12) h4,
		main section.faq[data-current="13"] ul li:nth-child(13) h4,
		main section.faq[data-current="14"] ul li:nth-child(14) h4,
		main section.faq[data-current="15"] ul li:nth-child(15) h4,
		main section.faq[data-current="16"] ul li:nth-child(16) h4,
		main section.faq[data-current="17"] ul li:nth-child(17) h4,
		main section.faq[data-current="18"] ul li:nth-child(18) h4,
		main section.faq[data-current="19"] ul li:nth-child(19) h4,
		main section.faq[data-current="20"] ul li:nth-child(20) h4 { margin-bottom:20px; } 












/*				*/
/*				*/
/* FOOTER 		*/
/*				*/
/*				*/

	footer {
		position: relative;
		width: 100%;
		min-height: 50px;
		margin-top: 10px;
		outline: 1px solid orange;
		outline: none;
	}
	@media screen and (max-width:959px) { footer { min-height: 0; } }

	footer .background {
		position: absolute;
		inset: 0;
	}
	footer .mirror {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		padding-block: 50px; 
	}
	@media screen and (min-width:1600px) and (max-width:1799px) { footer .mirror { padding-block:50px; } }
	@media screen and (min-width:1400px) and (max-width:1599px) { footer .mirror { padding-block:50px; } }
	@media screen and (min-width:1200px) and (max-width:1399px) { footer .mirror { padding-block:50px; } }
	@media screen and (min-width:1000px) and (max-width:1199px) { footer .mirror { padding-block:50px; } }
	@media screen and (min-width: 800px) and (max-width: 999px) { footer .mirror { padding-block:50px; } }
	@media screen and (min-width: 700px) and (max-width: 799px) { footer .mirror { padding-block:50px; } }
	@media screen and (min-width: 600px) and (max-width: 699px) { footer .mirror { padding-block:50px; } }
	@media screen and (min-width: 500px) and (max-width: 599px) { footer .mirror { padding-block:50px; } }
	@media screen and (min-width: 400px) and (max-width: 499px) { footer .mirror { padding-block:50px; } }
	@media screen and (min-width:   0px) and (max-width: 399px) { footer .mirror { padding-block:50px; } }
	
	footer .row {
		min-height: 40px;
	}
	footer .row .logo {
		position: relative;
		width: 150px;
		height: 40px;
		margin-bottom: -40px;
		background-position: left top;
		background-image: url("../../images/logo/metu-logos-cropped/metu-logo-landscape-1color-negative.png?v=2");
	}
	@media screen and (max-width:959px) { footer .row .logo { margin-bottom: 25px; } }
	
	footer .row .menus {
		position: relative;
		left: calc(100% - 600px);
		width: 600px;
	}
	@media screen and (max-width:959px) { footer .row .menus { width: 100%; left: 0; } }
	
	footer .row .menus[data-columns="3"] {
		column-count: 2;
		break-inside: avoid-column;
	}
	@media screen and (max-width:959px) { footer .row .menus[data-columns="3"] 	{ column-count: 1; } }
	footer .row .menus[data-columns="3"] a  {
		display: block;
		text-decoration: none;
		color: white;
		text-transform: uppercase;
		font-size: 1.0rem;
		line-height: 1.5;
	}
	footer .row .menus[data-columns="3"] .group  {
		display: block;
		break-inside: avoid;
	}
	footer .row .menus[data-columns="3"] .group[data-label="types"]  {
		column-count: 2;
	}
	@media screen and (max-width:959px) { footer .row .menus[data-columns="3"] .group[data-label="types"] { column-count: 1; } }
	
	footer .row[data-label="lower"] {
		white-space: nowrap;
		margin: 25px 0;
		padding: 0;
		font-size: 0; line-height: 0;
	}
	@media screen and (max-width:959px) { footer .row[data-label="lower"] { display: flex; white-space: normal; flex-direction: column-reverse;  } }
	
	footer .row[data-label="lower"]:before {
		content:"";
		display: block;
		width: 100%;
		height: 15px;
		border-top: 1px solid hsla(0,0%,100%,0.52);
	}
	@media screen and (max-width:959px) { footer .row[data-label="lower"]:before { display: none; } }

	footer .row[data-label="lower"] .column {
		display: inline-block;
		vertical-align: top;
		white-space: normal;
		font-size: 1.0rem;
		line-height: 1.5;
		outline: 1px dotted orange;
		outline: none;
	}
	footer .row .column:nth-child(1) { width: 600px; }
	footer .row .column:nth-child(2) { width: 300px; }
	footer .row .column:nth-child(3) { width: 300px; }

	@media screen and (min-width:1040px) and (max-width:1439px) {
		footer .row[data-label="lower"] .column:nth-child(1) { width: 300px; }
		footer .row[data-label="lower"] .column:nth-child(2) { width: 200px; }
		footer .row[data-label="lower"] .column:nth-child(3) { width: 200px; }
	}
	@media screen and (min-width:960px) and (max-width:1039px) {
		footer .row[data-label="lower"] .column:nth-child(1) { width: 300px; }
		footer .row[data-label="lower"] .column:nth-child(2) { width: 200px; }
		footer .row[data-label="lower"] .column:nth-child(3) { width: 200px; }
	}
	@media screen and (min-width:0px) and (max-width:959px) {
		footer .row[data-label="lower"] .column:nth-child(1),
		footer .row[data-label="lower"] .column:nth-child(2),
		footer .row[data-label="lower"] .column:nth-child(3) { display: block; width:100%; margin-bottom: 15px; }
	}
	
	footer .row[data-label="lower"] .column[data-label="restrictions"] {
		font-size: 0.8rem;
	}
	footer .row[data-label="lower"] .column[data-label="links"] a,
	footer .row[data-label="lower"] .column[data-label="privacy"] a {
		display: block;
		text-decoration: none;
		color: white;
		text-transform: uppercase;
		font-size: 1.0rem;
		line-height: 1.5;
		overflow: hidden;
	}
	footer .row[data-label="lower"] .column[data-label="links"] a.picto {
		display: inline-block;
	}
	footer .row[data-label="lower"] .column[data-label="links"] a.picto i {
		width:       35px;
		height:      35px;
		line-height: 35px;
		font-size: 20px;
		color: white;
		background-size: contain;
		background-repeat: no-repeat;
	}
	footer .row[data-label="lower"] .column[data-label="links"] a.picto em {
		display: none;
		text-indent: -1000em;
	}
	footer .row[data-label="lower"] .column[data-label="links"] a.picto[data-label="facebook"]  i { background-image:url(../../images/icon/social/positive.red/facebook.png); }
	footer .row[data-label="lower"] .column[data-label="links"] a.picto[data-label="instagram"] i { background-image:url(../../images/icon/social/positive.red/instagram.png); }
	footer .row[data-label="lower"] .column[data-label="links"] a.picto[data-label="youtube"]   i { background-image:url(../../images/icon/social/positive.red/youtube.png); }
	footer .row[data-label="lower"] .column[data-label="links"] a.picto[data-label="tiktok"]    i { background-image:url(../../images/icon/social/positive.red/tiktok.png); }
	/*
	footer .row[data-label="lower"] .column[data-label="links"] a.picto[data-label="facebook"]  i:before { content:"\EAFD"; }
	footer .row[data-label="lower"] .column[data-label="links"] a.picto[data-label="instagram"] i:before { content:"\EAFE"; }
	footer .row[data-label="lower"] .column[data-label="links"] a.picto[data-label="youtube"]   i:before { content:"\EB09"; }
	footer .row[data-label="lower"] .column[data-label="links"] a.picto[data-label="tiktok"]    i:before { content:"\E924"; }
	*/

	/* states */
	
	footer a:hover {/* color: var(--brand_color)!important; */color: var(--brand_red)!important;!i;!;}
	footer .row[data-label="lower"] .column[data-label="links"] a.picto       i { filter:brightness(0) invert(1); }
	footer .row[data-label="lower"] .column[data-label="links"] a.picto:hover i { filter:none; }

	

	.mirror {
		position: relative;
		left: 50%;
		transform:translateX(-50%);
	}
	@media screen and (min-width:1440px)                        { .mirror {                             width: 1200px; } }
	@media screen and (min-width:1240px) and (max-width:1439px) { .mirror {                             width: 1000px; } }
	@media screen and (min-width:1040px) and (max-width:1239px) { .mirror {                             width:  860px; } }
	@media screen and (min-width: 960px) and (max-width:1039px) { .mirror {                             width:  700px; } }
	@media screen and (min-width: 860px) and (max-width: 959px) { .mirror {                             width:  600px; } }
	@media screen and (min-width: 700px) and (max-width: 859px) { .mirror {                             width:  500px; } }
	@media screen and (min-width: 580px) and (max-width: 699px) { .mirror { left: 50px; transform:none; width: calc(100vw - 100px); } }
	@media screen and (min-width: 310px) and (max-width: 579px) { .mirror { left: 50px; transform:none; width: calc(100vw -  80px); } }
	@media screen and (min-width:   0px) and (max-width: 309px) { .mirror { left: 50px; transform:none; width: calc(100vw -  80px); } }





/* Overrides */




/* Responsives: loaded last from screens.css */
	
	
	
	
/*				*/
/*				*/
/* DEV 			*/
/*				*/
/*				*/

	.mirror {
		outline: 1px dashed orange;
		outline: none;
	}