/*  --------------------------------------------------
	
	28888888801;   
	888888;   :1$1 
	88880:       02
	8880:        02
	880:      :|21 
	88800211111|   
	88881          
	8881           
	881            
	21         
	
	made by paul schneider — graphic and webdesign
	www.pixelot.de

	--------------------------------------------------

	no intel insie, but some of this stuff:

	01 - Reset
	02 - Grid
	03 - Basics
	04 - Typography
	05 - Structure
	06 - Layout

	-------------------------------------------------- */

			
	/* --------------------------------------------------
	
	01 - Reset

	-------------------------------------------------- */
	

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

.row:after,
.clearfix:after {
	clear: both;
	content: '.';
	display: block;
	visibility: hidden;
	height: 0
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}	

	
	/* --------------------------------------------------
	
	02 - Grid

	— width: 990px 
	— gutters: 30px (left: 15, right: 15)
	— outer margins: 30px (left: 15, right: 15)
	
	-----------------------------------------------------
	
	Cols	1		2		3		4		5		6		7		8		9		10		11		12
	Px		50		130		210		290		370		450		530		610		690		710		850		930
	
	-------------------------------------------------- */

.row {
	position: relative;
	margin:0 auto;
	width: 960px;
	padding: 0 15px;
 }
  
.col {
	float: left;
	display: block;
	margin: 0 15px;
	position: relative;
}

.row .row {
  	width: 100%;
  	margin: 0 -15px;
	overflow: hidden;
	}
	
*+html .row .row {
	margin: 0 0px;}

/* basic grid */
.grid_1 {width: 50px;}
.grid_2 {width: 130px;}
.grid_3 {width: 210px;}
.grid_4 {width: 290px;}
.grid_5 {width: 370px;}
.grid_6 {width: 450px;}
.grid_7 {width: 530px;}
.grid_8 {width: 610px;}
.grid_9 {width: 690px;}
.grid_10 {width: 770px;}
.grid_11 {width: 850px;}
.grid_12 {width: 930px;}
/* third's */
.grid_1_third {width: 284px;}
.grid_2_third {width: 598px;}
/* grid offset */
.offset_1 {margin-left: 95px;}
.offset_2 {margin-left: 175px;}
.offset_3 {margin-left: 255px;}
.offset_4 {margin-left: 335px;}
.offset_5 {margin-left: 415px;}
.offset_6 {margin-left: 495px;}
.offset_7 {margin-left: 575px;}
.offset_8 {margin-left: 655px;}
.offset_9 {margin-left: 735px;}
.offset_9 {margin-left: 815px;}
.offset_9 {margin-left: 895px;}	
	
	
	/* --------------------------------------------------
	
	03 - Bascis

	-------------------------------------------------- */
	
body {
	padding: 0 0 0 0;
	margin: 0;
	background:#000 url(../img/loading_white.gif) center center no-repeat;
	}

html, body {
	width:100%;
	height:100%;
	overflow-x:hidden;
	}
	

*+html, *+htl body  {
	overflow:hidden;} 
	
strong {font-weight:bold;}

.right {text-align:right}

.center {text-align:center;}

.light {color:#888;}

p {padding-bottom:30px;}

.no-border {border:none;}

a:link, a:visited{
	outline:none;
	color:#000;
	-webkit-transition: color 300ms; 
	-moz-transition: color 300ms;
	-webkit-transition: color 300ms; 
	-moz-transition: color 300ms;
	text-decoration:underline;
}	
	
a:hover {
	color:#00946c;
	-webkit-transition: color 300ms; 
	-moz-transition: color 300ms;
	-webkit-transition: color 300ms; 
	-moz-transition: color 300ms;
}

#loader-overlay {
	background:url(../img/loading_white.gif) center no-repeat;
}

	
	/* --------------------------------------------------
	
	04 - Typography

	-------------------------------------------------- */
	
body {
	font-family: "Times New Roman", Times, serif;	
	font-size:18px;	
	line-height:24px;
	color: #000;	
	}

