/*
	Theme Name: Helga Fanderl
	Theme URI: http://helgafanderl.com
	Description: Custom theme for Helga Fanderl
	Version: 0.0.1
	Author: Guido Tamino
	Author URI: http://guidotamino.it
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

@font-face {
	/* Regular license from Luzi Type */
	font-family:'Messina Serif Regular';
	src: url('fonts/MessinaSerifWeb-Regular_gdi.eot');
	src: url('fonts/MessinaSerifWeb-Regular_gdi.eot?#iefix') format('embedded-opentype'),
		 url('fonts/MessinaSerifWeb-Regular_gdi.woff') format('woff'),
		 url('fonts/MessinaSerifWeb-Regular_gdi.svg#MessinaSerifWeb-Regular') format('svg');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	unicode-range: U+000D-FB04;
}

html * {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
	box-sizing: border-box;
}

*, *:before, *:after {
  	box-sizing: inherit;
}

html {
	color:#eaeff2;	
	background-color:#161616;
	font:16px;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.5); 
	-moz-osx-font-smoothing: grayscale;
}

a, a:visited { 
	text-decoration:none;
	color:#eaeff2;
}

#main, section, aside 	{ 	
	font:1rem/1.750rem "WSRegular"; 
}

/*------------------------------------*\
    LAYOUT
\*------------------------------------*/

	/* 1. Container */
#main { 
	width:85%;
	margin:0 auto;
	height:100%;
	top:0;
}
	
	/* 2. Header */
#main > header 	{ 	
	font:1.813rem/1.938rem "WSMedium"; 
	letter-spacing:0.008em;  
	padding-bottom:10px; /* Accomodate 2px border for menu items underline */ 
	padding-top:1.5rem;
	margin-bottom:5.5rem;
	position:relative;
	overflow:hidden;
	z-index:11;
}

#main > header.fix { /* Fixed version to use in Film Archive */
	position:fixed;
	width:85%;
	padding-bottom:6rem; /* Was 6 */
	background-color:#161616;
}

	#main > header h1 {
		width:34%;	
		float:left;
	}
	
	#main > header .lang {
		font:0.938rem/1.938rem "WSRegular";
		padding-top:0.25rem;
		color:#bcbec0;	
		display:none; 

	}
		
		#main > header .lang .selected{
			color:#eaeff2;	
		}
	
	/* 3. Navigation */
#main nav {
	width:66%; /* 30% is header h1 */
	float:right;
}

	#main nav li {
		width:120px;
		float:right;
		text-align:center;
	}
	
	#main nav li:first-child {
		width:80px;
		text-align:right;
	}

	#main nav li.current-menu-item a, #main nav li a:hover {
		border-bottom:2px solid #bcbec0;
		padding-bottom:1px;
	}

	
	/* 4. Sections */
#main section {
	margin-bottom:2rem;	
	width:60%; /* 40% is aside */
	float:left;
}

#main section#film { /* Film section doesn't have a sidebar */
	width:100%;
}

section h2 {
	font:2rem/3rem "Messina Serif Regular"; 
	}
		section#film h2 {
			line-height:2.133rem; /* If this changes, change .film header & .film footer accordingly */
		}
		
		
	
section p {
	color:#bcbec0;
}

	section p.text {
		font:1.125rem/1.750rem "Messina Serif Regular";
		padding-left:3rem;
		letter-spacing:0.008em;
	}
	


