/*
Theme Name:         Holzacker Openair
Theme URI:          http://fabiancorpataux.com
Description:        Theme für's Holzacker Openair
Version:            1
Author:             Fabian Corpataux
Author URI:         http://fabiancorpataux.com

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


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Lists
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries

- Custom CSS
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.container {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.column,
.columns {
	width: 100%;
	float: left;
	box-sizing: border-box;
}
.header-logo-container {
	width: 100%;
	margin-left: 0;
	float: left;
	box-sizing: border-box;
	margin-bottom: 5rem;
}

/* For devices larger than 400px */

@media (min-width: 400px) {
	.container {
		width: 85%;
		padding: 0;
	}
}


/* For devices larger than 800px */

@media (min-width: 800px) {
	.container {
		width: 85%;
	}
	.column,
	.columns {
		margin-left: 4%;
	}
	.header-logo-container {
		width: 100%;
		margin-left: 0;
		float: left;
		box-sizing: border-box;
	}
	.column:first-child,
	.columns:first-child {
		margin-left: 0;
	}
	.one.column,
	.one.columns {
		width: 4.66666666667%;
	}
	.two.columns {
		width: 13.3333333333%;
	}
	.three.columns {
		width: 22%;
	}
	.four.columns {
		width: 30.6666666667%;
	}
	.five.columns {
		width: 39.3333333333%;
	}
	.six.columns {
		width: 48%;
	}
	.seven.columns {
		width: 56.6666666667%;
	}
	.eight.columns {
		width: 65.3333333333%;
	}
	.nine.columns {
		width: 74.0%;
	}
	.ten.columns {
		width: 82.6666666667%;
	}
	.eleven.columns {
		width: 91.3333333333%;
	}
	.twelve.columns {
		width: 100%;
		margin-left: 0;
	}
	.one-third.column {
		width: 30.6666666667%;
	}
	.two-thirds.column {
		width: 65.3333333333%;
	}
	.one-half.column {
		width: 48%;
	}
	/* Offsets */
	.offset-by-one.column,
	.offset-by-one.columns {
		margin-left: 8.66666666667%;
	}
	.offset-by-two.column,
	.offset-by-two.columns {
		margin-left: 17.3333333333%;
	}
	.offset-by-three.column,
	.offset-by-three.columns {
		margin-left: 26%;
	}
	.offset-by-four.column,
	.offset-by-four.columns {
		margin-left: 34.6666666667%;
	}
	.offset-by-five.column,
	.offset-by-five.columns {
		margin-left: 43.3333333333%;
	}
	.offset-by-six.column,
	.offset-by-six.columns {
		margin-left: 52%;
	}
	.offset-by-seven.column,
	.offset-by-seven.columns {
		margin-left: 60.6666666667%;
	}
	.offset-by-eight.column,
	.offset-by-eight.columns {
		margin-left: 69.3333333333%;
	}
	.offset-by-nine.column,
	.offset-by-nine.columns {
		margin-left: 78.0%;
	}
	.offset-by-ten.column,
	.offset-by-ten.columns {
		margin-left: 86.6666666667%;
	}
	.offset-by-eleven.column,
	.offset-by-eleven.columns {
		margin-left: 95.3333333333%;
	}
	.offset-by-one-third.column,
	.offset-by-one-third.columns {
		margin-left: 34.6666666667%;
	}
	.offset-by-two-thirds.column,
	.offset-by-two-thirds.columns {
		margin-left: 69.3333333333%;
	}
	.offset-by-one-half.column,
	.offset-by-one-half.columns {
		margin-left: 52%;
	}
}


@media (min-width: 950px) {
	.durchgehend-1 {
		width: 30.6666666667%;
	}
	.durchgehend-2 {
		width: 65.3333333333%;
	}
}

@media (max-width: 950px) {
	.durchgehend-1 {
		width: 100%;
	}
	.durchgehend-2 {
		width: 100%;
		margin-left: 0;
	}
}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */

html {
	font-size: 62.5%;
}

