html, body {
	font-family: Futura Bold,Trebuchet MS,Arial,sans-serif;
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}

@media (orientation: landscape) {
	html, body {
		overflow: auto;
	}
}

h1 { 
	font-weight: bold;	
}

a {
	text-decoration: none;
}

#Content_Container{
	display: flex;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 96%;
	margin-left: 2%;
    flex-direction: column;
}
/*====================================================================================================*/
/* Menu */
/*====================================================================================================*/

#UtubOverlay {
	display: none;
    bottom: 0;
    left: 0;
    z-index: 100;
}

#UtubOverlay h3 {
	color: #000;
	margin-left: 20px;
	user-select: none;
}

.box {
	display: flex;
    flex-direction: row;
    align-items: center;
	margin-left: 10px;
	margin-right: 10px;
}


.box div {
	cursor: pointer;
	display: flex;
}

.pause {
	background-color: #000;
    display: block;
    height: 15px;
    position: relative;
    transition: all .2s ease-out;
    width: 5px;
}

.pause:nth-child(2){
	background-color: transparent;
}
/*====================================================================================================*/
/* Menu */
/*====================================================================================================*/
#Header_Menu h2{
	font-weight: normal;
	font-size: 2em;
	border-left: 1em solid #FFFFFF;
	margin: 0;
	height: 5%;
}

#Header_Menu a {
  border: 0;
  color: inherit; /* blue colors for links too */
  text-decoration: none; /* no underline */
  outline: 0px;
}

.header {
  background-color: #fff;
  width: 99%;
  z-index: 3;   
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #fff;
  overflow: hidden;
}

.header li a {
  display: block;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-left: 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

.header li a:hover {
  opacity: 0.7;
}
	
#Logo {
	margin: 0;
	padding: 0;
	float: left;
}

.header .logo {	
    vertical-align: middle;
    display: table-cell;
    height: 1.5em;
}

.header .logoimg {	
    vertical-align: middle;
    display: table-cell;
    height: 1.5em;
}

.header .logoimg {
  display:inline-block;
}

.header .logoimg img {
	width: 20px;
}

.header .logo {
  display:inline-block;
  font-weight: bold;
  margin-top: 0.4em;
  font-size: 1.5em;
}

@media (max-width: 24em) {
	.header .logo {
		font-size: 1em;
	}
} 

@media (max-width: 18em) {
	.header .logo {
		font-size: 0.5em;
	}
} 

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  height: 5%;
}

/* menu icon */

.header .menu-icon {
	cursor: pointer;
	display: flex;
	float: right;
	user-select: none;
	height: 80%;
    padding-top: 3px;
	flex-direction: column;
	flex-wrap: nowrap;
    flex-direction: column-reverse;
    justify-content: space-around;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: all .2s ease-out;
  width: 30px;
}

.header .menu-btn:checked ~ .menu-icon .navicon:nth-child(1) {
  top: 2px;
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:nth-child(2) {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:nth-child(3) {
  top: -2px;
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
  overflow: visible;
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

.header .menu-btn {
  display: none;
}

/* 48em = 768px */
@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
  .header li a{
  	padding-top: 10px;
  	padding-bottom: 0px;
  	margin-left: 40px;
  }
  .header ul {
	overflow: visible;
  }
}

.header .menu-btn:checked ~ .menu-icon {
	display: block;
	height: auto;
    margin-top: 3%;
}

/*====================================================================================================*/
/*Body*/
/*====================================================================================================*/
#Body_Container{
	clear: both;
	background-image: url("../images/background.png");
    background-size: cover;
	background-position: center;
	margin: 0;
	padding: 0;
    overflow: hidden;
	flex-grow: 1;
	display: flex;
}

.pages > .page:target ~ .page:last-child, .pages > .page {
	visibility: hidden;
	opacity: 0;
	width: 0;
	height: 0;
}

/* :last-child works, but for some reason .page:last-child will not */
.pages > :last-child, .pages > .page:target {
	display: flex;
	visibility: visible;
	height: 100%;
	width: 100%;
	opacity: 1;
	transition: opacity 1s ease;
}

/*====================================================================================================*/
/* Live */
/*====================================================================================================*/

#LiveDetails{
	display: flex;
	background-color: #55555555;
	width: 100%;
    align-items: center;
    justify-content: safe center;
    flex-direction: column;
	color: #FFFFFF;
	overflow: auto;
	padding-top: 3em;
	padding-bottom: 3em;
}

#LiveDetails a {
  border: 0;
  color: inherit; /* blue colors for links too */
  text-decoration: none; /* no underline */
  outline: 0px;
}

#LiveDetailsUpcoming{
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#LiveDetailsPast{
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	color: #CDCDCD;
}

@media (max-width: 450px) {
	#LiveDetailsUpcoming h2{
		font-size: 1em;
        text-align: center;
	}
	#LiveDetailsPast h2{
		font-size: 1em;
        text-align: center;
	}
} 

/*====================================================================================================*/
/* Band */
/*====================================================================================================*/

#BandPhoto{
	display: flex;
	width: 100%;
    justify-content: center;
}

#BandPhoto img {
	width: auto;
  height: 100%;
  object-fit: contain;
}

