/* GENERAL */
html,
body { width: 100%; height: 100%; min-height: 100%; }
body { font-family: 'Roboto Condensed', sans-serif; font-size: 15px; font-weight: normal; text-align: justify; color: #1A1A1A; background: #FFFFFF; }
.page_wrapper { position: relative; height: auto; min-height: 100%; margin: 0 auto; /* -112px auto; */ }

.wrapper { position: relative; min-width: 320px; }
.content { position: relative; min-width: 300px; padding: 0 10px 0 10px; margin: 0 auto; }
section .content { padding: 20px 10px 30px 10px; }
article section:first-child .content { padding-top: 0; }

p { margin: 25px 0; }
ul { list-style: none; }
ul + ul { margin: 25px 0; }
ul li ul { padding-left: 5px; margin: 10px 0 0 0; }
.square_bullet { text-align: left; }
.square_bullet > li { padding: 0 0 7px 17px; background: url(/src/img/core/ul-bullet-gray.png) 0 2px no-repeat; }

.btn { padding: 12px 35px; font-size: 18px; color: #FFFFFF; background: #2B2C32; transition: all 0.5s; }
.btn:hover { background: #6F6F6F; text-decoration: none; }
.link { color: #399CE9; transition: all 0.5s; }
.link:hover { color: #2553A8; }

.icon { padding: 2px 0 2px 32px; line-height: 24px; font-weight: 500; background-position: 0 center; background-repeat: no-repeat; }
strong.icon { font-weight: 700; }
.icon:hover { text-decoration: none; }
.icon.doc { background-image: url(/src/img/core/icon-doc.png); }
.icon.doc:hover { color: #2553A8; }
.icon.pdf { background-image: url(/src/img/core/icon-pdf.png); }
.icon.pdf:hover { color: #E14045; }
.icon.programme { padding-left: 35px; background-image: url(/src/img/core/icon-programme.png); background-position: 0 center; }

/* HEADER */
header .wrapper { height: 50px; color: #FFFFFF; background-color: #2B2C32; }
header .separator { margin: 0 0 0 25px; background: url(/src/img/core/language-choice-separator.png) left bottom no-repeat; }
header .language_choice { padding: 22px 0 0 50px; height: 50px; }
header .language_choice a { margin-left: 20px; font-size: 16px; color: #CACACA; }
header .language_choice a:first-child { margin: 0; }
header .language_choice a.active { font-weight: 500; color: #FFFFFF; cursor: default; text-decoration: none; }
header .archive { padding: 22px 0 0 40px; height: 50px; }
header .social { position: relative; bottom: -15px; }

/* MENU */
.logo { display: inline-block; padding: 10px 0; }
.menu_col { position: relative; }
.menu { position: fixed; top: 0; left: 0; z-index: 100; display: none; width: 100%; height: 100%; font-weight: 500; background: #FFFFFF; }
.menu_open { margin-top: 25px; }
.menu .menu_close { position: absolute; top: 0; right: 50px; font-size: 40px; font-weight: 700; }
.menu ul { height: 100%; overflow-y: auto; list-style: none; }
.menu li { display: block; margin: 25px auto; font-size: 20px; text-align: center; background: none; }
.menu li:first-child { margin-top: 100px; }
.menu a { display: block; padding: 7px 0 7px 0; }
.menu a.active { font-weight: 700; cursor: default; }
.menu a:hover { text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); text-decoration: none; }
.menu a.active:hover { text-shadow: none; }

/* HEADLINES */
h1 { font-size: 26px; font-weight: 700; }
h1,
h2,
h3 { margin: 15px 0; }
section .content > h1 { margin-top: 50px; }

.hero { position: relative; }
.hero .headline { position: absolute; top: 60px; left: 0; width: 100%; text-align: center; }
.hero .headline h1,
.hero .headline h2,
.hero .headline h3 { font-weight: 700; color: #FFFFFF; text-shadow: 0 0 20px #000000, 0 0 20px #000000, 0 0 20px #000000, 0 0 20px #000000; }
.hero .headline h2 { font-size: 18px; }
.hero .headline h3 { font-size: 16px; }
.hero_bg { position: relative; }
.hero_bg .credits { position: absolute; bottom: 0; right: 0; padding: 3px 15px 2px 15px; font-size: 14px; font-weight: 500; color: #000000; background-color: rgba(255,255,255,0.5); border-radius: 3px 0 0 0; }

/* CONTENT */
section .indented,
.indented { padding-right: 10px; padding-left: 10px; }
.staff_row { margin: 45px 0; }
.staff_headline { font-size: 19px; }

.accordion_content { display: none; }
.shadow_box { box-shadow: 0 0 3px 1px #CBCBCB; }

/* EVENTS */
.event_day { display: none; position: relative; margin-bottom: 75px; }
.event_day.active { display: block; }
.event_day_name { margin: 0 10px 15px 10px; }
/*.event_day:first-child .event_day_name { margin-top: 0; }*/
.event_day_name h2 { padding: 10px 12px; margin: 0; font-size: 18px; color: #FFFFFF; background-color: #2B2C32; }
.event_day .accordion { padding: 0 20px; background: url(/src/img/core/arrow-down.png) right center no-repeat; }
.event_day .accordion.active { background-image: url(/src/img/core/arrow-up.png); }
.event_day .accordion_content { display: block; }
.event { display: none; padding: 10px; }
.event.active { display: block; }
.event_box { position: relative; font-size: 16px; background-color: #FFFFFF; }
.event_box h2 { margin: 45px 0 0 0; font-size: 24px; font-weight: 500; font-style: italic; text-align: center; }
.event_box h3 { margin-top: 5px; font-size: 19px; text-align: center; }
.event_box h4 { margin: 25px 0 15px 0; font-size: 17px; font-weight: 500; }
.event_box h4:first-child { margin-top: 0; }
.event_box .event_type { position: absolute; top: 0; left: 0; width: 40%; height: 40px; text-align: center; line-height: 40px; }
.event_box .event_type.event_bg_1 { color: #FFFFFF; background-color: #66401B; }
.event_box .event_type.event_bg_2 { color: #FFFFFF; background-color: #311052; }
.event_box .event_type.event_bg_3 { color: #FFFFFF; background-color: #6BAF00; }
.event_box .event_type.event_bg_5 { color: #FFFFFF; background-color: #F8BC2D; }
.event_box p,
.event_box ol,
.event_box ul { margin: 25px 0; }
.event_box p:first-child { margin-top: 5px; }
.event_box .closed_performance { position: absolute; top: 0; right: 0; padding: 4px 25px; color: #000000; background-color: #CBCBCB; }
.event_box .location { margin: 0; text-align: left; }
.event_box .indented { padding-right: 10px; padding-left: 10px; }
.event_details_link { position: relative; }
.event_details_link .accordion { float: right; }
.event_box .short_info { margin: 10px 0 35px 0; text-align: center; }
.timetable .details { padding-left: 32px; line-height: 23px; }

.programme section .content > h1 { margin-bottom: 50px; }
.programme .event_box h4 { font-weight: 500; }

.filter_box { margin-bottom: 35px; }
.filter_box .field_wrapper { padding: 5px 0; }
.filter_results { display: none; }
.filter_headline { margin: 0 0 15px 0; font-size: 20px; }
.filter_name { padding: 0 7px 10px 7px; margin: 5px 0 18px 0; font-size: 18px; border-bottom: 1px solid #707070; }
.filter_box .field_wrapper > label { padding-left: 7px; padding-right: 7px; }
.filter_box .option_value { max-width: 115px; font-size: 16px; text-align: left; }

.details_link { position: absolute; bottom: 0; right: 0; padding: 20px 12px 7px 25px; font-size: 14px; }

/* NEWS */
.news_page h2 { font-size: 20px; font-weight: 500; }
.news_link { display: block; font-size: 15px; text-align: right; }
.news_box .col_inner { padding: 10px 15px; }
.news_box .date { font-size: 15px; color: #707070; }

/* FOOTER */
footer .wrapper { color: #FFFFFF; background-color: #2B2C32; }
footer .wrapper .content { padding: 45px 10px 15px 10px; }
footer .credits { font-size: 13px; text-align: center; }

/* FORM */
legend { margin: 0 0 25px 0; }
legend h3 { margin: 0 0 10px 0; }
label { position: relative; display: block; padding: 0; box-sizing: unset; cursor: pointer; }
.field_wrapper > label { display: block; margin: 12px 0; }
label.hidden_select { display: none; }
input[type='text'],
input[type='password'],
textarea,
select { display: block; width: 100%; font-family: 'Roboto Condensed', sans-serif; font-size: 14px; background-color: transparent; border: 2px solid #7EA4D0; border-radius: 0; box-sizing: border-box; outline: none; }
textarea { height: 150px; padding: 10px 10px 25px 10px; margin: 0; resize: none; }
input[type='text'],
input[type='password'],
select { height: 40px; padding: 0 10px; line-height: 40px; }
select { padding: 0 40px 0 10px; -moz-appearance: none; text-indent: 0; text-overflow: ''; -webkit-appearance: none; background: url(/src/img/bg-custom-select.jpg) right center no-repeat transparent; cursor: pointer; }
select option { padding: 0; text-indent: 0; }
select option:first-child { font-style: italic; }
input[type='button'],
button[type='button'],
input[type='submit'],
button[type='submit'] { padding: 7px 12px 6px 12px; font-family: 'Roboto Condensed', sans-serif; border: 0 none; outline: 0; cursor: pointer; }
input[type='button'].reset_filters { font-size: 15px; }
button[disabled] { cursor: default; }
input[type='text'].error,
input[type='password'].error,
textarea.error,
select.error { border: 2px solid #FF0500; }
select.error { background-image: url(/src/img/bg-custom-select-error.jpg); }
select[disabled] { background: none; cursor: default; }
label.error { position: absolute; bottom: 5px; left: 0; display: none; width: 100%; min-width: 150px; padding: 0; font-size: 12px; color: #FF0500; }

input[readonly],
textarea[readonly] { background-color: #E1EAF4; }

.rules { display: table; text-align: left; }
input[type="checkbox"] { display: none; }
input[type="checkbox"] + em { display: block; float: left; width: 18px; height: 18px; background: #FFFFFF; border: 1px solid #707070; cursor: pointer; }
input[type="checkbox"]:checked + em { background: url(/src/img/core/ico-check.png) center center no-repeat #FFFFFF; background-size: 75% auto; }
input[type="checkbox"].error + em { border-color: #FF0500; }
input[type="checkbox"][disabled] + em { background-color: #EAE8E8; cursor: default; }
label.rules { cursor: pointer; }
.rules small { display: table-cell; font-size: 13px; line-height: 18px; vertical-align: top; }
.rules a { color: #7EA4D0; }

.radio_wrapper label { display: inline-block; height: auto; margin: 0 0 0 20px; cursor: pointer; }
.radio_wrapper label:first-child { margin: 0; }
input[type="radio"] { display: none; }
input[type="radio"] + em { display: inline-block; width: 18px; height: 18px; background: url(/src/img/sp-radio.png) 0 0 no-repeat #FFFFFF; }
input[type="radio"]:checked + em { background-position: 0 -18px; }
input[type="radio"].error + em { background-position: 0 -36px; }
.radio_wrapper label small { line-height: 18px; vertical-align: top; }

.field_wrapper em + label { display: inline-block; padding-left: 12px; }

@media screen and (min-width: 480px) {
	/* HEADLINES SMALL */
	h1 { font-size: 28px; }
	.hero .headline { top: 35%; }
	.hero .headline h2 { font-size: 20px; }
	.hero .headline h3 { font-size: 18px; }
}

@media screen and (min-width: 640px) {
	/* GENERAL MEDIUM */
	body { font-size: 16px; }

	.btn { font-size: 20px; }

	/* FLEX ROW MEDIUM */
	.flex_row.m { display: flex; height: 100%; }
	.flex_row.m > .col { float: none; }
	.flex_row.m > .col > .col_inner { height: 100%; }
	.flex_row.m .flex .vc,
	.flex_row.m > .col > .col_inner > .vc,
	.flex_row.m > .col > .vc { position: relative; top: 50%; transform: translate(0,-50%); margin-top: 0; margin-bottom: 0; }

	/* HEADLINES MEDIUM */
	h1 { font-size: 30px; }
	.hero .headline { top: 30%; left: 35px; width: auto; text-align: left; }
	.hero .headline h2 { font-size: 24px; }
	.hero .headline h3 { font-size: 20px; }

	/* CONTENT MEDIUM */
	.indented,
	section .indented { padding-right: 25px; padding-left: 25px; }

	/* EVENTS MEDIUM */
	.event_day_name { margin-left: 15px; margin-right: 15px; }
	.event_day_name h2 { font-size: 24px; }
	.event { padding: 15px; }
	.news_box .col_inner { padding: 15px 25px; }
	.event_box h2 { margin: 0; text-align: left; }
	.event_box h3 { text-align: left; }
	.event_box .event_type { top: 25px; width: 20%; }
	.event_box .short_info { text-align: justify; }

	.filter_headline { font-size: 22px; }
	.filter_name { font-size: 20px; }

	.details_link { padding: 20px 25px; font-size: 16px; }

	/* FOOTER MEDIUM */
	footer .credits { font-size: 14px; }

	/* COOKIE_BANNER MEDIUM */
	.cookie_banner .btn_wrap { }
}

@media screen and (min-width: 960px) {
	/* GENERAL LARGE */
	body { font-size: 18px; }

	/* FLEX ROW LARGE */
	.flex_row { display: flex; height: 100%; }
	.flex_row > .col { float: none; }
	.flex_row > .col .col_inner { height: 100%; }
	.flex_row .flex .vc,
	.flex_row > .col > .col_inner > .vc,
	.flex_row > .col > .vc { position: relative; top: 50%; transform: translate(0,-50%); margin-top: 0; margin-bottom: 0; }

	/* MENU LARGE */
	.menu_col { float: left; }
	.menu { position: static; display: block; float: right; width: auto; height: 100px; background: 0 none; }
	.menu ul { padding: 0; }
	.menu li { float: left; max-width: 85px; margin: 0 70px 0 0; font-size: 18px; text-align: center; }
	.menu li:first-child { margin-top: 0; }
	.menu li:last-child { margin: 0; }
	.menu a { border-bottom: 3px solid #FFFFFF; }
	.menu a.active { font-weight: 500; border-bottom: 6px solid #2B2C32; }
	.menu a:hover { text-shadow: none; text-decoration: none; border-bottom-color: #2B2C32; }
	.menu a.active:hover { border-bottom: 6px solid #2B2C32; }
	.menu .menu_close { display: none; }

	/* HEADLINES LARGE */
	h1 { font-size: 32px; }
	.hero .headline { top: 40%; left: 45px; }
	.hero .headline h1 { font-size: 32px; }
	.hero .headline h2 { font-size: 26px; }
	.hero .headline h3 { font-size: 22px; }

	.news_link { font-size: 16px; }
	.news_box .col_inner { padding: 20px 35px; }

	.event_day_name h2 {  padding: 7px 50px; font-size: 26px; }

	.staff_subheadline { font-size: 17px; }
}

@media screen and (min-width: 1024px) {
	.menu li { float: left; max-width: unset; }

	.filter_box .option_value { max-width: 135px; }

	section .content > h1 { max-width: 80%; margin-left: auto; margin-right: auto; }
}

@media screen and (min-width: 1280px) {
	.content { max-width: 1200px; }

	.filter_box .option_value { max-width: unset; }

	section .content > h1 { max-width: 70%; }
}

@media screen and (min-width: 1440px) {

}

@media screen and (min-width: 1920px) {
	.content { max-width: 1400px; }

	section .content > h1 { max-width: 60%; }
}

/*
		Colorbox Core Style:
		The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index: 1000; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{ margin: 0; }
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
		User Style:
		Change the following styles to modify the appearance of Colorbox.	They are
		ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:0;}
#cboxContent{margin-top:20px;background:#000;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{border:5px solid #000; background:#fff;}
#cboxTitle{ position: absolute; bottom: 0; left: 0; padding: 4px 7px; color: #CCCCCC; border-radius: 0 5px 0 0; background: #000000; }
#cboxCurrent{ display: none; }
#cboxLoadingGraphic{background: url(/src/img/core/colorbox-loading.gif) no-repeat center center;}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
#cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background: url(/src/img/core/colorbox-controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:bottom left;}
#cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background: url(/src/img/core/colorbox-controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
#cboxNext:hover{background-position:bottom right;}
#cboxClose{position:absolute; top:5px; right:5px; display:block; background: url(/src/img/core/colorbox-controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
#cboxClose:hover{background-position:bottom center;}