body {
	font-size: 2.2rem;
	/* currently ems cause chrome bug misinterpreting rems on body element */
	line-height: 1.3;
	font-weight: 400;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

body {
	font-family: "Inter", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	margin-bottom: 2rem;
	font-weight: 300;
}

h1,
h2 {
	line-height: 1;
	font-weight: 900;
	margin-bottom: 0.3em;
}

h3,
h4,
h5,
h6 {
	font-size: 2.0rem;
	line-height: 1;
	font-weight: 900;
	margin-bottom: 0.2em;
}


/* Larger than phablet */


/*@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}*/

p {
	margin-top: 0;
	font-size: 2.2rem;
}

.icon {
	height: 0.8em;
	width: 0.8em;
	margin-right: 0.3em;
	position: relative;
	top: 0.1em;
}
.main-menu-icon {
	width: 1em;
	height: 1em;
	top: 0.1em;
	position: relative;
	margin: 0;
}


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */

ul {
	list-style: none;
}

ol {
	list-style: decimal inside;
}

ol,
ul {
	padding-left: 0;
	margin-top: 0;
}


/*ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }*/

li {
	margin-bottom: 0rem;
}


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */

table {
	font-size: 3rem;
}

th,
td {
	text-align: left;
	border-bottom: 0.15rem solid;
	padding: 0.25rem;
	padding: 12px 15px;
	border-bottom: none;
}

td-titel {
	font-weight: 400;
}

th:first-child,
td:first-child {
	padding-left: 0;
}

th:last-child,
td:last-child {
	padding-right: 0;
}

.td-no-border {
	border: 0;
}


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

button,
.button {
	/*margin-bottom: 1rem;*/
}

input,
textarea,
select,
fieldset {
	margin-bottom: 1.5rem;
}

pre,
blockquote,
dl,
figure,
table,

/*ul,
ol,
form {
  margin-bottom: 2.5rem; }*/


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.u-full-width {
	width: 100%;
	box-sizing: border-box;
}

.u-max-full-width {
	max-width: 100%;
	box-sizing: border-box;
}

.u-pull-right {
	float: right;
}

.u-pull-left {
	float: left;
}


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */

hr {
	margin-top: 3rem;
	margin-bottom: 3.5rem;
	border-width: 0;
	border-top: 1px solid #E1E1E1;
}


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Self Clearing Goodness */

.container:after,
.row:after,
.u-cf {
	content: "";
	display: table;
	clear: both;
}


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */

@media (min-width: 400px) {}


/* Larger than phablet (also point when grid becomes active) */

@media (min-width: 550px) {}


/* Larger than tablet */

@media (min-width: 750px) {}


/* Larger than desktop */

@media (min-width: 1000px) {}


/* Larger than Desktop HD */

@media (min-width: 1200px) {}


/* Smaller than 850px - Menu breakpoint */

@media (max-width: 950px) {}


/* Custom CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Ganze Seite */

html,
body {
	overflow-x: hidden;
}

section {
	margin: 0 -1000rem;
	/* add back negative margin value */
	padding: 0rem 1000rem;
}

h2 {
	font-size: 4rem;
	text-transform: uppercase;
}

.hidden {
	display: none;
}

.row-with-padding-bottom {
	padding-bottom: 3rem;
}

.row-with-padding-top {
	padding-top: 1rem;
}

.section-title {
	height: 13rem;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10rem;
	margin-bottom: 8rem;
}
.page-title-text {
	font-size: 7rem;
	color: #1A1E15;
	text-align: center;
	text-transform: uppercase;
	margin-top: 14rem;
	margin-bottom: 10rem;
}
@media (max-width: 549px) {
	.page-title-text {
		font-size: 6rem;
	}
}
.section-title-text {
	font-size: 5.5rem;
	color: #1A1E15;
	text-transform: uppercase;
	margin-top: 10rem;
	margin-bottom: 8rem;
}

.video-container {
	position: relative;
	height: 0;
	overflow: hidden;
	margin-top: 0.5rem;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	text-decoration: none;
}

/* Farben */

body {
	color: #263125;
}

a {
	color: #C65334;
}
.icon, .main-menu-icon {
	filter: brightness(0) saturate(100%) invert(38%) sepia(36%) saturate(1147%) hue-rotate(327deg) brightness(98%) contrast(92%);
}
a:hover, .link-mit-icon:hover, .menu-item-image:hover {
	color: #77160E;
	filter: brightness(0) saturate(100%) invert(9%) sepia(98%) saturate(3683%) hue-rotate(19deg) brightness(103%) contrast(104%);
}
a.menu-item-tickets:hover {
	color: #FCE6C0;
	background-color: #77160E;
	filter: none !important;
}
::selection {
	background-color: #f1d5ae;
}


body, .overlay, .sticky {
	background-color: #DC9963;
}
.alt-link {
	color: #dc9963;
	filter: brightness(0) saturate(100%) invert(78%) sepia(9%) saturate(2994%) hue-rotate(329deg) brightness(90%) contrast(90%);
}
.alt-link:hover {
	color: #dc9963;
	filter: brightness(0) saturate(100%) invert(78%) sepia(9%) saturate(2994%) hue-rotate(329deg) brightness(90%) contrast(90%);
	opacity: 0.7;
}
.alt-title {
	color: #F0B580;
}
#line-up, #tickets, #anreise, #food-drinks, #eindrücke-desktop, #eindrücke-mobile, #team {
	background-color: #817D55;
}
.headliner {
	background-color: #FBE4BE;
}
.nicht-headliner {
	background-color: #F5D1A7;
}