.heading {
	color:#fff; 
	font-family: 'Montserrat', sans-serif;
	font-size:24px;
	line-height:24px;
	padding-bottom:15px;
	margin-top:41px;
	vertical-align: baseline;
	word-break:keep-all;
	border-bottom:2px solid #000;
	text-transform:uppercase;
	color:#000;
	margin-bottom:15px;
}

h3 {
	font-family: 'Montserrat', sans-serif;
	font-size:16px;
	border:none;
	}

.title-cat {
	font-size:14px;
	font-family:"Times New Roman", Times, serif;
	vertical-align:baseline;
	word-break:keep-all;
	}
	
.small {
	font-size:14px;
	font-family:"Times New Roman", Times, serif;
	vertical-align:baseline;
	word-break:keep-all;
	line-height:18px;
	display:inline-block;
	margin:5px 0;
	}

.overlay.heading {
	font-family: 'Montserrat', sans-serif;
	font-size:16px;
	text-transform:none;
	border:none;
	line-height:80px;
	padding:0;
	margin-top:0;
	vertical-align: baseline;
	word-break:keep-all;
	}

	
	/* --------------------------------------------------
	
	05 - Layout

	-------------------------------------------------- */


/* ---------------------------------------- navigation */

nav {
	font-family: 'Montserrat', sans-serif;
	font-size:17px;
	color:#fff;}

	#fixed-nav {
		height:20px;
		position:absolute;
		top:130px;
		margin-top:0px;
		z-index:9999;
		text-align:right;
		}
	
		#nav {
			list-style-type:none;
			padding:0;
			}
		
			#nav li {
				display:inline;
				margin-right:30px;
				}
			
				#nav a:link, #nav a:visited {
					font-family: 'Montserrat', sans-serif;
					line-height:80px;
					vertical-align: baseline;
					text-decoration:none;
					color:#fff;
					padding-bottom:5px;
					border-bottom:2px solid transparent;
					-webkit-transition: border 300ms; 
					-moz-transition: border 300ms;
					-webkit-transition: border 300ms; 
					-moz-transition: border 300ms;
					}
					
				#nav a:hover{
					padding-bottom:5px;
					border-bottom:2px solid #fff;
					-webkit-transition: border 300ms; 
					-moz-transition: border 300ms;
					-webkit-transition: border 300ms; 
					-moz-transition: border 300ms;
					}
					
				#nav a.current{
					color:#fff;
					padding-bottom:5px;
					border-bottom:2px solid #fff;
					}

	a.fb-share {
		display:inline-block;
	    height:19px;
	    font-family: Arial, Helvetica, sans-serif;
	    border:1px solid #cad4e7;
	    line-height:20px;
	    vertical-align: text-bottom;
	    font-size:.80em;
	    background:#eceef5 url(../img/fb-icon.gif) 4px center no-repeat;
	    color:#3b5998;
	    text-decoration:none;
	    letter-spacing:normal;
	    padding:0 4px 0 20px;
	    -moz-border-radius: 2px; /* Firefox */
	    -webkit-border-radius: 2px; /* Safari, Chrome */
	    border-radius: 2px; /* CSS3 */
	}
  
	a.fb-share:hover {
	    background-color:#eceef5;
	    border-color:#9dacce;
	}
	



	
	.page-nav:link, .page-nav:visited { 
		font-family: 'Montserrat', sans-serif;
		line-height:30px;
		vertical-align: baseline;
		text-decoration:none;
		color:#fff;
		
		padding:0 0px;	
	}

	.page-nav:hover{
		border-bottom:2px solid #fff;
	}


	#infos-btn {
		position:absolute;
		right:30px;
		top:50%;
		margin-top:-22px;		
	}

	






/* ---------------------------------------- content and slides */
		
#content {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:none;
	width:100%;
	overflow:hidden;
	z-index:9600;
	}
	
	#article-wrapper {
		width:900%;
		}
	
		.panel {
			padding:0;
			margin:0;
			width:10%;
			height:100%;
			float:left;
			background-color:#fff;
			height: inherit;
			position:relative;
			overflow:hidden;
			}
			
			#infos, #impressum {
				overflow-y:scroll;
			}
	
			#infos .row, #impressum .row {
				padding-left:30px;
				padding-right:0
			}
			

