@import url(https://use.typekit.net/jxh4lqq.css);
:root {
--blue-dark: #16103f; 
--blue-main: #0B3F63; 
--blue-lightest: #e5eaef;
--blue-lighter: #4AA4AF;
--blue-light: #448196; 
--yellow: #F8E83C; 
--red: #EE3E43;
--h1: 48px;
--h2: 32px;
--h3: 28px;
--h4: 24px;
--h5: 20px;
--h6: 18px;
--medium: 16px;
--small: 14px;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, tt, var, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
} article, details, figcaption, figure, 
header, hgroup, menu, nav,  {
display: block;
}
body{
color: var(--blue-dark);
background: white;
font-size: var(--h6);
font-family: oscine, sans-serif;;
line-height: 1.5;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
font-stretch: ultra-expanded !important;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
p {font-size: var(--h6);
line-height: 1.5;
margin: 0 0 20px 0;
padding: 0 }
img {display: inline-block;}
h1, h2, h3, h4, h5, h6 {
color: var(--blue-dark);
font-family: fatfrank, sans-serif;
line-height: 1;
} 
ol, ul {list-style: none;}
p ul { margin-bottom: 20px;}
P li:before {
content: "• ";
margin: 0 5px 0 25px;}
::selection, ::-moz-selection { background: var(--accent-light); color: #fff; }
table {border-collapse: collapse;
border-spacing: 0;}
*{ -webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none; }
.row .row{margin: 0;}
.four.columns + .eight.columns,
.eight.columns + .four.columns{
padding: 0 0 0 30px
}
.logo {height: 45px !important;}
iframe{
width: 100%;
max-width: 1120px;
height: 600px;
margin: 0 auto;
overflow: hidden;
display: block;
} .grid {display: grid; grid-gap: 20px;}
.grid-4-4, .grid-4-3, .grid-4-2, .grid-4-1 {grid-template-columns: repeat(4, 1fr);}
.grid-3-3, .grid-3-2, .grid-3-1 {grid-template-columns: repeat(3, 1fr);}
.grid-2-2, .grid-2-1, .grid-container-2 {grid-template-columns: repeat(2, 1fr);}
#header {
background: var(--blue-main);
padding: 15px 0;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 1000;
}
#mobile {display: none !important;}
#header ul#navigation {color: white; text-align: right; font-size: var(--h5);}
#header ul#navigation li {display: inline-block;}
#header ul#navigation li a {color: white; margin-left: 20px; font-weight: 700;}
#header ul#navigation li a:hover {color: var(--red); text-decoration: underline;}
#header ul#navigation li.ticket a {background: var(--red); padding: 5px 10px; border-radius: 3px;}
#header ul#navigation li.ticket a:hover {background: var(--yellow);text-decoration: none;}
#sponsoren {
display: table;
text-align: center;
margin: 0 auto;
}
.partner {background: white; 
display: inline-block; 
vertical-align: middle; 
padding: 10px 20px;
}
.partner img {filter: grayscale(100%);}
.partner img:hover {filter: grayscale(0%);}
#footer {
background: var(--blue-lighter);
color: white;}
#footer h4 {color: white;}
#footer .socialmedia {text-align: right; font-weight: 700; text-transform: uppercase; font-size: 14px;}
#footer .socialmedia a {color: white; font-size: var(--h2);}
#footer .socialmedia a:hover {color: var(--blue-dark); text-decoration: none;}
#footer ul#navigation {font-family: fatfrank, sans-serif; font-size: var(--h4); display: inline-block;}
#footer ul#navigation li {display: inline-block;padding-right: 20px;}
#footer ul#navigation li a {color: white;}
#hero {
background: url(//parktheater-luenen.de/wp-content/themes/parktheater-2024/img/global/circle.png) no-repeat 60% 70%, url(//parktheater-luenen.de/wp-content/themes/parktheater-2024/img/global/parkdeck.png) no-repeat top center, url(//parktheater-luenen.de/wp-content/themes/parktheater-2024/img/global/sky.jpg) no-repeat center center;
-webkit-background-size: 400px, contain, cover;
background-blend-mode: hard-light, hard-light;
-moz-background-size: 400px, contain, cover;
-o-background-size: 400px, contain, cover;
background-size: 400px, contain, cover;
padding: 20px;
text-align: center;
height: 700px;
display: table;
width: 100%;
vertical-align:center;
text-transform: uppercase;
font-family: fatfrank, sans-serif;
font-size: var(--h4);
}
#hero img {max-width: 600px; padding: 0px 50px;}
#hero .row {
display: table-cell;
vertical-align: middle;
}
#main .home {padding: 0 150px !important; text-align: center;}
#main {margin-top: 50px;}
#main .container {position: relative;}
#main .container .circle {
position: absolute;
top: 100px;
right: -50px;
background: var(--yellow); height: 100px; width: 100px; border-radius: 100px;}
#yellow {background: var(--yellow); padding: 80px 0;}
section .image  {text-align: center;}
section .image img {max-height: 60vh; width: auto;}
section .image .copy {color: var(--blue-dark); font-size: 8px;}
section .content {
display: flex;
align-items: center;
text-align: center;
}
section .content > div e{width: 100%;}
section .content h1 {font-size: 72px; text-transform: uppercase;}
section .content .timing {padding: 10px 0;}
section .content .detail {display: block; margin: 20px 0; padding: 10px 0; border-top: 1px solid var(--blue-dark); border-bottom: 1px solid var(--blue-dark);}
section .content a.button {background: var(--blue-dark); border-radius: 0;}
section .content a.button:hover {background: var(--red); color: white;}
.bottom-left {
position: absolute;
bottom: 0px;
left: 0px;
padding: 10px;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
width: 100%;
}
.copyright {position: absolute; top: 2px; right: 2px; color: white; font-size: 8px; text-shadow: 0px 0px 3px rgba(0,0,0,.7); } .centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.red {color: var(--red);}
.redbg {background: var(--red); color: white; padding: 2px 6px; border-radius: 3px;}
.soldout {background: var(--red); color: white; margin-bottom: 25px; 
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
font-size: 16px;
text-align: center;}
.small {font-size: var(--small);}
#event {display: flex; width: 100%; background: var(--blue-main); border-radius: 5px;}
#event span {display: block; font-family: fatfrank, sans-serif; }
#event .day {text-transform: uppercase; margin-top: 10px;}
#event .date {font-size: var(--medium); color: white;}
#event .time { font-family: oscine, sans-serif;}
#event .title {font-size: var(--h3); color: white; line-height: 1;}
#event .artist {font-size: var(--h5); color: white; line-height: 1;}
#event img {width: 100% !important; background: red; display: block;}
#event.old img {filter: grayscale(100); mix-blend-mode: screen;}
#event.old:hover {box-shadow: 5px 10px 20px rgba(0,0,0,.2);}
#event.old:hover .title, #event.old:hover .artist, #event.old:hover .date {color: var(--yellow) !important;}
#event .bottom-left {
position: absolute;
bottom: 0px;
left: 0px;
padding: 30px 10px 10px 10px;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7));
width: 100%;
border-radius: 5px;
text-align: left;
} .welcome{
width: 100%;
margin: 0 0 0 0;
padding: 0 0px 10px 0;}
.row.full{width: 100%;margin: 0 0 10px 0;}
.four.columns.vertical .room_intro{
margin: 0 0 10px 0;
}
blockquote{
font-size: 15px !important;
text-align: center;
margin: 0;
float: inline-block;
max-height: 10px !important;
}
dl dt{
display: block;
float: left;
width: 100%;   
padding: 20px 0 0 0;
}
dl dd{
display: block;
float: right;    
width: 100%;
} ::-webkit-input-placeholder{
color: #686868;
}
:-moz-placeholder{
color: #686868;
}
input[placeholder], [placeholder], *[placeholder]{
color:#686868!important
} .entry{float: left;width: 100%;}
.center {text-align: center !important;}
.divider{
clear: both;
float: left;
width: 100%;
height: 50px;
}
div.pagination{
clear: both;
float: left;
width: 100%;   
padding: 10px 0 0 0;
}
div.pagination div.centered{
width: 340px
}
div.pagination span {
float: left;
width: 24px;
height: 24px;
margin: 0px 5px 0 0;
text-align: center;
}
#paging, .pagination { margin-bottom: 50px; font-size: 12px; } #lightbox {
position:fixed; top:0; 
left:0; 
width:100%; 
height:100%; 
background: rgba(0,0,0,0.7);
text-align:center;
z-index: 1000000;
}
#lightbox p {
text-align:right; 
color:#fff; 
margin-right:20px; 
font-size:12px; 
}
#lightbox img {
box-shadow:0 0 25px #111;
max-width:940px;
}
ul#gallery {column-count: 5; column-gap: 7px;}
ul#gallery li {} .alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter, div.aligncenter {display: block;margin: 5px auto 5px auto;}
.alignright {float:right;margin: 5px 0 20px 20px;}
.alignleft {float: left;margin: 5px 20px 20px 0;}
.aligncenter {display: block;margin: 5px auto 5px auto;}
a img.alignright {float: right;margin: 5px 0 20px 20px;}
a img.alignnone {margin: 5px 20px 20px 0;}
a img.alignleft {float: left;margin: 5px 20px 20px 0;}
a img.aligncenter {display: block;margin-left: auto;margin-right: auto}
.wp-caption {
max-width: 100%; padding: 0px 0px 0px;
text-align: left;
background: var(--accent-light);
color: white;
}
.wp-caption.alignnone {margin: 5px 20px 20px 0;}
.wp-caption.alignleft {margin: 5px 20px 20px 0;}
.wp-caption.alignright {margin: 5px 0 20px 20px;}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
padding: 0;
width: 100%;
} .search404 {
margin-right: 5px;
text-align: center;margin: 0 auto;
display: inline-block}
.search404 input{
font-size: 18px;
padding: 10px 0px;
background: none;
color: white !important; 
border-bottom: 3px solid white;
border-left: none;
border-right: none;
border-top: none;
outline: none;
height: auto;
width: 100%;}
.search404 input:focus{
background:none;
border-bottom: 3px solid var(--blue-dark);
}
.search404 input::placeholder {
color: white;
}
.search404 input.searchsubmit{display: none;}
#search input#s {
max-width: 500px; margin: 0 auto;
border-bottom: 3px solid var(--blue-dark);
border-left: none;
border-right: none;
border-top: none;
font-size: var(--h3);
padding: 10px 20px;
height: 60px;
color: var(--blue-dark);
}
input[type=button], input[type=submit], input[type=reset] {
background: var(--accent-light);
color: #fff;
padding: 10px 20px 10px 20px;
border: 0px;
text-decoration: none;
cursor: pointer;
font-size: 14px;
font-weight: bold;
border: 1px solid var(--accent-light);
}
input:hover[type=button], input:hover[type=submit], input:hover[type=reset] {
background: #fff;
color: var(--accent-light);
text-decoration: none;
}  h1{
font-size: var(--h1);
margin: 0 0 10px 0;
padding: 0;
}
h1.welcome, h2.welcome, h3.welcome {text-align: center; color: var(--blue-main);}
h2{font-size: var(--h2); margin: 0 0 10px 0; padding: 0;}
h3{font-size: var(--3); margin: 0 0 15px 0; color: var(--red);}
h4{font-size: var(--h4); margin: 0 0 20px 0;}
h5{font-size: var(--h5); margin: 0 0 15px 0;}
h6{
font-size: 14px;
font-weight: bold;
width: 100%;
padding: 5px 3px 5px 3px;
margin: 0 0 5px 0;
} .entry h3{
font-size: 18px;
color: #444;
text-align: left;
} .table_container{
float: left;
width: 100%;
margin: 20px 0;    
}
table{
float: left;
width: 94%;
font-size: 13px;
margin: 20px 3%;
}
th{
border-bottom: 1px solid #686868;
border-right: 1px solid #DEDCD3;
color: #444;
font-weight: normal;
padding: 2%;
}
td{
border-bottom: 1px solid #d7d7d7;
border-right: 1px solid #DEDCD3;
text-align: center;
padding: 5px;
}
th:last-child,
td:last-child{
border-right: none;
}
tr:last-child td{
border-bottom: none;
} .img_left{
float: left;
margin: 0 30px 30px 0;
}
.img_center{
float: none;
display: block;
margin: 0 auto 30px;
} a{
text-decoration: none;
transition: text-decoration .2s ease;
}
p a {color: var(--accent-strong);}
a:hover, li.selected a{
text-decoration: underline;
color: var(--accent-light);
transition: text-decoration .2s ease;
}
a.button{
background: var(--red);
color: white;
font-weight: bold;
padding: 6px 10px;
cursor: pointer;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
border-radius: 3px;
}
a.button:hover{
text-decoration: none;
color: var(--red);
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
background: var(--yellow);
} div.pagination a, .wp-pagenavi a, .wp-pagenavi a:visited, .wp-pagenavi span {
float: left;
display: inline-block;
text-align: center;
background-color: #fff;
color: #444;
font-size: 12px;
margin: 0 5px 0 0 !important;
padding: 7px 9px !important;
line-height: 1;
border: none !important;
}
div.pagination a:hover, .wp-pagenavi a:hover{
background-color: #EFEFEF;
border-bottom: none;
text-decoration: none;
}
div.pagination a.selected, .wp-pagenavi span.current{
background-color: #333;
color: #fff;
}
}