#footer {
	background-color: #313c30;
}
.accordion-titel:hover {
	color: #4b5c4b;
}

.menu-item-tickets {
	background-color: #cb5033;
	color: #f9ca95;
}

/* Header */

.ticket-button {
	position: fixed;
	bottom: 5rem;
	left: 5rem;
	width: 12rem;
	max-width: 17vw;
	z-index: 10000;
	cursor: pointer;
}
.ticket-button a:hover, .nohover a:hover {
	filter: none;
}

#header {
}

.header-logo {
	max-height: 85vh;
	max-width: 85vw;
	display: block;
	margin-left: auto;
	margin-right: auto;	
	margin-top: 10vh;
}

@media (max-width: 549px) {
	.header-logo {
		margin-top: 8rem;
	}
	.ticket-button {
		left: 3rem;
		bottom: 3rem;
	}
}

.header-sponsoren {
	display: flex;
	align-items: stretch;
	/* Default */
	justify-content: space-between;
	margin: 0;
	padding: 1rem;
	max-width: 40vw;
	margin-left: auto;
	margin-right: auto;
}

.header-sponsor-logo {
	width: 10vw;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5vw;
	max-width: 8vw;
}

.menu-container {
	position: absolute;
	bottom: 0;
	width: 100%;
	max-height: 6rem;
	z-index: 1000;
	text-align: center;
}

.menu-container-mobile {
	position: absolute;
	bottom: 0;
	width: 100%;
	max-height: 6rem;
	z-index: 1000;
	text-align: center;
}

.sticky {
	position: fixed;
	top: 0;
	width: 100%;
	padding-bottom: 0;
}

.menu-container-inner {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	width: 85%;
}

.menu {
	font-size: 0;
	text-align: justify;
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	z-index: 2000;
}

.menu:after {
	content: 'x';
	display: inline-block;
	width: 100%;
	height: 0;
}

.menu-item {
	display: inline-block;
	font-size: 2.2rem;
}
.menu-item-tickets {
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	border-radius: 0.4rem;
}
.menu-item a {
	vertical-align: center;
	line-height: 50px;
	cursor: pointer;
}

.menu-item-image-container {
	height: 4rem;
	width: 2rem;
}
.menu-item-image {
	position: absolute;
	top: 1rem;
	height: 4rem;
}
.menu-item-image-mobile {
	margin-left: -1.8rem;
}

/* Slider */
.slider {
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */ 
	height: 22vw;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.slider::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.slider {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.slider-header {
	margin-top: 8vh;
	margin-bottom: -2rem;
}

.slider-image {
	height: 20vw;
	display: inline-block;
	margin-right: 2vw;
	box-shadow: 0vw 0.2vw 0.4vw -0.2vw rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: 0vw 0.2vw 0.4vw -0.2vw rgba(0, 0, 0, 0.8);
	border-radius: 0.2rem;
}

#slider-image-first-header {
	margin-left: 2vw;
}


/* Bands */

.half-width-a,
.half-width-b {
	width: 48%;
	float: left;
}

.half-width-b {
	margin-left: 4%;
}

.band-satz {
	margin-block-end: 0;
	margin-bottom: 0.4rem;
}

/* Line-Up */

#line-up {
	padding-bottom: 8rem;
}

