@charset "UTF-8";
@font-face {
    font-family: 'Roboto Slab';
    src: url('fonts/robotoslab-variablefont_wght-webfont.woff2') format('woff2'),
         url('fonts/robotoslab-variablefont_wght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lato';
    src: url('fonts/lato-regular-webfont.woff2') format('woff2'),
         url('fonts/lato-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lato Bold';
    src: url('fonts/lato-bold-webfont.woff2') format('woff2'),
         url('fonts/lato-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body {
    margin: 0;
    padding: 0;
    background-color: black;
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    line-height: 22px;
    color: #555555;   
}
a { 
    text-decoration: none;
    border:none;
    padding:0;
    margin:0;
}
.dwide a:link {
    color: #ff7513;    
}
.dwide a:visited {
    color: #d37633;    
}
.dwide a:hover {
    color: #ff7513;    
}
#offcanvas ul {
    padding: 0;
    margin:0;
}
li {
    list-style-type: none;
}
input {
    font-size: 1.1em;
    padding: 6px;
    margin-bottom: 2em;
    background-color: #dedede;
    color: #575656;
    border:none;
}
textarea {
    font-size: 1.1em;
    padding: 14px;
    margin-bottom: 2em;
    background-color: #fff;
    color: #575656;
    width:100%;
    border:none;
    border-radius: 7px;
}
#formdiv input {
    width: 100%;
    padding: 14px;
    color: #55514d;
    background-color: #ffffff;
    border-radius: 7px;

}
label {
    font-family: 'Lato', sans-serif;
    font-size:0.8em;
    color:crimson;
    padding-left: 10px;

}
button {
    font-size: 1.4em;
    padding: 6px;
    margin-bottom: 2em;
    color: #4a413d;
    border:none;
    border-radius: zpx;
}
#wrapper .dwide input {
    border-bottom: 1px solid white;
}
h1 {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-size: 4em;
    line-height: 0.9em;
    margin-left: 2em;
    color:#6f6762;
}
h2 {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;    
    font-size: 2.9em;
    line-height: 0.9em;
    color:#6f6762;
}
h3 {    
    font-family: 'Roboto Slab', serif;
    font-weight: 300;    
    font-size: 2.2em;
    line-height: 0.9em;
    color:#6f6762;
}
h5 {    
    font-family: 'Roboto Slab', serif;
    font-weight: 300;    
    font-size: 1.8em;
    line-height: 1em;
    color:#6f6762;
}
h6 {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;    
    font-size: 1.8em;
    line-height: 0.9em;
    padding-left: 2em;
    color:#6f6762;
}
#sec02 h1 {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-size: 4em;
    line-height: 0.9em;
    margin-left: 2em;
    color:#f4f4f4;
}
#sec02 h2 {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;    
    font-size: 2.9em;
    line-height: 0.9em;
    color:#f4f4f4;
}
#sec02 h3 {    
    font-family: 'Roboto Slab', serif;
    font-weight: 300;    
    font-size: 2.2em;
    line-height: 0.9em;
    color:#f4f4f4;
}
#sec02 h5 {    
    font-family: 'Roboto Slab', serif;
    font-weight: 300;    
    font-size: 1.6em;
    line-height: 1em;
    color: #ff7513;    
    padding-left:6%;
}

#sec02 h6 {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;    
    font-size: 1.8em;
    line-height: 0.9em;
}
.row h5 {margin-left:4%;}
#offcanvas {
	opacity: 0;
	padding: 30px;
	position: absolute;
	left: -100%;
    width: 100%;
    min-height:98%;
	background-color: rgba(40,40,40,0.9);
	z-index: 120;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	-ms-transition: all 0.4s;
	transition: all 0.4s;
}
#offcanvas li {
	list-style-type: none;
}
#offcanvas ul a:link {
    display:inline;
    font-family: 'Roboto Slab', serif;
    font-weight: 300; 
	font-size: 1.4em;
    line-height: 1.4em;
	text-decoration: none;
	color: #E4E4E3;
}
#offcanvas ul a:visited {
	color: #E4E4E3;
}
#offcanvas ul a:hover {
    color: #ff7513;    
}
#offcanvas ul a:active {
    color: #ff7513;    
}

/* ab hier alle header-blöcke ... */

