/*
Theme Name:         Vuokatti Sport
Theme URI:          http://adkiivi.fi
Github Theme URI:   http://adkiivi.fi
Description:        Vuokatti Sport - Teema
Version:            1.1.0
Author:             Ad Kiivi
Author URI:         http://adkiivi.fi

License:            MIT License
License URI:        http://www.opensource.org/licenses/mit-license.php
*/

/* ----------------------------------------------------------------------------

  Unfortunately WordPress will require a style.css file
  located in the theme's root folder for stuff to work.

  However, we will not be using vanilla CSS. We're using Sass.

  Sass is a superset of CSS that adds in amazing features
  such as variables, nested selectors and loops. It's also
  the easiest way to customize Foundation.

  All Sass files are located in the /assets/scss folder.
  Please note that none of your scss files will be compiled to /stylesheets/foundation.css before you run
  'npm run watch' or 'npm run build'.

  Please read the README.md file before getting started. More info on how
  to use Sass with Foundation can be found here:
  http://foundation.zurb.com/docs/sass.html

  If you for some reason would like to write plain css instead of using Sass,
  you could just enqueue this file (style.css) to the header and add your styles in this file

---------------------------------------------------------------------------- */

/* Yeah, yeah, let's get on with it.
	- WTF Design 2023 */

:root {
	font-size: 24px;
	--light-grey: #d5d5d5;
	--grey: #ababab;
	--transition-duration: .3s;
	--main-menu-background: #54186E;
	--hot-pink: #FF4561;
	--hotter-pink: #FF5C5C;
	--vuokatti-purple: #621D80;
	--vuokatti-purple-dark: #310b54;
	--thin: 100;
	--extra-light: 200;
	--ultra-light: 200;
	--light: 300;
	--book: 400;
	--normal: 400;
	--regular: 400;
	--medium: 500;
	--demi-bold: 600;
	--semi-bold: 600;
	--bold: 700;
	--extra-bold: 800;
	--ultra-bold: 800;
	--black: 900;
	--heavy: 900;
}

button, 
body {
	font-family: "Cover sans", "Corbel", sans-serif;
}

#masthead {
	border-bottom-color: var(--light-grey);
	border-bottom: none;
	position: fixed;
}

body.logged-in #masthead {
	top: 32px !important;
}

@media screen and (max-width: 1199px) {
	#masthead {
		position: relative !important;
	}
	body.logged-in #masthead {
		top: 0px !important;
	}
}

.language-active {
	color: #000;
}

.language-active i {
	margin-left: .5ch;
}

.languages {
	background-color: #fff;
}

.title-bar .wrapper .language::after {
	content: unset;
}

.title-bar .wrapper .language,
.top-bar .wrapper .language {
	border: 1px solid var(--light-grey);
	border-top: none;
	border-bottom-color: transparent;
}

.title-bar .wrapper .language.show,
.top-bar .wrapper .language.show {
	border-bottom-color: unset;
}

.top-bar .wrapper .search .input-group input[type="search"] {
	text-transform: none;
	letter-spacing: initial;
}

#masthead #hotellinx-form-holder {
	width: 100%;
	position: absolute;
	visibility: hidden;
	opacity: 0;
	transition:
		opacity var(--transition-duration),
		visibility 0s var(--transition-duration);
}

#masthead #hotellinx-form-holder.visible {
	visibility: visible;
	opacity: 1;
	transition:
		opacity var(--transition-duration);
}

/* Eliminate font-size based spacing around .top-bar .wrapper items */
.top-bar .wrapper {
	font-size: 0;
}
.top-bar .wrapper > *{
	font-size: .75rem;
}

.menu-button {
	background: var(--main-menu-background);
	color: #fff;
	position: relative;
	width: 48px;
	height: 100%;
	padding-inline: 42px;
	cursor: pointer;
}

.title-bar .menu-button {
	background-color: var(--main-menu-background);
	color: #fff;
	float: right;
}

