@charset "UTF-8";
/* CSS Document */

*
{
	padding:0;
	margin:0;
	z-index:1;
}

body, html
{
	width:100%;
	height:100%;
	font-size: 11px;
	color: #fff;
	font-family: "Abel","Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	min-height: 600px;
}

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

body, html, #mainWrapper
{
	position:relative;
}

html
{
	background-color:#009BD9;
}

a, a:link, a:visited
{
	text-decoration:underline;
	color:#fff;
}

body
{
	  background-color:#e74011;
	  overflow:hidden;
	  
	  	-webkit-transition: width 0.5s ease;
		-moz-transition: width 0.5s ease;
		-o-transition: width 0.5s ease;
		-ms-transition: width 0.5s ease;
		transition: width 0.5s ease;
}

body.thin
{
	width: 50%;
}

#btnToText
{
	width: 50px;
	height: 20px;
	background-image: url(../img/linernotes_18.png);
	background-repeat:no-repeat;
	background-position: center center;
	position:absolute;
	bottom: 10px;
	right: 0px;
	cursor:pointer;
	z-index: 500;
}

#btnDwnld
{
	width: 150px;
	height: 50px;
	background-image: url(../img/download_18.png);
	background-repeat:no-repeat;
	background-position: top right;
	position:absolute;
	top: 30px;
	right: 20px;
	cursor:pointer;
	font-size: 13px;
	letter-spacing:0.04em;
	color: rgba(255,255,255,0.52);
	line-height: 17px;
}

#txtBx
{
	position:absolute;
	width:0%;
	padding: 0;
	top:0;
	right:-50%;
	overflow:scroll;
	max-height:100%;
}

#txtcontent
{
	font-size: 18px;
	line-height:28px;
	padding: 280px 8% 200px;
	letter-spacing: 0.03em;
}

#btnToPic
{
	width: 50px;
	height: 26px;
	background-image: url(../img/pic_18_50.png);
	background-repeat:no-repeat;
	background-position: center center;
	position:absolute;
	bottom: 34px;
	right: 0px;
	cursor:pointer;
	z-index: 500;
}

#picBx
{
	position:absolute;
	width:0%;
	padding: 0;
	top:0;
	right:-50%;
	overflow:scroll;
	max-height:100%;
}

#piccontent
{
	font-size: 18px;
	line-height:28px;
	padding: 280px 40px 20px 20px;
	letter-spacing: 0.03em;
}

#piccontent img
{
    width:100%;
    margin:10px 10px 10px 10px;

}

#btnToPoem
{
	width: 50px;
	height: 26px;
	background-image: url(../img/poem_18.png);
	background-repeat:no-repeat;
	background-position: center center;
	position:absolute;
	bottom: 60px;
	right: 0px;
	cursor:pointer;
	z-index: 500;
}

#poemBx
{
	position:absolute;
	width:0%;
	padding: 0;
	top:0;
	right:-50%;
	overflow:scroll;
	max-height:100%;
}

#poemcontent
{
	font-size: 18px;
	line-height:28px;
	padding: 280px 8% 200px;
	letter-spacing: 0.03em;
}

#txtBx.open
{
	width:100%;
	right:-100%;
}

#picBx.open
{
	width:100%;
	right:-100%;
}

#poemBx.open
{
	width:100%;
	right:-100%;
}

body *
{
	  z-index: 50 !important;
}


#footer
{
	position:absolute;
	bottom:0;
	width:80%;
	height:60px;
}

#footer p
{
	position: absolute;
	bottom: 10px;
	left: 35px;
	font-style: normal;
	font-weight: 100;
	letter-spacing: 0.05em;
}

#logoWContainer, #logoRContainer
{
	width: 75%;
	height: 120px;
	max-width:275px;
	position: absolute;
	top: 35px;
	left: 35px;	
}

.logo
{
	background-repeat:no-repeat;
	background-size: 100% auto;
	width:100%;
	height:100%;
	position:relative;
}

#logoWhite
{	
	background-image: url(../img/logo_weiss.svg);
}

#logoRed
{
	background-image: url(../img/logo_rot.svg);
}

#arrow
{
	position:absolute;
	left:60%;
	bottom:30px;
}

.imgHolder
{
	width:100%;
	height:100%;
	z-index: 0 !important;
	position:absolute;
	background-size:cover;
}



/* navi */
.btnNavi
{
	padding: 3px;
	border-radius: 250px;
	margin: 4px;
	cursor:pointer;
	border: 2px solid transparent;
}

.circleNavi
{
	width: 8px;
	height: 8px;
	border-radius: 250px;
	background-color:rgba(255,255,255,0.5);
}

.btnNavi:hover > .circleNavi
{
	background-color:rgba(255,255,255,1);
}

.btnActive
{
	background-color:rgba(255,255,255,1);
}

.btnPlaying
{
	border: 2px solid #fff;
}

.btnActive .circleNavi
{
	background-color:rgba(255,255,255,1);
}


/* player */
#currentSong
{
	width:100%;
	height: 500px;
	position:absolute;
	top:270px;
	left: 35px;
	background-repeat:no-repeat;
	background-size: 100% auto;
	cursor:pointer;
	max-width: 1200px;
}

#player
{
	position:absolute;
	height:100%;
	width:85%;
	display:block;
	max-width: 900px;
}




/*center vert*/
.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.middle {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  float:right;
  padding: 10px;
}

@media only screen and (max-width: 400px){
	body, html
	{
		min-height:0;
	}
	
	#logoWContainer, #logoRContainer
	{
		top: 20px;
		left: 20px;	
	}
	
	#currentSong
	{
		top:50%;
		left:20px;
	}
	
	#footer p
	{
		left:20px;
	}
	
	#footer
	{		
		width:80%;
	}
	
	#txtcontent
	{
		font-size:16px;
		line-height:20px;
	}
}