header {
    width:100%;
    position: relative;
}
.headerindex {
    background-image: url(images/kachel7.jpg);
    background-position: bottom;
    background-repeat: repeat-x;
    padding-bottom:15px;
}
.headerpages {
}
header img.bckgrnd {
    width: 100%;
}
nav {
    position: absolute;
    left: 0em;
    top: 0.7em;
    text-align: left;
    width: 100%;
    height:50px;
}
#navlang {
    position: absolute;
    left: 0;
    bottom: 1.2em;
    text-align: right;
    width: 96%;
    height:50px; 
}
nav ul li {
    display: inline;
    list-style-type: none;
}
header nav a:link {
    color: rgb(217, 200, 191);
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-size: 0.9em;
    padding: 3px 8px;
}
header nav a:visited {
    color: rgb(217, 200, 191);
}
header nav a:hover {
    color: #ff7513;    
}
header nav a:active {
    color: #ff7513;    
}
header #navlang a:link {
    color: rgb(217, 200, 191);
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-size: 0.9em;
    padding: 3px 8px;
}
header #navlang a:visited {
    color: rgb(217, 200, 191);
}
header #navlang a:hover {
    color: #ff7513;    
}
header #navlang a:active {
    color: #ff7513;    
}
#logo {
    position: absolute;
    width: 41%;
    left: 12%;
    bottom: 10%;
}
#logo img {
    width:100%;
}
#nvsymb {
		position: absolute;
		bottom: 10%;
		right: 7%;
		display: none;
        opacity: 0.8;
}
#nvsymb img {
	width: 40px;
}
#preloader {
    display: none;
}

section {
    min-height: 500px;
    width: 100%;   
}
.sectionfooter {
    width:100%;
    text-align: center;
}
.sectionfooter img {
    width: 30px;
} 
#sec01 {
    background-color: #e6e6e6;
    background-image: url(images/kachel6.jpg);
    background-position: bottom;
    background-repeat: repeat-x;
    padding-top: 5%;
    padding-bottom: 5%
}
#sec03 {
    background-color: #d4d4d4;
    background-image: url(images/livehg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    padding-top: 5%;
    padding-bottom: 5%;
}

#sec03 .wrapperlive a:link {
    display: inline;
    background-color: #ff7513;
    color: white;
    text-decoration: none;
    padding: 4px;
}
#sec03 .wrapperlive a:visited {
    background-color: #ff7513;    
    color: white;
}
#sec03 .wrapperlive a:hover {
    color:black;
} 
#sec03 .wrapperlive a:active {
    color:black;
}
#sec01 .wrppr a:link {
    color: #ff7513;    
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-size: 1em;
    padding: 3px 8px;
}
#sec01 .wrppr a:visited {
    color: #ff7513;    
}
#sec01 .wrppr a:hover {
    color:#555555;
} 
#sec01 .wrppr a:active {
    color:#555555;
}
#sec01 .dsmall b {
    color: black;
}
#sec02 {
    background-color: black;
    background-image: url(images/kachel6.jpg);
    background-position: bottom;
    background-repeat: repeat-x;
    padding-bottom: 50px;
    padding-top: 50px;
    font-size: 1.em;
    line-height: 1.5em;
    color: #c3c3c3;
}

#sec02 .dsmall b {
    color: #e6e6e6;
}
#sec02 .dwide div {
    text-align:right;
    position: relative;
    width:100%;
}
#sec02 .dwide div img {
    width: 98%;
}
#sec02 .dwide strong {
    color: #ff7513;    
}
#sec02 .dsmall strong {
    color: #ff7513;    
}
#sec02 .pheadl {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;    
    font-size: 2em;
    line-height: 0.9em;
    color: #ff7513;    
    padding-left: 6%;
}
#sec02 .inlinehdl {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;    
    font-size: 2em;
    line-height: 0.9em;
    color: #ff7513;    
}
.wrnng2 {
    color:#c60e31;
    font-family: 'Abel', sans-serif;
    font-size: 1.8em;
    line-height: 1.2em;
}
#wrapper {
		position: relative;
        left: 4%;
		width: 92%;
		display: flex;
        flex-wrap: wrap;
        justify-content:center;
		min-height: 400px;
}
#wrapperinfo {
        position: relative;
        left: 4%;
		width: 92%;
		display: flex;
        flex-wrap: wrap;
        justify-content:center;
		min-height: 400px;
}
#wrapperinfo .dsmall {
        flex: 1;
        min-width:180px;
        padding-left: 20px;
        padding-right: 30px;
    
}
#wrapperinfo .dwide {
        flex: 2;
        padding-left: 20px;
        padding-right: 30px;
        min-width: 300px;
}
#wrapperinfo .dwide img.iminfo {
        width: 100%;
}
#sec02 .rowwrapper {
        position: relative;
        left: 4%;
		width: 92%;
		display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
}

