/* Toni Schönbuchner 
   v1.0 | 26052014
*/

@font-face {
    font-family: 'firlokblack';
    src: url('../fonts/firlok-black-webfont.eot');
    src: url('../fonts/firlok-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/firlok-black-webfont.woff') format('woff'),
         url('../fonts/firlok-black-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'faktpromed';
    src: url('../fonts/faktpro-medium-webfont.eot');
    src: url('../fonts/faktpro-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/faktpro-medium-webfont.woff') format('woff'),
         url('../fonts/faktpro-medium-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'Fakt Pro Normal';
  src: url('../fonts/FaktPro-Normal.eot'); /* IE9 Compat Modes */
  src: url('../fonts/FaktPro-Normal.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/FaktPro-Normal.woff') format('woff'), /* Modern Browsers */
       url('../fonts/FaktPro-Normal.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/FaktPro-Normal.svg#ffef269f4240d18c51242590b3fc7b52') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'Fakt Pro light';
  src: url('../fonts/Fakt-Light.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Fakt-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Fakt-Light.woff') format('woff'), /* Modern Browsers */
       url('../fonts/Fakt-Light.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Fakt-Light.svg#ffef269f4240d18c51242590b3fc7b52') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}

/*	-------------------------------------------
	body +  html define whole viewport
	-------------------------------------------
 */

body, html {
 	height: 			100%;
 	width:				100%;
 	overflow:			hidden;
  	margin:				0;
	padding:			0;
	font: 				300 87.5/120% "Fakt Pro light", Helvetica, Arial, "Lucida Grande", sans-serif;
	}
	
/*	-------------------------------------------
	centered menu for navigation	
	-------------------------------------------
 */

.menu{
	position:			absolute;
	left:				0;
	right:				0;
	top:				20px;
	text-align: 		center;
    z-index: 			2;
}

.menu p{
	cursor: 			pointer;
	display:			inline;
	margin-left:		10px;
	margin-right:		20px;
	color:				#d9c78c;
	text-transform: 	uppercase;
	font-weight: 		100;
	font-size: 			120%;
	letter-spacing: 	1px;
}

b {
	font-weight: 600;
}


/*	-------------------------------------------
	draggable div boxes for content	
	-------------------------------------------
 */
 
div {
 	font-family: 		 "Fakt Pro Normal", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 		400;
 }
 
a{
	color:				#000;
}

a:hover{
	color:				#d9c78c;
}

.draggable{
	width:				400px;
	height:				400px;
	position:			absolute;
	display:			none;
    z-index:			3;
	padding:			5px;  
	line-height: 		130%;
	cursor: 			move;
  	background-image: 	url(../img/plainback.png);

}

video{
		cursor: 			move;
}

#music{
	cursor:					default;
}

.textbox{
	padding:15px;
}

#music{
	width: 				700px;
	height: 			auto;
}

#about{
	height: 			auto;
	width:				300px;
  	background-image: 	url(../img/aboutback.png);

}

#band{
	width:				300px;
	height: 			215px;
  	background-image: 	url(../img/bandback.png);
}

#news1,#news2,#news3,#news4{
	width:				300px;
	height: 			215px;
  	background-image: 	url(../img/bandback.png);
}

#news1{
	    opacity: 			1!important; 
	    width: 480px!important;
		height: auto;
		background-image:url(../img/imprintback.png);
}

#news2,#news4{
	width: 480px!important;
	height: auto;
	background-image:url(../img/imprintback.png);
}

#news1 a,#news2 a,#news3 a,#news4 a{
	font-size: 100%;
}

#news1 h1,#news2 h1,#news3 h1,#news4 h1{
	font-weight: bold;
}

span.bigger{
	font-size: 110%;
	margin-top: 8px;
    display: inline-block;
}

#reference{
	width:				770px;
	height: 			auto;
  	background-image: 	url(../img/bandback-long-wide.png);
  	background-repeat: repeat-x;
}

#friends{
	width:				300px;
	height: 			275px;
  	background-image: 	url(../img/bandback.png);
}


#contact{
	width:				260px;
	height: 			auto;
  	background-image: 	url(../img/contactback.png);
}

#imprint{
	width:				480px;
	height: 			auto;
  	background-image: 	url(../img/imprintback.png);
}

.funding {
    position: absolute;
    width: 420px;
    background: #fff;
    bottom: 20px;
    left: 20px;
    padding: 20px;
    box-sizing: border-box;
}

.funding_text {
    font-size: 11px;
    line-height: 13px;
    margin-bottom: 10px;
    display: block;
}
.funding_other {
    display: none;
}

.person{
	width: 				200px;
	height:				auto;
}

.person_landscape{
	width: 				300px;
	height:				auto;
}


.invisible{
	visibility: hidden;
}

/*	-------------------------------------------
	box content
	-------------------------------------------
 */

h1{
 	font-family: 		"firlokblack",serif; 
 	font-size: 			200%;
 	margin:				0 0 30px 0;	
}

/* close buttons */
.close{
	position: 			absolute;
	cursor: 			pointer;
	width: 				22px;
	height:				22px;
}

.closetr{
	top: 				15px;
	right:				15px;
}

.closetl{
	top: 				15px;
	left:				15px;
}

.closebl{
	bottom:				30px;
	left:				15px;
}

.closebr{
	bottom:				15px;
	right:				10px;
}

.closebr25{
	bottom:				25px;
	right:				10px;
}

/* video display */
#promo-video{
	opacity: 			1!important; 
	width:				100%;
	background-color: 	#fff;
}

i{
	font-style: italic;
}

/* copy text inside content divs */

.draggable p{
	margin: 			10px 0 10px 15px;
}

.draggable p.sin{
	margin: 			20px 0 0 0;
}

table{
	width: 				100%;
}

td.first{
	width:				150px;
	cursor: 			pointer;
}

td.second{
	background-image: 	url(../img/divider.gif);
	background-position: 0 10px;
    background-repeat: repeat-x;
}

td.third{
	width:				150px;
	padding-left: 		5px;
}

td.thirty{
	width:				200px;
	padding-left: 		5px;
}

.divider{
	margin: 			0 4px 4px;
	height:				1px;
}

.divi1{
	width: 				67px;
}

.divi1{
	width: 				67px;
}

.divi2{
	width: 				65px;
}

.divi4{
	width: 				89px;
}

.divi5{
	width: 				61px;
}

.divi6{
	width: 				69px;
}

.noMove{
	cursor:				default!important;
}

/*	-------------------------------------------
	styles for background image	
	-------------------------------------------
 */
 
#logo { 
	position: 			absolute; 
	top: 				80px; 
	left: 				110px; 
	z-index:			2;
	width:				14%; 
}

/*	-------------------------------------------
	styles for background image	
	-------------------------------------------
 */

#bg { 
	position: 			fixed; 
	top: 				0; 
	left: 				0; 
	z-index: 			1;
}

.bgwidth { 
	width: 				100%; 
	}
	
.bgheight { 
	height: 			100%; 
	}