.video-container-bands {
	padding-bottom:56.25%;
	width: 100%;
	height: 0;
}

.headliner {
	padding-left: 2rem;
	padding-right: 2rem;
	padding-bottom: 2rem;
	padding-top: 2rem;
	margin-bottom: 5rem;
	border-radius: 0.5rem;
}
.headliner div h2 {
	font-size: 6rem;
}
.nicht-headliner {
	padding-left: 2rem;
	padding-right: 2rem;
	padding-bottom: 2rem;
	padding-top: 2rem;
	margin-bottom: 5rem;
	border-radius: 0.5rem;
}

.zeitangabe {
	font-size: 2.5rem;
	margin-block-end: 0;
	text-transform: uppercase;
	font-weight: bold;
	margin-top: 0.4rem;
}

.cookiePolicy {
	display: none !important;
}

@media (min-width: 800px) {
	.acts-mobile {
		display: none;
	}
}
@media (max-width: 799px) {
	.acts-desktop {
		display: none;
	}
}

/* Attraktionen */

#attraktionen {
	padding-bottom: 5rem;
}

.video-container-trailer {
	padding-bottom: 56.25%;
}

/* Infos */

#anreise, #uebernachten, #food-drinks {
	padding-bottom: 6rem;
}

.fahrplan {
	margin-top: 1rem;
}

/* Über */
.ok, .gedenken {
	margin-top: 3rem;
}

#geschichte {
	padding-bottom: 8rem;
}

.geschichte p {
	font-size: 3rem;
}


/* Tickets */

#tickets {
	padding-bottom: 4rem;
}

.jetzt-tickets-kaufen {
	position: fixed;
	bottom: 3rem;
	right: 3rem;
	z-index: 1000;
}

.jetzt-tickets-kaufen:hover {
	opacity: 0.7;
}

.jetzt-tickets-kaufen-bild {
	width: 12rem;
}

.vorverkaufsstelle-logo {
	width: 16rem;
	float: left;
	margin-right: 2rem;
	opacity: 0.6;
}

.eventfrog-container {
	margin-bottom: 4rem;
}

.eventfrog-platzhalter {
	width: 100%;
	height: 250px;
	opacity: 0.6;
	background-color: white;
}

/* Infos A-Z */

#infos-a-z {
	padding-bottom: 4rem;
}

.all {
	margin-bottom: 1rem;
	cursor: pointer;
}

.accordion-container {
	margin-bottom: 1rem;
}

.accordion-container body {
	background-color: red;
}

.accordion-titel {
	cursor: pointer;
	width: 102%;
	border: none;
	text-align: left;
	transition: 0.4s;
	padding-bottom: 12px;
	padding-left: 0;
	font-size: 3rem;
	line-height: 1;
	font-weight: 800;
	background-color: transparent;
}
.accordion-titel-small {
	font-size: 2.2rem;
	padding-bottom: 0;
}
.accordion-titel-band {
	margin-top: 0.4rem;
}

.accordion-inhalt {
	padding-left: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

.accordion-titel:after {
	content: '+';
	/* Unicode character for "plus" sign (+) */
	float: right;
}

.active:after {
	content: "−";
	/* Unicode character for "minus" sign (-) */
	float: right;
}

/* Eindrücke */

@media (min-width: 800px) {
	#eindrücke-mobile {
		display: none;
	}
	#eindrücke-desktop {
		padding-bottom: 8rem;
	}
}
@media (max-width: 799px) {
	#eindrücke-desktop {
		display: none;
	}
	#eindrücke-mobile {
		padding-bottom: 8rem;
	}
}

.mehr-fotos {
	padding-top: 2rem;
	margin-bottom: 0;
}

video {
	width: 100%;
}

