/* === Import styles === */

	@import url(../css/normalize.min.css);
	@import url(../css/fontawesome-all.css);

	@import url(../css/csm-boxstyles.css);
	@import url(../css/csm-colors.css);
	@import url(../css/csm-columns.css);
	@import url(../css/csm-forms.css);
	@import url(../css/csm-others.css);
	@import url(../css/csm-tables.css);
	@import url(../css/csm-texts.css);
	@import url(../css/csm-tools.css);

/* === Custom styles === */

	@import url("https://use.typekit.net/xdi5pmh.css");

	:root {
		--ff-01: roboto, sans-serif;
		--ff-02: ;
	}

	.ff-01 { font-family: var(--ff-01);
		}
	.ff-02 { font-family: var(--ff-02); }

	html, body { font-family: var(--ff-01); color: var(--c0); scroll-behavior: smooth; }

	header { position: fixed; z-index: 73; }
	header .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
	header .container:after { display: none; }
	header .logo { height: 4em; display: block; }

	header nav a { text-decoration: none; color: currentcolor; text-transform: uppercase; padding: .75em 0; position: relative; }
	header nav a:not(:first-child) { margin-left: 2em; }
	header nav a:hover { color: currentcolor !important; text-decoration: none !important; }

	header nav a span { content: ""; background-color: var(--c2); height: .125em; display: block; position: absolute; bottom: 0em; left: 50.01%; right: 50.01%; transition-duration: .05s !important; transition-timing-function: ease-in-out; }
	header nav a.active span,
	header nav a:hover span { left: 0%; right: 0%; transition-duration: .15s !important;}

	@media ( max-width: 767px ) {
		header nav { flex-direction: column !important; justify-content: center; align-items: flex-end; width: 100%; padding-right: 1em; height: 0em; overflow: hidden; opacity: 0; }
		header nav a { font-size: 1.9em; margin-left: 0 !important; margin: .33em 0; }
		header.openmobilenav nav { height: calc(100vh - 4em); opacity: 1; }
	}

	header .togglemenu { width: 1.05em; justify-content: center; }

	.hero { display: flex; align-items: center; justify-content: center; }
	.hero .hrcontwidth { max-width: 45em; }
	.hero .herovid { width: 100%; height: 100%; object-fit: cover; opacity: .90; mix-blend-mode: multiply; }


	.scrollmove	{ position: absolute; }

	section { scroll-margin-top: 4em; }

	.eyebrow:after { content: ""; clip-path: polygon(100% 0, 100% 100%, -5px 100%, 100% 0); position: absolute; bottom: -.5px; background-color: var(--c1); width: 100%; height: 5em; display: block; }

	.finalistsgrid { display: grid; grid-template-columns: repeat(2, auto); gap: 1.5em; }

	/* from XS */ 
	@media ( min-width: 480px ) {
		.finalistsgrid { grid-template-columns: repeat(3, auto); }
	}

	/* from S */ 
	@media ( min-width: 768px ) {
		section { scroll-margin-top: 5em; }
	}

	/* from M */ 
	@media ( min-width: 1024px ) {
		section { scroll-margin-top: 5em; }

	}

	/* from L */ 
	@media ( min-width: 1280px ) {
		.finalistsgrid { grid-template-columns: repeat(5, auto); gap: 3em; }
	}

	.finalistsgrid .finalist > div .gradbg { background: linear-gradient(0deg, var(--c0) -25%, rgba(0,0,0,0) 100%); position: absolute; inset: 0; z-index: -1; }
	.finalistsgrid .finalist:hover:not(.allcounter) { transform: scale(1.05); }

	.finalistsgrid .finalist img { position: absolute; width: 100%; height: 100%; display: block; object-fit: cover; z-index: 0; transform: scale(1); filter: saturate(1); }
	.finalistsgrid .finalist:hover img { transform: scale(1.085); filter: saturate(1.25); }

	.finalistsgrid .finalist:hover .info { padding-top: 2em; }

	.finalistsgrid .finalist .info { position: absolute; bottom: 0; left: 0; right: 0; z-index: 0; }
	.finalistsgrid .finalist .votes { position: absolute; top: 1.25em; left: 1.25em; }

	.finalistsgrid .finalist .addtionalinfo { max-height: 0em; overflow: hidden; opacity: 0; }
	.finalistsgrid .finalist:hover .addtionalinfo { max-height: 4em; opacity: 1; transition-delay: 200ms; }

	.votes { display: inline-flex; }
	.finalistdetail .votes { position: absolute; padding: .35em .6em; border: 1px solid white; top: -.66em; right: -.66em; }

	.finalistsgrid .allcounter { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white'%3E%3Cpath d='M104 224H24c-13.255 0-24 10.745-24 24v240c0 13.255 10.745 24 24 24h80c13.255 0 24-10.745 24-24V248c0-13.255-10.745-24-24-24zM64 472c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zM384 81.452c0 42.416-25.97 66.208-33.277 94.548h101.723c33.397 0 59.397 27.746 59.553 58.098.084 17.938-7.546 37.249-19.439 49.197l-.11.11c9.836 23.337 8.237 56.037-9.308 79.469 8.681 25.895-.069 57.704-16.382 74.757 4.298 17.598 2.244 32.575-6.148 44.632C440.202 511.587 389.616 512 346.839 512l-2.845-.001c-48.287-.017-87.806-17.598-119.56-31.725-15.957-7.099-36.821-15.887-52.651-16.178-6.54-.12-11.783-5.457-11.783-11.998v-213.77c0-3.2 1.282-6.271 3.558-8.521 39.614-39.144 56.648-80.587 89.117-113.111 14.804-14.832 20.188-37.236 25.393-58.902C282.515 39.293 291.817 0 312 0c24 0 72 8 72 81.452z'/%3E%3C/svg%3E"); background-size: 40%; background-repeat: no-repeat; background-position: center calc(50% - 1.5em); }

	@media ( min-width: 480px ) and ( max-width: 1279px ) {
		.finalistsgrid .allcounter { display: flex; justify-content: flex-end; align-items: center; background-size: 10%; background-position: 4.8% 40%; aspect-ratio: 6 / 1; grid-column-start: 1; grid-column-end: 4; }
		.finalistsgrid .allcounter .info { padding-right: 2em; }
		.finalistsgrid .allcounter .info, .finalistsgrid .allcounter:hover .info { position: relative; left: auto; right: auto; top: auto; bottom: auto; padding-top: 1em; }
		.finalistsgrid .allcounter .info > div { text-align: right !important; }
	}

	.finalistdetail { width: 100%; max-width: 1024px; }

	.finalistdetail .video { display: block; z-index: 0; aspect-ratio: 20 / 9; z-index: 0; }
	.finalistdetail .video span, .videotrigger span { width: 1em; height: 1em; position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-.5em, -.5em) scale(1); background-size: contain; background-position: center; opacity: .5; }
	.finalistdetail .video span:after, .videotrigger span:after { display: block; content: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E"); margin-top: .1125em; filter: drop-shadow(0px 7px 20px rgb(0 0 0 / 0.8)); }
	.finalistdetail .video img, .videotrigger img { object-fit: cover; width: 100%; height: 100%; transition-duration: 500ms; }
	.finalistdetail .video:hover img, .videotrigger:hover img { filter: saturate(1.25); transform: scale(1.033); }
	.finalistdetail .video:hover span, .videotrigger:hover span { transform: translate(-.5em, -.5em) scale(1.33); opacity: .85; }

	.finalistdetail .avatar { width: 12.5em; height: 12.5em; margin-top: -5em; border-radius: 50%; border: .3em solid var(--c1); }
	.finalistdetail .detailheader { display: flex; gap: 2em; }

	@media (max-width: 1023px) {
		.finalistdetail .detailheader { flex-direction: column; text-align: center; gap: 1em; }
	}

	.voting { max-width: 640px; }

	[class*="styledcouple-"] { display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; }
	[class*="styledcouple-"] .sc-media { position: relative; }
	[class*="styledcouple-"] .sc-media .sc-image { background-size: cover; background-position: center; }

	@media (max-width: 899px) {
		[class*="styledcouple-"] { flex-direction: column; }
		[class*="styledcouple-"] .sc-text, [class*="styledcouple-"] .sc-text { position: relative; }
		.styledcouple-tl .sc-text { order: 0; }
		.styledcouple-tl .sc-media { order: 1; }
		.styledcouple-tr .sc-text { order: 1; }
		.styledcouple-tr .sc-media { order: 0; }
 	}

	@media (min-width: 900px) {
		[class*="styledcouple-"] { flex-direction: row; }
		[class*="styledcouple-"] .sc-text { z-index: 1; }
		[class*="styledcouple-"] .sc-text, [class*="styledcouple-"] .sc-media { position: relative; }
		.styledcouple-tl .sc-text { order: 0; }
		.styledcouple-tl .sc-media { order: 1; }
		.styledcouple-tr .sc-text { order: 1; }
		.styledcouple-tr .sc-media { order: 0; }
	}

	footer > .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
	footer > .container:after { display: none; }
	
	footer .logos a img { height: 3em; min-width: 100%; }
	footer a { color: var(--c0-l7); }
	footer a:hover, footer a:focus { color: var(--c0-l3) !important; }
	footer nav { display: inline-flex; }
	footer nav a { padding: .5em; }

	.cookielaw { position: fixed; bottom: 1.5em; right: 1.5em; z-index: 10; width: 340px; max-width: calc( 100vw - 3em ); }
	.cookielaw .cookie-ico { display: inline-block; float: left; }
