/*
Theme Name: Full Circle

Author: Ben Erwin, Powersimple, LLC
Author URI: https://Powersimple/
Description: A single page application theme leverging Gulp, SASS and BrowserSync. 
Content is queried on initial load by the native Wordpress REST API and loaded into Javascript Objects.
WheelNav, Slick and JQUERYUI are INtegrated for dynamic Navigation.
License: MIT
Text Domain: powersimple

DO NOT EDIT IN STYLE.CSS
*/
/* PUT YOUR COLOR PALETTE HERE:
*/
@import url("https://fonts.googleapis.com/css?family=Cabin:400,600,700|Krona+One");
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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: 0; }

/* 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; }

header { height: 0; position: absolute; width: 100%; height: 100px; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; }
header #logo { width: 61.8%; z-index: 2; margin: -2% auto; position: relative; }
header #laurel { color: #fff; position: relative; text-align: center; width: 100%; padding: 5px; display: inline-block; }

header.horizontal { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform: scale(100vh); transform: scale(100vh); }
header.horizontal #laurel { font-size: 1.618033vh; }
header.horizontal #logo { width: 61.8033vh; margin: -2vh auto; }

header.horizontal.maxed #logo { background-color: rgba(0, 0, 200, 0.3); -webkit-transform: translatex(25vw); transform: translatex(25vw); width: 38%; }

header.horizontal.maxed #laurel { -webkit-transform: translatex(50vw); transform: translatex(50vw); font-size: 2.38vh; width: 50%; }

header.vertical { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform: scale(100vw); transform: scale(100vw); }
header.vertical #laurel { font-size: 1.618033vw; }
header.vertical #logo { width: 61.8033vw; margin: -2vw auto; }

header.vertical.maxed #logo { background-color: rgba(0, 0, 200, 0.3); }

header.vertical.maxed #laurel { font-size: 2.38vw; }

body { background-color: #000; font-family: 'Cabin', sans-serif; }

html, body { height: 100vh; width: 100vw; margin: 0px; padding: 0px; overflow: hidden; line-height: 120%; font-size: 1em; }
@media (max-width: 539px) { html, body { font-size: 0.7em; } }
@media (min-width: 540px) and (max-width: 767px) { html, body { font-size: 0.8em; } }
@media (min-width: 768px) and (max-width: 1025px) { html, body { font-size: 0.8em; } }
@media (min-width: 1281px) { html, body { font-size: 1.2em; } }

a { color: #fff200; }

a:hover { color: #0f0; }

#stars { height: 100%; margin: 0px; padding: 0px; position: absolute; z-index: -1; }

#masthead, #colophon { font-family: 'Rubik', sans-serif; background-color: #000; }

#preload { display: none; }

#main { min-width: 320px; min-height: 320px; position: absolute; }

footer { position: absolute; width: 100%; height: 100px; bottom: 0; }
footer #footer { background-color: rgba(200, 0, 0, 0.2); color: #fff; text-align: center; margin-bottom: 0.5em; }
footer #fork-this { position: absolute; right: 0; bottom: 0; height: 15vh; width: 15vh; opacity: 0.5; }
footer #fork-this #fork-this-svg { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0.9; }
@media (max-width: 1024px) { footer #fork-this { height: 8vh; width: 8vh; } }
@media (max-width: 539px) { footer #fork-this { display: none; } }

footer.horizontal.maxed { width: 50%; left: 50%; position: absolute; height: 50px; }

#circle-mask svg { position: absolute; top: 0; left: 0; display: none; }
#circle-mask svg mask rect { fill: white; }
#circle-mask svg mask circle { overflow: hidden; }
#circle-mask svg > rect { fill: black; -webkit-mask: url(#mask); mask: url(#mask); }
#circle-mask #bg-video { display: none; }
#circle-mask video { border-radius: 50%; position: absolute; top: 0; left: 1px; z-index: -1; overflow: hidden; height: 99%; opacity: 0.9; }

#screen.horizontal #bg-video video { height: 61vh; left: 50%; top: 50%; margin-left: -30.5vh; margin-top: -30.5vh; }
#screen.horizontal #screen-image-wrap { width: 58vh; height: 58vh; left: 50%; top: 50%; margin-left: -29vh; margin-top: -29vh; }

#screen.vertical #bg-video video { height: 61vw; left: 50%; top: 50%; margin-left: -30.5vw; margin-top: -30.5vw; }
#screen.vertical #screen-image-wrap { width: 58vw; height: 58vw; left: 50%; top: 50%; margin-left: -29vw; margin-top: -29vw; }

.video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-wrapper .video-phi-narrow { width: 38%; }
.video-wrapper .left { left: 0; }

#project-info { position: absolute; top: 50%; left: 50%; border-radius: 50%; width: 60vh; height: 60vh; margin-left: -30vh; margin-top: -30vh; z-index: 3000; display: none; }
#project-info div { color: #fff; text-align: center; }

#featured-image-wrap { display: none; /*
position: absolute;
width: 20vw;
height: 20vw;
padding: 0px;
top: 50%;
left: 2vw;
margin-top: -10%;
opacity: 1;
color: #fff;
img { width: 100%; height: auto; z-index: 1000;
}
div { text-align: center; width: 100%; line-height:120%;
}
#featured-image-header { bottom: 100%; #featured-image-title { font-size: 150%; position: absolute; margin-top: -2em;   } #featured-image-caption { font-size: 80%; font-style: italic; position: absolute; margin-top: -1.2em }
}
#featured-image-footer { #featured-image-description { font-size: 100%; position: absolute; margin-top: 1.2em; } top:100%;
}
#featured-image-container { border-radius: 50%; border: 1px solid #ccc; overflow: hidden; width: 100%; height: 100%;
}
*/ }