.galerie-foto {
	margin-top: 3rem;
}
.galerie-foto-oben {
	margin-top: 0;
}

.sponsorenbild {
	width: 23%;
	opacity: 0.9;
}
.hauptsponsorenbild {
	width: 46.7%;
	margin-bottom: 2rem;
}

/* Über */

#team {
	padding-bottom: 8rem;
}

.ok-mitglied {
	margin-bottom: 2rem;
}

.ok-bild {
	max-width: 30%;
	float: left;
	margin-right: 1rem;
}
@media (max-width: 800px) {
	.ok-bild {
		margin-right: 0.5rem;
	}
}
.ok-text {
	padding-top: 0.2rem;
	width: 67%;
	float: left;
}

/* Footer */

#footer {
	padding-top: 8rem;
	padding-bottom: 7rem;
}

.horizontal-center {
	text-align: center;
}
.seitenabschluss {
	margin-top: 6rem;
	width: 12%;
}

.spacer {
	width: 100%;
}

#footer h2 {
	font-size: 2.5rem;
}

/* Mobile-Anpassungen */

#back-to-top {
	display: block;
	text-align: center;
}

@media (min-width: 550px) {}

@media (max-width: 549px) {
	.section-title {
		margin-top: 6rem;
		margin-bottom: 4rem;
	}
}

@media (min-width: 1200px) {
	.menu-container-mobile {
		display: none;
	}
	.row-band-mobile {
		display: none;
	}
}

@media (max-width: 1199px) {
	.menu-container-desktop {
		display: none;
	}
	.row-band-desktop {
		display: none;
	}
}

.overlay {
	height: 0;
	width: 100%;
	position: fixed;
	z-index: 20000;
	left: 0;
	top: 0;
	overflow-x: hidden;
	/* Disable horizontal scroll */
	transition: 0.3s;
}

.overlay-content {
	position: relative;
	top: 0;
	text-align: center;
	margin-top: 9vh;
}

.menu-container-desktop {
	position: absolute;
	bottom: 0;
	width: 100%;
	max-height: 6rem;
	z-index: 1000;
	text-align: center;
/*	filter: drop-shadow(0px -10px 10px #4d5b48);*/
}

.menu-container-mobile {
	position: absolute;
	bottom: 0;
	width: 100%;
	max-height: 6rem;
	z-index: 1000;
	text-align: center;
/*	filter: drop-shadow(0px -10px 10px #4d5b48);*/
}

.sticky {
	position: fixed;
	top: 0;
	width: 100%;
	padding-bottom: 0;
}

.overlay-menu-container-inner {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0.5rem;
}

.overlay-menu-item {
	font-size: 1rem;
	padding: 5px;
	cursor: pointer;
}
.overlay-menu-item a {
	font-size: 5vh;
}

.overlay-menu-item-with-margin-left {
	margin-left: 0.5rem;
}

.overlay-menu-item-logo {
	height: 10vh !important;
}

.overlay-menu-item-image {
	height: 6vh;
	transition: all 0.2s;
}

.menu-item-mobile {
	display: inline-block;
	font-size: 2rem;
	max-width: 26%;
	cursor: pointer;
}
.menu-container-inner-mobile {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	width: 85%;
}




/* .columns {
	opacity: 0;
}
#header .columns {
	opacity: 1 !important;
}

.animate {
	animation: fade-in-move-up 0.5s;
}

@keyframes fade-in-move-up {
  0% {
    opacity: 0;
    transform: translateY(5rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
} */

body {
	font-family: "Londrina Solid", sans-serif;
	font-weight: 300;
	letter-spacing: 0.03em;
}

h1, h2, h3 {
	font-family: "Londrina Solid", sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.015em;
}
}
h3 {
	line-height: 1.2em;
	font-size: 2.2rem;
	color: #817D55;
}

.accordion-titel {
	letter-spacing: 0.04em;
}

.menu-item, .menu-item-mobile, .overlay-menu-item {
	font-family: "Londrina Solid", sans-serif;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 0.025em;
	font-size: 2.6rem;
}
.menu-item-close {
	text-transform: lowercase;
}

.nohover {
	filter: none !important;
}