@charset "utf-8";
/* CSS Document */
body {
	font-family: p22-typewriter, sans-serif; font-style: normal; font-weight: 400; font-size: 14px; color: #2F2E2E; max-width: 1920px; margin: 0 auto; text-align: center
}
.h1 {
	font-size: 1.6em
}
img {
	max-width: 100%; height: auto
}
.bg-blur-behind {
	backdrop-filter: blur(5px)
}
.bg-fade-70 {
	background-image: url("images/bg-fade-70.png")
}
.bg-white {
	background-color: white; color: black
}
.div-1200 {
	max-width: 1200px; margin: 0 auto
}
.div-lozenge {
	border-radius: 15px; overflow: hidden
}
.div-lozenge-flat-bottom {
	border-top-left-radius: 15px; border-top-right-radius: 15px; overflow: hidden
}
.div-lozenge-top-left {
	border-top-left-radius: 15px; overflow: hidden
}
.div-lozenge-top-right {
	border-top-right-radius: 15px; overflow: hidden
}
.div-pad-10 {
	padding: 10px
}
.div-pad-20 {
	padding: 20px
}
.fill-blue {
	background-color: #25C7D9
}
.fill-orange {
	background-color: #F2622E
}
.fill-red {
	background-color: #F23030; color: #FFFFFF
}
.fill-steel {
	background-color: #248EA6; color: #FFFFFF
}
.fill-yellow {
	background-color: #F2D338
}
.grid-event-detail {
	display: grid; grid-template-columns: 100px 1fr 5fr; text-align: left; justify-items: center
}
.grid-event-header {
    display: grid; grid-template-columns: 100px 120px 70px; padding: 0; text-align: left
}
h1 {
  font-family: "ltr-ncnd-variable",sans-serif;   font-variation-settings: 'wght' 250;
}
.hero-home {
	background-image: url("images/hero-typewriter-480.jpg"); padding: 60% 10% 20%
}

.text-blue {
	color: #25C7D9
}
.text-orange {
	color: #F2622E
}
.text-red {
	color: #F23030
}
.text-steel {
	color:#248EA6
}
.text-yellow {
	color:#F2D338
}
.top-hero {
	background-size: cover; background-position: center; background-repeat: no-repeat;
}

@media screen and (min-width: 480px) {
	.hero-home {
        background-image: url("images/hero-typewriter-600.jpg"); padding: 60% 10% 10%
    }
}
@media screen and (min-width: 600px) {
	.hero-home {
        background-image: url("images/hero-typewriter-800.jpg"); padding: 60% 10% 10%
    }
}
@media screen and (min-width: 800px) {
	.hero-home {
        background-image: url("images/hero-typewriter-1000.jpg"); padding: 40% 10% 5%
    }
}
@media screen and (min-width: 1000px) {
	.hero-home {
        background-image: url("images/hero-typewriter-1200.jpg"); padding: 40% 10% 5%
    }
}
@media screen and (min-width: 1200px) {
	.hero-home {
        background-image: url("images/hero-typewriter-1600.jpg"); padding: 30% 10% 5%
    }
}
@media screen and (min-width: 1600px) {
	.hero-home {
        background-image: url("images/hero-typewriter-1920.jpg"); padding: 15% 30% 5%
    }
}
