body, html{height:100%;font-family:Jost;}
.container{width:100%;min-height:100vh;position:relative; background:#000;}
.builder {height:100%;}
.content{flex: 1 0 auto}
a {color:#3f60ab;}
/*
landing
------------------------*/
.spruce {z-index:20;text-align:center; margin-right:20px;}
.spruce h1,.spruce h3{font-family:'Nunito Sans';color:#FFF;line-height:90%;}
.spruce h1 {font-weight:900;opacity:0.3;}
.spruce h3 {font-weight:300;opacity:0.5;}
.wood-top{display:flex;align-items:center;justify-content:flex-end;position:relative;height:20%;background:url('/images/wood/grain-min-h1.png');box-shadow:inset 1px -4px 9px -6px;z-index:10;}
.wood-bottom{position:absolute;bottom:0px;left:0px;width:100%;height:20%;background:url('/images/wood/grain-min-h2.png'); box-shadow:inset 1px 4px 9px -6px;z-index:10;}
.wood-left{position:absolute;top:0;left:0;height:100%;width:15%;background:url('/images/wood/grain-min-v1.png');box-shadow:inset -4px 1px 9px -6px;}
.wood-right{position:absolute;top:0;right:0;height:100%;width:15%;background:url('/images/wood/grain-min-v2.png');box-shadow:inset 4px 1px 9px -6px;}
.window-item{position:absolute;top:20%;left:15%;right:15%;bottom:20%;background-image:url('/images/starry-sky-motion.svg');background-width:100%;}
.twobyfour {background-image:url('/images/wood/2X4-b.png');}
.landing-station {background-position:center;background-repeat:no-repeat;background-size:auto 100%;}
.landing-research{position:absolute;top:20px;left:20px;z-index:40;font-size:200%;}
.landing-research h2 {color:#6b6e6c;font-family:'Special Elite';overflow:hidden;white-space:nowrap;max-width:100%;animation:research 4s steps(60,end);}
@keyframes research {from{max-width:0;}}
/*
part one
-----------------------*/
.door {width:0;position:absolute;background:url('/images/wood/grain2.png');background-repeat:no-repeat;background-size:cover;height:100%;z-index:20;animation:door 6s steps(90,end);}
@keyframes door {from{width:50%;}}
.door-left {left:0; top:0;background-position:left;box-shadow:inset -4px 1px 9px -6px;}
.door-right {right:0;top:0;background-position:right;box-shadow:inset 4px 1px 9px -6px;}
.entry-way {position:absolute;top:0;left:0;display:flex;align-items:center;flex-wrap:wrap;height:100%; width:100%;background-image:url('/images/wood/grain3.jpg');background-size:cover;color:#FFF;}
.entry-way h1 {font-weight:700;text-shadow:1px 2px 3px #000;}
.controls {position:relative;display:table; margin-left:auto;margin-right:auto;padding:20px;background-image:url('/images/wood/grain-min-h2.png');background-size:cover;border-radius:10px;box-shadow:inset 0 0 10px #4a3125;}
a.control {display:inline-table;margin-left:10px;margin-right:10px;width:200px;height:200px;border-radius:50%;border:solid 3px #ececec;background-size:cover;}
a.control:hover {border:dotted 3px #FFF;ocacity:0.8;}
a.control-one {background-image:url('/images/crank1-min.png');}
a.control-two {background-image:url('/images/crank2-min.png');}
a.control-three {background-image:url('/images/crank3-min.png');}
.screw {position:absolute;height:14px; width:14px; border-radius:50%;background-image:url('/images/screw.png');background-size:cover;cursor:pointer;}
.screw-top-left {top:7px;left:7px;transform:rotate(-30deg)}
.screw-top-right {top:7px;right:7px;transform:rotate(10deg);}
.screw-bottom-left {bottom:7px;left:7px;transform:rotate(15deg);}
.screw-bottom-right {bottom:7px;right:7px;transform:rotate(-15deg);}
.warning {display:table;padding:5px;border:solid 2px #ececec;background:red;color:#FFF;margin:auto;font-size:125%;}
/*
part two
------------------------*/
.sub-station-one {height:100%;background-image:url('/images/wood/grain-min-boards.png');background-size:cover;}
.woody {background-repeat:no-repeat;background-size:cover;}
.woody-top {background-image:url('/images/wood/grain2-min-h1.png');height:10%;box-shadow:inset 1px -4px 9px -6px;z-index:10}
.woody-left {background-image:url('/images/wood/grain2-min-v1.png');width:5%;height:100%;position:absolute;top:0;left:0;z-index:10;box-shadow:inset -4px 1px 9px -6px;z-index:20}
.woody-bottom {background-image:url('/images/wood/grain2-min-h2.png');position:absolute;bottom:0;left:0;height:10%;width:100%;z-index:30;box-shadow:inset 1px 4px 9px -6px;}
.woody-right {background-image:url('/images/wood/grain2-min-v2.png');width:5%;height:100%;position:absolute;top:0;right:0;z-index:40;box-shadow:inset 4px 1px 9px -6px;}
.portal-area {display:flex;align-items:center;justify-content:center;position:absolute;top:10%;left:5%;height:80%;width:90%;}
.portal {display:table;width:20%;padding-bottom:20%;border-radius:50%;}
.portal-stars {background-image:url('/images/starry-sky-motion.svg');background-size:200%;}
.stars-start {transform:rotate(45deg);}
.stars-1 {transform:rotate(50deg);}
.stars-2 {transform:rotate(60deg);}
.stars-3 {transform:rorate(70deg);}
.stars-4 {transform:rotate(80deg);}
.stars-5 {transform:rotate(90deg);}
.stars-6 {transform:rotate(100deg);}
.stars-7 {transform:rotate(110deg);}
.stars-8 {transform:rotate(120deg);}
.stars-9 {transform:rotate(130deg);}
.portal-mission {display:table;padding:20px;width:50%;height:80%;border-radius:5px;margin-left:20px;background-image:url('/images/wood/grain-min-cherry.png');color:#FFF;text-align:center;}
.portal-controls a {display:inline-table;color:#000;font-size:50%;width:20px;height:20px;border-radius:50%;line-height:20px;text-align:center;border:solid 1px #ececec;margin-left:5px;margin-right:5px;background-image:url('/images/wood/grain-min-but.png');background-size:cover;}
.portal-controls a:hover {border:solid 1px #000;text-decoration:none;}
a.fact-selected {border:solid 1px #000;}
.portal-facts {display:flex;align-items:center;min-height:400px;}
.portal-facts img {max-width:90%;max-height:400px;margin:auto;}
.portal-nav {display:flex;position:absolute;z-index:50;top:0;left:0;padding:10px;border-bottom-right-radius:10px;border-top:solid 1px #6e5c49;background-image:url('/images/wood/grain-min-h1.png');box-shadow:1px 2px 10px #000;}
.portal-nav a {display:table;width:100px;height:100px;border-radius:50%;background-size:cover;margin-left:10px;margin-right:10px;border:solid 2px #ececec}
.portal-nav a:hover {border:2px dashed #ececec;}
/*
part three
------------------------*/
.sub-station-two {height:100%;background-image:url('/images/wood/spruce-background.png');background-size:cover;}
.spruce-top {background-image:url('/images/wood/spruce-min-h1.png');background-size:100%;height:10%;box-shadow:inset 1px -4px 9px -6px;z-index:10}
.spruce-left {background-image:url('/images/wood/spruce-min-v1.png');width:5%;height:100%;position:absolute;top:0;left:0;z-index:10;box-shadow:inset -4px 1px 9px -6px;z-index:20}
.spruce-bottom {background-image:url('/images/wood/spruce-min-h2.png');background-size:100%;position:absolute;bottom:0;left:0;height:10%;width:100%;z-index:30;box-shadow:inset 1px 4px 9px -6px;}
.spruce-right {background-image:url('/images/wood/spruce-min-v2.png');width:5%;height:100%;position:absolute;top:0;right:0;z-index:40;box-shadow:inset 4px 1px 9px -6px;}
.spruce-research {display:table;position:absolute;top:10%;left:5%;height:80%;width:90%;}
.spruce-options {display:table; width:100%;height:100%;box-shadow:inset -4px 1px 9px -6px;}
.research-image{max-height:500px;}
a.research {display:table-cell;width:25%;background-position:left;background-size:cover;filter:brightness(1);}
a.research:hover {filter:brightness(1.1);}
.spruce-1 {background-image:url('/images/wood/spruce-1.png');}
.spruce-2 {background-image:url('/images/wood/spruce-2.png');}
.spruce-3 {background-image:url('/images/wood/spruce-3.png');}
.spruce-4 {background-image:url('/images/wood/spruce-4.png');}
.blinker {animation: blinker 1s linear infinite;font-size:150%;font-family:'Special Elite'}
@keyframes blinker {50% {opacity: 0;}}
.research-left {display:inline;}
.research-above {display:none;}
/*
part four
------------------------*/
.sub-station-three {height:100%;background-image:url('/images/wood/white-spruce.png');}
.red-top{background:url('/images/wood/redspruce-min-h1.png');background-size:100%;height:10%;box-shadow:inset 1px -4px 9px -6px;z-index:40}
.red-left {background-image:url('/images/wood/redspruce-min-v1.png');width:5%;height:100%;position:absolute;top:0;left:0;z-index:10;box-shadow:inset -4px 1px 9px -6px;z-index:30}
.red-bottom {background-image:url('/images/wood/redspruce-min-h2.png');background-size:100%;position:absolute;bottom:0;left:0;height:10%;width:100%;z-index:20;box-shadow:inset 1px 4px 9px -6px;}
.red-right {background-image:url('/images/wood/redspruce-min-v2.png');width:5%;height:100%;position:absolute;top:0;right:0;z-index:10;box-shadow:inset 4px 1px 9px -6px;}
.spruce-observation {display:flex;align-items:center;position:absolute;top:10%;left:5%;height:80%;width:90%;}
.spruce-deck {width:40%;}
.spruce-deck-window {display:table;margin:auto;width:80%;background-image:url('/images/starry-sky-motion.svg');border-radius:20px;border:solid 10px rgba(255,255,255,.4);transform:rotate(90deg) }
.sub-station-three h1 {display:table;position:absolute;top:5%;right:5%;font-size:300%;color:#FFF;opacity:0.5;font-weight:900;text-shadow:1px 1px 5px #000;}
.spruce-deck-pick {display:table;margin:auto;position:absolute;left:-20px;bottom:5%;transform:rotate(-15deg);border:solid 6px #FFF;box-shadow:1px 1px 5px #000;cursor:pointer;}
.spruce-deck-pick img {max-width:160px;}
/*
delays
------------------------*/
.content-1 { animation-delay:0.5s; -moz-animation-delay:0.0s; -webkit-animation-delay:0.5s; }
.content-2 { animation-delay:1.0s; -moz-animation-delay:1.0s; -webkit-animation-delay:1.0s; }
.content-3 { animation-delay:1.5s; -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
.content-4 { animation-delay:2.0s; -moz-animation-delay:2.0s; -webkit-animation-delay:2.0s; }
.content-5 { animation-delay:2.5s; -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }
.content-6 { animation-delay:3.0s; -moz-animation-delay:3.0s; -webkit-animation-delay:3.0s; }
/*
positions
------------------------*/
.back-left{background-position:left;}
.back-right{background-postion:right;}
.back-top{background-position:top;}
.back-bottom {background-position:bottom;}
.back-center {background-position:center;}
@media screen and (max-width: 699px) {
	.landing-station {background-size:100%;}
	.landing-research h2{font-size:50%;max-width:300px;}
	.wood-top {justify-content:center;}
	a.control {width:100px;height:100px;margin-left:5px;margin-right:5px;}
	.bigger {font-size:100%;}
	.portal-nav a {width:50px;height:50px;}
	.portal-area {flex-direction:column}
	.portal-mission {width:90%;margin-left:auto;margin-right:auto;height:auto;}
	.portal,.spruce-deck-window, .research-left {display:none;}
	.spruce-deck-pick img {max-width:100px;}
	.sub-station-three h1 {font-size:200%;right:auto;left:auto;}
	.spruce-observation {flex-direction:column; justify-content:center;}
	#options-cell {height:30%;border-bottom:solid 3px #6e5c49;}
	.research-above {display:inline;}
	#research-results {display:flex;align-items:center;justify-content:center;height:70%;}
	.research-image {max-height:200px;}
	#deck-number {font-size:200%;}
	.warning, #deck-statement {margin-left:10px;margin-right:10px;}
}