/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
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, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, 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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


/* CSS Bildschirm */
body{
font-family: 'Ubuntu Condensed', sans-serif;
font-weight: 400;
}
b{
font-weight: bold;
}
i{
font-style: italic;
}
u{
text-decoration: underline;
}


a {
color: #007bb7;
font-size: 13px;
text-decoration: none;
}

a:hover {
color: #666;
}



/* bildschirm im aufbau */
h1{
padding: 260px 0 0 0;
color: #007bb7;
font-size: 78px;
font-family: Arial,Helvetica,sans-serif;
text-align: center;
}
div.kontakt{
padding: 260px 0 0 0;
font-size: 22px;
font-family: Arial,Helvetica,sans-serif;
text-align: center;
line-height: 140%;
}



/* standard design */
#wrapper{
height: 1080px;
width: 1920px;
}
#uhr{
position: absolute;
top: 0; left: 0;
font-size: 100px;
line-height: 100px;
padding: 100px 0 0 1%;
}
#bildschirmUhr{
padding: 3px 20px;
background-color: #eee;
border-radius: 10px;
}
#bildschirmUhr span{
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
@-webkit-keyframes blinker{
  0%{opacity: 1.0;}
 50%{opacity: 0.0;}
100%{opacity: 1.0;}
}
@keyframes blinker{
  0%{opacity: 1.0;}
 50%{opacity: 0.0;}
100%{opacity: 1.0;}
}
#logo{
position: absolute;
top: 0; left: 0;
padding: 55px 0 0 1400px;
}
#logo img{
height: 150px;
width: auto;
}
#box1{
font-size: 50px;
padding: 100px 0 10px 17%;
}
#box2{
overflow: hidden;
width: 100%;
padding: 0 0 50px;
}
div.liste{
overflow: hidden;
}
#box3{
overflow: hidden;
position: absolute;
top: 0; left: 0;
height: 1080px; width: 1920px;
background-color: #000;
/*
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
*/
}

.flyerVeranstaltung{
position: absolute;
opacity: 0;
}

.flyerVeranstaltungBild{
position: absolute;
left: 0; top: 0;
height: 1080px;
width: 1920px;
/*z-index: 10;*/
}
.flyerVeranstaltungInhalt{
position: absolute;
left: 0; top: 700px;
height: 380px;
width: 1920px;
background-color: rgba(0,121,188,0.6);
/*z-index: 11;*/
}
.flyerVeranstaltungInhalt .titel{
position: absolute;
top: 30px;
left: 100px;
font-size: 85px;
font-weight: 600;
color: #fff;
/*z-index: 12;*/
/*
-webkit-animation-name: titel;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: titel;
animation-duration: 10s;
animation-iteration-count: infinite;
*/
}
/*
@-webkit-keyframes titel{
from { padding-left: 0; }
to { padding-left: 100px; }
}
@keyframes titel{
from { padding-left: 0; }
to { padding-left: 100px; }
}
*/
.flyerVeranstaltungInhalt .datum{
position: absolute;
top: 135px;
left: 100px;
font-size: 70px;
line-height: 80px;
font-weight: 600;
color: #fff;
/*z-index: 12;*/
}
.flyerVeranstaltungInhalt .zeit{
position: absolute;
top: 120px;
left: 330px;
font-size: 70px;
line-height: 80px;
font-weight: 600;
color: #fff;
/*z-index: 12;*/
}
.flyerVeranstaltungInhalt .ort{
position: absolute;
top: 220px;
left: 100px;
font-size: 70px;
line-height: 80px;
font-weight: 600;
color: #fff;
/*z-index: 12;*/
}
.flyerVeranstaltungInhalt .beschreibung{
overflow: hidden;
position: absolute;
top: 180px;
left: 100px;
height: 120px; width: 1620px;
font-size: 70px;
line-height: 80px;
color: #fff;
/*z-index: 12;*/
}
.flyerVeranstaltungInhalt .text{
overflow: hidden;
position: absolute;
left: 100px; top: 150px;
height: 180px; width: 1620px;
font-size: 70px;
line-height: 80px;
color: #fff;
/*z-index: 12;*/
}
.veranstaltungeTitel{
font-size: 50px;
padding: 0 0 20px 17%;
}

div.listev div.zeilev{
font-size: 50px;
line-height: 50px;
color: #0079bc;
padding: 14px 0 8px;
}
div.listev div.zeilev:nth-child(2n+1){
background-color: rgba(175,197,228,0.5);
}
div.listev div.zeilev div.pfeil{
display: none;
}
div.listev div.zeilev div.veranstaltung div.tag{
float: left;
width: 8%;
font-size: 30px;
line-height: 50px;
color: #000;
padding: 0 0 0 1%;
}
div.listev div.zeilev div.veranstaltung div.tag span.heute{
padding: 3px 10px;
background-color: #ffff00;
border-radius: 5px;
}
div.listev div.zeilev div.veranstaltung div.tag span.morgen{
padding: 3px 10px;
background-color: #d2ff4d;
border-radius: 5px;
}
div.listev div.zeilev div.veranstaltung div.tag span{
padding: 3px 10px;
background-color: #ffa6da;
border-radius: 5px;
}
div.listev div.zeilev div.veranstaltung div.zeit{
float: left;
width: 6%;
text-align: right;
padding: 0 2% 0 0;
}
div.listev div.zeilev div.veranstaltung div.zeit span{
}
div.listev div.zeilev div.veranstaltung div.zeit span.zeitheute{
}
div.listev div.zeilev div.veranstaltung div.zeit span.zeit{
}
div.listev div.zeilev div.veranstaltung div.zeit span.datum{
display: none;
}
div.listev div.zeilev div.veranstaltung div.titel{
float: left;
width: 35%;
}
div.listev div.zeilev div.veranstaltung div.ort{
float: left;
width: 48%;
}
div.listev div.zeilev div.clear{
clear: left;
}



div.hinweisunten{
font-size: 50px;
color: #fff;
padding: 20px 0 0 211.2px;
background-color: #007bb7;
}
div.datumzeit{
}
div.powered{
position: fixed;
left: 1000px;
bottom: 0;
width: 370px;
padding: 0 0 8px 0;
color: #fff;
font-size: 18px;
font-family: Arial,Helvetica,sans-serif;
font-weight: normal;
text-align: right;
z-index: 2;
}
div.domain{
position: fixed;
left: 30px;
bottom: 0;
width: 370px;
padding: 0 0 8px 0;
color: #fff;
font-size: 18px;
font-family: Arial,Helvetica,sans-serif;
font-weight: normal;
text-align: left;
z-index: 2;
}


/* timer */
#timer{
position: absolute;
top: 1070px; left: 0;
height: 10px; width: 0px;
background-color: rgba(175,197,228,0.5); /* hellblau */
-webkit-animation-name: timer;
-webkit-animation-duration: 600s;
-webkit-animation-timing-function: linear;
animation-name: timer;
animation-duration: 600s;
animation-timing-function: linear;
}
@-webkit-keyframes timer{
from { width: 0; }
to { width: 1920px; }
}
@keyframes timer{
from { width: 0; }
to { width: 1920px; }
}