html { margin: 0px; padding: 0px; width: 100%; background-color: var(--white); }
html { scroll-behavior: smooth; }
body { width: 100%; overflow-y: auto; overflow-x: hidden; font-family: 'Roboto Flex'; color: var(--black); font-size: 16px; margin: 0px; padding: 0px; background-color: #ffffff; }
body.loaded #LOADING_SPINNER { display: none; }
body.openMenu { overflow: hidden; }

@font-face {
  font-family: 'Roboto Flex';
  src: url('../fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Anton-Regular';
  src: url('../fonts/Anton/Anton-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

:root {
  --white: #ffffff;
  --black: #000000;
  --red: #F80101;
  --green: #BBF555;
  --darkGreen: #8CB840;
  --fontHeadlineH1: 'Anton-Regular';
  --fontHeadlineH2: 'Anton-Regular';
}

.bgRed { background-color: var(--red); }
.content { width: 100%; max-width: 1120px; margin: 0 auto; font-size: 18px; line-height: 24px; position: relative; }
.box25 { float: left; width: 25%; position: relative; }
p { font-size: 16px; line-height: 24px; }
body.subpage p { padding-bottom: 40px; }
a { text-decoration: none; color: #000000; }
a img { border: 0px; }
.highlighting, a { color: var(--green); }
.textRight { text-align: right; }
.textCenter { text-align: center; }
.container { display: flex; }
.bt { width: 160px; padding: 10px; background-color: var(--green); color: #000000; display: inline; margin-top: 20px; float: left; border-radius: 50px; transition: all 300ms linear; text-align: center;  }
.bt:hover { box-shadow:  0 2px 4px rgba(0,0,0,0.15); transition: all 300ms linear; }
.bt a { color: #000000; font-family: 'Anton-Regular'; }
.scroll-text { opacity: 0; transform: translateY(100px); transition: opacity 1s ease-out, transform 1s ease-out; }
.show { opacity: 1; transform: translateY(0); }
.pad100Top { padding-top: 100px; }

h1 { font-size: 48px; line-height: 64px; color: #000000; text-align: center; padding-left: 40px; padding-right: 40px; padding-top: 100px; padding-bottom: 80px; margin: 0px; font-family: 'Anton-Regular'; font-weight: 900; text-transform: uppercase; }
body.subpage h1 { padding-top: 100px; }
h2 { font-size: 1.5rem; color: #000000; font-family: 'Anton-Regular'; text-align: left; margin: 0px; padding: 0px; padding-top: 0px; padding-bottom: 0px; text-transform: uppercase; font-weight: 400; }
.subTitle { color: #808080; text-align: center; padding-bottom: 80px; max-width: 800px; margin: 0 auto; }
#OVERLAY { width: 100%; height: auto; min-height: 100vh; background-color: rgba(0,0,0,0.5); position: fixed; left: 0px; top: 0px; z-index: 1000; opacity: 0; transition: opacity .5s ease-in-out; visibility: hidden; }
#OVERLAY.show { opacity: 1; transition: opacity .5s ease-in-out; visibility: visible; }
.tLeft { text-align: left; }
.tContent { padding-bottom: 40px; }
#BURGER { width: 100%; height: auto; position: fixed; z-index: 9000000; right: 360px; }
#MAIN_NAVIAGTION { width: 360px; height: auto; min-height: calc(100vh - 0px); background-color: var(--green); position: fixed; right: 0px; top: 0px; transform: translateX(100%); z-index: 2; transition: transform .5s ease-in-out; }
body.openMenu #MAIN_NAVIAGTION:before { content: ''; background-color: var(--green); height: 100vh; width: 1920px; position: fixed; z-index: -1; right: -1009px; top: 0px; transform:skew(-45deg,0deg); transition: transform .5s ease-in-out; }
body.openMenu #MAIN_NAVIAGTION { width: 340px; transition: transform .5s ease-in-out; transform: translateX(0); }
#MAIN_NAVIAGTION .headerTitle { float: left; width: 100%; font-family: 'Anton-Regular'; font-size: 1rem; font-weight: 400; color: #000000; padding-bottom: 20px; }
#MAIN_NAVIAGTION .home ul { margin-top: 100px; margin-bottom: 0px; }
#MAIN_NAVIAGTION .home ul li { color: #00A94F; }
#MAIN_NAVIAGTION ul { width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; margin-top: 0px; padding: 0px; padding-top: 0px; list-style: none; }
#MAIN_NAVIAGTION ul li { margin: 0px; padding: 8px; list-style: none; width: calc(100% - 20px); font-size: 24px; line-height: 28px; font-family: 'Anton-Regular'; color: var(--black); }
#MAIN_NAVIAGTION ul li.active a { color: var(--white); transition: color 300ms linear; }
#MAIN_NAVIAGTION ul li a:hover { color: rgba(0,0,0,0.25); transition: color 300ms linear; }
#MAIN_NAVIAGTION ul li a { text-decoration: none; color: var(--black); transition: color 300ms linear; }
#MAIN_NAVIAGTION .contactBox { display: block; width: calc(100% - 60px); height: auto; border-radius: 5px; margin-left: 20px; margin-right: 20px; margin-top: 10px; padding: 10px; position: absolute; bottom: 40px; }
#MAIN_NAVIAGTION .contactBox .title { float: left; width: 100%; font-family: 'Anton-Regular'; font-size: 1rem; font-weight: 400; color: var(--black); padding-bottom: 20px; }
#MAIN_NAVIAGTION .contactBox .left { width: 100%; height: auto; font-size: 1rem; color: var(--black); }
#MAIN_NAVIAGTION .contactBox .right { width: 100%; height: auto; font-size: 1rem; color: var(--black); padding-top: 40px; }
#MAIN_NAVIAGTION .contactBox .subTitle { font-size: 1rem; color: #808080; margin: 0px; margin-bottom: 10px; text-align: left; padding-bottom: 0px; }
#MAIN_NAVIAGTION .contactBox img { height: 36px; position: absolute; margin-top: -8px; }
#MAIN_NAVIAGTION h1 { color: var(--black); padding-top: 80px; padding-bottom: 40px; padding-left: 30px; text-align: left; }

#LAYER { display: none; float: left; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.75); z-index: 1; opacity: 0; transition: opacity 300ms linear; }
#LAYER.active { display: block; opacity: 1; transition: opacity 300ms linear; }

#SITE { width: 100%; background: var(--white); position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); }

#SITE .spaceLine { width: 100%; max-width: 1120px; margin: 0px auto; margin-top: 100px; height: 2px; border: dotted 1px rgba(0,0,0,0.15); position: relative; }

#HEADER { position: fixed; top: 0; width: 100%; margin: 0 auto; height: auto; padding-top: 10px; padding-bottom: 10px; overflow: hidden; background: var(--black); color: var(--black); text-align: center; transition: transform 0.3s ease; z-index: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
body.subpage #HEADER { z-index: 1; }
body.openMenu #HEADER { box-shadow: none; }
#HEADER:after { content: ''; background-color: var(--green); height: 120px; width: 40%; position: absolute; right: -50px; top: 0px; transform:skew(-45deg,0deg); }
body.openMenu #HEADER:after { display: none; }
#HEADER.hide { transform: translateY(-100%); }
#HEADER.schaffriert { background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 2px, transparent 2px, transparent 10px) !important; }
#HEADER .header { width: 100%; height: 100%; position: relative; }
#HEADER .left { width: 50%; height: 100%; float: left; }
#HEADER .left #LOGO { width: auto; height: 100%; border: none; }
#HEADER .left #LOGO img { float: left; margin-right: 10px; height: 80px; }
#HEADER .left #LOGO .wappenTitle { width: auto; height: auto; font-size: 12pt; line-height: 14pt; padding-top: 24px; }
#HEADER .left #LOGO .wappenSubTitle { width: auto; height: auto; font-size: 14pt; line-height: 14pt; color: var(--black); font-family: 'Anton-Regular'; }
#HEADER .right { width: 50%; height: 100%; float: right; }

#BURGER_MAIN_NAVIGATION .content { display: flex; justify-content: flex-end; }
#BURGER_MAIN_NAVIGATION .btMedia { width: 40px; height: 42px; position: fixed; z-index: 10; margin-left: -100px; top: 22px; transition: all 300ms ease; }
#BURGER_MAIN_NAVIGATION .btMedia.hide { transform: translateY(-136px); }
#BURGER_MAIN_NAVIGATION .btMedia.active { position: fixed; z-index: 9999999; margin-right: 80px; right: 0px; transition: all 300ms linear; }
#BURGER_MAIN_NAVIGATION .btMedia img { width: 40px; height: 42px; }
#BURGER_MAIN_NAVIGATION .btMatch { width: 40px; height: 42px; position: fixed; z-index: 10; margin-left: -170px; top: 22px; transition: all 300ms ease; }
#BURGER_MAIN_NAVIGATION .btMatch.hide { transform: translateY(-136px); }
#BURGER_MAIN_NAVIGATION .btMatch.active { position: fixed; z-index: 9999999; margin-right: 150px; right: 0px; transition: all 300ms linear; }
#BURGER_MAIN_NAVIGATION .btMatch img { width: 40px; height: 42px; }
#BURGER_MAIN_NAVIGATION .burger { float: right; width: 28px; height: auto; position: fixed; cursor: pointer; margin-top: 36px; z-index: 10000001; transition: all 300ms ease; }
#BURGER_MAIN_NAVIGATION .burger.hide { transform: translateY(-136px); }
#BURGER_MAIN_NAVIGATION .burger:hover .pattie { background-color: var(--black); transition: all 300ms linear; }
#BURGER_MAIN_NAVIGATION .burger.active { position: fixed; z-index: 9999999; margin-right: 20px; margin-top: 46px; right: 0px; transition: all 300ms linear; }
#BURGER_MAIN_NAVIGATION .burger .pattie { width: 100%; height: 4px; border-radius: 4px; background-color: var(--black); margin-top: 3px; margin-bottom: 3px; transition: all 300ms linear; }
#BURGER_MAIN_NAVIGATION .burger .pattie1 { width: 100%; transition: all 300ms linear; }
#BURGER_MAIN_NAVIGATION .burger .pattie2 { width: 40%; transition: all 300ms linear; }
#BURGER_MAIN_NAVIGATION .burger .pattie3 { width: 70%; transition: all 300ms linear; }
#BURGER_MAIN_NAVIGATION .burger:hover .pattie1 { width: 100%; transition: all 300ms linear; }
#BURGER_MAIN_NAVIGATION .burger:hover .pattie2 { width: 100%; transition: all 300ms linear; }
#BURGER_MAIN_NAVIGATION .burger:hover .pattie3 { width: 100%; transition: all 300ms linear; }
#BURGER_MAIN_NAVIGATION .burger.active .pattie1 { width: 100%; transition: all 300ms liner; transform: rotate(45deg); position: relative; background-color: var(--black); }
#BURGER_MAIN_NAVIGATION .burger.active .pattie2 { display: none; }
#BURGER_MAIN_NAVIGATION .burger.active .pattie3 { width: 100%; transition: all 300mslinear; transform: rotate(-45deg); position: relative; top: -7px; background-color: var(--black); }
@keyframes pulseNew { to { transform: scale(1.2); } }


#INTRO { width: 100%; height: auto; min-height: 100vh; background-image: url(../images/background/green2.jpg); background-repeat: no-repeat; background-size: cover; background-position: bottom center; overflow: hidden; position: relative; }
#INTRO .title { width: 100%; height: auto; position: absolute; bottom: 400px; z-index: 9999; font-size: 64px; line-height: 68px; color: var(--white); font-family: 'Anton-Regular'; }
#INTRO .introContainer .content { display: flex; justify-content: center; }
#INTRO h1 { text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.5); }
#INTRO h1, #INTRO h2 { width: auto; padding: 0px; margin: 0px; margin-top: 380px; text-align: center; line-height: 120px; position: relative; }
#INTRO h1:before { content: '14.06.2025'; text-shadow: none; background-color: var(--green); padding: 20px; color: var(--black); position: absolute; right: -40px; top: -50px; font-size: 36px; line-height: 36px; z-index: -1; }
#INTRO h1:after { content: 'Das besondere C-JugendTurnier in Nörtershausen'; text-shadow: none; background-color: var(--green); padding: 20px; color: var(--black); position: absolute; width: calc(100% + 40px); right: -40px; bottom: -90px; padding-top: 40px; font-size: 36px; line-height: 40px; z-index: -1; }
#INTRO .subTitle { width: 100%; height: auto; position: absolute; bottom: 400px; z-index: 9999; color: var(--white); font-family: 'Anton-Regular'; }
.introContainer { height: 100vh; display: flex; justify-content: center; align-items: center; }
.introTitle { font-size: 94px !important; color: var(--red); opacity: 0; transform: translateY(200px); animation: slideIn 1s ease-out forwards; animation-delay: 1s; font-family: 'Anton-Regular'; }
.introTitle2 { font-size: 120px !important; color: var(--white); opacity: 0; transform: translateY(200px); animation: slideIn 1s ease-out forwards; animation-delay: 1s; font-family: 'Anton-Regular'; }
@keyframes slideIn { to { opacity: 1; transform: translateY(-100px); } }

#TEAMS { display: flex; width: 100%; height: auto; }
#TEAMS h2 { float: left; width: 100%; padding-top: 80px; text-align: center; padding-bottom: 20px; }
#TEAMS .clubBoxC { width: 25%; height: auto; float: left; display: flex; justify-content: center; align-items: center; }
#TEAMS .clubBoxC img { width: auto; height: 140px; }
#TEAMS .clubBoxD { width: calc(50% - 40px); height: auto; float: left; padding-left: 20px; }
#TEAMS .clubBoxD.left { text-align: right; }
#TEAMS .clubBoxD.right { text-align: left; }
#TEAMS .clubBoxD img.left { padding-left: 20px; }
#TEAMS .clubBoxD img.right { padding-right: 20px; }
#TEAMS .clubBoxD img { width: auto; height: 140px; }
#TEAMS .clubBoxTeam { width: 100%; height: auto; float: left; display: flex; justify-content: center; align-items: center; padding-bottom: 100px; }
#TEAMS .clubBoxTeam img { width: auto; height: 400px; border-radius: 8px; }

#TEAMS .slider { position: relative; width: 100%; max-width: 600px; margin: 0 auto; overflow: hidden; border-radius: 10px; }
#TEAMS .slide { display: none; text-align: center; }
#TEAMS .slide img { width: 100%; height: auto; display: block; }
#TEAMS .caption { padding: 10px; color: var(--black); font-family: 'Anton-Regular'; font-size: 18px; }
#TEAMS .slide2 { display: none; text-align: center; }
#TEAMS .slide2 img { width: 100%; height: auto; display: block; }
#TEAMS .slider2 .caption { padding: 10px; color: var(--black); font-family: 'Anton-Regular'; font-size: 18px; }
#TEAMS .controls { width: 100%; text-align: center; z-index: 1000; }
#TEAMS .controls button { margin: 0 10px; padding: 10px 20px; font-size: 1rem; border: none; border-radius: 5px; background: var(--green); color: var(--black); cursor: pointer; transition: background 0.3s; }
#TEAMS .controls button:hover { background: var(--black); color: var(--green); }

#SIMON { display: flex; width: 100%; height: auto; overflow: hidden; background-color: var(--white); }
#SIMON.page { padding-top: 100px; }
#SIMON .boxSimonLeft { float: left; width: calc(50% - 0px); position: relative; }
#SIMON .boxSimonRight { float: left; width: calc(50% - 100px); padding-left: 100px; }
#SIMON .boxSimonRight a { color: var(--black); font-size: 14px; font-weight: 600; }
#SIMON .title { font-family: 'Anton-Regular'; font-size: 36px; line-height: 36px; padding-bottom: 40px; padding-top: 20px; color: #33342F; text-transform: uppercase; }
#SIMON p { color: var(--black); }
#SIMON .content { position: relative; }
#SIMON .box50 { position: relative; }
#SIMON .pictureBox1 img { max-width: 100%; height: auto; display: block; }
#SIMON .image-block { display: flex; flex-wrap: wrap; margin: 30px 0; align-items: flex-start; gap: 20px; overflow: hidden; position: relative; }
#SIMON .image-block img { width: 100%; max-width: 460px; border-radius: 8px; object-fit: cover; }
#SIMON .image-left img { order: 0; }
#SIMON .image-right img { order: 1; }
#SIMON .text { flex: 1; min-width: 200px; }
#SIMON .floating-img { width: 100%; max-width: 400px; margin: 20px; border-radius: 8px; float: right; }
#SIMON .floating-img-left { width: 100%; max-width: 400px; float: left; border-radius: 8px; margin-right: 20px; }
#SIMON .teaser-container { display: flex; max-width: 1200px; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); overflow: hidden; transition: box-shadow 0.3s ease; margin-bottom: 20px; }
#SIMON .teaser-container:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); }
#SIMON .teaser-image { flex: 0 0 40%; }
#SIMON .teaser-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
#SIMON .teaser-content { flex: 1; padding: 24px; display: flex; flex-direction: column; justify-content: center; }
#SIMON .teaser-content h2 { margin-top: 0; font-size: 1.5rem; color: var(--black); padding-bottom: 20px; }
#SIMON .teaser-content p { margin: 12px 0 0; font-size: 1rem; color: var(--black); font-size: 16px; line-height: 24px; }

#SPONSORING { display: flex; width: 100%; overflow: hidden; height: auto; }
#SPONSORING .container { background-image: url(../images/background/soccer-ball-1285164_1280.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; border-radius: 10px; color: var(--white); transition: all 300ms linear; }
#SPONSORING .sponsoringLeft { float: left; width: calc(50% - 80px); background-color: rgba(0,0,0,0.75); padding-left: 40px; padding-right: 40px; padding-top: 40px; padding-bottom: 40px; height: 100%; transition: all 300ms linear; }
#SPONSORING .sponsoringLeft .sponsoringBox { background-color: rgba(248,1,1,0.8); padding: 20px; }
#SPONSORING .sponsoringLeft .sponsoringBox p { font-family: 'Anton-Regular'; font-size: 18px; line-height: 24px; padding-bottom: 0px; padding-top: 20px; color: var(--white); font-weight: 400; }
#SPONSORING .sponsoringLeft .sponsoringBox .title { padding-bottom: 10px; }
#SPONSORING .sponsoringLeft .titleFooter { font-family: 'Anton-Regular'; font-size: 24px; line-height: 28px; padding-bottom: 0px; padding-top: 20px; color: var(--white); font-weight: 400; }
#SPONSORING .sponsoringRight { display: block; float: left; width: calc(50% - 80px); height: 100%; padding-left: 40px; padding-right:  40px; padding-top: 40px; padding-bottom: 40px; transition: all 300ms linear; }
#SPONSORING .sponsoringRight .counterBox { width: auto; padding: 80px; background-color: rgba(0,0,0,0.75); border-radius: 10px; color: var(--white); font-size: 96px; font-family: 'Anton-Regular'; text-align: center; }
#SPONSORING p { color: var(--white); padding-top: 20px; padding-bottom: 20px; }
#SPONSORING p.red { background-color: rgba(248,1,1,0.75); padding-left: 20px; padding-right: 20px; }
#SPONSORING img { display: flex; width: 80%; height: auto; margin: 0 auto; }
#SPONSORING .title { font-family: 'Anton-Regular'; font-size: 36px; line-height: 36px; padding-bottom: 40px; padding-top: 20px; color: var(--white); text-transform: uppercase; }
#SPONSORING img.giroCode { float: right; margin: 0 0 20px 20px; max-width: 160px; }
#SPONSORING .paypal { width: auto; }
#SPONSORING .paypal .btPaypal { width: 320px; height: 84px; border-radius: 42px; background-color: #FFD140; position: relative; margin: 0 auto; cursor: pointer; }
#SPONSORING .paypal .btPaypal .title { width: 100%; text-align: center; color: #003087; font-size: 18px; line-height: 18px; text-transform: none; padding: 0px; position: absolute; bottom: 10px; }
#SPONSORING .paypal .btPaypal img { width: 150px; height: 38px; padding-top: 10px; }

#SPONSORS #SPONSOR_WALL { width: calc(100% - 80px); height: auto; position: relative; padding-top: 0px; padding-left: 40px; padding-right: 40px; border-radius: 10px; /*background-image: url(../images/background/green2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center -650px;*/ }
#SPONSORS #SPONSOR_WALL .title { font-size: 48px; line-height: 64px; color: #33342F; text-align: center; position: absolute; width: calc(100% - 80px); text-align: center; margin-top: -250px; margin-bottom: 40px; padding: 40px; padding-left: 0px; padding-right: 0px; font-family: 'Anton-Regular'; font-weight: 900; text-transform: uppercase; }
#SPONSORS #SPONSOR_WALL .title span { font-size: 64px; }
#SPONSORS #SPONSOR_WALL .sponsorWall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; margin: auto; }
#SPONSORS #SPONSOR_WALL .sponsorWall .picture { height: 90px; text-align: center; transition: transform 0.3s ease; background-repeat: no-repeat; padding: 20px; transition: scale 300ms linear; }
#SPONSORS #SPONSOR_WALL .sponsorWall .picture img { width: auto; height: 90px; }
#SPONSORS #SPONSOR_WALL .sponsorWall .picture.vr img { height: auto; width: 200px; }
#SPONSORS #SPONSOR_WALL .sponsorWall .picture.vr2 img { height: auto; width: 260px; }
#SPONSORS a { text-decoration: none; color: inherit; display: block; }
#SPONSORS #SPONSOR_WALL .sponsorWall .picture:hover { scale: 1.15; transition: scale 300ms linear; } 

.picEffect { position: relative; overflow: hidden; cursor: pointer; transition: scale 300ms linear; cursor: default; }
.scaleEffect:hover { scale: 1.15; transition: scale 300ms linear; } 
.shineEffect { position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.6) 50%,rgba(255, 255, 255, 0) 100%); transform: skewX(-25deg); }
.picEffect:hover .shineEffect { animation: shine 1s ease-in-out; }
@keyframes shine { 0% { left: -75%; } 100% { left: 125%; } }

#VIP { display: flex; justify-content: center; width: 100%; height: auto; min-height: 1080px; padding-bottom: 40px; background-image: url(../images/background/prominente.jpg); background-position: center top; background-repeat: no-repeat; background-size: cover; margin-top: 140px; }
#VIP .content { width: auto; z-index: 0; }
#VIP h1 { position: relative; top: -140px; }
#VIP .carousel-wrapper { position: relative; width: 100%; max-width: 600px; aspect-ratio: 2 / 1; perspective: 1000px; }
#VIP .carousel { position: relative; width: 100%; height: 100%; }
#VIP .carousel-item { position: absolute; width: 60%; height: auto; top: -40%; left: 20%; overflow: hidden; background: #000000; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); transition: transform 0.5s, z-index 0.5s, opacity 0.5s; display: flex; align-items: center; font-size: 2rem; text-align: center; padding: 10px; padding-bottom: 80px; }
#VIP .carousel-item .vidTitle { position: absolute; bottom: 20px; height: 80px; color: #ffffff; font-family: 'Anton-Regular'; font-size: 36px; line-height: 60px; text-transform: uppercase; width: calc(100% - 20px); text-align: center; }
#VIP .carousel-item .vidTitle:before { content: ''; width: 60px; height: 60px; position: absolute; bottom: -30px; left: calc(50% - 30px); background-image: url(../images/logo/logo_kickitlikesimon.png); background-repeat: no-repeat; }
#VIP .carousel_2 { transform: translateX(50%) scale(0.8); z-index: 1; opacity: 0.5; }
#VIP .carousel_3 { transform: translateX(100%) scale(0.8); z-index: 1; opacity: 0.5; }
#VIP .carousel_1 { transform: translateX(0) scale(1); z-index: 3; opacity: 1; }
#VIP .carousel_4 { transform: translateX(0) scale(0.8); z-index: 1; opacity: 0.5; }
#VIP .carousel_5 { transform: translateX(0) scale(0.8); z-index: 1; opacity: 0.5; }
#VIP .carousel_6 { transform: translateX(-50%) scale(0.8); z-index: 1; opacity: 0.5; }
#VIP .carousel_7 { transform: translateX(-100%) scale(0.8); z-index: 1; opacity: 0.5; }

#VIP .carouselLeftVid28 { transform: translateX(0) scale(0.8); z-index: 1; opacity: 0.5; }
#VIP .carouselCenterVid28 { transform: translateX(-100%) scale(0.8); z-index: 1; opacity: 0.5; }
#VIP .carouselRightVid28 { transform: translateX(0) scale(1); z-index: 3; opacity: 1; }
#VIP .carouselRight_2Vid28 { transform: translateX(100%) scale(0.8); z-index: 1; opacity: 0.5; }

#VIP .buttons { position: relative; margin-top: 320px; width: 100%; text-align: center; z-index: 1000; }
#VIP button { margin: 0 10px; padding: 10px 20px; font-size: 1rem; border: none; border-radius: 5px; background: var(--green); color: var(--black); cursor: pointer; transition: background 0.3s; }
#VIP button:hover { background: var(--black); color: var(--green); }
#VIP video {  }
#VIP .vidTitle { font-family: 'Anton-Regular'; font-size: 24px; color: var(--white); text-align: center; width: calc(100% - 20px); position: absolute; bottom: 20px; height: 80px; }
#VIP .vidTitle:before { content: ''; width: 60px; height: 60px; background-image: url(../images/logo/logo_kickitlikesimon.png); background-size: 100%; background-repeat: no-repeat; position: absolute; bottom: -20px; left: calc(50% - 30px); }
#VIP_END { position: relative; z-index: 1; margin-top: -240px; width: 100%; height: 247px; background-image: url(../images/background/bg_prominente_bottom.png); background-position: center top; background-repeat: repeat-x; background-size: cover; }
#VIP #videoContainer#videoContainer	{ position: relative; width: 100%; height: auto; }
#VIP #videoContainer .vidTitle { bottom: -60px; }

#PROGRAMME { display: flex; width: 100%; height: auto; background-image: url(../images/background/programm.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; margin-top: 140px; }
#PROGRAMME .content { transition: all 300ms linear; }
#PROGRAMME .programmeBox { width: 100%; height: 100%; min-height: 900px; overflow: hidden; }
#PROGRAMME .programmeBox .programmeBoxLeft { float: left; width: 40%; height: 100%; position: relative; transition: all 300ms linear; }
#PROGRAMME .programmeBox .programmeBoxLeft:before { content: 'PROGRAMM'; font-family: 'Anton-Regular'; position: absolute; right: -100px; top: 45%; transform: rotate(-90deg); color: var(--white); font-size: 64px; }
#PROGRAMME .programmeBox .programmeBoxRight { float: left; width: calc(60% - 0px); height: 100%; transition: all 300ms linear; }
#PROGRAMME .programmeBox .programmeBoxRight .programmeHeader { float: left; width: calc(100% - 80px); padding: 40px; font-family: 'Anton-Regular'; background-color: rgba(255,255,255,0.75); text-transform: uppercase; font-size: 36px; line-height: 40px; color: var(--black); }
#PROGRAMME .programmeBox .programmeBoxRight .programmeContent { float: left; width: 100%; height: calc(100% - 40px); background-color: rgba(255,255,255,0.75); padding-top: 40px; }
#PROGRAMME .programmeBox .programmeBoxRight .programmeContent .programmeEntry { display: flex; width: calc(100% - 80px); height: auto; padding-left: 40px; padding-right: 40px; padding-bottom: 40px; }
#PROGRAMME .programmeBox .programmeBoxRight .programmeContent .programmeEntry .programmePicture { float: left; width: 120px; height: auto; transition: all 300ms linear; }
#PROGRAMME .programmeBox .programmeBoxRight .programmeContent .programmeEntry .programmePicture img { float: left; width: 120px; height: 120px; transition: all 300ms linear; }
#PROGRAMME .programmeBox .programmeBoxRight .programmeContent .programmeEntry .programmeEntryBox { float: left; width: 100%; height: auto; position: relative; }
#PROGRAMME .programmeBox .programmeBoxRight .programmeContent .programmeEntry .programmeEntryBox .programmeDescription { float: left; width: 100%; min-height: 90px; font-family: 'Anton-Regular'; font-size: 24px; line-height: 28px; text-transform: uppercase; padding-left: 20px; height: auto; transition: all 300ms linear; color: var(--black); }
#PROGRAMME .programmeBox .programmeBoxRight .programmeContent .programmeEntry .programmeEntryBox .programmeTime { float: right; width: 100px; height: auto; background-color: var(--green); color: var(--black); font-family: 'Anton-Regular'; font-size: 18px; border-radius: 50px; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; text-align: center; }

#PROGRAMM .programmHeader { width: 100%; height: auto; background-color: rgba(202,29,32,0.75); padding: 10px; }
#PROGRAMM .title { font-family: 'Anton-Regular'; font-size: 36px; line-height: 36px; padding-bottom: 40px; padding-top: 20px; color: #33342F; }
#PROGRAMM .headline { min-height: 600px; position: relative; }
#PROGRAMM .programmHeadline {  position: absolute; top: 10%; left: 40%; width: 100%; font-family: 'Anton-Regular'; transform: rotate(-90deg) translate(-50%, -50%); transform-origin: center; font-size: 64px; color: var(--white); white-space: nowrap; }
#PROGRAMM .bgProgramm { float: left; width: calc(100% - 80px); padding-left: 40px; padding-right: 40px; padding-bottom: 40px; }
#PROGRAMM .bgProgramm .programmPicture { float: left; width: 120px; }
#PROGRAMM .bgProgramm .programmPicture img { width: 120px; height: 120px; border-radius: 0px; }
#PROGRAMM .bgProgramm .programmTitle { float: left; width: calc(100% - 300px); }
#PROGRAMM .bgProgramm .programmTime { float: left; width: 180px; }

#PRICE { display: flex; justify-content: center; width: 100%; height: 100%; max-height: 900px; margin-top: -246px; background-image: url(../images/background/price.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; position: relative; }
#PRICE .contentPrice { width: auto; z-index: 0; }
#PRICE h1 { color: var(--black); margin: 0px; padding: 0px; position: relative; margin-top: 0px; }
#PRICE .stage { position: relative; z-index: 0; width: 100%; height: auto; min-height: 1080px; overflow: hidden; }
#PRICE .curtain { position: absolute; top: 0; width: 50%; height: 100%; background: white; z-index: 2; display: none; }
#PRICE .curtain.left { left: 0; }
#PRICE .curtain.right { right: 0; }
#PRICE .curtain.active { animation-fill-mode: forwards; animation-duration: 2s; animation-timing-function: ease-in-out; }
#PRICE .curtain.active.left { left: 0; animation-name: openCurtainLeft; }
#PRICE .curtain.active.right { right: 0; animation-name: openCurtainRight; }
#PRICE .contentPrice { opacity: 0; animation: fadeIn 1s ease-out 2s forwards; }
@keyframes openCurtainLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@keyframes openCurtainRight { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } }
@keyframes closeCurtainLeft { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }
@keyframes closeCurtainRight { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } }
@keyframes fadeIn { to { opacity: 1; } }
#PRICE .carousel-wrapper2 { position: absolute; bottom: 0px; width: 100%; /*max-width: 600px;*/ aspect-ratio: 2 / 1; perspective: 1000px; }
#PRICE .carousel2 { position: relative; width: 100%; height: 100%; }
#PRICE .carousel-item2 { position: absolute; width: 420px; height: 360px; bottom: 360px; left: calc(50% - 210px); overflow: hidden; transition: transform 0.5s, z-index 0.5s, opacity 0.5s; display: flex; align-items: center; font-size: 2rem; text-align: center; padding: 10px; padding-bottom: 80px; }
#PRICE .carousel-item2 img { width: 100%; height: auto; }
#PRICE .carousel-item2 .vidTitle { position: absolute; bottom: 20px; height: 80px; color: #ffffff; font-family: 'Anton-Regular'; font-size: 36px; line-height: 60px; text-transform: uppercase; width: calc(100% - 20px); text-align: center; }
#PRICE .carouselLeft2 { transform: translateX(-20%) scale(0.4); z-index: 1; opacity: 0.15; }
#PRICE .carouselLeft3 { transform: translateX(-30%) scale(0.4); z-index: 1; opacity: 0.15; }
#PRICE .carouselLeft4 { transform: translateX(-40%) scale(0.4); z-index: 1; opacity: 0.15; }
#PRICE .carouselLeft5 { transform: translateX(-50%) scale(0.4); z-index: 1; opacity: 0.15; }
#PRICE .carouselLeft6 { transform: translateX(-60%) scale(0.4); z-index: 1; opacity: 0.15; }
#PRICE .carouselLeft7 { transform: translateX(-70%) scale(0.4); z-index: 1; opacity: 0.15; }
#PRICE .carouselCenter2 { transform: translateX(0) scale(1); z-index: 3; opacity: 1; }
#PRICE .carouselRight2 { transform: translateX(20%) scale(0.4); z-index: 1; opacity: 0.15; }
#PRICE .carouselRight3 { transform: translateX(30%) scale(0.4); z-index: 1; opacity: 0.15; }
#PRICE .carouselRight4 { transform: translateX(40%) scale(0.4); z-index: 1; opacity: 0.15; }
#PRICE .carouselRight5 { transform: translateX(50%) scale(0.4); z-index: 1; opacity: 0.15; }
#PRICE .carouselRight6 { transform: translateX(60%) scale(0.4); z-index: 1; opacity: 0.15; }
#PRICE .carouselRight7 { transform: translateX(70%) scale(0.4); z-index: 1; opacity: 0.15; }
#PRICE .carouselRight8 { transform: translateX(80%) scale(0.4); z-index: 1; opacity: 0.15; }
#PRICE .buttons2 { position: absolute; bottom: 160px; width: 100%; text-align: center; z-index: 1000; }
#PRICE button { margin: 0 10px; padding: 10px 20px; font-size: 1rem; border: none; border-radius: 5px; background: var(--green); color: var(--black); cursor: pointer; transition: background 0.3s; }
#PRICE button:hover { background: var(--black); color: var(--green); }
#PRICE video {  }
#PRICE .vidTitle2 { font-family: 'Anton-Regular'; font-size: 24px; color: var(--white); text-align: center; width: calc(100% - 20px); position: absolute; bottom: 20px; height: 80px; }
#PRICE .vidTitle2:before { content: ''; width: 60px; height: 60px; background-image: url(../images/logo/logo_kickitlikesimon.png); background-size: 100%; background-repeat: no-repeat; position: absolute; bottom: -20px; left: calc(50% - 30px); }
#PRICE_TOP { position: relative; z-index: 1; width: 100%; height: 247px; padding-top: 40px; margin-top: 140px; background-image: url(../images/background/bg_price_top.png); background-position: center bottom; background-repeat: repeat-x; background-size: cover; }
#PRICE_TOP h1 { padding: 0; }

#SOCIALMEDIA { padding-top: 140px; }

#START { width: 100%; }
#COUNTDOWN { display: flex; width: 100%; height: auto; overflow: hidden; margin-top: 0px; }
#COUNTDOWN h1 { color: var(--white); margin: 0px; padding: 0px; font-size: 36px; font-weight: 400; font-family: 'Anton-Regular'; padding: 10px; }
#COUNTDOWN h2 { color: var(--white); margin: 0px; padding: 0px; font-size: 24px; font-weight: 400; font-family: 'Anton-Regular'; padding: 10px; text-align: center; }
#COUNTDOWN .content { background-color: var(--black); }
#COUNTDOWN .content.end { background-color: transparent; }
#COUNTDOWN .highlights { color: var(--white); padding-top: 40px; padding-bottom: 20px; }
#COUNTDOWN .highlights .prices { float: left; width: 100%; height: auto; }
#COUNTDOWN .highlights .prices img { width: auto; height: 120px; margin: 0 auto; }
#COUNTDOWN .countdownContainer .flip-clock { display: flex; justify-content: center; gap: 20px; font-size: 2em; }
#COUNTDOWN .countdownContainer .unit { display: flex; flex-direction: column; align-items: center; }
#COUNTDOWN .countdownContainer .flip { background-image: url(../images/background/bg_countdown.svg); background-repeat: no-repeat; background-size: cover; color: #33342F; width: 200px; height: 275px; text-align: center; position: relative; transition: all 0.3s ease-in-out; display: flex; justify-content: center; align-items: center; }
#COUNTDOWN .countdownContainer .flip .number { font-size: 3em; font-family: 'Anton-Regular'; font-weight: 900; color: var(--black); }
#COUNTDOWN .countdownContainer .scaleTextY { transform: scaleY(1.4); transform-origin: top; }
#COUNTDOWN .countdownContainer .flip.change { animation: flip 0.6s ease-in-out; }
@keyframes flip { 0% { transform: rotateX(0deg); } 50% { transform: rotateX(-90deg); } 100% { transform: rotateX(-180deg); } }
#COUNTDOWN .countdownContainer .unit span { margin-top: 10px; font-size: 24px; color: var(--white); font-family: 'Anton-Regular'; }
#message { margin-top: 40px; font-size: 1.5em; color: #ff5555; }
.schaffriert { background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1) 2px, transparent 2px, transparent 10px) !important; }
.pictureSmall { width: 25%; height: auto; float: left; padding-bottom: 20px; border-radius: 20px; }
#COUNTDOWN .btPrice { background-color: var(--green); padding-left: 20px; padding-right: 20px; height: 48px; border-radius: 24px; margin-top: 20px; cursor: pointer; line-height: 48px; font-family: 'Anton-Regular'; font-size: 18px; color: var(--black); width: auto; display: inline-flex; }

#COUNTDOWN .videoContainerCountdown { position: relative; z-index: 1; width: 100%; height: 600px; overflow: hidden; }
#COUNTDOWN .videoContainerCountdown video { position: absolute; top: 0%; left: 0%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 1; object-fit: cover; }
#COUNTDOWN .videoContainerCountdownContent { position: relative; z-index: 2; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
#COUNTDOWN .videoContainerCountdownContentText1 { position: absolute; width: 100%; text-align: center; color: var(--white); font-family: 'Anton-Regular'; font-size: 48px; padding-top: 40px; top: -160px; }
#COUNTDOWN .videoContainerCountdownContentText1 img { width: 60px; height: auto; }
#COUNTDOWN .videoContainerCountdownContentText2 { position: absolute; width: 100%; text-align: center; color: var(--white); font-family: 'Anton-Regular'; font-size: 24px; padding-top: 20px; top: -200px; }
#COUNTDOWN .videoContainerCountdownContentText3 { position: absolute; width: 100%; text-align: center; padding-top: 40px; top: -300px; }
#COUNTDOWN .videoContainerCountdownContentText3 img { width: 50%; height: auto; }
#COUNTDOWN .videoContainerCountdownContentText4 { position: absolute; width: calc(100% - 40px); padding: 20px; text-align: center; color: var(--black); font-family: 'Anton-Regular'; font-size: 24px; background-color: var(--green); bottom: -80px; }

#COUNTDOWN .videoContainerCountdownContentText1 { animation: aniCountSlideIn 300ms linear 1000ms forwards; }
#COUNTDOWN .videoContainerCountdownContentText2 { animation: aniCountSlideIn2 200ms linear 1200ms forwards; }
#COUNTDOWN .videoContainerCountdownContentText3 { animation: aniCountSlideIn3 300ms linear 1300ms forwards; }
#COUNTDOWN .videoContainerCountdownContentText4 { animation: aniCountSlideIn4 200ms linear 1500ms forwards; }


@keyframes aniCountSlideIn { from { top: -100px; } to { top: 0px; } }
@keyframes aniCountSlideIn2 { from { top: -200px; } to { top: 120px; } }
@keyframes aniCountSlideIn3 { from { top: -300px; } to { top: 180px; } }
@keyframes aniCountSlideIn4 { from { bottom: -80px; } to { bottom: 0px; } }


#IMPRESSIONS { display: flex; width: 100%; height: auto; }
#IMPRESSIONS h2 { float: left; width: 100%; padding-top: 80px; text-align: center; padding-bottom: 20px; }
#IMPRESSIONS .slider { position: relative; width: 100%; max-width: 600px; margin: 0 auto; overflow: hidden; border-radius: 10px; }
#IMPRESSIONS .slide { display: none; text-align: center; }
#IMPRESSIONS .slide img { width: 100%; height: auto; display: block; }
#IMPRESSIONS .caption { padding: 10px; color: var(--black); font-family: 'Anton-Regular'; font-size: 18px; }
#IMPRESSIONS .slide3 { display: none; text-align: center; }
#IMPRESSIONS .slide3 img { width: 100%; height: auto; display: block; }
#IMPRESSIONS .slider3 .caption { padding: 10px; color: var(--black); font-family: 'Anton-Regular'; font-size: 18px; }


#IMPRESSIONS .controls { width: 100%; text-align: center; z-index: 1000; }
#IMPRESSIONS .controls button { margin: 0 10px; padding: 10px 20px; font-size: 1rem; border: none; border-radius: 5px; background: var(--green); color: var(--black); cursor: pointer; transition: background 0.3s; }
#IMPRESSIONS .controls button:hover { background: var(--black); color: var(--green); }


#SOCIALMEDIA img { width: 96px; height: 96px; display: block; margin-left: auto; margin-right: auto; }

#FOOTER { width: 100%; height: auto; background-color: var(--white); display: flex; padding-top: 120px; padding-bottom: 60px; }
#FOOTER #SOCIALMEDIA { width: auto; height: auto; }
#FOOTER .organiser { position: absolute; right: 0px; width: auto; height: 180px; }
#FOOTER .content { font-size: 14px; color: var(--black); line-height: 24px; }
#FOOTER .title { float: left; width: 100%; font-family: 'Anton-Regular'; font-size: 18px; text-transform: uppercase; font-weight: 400; color: var(--black); padding-bottom: 20px; }
#FOOTER ul { margin: 0px; padding: 0px; width: 100%; height: auto; display: block; }
#FOOTER ul li { float: left; width: 100%; height: 24px; list-style: none; font-size: 14px; }
#FOOTER ul li a { text-decoration: none; color: var(--black); transition: color 300ms linear; }
#FOOTER ul li a:hover { text-decoration: none; color: var(--darkGreen); transition: color 300ms linear; }

#IMPRINT { display: flex; width: 100%; height: auto; background-color: var(--white); margin-top: 0px; }
#IMPRINT.page { padding-top: 100px; }
#IMPRINT a { color: var(--red); }
#IMPRINT a:hover { color: var(--darkGreen); }

#TERMS { display: flex; width: 100%; height: auto; padding-top: 40px; padding-bottom: 40px; background-color: var(--white); }
#TERMS .content { font-size: 14px; padding-top: 20px; color: var(--black); }
#TERMS .termsLeft { float: left; width: 50%; }
#TERMS .termsRight { float: right; width: 50%; text-align: right; }
#TERMS a { text-decoration: none; color: var(--black); transition: color 300ms linear; }
#TERMS a:hover { text-decoration: none; color: var(--darkGreen); transition: color 300ms linear; }

/* START PAGENAV */
#PAGENAV { position: fixed; margin-left: 80px; top: calc(50% - 220px); width: 48px; height: 100vh; z-index: 2; }
#PAGENAV .pagenavbullet { opacity: 0; width: 24px; height: 24px; border-radius: 12px; border: solid 1px var(--green); background-color: var(--green); margin-bottom: 10px; position: relative; overflow: hidden; transition: height 0.5s ease; }
#PAGENAV .pagenavbullet span { display: none; font-family: 'Anton-Regular'; font-size: 14px; }
#PAGENAV .pagenavbullet:nth-child(1) { animation: showBullet 900ms linear 1000ms forwards; }
#PAGENAV .pagenavbullet:nth-child(2) { animation: showBullet 900ms linear 1500ms forwards; }
#PAGENAV .pagenavbullet:nth-child(3) { animation: showBullet 900ms linear 2000ms forwards; }
#PAGENAV .pagenavbullet:nth-child(4) { animation: showBullet 900ms linear 2500ms forwards; }
#PAGENAV .pagenavbullet:nth-child(5) { animation: showBullet 900ms linear 3000ms forwards; }
#PAGENAV .pagenavbullet:nth-child(6) { animation: showBullet 900ms linear 3500ms forwards; }
#PAGENAV .pagenavbullet:nth-child(7) { animation: showBullet 900ms linear 4000ms forwards; }
#PAGENAV .pagenavbullet:nth-child(8) { animation: showBullet 900ms linear 4500ms forwards; }
#PAGENAV .pagenavbullet:nth-child(9) { animation: showBullet 900ms linear 5000ms forwards; }
#PAGENAV .pagenavbullet:nth-child(1).active { width: 24px; height: 100px; border-radius: 50px; background-color: var(--green); border: solid 1px var(--green); color: var(--black); padding-top: 20px; }
#PAGENAV .pagenavbullet:nth-child(2).active { width: 24px; height: 60px; border-radius: 50px; background-color: var(--green); border: solid 1px var(--green); color: var(--black); padding-top: 20px; }
#PAGENAV .pagenavbullet:nth-child(3).active { width: 24px; height: 60px; border-radius: 50px; background-color: var(--green); border: solid 1px var(--green); color: var(--black); padding-top: 20px; }
#PAGENAV .pagenavbullet:nth-child(4).active { width: 24px; height: 135px; border-radius: 50px; background-color: var(--green); border: solid 1px var(--green); color: var(--black); }
#PAGENAV .pagenavbullet:nth-child(5).active { width: 24px; height: 180px; border-radius: 50px; background-color: var(--green); border: solid 1px var(--green); color: var(--black); }
#PAGENAV .pagenavbullet:nth-child(6).active { width: 24px; height: 105px; border-radius: 50px; background-color: var(--green); border: solid 1px var(--green); color: var(--black); }
#PAGENAV .pagenavbullet:nth-child(7).active { width: 24px; height: 105px; border-radius: 50px; background-color: var(--green); border: solid 1px var(--green); color: var(--black); }
#PAGENAV .pagenavbullet:nth-child(8).active { width: 24px; height: 105px; border-radius: 50px; background-color: var(--green); border: solid 1px var(--green); color: var(--black); }
#PAGENAV .pagenavbullet:nth-child(9).active { width: 24px; height: 125px; border-radius: 50px; background-color: var(--green); border: solid 1px var(--green); color: var(--black); }
#PAGENAV .pagenavbullet.active span { display: block; transform: rotate(-90deg); white-space: nowrap; position: absolute; bottom: 20px; width: 100%; text-align: center; color: var(--black); font-family: 'Anton-Regular'; font-size: 16px; font-weight: 400; }
@keyframes showBullet { from { opacity: 0; } to { opacity: 1; } }

body.subpage #PAGENAV { top: calc(50% - 60px); }
body.subpage #PAGENAV .pagenavbullet.simon.active { width: 24px; height: 60px; border-radius: 50px; background-color: var(--green); border: solid 1px var(--green); color: var(--black); padding-top: 20px; }


#LOADING_SPINNER { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--white); display: flex; justify-content: center; align-items: center; z-index: 999999999; }
.spinner { border: 8px solid var(--black); border-top: 8px solid var(--green); border-radius: 50%; width: 90px; height: 90px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


@media screen and (max-width: 1366px) {
	#PAGENAV { margin-left: 10px; }
	#BURGER { right: 74px; }
	.content { width: calc(100% - 100px); max-width: 1120px; margin: 0 auto; padding-left: 50px; padding-right: 50px; }
}
@media screen and (max-width: 1024px) {
	.box25 { float: left; width: 50%; }
	#TEAMS .clubBoxC { width: 50%; margin-bottom: 40px; }
	#TEAMS .clubBoxC img { width: auto; height: 120px; }
	#SPONSORING .content { padding: 0px; width: 100%; transition: all 300ms linear; }
	#SPONSORING .sponsoringLeft { width: 100%; height: auto; transition: all 300ms linear; }
	#SPONSORING .sponsoringRight { width: calc(100% - 80px); height: auto; padding-left: 40px; padding-right: 40px; transition: all 300ms linear; }
	#SPONSORS #SPONSOR_WALL .sponsorWall { grid-template-columns: repeat(1, 1fr); gap: 20px; }
	#PROGRAMME .content { padding: 0px; width: 100%; transition: all 300ms linear; }
	#PROGRAMME .programmeBox .programmeBoxLeft { width: 20%; transition: all 300ms linear; }
	#PROGRAMME .programmeBox .programmeBoxRight { width: calc(80% - 0px); transition: all 300ms linear; }
	#PROGRAMME .programmeBox .programmeBoxRight .programmeContent .programmeEntry { width: calc(100% - 60px); padding-left: 40px; padding-right: 20px; padding-bottom: 20px; transition: all 300ms linear; }
	#PROGRAMME .programmeBox .programmeBoxRight .programmeContent .programmeEntry .programmePicture { width: 60px; transition: all 300ms linear; }
	#PROGRAMME .programmeBox .programmeBoxRight .programmeContent .programmeEntry .programmePicture img { width: 60px; height: 60px; transition: all 300ms linear; }
	#PROGRAMME .programmeBox .programmeBoxRight .programmeContent .programmeEntry .programmeEntryBox .programmeDescription { width: calc(100% - 60px); transition: all 300ms linear; }
	.organiser { display: none; }
	#COUNTDOWN .content { width: 100%; padding-left: 0px; padding-right: 0px; }
	#COUNTDOWN .countdownContainer .flip .number { font-size: 5rem; margin-top: 0px; }
	#COUNTDOWN .countdownContainer .flip { width: 160px; height: 200px; font-size: 48px; background-size: 100%; }
	#COUNTDOWN .countdownContainer .unit span { font-size: 1.25rem; margin-top: 10px; }
	#VIP .left { transform: translateX(-100%) scale(0.8); z-index: 1; opacity: 0.5; }
	#VIP .center { transform: translateX(0%) scale(1); z-index: 3; opacity: 1; }
	#VIP .right { transform: translateX(100%) scale(0.8); z-index: 1; opacity: 0.5; }
	#VIP .buttons {  }
	#VIP .carousel-item .vidTitle { font-size: 24px; }
	#PRICE { max-height: 700px; }
	#PRICE .carousel-item2 { width: 350px; height: 300px; left: calc(50% - 175px); bottom: 505px; }
	#PRICE .carouselLeft2 { transform: translateX(-15%) scale(0.5); z-index: 1; opacity: 0.15; }
	#PRICE .carouselLeft3 { transform: translateX(-30%) scale(0.5); z-index: 1; opacity: 0.15; }
	#PRICE .carouselLeft4 { transform: translateX(-45%) scale(0.5); z-index: 1; opacity: 0.15; }
	#PRICE .carouselCenter2 { transform: translateX(0) scale(1); z-index: 3; opacity: 1; }
	#PRICE .carouselRight2 { transform: translateX(15%) scale(0.5); z-index: 1; opacity: 0.15; }
	#PRICE .carouselRight3 { transform: translateX(30%) scale(0.5); z-index: 1; opacity: 0.15; }
	#PRICE .carouselRight4 { transform: translateX(45%) scale(0.5); z-index: 1; opacity: 0.15; }
	#PRICE .curtain.active { animation-duration: 1s; }
	#PRICE .buttons2 { bottom: 380px; }
	#SPONSORS #SPONSOR_WALL .sponsorWall .picture.vr2 img { height: auto; width: 240px; }
	
	#COUNTDOWN .videoContainerCountdownContentText3 { padding-top: 20px; }
	#COUNTDOWN .videoContainerCountdownContentText3 img { width: 80%; }
	#COUNTDOWN .videoContainerCountdownContentText4 { width: calc(100% - 80px); padding: 10px; padding-left: 40px; padding-right: 40px; text-align: center; color: var(--black); font-family: 'Anton-Regular'; font-size: 24px; line-height: 28px; background-color: var(--green); position: absolute; bottom: 0; }
	#COUNTDOWN .videoContainerCountdownContentText2 { text-align: center; width: calc(100% - 80px); padding-left: 40px; padding-right: 40px; font-family: 'Anton-Regular'; font-size: 24px; line-height: 28px; color: var(--white); position: absolute; }
	#COUNTDOWN .videoContainerCountdownContentText1 { font-size: 36px; line-height: 40px; width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; }
	
	@keyframes aniCountSlideIn { from { top: -160px; } to { top: 0px; } }
	@keyframes aniCountSlideIn2 { from { top: -200px; } to { top: 140px; } }
	@keyframes aniCountSlideIn3 { from { top: -300px; } to { top: 220px; } }
	@keyframes aniCountSlideIn4 { from { bottom: -80px; } to { bottom: 0px; } }
}
@media screen and (max-width: 690px) {
	h1 { font-size: 42px; line-height: 58px; }
	#BURGER { right: 0px; }
	#BURGER .burger { right: 20px; }
	#BURGER .burger.active { right: 20px; }
	.content { width: calc(100% - 40px); max-width: 1120px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
	body.subpage .content { width: calc(100% - 60px); max-width: 1120px; margin: 0 auto; padding-left: 40px; padding-right: 20px; }
	#FOOTER { width: calc(100% - 40px); padding-left: 20px; padding-right: 20px; }
	#FOOTER .organiser { display: none; }
	.col { flex: 1 1 100%; }
	#COUNTDOWN .countdownContainer .flip { width: 80px; height: 120px; font-size: 48px; background-size: 100%; }
	#COUNTDOWN .countdownContainer .unit span { font-size: 1.25rem; margin-top: -10px; }
	.col2 { flex: 1 1 calc(100% - 20px); box-sizing: border-box; }
	#PAGENAV { margin-left: 10px; }
	#INTRO h1, #INTRO h2 { font-size: 64px !important; line-height: 68px !important; }
	#INTRO h1:before { font-size: 24px; padding: 10px; right: -10px; top: -40px; }
	#INTRO h1:after { width: 70%; right: 40px; padding: 10px; bottom: -50px; padding-top: 40px; font-size: 18px; line-height: 22px; font-weight: 400; }
	#COUNTDOWN .countdownContainer .flip-clock { gap: 0; }
	#COUNTDOWN .countdownContainer .flip .number { font-size: 3rem; margin-top: -20px; }
	#COUNTDOWN .highlights { font-size: 14px; line-height: 18px; padding: 40px; padding-top: 60px; }
	#TEAMS .clubBoxC { width: 50%; }
	#SIMON .boxSimonLeft { float: left; width: 100%; height: auto; }
	#SIMON .boxSimonRight { float: left; width: 100%; padding-left: 0px; height: auto; }
	#SPONSORS #SPONSOR_WALL .sponsorWall .picture { background-size: 180px auto; height: 100px; }
	#SPONSORS #SPONSOR_WALL .sponsorWall .picture img { height: 80px; }
	#PROGRAMME .programmeBox .programmeBoxLeft { display: none; }
	#PROGRAMME .programmeBox .programmeBoxRight { width: 100%; }
	#PROGRAMME .programmeBox .programmeBoxRight .programmeContent:before { content: 'Programm'; float: left; width: 100%; padding: 40px; font-family: 'Anton-Regular'; text-transform: uppercase; font-size: 36px; line-height: 40px; color: var(--black); } 
	#PROGRAMME .programmeBox .programmeBoxRight .programmeHeader { font-size: 48px; line-height: 64px; color: var(--black); text-align: center; padding-left: 40px; padding-right: 40px; padding-top: 80px; padding-bottom: 80px; margin: 0px; font-family: 'Anton-Regular'; font-weight: 900; text-transform: uppercase; }
	#PROGRAMME .programmeBox .programmeBoxRight .programmeContent .programmeEntry .programmeEntryBox .programmeDescription { font-size: 18px; line-height: 22px; padding-bottom: 20px; }
	#SPONSORING .sponsoringLeft { width: 100%; }
	#SPONSORING .sponsoringRight { display: none; }
	#SIMON .floating-img, #SIMON .floating-img-left { float: none; display: block; margin: 20px auto; width: 100%; }
	#SIMON .teaser-container { flex-direction: column; }
    #SIMON .teaser-image { flex: 0 0 auto; }
    #SIMON .teaser-image img { height: auto; }
	.box25 { float: left; width: 100%; padding-bottom: 40px; }
	.box25:nth-child(2), .box25:nth-child(3) { padding-bottom: 0px; }
	#TEAMS .clubBoxTeam img { width: auto; height: 200px; border-radius: 8px; }
	#HEADER:after { width: 70%; }
	body.subpage h1 { font-size: 34px; font-weight: 400; text-align: left; padding-left: 0px; }
	body.subpage p { padding-bottom: 40px; }
	body.subpage #FOOTER { width: calc(100% - 0px); padding-left: 0px; padding-right: 0px; }
	#COUNTDOWN .videoContainerCountdown { height: 520px; }
}
@media (min-height: 800px) {
	#COUNTDOWN { margin-top: -290px; }
	#INTRO h1, #INTRO h2 { margin-top: 0px; }
	#MAIN_NAVIAGTION h1 { padding-top: 120px; padding-bottom: 20px; }
}