/* ---------------------------------------- footer */

#logo {
	position:fixed;
	display:block;
	bottom:30px;
	z-index:9999;
	margin-left:-70px;
	width:182px;
	height:88px;
	text-indent:-9999px;
	background:url(../img/lyriklabor-logo.png) no-repeat;
	background-position:-182px 0;
	}
	
footer {
	display:block;
	z-index:9600;
	position:absolute;
	bottom:30px;
	color:#fff;
	line-height:24px;
	vertical-align:baseline;
	width:100%;
	}

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

/* ---------------------------------------- panel: start*/

#start {
	background-color:transparent;
}

#start .row {
	height:100%;
}
	
	#head {
		position:absolute;
		top:30px;
		right:30px;
		text-align:right;
	}

	#head a {
		color:#fff;
	margin-left:20px;
	padding-bottom:5px;
}

#head i {
	font-size:1.2em;
}

#head a:hover {
	text-decoration:none;
	border-bottom:2px solid white;
}


	h1 {
		font-size:60px;
		color:#fff; 
		font-family:"Times New Roman", Times, serif;
		font-weight:bold;
		line-height:1.1em;
		font-size:5em;
		vertical-align: top;
		padding:10px 0 0 0;
		margin:0;
		display:block
		}

		h1 p {
			padding:0;
			margin:0;
			}

.logo-part {
	position:absolute;
	display:block;
	z-index:9000;
	margin-left:-55px;
	width:65px;
	height:54px;
	text-indent:-99999px;
	background:url(../img/lyriklabor-logo.png) no-repeat;
	background-position:0px -88px;
	left:0;
	top:0;
	margin-top:30px;
	}



/* ---------------------------------------- panel: infos*/

#infos .row, #mitglied-werden .row, #impressum .row  {
	padding:80px 0;
}


.start-button {
	position:absolute;
	overflow:hidden;
	top:50%;
	left:50%;
	margin-top:-102px;
	margin-left:-495px;
	padding:0;
}


.start-btn {
	z-index:9999;
		left:30px;
		color:#000 !important;
		border-color:#000 !important;
		position:absolute;
		top:50%;
	}

	.start-btn:hover {
		border-bottom:2px solid #000;
	}

/* ---------------------------------------- panel: mitglied */	

#mitglied-werden {
	display:table;

}

#mitglied-werden .row:nth-child(2) {
	display:table-cell;
	vertical-align: middle;
	text-align:center;
}

a.overlay-toggle {
	position: absolute;
	top:30px;
	right:0;
}

/* ---------------------------------------- panel: impressum*/

#impressum .start-btn {
	
		color:#fff !important;
		border-color:#fff !important;
	}

	#impressum  .start-btn:hover {
	}




footer a {
	margin-left:20px;
	padding-bottom:5px;
	text-decoration:none;
}

footer i {
	font-size:1.2em;
}

footer a:hover {
	text-decoration:none;
	border-bottom:2px solid white;
}

#mitglied {
	 	color:#fff;
	 	text-decoration:none;
	}		

	#mitglied:hover {
	}







#impressum {
	background:#000;
	color:#fff;
}

#impressum a {
	color:#fff;
}






@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?91677644');
  src: url('../font/fontello.eot?91677644#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?91677644') format('woff'),
       url('../font/fontello.ttf?91677644') format('truetype'),
       url('../font/fontello.svg?91677644#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?91677644#fontello') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  text-align: center;
  padding:0 5px;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
     
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
}
 
.icon-email:before { content: '\e800'; } /* '' */
.icon-facebook:before { content: '\e801'; } /* '' */
.icon-up-dir:before { content: '\e80b'; } /* '' */
.icon-right-dir:before { content: '\e80a'; } /* '' */
.icon-down-dir:before { content: '\e80c'; } /* '' */
.icon-left-dir:before { content: '\e80d'; } /* '' */