#featured-image-projector { display: none; position: absolute; width: 9.09vw; height: 9.09vw; padding: 0px; border-radius: 50%; top: 50%; left: 2vw; margin-top: -9.545%; opacity: 1; overflow: hidden; color: #fff; transform: scale(3) scaleZ(1.2) rotateX(-16deg) rotateY(98deg) skewX(-16deg); transform-origin: 0% 23%; perspective: 230; -webkit-transform: scale(3) scaleZ(1.2) rotateX(-16deg) rotateY(98deg) skewX(-16deg); -webkit-transform-origin: 0% 23%; -webkit-perspective: 230; -webkit-perspective-origin: 50% 50%; -moz-transform: scale(3) scaleZ(1.2) rotateX(-16deg) rotateY(98deg) skewX(-16deg); -moz-transform-origin: 0% 23%; -moz-perspective: 230; -moz-perspective-origin: 50% 50%; -o-transform: scale(3) scaleZ(1.2) rotateX(-16deg) rotateY(98deg) skewX(-16deg); -o-transform-origin: 0% 23%; -o-perspective: 230; }
#featured-image-projector img { width: 100%; height: auto; z-index: 1000; }

.featured-caption { position: absolute; top: -10px; }

#featured-wrap { position: absolute; }

#featured { position: absolute; width: 20vw; height: 20vw; padding: 0px; margin-top: -10%; opacity: 1; color: #fff; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; line-height: 120%; }
#featured .card { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#featured .back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
#featured .image-caption { width: 100%; text-align: center; position: absolute; }
#featured .image-header { bottom: 100%; }
#featured .image-header .title { font-size: 150%; margin-top: -2em; }
#featured .image-header .caption { font-size: 80%; font-style: italic; margin-top: 1em; }
#featured .image-container { border-radius: 50%; border: 1px solid #ccc; overflow: hidden; width: 100%; height: 100%; position: absolute; }
#featured .image-container img { width: 100%; height: 100%; z-index: 1000; }
#featured .image-footer { top: 100%; }
#featured .image-footer .description { font-size: 100%; margin-top: 1.2em; }

#featured.is-flipped { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

