@charset "UTF-8";
/* CSS Document */
* {
  margin:0;
  padding:0;
}

html {
  height:100%;
  font-size:100%;
}

body {
  height:100%;
  margin:0;
  padding:0;
  background-color:#FFFCFB !important;
  font-family: 'montserratregular', Helvetica, Arial, sans-serif;
}

.frontpage_box {
  height:100% !important;
  width:auto !important;
  background-image:url(../img/claudia_doeffinger.jpg);
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
}

.clearboth {
  clear:both;
}

/*SELECTION OF TEXT*/
::selection {
  /*#FBF8FF*/
  background-color:none;
  color:#9303d6;
}

p::selection {
  background-color:none;
  color:#9303d6;
}
p::-moz-selection {
  background-color:none;
  color:#9303d6;
}
p span::selection {
  background-color:#9303d6;
  color:#FFF;
}
p span::-moz-selection {
  background-color:#9303d6;
  color:#FFF;
}
a::selection {
  background-color:none;
  color:#9303d6;
}
a::-moz-selection {
  background-color:none;
  color:#9303d6;
}

/* MUSIC BUTTON HOMEPAGE*/
.autoplay_control {
  background-color:none;
  position:fixed;
  top:2em;
  right:2.2em;
  color:white;
  font-size:130%;
  letter-spacing:3px !important;
}

.active, .autoplay_control:hover {
  color:#9303d6 !important;
  cursor: pointer !important;
}

/* YOUTUBE LINK */
.youtube {
  position: absolute;
  bottom: 1px;
  color: #000;
  text-transform:uppercase;
  font-size: 80%;
  letter-spacing: 5px !important;
  right: 11em;
  border-left: 1px dotted #000;
  height: 20%;
  padding-left: 1.5em;
  transition: all ease .5s;
  animation: animationtop cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
}

