@font-face {
    font-family: 'SourceSansPro-Light';
    src: url('../fonts/SourceSansPro-Light.woff2') format('woff2'),
        url('../fonts/SourceSansPro-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SourceSansPro-Regular';
    src: url('../fonts/SourceSansPro-Regular.woff2') format('woff2'),
        url('../fonts/SourceSansPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


html {
    background-color: #e8e8e8;
}

body {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background-color: #e8e8e8;
    color: #000;
    font-family: 'SourceSansPro-Regular', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.2rem;
}

.bannerbild {
    position: relative;
    line-height: 0;
    max-width: 1280px;
    width: 100%;
}

.pfeildown {
    position: absolute;
    max-width: 60px;
    width: 4.6875%;
    top: 7.3%;
    left: 91%;
    opacity: 0.8;
}

.banner-ragtag-name {
    position: absolute;
    max-width: 530px;
    width: 41.41%;
    top: 28%;
    left: 48%;
    opacity: 0.7;
}

.rock-and-blues {
    position: absolute;
    max-width: 563px;
    width: 44%;
    top: 76%;
    left: 48%;
}

.about-sticker {
    float: left;
    max-width: 183px;
	padding: 4% 0 0 10%;
}


/* =======================================
  NAVIGATION
  ======================================= */

a:link {
    text-decoration: none;
    color: #666;
}

a:visited {
    text-decoration: none;
    color: #333;
}

nav {
    max-width: 1280px;
    width: 100%;
    min-height: 36px;
    display: block;
	position: fixed;
    top: 0;
}

#navbar {
    max-width: 1280px;
    width: 100%;
    overflow: hidden;
    text-align: left;
    z-index: 90000;
    display: block;
}

ul.navmain {
    margin: 0;
    padding: 0 0 0 0;
	background: linear-gradient(90deg, rgba(241,234,192,0.8309523638556986) 19%, rgba(221,211,177,0.9) 100%);
	max-width: 676px;
	width: 52.8125%;
	float: right;
}

ul.navmain li {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0 3% 0 3%;
    white-space: nowrap;
}




.pfeil-position-spacer_up {
	position: absolute;
	top: 5px;
	right: 40px;
}

ul.navmain a {
    font-family: 'SourceSansPro-Light', Helvetica, Arial, sans-serif;
    font-size: 1.3rem;
    font-weight: normal;
    text-decoration: none;
    color: #444;
    line-height: 140%;
    letter-spacing: 0.05rem;
    padding-left: 0;
}

#navbar li a:hover,
ul.navmain a:focus {
    padding-left: 0;
    text-decoration: none;
    color: #993300;
}

ul.navmain a:active {
    color: orangered;
}


#togglenav {
    display: none !important;
}

/* TOGGLE NAVIGATION */

nav,
.navbar-toggle {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.pfeil {
    width: 20px;
    height: 15px;
    padding: 0;
    margin: 0;
}

.pfeilspacer_up {
	width: 20px;
	height: 15px;
	background: url(../pics/pfeilup.svg) no-repeat;
	background-position: left 0px top 1px !important;
}

.pfeilspacer_up:hover {
	background: url(../pics/pfeiluphover.svg) no-repeat;
}

.pfeilup {
    width: 20px;
    height: 15px;
    background: url(../bilder/pfeilup.svg) no-repeat;
    background-position: left 0px top 2px !important;
    margin: 0;
    padding-right: 14px !important;
}

/* =======================================
  INHALT
  ======================================= */

/* STARTBANNER CONTAINER */

.big {
	font-weight: bold;
	font-size: 1.8rem;
}

#start_banner_container {
    line-height: 0;
    max-width: 1280px;
    width: 100%;
    position: relative;
    text-align: center;
}

/* ABOUT CONTAINER */

#about {
    background: url(../pics/about_background.jpg) no-repeat center top fixed;
    -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
    max-width: 1280px;
    width: 100%;
    line-height: 140%;
    margin: 0;
    padding: 4.5% 0 0 0;
}

