@font-face {
    font-family: "vfSans";
    src: url("../media/fonts/VF Sans-Reg.woff") format('woff');
}

@font-face {
    font-family: "vfSans";
    src: url("../media/fonts/VF Sans-Bold.woff") format('woff');
    font-weight: bold;
}

html {
    height:100%;
}

body {
  font-family: "Open Sans";
  background: #fff;
  font-size: 12pt;
  height:100%;
}

.flex-window * :not(.hero) :not(.superhero) {
  z-index:1;
}

.logo {
    z-index: 3;
    position: fixed;
    bottom: 25px;
    left: 25px;
    width: 25vw;
}

.logo:hover {
  cursor: pointer;
}

.pane, .flex-window {
    width: 100vw;
    height:100%;
    overflow: hidden;
    padding: 0;
}

.flex-pane--full, .flex-pane, .flex-window {
    position: relative;
    display: inline-block;
    height: 100%;
    vertical-align: top;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.flex-window {
  flex-direction: row;
  display: flex;
}

.flex-pane {
    width: 50vw;
}

.flex-pane--full {
    width: 100vw;
}

blockquote.large-quote {
    font-size: 3.5vh;
    text-align: left;
    margin: 0 calc(25px + 1vw);
    width: 66%;
    z-index:1;
}

blockquote {
    font-size: 18px;
    margin: 0.25em 0;
    padding: 0.35em 2.5vw;
    line-height: 1.45;
    position: relative;
}

blockquote:before {
    font-family: "vfSans";
    display: block;
    content: url('../media/svg/quote-white.svg');
    position: absolute;
    left: -1vw;
    top: .5vh;
    height: 3vw;
    width: 3vw;
}

blockquote.dark:before {
    font-family: "vfSans";
    display: block;
    content: url('../media/svg/quote-black.svg');
    position: absolute;
    left: -1vw;
    top: .5vh;
    height: 3vw;
    width: 3vw;
}

.extremeBottomGutter, .bottomGutter, .topGutter, .leftGutter, .rightGutter, .upperBar, .middleBar {
    position: absolute;
    width: 100%;
}

.bottomGutter {
    bottom: 5vw;
}

.extremeBottomGutter {
    bottom: 25px;
}

.topGutter {
    top: 25px;
}

.leftGutter {
    left: 25px;
}

.rightGutter {
    right: 25px;
}

.hero {
  z-index:-2;
  height: 100%;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.upperBar {
    display:block;
    top: 33vh;
    width: 100%;
    /*z-index: 2;*/
    text-align: center;
}

.middleBar {
    display:block;
    top: 55vh;
    width: 100%;
    /*z-index: 2;*/
    text-align: center;
}

.calculator-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.calculator-pane div {
  flex: 1 1 0;
}

.calculator-buttons {
  display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 50px;
}

.calculator-buttons .skeleton-button {
  max-width: 8vw;
  min-width: 8vw;
}

button {
  z-index: 2;
  cursor: pointer;
}


.skeleton-button, .calculator-textbox {
  background-color: rgba(255,255,255,0);
  border: 2px solid #fff;
  color: #fff;
  padding: 1vh;
  font-size: 4vh;
  z-index: 2;
  min-width: 20vh;
  cursor: pointer;
  border-radius: 2px;
}

.calculator-buttons .calculator-textbox {
  max-width: 8vw;
  min-width: 8vw;
  text-align: center;
  cursor: text;
}

.calculator-text {
  margin: 2vh 0;
}

.skeleton-button.invert {
  background-color: white;
  color: black;
}

.skeleton-button.invert:hover {
  background-color: rgba(255,255,255,0);
  color: #fff;
  border: 2px solid #fff;
}

.skeleton-button.no-border, .skeleton-button.no-border:hover {
  border: none;
  background-color: rgba(255,255,255,0);
  padding:0;
}

.skeleton-button:hover, .calculator-textbox:hover, .skeleton-button.calc-active, calculator-textbox.calc-active {
  background: #fff;
  color: #000;
}

.skeleton-button.dark:hover {
  background: #000;
  color: #fff;
}

.next-navigator img {
  height: 3vh;
  opacity: 0.66;
  margin:0px;
  padding:0px;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.next-navigator img:hover {
  opacity: 1;
}

.button--info {
    background: rgba(255,255,255,0);
    border: none;
    padding: 0;
    margin: 2vh 25px;
  }

.button--info span {
      font-size: 2vh;
      vertical-align: middle;
  }

.button--info img {
      height: 5vh;
      vertical-align: middle;
  }

.overlay {
  overflow:hidden;
  height:100%;
  width: 100vw;
  padding: 0;
  z-index: 10;
  position: absolute;
  background-color: rgba(0,0,0,.66);
}

.overlay a {
  color: #ff6900;
}

.light-pane {
  background-color: rgba(255,255,255,1);
}

.dark-pane {
  background-color: rgba(0,0,0,1);
}

.overlay iframe {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.overlay .calculator-results ul {
  list-style: square;
  display: inline-block;
  text-align: left;
}

.overlay .calculator-results ul li {
  padding: .5vh 0;
}

.button--close {
    position: absolute;
    top: 25px;
    left: 25px;
    background: rgba(255,255,255,0);
    border: none;
    padding: 0;
}

.button--close img {
  height: 4vh;
  width: 4vh;
}

.icon--house {
  height: 10vw;
  width: 10vw;
}

h1, h2, h3, h4 {
  font-family: 'vfSans';
  margin: 0 25px;
}

h1.title {
  font-size: 12vh;
  margin-bottom: 6vh;
}

h2.title {
  font-size: 8vh;
  margin-bottom: 4vh;
}

h3.title {
  font-size: 6vh;
  margin: 0 calc(106w - 25px) 3vh 25px;
}

p.subtitle {
  font-size: 4vh;
  margin: 0 25vw 2vh 25vw;
  text-align: center;
  display: inline-block;
  width:50vw;
}

p.fact {
  font-size: 3vh;
  margin: 0 25px 2vh 25px;
}

p.narrative {
  font-size: 2.5vh;
  margin: 0 25px 2vh 25px;
}

.landscape-pad--bottom  {
  padding-bottom: 4vh;
}

.center {
    text-align: center;
}

.middle {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.light {
    color: white;
}

.dark {
    color: black;
    border-color: black;
}

.blue {
  color: #0092D1;
}

.normal {
	filter: invert(0%);
}

.inverted {
	filter: invert(100%);
}

.scroller--y {
  overflow-y: auto;
  scroll-behavior: smooth;
}


/*** Animations ***/

/*** Animations ***/

[data-animation="coalesce"] {
    -webkit-filter: blur(10px);
    transform: scale(2, 2) translateZ(0);
    opacity:0;
}

[data-animation="coalesce"].aos-animate {
  -webkit-filter: blur(0px);
  transform: scale(1, 1)  translateZ(0);
  opacity:1;
  transition: 1s;
}

/*.loaded [data-animation="pull"] {*/
/*[data-animation="pull"] {
    transform: scale(1, 1) translateZ(0);
}*/


.superhero {
  z-index:-1;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  transform: scale(1, 1) translateZ(0) ;
  height:100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  /*background: no-repeat 50% 50%;*/
}

.superhero.loaded {
  opacity: 1;
  transition: opacity 2s ease-in-out;
}


/*[data-animation="pull"].aos-animate :not(.loaded) {
    transform: scale(1, 1) translateZ(0);
}

[data-animation="pull"].aos-animate.loaded  {
  transform: scale(1.05,1.05)  translateZ(0);
  transition: transform 30s;
}*/

[data-animation="pull"] {
    transform: scale(1, 1) translateZ(0)  rotate(0deg);;
}

[data-animation="pull"].aos-animate  {
  transform: scale(1.05,1.05)  translateZ(0)  rotate(0.1deg);;
  transition: transform 20s;
}

.animation-element {
  transition-duration: 1s;
}

[data-animation="in-left"] {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}

[data-animation="in-left"].aos-animate {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

[data-animation="out-left"] {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  opacity: 1;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}

[data-animation="out-left"].aos-animate {
  -webkit-transform: translateX(-200%);
  transform: translateX(-200%);
  opacity: 0;
}

[data-animation="fadeIn"] {
  animation-duration: 2500ms;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  opacity:0;
  left:0;
}

[data-animation="fadeIn"].aos-animate {
  animation-name: fadein;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pulse {
	animation-name: pulse_animation;
	animation-duration: 2500ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
  animation-delay: 2s;
}

.pulse:hover {
  animation-name: none;
}

@keyframes pulse_animation {
	0% { transform: scale(1); }
	30% { transform: scale(1); }
	40% { transform: scale(1.12); }
	50% { transform: scale(1); }
	60% { transform: scale(1); }
	70% { transform: scale(1.06); }
	80% { transform: scale(1); }
	100% { transform: scale(1); }
}

.fader {
	animation-name: fader_animation;
	animation-duration: 15000ms;
	animation-iteration-count: 1;
	animation-timing-function: linear;
  opacity:0;
  position: absolute;
  left:0;
}

.fader.final  {
  animation-name: fader-final_animation;
  animation-fill-mode: forwards;
}

@keyframes fader_animation {
  0% {opacity: 0}
  16% {opacity: 1}
  33% {opacity: 0}
}

@keyframes fader-final_animation {
	0% { opacity: 0; }
	20% { opacity: 1; }
	50% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 1; }
}

.delay1 {
  animation-delay: 1000ms;
}

.delay2 {
  animation-delay: 6000ms;
}

.delay3 {
  animation-delay: 11000ms;
}

.shortDelay1 {
  animation-delay: 500ms;
}

.shortDelay2 {
  animation-delay: 3000ms;
}

.shortDelay3 {
  animation-delay: 6000ms;
}

/*** Swiper Overrides ***/

.swiper-container {
  width: 100vw;
  height: 100%;
}

.swiper-pagination-bullet {
  width:16px;
  height:16px;
  background: rgba(255,255,255,0);
  border:1px solid #fff;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #0092D1;
}

.swiper-container-vertical>.swiper-pagination-progress {
  width: 16px;
}

.swiper-pagination-progress .swiper-pagination-progressbar {
    background: #FFC72C;
}

.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin:10px 0;
}

/*** Media Queries ***/

@media (max-width: 600px) {
  .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
  }
}

@media (orientation:landscape) and (max-height: 1079px) {
  .bottomGutter {
      bottom: 15vh;
  }
}

/*Squarish aspect*/
@media (max-aspect-ratio: 2/1) {
  .calculator-buttons .skeleton-button, .calculator-buttons  .calculator-textbox {
    max-width: 8vw;
    min-width: 8vw;
  }


}

/*Portrait device*/
@media (orientation:portrait) {
    .flex-pane {
        display: inline-block;
        height: 50vh;
        vertical-align: top;
        width: 100vw;
        padding: 0px;
        margin: 0px;
        background-size: cover;
        background-position: center;
    }

    .logo {
        position: fixed;
        bottom: 15vh;
        left: 25px;
        width: calc(100vw - 50px);
    }

    .flex-window {
      flex-direction: column;
      display: flex;
    }

    .portrait-reverse {
      flex-direction: column-reverse;
    }

    .portrait-hide-logo {
      z-index:100;
    }

    .bottomGutter, .topGutter, .leftGutter, .rightGutter {
        position: absolute;
    }

    .bottomGutter {
        bottom: 22vh;
    }

    .topGutter {
        top: 25px;
    }

    .leftGutter {
        left: 25px;
    }

    .rightGutter {
        right: 25px;
    }

    .upperBar {
        top: 50px;
    }


    .portraitUpperMiddleBar {
      top:35vh;
    }

    .middleBar {
      top:40vh;
    }

    .scroller--y {
      padding-bottom: 20vh;
    }

    h1.title {
      font-size: 8vh;
      margin-bottom: 4vh;
    }

    h2.title {
      font-size: 6vh;
      margin-bottom: 3vh;
    }

    h3.title {
      font-size: 4vh;
      margin: 2vh 25px;
    }

    p.subtitle {
      font-size: 3vh;
      margin: 0 25px 1.5vh 25px;
      padding:0;
      width: calc(100vw - 50px);
    }

    p.fact {
      font-size: 2.5vh;
      margin: 0 25px 2vh 25px;
    }

    p.narrative {
      font-size: 2.5vh;
      margin: 0 25px 2vh 25px;
    }

    .button--close img {
      height: 3vh;
      width: 3vh;
    }

    .skeleton-button {
      font-size: 3vh;
    }

    .button--close {
      top: 12px;
      left: 12px;
          /*filter: invert(100%)*/
    }

    blockquote.large-quote {
      display: none;
    }

    .next-navigator :not(.explorer) {
      display: none;
    }

    .swiper-pagination-bullet {
      border-color: #0092D1;
    }

    .offset25portrait {
      background-position: 25% 0 !important;
    }

    .offset60portrait {
      background-position: 60% 0 !important;
    }

    .portrait-pad--top {
        padding-top: 50px;
    }

    .landscape-pad--bottom  {
      padding-bottom: 0;
    }

    .portrait-bottomGutter {
      bottom:15vh;
    }

    .calculator-buttons {
        /*border:1px solid red;*/
        margin-top: 20px;
    }

    .calculator-buttons .skeleton-button, .calculator-buttons  .calculator-textbox {
      font-size: 2vh;
      min-width: 15vw;
      max-width: 15vw;
      display:inline-block;
    }

    .calculator-buttons  .calculator-textbox {
      padding: .8vh;
    }

    .overlay .calculator-results ul {
      list-style: square;
      display: inline-block;
      text-align: left;
      padding-left: 0;
      margin-left: 25px;
    }

    .overlay .calculator-results ul li {
      padding: .5vh 0;
      display: inline-block;
      margin-right: 5px;
    }

    .overlay .calculator-results ul li:before {
      content: '\ffed';
      margin-right: 5px;
    }

    .calculator-results {
      font-size: 12px;
    }

}


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     .hero {
       filter: blur(500px);
     }

     [data-animation="pull"] {
         transform: scale(1, 1) translateZ(0);
     }

     [data-animation="pull"].aos-animate  {
       transform: scale(1.05,1.05)  translateZ(0) rotate(0.1deg);
       transition: transform 20s;
     }

     .superhero.loaded {
       opacity: 1;
       transition: opacity 5s ease-in-out;
     }
}

@supports (-ms-ime-align:auto) {
  .hero {
    filter: blur(500px);
  }

  [data-animation="pull"] {
      transform: scale(1, 1) translateZ(0);
  }

  [data-animation="pull"].aos-animate  {
    transform: scale(1.05,1.05)  translateZ(0) rotate(0.1deg);
    transition: transform 20s;
  }

  .superhero.loaded {
    opacity: 1;
    transition: opacity 5s ease-in-out;
  }

  .pulse {
  	animation-name: none;
  }

}
/*Quirks*/

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}