.title-bar .language {
	background-color: var(--vuokatti-purple);
	color: #fff;
	border: none !important;
}

.title-bar .language-active {
	color: #fff;
}

.title-bar .wrapper .toggle-search {
	background-color: var(--vuokatti-purple);
	color: #fff;
}

.menu-button svg {
	fill: currentColor;
	pointer-events: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transition: opacity var(--transition-duration);
	transform: translate(-50%, -50%);
}

.menu-button.menu-open svg.menu-open,
.menu-button:not(.menu-open) svg.menu-closed {
	opacity: 0;
}

.menu-button:not(.menu-open) svg.menu-open,
.menu-button.menu-open svg.menu-closed {
	opacity: 1;
}

.main-menu {
	background-color: var(--main-menu-background);
	color: #fff;
	position: absolute;
	width: 100%;
	padding: 84px;
	visibility: hidden;
	opacity: 0;
	transition:
		opacity var(--transition-duration),
		visibility 0s var(--transition-duration);
	z-index: 200;
	top: 0;
}

.main-menu.visible {
	visibility: visible;
	opacity: 1;
	transition:
		opacity var(--transition-duration);
}

.main-menu > ul {
	font-size: calc(2rem/3);
	letter-spacing: .17ch;
	border-bottom: 1px solid #F1F1F1;
	padding-bottom: 5em;
	display: grid;
	grid-template-columns: repeat(auto-fit, 19em);
	column-gap: 3em;
	margin-inline: auto;
	max-width: 1920px;
	justify-content: space-between;
}

.main-menu ul {
	list-style: none;
	margin-inline: auto;
}

.main-menu a {
	color: #fff;
	font-weight: inherit !important;
	text-transform: inherit !important;
	font-size: inherit !important;
}

.main-menu a:hover {
	text-decoration: underline;
}

.main-menu a[href=""] {
	display: none;
}

.main-menu a[href=""]::after {
	content: " !";
}

.main-menu > ul > li,
.main-menu .menu-section {
	min-width: 30ch;
	text-transform: uppercase;
}

.main-menu > ul > li > a {
	cursor: text;
	text-decoration: none !important;
}

.main-menu > ul > li > ul > li:first-child,
.main-menu .menu-section > ul > li:first-child {
	border-top: 1px solid #F1F1F1;
	padding-top: 2em;
	margin-top: .5em;
}

.main-menu > ul > li > ul {
	font-size: calc(5rem/6);
	font-weight: var(--semi-bold);
	letter-spacing: .17ch;
	line-height: 2rem;
	padding-bottom: 3em;
}

.main-menu > ul > li > ul > li > ul {
	text-transform: none;
	font-weight: var(--bold);
	font-size: calc(2rem/3);
	margin-left: 2ch;
	line-height: 2rem;
	letter-spacing: initial;
}

button#start {
	display: none;
}

.sisalto .nosto {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top left;
	aspect-ratio: 1/1;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: end;
}

.sisalto .nosto .nosto-label {
	box-shadow: .75rem 0 var(--hot-pink);
	display: inline-block;
	transition:
		box-shadow var(--transition-duration),
		background-position var(--transition-duration);
	background-color: var(--hot-pink);
	background-image: linear-gradient(var(--vuokatti-purple), var(--vuokatti-purple));
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center right;
}

.sisalto .nosto .nosto-label:focus,
.sisalto .nosto .nosto-label:hover {
	box-shadow: 1.5rem 0 var(--hot-pink);
	background-position: center right .5rem;
}

.sisalto .nosto .nosto-label > * {
	padding: 1rem;
	margin: 1rem;
	position: relative;
	z-index: 3;
}

.sisalto .nosto .nosto-label > *:first-child {
	padding-bottom: 0;
}
.sisalto .nosto .nosto-label > * + * {
	padding-top: 0;
}

.sisalto .nosto .nosto-label::before {
	position: absolute;
	width: 100%;
	height: 100%;
	content: "";
	background-color: var(--vuokatti-purple);
	z-index: 2;
	inset: 0;
	opacity: 0;
	transition: opacity var(--transition-duration);
	/* pointer-events: none; */
}