section .details {
		margin-top:0.2rem;
		margin-bottom:2rem;
	}
	
	section .notes {
		margin:2rem 0;
	}
	
	section .notes em {
		margin:2rem 0;
		color:#eaeff2;	
	}
	
	section article {
		padding-bottom:2rem;
		clear:both;
	}
	
	section figure {
		margin-bottom:2rem;
		padding-left:3rem;
	}
	
	section#film .details, section#film figure {
		margin-bottom:0;
	}
	
	section#news figure, section#about figure {
		position:relative;
	}
	
	section#text figure {
		width:180px;
		height:200px;
		float:left;
		padding-left:0;
	}
	
		section#text figure img {
			height:200px;
			width:auto;
		}
	
	section#about figure {
		margin-top:2rem;	
	}
	
	
		section#about .videoWrap, section#about video { width:540px; height:312px; }

		section#about .videoWrap {
			position:relative;
			z-index:2;
	
		}
		section#about .overlay {
			z-index:1;
			position:absolute;
			background-repeat:no-repeat;
			top:0;
			left:0;
			width:100%;
			height:100%;
			-moz-background-size:100%;
			-webkit-background-size:100%;
			background-size:100%;
		}
		
		section#about .play {
			background-image:url("img/video_cover.png");
			background-position:bottom left;	
		}
		
		section#about .pause {
			background-image:url("img/video_cover.png");
			background-position:top left;		
		}
	
	
	section#about figure video {
		cursor:pointer;
	}
	
	section#news figure img {
		width:500px;
	}
	
	section#news figcaption {
		position:absolute;
		left:590px;
		width:396px;
		text-align:center;
		-webkit-transform: rotate(-90deg);
		-webkit-transform-origin: left top 0;
		
		transform: rotate(-90deg);
		transform-origin: left top 0;
	
		display:block;
		font:0.813rem/0.5rem "WSRegular";
		color:#bcbec0;
	}
	
	section#about figcaption {
		position:absolute;
		left:545px; /* 630 */
		width:315px; /* 350 */
		
		text-align:center;
		-webkit-transform: rotate(-90deg);
		-webkit-transform-origin: left top 0;
		
		transform: rotate(-90deg);
		transform-origin: left top 0;
		display:block;
		font:0.813rem/0.5rem "WSRegular";
		color:#bcbec0;
	}

	/* 5. Aside */

	aside {
		width:30%;
		float:left;
		margin-left:10%;
	}
	
	aside em {
		color:#bcbec0;		
	}
	
	aside h2 {
		color:#bcbec0;	
		margin-bottom:2rem;
	}
	
	aside li {
		width:100%;
		overflow:auto;
		margin-bottom:1.750rem;
	}
	
		aside li p {
			float:left;
		}
	
		aside li p:first-child {
			width: 25%;
		}
	
		aside li p:last-child {
			width:75%;
		}
		
	aside h2 {
		font:1rem/1.750rem "WSRegular";
	}
	
	aside li span, aside li p:first-child  {
		text-transform:uppercase;
		font: 0.938rem/1.750rem "WSRegular"; /* Switch to this? 0.875rem */
		color:#bcbec0;
	}
	

	/* 6. Footer */
#main > footer {
	position:fixed;
	bottom:0;
	padding-bottom:1.5rem;
	width:85%;
	background-color:#161616; 
}

	#main > footer div {
		position:absolute;
		bottom:1.5rem;
		width:100%;
	}
	
	#main > footer, #main > footer a {
		color:#bcbec0;	
		text-transform:uppercase;
		font-size:0.938rem;
	}
	
	
	#main > footer ul {
		text-align:center;
		width:100%;
		overflow:auto;
	}
	
	#main > footer ul li {
		display:inline;
	}
	
	#main > footer ul a {
		padding-left:1rem;
	}
	
	#main > footer ul a.selected {
		color:#eaeff2;	
		font-family: "WSMedium";
	}

/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/

/* 2. Typography */

@font-face {
  font-family: 'WSRegular';
  src: url('fonts/WorkSans-Regular.woff2') format('woff2'),
       url('fonts/WorkSans-Regular.woff') format('woff'),
       url('fonts/WorkSans-Regular.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
}
@font-face {
  font-family: 'WSMedium';
  src: url('fonts/WorkSans-Medium.woff2') format('woff2'),
       url('fonts/WorkSans-Medium.woff') format('woff'),
       url('fonts/WorkSans-Medium.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
}

/*------------------------------------*\
	FILM ARCHIVE
\*------------------------------------*/
	
	#film {
		margin-bottom:6rem;
	}

	#film em, #film .runtime, #film .year, #film .code {
		color:#bcbec0;	
	}
	
	#film .code {
	 	font-size:0.938rem;
	}
	
	#film .withVideo {	
		background-image:url(http://www.guidotamino.it/extra/play.svg);
		background-position:55px center;
		background-repeat:no-repeat;

	}
	
	#film .details em {
		color:#eaeff2;		
	}
	