@keyframes animationtop {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 40%, 0);
    transform: translate3d(0, 40%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.youtube a {
  color: #000;
}

.youtube a:hover {
  color:#90F;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/* TITEL CLAUDIA HOMEPAGE */
.claudia_name {
  font-family: 'montserratlight' !important;
  position: absolute;
  top: 1.5em;
  color: #FFF;
  transition: all ease .5s;
  text-transform:uppercase;
  line-height: 150%;
  font-size: 2.4em;
  letter-spacing: 9px !important;
  margin-left: 6.1em;
  display: block;
  text-align: left;
  animation: slide_animation cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
}

/* TITEL DOEFFINGER HOMEPAGE */
.doeffinger_name {
  font-family: 'montserratlight' !important;
  position: absolute;
  top: 3em;
  color: #FFF;
  transition: all ease .5s;
  text-transform:uppercase;
  line-height: 150%;
  font-size: 2.4em;
  letter-spacing: 9px !important;
  margin-left: 8.8em;
  display: block;
  text-align: left;
  animation: slide_animation cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
}

@keyframes slide_animation {
from {
	  opacity: 0;
	  -webkit-transform: translate3d(-40%, 0, 0);
	  transform: translate3d(-40%, 0, 0);
	}
	to {
	  opacity: 1;
	  -webkit-transform: none;
	  transform: none;
	}
}

/* TITEL HOMEPAGE*/
.genre {
  font-family: 'montserratlight' !important;
  position: absolute;
  top: 11.6em;
  color: #FFF;
  transition: all ease .5s;
  text-transform:uppercase;
  line-height: 180%;
  font-size: 95%;
  letter-spacing: 4px !important;
  margin-left: 22.5em;
  display: block;
  text-align: left;
  animation: animationgenre cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay: 0.20s;
}

@keyframes animationgenre {
	from {
	  opacity: 0;
	  -webkit-transform: translate3d(-40%, 0, 0);
	  transform: translate3d(-40%, 0, 0);
	}
	to {
	  opacity: 1;
	  -webkit-transform: none;
	  transform: none;
	}
}

/* NAVIGATION HOMEPAGE*/
.navigation {
  font-family: 'montserratlight' !important;
  position:absolute;
  display:block;
  bottom: 3.4em;
  left:7em;
  list-style:none;
  position:fixed;
  background-color:inherit !important;
}

.navigation li a {
  color:#FFF !important;
  text-decoration:none;
  line-height:4em;
  text-transform:uppercase;
  padding-top:1.3em;
  font-size:76%;
  letter-spacing:3px;
}

.navigation li a:hover {
  color: #FFF;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  padding-left: 8em;
  border-top: 1px dotted #FFF;
}

/* CONCERTS */
.concert_headline {
  font-family: 'montserratlight' !important;
  position: absolute;
  top: 3.7em !important;
  color: #9303d6;
  transition: all ease .5s;
  text-transform:uppercase;
  line-height: 0%;
  font-size: 2.4em;
  letter-spacing: 9px; !important;
  margin-left: 2.3em;
  display: block;
  text-align: left;
  animation: slide_animation cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
}

.concert_headline:hover {
  color:#7f39ff;
}

.concert_picture {
  position: fixed;
  left: 0px;
  bottom: -5px;
  width:62%;
  height: auto;
  animation: animation_concert_picture cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay: 0.1s;
}

@keyframes animation_concert_picture {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-40%, 0, 0);
    transform: translate3d(-40%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.concert_picture img {
  width:100%; 
  height:auto;
}

.concert_box {
  font-family: 'montserratregular';
  float:right;
  height:100%;
  width: 40%;
  padding-top: 12.9em;
  padding-bottom: 1em;
  overflow:auto;
  animation: animation_concert_box cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay: 0.1s;
}

@keyframes animation_concert_box {
	from {
	  opacity: 0;
	  -webkit-transform: translate3d(40%, 0, 0);
	  transform: translate3d(40%, 0, 0);
	}
	to {
	  opacity: 1;
	  -webkit-transform: none;
	  transform: none;
	}
}

.concert_titel {
  margin-left:6em;
  padding-bottom: 3%;
  font-size:95%;
  line-height: 130%;
  letter-spacing: 4px;
  padding-top:5%;
  text-transform:uppercase;
  color: rgb(25,25,25);
}

.concert_titel:hover {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  color:#9303d6;
  padding-left: 4.4em;
  margin-bottom: 1em;
  border-top: 1px dotted #955bff;
  padding-bottom: 5px;
}

.concert_details {
  margin-left:13em;
  padding-bottom:1em;
  font-size:76%; 
  line-height:180%;
  letter-spacing:2px;
  text-transform:uppercase;
  width:50%;
}
/* END_CONCERTS */

/*BANDS*/
.bands_picture {
  float:right;
  width:38%;
  padding-top:11em;
  animation: animation_concert_box cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
}

.bands_picture img {
  width:100%;
  height:auto;
}

.bands_headline {
  font-family: 'montserratlight' !important;
  position: absolute;
  top: 2em;
  color: #9303d6;
  transition: all ease .5s;
  text-transform:uppercase;
  line-height: 150%;
  font-size: 2.4em;
  margin-left: 23.2em !important;
  letter-spacing: 9px !important;
  z-index:2;
  display: block;
  animation: slide_animation cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
}

.bands_headline:hover {
  color:#7f39ff;
}

.bands_titel span p {
  margin-left: 2.5em;
  padding-top:2em;
  text-transform:uppercase;
  font-size:95% !important;
  letter-spacing:4px;
  animation: slide_animation cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
}

.bands_titel p {
  margin-left: 7em;
  padding-bottom:3%;
  padding-top:0.5em;
  text-transform:uppercase;
  font-size:76%;
  line-height:190%;
  letter-spacing:2px;
  animation: slide_animation cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
}

.bands_titel p a {
  color:black !important;
}

.bands_titel p a:hover {
  color:#7f39ff !important;
}
/* END_BANDS */

.back_button {
  font-family: 'montserratregular';
  width:185px !important;
  position:fixed;
  float: left;
  margin-left: 6em;
  line-height: 4em;
  font-size: 76%;
  letter-spacing:3px;
  text-transform:uppercase;
  border-top: 1px dotted #000;
  margin-top: 4em;
}
.back_button a:hover {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  padding-left:11.4em !important;
}

.back_button a {
  color: #000;
}

a {
  text-decoration:none;
}

/* VIDEO */
.video_box {
  height:auto;
  width:auto;
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
}

video {
  position: relative;
  float:right;
  width: 40%;
  height: auto;
  animation: animation_concert_box cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  padding-top:11em;
  padding-bottom:14.5em;
}

/* MUSIC */
.space {
  padding-top:12em;
}

.music_box {
  background-color:#FFFCFB;
  overflow:hidden;
}

.music_content {
  margin-left:20em;
}

.music_picture {
  font-family:'Montserrat', sans-serif;
  float:left;
  width:35%;
  animation:musicanimation cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay:0.1s;
}

@keyframes musicanimation {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-40%, 0, 0);
    transform: translate3d(-40%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.music_picture img {
  width:100%;
  height:auto;
}

.music_picture p a{
  padding-top: 1em;
  font-size: 75%;
  letter-spacing:2px;
  color: #9303d6;
}

.music_picture p a:hover {
  padding-top: 1em;
  font-size: 75%;
  letter-spacing:2px;
  color: black;
  opacity: 0.7;
}

.music_playlist_box {
  float:left;
  width: 60%;
  margin-left:2em;
  animation:musicanimation cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay:0.2s;
}

.music_titel {
  margin-bottom: 2em;
  margin-left: 2em;
  line-height: 100%;
  text-transform:uppercase;
  color: rgb(25,25,25);
  padding-top:5%;
  font-size:95%;
  letter-spacing:4px !important;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.music_titel:hover {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  color: #9303d6;
  padding-left:4.5em;
  border-top:1px dotted #9303d6;
}

.music_playlist_songs {
  margin-left:7em;
  color:black;
  font-size:76%;
  line-height:140%;
}

.music_playlist_songs p {
  float:left;
  margin-left:1%;
  text-transform:uppercase;
  padding-top:3%;
  padding-bottom:3%;
  letter-spacing:2px;
}

.music_playlist_songs audio {
  display:none;
}

.music_playlist_songs audio p::active{
  color: #90F;
}

.music_playlist_songs span {
  float:left;
  font-size:1.2em;
  padding-top:3%;
  padding-bottom:3%;
  margin-right: 1em;
}

/* IMPRESSUM */
.impressum {
  background-color:#FFFCFB;
  overflow:hidden;
}

.impressum p a {
  color:black !important;
  text-transform: uppercase;
  letter-spacing:3px !important;
  font-size: 95%;
}

.impressum_box {
  float:left;
  width: 50%;
  margin-left:2em;
  animation:musicanimation cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay:0.2s;
}

.impressum_titel {
  margin-bottom: 2em;
  margin-left: 2.8em;
  line-height: 100%;
  text-transform:uppercase;
  color: rgb(25,25,25);
  padding-top:5%;
  font-size:95%;
  letter-spacing:4px !important;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.impressum_text {
  margin-left:8em;
  color:black;
  font-size:60%;
  line-height:250%;
}

.impressum_text p {
  float:left;
  margin-left:3%;
  text-transform:uppercase;
  padding-top:3%;
  padding-bottom:3%;
  letter-spacing:2px;
}

.impressum_text p a {
  color: #90F !important;
}
/* END_IMPRESSUM */

/*FOOTER*/
.footer {
  position: fixed;
  top: 23em;
  float: left;
  margin-left:6em;
  line-height:4.2em;
  color:#000 !important;
  font-size:75%;
  letter-spacing:2px;
  text-transform:uppercase;
  animation:musicanimation cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay:0.1s;
}

.footer a {
  color:#000 !important;
}

.footer p a:hover {
  opacity:0.5 !important;
}

.footer img {
  width:1.7em !important;
}

/*GOOGLE CHROME & SAFARRI ONLY*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* BANDS */
.bands_titel span p {
  margin-left: 2.5em;
  padding-top:2em;
  text-transform:uppercase;
  font-size:95% !important;
  letter-spacing:4px;
  animation: slide_animation cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
}

.bands_titel p {
  margin-left: 7em;
  padding-bottom:3%;
  padding-top:0.5em;
  text-transform:uppercase;
  font-size:76%;
  line-height:190%;
  letter-spacing:2px;
  animation: slide_animation cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
}
}


@media screen and (max-width:1300px) {
/* ABOUT */
.about_picture {
	position:fixed;
	float:left;
	width:40%;
	height:auto;
	z-index:-2;
}

.about_picture img {
	width:100%; 
	height:auto;
}

.bands_headline {
  margin-left: 19.2em !important;
}
}


@media screen and (max-width:1280px) {
/* ABOUT */
.about_picture {
	position:fixed;
	float:left;
	width:40%;
	height:auto;
	z-index:-2;
}

.about_picture img {
	width:100%; 
	height:auto;
}
}


@media screen and (max-width:1265px) {
/* ABOUT */
.about_picture {
	position:fixed;
	float:left;
	width:40%;
	height:auto;
	z-index:-2;
}

.about_picture img {
	width:100%; 
	height:auto;
}
}



@media screen and (max-width:1250px) {
/* ABOUT */
.about_box {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	padding:0px 0px 0px 0px;
	overflow:hidden;
}

.about_picture {
	position:fixed;
	float:left;
	width:40%;
	height:auto;
	z-index:-2;
}

.about_picture img {
	width:100%; 
	height:auto;
}

.bands_headline {
  margin-left: 11.7em !important;
}
}



@media screen and (max-width:1220px) {
/* ABOUT */
.about_box {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	padding:0px 0px 0px 0px;
	overflow:hidden;
}

.about_picture {
	position:fixed;
	float:left;
	width:40%;
	height:auto;
	z-index:-2;
}

.about_picture img {
	width:100%; 
	height:auto;
}
}

@media screen and (max-width:1180px) {
/* ABOUT */
.about_box {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	padding:0px 0px 0px 0px;
	overflow:hidden;
}

.about_picture {
	position:fixed;
	float:left;
	width:40%;
	height:auto;
	z-index:-2;
}

.about_picture img {
	width:100%; 
	height:auto;
}

video {
  position: relative;
  float:right;
  width: 50%;
  height: auto;
  opacity: 0.85;
  padding-top:11em;
  padding-bottom:14.5em;
}
}

@media screen and (max-width:1150px) {
.music_content {
  margin-left:16.5em;
}

.music_playlist_box {
  float:left;
  width: 60%;
  margin-left:1em;
}

.space {
  padding-top:8em;
}
}

@media screen and (max-width:1100px) {
/* ABOUT */
.about_box {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	padding:0px 0px 0px 0px;
	overflow:hidden;
}

.about_picture {
	position:fixed;
	float:left;
	width:40%;
	height:auto;
	z-index:-2;
}

.about_picture img {
	width:100%; 
	height:auto;
}

/* CONCERTS */
.concert_picture {
  position: fixed;
  left: 0px;
  top: 12.8em;
  width:60%;
  height: auto;
}

.concert_box {
  float:right;
  height:100%;
  width: 42%;
  padding-right: 1em;
  padding-top: 12.9em;
  padding-bottom: 11em;
  overflow:auto;
}

.concert_headline {
  position: absolute;
  top: 3.7em !important;
  color: #9303d6;
  transition: all ease .5s;
  text-transform:uppercase;
  line-height: 0%;
  font-size: 2.4em;
  letter-spacing: 9px !important;
  margin-left: 2.3em;
  display: block;
  text-align: left;
}
/* END_CONCERTS */
}

@media screen and (max-width:1080px) {
/* ABOUT */
.about_box {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	padding:0px 0px 0px 0px;
	overflow:hidden;
}

.about_picture {
	position:fixed;
	float:left;
	width:40%;
	height:auto;
	z-index:-2;
	animation:slide_animation cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function:ease;
  animation-delay:0s;
}

.about_picture img {
	width:100%; 
	height:auto;
}
}


@media screen and (max-width:1024px) {
.claudia_name {
  position: absolute;
  top: 1.5em;
  color: #FFF;
  transition: all ease .5s;
  text-transform:uppercase;
  line-height: 150%;
  font-size: 2.4em;
  letter-spacing: 9px !important;
  margin-left: 3em;
  display: block;
  text-align: left;
  position:fixed;
}

/* TITEL CLAUDIA DOEFFINGER*/
.doeffinger_name {
  position: absolute;
  top: 3em;
  color: #FFF;
  transition: all ease .5s;
  text-transform:uppercase;
  line-height: 150%;
  font-size: 2.4em;
  letter-spacing: 9px !important;
  margin-left: 3em;
  display: block;
  text-align: left;
  position:fixed;
}

/* TITEL BESCHREIBUNG*/
.genre {
  position: absolute;
  top: 13em;
  color: #FFF;
  transition: all ease .5s;
  text-transform:uppercase;
  line-height: 180%;
  font-size: 95%;
  letter-spacing: 6px !important;
  margin-left: 7.9em;
  display: block;
  text-align: left;
  position:fixed;
}

/*BANDS*/
.bands_picture {
	margin-left:auto;
	margin-right:auto;
	width:50%;
	float:right;
	padding-top:12em;
}

/* ABOUT */
.about_picture {
	position:absolute;
	float:left;
	width:50%;
	height:auto;
	z-index:-2;
}

.about_picture img {
	width:100%; 
	height:auto;
}

/* CONTACT */
.contact_box {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	padding:0px 0px 0px 0px;
	overflow:hidden;
}

.contact_content {
	overflow:hidden;
}

/* CONCERTS */
.concert_picture {
  position: fixed;
  left: 0px;
  top: 12.8em;
  width:55%;
  height: auto;
}

.concert_box {
  float:right;
  height:100%;
  width: 45%;
  padding-right: 1.5em;
  padding-top: 12.9em;
  padding-bottom: 11em;
  overflow:auto;
}

.concert_headline {
  position: absolute;
  top: 3.7em !important;
  color: #9303d6;
  transition: all ease .5s;
  text-transform:uppercase;
  line-height: 0%;
  font-size: 2.4em;
  letter-spacing: 9px !important;
  margin-left: 2.3em;
  display: block;
  text-align: left;
}
/* END_CONCERTS */
}

@media screen and (max-width:990px) {
.music_content {
  margin-left:16.5em;
}

.music_playlist_songs {
  margin-left:2.4em;
  color:black;
  font-size:76%;
  line-height:100%;
}

.music_playlist_songs p {
  float:left;
  margin-left:1%;
  text-transform:uppercase;
  padding-top:3%;
  padding-bottom:3%;
  letter-spacing:2px;
}

.music_titel:hover {
  padding-left:0em;
  border-top:none !important;
}
}

@media screen and (max-width:900px) {
/*BANDS*/
.bands_picture {
	margin-left:auto;
	margin-right:auto;
	width:50%;
	float:right;
	padding-top:12em;
}

/* ABOUT */
.about_picture {
	position:absolute;
	float:left;
	width:50%;
	height:auto;
	z-index:-2;
}

.about_picture img {
	width:100%; 
	height:auto;
}

/* CONTACT */
.contact_box {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	padding:0px 0px 0px 0px;
	overflow:hidden;
}

.contact_content {
	overflow:hidden;
}

/* CONCERTS */
.concert_picture {
  position: fixed;
  left: 0px;
  top: 12.8em;
  width:50%;
  height: auto;
}

.concert_box {
  float:right;
  height:100%;
  width: 50%;
  padding-right: 2em;
  padding-top: 12.9em;
  padding-bottom: 11em;
  overflow:auto;
}

.concert_headline {
  position: absolute;
  top: 4.7em !important;
  color: #9303d6;
  transition: all ease .5s;
  text-transform:uppercase;
  line-height: 0%;
  font-size: 2em;
  letter-spacing: 9px !important;
  margin-left: 2.3em;
  display: block;
  text-align: left;
}

.concert_titel {
  margin-left:6em;
  padding-bottom: 3%;
  font-size:82% !important;
  line-height: 130%;
  letter-spacing: 4px;
  padding-top:5%;
  text-transform:uppercase;
  color: rgb(25,25,25);
}

.concert_titel:hover {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  color:#9303d6;
  padding-left: 4.4em;
  margin-bottom: 1em;
  border-top: 1px dotted #955bff;
  padding-bottom: 5px;
}

.concert_details {
  margin-left:12em;
  padding-bottom:1.2em;
  font-size:70%; 
  line-height:180%;
  letter-spacing:2px;
  text-transform:uppercase;
  width:50%;
}

/* END_CONCERTS */
.music_playlist_songs {
  line-height: 180%;
}

.music_playlist_songs p {
  width:75%;
}
}


@media screen and (max-width:875px) {
.music_content {
  margin-left:16.5em;
}

.music_playlist_songs {
  margin-left:0em;
  color:black;
  font-size:76%;
}

.music_playlist_songs p {
  float:left;
  text-transform:uppercase;
  padding-top:3%;
  padding-bottom:3%;
  letter-spacing:2px;
}

.music_titel:hover {
  padding-left:0em;
  border-top:none !important;
}

.music_picture {
  width:270px;
}

.music_titel {
  margin-left: 0em;
}

.music_playlist_box {
  margin-left:0em;
  padding-top: 1em;
  width: 90%;
}

.space {
  padding-top: 6.5em;
}
}


@media screen and (max-width:800px) {
/*BANDS*/
.bands_headline {
  padding-top: 2em;
  margin-left: 1.8em !important;
}

.bands_picture {
	margin-left:auto;
	margin-right:auto;
	width:85%;
	float:left;
	padding-top:5em !important;
}

.bands_picture span img{
  padding-top: 8em !important;
}

.bands_titel span p {
  padding-top: 1.6em !important;
}

.bands_titel p {
  padding-bottom:3%;
  padding-top: 0em !important;
}

/* ABOUT */
.about_picture {
	position:absolute;
	float:left;
	width:50%;
	height:auto;
	z-index:-2;
}

.about_picture img {
	width:100%; 
	height:auto;
}

.contact_box {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	padding:0px 0px 0px 0px;
	overflow:hidden;
}

.contact_content {
	overflow:hidden;
}

.contact_box {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	padding:0px 0px 0px 0px;
	overflow:hidden;
}

.contact_content {
	overflow:hidden;
}

.video_space {
  padding-top:13em !important;
}

video {
  position: relative;
  float:left;
  width: 70%;
  height: auto;
  opacity: 0.85;
  padding-top:0em !important;
  padding-bottom:3.5em;
}

.bands_headline {
  font-size: 2em;
  margin-left: 2.2em !important;
}

/* YOUTUBE LINK */
.youtube {
  position: relative !important;
  bottom: none !important;
  right: none !important;
  left: 1.5em;
  border-left: none !important;
  height: 20%;
  padding-right: 0em;
}
}


@media screen and (max-width:775px) {
/* CONCERTS */
.concert_picture {
  position: relative;
  left: 0px;
  top: 8em;
  width:80%;
  height: auto;
  z-index: -5;
}

.concert_headline {
  position: relative;
  top: 0em !important;
  color: #9303d6;
  transition: all ease .5s;
  padding-bottom: 1.5em;
  text-transform:uppercase;
  line-height: 0%;
  font-size: 2em;
  letter-spacing: 9px !important;
  margin-left: 2.3em;
  display: block;
  text-align: left;
}

.concert_box {
  float:left;
  height:100%;
  width: 72%;
  padding-right: 1em;
  padding-left: 1em;
  padding-top: 13em !important;
  padding-bottom: 5em;
  overflow:auto;
}
/* END_CONCERTS */
}


@media screen and (max-width:736px) {
/* IMPRESSUM */
.impressum {
  background-color:#FFFCFB;
  overflow:hidden;
}

.impressum_box {
  padding-top: 7em;
  float:left;
  width: 80%;
  margin-left:2em;
}

.impressum_titel {
  margin-bottom: 2em;
  margin-left: 2.8em;
  line-height: 100%;
  text-transform:uppercase;
  color: rgb(25,25,25);
  padding-top:5%;
  font-size:95%;
  letter-spacing:4px !important;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.impressum_text {
  margin-left:8em;
  color:black;
  font-size:60%;
  line-height:250%;
}

.impressum_text p {
  float:left;
  margin-left:3%;
  text-transform:uppercase;
  padding-top:3%;
  padding-bottom:3%;
  letter-spacing:2px;
}

.impressum_text p a {
  color: #90F;
}
/* END_IMPRESSUM */

/* ABOUT */
.about_picture {
	position:relative;
	float:none;
	margin-left:auto;
	margin-right:auto;
	width:60%;
	height:auto;
	z-index:-2;
}

.about_picture img {
	width:100%; 
	height:auto;
}

/* CONTACT */
.contact_box {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	padding:0px 0px 0px 0px;
	overflow:hidden;
}

.contact_content {
	overflow:hidden;
}
}


@media screen and (max-width:690px) {
/* CONTACT */
.contact_box {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	padding:0px 0px 0px 0px;
	overflow:hidden;
}

.contact_content {
	overflow:hidden;
}

/* ABOUT */
.about_picture {
	position:relative;
	float:none;
	margin-left:auto;
	margin-right:auto;
	width:70%;
	height:auto;
	z-index:-2;
}

.about_picture img {
	width:100%; 
	height:auto;
}

/* CONTACT */
.contact_box {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	padding:0px 0px 0px 0px;
	overflow:hidden;
}

.contact_content {
	overflow:hidden;
}

.navigation li a:hover {
  color: #FFF;
  font-weight: bold;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
  padding-left: 0em;
  border-top: none !important;
}


}


@media screen and (max-width:650px) {
.music_content {
  margin-left:35%;
}

.music_playlist_songs {
  margin-left:2.4em;
  color:black;
  font-size:76%;
}

.music_playlist_songs p {
  float:left;
  margin-left:3%;
  text-transform:uppercase;
  padding-top:3%;
  padding-bottom:3%;
  letter-spacing:2px;
}

.music_titel:hover {
  padding-left:0em;
  border-top:none !important;
}

.music_picture {
  width:270px;
}

.music_titel {
  margin-left: 0em;
}

.music_playlist_songs {
  margin-left:0em;0
}

.music_playlist_box {
  margin-left:0em;
  padding-top: 1em;
  width: 98%;
}

.space {
  padding-top: 6.5em;
}
}


@media screen and (max-width:620px) {
/* ABOUT */
.about_picture {
	position:relative;
	float:none;
	margin-left:auto;
	margin-right:auto;
	width:70%;
	height:auto;
	z-index:-2;
}

.about_picture img {
	width:100%; 
	height:auto;
}

/* CONTACT */
.contact_box {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	padding:0px 0px 0px 0px;
	overflow:hidden;
}

.contact_content {
	overflow:hidden;
}
}

@media screen and (max-width:560px) {
.back_button {
  position:fixed !important;
  top:0px;
  width:100% !important;
  height:auto;
  text-align: left;
  margin-left:0em;
  padding-left:1em;
  padding-right:3%;
  border-top:0px;
  margin-top:0px;
  background-color:#FFFCFB;
  z-index: 2;
  font-size: 90%;
  opacity: 0.9 !important;
  border-bottom: 1px dotted lightgrey !important;
}

.back_button a {
  color: black;
  margin-left:1.7em;
}

.back_button a:hover {
  padding-left: 0em !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}
}

@media screen and (max-width:540px) {
/* CONCERTS */
.concert_picture {
  left: 0px;
  top: 3.5em;
  width:100%;
  height: auto;
  z-index: -10;
}

.concert_box {
  float:left;
  height:auto;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0em;
  padding-top: 8em !important;
  padding-bottom: 4em;
  overflow:auto;
}

.concert_headline {
  position: relative;
  top: 0em !important;
  color: #9303d6;
  transition: all ease .5s;
  text-transform:uppercase;
  line-height: 0%;
  font-size: 2em;
  letter-spacing: 9px !important;
  margin-left: 2.3em;
  display: block;
  text-align: left;
}

.concert_titel {
  margin-left:6em;
  padding-bottom: 3%;
  font-size:82% !important;
  line-height: 130%;
  letter-spacing: 4px;
  padding-top:5%;
  text-transform:uppercase;
  color: rgb(25,25,25);
}

.concert_titel:hover {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  color:#9303d6;
  padding-left: 0em !important;
  margin-bottom: 0em !important;
  border-top: none !important;
  padding-bottom: 3% !important;
}

.concert_details {
  margin-left:12em;
  padding-bottom:1.2em;
  font-size:70%; 
  line-height:180%;
  letter-spacing:2px;
  text-transform:uppercase;
  width:50%;
}

/* END_CONCERTS */
.impressum_box {
  padding-top: 1em;
  float:left;
  width: 90%;
  margin-left:0em;
}

.impressum_text {
  margin-left: 3.2em;
}

/* ABOUT */
.about_picture {
	position:relative;
	float:none;
	margin-left:auto;
	margin-right:auto;
	width:70%;
	height:auto;
	z-index:-2;
}

.about_picture img {
	width:100%; 
	height:auto;
}

/* CONTACT */
.contact_box {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	padding:0px 0px 0px 0px;
	overflow:hidden;
}

.contact_content {
	overflow:hidden;
}

/* MUSIC */
.footer {
  position: relative;
  top: 0em;
  float: left;
  padding-bottom: 2em;
  margin-left:3.4em;
  line-height:3.6em;
  color:#000 !important;
  font-size:75%;
  letter-spacing:2px;
  text-transform:uppercase;
  border-top: 1px dotted black;
  width: 60% !important;
  padding-top: 2em;
}

.footer p a img {
  width: 20px !important;
}

.music_content {
  margin-left:2.5em !important;
}

.music_playlist_songs {
  margin-left:2.1em;
  color:black;
  font-size:76%;
}

.music_playlist_songs p {
  float:left;
  margin-left:1%;
  text-transform:uppercase;
  padding-top:3%;
  padding-bottom:3%;
  letter-spacing:2px;
}

.music_titel:hover {
  padding-left:0em;
  border-top:none !important;
}

.music_picture {
  width:65% !important;
}

.music_titel {
  margin-left: 0em;
}

.music_playlist_songs {
  margin-left:0em;0
}

.music_playlist_box {
  margin-left:0em;
  padding-top: 1em;
  width: 98%;
}

.space {
  padding-top: 3.5em;
}/*END_MUSIC*/

/*BANDS*/
.bands_headline {
  padding-top: 0em;
  top:2.3em;
  margin-left: 1.3em !important;
}

.bands_picture {
  margin-left:auto;
  margin-right:auto;
  width:85%;
  float:left;
  padding-top:4em !important;
}

.bands_picture span img{
  padding-top:6em !important;
}

.bands_titel span p {
  padding-top: 1.6em !important;
}

.bands_titel p {
  padding-bottom:3%;
  padding-top: 0em !important;
}

.video_space {
  padding-top:9em !important;
}

video {
  position: relative;
  float:left;
  width: 100%;
  height: auto;
  opacity: 0.85;
  padding-top:0em !important;
  padding-bottom:3.5em;
}

/* YOUTUBE LINK */
.youtube {
  position: relative !important;
  bottom: 2em !important;
  right: none !important;
  left: 0em;
  border-left: none !important;
  height: 20%;
  padding-right: 0em;
}
}


@media screen and (max-width:490px) {
/*BANDS*/
.bands_headline {
  padding-top: 0em;
  top:2.3em;
}

.bands_picture {
  margin-left:auto;
  margin-right:auto;
  width:100%;
  float:left;
  padding-top:3em !important;
}

.bands_titel span p {
  padding-top: 1.6em !important;
}

.bands_titel p {
  padding-bottom:3%;
  padding-top: 0em !important;
  margin-left: 3.2em;
}

/* HOMEPAGE*/
.autoplay_control {
  color: white !important;
  position: fixed !important;
  top: 1.3em !important;
  right: 1.7em !important;
  font-size: 130% !important;
  letter-spacing: 3px !important;
  margin-left: 2% !important;
}

.claudia_name {
  top: 0.8em;
  line-height: 150%;
  font-size: 1.3em;
  margin-left: 1em;
  letter-spacing: 3px !important;
}

.doeffinger_name {
  top: 2.3em;
  font-size: 1.3em;
  margin-left:1em;
  letter-spacing: 3px !important;
}

.genre {
  top: 7em;
  transition: all ease .5s;
  text-transform:uppercase;
  line-height: 150%;
  font-size: 76%;
  letter-spacing: 2px !important;
  margin-left:1.8em;
  width:70%;
}

.navigation {
  position:absolute;
  display:block;
  bottom: 0.8em;
  left:1.5em;
  list-style:none;
  background-color:inherit !important;
  transition: all ease .5s;
  animation: slide_animation cubic-bezier(0.75, 0, 0.75, 0) 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
}

.navigation li a {
  color:white !important;
  text-decoration:none;
  line-height:2.4em;
  font-size:125%;
  letter-spacing:3px;
  text-transform:uppercase;
  border-top:none !important;
  padding-top:7%;
}
/* END HOMEPAGE */
}

@media screen and (max-width:450px) {
/* ABOUT */
.about_picture {
	position:relative;
	float:none;
	margin-left:auto;
	margin-right:auto;
	width:80%;
	height:auto;
	z-index:-2;
}

.about_picture img {
	width:100%; 
	height:auto;
}

/* CONTACT */
.contact_box {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	padding:0px 0px 0px 0px;
	overflow:hidden;
}

.contact_content {
	overflow:hidden;
}

.music_playlist_songs p{
  width: 80%;
}
}

@media screen and (max-width:414px) {
/* ABOUT */
.about_picture {
	position:relative;
	float:none;
	margin-left:auto;
	margin-right:auto;
	width:80%;
	height:auto;
	z-index:-2;
}

.about_picture img {
	width:100%; 
	height:auto;
}

/* CONTACT */
.contact_box {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	padding:0px 0px 0px 0px;
	overflow:hidden;
}

.contact_content {
	overflow:hidden;
}
}


@media screen and (max-width:360px) {
/* HOMEPAGE*/
.autoplay_control {
  color: none !important;
  position: none !important;
  top: none !important;
  right: none !important;
  font-size: none !important;
  letter-spacing: none !important;
  margin-left: none !important;
}

/* ABOUT */
.about_box {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	padding:0px 0px 0px 0px;
	overflow:hidden;
}

.about_picture {
	position:relative;
	float:none;
	margin-left:auto;
	margin-right:auto;
	width:80%;
	height:auto;
	z-index:-2;
}

.about_picture img {
	width:100%;
	height:auto;
}

.impressum_text {
  margin-left: 3.5em;
}

/* CONCERTS */
.concert_picture {
  left: 0px;
  top: 3.6em;
  width:100%;
  height: auto;
  z-index: -10;
}

.concert_box {
  float:left;
  height:auto;
  width: 95%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0em;
  padding-top: 7.3em !important;
  padding-bottom: 2em;
  overflow:auto;
}

.concert_headline {
  position: relative;
  top: 0em !important;
  color: #9303d6;
  transition: all ease .5s;
  text-transform:uppercase;
  line-height: 0%;
  font-size: 2em;
  letter-spacing: 9px !important;
  margin-left: 1.2em;
  display: block;
  text-align: left;
}

.concert_titel {
  margin-left:3.2em;
  padding-bottom: 3%;
  font-size:82% !important;
  line-height: 130%;
  letter-spacing: 4px;
  padding-top:5%;
  text-transform:uppercase;
  color: rgb(25,25,25);
}

.concert_titel:hover {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  color:#9303d6;
  padding-left: 0em !important;
  margin-bottom: 0em !important;
  border-top: none !important;
  padding-bottom: 3% !important;
}

.concert_details {
  margin-left:7em;
  padding-bottom:1.7em;
  font-size:70%; 
  line-height:180%;
  letter-spacing:2px;
  text-transform:uppercase;
  width:60%;
}/* END_CONCERTS */

/* MUSIC */
.music_content {
  margin-left:0em !important;
}

.music_playlist_songs {
  margin-left:0em;
  color:black;
  font-size:76% !important;
}
.music_playlist_songs p {
  float:left;
  margin-left:3%;
  text-transform:uppercase;
  padding-top:3%;
  padding-bottom:3%;
  letter-spacing:2px;
  width: 75%;
}

.music_titel:hover {
  padding-left:0em;
  border-top:none !important;
}

.music_picture {
  width:100% !important;
}

.music_picture p a{
  margin-left: 3.2em !important;
}

.music_titel {
  margin-left: 0em;
}

.music_playlist_box {
  margin-left:2.3em;
  padding-top: 1em;
  width: 90%;
}

.footer {
  position: relative;
  top: 0em;
  float: left;
  padding-bottom: 2em;
  margin-left:3.3em;
  color:#000 !important;
  font-size:75%;
  letter-spacing:2px;
  text-transform:uppercase;
  border-top: 1px dotted black;
  width: 80% !important;
  padding-top: 2em;
}

.footer p a img {
  width: 18px !important;
}
}