/* 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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;background:transparent;}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {display:block;}
/* remember to define focus styles! */
:focus {outline:0;}
body {line-height:1;}
ol {list-style-position:inside;}
ul {list-style:none;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse:collapse;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
figcaption {font-size:.78em;line-height:1.3em;}
	
body {
	font:normal 12px/14px "helvetica neue", "helvetica", arial, sans-serif;
	color:#fff;
	background:#000;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
}
	
h1 {
	font:normal 18px/24px helvetica, arial, sans-serif;
	text-align:center;
	}

img {width:100%;}

.drag h1 {font:normal 12px/14px helvetica, arial, sans-serif;}
.drag:active {opacity:1;}
.drag:hover {cursor:move;opacity:1;}
.drag {
	opacity:.75;
	padding:5px;
	float:left;
	touch-action:none;
	user-select: none;
	font:normal 12px/14px courier new, courier, monospace;
	color:#fff;
	text-align:center;
	/* text-transform:uppercase; */
}
.drag:nth-child(odd) {margin:30px 0 -10px 0;}
.drag:nth-child(even) {margin:0 0 0 -30px;}


.fifty {width:50px;}
.one {width:100px;}
.two {width:200px;}
.three {width:300px;}
.four {width:400px;}
.five {width:500px;}
.six {width:600px;}
.seven {width:700px;}
.eight {width:800px;}
.nine {width:900px;}

input {
	padding:10px;
	color:#fff;
	background:#f00;
	border:none;
	font-weight:bold;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
}
input:hover {
	background:#ff0;
	color:#f00;
	cursor:pointer;
}

#solar {position:fixed;top:0;left:0;width:380px;height:200px;z-index:-50;}
.mercury #solar {background:url(solar.gif) 0 0px no-repeat;}
.venus #solar {background:url(solar.gif) 0 -200px no-repeat;}
.earth #solar {background:url(solar.gif) 0 -400px no-repeat;}
.mars #solar {background:url(solar.gif) 0 -600px no-repeat;}
.jupiter #solar {background:url(solar.gif) 0 -800px no-repeat;}
.saturn #solar {background:url(solar.gif) 0 -1000px no-repeat;}
.uranus #solar {background:url(solar.gif) 0 -1200px no-repeat;}
.neptune #solar {background:url(solar.gif) 0 -1400px no-repeat;}
.pluto #solar {background:url(solar.gif) 0 -1600px no-repeat;}

.centered {margin:0 auto;}
.center {text-align:center;}
.center img {float:none;}
.right {text-align:right;}
.left {text-align:left;}
.lefted {float:left;}
.righted {float:right;}
.line-through {text-decoration:line-through;}
.indent {margin-left:40px;}

.blue {color:#06f;}
.red {color:#f00;}
.orange {color:#fc0;}
.white {color:#fff;}
.green {color:#0c0;}
.yellow {color:#ff0;}
.violet {color:#c0f;}
.gray {color:#999;}

.full {width:100%;}
.nopad {padding:0;}
.nomarg {margin:0;}
.nopadmarg {padding:0;margin:0;}

p, ul, ol {margin:8px 0;}

blockquote {
	color:#ff0;
	padding:10px;
}

.border {
	border:1px solid #666;
	padding:2px;
}
div.border > p {padding:0;}

audio, source {
	width:100%;
	margin:0 0 40px 0;
	padding:10px 0;
	border-top:5px solid #ccc;
	border-bottom:1px solid #ccc;
	}

span.load {
	display:inline-block;
	width:20px;
	height:20px;
	background:url('load.gif') no-repeat;
	margin:1em;
}

/* VISION */
span.credit {
	border-radius:2px;
	font-size:8px;
	color:#fff;
	padding:2px 4px;
	margin:0px 1px;
}
.director {background:#900;}
.cinematographer {background:#960;}
.editor {background:#009;}
.vfx {background:#606;}
.cgi {background:#060;}

/* TEXT */
h1 {font-family: Arial, Helvetica, sans-serif;padding:0 0 1em 0;color:#fff;}

h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;
	font-size:1.25em;
	line-height:1em;
	padding:0 0 0.5em 0;
	color:#999;
}


/* TABLE */

.main-table {
    border-collapse: collapse;
    font-size: 0.9em;
    width: 90%;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: .05em;   
    color:#fff;
}
.main-table a {
	text-decoration: none;
	border:none;
	color:#0cf;
}

.main-table thead tr {
    border: 1px #666 solid;   
}
.main-table thead th {
    text-align: left;
    padding: 5px;   
}
.main-table tbody tr {
    border-top: 1px #666 solid;
}
.main-table tbody td {
    padding:2px 5px;
}
.role {
    border-right: 1px #666 solid;
}
.fixspace {
    width: 3em;
}
tr.table-year td {padding:20px 5px;}

/* LINKS */

a:hover h1 {color:#0f0;}
a:hover h2 {color:#f0f;}

.noflo {float:none;}
.clear {clear:both;}


a {
	color:#fff;
	text-decoration:none;
	border-bottom:1px solid #06f;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
}
a:hover {
	background:#06f;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
	}

a.nobor {border:none;}

a img {
	border:none;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
}
a:hover img {
	border:none;
	text-decoration:none;
	filter:invert(1);
	-webkit-filter:invert(1);
	-moz-filter:invert(1);
	-o-filter:invert(1);
	-ms-filter:invert(1);
}

.imgswap img:last-child{display:none}
.imgswap:hover img:first-child{display:none;}
.imgswap:hover img:last-child{display:inline-block;filter:none;}

/* HEADER + NAV */

header {
	width:50px;
	height:50px;
	padding:10px;
	text-align:center;
	position:fixed;
	z-index:99;
}
header h1 {
	width:50px;
	height:50px;
	padding:0;
}
#hofa {
	width:50px;
	height:50px;
	background:url(hofa.gif) 0 0 no-repeat;
	font-size:4px;
}
#hofa p {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg); /* Safari 3-8 */
	-moz-transition: rotate(-45deg);
	-o-transition: rotate(-45deg);
	-ms-transform: rotate(-45deg); /* IE 9 */
	margin:0;
	padding:12px 12px 0 0;
}
a:hover #hofa {background:url(hofa.gif) no-repeat -50px 0;}

/* YOUTUBE PLAYER */
.youtube-player {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 0px;
}

.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}

.youtube-player img {
object-fit: cover;
display: block;
left: 0;
bottom: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: 0.4s all;
-moz-transition: 0.4s all;
transition: 0.4s all;
}

.youtube-player img:hover {
-webkit-filter: brightness(75%);
}

.youtube-player .play {
height: 24px;
width: 34px;
left: 50%;
top: 50%;
margin-left: -17px;
margin-top: -12px;
position: absolute;
background: url('yt.png') no-repeat;
cursor: pointer;
}

/* READ MORE LESS */
.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'show less';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
}


/* BODY + LAYOUT */
section {clear:both;text-align:center;padding:50px 0;}
section:first-of-type {padding-top:100px;}

#map {clear:both;width:100%;height:600px;}

figure img {
	float:none;
	margin:0 0 .5em 0;
}
figure {display:inline-block;margin:1em;}

.vid {
	clear:both;
	position:relative;
	width:100%;
	margin:0;
	height:0;
	padding:0 0 56.25% 0; /* 16:9 */
}
.vid iframe {
	height:100%;
	position:absolute;
	width:100%;
	top:0;
	left:0;
}

#friends {
	clear:both;
	height:400px;
	background:url(usa.gif) center 70px no-repeat;
	text-align:left;
}
ul.big-ups {margin:2em 0;}
#friends ul li {float:left;margin:0 1em .5em 0;}

/* PANORAMA */
#panorama {
	position:relative;
	width:100%;
	height:700px;
	}
.pano-one {
	clear:both;
	background:#ff0;
	position:absolute;
	top:0;
	width:100%;
	height:700px;
}
.pano-two {
	clear:both;
	background:#ff0;
	position:absolute;
	top:700px;
	width:100%;
	height:700px;
}
.pano-three {
	clear:both;
	width:100%;
	background:#f00;
	position:absolute;
	top:1400px;
	height:700px;
}
.pano-four {
	clear:both;
	width:100%;
	background:#f00;
	position:absolute;
	top:2100px;
	height:700px;
}	
.pano-five {
	clear:both;
	width:100%;
	background:#f00;
	position:absolute;
	top:2800px;
	height:700px;
}	
	
	
#pano #panorama {
	width:100%;
	height:700px;
	}
#panomax #panorama {
	width:100%;
	height:1080px;
	}
	
/* ROTATE */
.rotate {
	-webkit-animation:spin 60s infinite linear;
	-moz-animation:spin 60s infinite linear;
	animation:spin 60s infinite linear;
	}
@-moz-keyframes spin { 100% { -moz-transform: rotate3d(1, -1, 1, 360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate3d(1, -1, 1, 360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate3d(1, -1, 1, 360deg); transform:rotate3d(1, -1, 1, 360deg); } }


/* FOOTER */
footer {
	clear:both;
	width:980px;
	margin:0 auto;
	height:100px;
	padding:5em 0;
	font-size:.78em;
	line-height:1.3em;
}
footer p, footer ul {padding:0;margin:0;}


/*
body.earth {
	overflow: hidden;
	width: 100vw;
	height: 100vh;
}
*/

body.earth .backstretch, .backstretch {
	opacity:0.2;
    filter:alpha(opacity=20);
	z-index:-100;
}

.design {padding:0;margin:0;}
.half {width:50%;}
.thirds {width:33.3333333333%;}

/*PHOTO SLIDESHOW*/
ul.bjqs img {width:100%;margin:0;}
#photos,
#banner-slide {
	width:100%;
	margin-bottom:10em;
	}
ol.bjqs-markers li a {
	padding:.6em 1em;
	background:#151515;
	font-size:.78em;
	color:#666;
	text-decoration:none;
	border-bottom:1px solid #151515;
	}
ol.bjqs-markers li a:hover {color:#fff;background:#06f;border-bottom:1px solid #fff;}
ol.bjqs-markers li.active-marker a {color:#06f;background:#fff;border-bottom:1px solid #f00;}
p.bjqs-caption {font-size:0.78em;color:#fff;background:rgba(0,0,0,0.5);}

ul.bjqs {position:relative; list-style:none;padding:0;margin:0;overflow:hidden;display:none;}
li.bjqs-slide {position:absolute; display:none;}

ol.bjqs-markers {list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered {text-align:left;}
ol.bjqs-markers li {display:inline;}
ol.bjqs-markers li a {display:inline-block;}
p.bjqs-caption {display:block;width:100%;margin:0;padding:.5em 1em;position:absolute;bottom:0;}

@media only screen and (max-width:980px) {
	blockquote {font-size:1.15em;}
	section, footer {width:80%;}
	ul.menu {padding:0;}
	ul.menu li {margin:0;padding:0;}
	h1, h2, h3, h4, h5, h6 {padding:2em;}
	p, ul, blockquote {padding:0 2em;}
	blockquote > p {padding:0;}
	.col {width:40%;}
	.half, .thirds {width:100%;}
	footer > .lefted {padding-left:2em;}
	footer >.righted {padding-right:2em;}
}
@media only screen and (max-width:768px) {
	.col {width:100%;}
	#panorama {height:200px;}
	#pano #panorama {height:300px;}
}