body { margin: 0; padding: 0; overflow: hidden; background-color: #000; color: #fff; }

#stage { position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; background-color: #e70; background-color 2s; transition: all 8s; }
#stage.fadein { background-color: rgba(248,208,0,0.3); color: #ffc; /* border: 1px dashed #ccc; */ border: none; }
header { position: absolute; top: 0; left: calc(50% - 500px); width: 1000px; height: 144px; }
header div { position: absolute; display: block; z-index: 0; top: 60%; left: 0; right: 0; bottom: 0; width: 100%; height: 32%; /* background-color: rgba(80,48,16,0.9); */ }
nav { position: absolute; display: block; opacity: 0.0; z-index: 5; top: 112px; left: calc(50% - 500px); width: 1000px; height: 32px; border: 2px outset #555; border-radius: 20px; background-color: #999; text-align: center; overflow: hidden; transition: opacity 2s; -webkit-transition: opacity 2s; }
nav ul {  position: absolute; display: block; opacity: 1.0; z-index: 6; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; border: none; text-align: center; padding: 0 50%; margin: 0; margin-left: -50%; border-radius: 20px; background: url(../images/shine.png) #ccc left -10% center no-repeat; }
nav:hover ul { transition: background-position 5s; -webkit-transition: background-position 5s; background-position: right -10% center; }
nav:hover ul.hoverEffect { transition: background 5s; -webkit-transition: background 5s; 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f8f9+0,e5ebee+94,d7dee3+95,f5f7f9+100&0.01+0,0+4,1+96,0.01+100 */
background: -moz-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%, rgba(245,247,249,0) 4%, rgba(229,235,238,0.98) 94%, rgba(215,222,227,0.99) 95%, rgba(221,227,231,1) 96%, rgba(245,247,249,0.01) 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(246,248,249,0.01)), color-stop(4%,rgba(245,247,249,0)), color-stop(94%,rgba(229,235,238,0.98)), color-stop(95%,rgba(215,222,227,0.99)), color-stop(96%,rgba(221,227,231,1)), color-stop(100%,rgba(245,247,249,0.01))); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%,rgba(245,247,249,0) 4%,rgba(229,235,238,0.98) 94%,rgba(215,222,227,0.99) 95%,rgba(221,227,231,1) 96%,rgba(245,247,249,0.01) 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%,rgba(245,247,249,0) 4%,rgba(229,235,238,0.98) 94%,rgba(215,222,227,0.99) 95%,rgba(221,227,231,1) 96%,rgba(245,247,249,0.01) 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%,rgba(245,247,249,0) 4%,rgba(229,235,238,0.98) 94%,rgba(215,222,227,0.99) 95%,rgba(221,227,231,1) 96%,rgba(245,247,249,0.01) 100%); /* IE10 preview */
background: linear-gradient(135deg, rgba(246,248,249,0.01) 0%,rgba(245,247,249,0) 4%,rgba(229,235,238,0.98) 94%,rgba(215,222,227,0.99) 95%,rgba(221,227,231,1) 96%,rgba(245,247,249,0.01) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03f6f8f9', endColorstr='#03f5f7f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
nav li { position: relative; display: inline-block; padding: 0 1.5em; }
nav a { line-height: 34px; font-family: Arial,Helvetica,Sans,sans-serif; font-size: 1.5rem; color: #444; text-decoration: none; text-transform: uppercase; }
nav a:hover { color: #eee; }
nav li.active a { color: #fff; }
nav.fadein { opacity: 1.0; transition: opacity 2s; -webkit-transition: opacity 2s; }
#logo { position:absolute; display: block; width: 512px; height: 340px; top: 40%; left: calc(50% - 250px); border: none; transition: all 6s; }
.logoPoly { position: absolute; display: block; top: 0; left: 1200px; width: 100px; height: 200px; margin-right: 20px; border: none; background: url(../images/logo-panel.png) transparent center center no-repeat; /* background-size: 1px 200px; */ transition: all 2s; }
/* .logoPoly:first-of-type { margin-left: 16px; } */
.logoPoly.expand { background-size: 100px 200px; }
.logoPoly.expand.posone:nth-child(1) { left: 24px; }
.logoPoly.expand.posone:nth-child(2) { left: 144px; }
.logoPoly.expand.posone:nth-child(3) { left: 264px; }
.logoPoly.expand.posone:nth-child(4) { left: 384px; }
.logoPoly.expand.postwo:nth-child(1) { left: 24px; }
.logoPoly.expand.postwo:nth-child(2) { left: 88px; }
.logoPoly.expand.postwo:nth-child(3) { left: 152px; }
.logoPoly.expand.postwo:nth-child(4) { left: 216px; }
.cube { display: block; opacity: 0.0; position: absolute; top: calc(50% - 44px); left: calc(50% - 44px); width: 88px; height: 88px; background: url(../images/cube.png) transparent center center no-repeat; background-size: contain; transition: all 2s; }
.cone { display: block; opacity: 0.0; position: absolute; top: calc(50% - 44px); left: calc(50% - 44px); width: 88px; height: 88px; background: url(../images/cone.png) transparent center center no-repeat; background-size: contain; transition: all 2s; }
.sphere { display: block; opacity: 0.0; position: absolute; top: calc(50% - 44px); left: calc(50% - 44px); width: 88px; height: 88px; background: url(../images/sphere.png) transparent center center no-repeat; background-size: contain; transition: all 2s; }
.polyK { display: block; opacity: 0.0; position: absolute; top: calc(50% - 44px); left: calc(50% - 44px); width: 88px; height: 88px; background: url(../images/polyK.png) transparent center center no-repeat; background-size: contain; transition: all 2s; }
.logoPoly.expand div { opacity: 1.0; transition: all 2s; }
.subtitle { position: absolute; left: calc(50% - 240px); bottom: 0; padding-left: 10px; width: 465px; height: 30px; font-family: Arial, Helvetica, Sans; font-weight: bold; color: white; font-size: 3.5em; letter-spacing: normal; text-align: center; opacity: 0.0; transition: all 4s; }
.subtitle.expand { height: 60px; bottom: 0; letter-spacing: 12px; opacity: 1.0; }
.subtitle.expand.fadein { height: 60px; bottom: 20px; letter-spacing: 12px; opacity: 1.0; color: #1f1f1f; }

#logo.navdock { position: absolute; display: block; top: 6px; left: calc(50% - 500px); width: 1000px; height: 100px; }
#logo.navdock .logoPoly.expand { width: 50px; height: 100px; margin-right: 10px; background-size: 50px 100px; }
#logo.navdock .logoPoly.expand div { width: 44px; height: 88px; left: calc(50% - 22px); }
#logo.navdock .subtitle.expand.fadein { top: 0; bottom: auto; width: auto; height: auto; left: calc(50% - 220px); font-size: 90px; color: #ffffd7; letter-spacing: 15px; }

section { position: absolute; display: block; top: 180px; left: calc(50% - 425px); width: 850px; height: 450px; }
section ul { position: absolute; display: block; opacity: 0.0; padding: 0; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 2s; -webkit-transition: opacity 2s; }
section ul.active { opacity: 1.0; transition: opacity 2s; -webkit-transition: opacity 2s; }
section ul h1 {  }
section ul p {  }

footer { position: absolute; display: block; bottom: 6px; left: calc(50% - 425px); width: 850px; text-align: center; background-color: rgba(255,210,0,0.1); }
footer a img { position: absolute; display: block; z-index: 5; 
left: calc(50% - 364px); bottom: 18px; width: 728px; height: 90px; 
background-color: rgba(255,255,255,0.25); border: 2px outset white; }

.glint0 { transition: background 5s; -webkit-transition: background 5s; 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f8f9+0,ffffff+50,ffffff+50,f5f7f9+100&0.01+0,1+45,1+55,0.01+100 */
background: -moz-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%, rgba(254,254,254,1) 5%, rgba(255,255,255,1) 10%, rgba(254,254,254,1) 15%, rgba(245,247,249,0.01) 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(246,248,249,0.01)), color-stop(5%,rgba(254,254,254,1)), color-stop(10%,rgba(255,255,255,1)), color-stop(15%,rgba(254,254,254,1)), color-stop(100%,rgba(245,247,249,0.01))); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%,rgba(254,254,254,1) 5%,rgba(255,255,255,1) 10%,rgba(254,254,254,1) 15%,rgba(245,247,249,0.01) 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%,rgba(254,254,254,1) 5%,rgba(255,255,255,1) 10%,rgba(254,254,254,1) 15%,rgba(245,247,249,0.01) 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%,rgba(254,254,254,1) 5%,rgba(255,255,255,1) 10%,rgba(254,254,254,1) 15%,rgba(245,247,249,0.01) 100%); /* IE10 preview */
background: linear-gradient(135deg, rgba(246,248,249,0.01) 0%,rgba(254,254,254,1) 5%,rgba(255,255,255,1) 10%,rgba(254,254,254,1) 15%,rgba(245,247,249,0.01) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03f6f8f9', endColorstr='#03f5f7f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.glint1 {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f8f9+0,e5ebee+4,d7dee3+5,f5f7f9+100&0.01+0,1+4,0+96,0.01+100 */
background: -moz-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%, rgba(229,235,238,1) 4%, rgba(215,222,227,0.99) 5%, rgba(244,246,248,0) 96%, rgba(245,247,249,0.01) 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(246,248,249,0.01)), color-stop(4%,rgba(229,235,238,1)), color-stop(5%,rgba(215,222,227,0.99)), color-stop(96%,rgba(244,246,248,0)), color-stop(100%,rgba(245,247,249,0.01))); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%,rgba(229,235,238,1) 4%,rgba(215,222,227,0.99) 5%,rgba(244,246,248,0) 96%,rgba(245,247,249,0.01) 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%,rgba(229,235,238,1) 4%,rgba(215,222,227,0.99) 5%,rgba(244,246,248,0) 96%,rgba(245,247,249,0.01) 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%,rgba(229,235,238,1) 4%,rgba(215,222,227,0.99) 5%,rgba(244,246,248,0) 96%,rgba(245,247,249,0.01) 100%); /* IE10 preview */
background: linear-gradient(135deg, rgba(246,248,249,0.01) 0%,rgba(229,235,238,1) 4%,rgba(215,222,227,0.99) 5%,rgba(244,246,248,0) 96%,rgba(245,247,249,0.01) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03f6f8f9', endColorstr='#03f5f7f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.glint2 {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f8f9+0,e5ebee+94,d7dee3+95,f5f7f9+100&0.01+0,0+4,1+96,0.01+100 */
background: -moz-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%, rgba(245,247,249,0) 4%, rgba(229,235,238,0.98) 94%, rgba(215,222,227,0.99) 95%, rgba(221,227,231,1) 96%, rgba(245,247,249,0.01) 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(246,248,249,0.01)), color-stop(4%,rgba(245,247,249,0)), color-stop(94%,rgba(229,235,238,0.98)), color-stop(95%,rgba(215,222,227,0.99)), color-stop(96%,rgba(221,227,231,1)), color-stop(100%,rgba(245,247,249,0.01))); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%,rgba(245,247,249,0) 4%,rgba(229,235,238,0.98) 94%,rgba(215,222,227,0.99) 95%,rgba(221,227,231,1) 96%,rgba(245,247,249,0.01) 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%,rgba(245,247,249,0) 4%,rgba(229,235,238,0.98) 94%,rgba(215,222,227,0.99) 95%,rgba(221,227,231,1) 96%,rgba(245,247,249,0.01) 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%,rgba(245,247,249,0) 4%,rgba(229,235,238,0.98) 94%,rgba(215,222,227,0.99) 95%,rgba(221,227,231,1) 96%,rgba(245,247,249,0.01) 100%); /* IE10 preview */
background: linear-gradient(135deg, rgba(246,248,249,0.01) 0%,rgba(245,247,249,0) 4%,rgba(229,235,238,0.98) 94%,rgba(215,222,227,0.99) 95%,rgba(221,227,231,1) 96%,rgba(245,247,249,0.01) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03f6f8f9', endColorstr='#03f5f7f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.glint99 { transition: background 5s; -webkit-transition: background 5s; 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f8f9+0,ffffff+50,ffffff+50,f5f7f9+100&0.01+0,1+45,1+55,0.01+100 */
background: -moz-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%, rgba(254,254,254,1) 85%, rgba(255,255,255,1) 90%, rgba(254,254,254,1) 95%, rgba(245,247,249,0.01) 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(246,248,249,0.01)), color-stop(85%,rgba(254,254,254,1)), color-stop(90%,rgba(255,255,255,1)), color-stop(95%,rgba(254,254,254,1)), color-stop(100%,rgba(245,247,249,0.01))); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%,rgba(254,254,254,1) 85%,rgba(255,255,255,1) 90%,rgba(254,254,254,1) 95%,rgba(245,247,249,0.01) 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%,rgba(254,254,254,1) 85%,rgba(255,255,255,1) 90%,rgba(254,254,254,1) 95%,rgba(245,247,249,0.01) 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(-45deg, rgba(246,248,249,0.01) 0%,rgba(254,254,254,1) 85%,rgba(255,255,255,1) 90%,rgba(254,254,254,1) 95%,rgba(245,247,249,0.01) 100%); /* IE10 preview */
background: linear-gradient(135deg, rgba(246,248,249,0.01) 0%,rgba(254,254,254,1) 85%,rgba(255,255,255,1) 90%,rgba(254,254,254,1) 95%,rgba(245,247,249,0.01) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03f6f8f9', endColorstr='#03f5f7f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
1
@media screen and (max-width: 999px) {

#logo { width: 100%; height: 60%; left: 0; }
.logoPoly { width: 23%; margin-right: 1%; height: 66%; background-size: 1px 100%; }
.logoPoly:first-of-type { margin-left: 2%; }
.logoPoly.expand { background-size: 100% 100%; }
.cube { position: absolute; top: 6%; left: 6%; width: 88%; height: 88%; background: url(../images/cube.png) transparent center center no-repeat; background-size: contain; }
.cone { position: absolute; top: 6%; left: 6%; width: 88%; height: 88%; background: url(../images/cone.png) transparent center center no-repeat; background-size: contain; }
.sphere { position: absolute; top: 6%; left: 6%; width: 88%; height: 88%; background: url(../images/sphere.png) transparent center center no-repeat; background-size: contain; }
.polyK { position: absolute; top: 6%; left: 6%; width: 88%; height: 88%; background: url(../images/polyK.png) transparent center center no-repeat; background-size: contain; }
.subtitle { left: 0; padding-left: 1%; width: 100%; height: 16%; font-size: 8.5em; }
.subtitle.expand { height: 16%; bottom: 16%; }
.subtitle.expand.fadein { height: 16%; bottom: 16%; }

}

@media screen and (orientation: portrait) {

#logo { height: 40%; }

}