/* Basics ======================================================= */

html, body					{ color:#777; font-size: 100%; margin:0; padding:0; border:0; background-color:#fff; -webkit-text-size-adjust:none; }
body						{ font-family: 'Viga', Arial, 'Helvetica', sans-serif; min-width:320px; height:100%; }

div, img					{ margin:0; padding:0; border:0; outline:0; }
div							{ display:block; }

h1, h2, h3, h4, h5, h6		{ font-family:'Viga', Arial, 'Helvetica', sans-serif; font-weight: 400; text-rendering: optimizelegibility;
							  text-transform:uppercase; margin:0; padding:0; background:url(../img/afix.gif); color:#888; }

h1							{ font-size:3em; 	  line-height:1em;      margin-bottom:0;  }
h2							{ font-size:1.75em;   line-height:1.0714em; margin-bottom:0.3em;  }
h3							{ font-size:1.3125em; line-height:1.1428em; margin-bottom:0.25em; }
h4							{ font-size:1.2em;    line-height:1.2em;    margin-bottom:0.2em;  }
h5, h6						{ font-size:1em;      line-height:1.25em;   margin-bottom:0.15em; }

p							{ margin:0; padding:0 0 0.5em 0; background:url(../img/afix.gif); font-size:0.8125em; line-height:1.3846em; font-family:'Sintony', Arial, 'Helvetica', sans-serif; }
p.smallcopy					{ font-size:0.6875em; line-height:1.25em; }
ul, ol						{ margin:0; padding:0; }

sup, sub 					{ height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; }
sup 						{ bottom: 1ex; }
sub 						{ top: .5ex; }

small 						{ font-size:0.9em; }

.clear						{ clear:both; }

/* Scrollr =========================================== */

.scrollr-bg					{ width:100%; height:100%; min-height:800px;  }

.plane						{ position:absolute; width:130%; height:100%; margin-left:-15%;  z-index:0; }
.first-plane				{ margin-top:-150px; }
.scrollr-black				{ background:#000; }
.scrollr-white				{ background:#fff; }

/* Main ============================================== */

#header						{ z-index:10; background:#000; width:100%;  }
.headercontent				{ position:relative; width:960px; padding:25px 0 15px 0; margin:0 auto; border-bottom:1px solid #ddd; }
#header h1					{ color:#fff; }
#header h3					{ margin-bottom:2px; }

#header.start				{ position:relative; margin-bottom:-151px; }
#header.fixed				{ position:fixed; height:69px;  }
#header.fixed .headercontent{ padding:10px 0 7px 0; }

#header.fixed h1			{ font-size:2em; }
#header.fixed h3			{ font-size:1.175em; }
#header.fixed ul			{ margin-top:-26px; }

a.mobilemenu				{ display:none; float:right; width:26px; height:26px; margin-top:-1px; background:#000 url(../img/mobilemenu.png) no-repeat; text-decoration:none; }

ul.navi						{ list-style:none; width:100%; text-align: right; }
ul.navi li					{ display:inline-block; padding:0 0 0 10px; }
ul.navi li:before			{ content:'// ' }
ul.navi li a				{ text-decoration: none; color:#fff; text-transform:uppercase; }
ul.navi li a:hover			{ color:#e60001; }

#main						{ position:relative; width:100%; padding-top:151px; overflow:hidden; }

.rubric						{ width:100%; min-height:600px; }
.rubric-content				{ position:relative; width:960px; padding:60px 15px 80px 15px; margin:0 auto; z-index:1; }
div.rub-left				{ float:left; width:300px; padding:0 40px 25px 0; }
div.rub-right				{ float:left; width:60%; }

h2.title					{ width:100%; padding-bottom:5px; border-bottom:1px solid #888; margin-bottom:20px;  }
h2.title a.pup,
h2.title a.pdwn				{ float:right; color:#888; text-decoration: none; }
h2.title a.pup:hover,
h2.title a.pdwn:hover		{ color:#e60001; }

div.white					{  }
div.black					{  }

/* Videos ============================================ */

#videocontainer				{ width:990px; margin-left:-15px; border:1px solid #333; }
#videocontainer .featured	{ width:960px; padding:12px 15px 2px 15px; background:#000; }

#videocanvas				{ width:960px; background:#000; }
#videocanvas iframe			{ width:100%; }

.selectioncontainer						{ width:960px; margin-left:15px; margin-bottom:12px; height:570px; overflow:scroll; overflow-y: hidden; }
#videoSelection							{ width:auto; margin-right: -999em; white-space: nowrap; float:left; }
#videoSelection .filecolumn				{ float:left; width:314px; height:360px; margin-right:9px;  }
#videoSelection .filecolumn:last-child	{ margin-right:0; }


.selectioncontainer.mobile	{ background:url(../img/mobilearrows.png) center bottom no-repeat; height:400px; }

.filecolumn .file			{ width:100%; height:177px; margin-bottom:8px; background:#111; cursor:pointer; overflow:hidden; }
.filecolumn .file img		{ position:relative; width:100%; margin:0; padding:0; border:0; outline:0; pointer-events:none; }
.filecolumn .file .fileInfo { position:relative; width:100%; height:64px; margin-top:-64px; background:#333; background:rgba(0,0,0,0.7); vertical-align: middle; opacity:0; }
.filecolumn .file .fileInfo p { padding:10px 15px; text-align:center; color:#fff; white-space: normal; };

/* Gallery =========================================== */

#photographs						{ position:relative; width:960px; margin-left:15px; margin-bottom:12px;  }
#photographs .selection				{ position:relative; width:100%; }
#photographs .filecolumn			{ float:left; width:24%; margin-right:1%;  }
#photographs .filecolumn:last-child	{ margin-right:0; }

#photographs .filecolumn .file		{ height:auto; margin-bottom:1px; background:none; position:relative; overflow:hidden; cursor:pointer;}

#photographs .selected				{ margin-bottom:8px; }

.selected .selector				{ width:100%; height:4%; background:#fff; }
.selected .selector #selectback,
.selected .selector #selectnext	{ display:block; width:45px; height:2500%; text-decoration:none; opacity:0.2; 
								  
								}

.selected .selector #selectback	{ float:left; margin-top:-68%; background:url(../img/pfeil_back.png) left center no-repeat;  }
.selected .selector #selectnext	{ float:right; margin-top:-68%; background:url(../img/pfeil_next.png) right center no-repeat;  }

.selected .selector #selectback:hover,
.selected .selector #selectnext:hover { }

.selected .activecloser			{ position:absolute; width:36px; height:40px; top:0; right:0px; text-align:center; }
.selected .activecloser a		{ display:block; width:100%; height:100%; background:url(../img/zu.png) top left no-repeat; text-decoration:none; }

.selected.open					{ display:block; }
.selected.hidden				{ display:none; }


/* Vita ============================================== */

.myself						{ width:100%; margin-bottom:25px; max-width:300px; }
.myself img					{ width:100%; }



@media screen and (max-width: 990px) {
	
	.headercontent				{ width:100%; padding:15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	
	#header.fixed				{ height:auto; }
	#header.fixed ul			{ margin-top:0; }
	#header.fixed .headercontent{ padding-left:15px; padding-right:15px; }
	
	.rubric-content				{ width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	
	#videocontainer				{ width:100%; border:0; }
	#videocontainer .featured	{ width:100%; }
	#videocanvas				{ width:100%; }
	
	.selectioncontainer			{ width:100%; height:480px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  }
	.selectioncontainer.mobile	{ height:490px; }
	#videoSelection .filecolumn	{ width:260px; height:330px; }
	.filecolumn .file			{ height:147px; }
	
	div.rub-left				{ width:32%; padding-right:4%; }
	div.rub-right				{ width:63%; }
	
}

@media screen and (max-width: 600px) {
	
	#header.start ul.navi		{ display:block !important; }
	#header.fixed h1			{ font-size:1.8em; }
	#header.fixed h3 			{ font-size:1.09em; }
	#header.fixed a.mobilemenu	{ display:block; }
	#header.fixed ul.navi		{ display:none; }
	#header.fixed ul.navi li	{ display:block; padding-top:5px; padding-bottom:5px; }
	
	#header.fixed .headercontent{ padding-top:7px; padding-bottom:5px; }
	
	div.rub-left				{ width:100%; padding-right:0; }
	div.rub-right				{ width:100%; }
	
	h2.title					{ font-size:1.5em; }
	
	.selectioncontainer			{ height:384px; }
	.selectioncontainer.mobile	{ height:394px; }
	#videoSelection .filecolumn		{ width:200px; height:240px; }
	.filecolumn .file			{ height:115px; }
	.filecolumn .file .fileInfo { height:120px; margin-top:-120px; }
}

@media screen and (max-width: 500px) {
	
	#photographs .filecolumn	{ width:50%; margin-right:0%;  }
}


@media screen and (max-width: 600px) and (orientation:landscape) {
	#header.fixed h3			{  }
}

@media screen and (max-width: 460px) {
	
	#header.fixed				{ height:auto; }
	#header h1					{ font-size:2em; }
	#header h3					{ font-size:1.16em; }
	
	.selectioncontainer			{ height:280px; }
	.selectioncontainer.mobile	{ height:300px; }
	#videoSelection .filecolumn		{ width:141px; height:170px; }
	.filecolumn .file			{ height:80px; }
	.filecolumn .file .fileInfo { height:84px; margin-top:-86px; }
	
}