.horizontal.extra-super-wide #featured-wrap { width: 20vw; height: 20vw; -webkit-transform: translate(2vw, 50vh); transform: translate(2vw, 50vh); margin-top: -10%; }

.horizontal.super-wide #featured-wrap { width: 20vw; height: 20vw; -webkit-transform: translate(2vw, 50vh); transform: translate(2vw, 50vh); margin-top: -10%; }

.horizontal.wide #featured-wrap { width: 15vw; height: 15vw; -webkit-transform: translate(2vw, 50vh); transform: translate(2vw, 50vh); margin-top: -7.5%; font-size: 0.9em; }

.horizontal.semi-wide #featured-wrap, .horizontal.square #featured-wrap { width: 12vw; height: 12vw; -webkit-transform: translate(2vw, 12vh); transform: translate(2vw, 12vh); margin-top: 0px; font-size: 0.8em; }

#featured.is-flipped { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

.vertical.super-narrow #featured-wrap { width: 12vw; height: 12vw; -webkit-transform: translate(3vw, 15vh); transform: translate(3vw, 15vh); margin-top: 0px; font-size: 0.8em; }

.vertical.narrow #featured-wrap { width: 15vh; height: 15vh; -webkit-transform: translate(3vw, 15vh); transform: translate(3vw, 15vh); margin-top: 0px; font-size: 2vw; line-height: 120%; }

.vertical.semi-narrow #featured-wrap { width: 15vw; height: 15vw; -webkit-transform: translate(5vw, 18vw); transform: translate(5vw, 18vw); margin-top: 0px; font-size: 0.7em; }

.vertical.square #featured-wrap { width: 12vw; height: 12vw; -webkit-transform: translate(3vw, 15vw); transform: translate(3vw, 15vw); margin-top: 0px; font-size: 0.8em; }

/*
#featured-image-wrap { position: absolute; width: 20vw; height: 20vw; padding: 0px; top: 50%; left: 2vw; margin-top: -10%; opacity: 1; color: #fff; img { width: 100%; height: auto; z-index: 1000; } div { text-align: center; width: 100%; line-height: 120%; } #featured-image-header { bottom: 100%; #featured-image-title { font-size: 150%; position: absolute; margin-top: -2em; } #featured-image-caption { font-size: 80%; font-style: italic; position: absolute; margin-top: -1.2em } } #featured-image-footer { #featured-image-description { font-size: 100%; position: absolute; margin-top: 1.2em; } top:100%; } #featured-image-container { border-radius: 50%; border: 1px solid #ccc; overflow: hidden; width: 100%; height: 100%; }
}
*/
#related { position: absolute; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; -webkit-transform: translate(90vh, 15vw); transform: translate(90vh, 15vw); }
#related ul li { border-radius: 50%; border: 1px solid #fff; width: 50px; height: 50px; margin: 5px auto; color: #ccc; text-align: center; cursor: pointer; background-size: cover; }

#related.horizontal ul { margin-right: 1em; display: inline-block; }
#related.horizontal ul li { display: inline-block; }

#related.horizontal.square, #related.horizontal.semi-wide { -webkit-transform: translate(15vw, 90vh); transform: translate(15vw, 90vh); width: 67%; height: 75px; }

#related.horizontal.wide, #related.horizontal.super-wide, #related.horizontal.extra-super-wide { -webkit-transform: translate(84vw, 16vh); transform: translate(84vw, 16vh); width: 75px; height: 65%; }

#related.vertical ul { margin-bottom: 1em; }

#related.vertical.narrow { right: 100px; width: 65px; }

#related.horizontal.narrow { top: 95%; height: 50px; }
#related.horizontal.narrow ul li { height: 50px; }

.ui-tooltip { padding: 0px; position: absolute; z-index: 9999; margin-top: -25px; margin-left: -25px; }