aboutspacer {
    width: 100%;
    height: 44.333333333333px;
    float: left;
}

.article_wrapper {
	position: relative;
    max-width: 95%;
    min-width: 320px;
    box-sizing: border-box;
    display: block;
    padding: 0 20px 20px 20px;
    line-height: 1.4em;
}

.about_text {
	width: 600px;
    margin: 0 2% 0 2%;
    padding: 1% 2% 0 2%;
    text-align: left;
    color: #ddd;
}

/* AKTUELL CONTAINER */

.aktuell {
	width: 60%;
    margin: 0 0 0 2%;
    padding: 6% 0 0 2%;
    text-align: left;
    color: #ddd;
	float:right;
}

/* BAND CONTAINER */

/* BILDERGALERIE CONTAINER */

.bilderinhalt {
    background: url(../pics/back-galerie.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    max-width: 1280px;
    width: 100%;
    text-align: center;
    z-index: 99999;
}


h3.headline_galerie {
    font-family: 'Astonished', Helvetica, Arial, sans-serif;
    font-weight: 200;
    font-style: normal;
    font-size: 3.2rem;
    color: #ffeb00;
    letter-spacing: 0.4rem;
    opacity: 0.9;
    line-height: 130%;
    padding: 2% 0 1% 0;
    margin: 0;
    color: orange;
}

.bandinhalt {
	position: relative;
    background: url(../pics/band_background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    max-width: 1280px;
    width: 100%;
    text-align: center;
    z-index: 4000;
}

.text_band {
    max-width: 800px;
    width: 62.5%;
    height: auto;
    margin: 0 0 0 4%;
    padding: 3% 2% 2% 2%;
    text-align: center;
    color: #ddd;
    margin: 0 auto;
}

.band-foto-desk {
    position: relative;
    line-height: 0;
    max-width: 1280px;
    width: 100%;
}

.band-foto-smart {
    display: none;
}

.band-sticker {
	float:right;
    max-width: 160px;
	padding: 4% 15% 0 7%;
}

.kontaktbild {
text-align: center;
}

/* SONGS CONTAINER */

.songs_article_wrapper {
	position: relative;
    max-width: 100%;
    min-width: 320px;
    box-sizing: border-box;
    display: block;
    padding: 0;
    line-height: 1.4em;
}

.songsinhalt {
    background: url(../pics/songs_background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    max-width: 1280px;
    width: 100%;
    text-align: center;
}

.songs-sticker {
	position: absolute;
	max-width: 185px;
	width: 14.453125%;
	top:3%;
	left:10%;
	z-index: 2;
}

.songs_text {
	max-width: 900px;
	width: 70.3125%;
    margin: 0 auto;
    padding: 0;
    color: #ddd;
}

.p-songs {
	margin: 0;
    padding: 0;
}

.p-demosongs {
	margin: 0;
    padding: 0 0 50px 0;
}

.songs-headline {
	padding: 40px 0 0 0;
}

/* FOOTER */

footer {
    background: url(../pics/kontakt_background.jpg) repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100%;
    max-width: 1280px;
    width: 100%;
    text-align: center;
}

footer h2 {
    padding: 0 0 10px 0;
    margin: 0;
}

.footerinhalt {
    text-align: center;
    font-family: 'SourceSansPro-Light', Helvetica, Arial, sans-serif;
    font-size: 1.3rem;
    font-weight: 300;
    font-style: normal;
    color: #ddd;
    line-height: 1.25;
    padding: 10px 10px 0 10px;

    background: rgba(49, 45, 43, 0.3);
}

.kontakt-sticker {
	max-width: 270px;
	width: 21.1%;
}

.footerinhalt ul {
    text-align: center;
    margin: 0;
    padding: 8px 0 0 0;
}

.footerinhalt ul li {
    position: relative;
    vertical-align: top;
    text-align: center;
    display: block;
    padding: 0 20px 20px 20px;
}

.footerinhalt h2 {
    font-size: 1.3rem;
}

.footerinhalt a:link {
    text-decoration: none;
    font-size: 1.3rem;
    color: orange;
}

.footerinhalt a:visited {
    text-decoration: none;
    color: orange;
}

.impressum-abstand {
	height: 200px;
}

.footerspacer {
    max-width: 1280px;
    height: 500px;
}


/* MODAL */

/* The Modal (background) */

.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 99999;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: scroll;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
}

/* Modal Content */

.modal-content {
    background-color: #fefefe;
    /* Fallback color */
    background-color: rgba(240, 240, 240, 0.8);
    /* Black w/ opacity */
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 70%;

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
}

.modal-content a:link {
    text-decoration: none;
    color: #339;
}

.modal-content a:visited {
    text-decoration: none;
    color: #399;
}


/* The Close Button */

.close {
    color: #a66;
    float: right;
    font-size: 48px;
    font-weight: normal;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.close1:hover,
.close1:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.close2:hover,
.close2:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}


@media screen and (max-width: 800px) {
	
	ul.navmain a {
    font-family: 'SourceSansPro-Light', Helvetica, Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: normal;
    text-decoration: none;
    color: #444;
    line-height: 140%;
    letter-spacing: 0.05rem;
    padding-left: 0;
}
	
	.pfeil-position-spacer_up {
	position: absolute;
	top: 5px;
	right: 15px;
}
	
	.about-sticker {
  float: none;
  max-width: 183px;
  padding: 4% 0 0 10%;
}
	
	.bandinhalt {
  text-align: left;
}
	
	.aktuell {
  width: 80%;
  margin: 0 0 0 2%;
  padding: 6% 0 0 2%;
  text-align: left;
  color: #ddd;
  float: none;
}
	
.footerspacer {
    max-width: 1280px;
    height: 230px;
}
	
}

@media screen and (max-width: 700px) {
	
		
.band-sticker {
  float: right;
  max-width: 160px;
  padding: 0 15% 0 7%;
}
	
.article_wrapper {
  position: relative;
  padding: 0;
}
	
ul.navmain li {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0 2% 0 2%;
  white-space: nowrap;
}
	
.about_text {
	float:left;
	max-width: 600px;
	width: 95%;
    margin: 0 2% 0 2%;
    padding: 1% 2% 0 2%;
    text-align: left;
    font-size: 1.1rem;
}
	

	
.songs-sticker {
	left: 2%;
	max-width: 120px;
	width: 50.1%;
}
	
.kontakt-sticker {
	max-width: 160px;
	width: 50.1%;
}
	
}


@media screen and (max-width: 600px) {

    html,
    body {
        overflow-x: hidden;
    }


    #navbar {
        display: none;
    }

    #togglenav {
        display: block !important;
        z-index: 999999 !important;
    }

    .menu-icon {
        position: fixed;
        left: 92%;
        top: 10px;
        height: 40px;
        width: 40px;
        display: block !important;
        z-index: 99999999 !important;
    }

    hr {
        border: 0;
        height: 1px;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
    }

    #togglemenu {
        position: fixed;
        right: 0;
        top: 0;
        display: block;
        text-align: center;
        padding: 0px;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 9999999 !important;
    }

    #togglemenu ul li {
        display: block;
        white-space: nowrap;
        /* verhindert Umbruch bei Leerzeichen */
    }

    ul {
        padding: 0;
        -webkit-padding-start: 0px;
    }

    #togglemenu ul li {
        display: block;
        float: none;
        padding: 0;
    }

    #togglemenu ul li a {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 20px;
        font-weight: 300;
        font-style: normal;
        text-decoration: none;
        color: #fff;
        padding: 0;
        margin: 0;
        display: block;
    }
	
/* ---------- Ende Toggleavigation    --------- */
	
.article_wrapper {
    line-height: 1.2em;
}
	
.band-foto-desk {
	display:none;
}
	
.band-foto-smart {
	display:block;
    position: relative;
    line-height: 0;
    max-width: 600px;
    width: 100%;
}
	
.songs-headline {
	padding: 80px 0 0 0;
}
	
}