.sisalto .nosto .nosto-label:focus::before,
.sisalto .nosto .nosto-label:hover::before {
	opacity: .2;
}

.sisalto .nosto * {
	margin-block: 0 !important;
	color: #fff !important;
	hyphens: auto;
	word-break: break-word;
}

.sisalto .nosto .preline {
	font-size: .75rem !important;
}

.sisalto .nosto h2 {
	font-size: calc(4rem/3) !important;
}

.sisalto .nosto-label > * {
	padding-right: 1ch;
}

.ghost:focus,
.ghost:hover {
	border-color: var(--hot-pink);
	background: var(--hot-pink);
	transition-duration: 0s !important;
}

.sisalto .text {
	padding-top: 1em;
	font-size: calc(2rem/3) !important;
}

#video-header + .reserve {
	height: 3.5rem;
	line-height: 3.5rem;
	text-align: center;
	text-transform: uppercase;
	background-color: var(--vuokatti-purple);
	padding: 0 1.8rem 0 1.8rem;
	cursor: pointer;
	vertical-align: top;
	color: #fff;
	transition: all 0.5s 0s;
	position: sticky;
	bottom: -3.5rem;
	left: 50%;
	translate: -50% -100%;
	display: inline-block;
	font-size: .75rem;
	letter-spacing: .1rem;
}

.tarina.row.expanded {
	margin-inline: -4rem;
	position: relative;
	background-size: cover;
	background-color: var(--vuokatti-purple);
	background-position: center center;
	color: #fff;
}

.tarina.row.expanded:nth-child(2n+1) {
	background-image: url("/wp-content/uploads/2021/09/iivo-scaled.jpeg");
}
.tarina.row.expanded:nth-child(2n) {
	background-image: url("/wp-content/uploads/2023/02/latulentoon.jpg");
}

.tarina.row.expanded a.full {
	background: none;
}

.tarina.row.expanded a.ghost {
	padding: 0.85em 1em;
	display: inline-block;
	background-color: var(--hot-pink);
	transition: background-color var(--transition-duration);
}

.tarina.row.expanded a.ghost:focus,
.tarina.row.expanded a.ghost:hover {
	background-color: var(--hotter-pink);
}

.tarina.row.expanded > :first-child {
	padding-top: 2rem;
}

.tarina.row.expanded > :last-child {
	padding-bottom: 2rem;
}

.tarina.row.expanded .drape::before,
.tarina.row.expanded a.full::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--vuokatti-purple);
	opacity: .9;
	inset: 0;
	transition: var(--transition-duration) background-color;
}

.tarina.row.expanded .drape::before,
.tarina.row.expanded a.full:focus::before,
.tarina.row.expanded a.full:hover::before {
	background-color: var(--vuokatti-purple-dark);
}

.tarina.row.expanded h3 {
	font-size: 1rem;
	margin-block: 0;
	position: relative;
	display: inline-block;
}

.tarina.row.expanded > a h3::after {
	position: absolute;
	font-family: "FontAwesome";
	content: "";
	right: -3rem;
	transition: var(--transition-duration) right;
}

.tarina.row.expanded > a:focus h3::after,
.tarina.row.expanded > a:hover h3::after {
	right: -6rem;
}

.tarina.row.expanded .drape h3 {
	display: block;
	font-size: calc(4rem/3);
}

.drape {
	text-align: center;
	padding-block: 4rem !important;
}

.drape > * {
	position: relative;
}

.drape > *:last-child {
	margin-bottom: 0;
}


.drape p {
	max-width: 50ch;
	margin-inline: auto;
	font-size: calc(5rem/6);
	margin-block: 1rem;
}

.drape h3 {
	text-transform: uppercase;
}

#recent-posts {
	margin-inline: -4rem;
	padding-inline: 4rem;
	padding-block: 3rem;
}
@media screen and (max-width: 1199px) {
	#recent-posts {
		margin-inline: -3rem;
	}
}

