﻿
#submenu { display:table }

.navigation { display:table-row;height:74px }
.navigation a { padding:21px 20px 16px 20px;background:url('../grafik/repeat/rpt_konzertkalender_submenue_grau_jahr.png'); }
.navigation .left { float:left; }
.navigation .right { float:right;}
.navigation div { background:url('../grafik/repeat/rpt_konzertkalender_submenue_grau_jahr.png');text-align:center;padding-top:20px;height:50px;margin:0px 67px;font-family:'BigCityGrotesquePro-Regular';font-size:28px;color:white }

#divEvents, #divKonzert { overflow:auto }
.events {  display:table-row;background:url('../grafik/repeat/rpt_konzertkalender_submenue_weiss.png');overflow:auto }
.events .item { padding:2px 0px;border-bottom:solid 1px gray;margin:0px 25px; display:block;font-family:'BigCityGrotesquePro-Regular' }
.events .item:first-child { margin-top:25px }
.events .item:last-child { margin-bottom:25px }
.events .item { padding:2px 0px;border-bottom:solid 1px gray;margin:0px 25px }
.events .item > div:nth-child(1) { float:left;width:50px;text-align:right;background-color:#A1A1A1;color:white;text-align:center;height:32px;padding-top:13px;margin-right:2px }
.events .item > div:nth-child(2) { margin-left:90px;display:table-cell;vertical-align:middle;height:45px;padding:0px 10px;width:380px }
.events .item > div:nth-child(2) > div { float:right;padding:2px 4px 0px 4px;background-color:#B61615;color:white;font-size:0.8em }
.event-kategorie { background-color:#B61615;color:white;padding:5px 0px 2px 0px;text-align:center;max-width:267px;margin:0px auto }

#content .news .btn_ticket { margin-top:10px;margin-bottom:20px; }
.livestream_info { padding-bottom:10px }
#content .news .btn_ticket div.info_tel { display:inline-block;width:250px;margin-top:20px }
#content .news .btn_ticket > a, #content .news .btn_ticket a.aLivestream_Send { background-color:#B61615;width:154px; color:white; float:left; position:relative;margin-top:15px; padding:14px 0px 14px 62px; display:inline-block;margin-right:30px;background-image:url('../grafik/Buttons_Icons/ico_ticket.png');background-position:10px 5px; background-repeat:no-repeat;}
#content .text strong, #content .text b { font-family:'BigCityGrotesquePro-Bold';font-weight:normal }
.tickets { display:block }

.aLivestream { cursor:pointer }
.livestream_form { display:none; margin:20px 0px 20px 0px;padding:20px;float:left;background-color:#7F7F7F;background-image:url(../grafik/repeat/rpt_konzertkalender_submenue_weiss.png);position:relative; }
.livestream_form input[type='text'], .livestream_form input[type='password'], .livestream_form textarea, .livestream_form select { border-width:0px;background-color:#F2F2F2;width:90%;padding:10px 5% 8px 5%;margin-bottom:6px;color:black;background-image:none }
.livestream_form select { width:230px }
.livestream_form .divInfo { padding-top:10px; color:#B61615;display:block;float:left}
.livestream_form .divInfo font { padding-top:10px; color:#B61615}
.livestream_daten {     display: inline-block; width: 140px; margin-left: 10px; }
.livestream_form input[type='checkbox'] { float:left }

#content .konzert_left .medien {
    display: none
}
#content .ProgramMedien { display:none }
#content .ProgramMedien.btm { display:block }
@media screen and (min-width: 1550px)   {
    #content .konzert_left .medien { display:block }
    #content .ProgramMedien { display:block }
    #content .ProgramMedien.btm { display:none }
    .konzert_left { float:left;width:200px }
    #content .konzert_left .medien img { max-width:220px }
    #content .konzert_left .datum { margin-bottom:30px; margin-left:50px; }
    #content .ProgramMedien { float:right;width:300px;padding-top:0px }
    #content .ProgramMedien .medien_item_video { width:100% }
    #divKonzert .medien { display:none }
}

@media screen and (min-width: 900px) and (max-width: 1300px)  { 
.events .item > div:nth-child(2) { font-size:15px }
}

.events .akt > div:nth-child(1) { background-color:rgb(182,22,21,0.7); }
.events .sel div,.events .sel > div:nth-child(1) { background-color:rgb(182,22,21,0.7);color:white }
.event_social img { position:relative;top:7px}
.event_social { margin:10px 0px 10px 0px}
@media screen and (max-width: 600px)  { 
.event_social {font-size:14px}
}

.ProgramMedien { margin-left:30px;padding-top:20px }
.ProgramMedien h4 { border-bottom:solid 1px #CCCCCC;margin-bottom:5px;color:#7F7F7F;font-size:20px;padding-left:10px }
.medien_item_video { width:33.3%;float:left;  }
.medien_item_video > a > h4 { margin:0px;padding:16px 8px 6px 0px;font-weight:normal;font-size:20px;line-height:27px; }
.medien_item_video > a { padding-right:6px;display:block;height:220px;overflow:hidden;font-size:14px; }
.medien_item_video:nth-child(4) > a { padding-right:0px; }
.medien_item_video > a > div:first-child .play, .medien_item_video > a > div:first-child { width:100%;height:200px;background-position:center center }
div.play { width:100%;height:168px;background:url('../grafik/buttons_icons/ico_video_play.png') center center no-repeat }
.lightbox iframe { height:550px }
.media_album_title { text-align: center; font-size: 34px; }

 #divKonzert { padding-right:30px }
#content > div { padding:52px 0px 0px 59px}
@media screen and (max-width: 1300px)  { 
#content > div {padding:30px 0px 0px 30px}
}
@media screen and (max-width: 650px) {
    #content > div { padding: 30px 0px 0px 10px }
}

#content .news { margin:0px 400px 0px 30px;}
#content .news h3 { margin:10px 0px 0px 0px;color:black;padding:0px}
#content .datum { float:left;width:80px;text-align:center }
#content .datum > div:nth-child(1) { font-size:16px }
#content .datum > div:nth-child(2) { font-size:40px }
#content .datum > div:nth-child(3) { font-size:30px }
#content .datum > div:nth-child(4) { font-size:20px }
#content .news a { color: #B61615; }


@media screen and  (max-width:1750px)  {
    #content .news { margin:0px 200px 0px 30px;}
}

@media screen and  (max-width:1550px)  {
    #content .news { margin:0px 400px 0px 0px}
    .ProgramMedien { margin-left:0px }
    #content .datum { float:none;text-align:left;margin-bottom:20px }
    #content .datum > div { display:inline;padding-right:8px}
    #content .datum > div:nth-child(1) { font-size:20px }
    #content .datum > div:nth-child(2) { font-size:20px }
    #content .datum > div:nth-child(3) { font-size:20px }
    #content .datum > div:nth-child(4) { font-size:20px }
    #content h1 { font-size:20px}
}

@media screen and (min-width:900) and (max-width:1300px)  {
    .events { font-size:12px }
    .events .item > div:nth-child(1) { height:27px;padding-top:11px; }
    .events .item > div:nth-child(2) { height:38px; }
    .navigation div { font-size:24px;padding-top:22px;height:48px }
}

    
@media screen and (min-width:900px) and (max-width:1450px)  {
    #page #content .news { margin:0px}
    #page #content .medien { float:none;display:block;width:auto;text-align:center;padding-bottom:10px } 
    #page #content .konzert_left .medien { display:none }   
}

@media screen and (max-width:800px)  {
    #page #content .news { margin:0px}
    #page #content .medien { float:none;display:block;width:auto;text-align:center;padding-bottom:10px } 
    #page #content .konzert_left .medien { display:none }   
    .medien_item_video { width:50%; } 
    .lightbox iframe { height:420px }    
}

@media screen and (min-width:900px) and (max-width:1200px)  {
    .medien_item_video { width:50%; }   
}

@media screen and (max-width:600px)  {
    .medien_item_video { width:100%; } 
    .lightbox iframe { height:320px }  
}
    
@media screen and (max-width:900px)  {
   #page .navigation a.left, #page .navigation a.right { padding:21px 20px 16px 20px; }
   .events .item > div:nth-child(1) { height:42px;padding-top:23px;width:64px }
    .events .item > div:nth-child(2) { display:block;width:auto;margin-left:68px;padding-top:24px;height:41px;background-color:#E5E5E5 }
    .events .item.sel > div:nth-child(2) { background-color:#B55B5D }
    .events .item.akt > div:nth-child(2) { background-color:#F2ECE0 }
    .events .item { margin:0px }
    .events .item:first-child { margin-top: 0px; }
    .navigation { height:72px }
}
