@import 'fonts/stylesheet.css';

* { margin: 0px; padding: 0px; }

body { background: #fff; font-family: 'ChevinStd-Medium', arial, sans-serif; color: #333; font-size: 12px; overflow: hidden; }

a { color: #666; text-decoration: none; }

a:hover { color: #333333; }

.border-box {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.tooltip { 
	font-style: italic;
	font-family: 'ChevinStd-ThinItalic', sans-serif;
	background: #fff;
	color: #999;
	text-transform: uppercase;
	padding: 4px 8px 4px 8px;
	position: absolute;
	white-space: nowrap;
	z-index: 9;
}

#container {
	position: absolute;
	top: 18px;
	left: 18px;
	right: 18px;
	bottom: 18px;
	min-width: 320px;
	min-height: 320px;
}

.photo { overflow: hidden; width: 100%; height: 0%; position: absolute; top: 0px; left: 0px; }
.photo-animated {
	-webkit-transition: height 400ms ease-in-out;
	-moz-transition: height 400ms ease-in-out;
	-o-transition: height 400ms ease-in-out;
	-ms-transition: height 400ms ease-in-out;
	transition: height 400ms ease-in-out;
	-webkit-transform: translateZ(0); /* force GPU on some webkit situations */
}

.animated {
	-webkit-transition: all 400ms ease-in-out, color 100ms ease-out;
	-moz-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out, color 100ms ease-out;
	-ms-transition: all 400ms ease-in-out, color 100ms ease-out;
	transition: all 400ms ease-in-out, color 100ms ease-out;
	-webkit-transform: translateZ(0); /* force GPU on some webkit situations */
}

.animated-height {
	-webkit-transition: height 400ms ease-in-out, color 100ms ease-out;
	-moz-transition: height 400ms ease-in-out;
	-o-transition: height 400ms ease-in-out, color 100ms ease-out;
	-ms-transition: height 400ms ease-in-out, color 100ms ease-out;
	transition: height 400ms ease-in-out, color 100ms ease-out;
	-webkit-transform: translateZ(0); /* force GPU on some webkit situations */
}

.intro { position: absolute; top: 0px; bottom: 0px; left: 0px; width: 100%; cursor: pointer; }
.intro-headline { position: absolute; font-family: 'AlternateGothicFSNo1', arial, sans-serif; font-size: 64px; text-transform: uppercase; color: #fff; z-index: 5; line-height: 80%; }

.intro-ipad { background: #fff; text-transform: uppercase; font-size: 21px; position: absolute; font-family: 'AlternateGothicFSNo1', arial, sans-serif; z-index: 9; padding: 4px 8px 4px 8px !important; }

.photography { position: absolute; top: 60px; bottom: 0px; width: 100%; visibility: hidden; }
.series-title { 
	position: absolute;
	left: -8px;
	top: 50%;
	margin-top: -34px; /* half of height to center */
	background: #000; /* will be overwriten by js */
	height: 0px;
	padding: 0px 14px 0px 6px;
	overflow: hidden;
	font-size: 56px;
	color: #fff;
	font-family: 'ChevinStd-ThinItalic', sans-serif;
	font-style: italic;
	z-index: 3; /* on top of pictures that use 1 (inactive) and 2 (active) */
	text-transform: uppercase;
}
.series-subtitle { 
	position: absolute;
	left: -8px;
	top: 50%;
	margin-top: 40px;
	background: #000; /* will be overwriten by js */
	height: 0px;
	padding: 0px 14px 0px 6px;
	overflow: hidden;
	font-size: 30px;
	color: #fff;
	font-family: 'ChevinStd-ThinItalic', sans-serif;
	font-style: italic;
	z-index: 3; /* on top of pictures that use 1 (inactive) and 2 (active) */
	text-transform: uppercase;
}

.photo-name { display: none; position: absolute; left: 0px; text-transform: uppercase; color: #333; padding-left: 8px; border-left: 1px #ccc solid; height: 11px; z-index: 3; font-size: 11px; }

.video { position: absolute; background: #000; }

.container-fullscreen { overflow: visible; width: 100%; height: 100%; position: absolute; top: -60px; left: -18px; }

.video-controller { overflow: hidden; position: absolute; left: 0px; top: 0px; width: 100%; height: 20px; background: #666; background: rgba( 255, 255, 255, .6 ); z-index: 11; }
.video-controller .progress { height: 20px; width: 0%; position: absolute; top: 0px; left: 0px; background: #ccc; background: rgba( 255, 255, 255, .7 ); }
.video-controller .handler { cursor: pointer; width: 30px; height: 20px; position: absolute; top: 0px; left: 0px; background: #fff; }

/* NAVIGATION FOR PHOTOGRAPHY & FILMS */

.mouse-navigation { position: absolute; top: 0px; left: 0px; z-index: 9; }

.arrow { 
	background: #fff url( arrow.png ) no-repeat 13px 6px;
	width: 40px;
	height: 20px;
	cursor: pointer;
	position: absolute;
	z-index: 11; /* above tooltip */
}

.arrow:hover { background: #fff url( arrow-hover.png ) no-repeat 13px 6px; }

.mobile-navigation {
	position: absolute;
	/*float: left;
	clear: both;*/
	/*bottom: 8px;*/
	left: 0px;
	top: 0px;
	/*width: 100%;
	height: 100%;*/
	z-index: 11;

	opacity: 0;
	background: rgba( 255, 255, 255, 0.3 );

	-webkit-transition: opacity 500ms ease-out;
	transition: opacity 500ms ease-out;
}

.mobile-navi-hint {
	background: #fff;
	position: absolute;
	top: 0px;
	left: 176px;
	right: 0px;
	font-family: 'ChevinStd-Light', sans-serif;
	font-size: 16px;
	line-height: 18px;
	color: #999;
	padding-top: 18px;
	height: 42px;
	z-index: 99;
	text-transform: uppercase;
}

.mobile-navigation .loadingTooltip {
	position: absolute;
	font-family: 'ChevinStd-ThinItalic', sans-serif;
	font-style: italic;
	/*font-size: 18px;*/
	background: #fff;
	color: #999;
	text-transform: uppercase;
	padding: 4px 8px 4px 8px;
	position: absolute;
	white-space: nowrap;
	z-index: 12;
}

/*

.arrow-mobile { 
	background: #fff url( ios-arrow.png ) no-repeat;
	background-image: url( ios-arrow.svg );
	width: 68px;
	height: 33px;
	float: left;
	margin-right: 8px;
	z-index: 11;
}

.arrow-mobile:active { background: #fff url( ios-arrow-active.png ) no-repeat; background-image: url( ios-arrow-active.svg ); }

*/

.tooltip-mobile { 
	float: left;
	margin-right: 8px;
	font-style: italic;
	font-size: 21px;
	font-family: 'ChevinStd-ThinItalic', sans-serif;
	background: #fff;
	color: #999;
	text-transform: uppercase;
	padding: 4px 8px 2px 8px;
	white-space: nowrap;
	z-index: 9;

	/*-webkit-transition: -webkit-transform 500ms ease-out;
	transition: transform 500ms ease-out;

	transform: scale(1,1);
	-webkit-transform: scale(1,1);*/
}

.films-close { 
	font-size: 21px;
	font-family: 'ChevinStd-Light', sans-serif;
	color: #999;
	text-transform: uppercase;
	padding: 0px 0px 2px 32px;
	white-space: nowrap;
	z-index: 9;
	position: absolute;
	top: 8px;
	left: 0px;
	background: #fff url( close.png ) no-repeat;
	background-image: url( close.svg );
}

.films-close:active {
	background: #fff url( close-active.svg ) no-repeat;
	color: #666;
}

.films-mobile-navigation { position: absolute; top: 24px; z-index: 100; }
.film-navi-item { position: absolute; color: #999; }
.film-arrow { 
	position: absolute;
	top: 2px;
	left: 0px;
	background: url( ios-arrow.svg ) no-repeat;
	width: 40px;
	height: 20px;
}
.film-arrow-label { position: absolute; top: 0px; left: 20px; font-family: 'ChevinStd-Light', sans-serif; text-transform: uppercase; font-size: 21px; }

.film-navi-item:active { color: #666; }

.film-navi-item:active .film-arrow { background: url( ios-arrow-active.svg ) no-repeat; }

.play-pause { 
	background: #fff url( play-pause.png ) no-repeat 17px 6px;
	width: 40px;
	height: 20px;
	cursor: pointer;
	position: absolute;
	top: -21px;
	left: -41px;
	z-index: 11; /* above tooltip */
}

.social-buttons {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 200px;
}

.social-item { position: relative; height: 30px; color: #e4e4e4; }
.social-item .icon { font-family: 'WebSymbolsRegular'; font-size: 18px; margin-right: 8px; text-transform: none !important; }
.social-item a { color: #e4e4e4; }
.social-item a:hover { color: #ccc; }

.credits { margin-top: 12px; font-family: 'ChevinStd-Light', sans-serif; color: #ccc; text-transform: uppercase; font-size: 12px; }

.credits a {
	color: #ccc;
	text-decoration: underline;
}

.credits a:hover, .credits a:active {
	color: #999;
}

.play-pause:hover { background: #fff url( play-pause-hover.png ) no-repeat 17px 6px; }

.fullscreen { 
	background: #fff url( fullscreen.png ) no-repeat 12px 5px;
	width: 40px;
	height: 20px;
	cursor: pointer;
	position: absolute;
	top: -21px;
	left: 1px;
	z-index: 11; /* above tooltip */
}

.fullscreen:hover { background: #fff url( fullscreen-hover.png ) no-repeat 12px 5px; }

.flipped {
	-moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

/* MENU */

.navigation { position: absolute; top: 0px; left: 0px; background: #fff; width: 100%; height: 60px; overflow: hidden; z-index: 18; text-transform: uppercase; }
.menu-border { border-left: 1px solid #ccc; padding-left: 10px; height: 18px; }
.menu { font-family: 'ChevinStd-Light', sans-serif; position: absolute; left: 0px; font-size: 18px; color: #333; }
.submenu { font-family: 'ChevinStd-Light', sans-serif; position: absolute; left: 176px; font-size: 18px; width: 300px; height: 0px; overflow: hidden; }
.submenu .item { position: absolute; left: 0px; top: 0px; color: #ccc; cursor: pointer; }
.submenu .item:hover { color: #999; }
.selected { color: #666 !important; cursor: default !important; }

/* CONTENT PAGES */

div.page { position: absolute; top: 90px; left: 0px; bottom: 0px; right: 0px; overflow-y: auto; }
div.page::-webkit-scrollbar-thumb:vertical {
	background-color: #fff;
	border: 1px solid #ccc;
	-webkit-border-radius: 4px;
}
div.page::-webkit-scrollbar { 
	width:20px;
	height:auto;
	background-color: #ccc;
	-webkit-border-radius: 4px;
}

div.page h1 {
	font-family: 'ChevinStd-ThinItalic', sans-serif;
	font-size: 18px;
	color: #333;
	font-style: italic;
	font-weight: 300;
	margin-bottom: 12px;
	text-transform: uppercase;
}

div.page h2 {
	font-family: 'ChevinStd-ThinItalic', sans-serif;
	font-size: 12px;
	color: #333;
	font-style: italic;
	font-weight: 400;
	margin-bottom: 24px;
	margin-top: -12px;
}

div.page a {
	margin-left: -24px;
	background: url( link_arrow.png ) no-repeat 0px 4px;
	padding-left: 24px;
}

.page-animated {
	-webkit-transition: opacity 500ms ease-out;
	-moz-transition: opacity 500ms ease-out;
	-o-transition: opacity 500ms ease-out;
	-ms-transition: opacity 500ms ease-out;
	transition: opacity 500ms ease-out;
	-webkit-transform: translateZ(0); /* force GPU on some webkit situations */
}

div.bioLeft { position: absolute; left: 0px; top: 0px; width: 165px; font-size: 9px; color: #999; text-transform: uppercase; }
.bioLeft img { margin-bottom: 4px; }

div.column { position: absolute; left: 188px; top: 0px; width: 320px; }

.column p { margin-bottom: 8px; }

div.bio section { float: left; margin-bottom: 24px; clear: both; width: 320px; }

div.bio article { float: left; margin-bottom: 8px; clear: both; width: 320px; }
div.bio article time { float: left; margin-left: -48px; font-size: 11px; color: #999; }
div.bio article blockquote { float: left; clear: right; }

.wide { width: 600px !important; }

.contact a { font-size: 11px; }
.contact article { margin-bottom: 24px; }

.mobile h1 { margin-bottom: 24px; }
.mobile article { margin-bottom: 18px; }

.loader {
	width: 24px;
	height: 24px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -12px;
	margin-top: -12px;
	z-index: 8;
	background-image: url( loader.gif );
}

/* IPAD FALLBACKS */

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
  .menu-border { height: 24px; }
}