@font-face {
	font-family: 'Urban Grotesk';
	src: url('font/UrbanGroteskLiSe-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Urban Grotesk';
	src: url('font/UrbanGroteskLiSe-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Urban Grotesk';
	src: url('font/UrbanGroteskLiSe-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Urban Grotesk';
	src: url('font/UrbanGroteskReBo-Bold.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Urban Grotesk';
	src: url('font/UrbanGroteskMeBl-Bold.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Urban Grotesk';
	src: url('font/UrbanGroteskLiSe-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

:root {
    /*--color-darkgreen: #24382c;
    --color-lightgreen: #b9cf96;*/
    --color-blue: #041c34;
    --color-green: #64ccc9;
}

#wpadminbar { top: 0; opacity: 0.5; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: "Urban Grotesk", sans-serif;
    color: var(--color-blue);
}

/*section[id],
[id] {
    scroll-margin-top: 100px;
}*/

main {
	margin-top: 78px;
	ul { margin: 1rem 0; padding-left: 2rem; list-style: disc; }
}
body.admin-bar main { margin-top: 47px; }

section.hero {
   img {
      width: 100%;
      aspect-ratio: 2.87;
      object-fit: cover;
      object-position: center;
   }
   .swiper-pagination-bullet {
      width: 12px !important;
      height: 12px !important;
      background: var(--color-blue);
      opacity: 1;
   }
   .swiper-pagination-bullet-active {
      background: #fff;
   }

	.hero-title span {
		background: rgba(8, 36, 67, 0.9);
		padding: 0.12em 0.26em 0.18em;
		display: inline;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}
}

section.pricelist {
	font-size: .8rem;
	h2.season-title {
		position: absolute;
		top: 0;
		left: 50%; 
		transform: translate(-50%, -50%);
		display: block;
		font-size: 1rem;
		padding: 0.5rem 1.5rem;
		color: #fff;
		background: var(--color-blue);
		white-space: nowrap;
	}
	h3 { font-size: 1rem; font-weight: 700; color: var(--color-green); margin-bottom: 2rem; }
	h4 { font-size: 1rem; font-weight: 700; }
	ul {
		display: inline-block;
		text-align: left;
		padding-left: 1.25rem;
		list-style-position: outside;
	}
}

section.contact {
	color: var(--color-green);
	h3 { font-size: 2.5rem; font-weight: 700; color: #fff; }
	td { padding-right: 1rem; padding-bottom: 0.5rem; }
	a { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 5px; }
	a:hover { color: #fff; }
}

h1 {
	font-size: 5rem;
	font-weight: 700;
	color: var(--color-green);
}

h2 {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--color-green);
	margin-bottom: 1rem;
}

.container {
	padding-inline: 15px;
}

.io-hidden{
	opacity: 0;
	transform: translateY(100px);
  transition-duration: 2s;
  transition-timing-function: ease-out;
  &.io-left{transform: translateX(-80%);}
  &.io-right{transform: translateX(80%);}
}

.io-show{
	opacity: 1 !important;
	transform: translate(0, 0) !important;
}

/*********** MAX-WIDTH MEDIA QUERIES ***********/

@media (max-width: 1440px){ /* 2xl */
    
}

@media (max-width: 1280px){ /* xl */
    h1 { font-size: 4rem; }
}

@media (max-width: 1024px){ /* lg */
	h1 { font-size: 3.5rem; }
	h2 {  font-size: 2rem; }
}

@media (max-width: 767px){ /* md */
    section.hero img { aspect-ratio: 1.8; }
}

@media (max-width: 600px){ /* sm */
    h1 { font-size: 2.5rem; }
	 h2 { font-size: 1.75rem; }
}

@media (max-width: 480px){ /* xs */
    
}