#fields {
	font:0.938rem "WSRegular";
	color:#bcbec0;
	text-transform:uppercase;
	position:absolute;
	width:100%;
	bottom:0;
}
	#fields.hidden {
		display:none;
	}
	#fields p 				{ padding-bottom:12px; }
	#fields p:first-child	{ float:left; margin-left:14%; }
	#fields p:last-child 	{ float:right; padding-right:1.250rem; }
		
	#fields p.selected {
		/* background-image:url(css/arrow.png); */
		 background-image:url("http://www.guidotamino.it/extra/arrow.svg");
		background-repeat:no-repeat;
		background-position:0 2px;
		padding-left:16px;
	} 
	
	#film li {
		border-top:1px solid #bcbec0;
		width:100%;
		padding:1.5rem; /* was 1.250 */
		overflow:auto;
		cursor:pointer;
	}
	
		 #film li:last-child {
			border-bottom:1px solid #bcbec0;
		}
		
		#film li.closed figure, #film li.closed .details {
			display:none;
		}
	
	#film header, #film main, #film footer {
		float:left;
	}
	
	#film header 	{ width: 12.5%; height: 2.133rem; }
	#film main 		{ width: 81%; }
	#film footer 	{ width: 6.5%; height: 2.133rem; }
	
	#film main figure {
		width:4.5rem;
		height:3.375rem;
		position:relative;
		float:left;
		margin-right:1.8rem;
	}
	
	#film main figure, #film main .details {
		margin-top:1.250rem;
	}
	
		#film figure img, #film main figure a {
			width:100%;
			position:absolute;
			top:0;
			left:0;
		}
		
		#film main figure a {
			background-image:url(http://www.guidotamino.it/extra/bigPlay.svg);
			background-repeat:no-repeat;
			background-position:center center;
			height:100%;
		}
		
		#film main .runtime {
			font:0.938rem "WSRegular";
			padding-left:0.5rem;
			vertical-align:super;
		}
	
	#film footer {
		text-align:right;
		padding-top:0.2rem;	
	}
	
	#film header {
		padding-top:0.2rem;	
	}


/*------------------------------------*\
	INTRO AND LIGHTBOX 
\*------------------------------------*/

#lightbox, #home, #logo { /* #home  and #logo were here */
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:21;
	cursor:pointer;
}


	
	#logo {
		z-index:22;
		text-align:left;
	}

	#logo h1 {
		position:absolute;
		font:1.938rem "WSMedium";
		line-height:100%;
		padding-left:4rem; 
		top:49%;
	}

#lightbox {
	position:fixed;
    background-color: rgba(0, 0, 0, 0.8);	/* RGBa with 0.8 opacity */
	display:none;
}

	#lightbox #canvas {
		position:fixed;
		width:800px;
		height:600px;
		top:50%;
		margin-top:-300px;
		left:50%;
		margin-left:-400px;
		
	}
	
	#canvas #overlay {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index:22;
		background-repeat:no-repeat;
		display:none;		
	}
	
	#canvas #overlay.load {
		background-image:url("http://www.guidotamino.it/extra/loaderSmall.svg");
		background-position:center;
	}
	
	
	#canvas #overlay.play {
		background-image:url("img/player_cover.png?2");
		background-position:bottom left;	
	}
	
	#canvas #overlay.pause {
		background-image:url("img/player_cover.png?2");
		background-position:top left;		
	}
/*------------------------------------*\
    MISC
\*------------------------------------*/

/* 1. Selection options */

::selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}

/* 2. Scroll bar options */

html ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html ::-webkit-scrollbar-thumb {
    background-color:#EBEBEB;
    border: 1px solid #333;
} 

html ::-webkit-scrollbar, html ::-webkit-scrollbar-track, html ::-webkit-scrollbar-track-piece, html ::-webkit-scrollbar-thumb:hover {
	background-color:#161616;
}


/*------------------------------------*\
    CSS
\*------------------------------------*/

#main > header, #main > footer {
	opacity:1;
	transition: opacity 800ms 200ms cubic-bezier(0.35, 0.75, 0.25, 0.95);
}


#main > aside.hidden, #main > section.hidden {
	opacity:0;
}

#main > aside, #main > section {
	opacity:1;
	transition: opacity 800ms 200ms cubic-bezier(0.35, 0.75, 0.25, 0.95);
}

#main > header.hidden, #main > footer.hidden {
	opacity:0;
}

#main nav li a {
	border-bottom:2px solid #161616;
	padding-bottom:1px;
	transition: opacity 500ms 100ms cubic-bezier(0.35, 0.75, 0.25, 0.95);
}
	
#film ul {
	opacity:1;
	transition: opacity 800ms 200ms cubic-bezier(0.35, 0.75, 0.25, 0.95);
	padding-bottom:9rem;
}
	
#film ul.hidden {
	opacity:0;
}

#film li {
	cursor:pointer;
}

#film li main figure, #film li main p {
	opacity: 1;	
	transition: opacity 800ms 200ms cubic-bezier(0.35, 0.75, 0.25, 0.95);
}

#film li main figure.hidden, #film li main p.hidden {
	opacity:0;
	transition: opacity 800ms 200ms cubic-bezier(0.35, 0.75, 0.25, 0.95);
}


/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}
.sticky {

}
.bypostauthor {

}