#sec02 #discwrapper {
        position: relative;
        left: 15%;
		width: 70%;
		display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    
}
#sec02 .rowwrapperdisc {
        position: relative;
        left: 12%;
		width: 76%;
		display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
}
#fwrapper {
		position: relative;
        left: 5%;
		width: 90%;
		display: flex;
        flex-wrap: wrap-reverse;
        justify-content:center;
}
div#infos .rowwrapper .dwide p {
    padding-left: 4%;
}
div#infos .rowwrapper .dwide a:link {
    color: rgb(227, 227, 227); 
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-size: 1em;
    padding: 3px 8px;
}
div#infos .rowwrapper .dwide a:visited {
    color: rgb(227, 227, 227); 
}
div#infos .rowwrapper .dwide a:hover {
    color: #ff7513;    
}
div#infos .rowwrapper .dwide a:active {
    color: #ff7513;    
}
#archiv a:link {
        color: #ff7513;  
        text-decoration: none;
}
#archiv a:visited {
        color: #ff7513;  
}
#archiv a:hover {
        color: #833d0b;  
}
#archiv a:active {
        color: #833d0b;  
}
#fdwide {
    flex:2;
    color: #f7f7f7;
    padding:9px;
    min-width: 300px;
}
#footerinfo #fdwide p {
    line-height: 1.55em;
}
#footerinfo #fdsmall p {
    line-height: 1.55em;
}
#fdsmall {
    flex:1;
    color: #ff7513;    
    padding:10px;
    min-width: 200px;
}
#footerinfo #fdsmall {
    flex:1;
    color: #ff7513;    
    line-height: 1.2em;
    padding: 10px;
    min-width: 200px;
}
.bildunterschrift2{
    color: #cc7e45;
    font-size: 0.8em;
    line-height: 1em;
}
#wrapper .dwide {
    padding-left: 20px;
    padding-right: 30px;
    min-width: 300px;

}
#sec02 .rowwrapper .dwide {
    padding-left: 30px;
    padding-right: 20px;
}
#sec02 #discwrapper .dwide {
    padding-left: 30px;
    padding-right: 20px;
}
#wrapper .dsmall {
    padding-left: 20px;
    min-width: 200px;
}
 #sec02 .rowwrapper .dsmall {
    padding-left: 20px;
    padding-right: 30px;
}
 #sec02 #discwrapper .dsmall {
    padding-left: 20px;
    padding-right: 30px;
} 
 #sec02 div#infos .rowwrapper .dwide {
    text-align: left;
}
.created {
    font-family: 'Lato', sans-serif;
    font-size: 0.8em;
    line-height: 1.2em;
    color:black;
}
.hinweis {
    font-family: 'Lato', sans-serif;
    font-style: italic;
    font-size: 0.9em;
    line-height: 1.2em;
}
.medianav {
    width:82%;
    text-align: right;
    padding-left: 10%;
}
.medianav a:link {
    color: #d9bfb1;
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-size: 0.75em;
}
.medianav a:visited {
    color: #d9bfb1;   
}
.medianav a:hover {
    color: #ff7513;    
}
.medianav a:active {
    color: #ff7513;    
}
#sec02 .rowwrapperdisc .dverysmall {
    flex:1;
    min-width: 200px;
    padding-right: 20px;
}
#sec02 .rowwrapperdisc .dverywide {
   font-size: 1em;
   padding-left: 20px;
   min-width: 260px;
   flex:2;
}

#discwrapper .dveryverywide {
   font-size:1em;
   padding-left: 20px;
   flex:4;
}

#discwrapper .dverysmall {
    flex:1;
    min-width: 150px;
    padding-right: 20px;
}
.rowwrapper .dverywide {
   font-size: 1em;
   padding-left: 20px;
   flex:2;
}
#discwrapper .dverywide {
   font-size: 1em;
   padding-left: 20px;
   flex:2;
}
#sec02 .rowwrapperdisc a:link {
   color: #ff7513;    
    text-decoration: none;
}
#sec02 .rowwrapperdisc a:visited {
   color: #ff7513;    
}
#sec02 .rowwrapperdisc a:hover {
   color: #ffffff;    

}
#sec02 .rowwrapperdisc a:active {
   color: #fff;    
}
#sec02  form a:link {
   color: #ff7513;    
    text-decoration: none;
}
#sec02 form a:visited {
   color: #ff7513;    
}
#sec02 form a:hover {
   color: #ffffff;    
}
#sec02 form a:active {
   color: #fff;    
}
#discwrapper .dveryverywide {
   font-size:1em;
   padding-left: 20px;
   flex:4;
}