#content {
	padding-inline: 0;
}
@media screen and (max-width: 1199px) {
	#content {
		padding-inline: 1rem;
	}
}

#footer-container {
	/* margin-inline: -4rem; */
	max-width: unset;
	width: unset;
	background-color: var(--vuokatti-purple-dark);
}

#footer-container article {
	background-color: var(--vuokatti-purple-dark) !important;
}

footer {
	display: flex;
	flex-direction: row;
	/* padding-inline: 4rem; */
}

footer > * {
	padding: 4rem 2rem;
}

footer > :not(:last-child) {
	padding-inline: 2rem;
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}
@media screen and (max-width: 1199px) {
	footer {
		flex-direction: column;
	}
	footer > :not(:last-child) {
		border: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	}
}

footer#info #haku {
	padding: 4rem 2rem;
	border-top: none;
	max-width: 20rem;
}
@media screen and (min-width: 40em) and (max-width: 1199px) {
	footer#info #haku .medium-6 {
		margin-right: .5rem;
		width: calc(50% - .5rem);
	}
}
@media screen and (max-width: 1199px) {
	footer#info #haku {
		padding: 2rem 2rem;
		max-width: unset;
	}
}

footer label {
	color: #fff;
}

footer a {
	color: #fff;
	text-decoration: underline;
}

footer a:focus,
footer a:hover {
	color: #fff;
}

footer > :nth-child(2) {
	flex-grow: 1;
	background: url("/wp-content/uploads/2017/09/vuokatti_map.png") no-repeat right 2rem top 4rem;
	background-size: auto;
}

footer .some {
	float: right;
	margin-right: 5rem;
}

@media screen and (min-width: 1200px) and (max-width: 1799px) {
	footer > :nth-child(2) {
		background-image: none;
	}
	footer .some {
		float: left;
	}
}
@media screen and (max-width: 799px) {
	footer > :nth-child(2) {
		background-image: none;
	}
	footer .some {
		float: none;
	}
}

footer#info h3 {
	text-transform: none;
}

#footer-container .contact-elements,
footer#info {
	/* box-shadow:
		var(--vuokatti-purple-dark) -4rem 0,
		var(--vuokatti-purple-dark) 4rem 0; */
}

.line-head {
	color: var(--vuokatti-purple);
}

.tapahtuma-wrapper {
	display: flex;
	gap: .5rem;
	margin-bottom: 4rem;
	flex-wrap:wrap
}

.tapahtuma-wrapper > *:not(#no-events) {
	width: calc(25% - 1rem);
}
@media screen and (max-width: 1199px) {
	.tapahtuma-wrapper > *{
		  width: calc(50% - 1rem);
	}
}

.tapahtuma-wrapper .grid-inner {
	min-height: 90%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.tapahtuma-wrapper .grid-inner .ghost {
	margin-block: 0;
}

.tapahtuma:not(.artikkeli)::after {
	border-color: transparent;
}

/* Font size adjustments to rem change from 16px to 24px */
.block .meta {
	font-size: .533rem;
}

.block h3 {
	font-size: .8rem;
}

.block .ghost {
	min-width: unset;
	width: min(10rem, 100%);
}

.recent-posts-wrapper {
	display: inline-flex;
	gap: .5rem;
	flex-wrap: wrap;
}

#recent-posts .post {
	padding: 0 !important;
	border: none !important;
width: calc(25% - 1rem);
}
@media screen and (max-width: 1199px) {
	#recent-posts .post {
		  width: calc(50% - 1rem);
	}
}


#recent-posts .post .post-meta {
	font-size: calc(2rem/3);
	padding: 1rem 0;
	margin: 0;
	display: block;
}

#recent-posts .post .title {
	min-height: unset;
}

#recent-posts .post .title h3 {
	font-size: calc(19rem/24);
}

#recent-posts .post a.imagelink {
	background-color: var(--vuokatti-purple);
	display: inline-block;
}

