body {
	font-family: 'Poppins', sans-serif;
}

[v-cloak] {
	display: none;
}

.font-20 {
	font-size: 20px;
}

.display-emphasize {
	font-weight: 500;
	color: var(--primary);
}

.border-2px-dashed {
	border: 2px dashed currentColor;
}

/* Cursor */
.typed-cursor {
	color: var(--primary-lighter);
}

.text-over-line {
	text-align: center;
	position: relative;
}

.text-over-line:before {
	position: absolute;
	content: "";
	top: 50%;
	left: 1rem;
	right: 1rem;
	height: 1px;
	background: #ddd;
}

.text-over-line span {
	color: #72777c;
	display: inline-block;
	padding: 0.2rem 0.5rem;
	background: #fff;
	position: relative;
}

.btn-social-login {
	background-color: var(--provider-color);
	text-align: left;
	padding: .5rem 1rem;
	line-height: 1.7;
}

.btn-social-login svg {
	float: left;
	width: 24px;
	height: 24px;
	fill: #fff;
}

/*
text animations from
https://codepen.io/hexagoncircle/pen/MWgbqON
https://codepen.io/hexagoncircle/full/OJLxWKq
*/
.word,
.char {
	animation-delay: var(--del);
	animation-direction: var(--dir, normal);
	animation-duration: var(--dur);
	animation-iteration-count: infinite;
	animation-name: var(--name);
	animation-timing-function: var(--tf);
	display: inline-block;
	position: relative;
	transform-origin: 50% 100%;
	z-index: 1;
}

@keyframes running {
	0% {
	  transform: translate(0, 0) rotate(5deg);
	}
	25% {
	  transform: translate(5%, -5%) rotate(10deg);
	}
	50% {
	  transform: translate(5%, 0) rotate(15deg);
	}
	75% {
	  transform: translate(10%, -5%) rotate(10deg);
	}
	100% {
	  transform: translate(0, 0) rotate(5deg);
	}
}

@keyframes swimming {
    from {
      transform: translate(2%, -10%) rotate(-1deg);
    }
    to {
      transform: translate(-2%, 5%) rotate(3deg);
    }
}

@keyframes swimming-alt {
	from {
	  transform: translate(0%, -5%) rotate(-1deg);
	}
	to {
	  transform: translate(2%, 10%) rotate(3deg);
	}
}

@keyframes jump {
	20% {
	  transform: translateY(2%) scaleY(0.9);
	}
	40% {
	  transform: translateY(-100%) scaleY(1.2);
	}
	50% {
	  transform: translateY(10%) scaleY(0.8);
	}
	70% {
	  transform: translateY(-5%) scaleY(1);
	}
	80%, 100% {
	  transform: translateY(0) scaleY(1);
	}
}

@keyframes shiver {
	 1% { transform: translateX( 2%); }
	 2% { transform: translateX(-2%); }
	 3% { transform: translateX( 3%); }
	 4% { transform: translateX(-3%); }
	 5% { transform: translateX( 4%); }
	 6% { transform: translateX(-4%); }
	 7% { transform: translateX( 3%); }
	 8% { transform: translateX(-3%); }
	 9% { transform: translateX( 2%); }
	10% { transform: translateX(-2%); }
	11% { transform: translateX( 1%); }
	12% { transform: translateX( 0%); }
}

@keyframes shiver-letter {
	25% { transform: translateY( 1%); }
	50% {
	  transform: translate(
	    calc(var(--distance-percent) * 1%),
	    calc(var(--distance-percent) * 1%)
	  );
	}
	75% { transform: translateY( 1%); }
}

@keyframes rock {
	0%, 100% { transform: rotate(-10deg); }
	50% { transform: rotate(-18deg); }
}

@keyframes yell {
	3% {
	  transform:
	    scale(calc(1 * var(--distance-percent) + 1.5)) 
	    rotate(calc(15deg * var(--distance-sine)))
	    translateY(-10%);
	}
	6% {
	  transform:
	    scale(calc(1 * var(--distance-percent) + 1.2)) 
	    rotate(calc(15deg * var(--distance-sine)))
	    translateY(-10%);
	}
	12% {
	  transform:
	    scale(calc(1 * var(--distance-percent) + 1.5)) 
	    rotate(calc(15deg * var(--distance-sine)))
	    translateY(-10%);
	}
	18% { transform: scaleY(1) translateY(-2%); }
	25% { transform: scaleY(0.98); }
	50% { transform: scaleY(1); }
	75% { transform: scale(0.98); }
}

.text-anim-parent:hover .text-anim--running .char {
	--name: running;
	--dur: 500ms;
	--del: calc(var(--char-index) * -0.025s);
	--tf: linear;
}

.text-anim-parent:hover .text-anim--cycling .char {
	--name: rock;
	--dur: 2s;
	--td: ease-in-out;
	transform-origin: 0 100%;
}

.text-anim-parent:hover .text-anim--swimming .char {
	--name: swimming;
	--dur: 2200ms;
	--del: calc(var(--char-index) * -0.5s);
	--tf: ease-in-out; 
	--dir: alternate;
}

.text-anim-parent:hover .text-anim--swimming .char:nth-child(2n) {
	--name: swimming-alt;
}

.text-anim-parent:hover .text-anim--winter-sports .word {
	--name: shiver;
	--dur: 3s;
	--td: linear;
}

.text-anim-parent:hover .text-anim--winter-sports .char {
	--name: shiver-letter;
	--del: calc(var(--char-index) * -0.0125s);
	--dur: 140ms;
	--td: linear;
}

.text-anim-parent:hover .text-anim--obstacle-race .char {
	--name: jump;
	--dur: 800ms;
	--del: calc(var(--char-index) * 0.075s);
	--tf: cubic-bezier(0.165, 0.44, 0.64, 1);
}

.text-anim-parent:hover .text-anim--yell .char {
	--name: yell;
	--dur: 3s;
	--tf: ease;
	transform-origin: 50% 100%;
}



.page-head-event {
	position: relative;
	background-color: transparent;
}

.page-head-event::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-image: var(--event-image);
	background-size: cover;
	filter: blur(50px);
	opacity: 0.5;
}


/* Events */

.section-filters {
	position: sticky;
	top: 48px;
	z-index: 999;
	background-color: var(--primary);
}

.form-control-filter {
	background: rgba(255, 255, 255, 0.2);
	border: 0;
	color: #fff;
}

.section-events {
	min-height: 80vh;
}

.event-date-month {
	color: var(--primary);
	font-size: 14px;
	text-transform: uppercase;
	margin-bottom: 0;
}

.event-date-day {
	color: var(--gray-dark);
	font-size: 18px;
	font-weight: 400;
	margin-bottom: 0;
}

.event-date-year {
	color: var(--dark);
	font-size: 14px;
	margin-bottom: 0;
}

.event-race-distance {
	font-size: 32px;
	font-weight: 500;
}

.rsvp.floating {
	position: absolute;
	right: 1rem;
	margin-top: -38px;
}

#event-location-map {
	height: 250px;
}

.search-result mark {
	padding: 0 !important;
}

.search-result:hover {
	background: #fdfdfd;
}