#sec02 #discwrapper .dverywide h5 {
        padding-left: 0;
    }
#sec02 #discwrapper .dverysmall img {
    width: 90%;
    border: 1px solid #a7a7a7;
    padding: 3px;
    margin-bottom: 1em;
}
#sec02 .rowwrapperdisc .dverysmall img {
    width: 100%;
    border: 1px solid #666;
    padding: 3px;
    margin-bottom: 3em;
}
#archiv {
    width: 60%;
    margin:auto;
}
#archiv h5 {
    display: inline;
}
.wrappershop p {
    font-family: 'Roboto Slab', serif;
    width:60%;
    margin:auto;
    text-align: left;
    font-size: 0.9em;
    font-weight: 300;
    line-height: 1.3em;
}
.wrapperlive p {
    font-family: 'Lato', sans-serif;
    width:80%;
    margin:auto;
    text-align: left;
    font-size: 1em;
    line-height: 1.3em;
}
.wrapperlive p strong {
       color: #ff7513;    
}
.wrappershop p strong {
       color: #ff7513;    
}
.wrapperlive h5 {
       padding-left: 10%;    

}
.wrappershop h5 {
       padding-left: 20%;    

}
.wrappershop #formdiv {
    width:60%;
    margin:auto;
}
.cdtitel {
    font-family: 'Roboto Slab', serif;
    font-size: 1.8em;
    font-weight: 400;
    line-height: 1.4em;
    color: #ff7513;
}
#wrapper .dsmall img.fblogo {
    width:28%;
}

div#plakate .dwide a:link {
    color: rgb(227, 227, 227); 
    text-decoration: none;
}
div#plakate .dwide a:visited {
    color: rgb(227, 227, 227); 
}
div#plakate .dwide a:hover {
    color: #ff7513;    
}
div#plakate .dwide a:active {
    color: #ff7513;    
}
div#plakate .dwide {text-align: left}
.wrppr {
		position: relative;
        left: 2%;
		width: 96%;
		display: flex;
        flex-wrap: wrap;
}
.shows {
    font-size: 0.9em;
    line-height:1.4em;
    color: #ff7513;    
}
#sec03 p.shows2 {
    font-size: 1.25em;
    line-height:1.4em;
    color: #ff7513;  
}
#wrapper .dwide .shopname {
    font-family: 'Lato', sans-serif;
    font-size:1.1em;
    line-height: 1.2em;
    color: #e66c14;    
}
#wrapper .dwide .credits {
    font-family: 'Lato', sans-serif;
    font-size:0.94em;
    line-height: 1.4em;
    color: #f2f2f2;    
}
#sec01 #wrapper .dsmall a:link {
    color: #e66c14;    
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-size: 1em;
}
#sec01 #wrapper .dsmall a:visited {
    color: #e66c14;    
}
#sec01 #wrapper .dsmall a:hover {
    color:#555555;
} 
#sec01 #wrapper .dsmall a:active {
    color:#555555;
}

.wrappershop a:link {
    color: #e66c14; 
    text-decoration: none;
}
.wrappershop a:visited {
    color: #e66c14;    
}
.wrappershop a:hover {
    color:#555555;
} 
.wrappershop a:active {
    color:#555555;
}

span.promocaption {
   font-size: 0.75em;
    line-height: 0.9em; 
    color:#f0eeee;
    
}
.kontakt {
    font-size: 0.8em;
    line-height: 1.3em;
}
.kontakt strong {
     color: #ff7513;    

}
span.venue {
    color: #555555;   
}
span.ticket {
    padding: 4px;
    background-color: orange;
    color: white;
}
.row {
    position:relative;
    width: 100%; 
}

.dsmall {
        font-size: 0.9em;
        flex: 1;
		}
.dwide {
        flex: 2;
		}
#sec02 #wrapper .dsmall {
        flex: 1;
        min-width: 200px;
		}
#sec02 #wrapper .dwide {
        flex: 2;
		}
.dsmall img {
    width: 100%;
}
.dwide .wrppr .dsmall {
            position: relative;
            padding: 20px;
            min-width: 240px;
}