#recent-posts .post a.imagelink img {
	transition: opacity var(--transition-duration);
}

#recent-posts .post a.imagelink:hover img {
	opacity: .8;
}


#recent-posts .read-more {
	font-size: calc(2rem/3);
}
#recent-posts .read-more:hover {
	text-decoration: underline;
}

#recent-posts .read-more::after {
	margin-left: 1em;
	content: ">";
	display: inline-block;
	font-weight: 300;
	transition: margin-left var(--transition-duration);
}

#recent-posts .read-more:hover::after {
	margin-left: 3em;
}

pre {
	width: 100%;
}

#footer-bottom {
	background: #fff;
	text-align: center;
	padding: 3rem;
}

#footer-bottom p {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

#footer-bottom img {
	width: unset;
	height: 100px;
}

#footer-container .contact-elements {
	background: none;
}

#footer-container .contact-elements .medium-6 {
	padding: 4rem 6rem !important;
}
@media screen and (max-width: 1199px) {
	#footer-container .contact-elements .medium-6 {
		width: 100%;
	}
}

.menu-icon:hover::after {
	background: var(--vuokatti-purple);
}

iframe.ld-cta-bot {
	left: 75% !important;
}

body.search-results,
#search-results .artikkeli {
	padding: 0;
}

.search-no-esults .subpage-navigation,
.search-results .subpage-navigation {
	display: none;
}

#mobile-search .searchform,
#search-results .searchform {
	border: 1px solid var(--light-grey);
}

#mobile-search .searchform .input-group,
#search-results .searchform .input-group {
	margin: 0;
}

#mobile-search .searchform input,
#mobile-search .searchform button,
#search-results .searchform input,
#search-results .searchform button {
	box-shadow: none;
	border: 0;
	background: transparent;
	height: 2.5rem;
	font-size: calc(3rem/4);
	text-transform: uppercase;
	line-height: 2.5rem;
}

#mobile-search, .searchform button,
#search-results .searchform button {
	color: var(--vuokatti-purple);
	padding: none;
}

#search-results h1,
#search-results h2 {
	font-size: calc(4rem/3);
	letter-spacing: unset;
}

#search-results h2::after {
	content: unset;
}

#search-results .entry-title {
	font-weight: var(--semi-bold);
}

#search-results .entry-title .entry-term{
	font-weight: var(--regular);
}

#search-results .search-result-count {
	text-transform: uppercase;
	font-size: .75rem;
	color: var(--grey);
}

#search-results .read-more {
	font-size: small;
}

#search-results .pagination li {
	font-size: calc(2rem/3);
}

#search-results .pagination li > * {
	display: inline-block;
	width: 3em;
	height: 3em;
	text-align: center;
	line-height: 2.3em;
	border-radius: 50%;
	color: var(--main-menu-background);
	background: transparent;
}

#search-results .pagination .current {
	border: var(--hot-pink) solid 1px;
}

#search-results .pagination .prev img,
#search-results .pagination .next img {
	width: 1rem;
	max-width: unset;
}

.lifts .lift-content {
	padding: 2rem;
}

.lift-content h2 {
	font-size: 1.5rem;
	overflow-wrap: normal;
}

/* Majoitushaku megastyle */
#info .majoitushaku span[class] {
	margin: 0 .5rem .5rem 0;
}
#info .majoitushaku span[class]:focus-within {
	outline: var(--hot-pink) solid 3px;
}
#info .majoitushaku label {
	margin: 0 !important;
	padding: 0 0 0 .5rem;
	white-space: nowrap;
	user-select: none;
}
#info .majoitushaku input,
#info .majoitushaku select {
	margin: 0 !important;
	padding: 0 .5rem 0 0;
	box-shadow: none;
}
#info .majoitushaku select {
	padding-right: 1rem !important;
	background-position: right -.5rem center !important;
}