#BandText{
	display: grid;
	width: 50%;
    align-items: center;
	overflow: auto;
	text-align: justify;
	color: #FFF;
	margin-right: 5%;
}

@media (orientation: portrait) {
	#BandPhoto img {
		height: auto;
		width: 100%;
	}

	#BandText{
		width: 90%;
		height: 50%;
		padding: 5%;
	}
}


/*====================================================================================================*/
/* Sound */
/*====================================================================================================*/
#cover {
	display: flex;
	width: 50%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.flip-box {
  display: flex;
  background-color: transparent;
}

.flip-box-inner {
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
	width: auto;
    --side: min(50vw, 50vh);
    height: var(--side);
    aspect-ratio: 1/1;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box:hover:after .flip-box-front {
	opacity: 0;
	transition: opacity 0.8s;
}

.flip-box:focus .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box:focus:after .flip-box-front {
	opacity: 0;
	transition: opacity 0.8s;
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
	transform: rotateX(0deg);    
}

.flip-box-front img {
	width: 100%;
	box-shadow: 5px 10px 5px #00000033;
}

.flip-box-back {
	background-color: #282828;
	opacity: 0.7;
	color: white;
	transform: rotateY(180deg);
	border-radius: 5%;
}

.flip-box-back iframe{
	position: absolute;
	top: 5%;
	left: 0;
}

#tracks{
	display: flex;
	width: 50%;
	padding-left: 10%;
	background-color: #FF5C5CDD;
    align-items: flex-start;
    flex-direction: column;
    justify-content: safe center;
	overflow: auto;
	box-sizing: border-box;
}

#tracks h1{
	color: #FFFFFF;
}

#tracks h2{
	color: #FFFFFF;
	font-weight: 100;
	margin: 0;
}

#tracks h3{
	color: #FFFFFF;
	font-weight: 100;
    display: inline;
}

#tracklinks {
	margin-top: 2em;
}

#tracklinks a {
  text-decoration: none;
	padding-right: 2em;
}

@media (orientation: portrait) {
	#Sound {
		flex-direction: column;
	}

	#cover {
		display: flex;
		width: 100%;
		height: 50%;
	}

	#tracks{
		display: flex;
		width: 100%;
		height: 50%;
	}
}

/*====================================================================================================*/
/* Kontakt */
/*====================================================================================================*/

#KontaktDetails{
	display: flex;
	background-color: #55555555;
	width: 100%;
	height: 100%;
    align-items: safe center;
    justify-content: center;
    flex-direction: column;
	overflow: auto;
	color: #FFFFFF;
}

#KontaktDetails a {
  border: 0;
  color: inherit; /* blue colors for links too */
  text-decoration: none; /* no underline */
  outline: 0px;
}

#KontaktDetails h2{
	font-weight: 100;
}

/*====================================================================================================*/
/* Default */
/*====================================================================================================*/

#VideoPromoFrame {
	width: 100%;
	height: 100%;
}

#VideoPromo {
    display: flex;
    justify-content: center;
    align-items: center;    
    flex-direction: column;
    width: 100%;
    height: 100%;	
	background-image: url("../images/everyminute.png");
	background-repeat: no-repeat;
    background-size: cover;
	background-position: center;
	background-color: black;
}

#VideoPromo h1 {
	font-weight: bolder;
    font-size: 10vw;
	color: #FFF;
    margin-bottom: 0;
    user-select: none;
	margin: 0;
	padding: 0;
}

#PromoLinkTitle{
	margin: auto;
	padding-top: 30%;
}

#PromoLinkPlay{
	padding-bottom: 30%;
}

#VideoPromo h3 {
	font-weight: bolder;
    font-size: 3vw;
	color: #FFF;
	width: 150%;
	border: 10px solid transparent;
	background-color: #ADD8E6;
    user-select: none;
    white-space: nowrap;
	box-sizing: border-box; 
	text-align: center;
	margin-left: -25%;
}

#VideoPromo a {
  text-decoration: none;
}

#VideoPromo img{
    height: 90%;
}

/*====================================================================================================*/
/* Footer */
/*====================================================================================================*/
footer {
	display: inline-flex;
	flex-direction: column;
}

#Footer_Container{
	display: flex;
    align-items: stretch;
	background-color: #FFFFFF;
	margin: 0;
	padding: 0;
}

#Footer_Left{
	display: flex;
}

#Footer_Left h3{
	font-weight: bold;
}

#Footer_Left a {
  text-decoration: none;
}

#Footer_Right{
	display: flex;
    justify-content: flex-end;
    align-items: center;
	flex-grow: 1;
}

#Footer_Right a{
	margin-left: 3vw;
}

#Footer_Right a:hover {
  opacity: 0.7;
}

#Footer_Right a img{
	height: 2em;
}

@media (max-width: 40em) {
	#Footer_Right a img{
		height: 1.5em;
	}
}

@media (max-width: 30em) {
	#Footer_Left h3{
		font-size: 0.75em;
	}
	#Footer_Right a img{
		height: 1em;
	}
}

@media (max-width: 20em) {
	#Footer_Left h3{
		font-size: 0.5em;
	}
	#Footer_Right a img{
		height: 1em;
	}
}