.dwide .wrppr .dsmall img {
            border-radius: 8px;
 
}
.sideline {
    border-left: 1px dotted #555555; 
    padding-left: 10px;
}
.sidelineright {
    border-right: 1px dotted #555555; 
    padding-right: 10px;
}
#band {
    width:100%;
    background-color: darkgrey;
    height: 300px;
}
footer {
    width:100%;
    text-align: left;
    background-color: black;
    background-image: url(images/footerhg.jpg);
    background-position: bottom left;
    background-repeat: no-repeat;
}
footer h4 {
    display:inline;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;    
    font-size: 1.8em;
    line-height: 0.9em;
    color: white;
    padding: 6%;
}
footer #fwrapper #fdsmall a:link {
    color: #ff7513;    
    text-decoration: none; 
}
footer #fwrapper #fdsmall a:visited {
    color: #ff7513;    
}
footer #fwrapper #fdsmall a:hover {
    color:#fffbfb;
} 
footer #fwrapper #fdsmall a:active {
    color:#fffbfb;
}

#footerinfo {
    width:100%;
    text-align: left;
    background-color: #1f1f1f;
}
#footerinfo h4 {
    display:inline;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;    
    font-size: 1.8em;
    line-height: 0.9em;
    color: white;
    padding: 6%;
}
#footerinfo a:link {
    color:#ff7513;
    text-decoration: none; 
}
#footerinfo a:visited {
    color: #ff7513
}
#footerinfo a:hover {
    color:#fffbfb;
} 
#footerinfo a:active {
    color:#fffbfb;
}
.trennung1 {
		-ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: manual;
}
.zwsp {
		-webkit-column-count: 2; 
		-moz-column-count: 2; 
		column-count: 2;
		-webkit-column-gap: 40px;
		-moz-column-gap: 40px;
		column-gap: 40px;
		text-align:left;
		
	}
.responsive-video iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
.responsive-video {
		position: relative;
		padding-bottom: 56.25%; 
		padding-top: 0px;
		height: 0;
		overflow: hidden;
	}
.desktop .animate-right {
    opacity: 0;
    visibility: hidden;
    transform: translate(-100px, 0)
}
.desktop .animate-right.animated {
    opacity: 1;
    visibility: visible;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
    -moz-transition: -moz-transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms;
    transition: transform 400ms ease-out 100ms, opacity 400ms ease-out 100ms
}

@media screen and (max-width: 700px) {	  
	nav {
        display: none;	
    }
    #navlang {
        position: absolute;
        left: 2.2em;
        top: 1.7em;
        text-align: left;
        width: 100%;
        height:50px;
    }
    .zwsp {
		-webkit-column-count: 1; 
		-moz-column-count: 1; 
		column-count: 1;
		text-align:left;
	}
    #discwrapper .dverywide {
       font-size: 0.85em;
    }
	#nvsymb {
		display:block;
    }
    #logo {
        width: 52%;
        left: 12%;
        bottom: 10%;
    }
    .medianav a:link {
        font-size: 0.75em;
    }
    #archiv {
        width: 80%;
        margin:auto;
    }  
}
@media screen and (max-width: 1050px) {

	.wrapperlive p {
        font-size: 1em;
        line-height: 1.4em;
    }  
}
@media screen and (max-width: 550px) {

	#nvsymb img {
	    width: 30px;
    }    
    #sec02 .pheadl {
       font-size: 1.4em;
        padding-left: 2%;
    }   
}
@media screen and (min-width: 1250px) {

    .dwide {
        flex: 5;
    } 
    	.dsmall {
        flex: 3;
    }   
    #wrapper {
        position: relative;
        left: 10%;
		width: 80%;
		display: flex;
        flex-wrap: wrap;        
    }
    #wrapperinfo {
        left: 10%;
		width: 80%;	       
    }
    #sec02 .rowwrapper {
        position: relative;
        left: 10%;
		width: 80%;        
    }
    #sec02 #discwrapper {
        position: relative;
        left: 10%;
		width: 80%;        
    }
    #fwrapper {	
        left: 10%;
		width: 90%;
    }
    #sec02 .pheadl {
        padding-left: 11.4%;
    }
    #sec02 h5 {
        padding-left: 11.4%;
    }
    #footerinfo h4 {
        padding: 11%;
    }
    footer h4 {
        padding: 11%;
    }
    .medianav {
        width:77%;
        text-align: right;
        padding-left: 10%;
    }   
    .wrappershop p {
        width:48%;  
    }
     .wrapperlive p {
        width:70%;  
    }
   .wrapperlive h5 {
       padding-left: 15%;    
    }
    .wrappershop #formdiv {
        width:48%;
    }
    
    .wrappershop h5 {
        padding-left: 25%;    
    }
    #wrapperinfo {
        position: relative;
        left: 10%;
		width: 80%;
    }   
}