.rel-tooltip { border-radius: 50%; width: 150px; height: 150px; border: 1px dashed #ff0; background-color: rgba(0, 0, 120, 0.5); background-size: cover; }
.rel-tooltip span { background-color: rgba(250, 12, 12, 0.7); color: #fff; top: 50%; display: block; text-align: center; font-weight: bold; position: absolute; width: 100px; margin-left: 25px; }
.rel-tooltip span.hover-title { margin-top: -1.5em; }
.rel-tooltip span.hover-sub { font-size: 80%; }

.ui-helper-hidden-accessible { display: none; }

.crawl {     /* 
** ALL CREDIT GOES TO 
** Craig Buckler
** http://www.sitepoint.com/css3-starwars-scrolling-text/
**
** Blame me for the music via embedded video bit
*/ width: 61.8vh; height: 100vh; position: absolute; left: 50%; top: 50%; margin-left: -30.9vh; margin-top: -50vh; z-index: 1; /* the interesting 3D scrolling stuff */ /* animation */ }
.crawl p#start { position: relative; width: 16em; font-size: 200%; font-weight: 400; margin: 20% auto; color: #4ee; opacity: 0; z-index: 1; -webkit-animation: intro 2s ease-out; animation: intro 2s ease-out; }
@-webkit-keyframes intro { 0% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes intro { 0% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; } }
.crawl h1 { position: absolute; width: 2.6em; left: 50%; top: 25%; font-size: 10em; text-align: center; margin-left: -1.3em; line-height: 0.8em; letter-spacing: -0.05em; color: #000; text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6; opacity: 0; z-index: 1; -webkit-animation: logo 5s ease-out 2.5s; animation: logo 5s ease-out 2.5s; }
.crawl h1 sub { display: block; font-size: 0.3em; letter-spacing: 0; line-height: 0.8em; }
.crawl p { color: #f2C200; }
@-webkit-keyframes logo { 0% { -webkit-transform: scale(1); opacity: 1; }
  50% { opacity: 1; }
  100% { -webkit-transform: scale(0.1); opacity: 0; } }
@keyframes logo { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
  50% { opacity: 1; }
  100% { -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 0; } }
.crawl #titles { position: absolute; width: 18em; height: 50em; bottom: 0; left: 50%; margin-left: -9em; font-size: 350%; text-align: justify; overflow: hidden; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: perspective(300px) rotateX(25deg); transform: perspective(300px) rotateX(25deg); }
.crawl #titles:after { position: absolute; content: ' '; left: 0; right: 0; top: 0; bottom: 60%; /*  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, transparent 100%); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, transparent 100%); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, transparent 100%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, transparent 100%); background-image: linear-gradient(top, rgba(0, 0, 0, 1) 0%, transparent 100%);*/ pointer-events: none; }
.crawl #titles p { text-align: justify; margin: 0.8em 0; }
.crawl #titles p.center { text-align: center; }
.crawl #titles a { color: #ff6; text-decoration: underline; }
.crawl #titlecontent { position: absolute; top: 100%; -webkit-animation: scroll 100s linear 4s infinite; animation: scroll 100s linear 4s infinite; }
@-webkit-keyframes scroll { 0% { top: 100%; }
  100% { top: -170%; } }
@keyframes scroll { 0% { top: 100%; }
  100% { top: -170%; } }
.ripple, .ripple:before, .ripple:after { display: block; border-radius: 2px; width: 2px; height: 2px; -webkit-animation: rip 6s infinite ease-out; animation: rip 6s infinite ease-out; }

.ripple { position: absolute; z-index: -1; top: 50%; left: 50%; }

.ripple:before, .ripple:after { content: ''; position: absolute; }

.ripple:before { -webkit-animation-delay: .2s; animation-delay: .2s; animation-delay: .2s; top: 5px; left: 25px; }

.ripple:after { -webkit-animation-delay: .8s; animation-delay: .8s; animation-delay: .8s; top: 25px; left: 0; }

#outer-ring { position: absolute; top: 50%; left: 50%; z-index: 100; width: 80em; height: 80em; margin-left: -40em; margin-top: -40em; border-radius: 50%; overflow: hidden; }

#inner-ring { position: absolute; top: 50%; left: 50%; z-index: 1100; width: 75em; height: 75em; margin-left: -37.5em; margin-top: -37.5em; border-radius: 50%; overflow: hidden; }

#inner-subring { position: absolute; top: 50%; left: 50%; z-index: 1300; width: 68em; height: 68em; margin-left: -34em; margin-top: -34em; border-radius: 50%; overflow: hidden; }

#screen.horizontal #outer-ring { width: 80vh !important; height: 80vh !important; margin-left: -40vh !important; margin-top: -40vh  !important; }
#screen.horizontal #inner-ring { width: 72vh !important; height: 72vh !important; margin-left: -36vh !important; margin-top: -36vh  !important; }
#screen.horizontal #inner-subring { width: 64.5vh !important; height: 64.5vh !important; margin-left: -32.25vh !important; margin-top: -32.25vh; }

#screen.vertical #outer-ring { width: 80vw !important; height: 80vw !important; margin-left: -40vw !important; margin-top: -40vw  !important; }
#screen.vertical #inner-ring { width: 72vw !important; height: 72vw !important; margin-left: -36vw !important; margin-top: -36vw  !important; }
#screen.vertical #inner-subring { width: 65vw !important; height: 65vw !important; margin-left: -32.5vw !important; margin-top: -32.5vw; }

#screen.horizontal.maxed #outer-ring { width: 90vh !important; height: 90vh !important; margin-left: -45vw !important; margin-top: -45vh  !important; }
#screen.horizontal.maxed #inner-ring { width: 80vh !important; height: 80vh !important; margin-left: -42.7vw !important; margin-top: -40vh  !important; }
#screen.horizontal.maxed #inner-subring { width: 66vh !important; height: 66vh !important; margin-left: -39.5vw !important; margin-top: -33.2vh; }

#screen.vertical.maxed #outer-ring { width: 96vw !important; height: 96vw !important; margin-left: -48vw !important; margin-top: -48vw  !important; }
#screen.vertical.maxed #inner-ring { width: 80vw !important; height: 80vw !important; margin-left: -40vw !important; margin-top: -40vw  !important; }
#screen.vertical.maxed #inner-subring { width: 67vw !important; height: 67vw !important; margin-left: -33.5vw !important; margin-top: -33.5vw; }

.wheelNavGitHub { height: 210px; width: 210px; margin: auto; -webkit-transition: ease 1s; transition: ease 1s; }

.wheelNav { width: 100%; height: 100%; margin-top: -50%; border-radius: 50%; margin: auto; -webkit-transition: ease 1s; transition: ease 1s; overflow: hidden; }

.wheelNavGitHub > svg, .wheelNav > svg { width: 100%; height: 100%; }

@media (max-width: 880px) { .wheelNavGitHub { height: 200px; width: 200px; } }
@media (max-width: 680px) { .wheelNavGitHub { height: 190px; width: 190px; } }
@media (max-width: 480px) { .wheelNavGitHub { height: 180px; width: 180px; } }
[class|=wheelnav-outer-nav-slice], [class|=wheelnav-inner-nav-slice], [class|=wheelnav-inner-subnav-slice] { cursor: pointer; opacity: 0.5; stroke: yellow; stroke-width: 2px; fill: #162d91; stroke-linejoin: round; stroke-opacity: 0.8; }

[class|=wheelnav-outer-nav-title], [class|=wheelnav-inner-nav-title], [class|=wheelnav-inner-subnav-title] { cursor: pointer; }

[class|=wheelnav-outer-nav-title] > tspan, [class|=wheelnav-inner-nav-title] > tspan, [class|=wheelnav-inner-subnav-title] > tspan { fill: #fff; font-family: 'Cabin',sans-serif; }

[class|=wheelnav-outer-nav-title] > tspan:hover, [class|=wheelnav-inner-nav-title] > tspan:hover, [class|=wheelnav-inner-subnav-title] > tspan:hover { fill: #ff0; }

[class|=wheelnav-outer-nav-slice-hover], [class|=wheelnav-inner-nav-slice-hover], [class|=wheelnav-inner-subnav-slice-hover] { cursor: pointer; opacity: 0.5; stroke: red; stroke-width: 2px; fill: #3d12b4; }

[class|=wheelnav-outer-nav-slice-hover], [class|=wheelnav-inner-nav-slice-hover], [class|=wheelnav-inner-subnav-slice-hover] { cursor: pointer; opacity: 0.5; stroke: red; stroke-width: 2px; fill: #3d12b4; }

[class|=wheelnav-outer-nav-slice-selected], [class|=wheelnav-inner-nav-slice-selected], [class|=wheelnav-inner-subnav-slice-selected] { cursor: pointer; opacity: 0.8; stroke: yellow; stroke-width: 2px; fill: #2b45a2; }

.key-fill, .arrow-fill { cursor: pointer; opacity: 0.8; stroke: yellow; stroke-width: 1px; fill: #2b45a2; }

.key-fill:hover, .arrow-fill:hover { cursor: pointer; opacity: 0.8; stroke: #2b45a2; stroke-width: 1px; fill: #ff0; }

/*

//outer-nav


[class|=wheelnav-outer-nav-slice-basic] { fill: #1572b6; stroke: yellow; stroke-width:2px;
 
}
[class|=wheelnav-outer-nav-title-basic]{  fill: #ccc; stroke-width: 3px;
}

[class|=wheelnav-outer-nav-title-hover] {  fill: #ff0; 
}
[class|=wheelnav-outer-nav-title-selected] { fill: #fff;
}
[class|=wheelnav-outer-nav-title]>tspan {  font-size: 2em;  text-shadow:1px 1px #333;


}
[class|=wheelnav-outer-nav-slice-hover] { fill: #fff; stroke: #f00; stroke-width:2px;


}

[class|=wheelnav-outer-nav-slice-selected] { fill: #33a9dc; stroke: none;

}
[class|=wheelnav-outer-nav-slice-basic] { fill: #1572b6; stroke: yellow; stroke-width:2px;
 
}

//inner nav
[class|=wheelnav-inner-nav-slice-basic] { fill: #1572b6; stroke: yellow; stroke-width: 2px; opacity: 0.2;
}

[class|=wheelnav-inner-nav-title-basic] { fill: #ccc; stroke-width: 3px;
}

[class|=wheelnav-inner-nav-title-hover] { fill: #ff0;
}

[class|=wheelnav-inner-nav-title-selected] { fill: #fff;
}


[class|=wheelnav-inner-nav-slice-hover] { fill: #fff; stroke: #f00;


}

[class|=wheelnav-inner-nav-slice-selected] { fill: #33a9dc; stroke: none;

}

[class|=wheelnav-inner-nav-slice-basic] { fill: #1572b6; stroke: yellow; stroke-width: 2px; opacity: 0.2;
}


// inner subnav
[class|=wheelnav-inner-subnav-title-basic] { fill: #ccc; stroke-width: 3px;
}

[class|=wheelnav-inner-subnav-title-hover] { fill: #ff0;
}

[class|=wheelnav-inner-subnav-title-selected] { fill: #fff;
}

[class|=wheelnav-inner-subnav-title]>tspan {
 font-size: 1.5em; text-shadow: 1px 1px #333;

}

[class|=wheelnav-inner-subnav-slice-hover] { fill: #fff; stroke: #f00;


}

[class|=wheelnav-inner-subnav-slice-selected] { fill: #33a9dc; stroke: none;

}

[class|=wheelnav-inner-subnav-slice-basic] { fill: #1572b6; stroke: yellow; stroke-width: 2px; opacity: 0.2;
}
*/
.phi-centered { width: 61.8vh; height: 61.8vh; position: absolute; left: 50%; top: 50%; margin-left: -30.9vh; margin-top: -30.9vh; z-index: 1; border-radius: 50%; }
.phi-centered .button-ring { z-index: 100; position: absolute; width: 17.2%; height: 17.2%; }
.phi-centered #link-home { left: 50%; margin-left: -8.6%; top: 105%; }

#screen { -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; border: 0px solid #0f0; position: absolute; width: 100vw; height: 100vh; }

#screen.horizontal.maxed { -webkit-transform-origin: center center; transform-origin: center center; }

#screen.horizontal.maxed .slick-list { -webkit-transform: translateX(25vw); transform: translateX(25vw); }

#screen-image-wrap { height: 100%; width: 100%; border-radius: 50%; position: absolute; }
#screen-image-wrap img { width: 100%; height: auto; z-index: 1000; }
#screen-image-wrap div { text-align: center; width: 100%; line-height: 120%; }
#screen-image-wrap #screen-image-header { bottom: 100%; }
#screen-image-wrap #screen-image-header #screen-image-title { font-size: 150%; position: absolute; margin-top: -2em; }
#screen-image-wrap #screen-image-header #screen-image-caption { font-size: 80%; font-style: italic; position: absolute; margin-top: -1.2em; }
#screen-image-wrap #screen-image-footer { top: 100%; }
#screen-image-wrap #screen-image-footer #screen-image-description { font-size: 100%; position: absolute; margin-top: 1.2em; }
#screen-image-wrap #screen-image-container { border-radius: 50%; overflow: hidden; width: 100%; height: 100%; }
#screen-image-wrap #screen-image-container .section { background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 50%; }

#circle-mask svg { position: absolute; top: 0; left: 0; }
#circle-mask svg mask rect { fill: white; }
#circle-mask svg mask circle { overflow: hidden; }
#circle-mask svg > rect { fill: black; -webkit-mask: url(#mask); mask: url(#mask); }
#circle-mask video { position: absolute; top: 0; left: 1px; z-index: -1; overflow: hidden; height: 99%; opacity: 0.8; }

#social-links { position: absolute; top: 10px; right: 0px; display: table; width: 120px; z-index: 1000; }
#social-links ul { display: table-row; }
#social-links ul li { display: table-cell; }
@media (max-width: 540px) { #social-links { top: auto; bottom: 0; } }

#slider-wrap { -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; position: absolute; z-index: 1500; -webkit-transform-origin: center; transform-origin: center; }
#slider-wrap .arrow { position: absolute; width: 4vh; opacity: 0.5; height: 4vh; cursor: pointer; }

#screen.horizontal.maxed #slider-wrap { right: 0; height: 61.8vh; }

.ui-slider { position: relative; text-align: left; background: #2b45a2; opacity: 0.5; border: 3px ridge #ff0; border-radius: 1vh; }

.ui-slider .ui-slider-handle { position: absolute; z-index: 2; cursor: pointer; outline: none; background-color: #3b45a2; border: 3px ridge #ff0; border-radius: 1em; }

.ui-slider .ui-state-active { background-color: #6A82D7; }

key-fill, .arrow-fill { fill: #3b45a2; }

#slider-wrap.vertical { -webkit-transform: translate(93vw, 19.9vh); transform: translate(93vw, 19.9vh); height: 67%; width: auto; }
#slider-wrap.vertical #slider.ui-slider-vertical { height: 61.8vh; width: 3.4vh; }
#slider-wrap.vertical #slider.ui-slider-vertical .ui-slider-handle { width: 6vh; height: 3vh; margin-left: -1.618vh; }
#slider-wrap.vertical #up-arrow { top: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); margin-top: -5vh; }
#slider-wrap.vertical #down-arrow { bottom: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); margin-top: 5vh; }

#slider-wrap.horizontal { -webkit-transform: translate(19.9vw, 80vh); transform: translate(19.9vw, 80vh); width: 70%; height: auto; }
#slider-wrap.horizontal #slider.ui-slider-horizontal { height: 3.4vw; width: 61.8vw; }
#slider-wrap.horizontal #slider.ui-slider-horizontal .ui-slider-handle { width: 3vw; height: 6vw; margin-top: -1.618vw; }
#slider-wrap.horizontal #up-arrow { right: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); }
#slider-wrap.horizontal #down-arrow { left: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); margin-left: -5vh; margin-top: -4vh; }

#slider-wrap.vertical.narrow { left: auto; right: 60px; }
#slider-wrap.vertical.narrow .arrow { width: 3vh; }
#slider-wrap.vertical.narrow #slider.ui-slider-vertical { width: 2vh; }
#slider-wrap.vertical.narrow #slider.ui-slider-vertical .ui-slider-handle { width: 2em; margin-left: -1em; }

.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { -webkit-filter: inherit; filter: inherit; }

.ui-slider-horizontal { height: .8em; }

.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }

.ui-slider-horizontal .ui-slider-range-min { left: 0; }

.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-vertical { width: .8em; height: 100px; }

.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }

.ui-slider-vertical .ui-slider-range-min { bottom: 0; }

.ui-slider-vertical .ui-slider-range-max { top: 0; }

.slideshow { border-radius: 50%; }
.slideshow .slide-wrap { position: relative; overflow: hidden; font-size: 1em; }
.slideshow .slide-wrap h2 { position: absolute; top: 5%; width: 61.8%; left: 50%; margin-left: -30.9%; }
.slideshow .slide-wrap section { position: absolute; overflow: hidden; width: 80%; height: 0px; padding-bottom: 60%; margin-top: 25%; left: 10%; }
.slideshow .slide-wrap section div.content { padding-right: 50px; margin-right: -50px; }
.slideshow .slide-wrap section p { margin-bottom: 0.5em; line-height: 120%; }

#wheel-menu-content, #projects-content { width: 100%; height: 100%; position: absolute; z-index: 2;  /* THIS PART HANDLES THE FONT- 
for slides, positioning is in .slide-wrap in slick.scss */ }
#wheel-menu-content h2, #projects-content h2 { font-weight: bold; text-align: center; color: #fff; margin-bottom: .5em; }
#wheel-menu-content section, #projects-content section { line-height: 120%; color: #fff; text-shadow: 1px 1px #333; }

#screen.horizontal .slideshow .slide-wrap { height: 50vh; }
#screen.horizontal #wheel-menu-content, #screen.horizontal #projects-content { width: 50vh; height: 50vh; left: 50%; top: 50%; margin-left: -25vh; margin-top: -25vh; z-index: 10000;}

#screen.vertical .slideshow .slide-wrap { height: 50vw; }
#screen.vertical #wheel-menu-content, #screen.vertical #projects-content {  z-index: 10000; width: 50vw; height: 50vw; left: 50%; top: 50%; margin-left: -25vw; margin-top: -25vw; }

.slick-slider { position: relative; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; left: 0; top: 0; display: block; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
[dir="rtl"] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

.slick-arrow.slick-hidden { display: none; }

.slick-dots { position: relative; bottom: 40px; display: block; width: 100%; padding: 0; list-style: none; text-align: center; padding-left: 0px !important; }
.slick-dots li { display: inline-block; margin: 0px .5em; }
.slick-dots li button { font-size: 0; line-height: 0; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: #3bbfd6; border: 0; outline: none; background: #3bbfd6; border-radius: 50%; }
.slick-dots li.active { background: #522b1c; }

.slick-prev, .slick-next { line-height: 0; position: absolute; top: 32%; display: block; width: 30px; max-width: 8%; height: 30px; margin-top: -10px; padding: 0; cursor: pointer; color: #3bbfd6; border: none; outline: none; border-radius: 50%; z-index: 100; display: none !important; }

.slick-prev { left: -20px; content: ">"; }

.slick-next { right: -20px; }

#language-menu { position: absolute; top: 10px; right: 10px; }
#language-menu ul { background-color: #fff; }

.horizontal.maxed #language-menu { -webkit-transform: translate(-5vw, 90vh); transform: translate(-5vw, 90vh); }

#matrix { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); max-width: 100%; height: 100vh; width: 100vw; opacity: 0.3; }

/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlcyI6WyJzdHlsZS5jc3MiXSwiZmlsZSI6InN0eWxlLmNzcyJ9 */