/* HTML5 display-role reset for older browsers */
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: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

@font-face {font-weight: normal; font-style: normal;
    font-family: 'Lucida';
    src: url('LucidaBright.eot');
    src: url('LucidaBright.eot?#iefix') format('embedded-opentype'),
         url('LucidaBright.woff') format('woff'),
         url('LucidaBright.ttf') format('truetype'),
         url('LucidaBright.svg#LucidaBright') format('svg');
}
@font-face {font-weight: normal; font-style: italic;
    font-family: 'Lucida';
    src: url('LucidaBrightItalic.eot');
    src: url('LucidaBrightItalic.eot?#iefix') format('embedded-opentype'),
         url('LucidaBrightItalic.woff') format('woff'),
         url('LucidaBrightItalic.ttf') format('truetype'),
         url('LucidaBrightItalic.svg#LucidaBrightItalic') format('svg');
}
@font-face {font-weight: bold; font-style: normal;
    font-family: 'Lucida';
    src: url('LucidaBrightDemibold.eot');
    src: url('LucidaBrightDemibold.eot?#iefix') format('embedded-opentype'),
         url('LucidaBrightDemibold.woff') format('woff'),
         url('LucidaBrightDemibold.ttf') format('truetype'),
         url('LucidaBrightDemibold.svg#LucidaBrightDemibold') format('svg');
}
@font-face {font-weight: bold; font-style: italic;
    font-family: 'Lucida';
    src: url('LucidaBrightDemiboldItalic.eot');
    src: url('LucidaBrightDemiboldItalic.eot?#iefix') format('embedded-opentype'),
         url('LucidaBrightDemiboldItalic.woff') format('woff'),
         url('LucidaBrightDemiboldItalic.ttf') format('truetype'),
         url('LucidaBrightDemiboldItalic.svg#LucidaBrightDemiboldItalic') format('svg');
}
@font-face {font-weight: 200; font-style: normal;
    font-family: 'Eagle';
    src: url('Eagle-Light.eot');
    src: url('Eagle-Light.eot?#iefix') format('embedded-opentype'),
         url('Eagle-Light.woff') format('woff'),
         url('Eagle-Light.ttf') format('truetype'),
         url('Eagle-Light.svg#Eagle-Light') format('svg');
}
@font-face {font-weight: 400; font-style: normal;
    font-family: 'Eagle';
    src: url('Eagle-Book.eot');
    src: url('Eagle-Book.eot?#iefix') format('embedded-opentype'),
         url('Eagle-Book.woff') format('woff'),
         url('Eagle-Book.ttf') format('truetype'),
         url('Eagle-Book.svg#Eagle-Book') format('svg');
}
@font-face {font-weight: 600; font-style: normal;
    font-family: 'Eagle';
    src: url('Eagle-Bold.eot');
    src: url('Eagle-Bold.eot?#iefix') format('embedded-opentype'),
         url('Eagle-Bold.woff') format('woff'),
         url('Eagle-Bold.ttf') format('truetype'),
         url('Eagle-Bold.svg#Eagle-Bold') format('svg');
}
@font-face {
    font-family: 'socicon';
    src: url('socicon-webfont.eot');
    src: url('socicon-webfont.eot?#iefix') format('embedded-opentype'),
         url('socicon-webfont.woff') format('woff'),
         url('socicon-webfont.ttf') format('truetype'),
         url('socicon-webfont.svg#sociconregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {-webkit-font-smoothing: subpixel-antialiased; font-smoothing: always;}
html, body {margin: 0px; padding: 0px; height: 100%;}
body {font-family: 'Lucida', Arial; font-size: 16px; line-height: 1.5em; color: #fff; background: #222; text-shadow: 0px 1px 3px rgba(0,0,0,0.5);}

html.noscroll {overflow: hidden;}

h1, h2, h3 {font-family: 'Eagle'; font-weight: 600; text-transform: uppercase;}
h2 {padding-top: 0px; margin-top: 0px; font-size: 44px; line-height: 1.5em;}
h3 {padding-top: 0px; margin-top: 0px; font-size: 36px; line-height: 1.5em;}
h4 {padding-top: 0px; margin-top: 0px; font-size: 30px; line-height: 1.5em; font-weight: normal;}
a {color: #ffcc00; text-decoration: none;}
a:hover {color: #ffcc00; text-decoration: underline;}

blockquote {display: block; position: relative; padding: 1em 3em; line-height: 1.3em; font-size: 2em; text-transform: uppercase; font-style: italic;}
blockquote:before {position: absolute; margin-left: -0.5em; content: '\201C'; font-size: 3em; font-family: Times;}
blockquote footer {padding-top: 1em; font-size: 0.4em; text-align: right; line-height: 1.3em;}

.icon {display: inline-block; width: 1.5em; text-align: center; padding-bottom: 15px; font-family: 'socicon'; color: #fff; font-size: 24px; text-decoration: none !important;}

.twitter_feed {float: right; padding-left: 50px;}

#header .inner,
#footer .inner {max-width: 1000px; margin: 0 auto; position: relative;}

/* header */
#header {position: fixed; z-index: 100; top: 0px; left: 0px; right: 0px; width: 100%; height: 51px; padding: 15px 0; background: rgba(0,0,0,0.7);}
#header a {color: #fff; text-decoration: none;}
#header a:hover {color: #fff; text-decoration: underline;}
#header a.sel {color: #ffcc00; text-decoration: underline;}
#header h1,
#header .nav,
#header .nav_right {display: inline-block; vertical-align: top; font-family: 'Eagle'; text-transform: uppercase; font-weight: 200; line-height: 51px;}
#header h1 {float: left; margin: 0px; padding: 0px; height: 51px; overflow: hidden;}
#header h1 a {display: block; width: 161px; height: 51px; overflow: hidden; text-indent: -999em; margin-right: 10px; line-height: 0px; font-weight: 400; background: #000 url(../imgs/logo.png) no-repeat top left; background-size: 100% 100%;}
#header .nav {font-size: 15px;}
#header .nav ul {list-style: none; margin: 0px; padding: 0px;}
#header .nav ul li {display: inline-block;}
#header .nav a {display: inline-block; padding: 0 1em;}
#header .nav_right {float: right; font-size: 11px;}

#header .nav li:hover .subnav {display: block;}
#header .subnav {display: none; position: absolute; top: 100%; left: 0; width: 960px; font-size: 0px; line-height: 0px; text-align: center;}
#header .subnav a {display: inline-block; height: 120px; width: 240px; overflow: hidden; margin: 0 auto; text-indent: -999em; background-position: center center; background-repeat: no-repeat; background-color: #000;}
#header .subnav a:hover {background-color: #222;}
#header .subnav a.mttp {background-image: url(../imgs/nav-mttp.png);}
#header .subnav a.mttt {background-image: url(../imgs/nav-mttt.png);}
#header .subnav a.kilimanjaro {background-image: url(../imgs/nav-kilimanjaro.png);}
#header .subnav a.everest {background-image: url(../imgs/nav-everest.png);}

html.mobile #header .subnav {position: relative; left: auto; top: auto; width: auto; text-align: left; padding-bottom: 20px;}
html.mobile #header .subnav a {display: block; overflow: visible; padding: 4px 0 4px 30px; text-indent: 0px; font-size: 14px; line-height: 1.3em; height: auto; width: auto; background-image: none;}
html.mobile #header .subnav a:hover {background: transparent;}

body.current_productions #header .current_productions,
body.original_productions #header .original_productions,
body.fundraising_expeditions #header .fundraising_expeditions,
body.about #header .about {color: #ffcc00;}

/* footer */
#footer {position: relative; left: 0; right: 0; width: 100%; background: #000;}
#footer p {padding: 0px; margin: 0px;}
#footer .inner {padding: 20px 0; text-align: center; font-size: 0.75em; color: #666;}
#footer a.logo {display: inline-block; margin: 0 20px; vertical-align: top;}

/* home */
.home #header {background: #000;}
.content {position: relative; width: 100%; left: 0; right: 0; text-align: left; padding-bottom: 50px;}
.content.home {padding-bottom: 0px;}

/* content */
.content {padding-top: 81px;}
.content:after {content: ''; display: block; clear: both; height: 0px;}
.content .background_image,
.content .background_image.landscape {background-repeat: no-repeat; background-size: 100% auto; background-position: 50% 50%;}
.content .background_image.portrait {background-repeat: no-repeat; background-size: auto 100%; background-position: 50% 50%;}
.content .inner,
.content .intro {max-width: 1000px; margin: 0 auto;}
.content .credits {list-style: none; margin: 0px; padding: 3em 0 2em 0;}
.content .credits li {display: inline-block; width: 22.5%; padding-right: 2%; vertical-align: top;}
.content .credits.three li {width: 30%;}
.content .credits li:last-child {padding-right: 0px;}
.content .credits h3, .content.current .credits h4 {margin: 0px;}
.content .credits h3 {padding-bottom: 0.3em; font-weight: 200; font-size: 1.1em; color: #ffcc00; line-height: 1.1em;}
.content .credits h4 {margin: 0px; padding-bottom: 0.4em; font-family: 'Eagle'; text-transform: uppercase; font-size: 1.1em; line-height: 1.1em;}

.content img.right {float: right; margin: 0px 0px 1em 2em;}
.content img.left {float: left; margin: 0px 2em 1em 0px;}
.content img.right,
.content img.left {
	-webkit-box-shadow: 0px 5px 15px rgba(0,0,0,0.7);
	-moz-box-shadow: 0px 5px 15px rgba(0,0,0,0.7);
	-o-box-shadow: 0px 5px 15px rgba(0,0,0,0.7);
	box-shadow: 0px 5px 15px rgba(0,0,0,0.7);
}

/* featured */
.featured {z-index: 20; position: absolute; margin: 0 auto; max-width: 1400px; left: 20px; right: 20px; bottom: 20px; box-sizing: border-box;
	-webkit-box-shadow: 0px 5px 15px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 5px 15px rgba(0,0,0,0.5);
	-o-box-shadow: 0px 5px 15px rgba(0,0,0,0.5);
	box-shadow: 0px 5px 15px rgba(0,0,0,0.5);
}
.featured ul {margin: 0px; padding: 0px; list-style: none; text-align: center; font-size: 0px; line-height: 0px;}
.featured ul li {position: relative; width: 25%; height: 250px; display: inline-block; background-repeat: no-repeat; background-size: cover; box-sizing: border-box; overflow: hidden;}
.featured ul li:before {content: ''; display: block; position: absolute; z-index: 1; top: 0px; left: 0px; height: 100%; width: 100%; box-sizing: border-box; border: 5px solid transparent;
	-webkit-transition: border 100ms linear;
	-moz-transition: border 100ms linear;
	-o-transition: border 100ms linear;
	-ms-transition: border 100ms linear;
	transition: border 100ms linear;
}
.featured ul li img {max-height: 100%;
	filter: url(filters.svg#grayscale);
	filter: gray;
	-webkit-filter: grayscale(1);
}
.featured ul li:hover img {
	filter: none;
	-webkit-filter: none;
}
.featured ul li a {position: absolute; z-index: 2; display: block; top: 0px; left: 0px; right: 0px; bottom: 0px;}
.featured ul li h2 {display: block; position: absolute; z-index: 1; left: 0px; right: 0px; bottom: 0px; padding: 15px 20px; margin: 0px; font-size: 20px; line-height: 24px; background: rgba(0,0,0,0.5);}
.featured ul li:hover:before {border-color: #ffcc00;}
.featured ul li:hover h2 {color: #ffcc00;}

/* slideshow */
#slideshow {position: relative;}
#slideshow ul {position: absolute; display: block; height: 100%; width: 100%; list-style: none; margin: 0px; padding: 0px;}
#slideshow ul li {display: block; height: 100%; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover;}
#slideshow ul li a {display: block; position: relative; text-align: center; top: 40%; font-weight: bold; font-size: 160px; line-height: 0.4em; color: #fff; text-transform: uppercase; font-family: 'Eagle'; text-decoration: none; transform: translateY(-50%);}
#slideshow ul li a small {font-size: 0.25em; line-height: 0.7em;}
#slideshow ul li a:hover {color: #ffcc00;}

.intro {position: relative;}
.play_button {display: block; position: absolute; top: 50%; right: 50px; height: 103px; width: 103px; margin: -50px 50px 0 0; background: url(../imgs/play-button.png) no-repeat center center; cursor: pointer;}

#preview {display: none; position: fixed; z-index: 200; top: 0px; right: 0px; bottom: 0px; left: 0px; background: rgba(0,0,0,0.7);}
#preview .player_close {position: absolute; top: 0px; right: 0px; height: 30px; padding: 0px 15px; width: auto; text-align: center; line-height: 30px; text-shadow: none; font-family: 'Arial'; font-size: 14px; color: #000; font-weight: bold; background: #fff; cursor: pointer;}
#preview .player_close:hover {background: #ffcc00}
#preview .inner {position: absolute; top: 50%; left: 50%; margin: -240px 0 0 -400px; background: #000;
	-webkit-box-shadow: 0px 5px 15px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 5px 15px rgba(0,0,0,0.3);
	-o-box-shadow: 0px 5px 15px rgba(0,0,0,0.3);
	box-shadow: 0px 5px 15px rgba(0,0,0,0.3);
}


/* about */
.content.about .background_image {background-size: 100% auto !important; background-position: 0px 0px !important; background-image: url(../imgs/about.jpg);}
.content.about h2 {padding: 2em 0; font-size: 2em; margin: 0px; font-weight: normal; line-height: 1.3em; font-family: 'Lucida'; text-weight: normal; text-transform: none;}
.content.about h3 {font-size: 1.8em; margin: 0px; line-height: 1.3em; font-weight: normal;}
.content.about h4 {font-size: 1.3em; margin: 0px; line-height: 1.3em; font-family: 'Lucida'; text-weight: normal; text-transform: none;}
.content.about .bio_image {float: left; padding: 0 50px 50px 0;}

/* current productions */
.content.current .background_image {background-image: url(../imgs/sherpa.jpg);}
.content.current h1 {font-size: 10em; line-height: 1em; margin: 0px;}
.content.current h2 {font-size: 2em; line-height: 1.3em; margin: 0px;}

/* march to the top */
.content.mttt .background_image {background-image: url(../imgs/mttt.jpg);}
.content.mttt h1 {font-size: 10em; line-height: 0.6em; margin: 0px;}
.content.mttt h1 small {display: inline-block; line-height: 1em; font-size: 0.5em; margin: 0.3em 0 0 0; padding: 0px;}
.content.mttt h1 big {font-size: 1.44em; margin-left: -0.3em;}

/* march to the pole */
.content.mttp .background_image {background-image: url(../imgs/mttp.jpg);}
.content.mttp h1 {font-size: 10em; line-height: 0.5em; margin: 0px;}
.content.mttp h1 small {display: inline-block; line-height: 1em; font-size: 0.58em; margin: 0; padding: 0px;}

/* march to the kilimanjaro */
.content.kilimanjaro .background_image {background-image: url(../imgs/kilimanjaro.jpg);}
.content.kilimanjaro h1 {font-size: 6em; line-height: 0.5em; margin: 0px;}
.content.kilimanjaro h1 small {display: inline-block; line-height: 1em; font-size: 0.415em; margin: 0.3em 0 0 0; padding: 0px;}

/* march to the everest */
.content.everest .background_image {background-image: url(../imgs/everest.jpg);}
.content.everest h1 {font-size: 3.7em; line-height: 0.5em; margin: 0px;}
.content.everest h1 big {display: inline-block; line-height: 1em; font-size: 2.32em; margin: 0; padding: 0px;}

/* fundraising */
.fundraising .background_image {background-size: 100% auto !important; background-position: 0px 0px !important; background-image: url(../imgs/fundraising.jpg);}
.fundraising h1 {margin: 0px; padding: 5% 0; font-size: 5em; line-height: 1em;}
.fundraising .item {display: inline-block; width: 46%; vertical-align: top; margin-bottom: 40px;}
.fundraising .item.odd {margin-right: 5%;}
.fundraising .item h3 {font-size: 1.6em; line-height: 1.1em; margin: 0.5em 0 0.2em 0;}
.fundraising .item img {box-shadow: 0px 5px 15px rgba(0,0,0,0.3); width: 100%;}

.slideshow {clear: both; position: relative; padding-top: 30px;}
.slideshow .ss_prev,
.slideshow .ss_next {position: absolute; z-index: 40; top: 0px; width: 50%; height: 100%; cursor: pointer; background-repeat: no-repeat;
	opacity: 0.3;
	-webkit-transition: opacity 200ms;
	-moz-transition: opacity 200ms;
	-o-transition: opacity 200ms;
	-ms-transition: opacity 200ms;
	transition: opacity 200ms;
}
.slideshow .ss_prev {left: 0px; background-image: url(/imgs/ss-prev.png); background-position: 5% 50%;}
.slideshow .ss_next {right: 0px; background-image: url(/imgs/ss-next.png); background-position: 95% 50%;}
.slideshow .ss_prev:hover, .slideshow .ss_next:hover {opacity: 1;}
.slideshow,
.slideshow ul.slides,
.slideshow ul.slides li {height: 800px; width: 1200px; margin: 0 auto; line-height: 0px; font-size: 0px; display: table;}
.slideshow ul.slides li div {display: table-cell; width: 1200px; height: 800px; vertical-align: middle; text-align: center;}
.slideshow ul.slides {list-style: none; margin: 0px; padding: 0px;}
.slideshow ul.slides li {text-align: center;}
.slideshow ul.slides li img {max-height: 800px; max-width: 1200px; vertical-align: middle;
	-webkit-box-shadow: 0px 5px 15px rgba(0,0,0,0.7);
	-moz-box-shadow: 0px 5px 15px rgba(0,0,0,0.7);
	-o-box-shadow: 0px 5px 15px rgba(0,0,0,0.7);
	box-shadow: 0px 5px 15px rgba(0,0,0,0.7);
}
.count {padding-top: 10px; text-align: center; font-size: 0.75em; color: #999; font-family: 'Arial'; font-weight: bold; text-transform: uppercase;}

/* mobile markup */
.mobile_menu {display: none; position: fixed; z-index: 101; top: 15px; left: 10px; height: 30px; width: 30px; background: url(../imgs/mobile-menu-icon.png) no-repeat center center; cursor: pointer;}
.mobile_menu:hover {background-color: #000;}
html.mobile .mobile_menu {display: block;}
html.mobile .content {padding-top: 61px;}
html.mobile .content .inner {max-width: 90%;}
html.mobile .mobile_nav {display: block;}
html.mobile #header {text-align: center; padding: 5px 0px;}
html.mobile #header h1 {float: none; margin: 0 auto;}
html.mobile #header .nav {display: block; position: fixed; top: 0px; left: -80%; bottom: 0px; width: 80%; background: #000; text-align: left; padding: 88px 20px 20px 0px; box-sizing: border-box; line-height: 2em;}
html.mobile #header .nav_right {position: absolute; top: 10px; right: 10px;}
html.mobile #header .nav .subnav {display: block;}

html.mobile.nav_open,
html.mobile.nav_open body {overflow: hidden;}
html.mobile.nav_open #header .nav {left: 0px;}
html.mobile.nav_open #header .nav li {display: block;}
html.mobile.nav_open #header .nav a {display: block;}
html.mobile #header .nav_right {position: relative; text-align: left; top: auto; float: none; right: auto; text-transform: uppercase; font-size: 15px; line-height: 2em;}
html.mobile.nav_open #header,
html.mobile.nav_open #footer,
html.mobile.nav_open .content {left: 80%; right: -80%;}

html.mobile .intro {text-align: center;}
html.mobile .about .intro {text-align: left;}
html.mobile .content.mttt h1 small {text-align: left;}
html.mobile .intro .play_button {position: relative; margin: 30px 0 0 -50px; top: auto; left: 50%;}

html.mobile #preview .inner {width: 100%; height: auto; margin-left: 0px !important; left: 0px;}

#header,
#footer,
.content {
	-webkit-transition: left 200ms linear, right 200ms linear;
	-moz-transition: left 200ms linear, right 200ms linear;
	-o-transition: left 200ms linear, right 200ms linear;
	-ms-transition: left 200ms linear, right 200ms linear;
	transition: left 200ms linear, right 200ms linear;
}
html.mobile #header .nav {
	-webkit-transition: left 200ms linear;
	-moz-transition: left 200ms linear;
	-o-transition: left 200ms linear;
	-ms-transition: left 200ms linear;
	transition: left 200ms linear;
}


@media screen and (max-width: 1600px) {
	.featured {left: 0px; right: 0px;}
}
@media screen and (max-width: 900px) {
	.featured {position: relative; bottom: auto;}
	.featured ul li {width: 50%;}
}
@media screen and (max-width: 768px) {
	blockquote {padding: 1em 0px; font-size: 1.7em; margin: 0px 0.5em;}
	.featured ul li {width: 50%;}
	.content.current h1 {font-size: 6em;}
	.content.current h2 {font-size: 1.3em;}
	.content.mttp h1,
	.content.mttt h1,
	.content.kilimanjaro h1 {font-size: 5em;}
	.content.everest h1 {font-size: 3em;}
	.content .credits li,
	.content .credits.three li {width: 49%; padding-bottom: 20px;}
	.featured {position: relative; bottom: auto;}
	.twitter_feed {float: none; padding-left: 0px;}
	.twitter_feed iframe {width: 100% !important;}
	#slideshow ul li a {font-size: 800%;}
}
@media screen and (max-width: 600px) {
	body {font-size: 14px;}
	.intro .play_button {height: 50px; width: 50px; background-size: 100% 100%; margin-left: -25px !important;}
	.content.about h2 {font-size: 1.6em;}
	.content.about .bio_image {float: none; width: 100%; padding: 0px 0px 5px 0px;}
	.content.current h1 {font-size: 4em;}
	.content.current h2 {font-size: 1em;}
	.content.mttp h1,
	.content.mttt h1,
	.content.kilimanjaro h1 {font-size: 4em;}
	.content.everest h1 {font-size: 2em;}
	.fundraising h1 {font-size: 4em;}
	.content img.right, .content img.left {max-width: 100%; margin: 0 auto; float: none; margin: 0px 0 1em 0px;}
	#footer a.logo {height: 40px; margin: 0 10px 10px 10px;}
	#footer a.logo img {height: 40px;}
	#slideshow ul li a {font-size: 600%;}
}
@media screen and (max-width: 480px) {
	.content.kilimanjaro h1 {font-size: 2.5em;}
	.content.everest h1 {font-size: 1.7em;}
	.fundraising h1 {font-size: 2.5em;}
	.content .credits li,
	.content .credits.three li {width: 100%;}
	.featured ul li {width: 100%;}
	.fundraising .item {display: block; width: 100%;}
	.fundraising .item:odd {margin-right: 0px;}
	#slideshow ul li a {font-size: 400%;}
}