@import url("../fonts/stylesheet.css");

/*Fonts*/
body, * { font-family: "visuelt-regular", Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif }
strong, .list_view li>div.list_name  { font-family: "visuelt-medium", Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif; font-weight: normal; }


/*Colors*/
.blue { color: #a4d7dc; }
.blue_bg, #wrapper, .yellow_bg.home_section .content_row { background-color: #a4d7dc; }
.blue_dark { color: #4dbcc4; }
.blue_dark_bg, .privacywire-consent-button { background-color: #4dbcc4; }
.blue_dark_fill { fill: #4dbcc4; }
.yellow { color: #fff480; }
.yellow_bg, .blue_bg.home_section .content_row { background-color: #fff480; }
.yellow_dark { color: #edd800; }
.yellow_dark_bg { background-color: #edd800; }
.white, #footer a, #footer, .faq_title, .faq_text, .event_content .event_details, .event_content .event_related .related_title { color: #fff; }
.white_bg { background-color: #fff; }
.white a { color: #fff; }
.white a:hover { color: #fff; }
.black { font-size: #000; }
.black_bg { color: #FFF; background-color: #000; }
.yellow_bg.diagonal_bottom_rl:after { border-color: #fff480 transparent transparent transparent; }
.blue_bg.diagonal_bottom_rl:after{ border-color: #a4d7dc transparent transparent transparent; }
.yellow_bg .section_shape_headline:after, .blue_bg .yellow_bg .section_shape_headline:after { border-color: #edd800 transparent transparent transparent; }
.blue_bg .section_shape_headline:after { border-color: #4dbcc4 transparent transparent transparent; }
.teaser_block .meta .date_links .links a.read_more:after { border-color: #edd800 transparent transparent transparent; }
.faq_title:after { border-color: #4dbcc4 transparent transparent transparent; }
.grey_bg { background-color: #AAA; }


img {max-width: 100%;}
button:focus { outline: none; }

/*Shapes & Backgrounds*/
.stripes { overflow: hidden; height: 22px; width: 100%;  position: absolute; bottom:-5px; z-index: 20;  }
/*.stripes>div { -moz-transform: scale(.9999); position: relative; left: -20%; top:-10px; height: 40px; width: 140%; background-image: linear-gradient(90deg, #000000 25%, #ffffff 25%, #ffffff 50%, #000000 50%, #000000 75%, #ffffff 75%, #ffffff 100%); background-size: 200.00px 200.00px; transform: perspective(200px) rotateX(40deg);     }
*/
.stripes>div { background: url(../images/linie.svg) no-repeat; height: 100%; width: 100%; background-size: 100%; background-position: center bottom; }
.diagonal_bottom_rl {position: relative; padding-bottom: 40px;  }
.diagonal_bottom_rl:after { content: ''; position: absolute; bottom: -200px; right: 50%; margin-right:-50%; width: 0; height: 0; border-style: solid; border-width: 200px 3000px 0 0;  }

@media (max-width: 768px) {
	.diagonal_bottom_rl>.container { margin-top: -15px; } 
	.diagonal_bottom_rl > .container  ~ .container  { margin-top: 0; }
    .stripes { bottom: -3px;  }
    .stripes>div { width: 183%; }
}


/*Header*/
#header { position: fixed; width: 100%; z-index:100000; height: 115px; top:0; }
#header #logo { position: relative; height: 90px; width: 160px; }
#header #logo img { height: 90px; width: 160px; position: absolute; top:0; left:0; transition: opacity 0.5s; }
#header #logo img.text_logo { opacity: 1; z-index: 10; }
#header #logo img.zitrone_logo { opacity: 0; z-index:1; }
.scrolled #header #logo img.zitrone_logo { opacity:1; }
.scrolled #header #logo img.text_logo { opacity: 0; }
#header .navbar:after { content:''; width:100%; height: 100%; top:0; right:-100%; position: absolute; background: #fff480; transition: right 400ms ease-in-out; }
.mobileMenuOpen #header .navbar:after { right:0; }
#header_inner { display: flex; justify-content: space-between; align-items: flex-end; }
/*.topnav { display: flex; list-style: none; margin:0; padding:0; justify-content: space-between; }*/
.topnav li { margin: 0 20px; }
.topnav a { color: #fff; font-size: 22px; font-weight: bold; text-decoration: uppercase; }
.nav-link.social { background-size: contain; width: 25px; height: 25px; display: block; margin: 11px 0; }
.nav-link.social.facebook { background-image: url(../images/icons/facebook_white.png);  }
.nav-link.social.insta { background-image: url(../images/icons/instagram_white.png);  }
/* Define the shape and color of the hamburger lines */
.navbar-toggler span {
    display: block;
    background-color: #4f4f4f;
    height: 3px;
    width: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    left: 0;
    opacity: 1;
    transition: all 0.35s ease-out;
    transform-origin: center left;
}


/* top line needs a little padding */
.navbar-toggler span:nth-child(1) {
    margin-top: 0.3em;
}

/**
 * Animate collapse into X.
 */

/* top line rotates 45 degrees clockwise and moves up and in a bit to close the center of the X in the center of the button */
.navbar-toggler:not(.collapsed) span:nth-child(1) {
    transform: translate(15%, -33%) rotate(45deg);
}
/* center line goes transparent */
.navbar-toggler:not(.collapsed) span:nth-child(2) {
    opacity: 0;
}
/* bottom line rotates 45 degrees counter clockwise, in, and down a bit to close the center of the X in the center of the button  */
.navbar-toggler:not(.collapsed) span:nth-child(3) {
    transform: translate(15%, 33%) rotate(-45deg) ;
}


/**
 * Animate collapse open into hamburger menu
 */

/* top line moves back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(1) {
    transform: translate(0%, 0%) rotate(0deg) ;
}
/* middle line goes back to regular color and opacity */
.navbar-toggler span:nth-child(2) {
    opacity: 1;
}
/* bottom line goes back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(3) {
    transform: translate(0%, 0%) rotate(0deg) ;
}

@media (max-width: 991px) {
    .navbar { z-index: 10; }
	#navbarNavDropdown { background: #a4d7dc; height: calc(100vh - 115px); width:100vw; top:115px;  position: absolute; z-index:1; }
	#logo { position: relative; z-index: 10; }
	#header .navbar-toggler { position: relative; z-index:10; border: 0; }
    .navbar-collapse {
        position: fixed;
        top: 54px;
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        height: 100%;
    }

    .navbar-collapse.collapsing {
        left: -100%;
        transition: height 0s ease;
    }

    .navbar-collapse.show {
        height: 100%;
        left: 0;
        transition: left 400ms ease-in-out;
    }

    .navbar-toggler.collapsed ~ .navbar-collapse {
        transition: left 400ms ease-in;
    }
}

/*Home Sections*/
.home_section .container>.container { padding-left:0; padding-right: 0; }
.home_section .content_row { padding-top: 20px; margin-top: -8px; }
.home_section .content_row * { color: #fff; } 
.home_section:last-of-type:after { display: none; }

/*Page*/
#wrapper { overflow: hidden;  }
#wrapper #main { margin-top: 0; padding-top: 117px; }
.basic_page_content, .faq_page_content { min-height: 700px;}
.bg_content_area { padding-top: 0px; }
.section_shape_headline { font-weight: bold; text-align: center; color: #fff; font-size: 40px; text-transform: uppercase; height: 250px; background: transparent; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; position: relative;  }
.section_shape_headline>span { z-index: 10; display: block; margin-bottom: 65px; }
.section_shape_headline:after { content: ''; background: transparent; position: absolute; top: 0; left: 50%; height: 300px; z-index: 5; transform: translateX(-50%); width: 350px; border-style: solid; border-width: 450px 150px 0 150px;   }

.matrix_item { margin-bottom: 20px; }
.matrix_error { border: 2px solid #fff; color: #fff; background: red; padding: 10px; font-size: 14px; }
.matrix_item.gallery img, .matrix_item.logos img { margin-bottom: 30px; }


@media (max-width: 768px) {
	.section_shape_headline { height: 200px; font-size: 30px; } 
}

/*Main Teaser*/
.main_teaser { margin-top: 40px; height: 400px; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; }
.main_teaser .meta { position: absolute; z-index:2; bottom: 0; right:0; padding: 20px; text-align: right; color: #fff;}
.main_teaser .meta a { color: #fff; }
.main_teaser .meta h2 { text-transform: uppercase; padding:0; margin:0; }
.main_teaser .meta .date {  font-size: 32px; line-height: 1.2; margin-bottom: 4px;}
.main_teaser .full_teaser_link { position: absolute; z-index:1; width: 100%; height: 100%; top: 0; left:0; display: block; }
/*Filter bar*/
.filter_bar { margin-top: 50px;  }
.event_list_filter_meta { display: flex; }
.event_list_title { font-weight: bold; text-transform: uppercase; color: #fff; font-size: 40px; flex: 0 0 auto;}
.event_list_filter {display: flex; flex-direction: column; color: #fff; margin-left: 20px; justify-content: center}
.event_list_filter a { color: #fff; margin-right: 10px; }
.event_list_filter_month a {  }
.event_list_filter_genres a.tagstrike { text-decoration: line-through; }
.view_switch { color: #fff; font-weight: bold; font-size: 20px;  }
.view_switch:hover, .view_swith:active { color: #fff; text-decoration: underline;}

@media (max-width: 768px) {
	.event_list_filter_meta { flex-direction: column; }
	.event_list_filter { margin-left: 0; }
	.main_teaser { height: 300px; }
}
 
/*Standard Teaser*/
.card_view {display: none; margin-top: -8px; margin-bottom: 40px;}
.card_view .tagselect { display: none; }
.card_view.active { display: flex; }
.teaser_block { width: 100%; margin: 0; margin-bottom: 4px;   }
.teaser_block .meta { padding: 10px; height: 100%; width:100%; height: 250px;  position: relative; display: flex; flex-direction: column; color: #fff; justify-content: space-between; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; }
.teaser_block .meta .full_teaser_link { position: absolute; z-index:1; width: 100%; height: 100%; top: 0; left:0; display: block; }
.teaser_block .meta h2 { font-size:22px; position: relative; z-index: 2; }
.teaser_block .meta a { color: #fff; }
.teaser_block .meta .event_sponsor_claim { display: block; font-size: 50%; }
.teaser_block .meta .date_links { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-end; position: relative; z-index: 2; }
.teaser_block .meta .date_links .date { font-size: 38px; font-weight: bold; line-height: 38px }
.teaser_block .meta .date_links .links { padding-bottom: 5px; }
.teaser_block .meta .date_links .links a.read_more { position: relative;}
.teaser_block .meta .date_links .links a.read_more>span { display: none; }
.teaser_block .meta .date_links .links a.read_more:after { content:''; width: 0; height: 0; border-style: solid; border-width: 17.3px 10px 0 10px; position: absolute;  bottom: 0; left: 5px; transition: all .5s; }
.teaser_block.open .date_links .links a.read_more:after { transform: rotateX(180deg); }
.teaser_block .details { background: #000; color: #fff; display: none;height:254px; /*max-height:0; overflow: hidden;*/ transition: all .5s;  }
.teaser_block.open .details { /*max-height: 250px; height:250px; transition: all .5s;*/ }
.teaser_block .details .details_inner { padding: 10px;     height: 100%; display: flex;    flex-direction: column;    justify-content: space-between; } 
.teaser_block .details a { color:#fff; }
.teaser_block .details .link a { font-size: 20px; }

/*List View*/
.list_view {display: none; margin-top: -8px; margin-bottom: 20px; }
.list_view .tagselect { display: none; }
.list_view.active {display: flex; }
.list_view ul { background: #000; padding: 25px; color: #fff; list-style: none; margin: 0; width: 100%; font-size: 18px;   }
.list_view a { color: #fff;   }
.list_view li { display: table; width: 100%; }
.list_view li>div {display: table-cell;}
.list_view li>div.list_name {  }
.list_view li>div.list_links { width: 250px; }
.list_view li>div.list_date { width: 150px;  }

@media (max-width: 768px) {
	.list_view li { display: block; margin: 15px 0; }
	.list_view li>div { display: block; text-align: center; }
	.list_view li>div.list_links, .list_view li>div.list_date { width: 100%; }

}

/*Event Details*/
.event_content .event_details { padding: 20px; margin-top: 20px; margin-bottom: 20px;  }
.event_content .event_image { margin-top: 20px; }
.event_content .event_sponsor_claim { font-size: 80%; }
.event_content .event_title_header { display: flex; justify-content: space-between; }
.event_content .event_title_header > div { flex: 1; }
.event_content .event_title_header .event_sponsor_logo { width: 150px; flex: 0 0 auto; }
.event_content .event_title { text-transform: uppercase; }
.event_content .event_title .event_meta { display: block; font-size: 80%;  }
.event_content .event_ticketshop { margin-top: 20px; font-size: 110%; }
.event_content .event_youtube { margin-bottom: 20px;  position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; overflow: hidden; }
.event_content .event_youtube .privacywire-ask-consent { padding: 20px; color: #fff; }
.event_content .event_youtube iframe {     position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.event_content .event_related { margin-top: 20px; margin-bottom: 20px;  }
.event_content .event_related .related_title { text-transform: uppercase; position: relative; }
.event_content .event_related .related_title svg { position: absolute; z-index:1;}
.event_content .event_related .related_title h3 {  text-align: center; position: relative; z-index:10; padding: 104px 60px 0 60px; font-size: 22px;  }
.event_content .event_social {  }
.event_content .event_social .social_link { display: block; width: 50px; height: 50px; background: #000; margin-bottom: 20px; background-size: contain; }
.event_content .event_social .social_link.youtube { background-image: url(../images/icons/youtube_white.png);}
.event_content .event_social .social_link.facebook { background-image: url(../images/icons/facebook_white.png);}
.event_content .event_social .social_link.soundcloud { background-image: url(../images/icons/soundcloud_white.png);}
.event_content .event_social .social_link.instagram { background-image: url(../images/icons/instagram_white.png);}
.event_content .event_social .social_link.spotify { background-image: url(../images/icons/spotify_white.png);}
.event_content .event_social .social_link.share { display: none; background-image: url(../images/icons/share__white.png);}



.event_related_cards { padding: 20px; z-index: 20; position: relative; }
.event_related_cards .event_date_related span { display: block; line-height:100%; }

@media (max-width: 991px) {
	.event_content .event_title_header { flex-direction: column-reverse; }
	.event_content .event_related { display: none; }
	.event_content .event_social { display: flex; flex-direction: row; justify-content: space-between; }
	.event_content .event_social .social_link {  }
}

@media (max-width: 768px) {

}


/*FAQ*/
.page_title { padding: 20px; color: #fff; margin-top: 20px; }
.faq_item { padding: 20px; margin: 20px 0; }
.faq_item_odd {  }
.faq_title { margin-bottom: 0; cursor: pointer; position: relative; padding-left: 45px; }
.faq_text { display:none; overflow: hidden; padding-top: 1rem; padding-left: 45px;  }
.faq_text.active {  }
.faq_title:after { content:''; width: 0; height: 0; border-style: solid; border-width: 27.3px 15px 0 15px; position: absolute;  top: 3px; left: 0px; transition: all .5s; }
.faq_title.active:after { transform: rotateX(180deg); }

/*Cookies*/
.privacywire-consent-button { border: 0;  }
.privacywire-wrapper { z-index: 3000000; position: fixed; }
.privacywire-wrapper .privacywire { background: #4dbcc4; color: #fff }
.privacywire-wrapper .privacywire .privacywire-page-link { color: #fff; font-size: 11px; }
.privacywire-wrapper .privacywire .privacywire-buttons { display: flex; flex-direction: row-reverse; }
.privacywire-wrapper .privacywire .privacywire-buttons button { border: 0; background: transparent; border: 2px solid transparent; margin: 0 10px; padding: 10px; color:#fff; }
.privacywire-wrapper .privacywire .privacywire-buttons button.allow-all  { background: #fff480; padding: 10px 20px; color: #000;  }
.privacywire-wrapper .privacywire .privacywire-buttons button.allow-necessary { border: 2px solid #fff; }
.privacywire-wrapper .privacywire ul { list-style: none; }

/*Footer*/
#footer { position: relative; padding-top: 20px; }
#footer .stripes { bottom: auto; top: 0px; }
#footer .footer_inner { padding: 20px; }

/*Admin*/
.edit { position: fixed; bottom: 0; right: 0; padding: 5px 25px; background: #FF3333; z-index: 3000000; }
.edit a { color: #FFF; }

/*helper*/
img { image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast }
.modal { z-index: 100000 !important;  }
.no-gutters {
  margin-right: 2px;
  margin-left: 2px;
}
.no-gutters .col, .no-gutters [class*="col-"] {
    padding-right: 2px;
    padding-left: 2px;
}
.hide_desktop { display: none; }
.hide_mobile { display: block; }
@media (max-width: 991px) { 
    .hide_desktop { display: block; }
    .hide_mobile { display: none; }
}

/*Errors*/

.error { border: 2px solid red; color: red; }