@media
	(min-width: 500px) and (max-width: 639px),
	(min-width: 800px) and (max-width: 1199px),
	(min-width: 1600px) {
	#info .majoitushaku label {
		padding: 0 0 0 1.5rem;
	}
	#info .majoitushaku input,
	#info .majoitushaku select {
		padding: 0 1.5rem 0 0
	}
	#info .majoitushaku select {
		padding-right: 2rem !important;
	}
}

/* ARIN LISÄÄMÄT KOODIT */

.multiplelifts{
	//padding:0 1.5rem;
}


iframe.ld-chat-window{
	min-width:380px;
}
iframe.ld-chat-bot{
	min-width:56px;
}
iframe.ld-cta-bot  {
	min-width: 4rem;
	left: 10% !important;
  transform: translate(-50%, 0px) !important;
  z-index: 10 !important;
}
.top-bar {
    background-color: var(--vuokatti-purple);
}
#tapahtumahaku {
    width: 200%;
}
#tapahtumat-hero h1 {
    width: 100%;
}
.artikkeli h2 {
	font-size: 36px;
	line-height: 1.2;
	letter-spacing: 1px;
}
p {
	font-size: 20px;
	line-height: 1.5;
}

@media only screen and (max-width: 1199px) {
    body {
        /* overflow-x: hidden; */
    }
    .cn-button {
        padding: 10px 10px;
    }
    .tapahtuma-wrapper > * {
        width: 100% !important;
    }
    .tapahtuma {
        width: 100%;
        margin-bottom: 1rem;
    }
    .tapahtuma-wrapper {
        margin-bottom: 1rem;
    }
    #tapahtumahaku {
        width: 100%;
    }
	iframe.ld-cta-bot {
			left: 50% !important;
			transform: translate(-50%, 0px) !important;
			z-index: 10 !important;
	}
    #tapahtumat-hero select {
        margin-block: 0 !important;
    }
    .module {
        margin-top: 0 !important;
    }
    .tarina.row.expanded {
        margin-inline: 0 !important;
        padding-inline: 1rem !important;
        margin-bottom: 1rem !important;
    }
    .sisalto {
        height: auto !important;
    }
    #recent-posts .post {
        width: 100% !important;
    }
    #footer-container .contact-elements .medium-6 {
        padding: 2rem 5rem !important;
        padding-bottom: 0 !important;
    }
    .contact-head {
        margin-bottom: 0 !important;
    }
    .footer-bottom {
        padding: 0 !important;
    }
    #footer-container {
      /* padding-bottom: 4rem !important; */
    }
    footer > * {
        padding: 2rem 2rem !important;
    }
    .cookie-notice-container {
        margin-bottom: 40px;
    }
    .block .meta {
        display: none;
    }
    .lifts .lift-content {
        padding: 2rem !important;
        padding-inline: 1rem !important;
    }
    .main-menu {
        padding: 2rem !important;
    }
    #tapahtumat-hero h1 {
        font-size: 0.9rem !important;
        letter-spacing: 3px !important;
    }
    .main-menu > ul > li > ul {
        line-height: 1.6rem !important;
    }
    .title-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    .title-bar .wrapper {
        background-color: var(--vuokatti-purple);
    }
    .title-bar-title .title {
        padding-right: 20px;
    }
    .title-bar-title .description {
        display: none;
    }
    .title-bar-title .logo {
        display: none;
    }
    #video-header + .reserve {
        margin-left: 50% !important;
        height: 2.5rem !important;
        line-height: 2.5rem !important;
        padding-inline: 1rem !important;
        width: 65% !important;
    }
    #tapahtumat-hero h1 {
        width: 100%;
    }
	.artikkeli {
		padding-inline: 0;
	}
	.artikkeli h2 {
		font-size: 28px;
		line-height: 1.1;
		letter-spacing: 1px;
	}
	p {
		font-size: 18px;
		line-height: 1.5;
	}
}

:root {
    /* overflow-x: hidden; */
}

.off-canvas-wrapper {
	overflow: unset;
}

.event-filters {
	position: sticky;
	top: 84px;
	z-index: 101;
	min-height: 3rem;
	padding-block: 1rem;
	margin-top: var(--hero-base-height);
	color: white;
	--hero-base-height: 700px;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	align-items: baseline;
	box-shadow: var(--vuokatti-purple) 0 calc(-1 * var(--hero-base-height));
}

.event-filters::before {
	content: "";
	position: absolute;
	background-image: url("/wp-content/themes/vuokatti-sport-2021/assets/images/bg_01_3.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	/* translate: 0 calc(-100% + 4rem); */
	height: calc(var(--hero-base-height) + 5rem);
	width: 100%;
	z-index: -1;
	bottom: 0;
}
.page-navigation .title.event-filters {
	border: none;
	float: none;
	text-align: left;
	flex-grow: 1;
	height: unset;
}

.event-filters .filter-label span {
	display: none;
}

.event-filters .hero {
	position: absolute;
	top: calc(-1 * var(--hero-base-height) / 1.5);
	left: 5rem;
}

.event-filters .hero img {
	width: 3rem;
	margin-bottom: 3rem;
}

.event-filters .hero h1 {
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: .2rem;
	font-weight: var(--semi-bold);
}
.event-filters .hero h1::after {
	content: ' ';
	border-bottom: 2px solid #fff;
	position: absolute;
	left: 0;
	bottom: -1rem;
	width: 3rem;
}

.event-filters input,
.event-filters select {
	display: inline-block;
	width: auto;
	margin: calc(-2.4375rem/2) 0;
	margin: 0;
	box-shadow: none !important;
	border: 1px solid rgb(202, 202, 202);
}
.event-filters input:focus,
.event-filters select:focus {
	outline: 2px var(--hot-pink) solid;
}

.event-filters select,
.event-filters input::placeholder {
	color: #000a;
	opacity: 1;
}
.event-filters .select-wrapper[data-label] {
	position: relative;
	display: inline-block;
	color: #000a;
}
.event-filters .select-wrapper[data-label] select {
	color: transparent;
	appearance: none;
	width: 100%;
}
.event-filters .select-wrapper[data-label] select option {
	color: black;
}
.event-filters .select-wrapper[data-label]::after {
	content: attr(data-label);
	position: absolute;
	inset: 50% 0;
	font-size: 1rem;
	text-transform: none;
	display: inline-block;
	margin: calc(-2.4375rem/2) 0;
	margin: -1rem 0;
	pointer-events: none;
	padding: .5rem;
	line-height: normal;
}

#content.events {
	min-height: 400px;
}
*,
*::after,
*::before {
	/* outline: dashed 2px red !important; */
}
@media screen and (max-width: 1199px) {
	.event-filters {
		margin-top: 0;
		flex-direction: column;
		padding: 1rem;
		top: 0;
		/* margin-inline: -4rem; */
		overflow: hidden;
	}
	.event-filters::before {
		margin-inline: -1rem;
	}
	.event-filters .hero {
		display: none;
	}
	.event-filters .filter-label span {
		font-weight: var(--semi-bold);
		text-transform: uppercase;
		display: unset;
	}
	.event-filters > *,
	.event-filters input {
		width: 100%;
	}
}

#no-events {
	color: black;
	display: none;
}

#alanostot {
	padding-block-start: 3rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#alanostot .module {
	width: 32%;
	overflow-x: hidden;
}
@media screen and (max-width: 74.9375em) {
	#alanostot .module {
		width: 100%;
	}
}

#alanostot .sisalto {
	display: flex;
	flex-direction: column;
}

#alanostot .sisalto .text-container {
	flex-grow: 1;
}

#alanostot .preline {
	margin: 1rem 0 0 0;
	text-transform: uppercase;
}

#alanostot h2 {
	margin: 0 0 2rem 0;
	letter-spacing: 0;
}

#main-container {
	width: auto;
}
@media screen and (min-width: 1200px) {
	#main-container {
		padding-inline: 4rem;
	}
	#footer-container {
		margin-inline: -4rem;
	}
}