/* Google font
 * */
body, input, select, button, textarea {
   font-family: "Open Sans", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
/*
   font-weight: 600;
*/
   font-weight: 700;
   font-variation-settings: "wdth" 100;
}



/* Snap behavior
 * */
html { scroll-snap-type: y mandatory; }
@supports( -moz-appearance:none ) { html { scroll-snap-type: none; } }



/* Smooth scroll iPhone workaround?
 * */
html { scroll-behavior: smooth; }



/* body, default font sizes
 * */
body {
   margin: 0;
   padding: 0;
   background: #0000cd;
   color: white;
/*
   text-shadow: -1px 1px 4px black;
*/
/*
   text-shadow: 0px 0px 15px #0000cd;
*/
   font-size: 6vw;
   letter-spacing: 1px;
}
@media( orientation: landscape ) {
   body {
      font-size: 2.75vw;
   }
}
body.locked {
   overflow: hidden;
}



/* Standardizations and Helpers
 * */
.faicon {
   width: 1em;
   height: 1em;
   vertical-align: -0.125em;
}
.hidden {
   display: none;
}
.nowrap {
   white-space: nowrap;
}



/* Loading
 * */
.svg.loading svg {
   animation: spin 700ms linear infinite;
}
.svg.loading svg path {
   fill: white;
}
@keyframes spin {
   100% {
      transform: rotate(360deg);
   }
}



/* Specific adjustments for the
 * Single-page Scrolled Content
 * */
.singlepage h2,
.singlepage h3,
.singlepage h4,
.singlepage p {
   margin: 0;
   padding: 0 2vw;
   text-align: center;
}
.singlepage h2 {
   font-size: 1.19em;
   font-weight: 700;
   text-align: justify;
}
.singlepage h3 {
   font-size: 1.2em;
   font-weight: 600;
}
.singlepage h4 {
   font-size: 1.2em;
   font-weight: 600;
}
@media( orientation: landscape ) {
   .singlepage p {
      font-size: 1.45em;
      letter-spacing: normal;
   }
   .singlepage h2 {
      font-size: 1.8em;
      width: 63%;
      margin: 0 auto;
   }
   .singlepage h3 {
      font-size: 1.8em;
      width: 63%;
      margin: 0 auto;
      font-weight: 700;
      letter-spacing: normal;
   }
}
.singlepage img,
.singlepage video {
   margin: 0;
   height: 100vh;
   display: block;
   width: 100%;
   object-fit: cover;
}

/* Card, Grouping, BG, etc.
 * */
.singlepage .card {
   position: relative;
   z-index: 5000;
   min-height: 100vh;
   box-sizing: border-box;
   scroll-snap-align: start;
/*
   align-content: center;
*/
}

.screencenter {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}
.screencenter > div {
   flex: 1;
}



/*
.singlepage .card.cttop {
   align-content: normal;
   padding-top: 1em;
}
.singlepage .card.ctbottom {
   align-content: end;
   padding-bottom: 1em;
}
*/
.singlepage .fhcontainer {
   height: 100vh;
/*
   align-content: center;
*/
   position: relative;
   pointer-events: none;
}
.singlepage .fhcontainer.stackabove {
   z-index: 6000;
}
.singlepage .group {
   position: relative;
}
.singlepage .sticky {
   position: sticky;
   position: -webkit-sticky;
   top: 0;
}
.singlepage .blue {
   color: #0000cd;
   background-color: white;
/*
   text-shadow: -1px 1px 0px white;
*/
/*
   text-shadow: 0px 0px 15px white;
*/
/*
   text-shadow: 0 0 15px white, 0 0 15px white, 0 0 15px white, 0 0 15px white;
*/
   text-shadow: 0 0 15px white;
}
/*
.singlepage .bgwhite {
   background: white;
}
*/



/* Text highlight
 * */
.hilite {
   padding: 0 8px;
   box-decoration-break: clone;
   text-shadow: none !important;
}
.hilite.white {
   color: #0000cd;
   background-color: white;
}
.hilite.white.semitrans {
   background-color: rgba(255,255,255,0.7);
}
.hilite.blue {
   color: white;
   background-color: #0000cd;
}
.hilite.blue.semitrans {
   background-color: rgba(0, 0, 205, 0.7);
}



/* Text Block
 * adjustment
 * */
.singlepage .abstop {
   position: absolute;
   top: 10%;
   width: 100%;
   box-sizing: border-box;
}
.singlepage .absbottom {
   position: absolute;
   bottom: 15vh;
   width: 100%;
   box-sizing: border-box;
}



/* BG Adjustment
 * */
.objectleft {
   object-position: left;
}

/* Cross-section
 * */
.crossection {
   background: white;
}
.crossection img {
   object-fit: contain;
}

/* Colverd Detail
 * */
.colverddetail {
   background: white;
}
.colverddetail img {
   object-fit: contain;
}



/* CTA LIST
 * */
.singlepage ul.ctalist {
   margin: .8em 0;
   padding: 0;
   list-style: none;
   font-size: .8em;
   display: flex;
   flex-direction: column;
   row-gap: 16px;
}
.singlepage ul.ctalist li {
   margin: 0;
   padding: 0;
}
.singlepage ul.ctalist a {
   display: block;
   text-align: center;
   padding: 8px 16px;
   border: 3px solid white;
   text-decoration: none;
   color: white;
   transition: 500ms;
   margin: 0 16px;
   border-radius: 50px;
}
.singlepage ul.ctalist.bgsemitrans a {
   background-color: rgba(0,0,255,.7);
}
.singlepage ul.ctalist a:hover {
   background: white;
   color: #0000cd;
   text-shadow: none;
}
@media( orientation: landscape ) {
   .singlepage ul.ctalist {
      font-size: 1.1em;
      padding: 0;
   }
   .singlepage ul.ctalist a {
      margin: 0 auto;
      width: 80%;
   }
}



/* Logo Lock
 * */
.logolock {
   position: fixed;
   z-index: 9000;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background-color: rgba(0,0,205,.65);
   opacity: 1;
   transition: 2s;
}
.logolock > span {
   font-size: 15px;
   font-weight: 300;
   line-height: 1;
/*
   text-shadow: none;
*/
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   column-gap: 8px;
   row-gap: 12px;
   transition: 500ms;
}
.logolock > span a {
   color: white;
   text-decoration: underline;
}
.logolock > span .toolong {
   flex: 0 0 100%;
   text-align: center;
}
.logolock > a {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   text-decoration: none;
   visibility: hidden;
   transition: 2s;
}
.logolock a.shown {
   visibility: visible;
}
.logolock img,
.logolock model-viewer {
   display: block;
   width: 0;
   height: 0;
   opacity: 0;
   transition: 3s;
}
.logolock a.shown img,
.logolock a.shown model-viewer {
   width: 150px;
   height: 150px;
   opacity: 1
}
.logolock a.shown img {
   animation: horizontal-flip 5s ease-in-out infinite;
}
@keyframes horizontal-flip {
   0% { transform: rotateY(0deg); }
   100% { transform: rotateY(360deg); }
}
model-viewer::part(default-progress-bar) {
   display: none;
}



/* Clipgrid
 * */
.clipgrid {
   list-style: none;
   margin: 0;
   padding: 3px;
   height: calc(100vh - 6px);
   filter: blur(0);
/*
   opacity: 0;
   transition: 2s;
*/
}
.clipgrid.shown {
/*
   opacity: 1;
*/
}
.clipgrid li {
   margin: 0;
   padding: 3px;
   float: left;
   width: calc(calc(100% / 3) - 6px);
   height: calc(calc(100% / 6) - 6px);
}
@media (orientation: landscape) {
   .clipgrid li {
      width: calc(calc(100% / 6) - 6px);
      height: calc(calc(100% / 3) - 6px);
   }
}
.clipgrid img,
.clipgrid video {
   width: 100%;
   height: 100%;
/*
   object-fit: cover;
*/
}
/*
.clipgrid img.loading {
   object-fit: none;
}
*/
.clipgrid img {
   opacity: .15;
}
.clipgrid video {
   display: none;
}



/* Tap or Scroll
 * */
.taporscroll.concealed {
   opacity: 0;
}
.taporscroll {
   font-size: .8em;
   font-weight: 500;
   position: absolute;
   top: 0;
   width: 100%;
   opacity: 1;
   transition: 2s;
   text-align: center;
}
.taporscroll > span {
   color: white;
/*
   text-shadow: -1px 1px 5px black;
*/
   position: absolute;
   bottom: 65px;
   left: 0;
   width: 100%;
   animation: bottom-floating 2s cubic-bezier(0.42, 0, 0.33, 0.56) infinite;
}
@keyframes bottom-floating {
   0% { transform: translate(0,0); }
   50% { transform: translate(0,15px); }
   100% { transform: translate(0,0); }
}
.taporscroll .svg {
   display: block;
   font-size: 2.4em;
   line-height: 1;
}
.taporscroll .svg svg {
   filter: drop-shadow(0px 0px 2px black);
}
.taporscroll .svg path {
   fill: white;
}



/* UnionDocs
 * */
.singlepage h1 {
   margin: 0;
   padding: 0 2vw;
   font-size: 1.02em;
   font-weight: 600;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: rgb(0 0 205 / 75%);
   backdrop-filter: blur(20px);
   opacity: 0;
   transition: 1s;
}
.singlepage h1.fadingworks.shown {
   opacity: 1;
}
@media( orientation: landscape ) {
   .singlepage h1 {
      font-size: 1.5em;
      line-height: 1.1;
   }
}



/* Ambitious
 * */
.singlepage .ambitious h2 {
   position: absolute;
   top: 5%;
   font-size: .8em;
   font-weight: 600;
   padding: 0px 5vw;
   text-align: center;
}
.singlepage .ambitious video,
.singlepage .ambitious img {
   object-position: left;
}
.singlepage .ambitious img {
   object-position: 27%;
}
@media( orientation: landscape ) {
   .singlepage .ambitious video,
   .singlepage .ambitious img {
      object-position: unset;
   }
   .singlepage .ambitious h2 {
      top: unset;
      width: 22%;
      right: 8vw;
      bottom: 15vh;
      padding: 0;
      font-size: .65em;
      text-align: left;
   }
}

/* Out of norm animation
 * */
.singlepage .ambitious img {
   background-color: #0000cd;
   transition: 500ms;
   opacity: 0;
}
.singlepage .ambitious img.shown {
   opacity: 1;
}
.singlepage .ambitious .stackabove {
   transition: 300ms;
}
.singlepage .ambitious .stackabove.fadeout {
   opacity: 0;
}



/* Inviting
 * */
.singlepage .inviting p {
   font-size: .9em;
   text-align: center;
   margin: 0 16px;
}
.singlepage .inviting .backstory {
   margin-top: 2vh;
   font-size: .8em;
   font-weight: 500;
   display: block;
   text-align: center;
   animation: bottom-floating 2s cubic-bezier(0.42, 0, 0.33, 0.56) infinite;
}
.singlepage .inviting .backstory svg {
   display: block;
   margin: 0 auto;
   font-size: 2.4em;
   line-height: 1;
}
.singlepage .inviting .backstory path {
   fill: white;
}
@media( orientation: landscape ) {
   .singlepage .inviting p {
      text-align: left;
      width: 80%;
      margin: 0 auto;
   }
}



/* State of the Art
 * */
.singlepage .stateoftheart h2 {
   position: absolute;
   top: 5%;
   padding: 0 32px;
   text-align: center;
}



/* Space For
 * */
.singlepage .spacefor p {
   font-size: .8em;
}
@media( orientation: landscape ) {
   .singlepage .spacefor .absbottom {
      position: absolute;
      right: 5vw;
      max-width: 50%;
      display: flex;
      flex-direction: column;
      row-gap: .2em;
   }
   .singlepage .spacefor h4 {
      font-size: 1.7em;
      font-weight: 700;
      text-align: left;
      line-height: 1.1;
/*
      position: relative;
      top: -1px;
*/
   }
   .singlepage .spacefor p {
      text-align: left;
   }
}



/* Colverd
 * */
.singlepage .colverd video {
   object-position: right;
}
@media( orientation: landscape ) {
   .singlepage .colverd video {
      object-position: left;
   }
   .singlepage .colverd h3 {
      position: absolute;
      top: 10%;
      text-align: left;
      font-size: 1.3em;
      width: 35%;
   }
}



/* Join Us
 * */
.singlepage .joinus h2 {
   font-size: .9em;
   text-align: center;
}
.singlepage .joinus ul.ctalist {
   margin-bottom: 0;
}
@media( orientation: landscape ) {
   .singlepage .joinus h2 {
      text-align: left;
      width: 80%;
   }
}



/* Reviews
 * */
.singlepage .reviews .vids {
   padding: 0 2vw 10vh;
}
.singlepage .reviews h2 {
   font-size: .8em;
   text-align: center;
   margin: 0 0 24px;
}
.singlepage .reviews figure {
   margin: 0;
   padding: 0;
   width: 100%;
   height: auto;
   aspect-ratio: 16 / 9;
   background: #f0f0f0;
}
.singlepage .reviews iframe {
   display: block;
   border: none;
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
}
@media( orientation: landscape ) {
   .singlepage .reviews .vids {
      max-width: 110vh;
      padding: 0 5vw;
      margin: 0 auto;
   }
   .singlepage .reviews h2 {
      font-size: .7em;
      text-align: left;
      width: 100%;
      padding: 0;
   }
   .singlepage .reviews figure {
      margin: 0;
      padding: 0;
   }
   .singlepage .reviews iframe {

   }
}



/* Out-of-the-norm Stylings *
 * */

/* Renovation text needs to be smaller
 * */
.singlepage .renovation .abstop,
.singlepage .renovation .absbottom {
   font-size: .8em;
}

@media( orientation: landscape ) {


   /* Doc Art Highlight
    * */
   .singlepage .docarthilite p {
      box-sizing: border-box;
      width: 70%;
      text-align: left;
      position: absolute;
      top: 5%;
      left: 5%;
      height: auto;
   }


   /* Renovation
    * */
   .singlepage .renovation h3 {
      width: 65%;
      margin: 0 auto;
      text-align: justify;
   }
   .singlepage .renovation .abstop {
/*
      font-size: .9em;
*/
      font-size: .65em;
      font-weight: 600;
      top: 8%;
      left: 10%;
      width: 45%;
      text-align: left;
   }
   .singlepage .renovation .absbottom {
/*
      font-size: .9em;
*/
      font-size: .65em;
      font-weight: 600;
/*
      bottom: 15%;
*/
      left: 7%;
      width: 45%;
      text-align: left;
   }


   /* State of the Art
    * */
   .singlepage .stateoftheart h2 {
      width: 80%;
      left: 50%;
      transform: translate(-50%, 0);
   }


   /* Colverd Detail
    * */
/*
   .singlepage .colverddetail .abstop {
      font-size: .9em;
      text-align: left;
      left: 5%;
      top: 7%;
      width: 45%;
   }
*/
}



/* NAVIGATION
 * */
nav.links {
   position: fixed;
   z-index: 8000;
   top: 0;
   right: 2vw;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   row-gap: 3vh;
   font-size: 2vh;
   font-weight: 400;
   visibility: hidden;
   opacity: 0;
   height: 0vh;
   transition: 500ms;
}
nav.links.shown {
   visibility: visible;
   opacity: 1;
   height: 100vh;

}
nav.links ul {
   margin: 0 0 7vh;
   padding: 0;
   list-style: none;
   display: flex;
   flex-direction: column;
   visibility: hidden;
}
nav.links.shown ul {
   visibility: visible;
}
@media( orientation: landscape ) {
   nav.links ul {
      margin: 0;
   }
}
nav.links li {
   margin: 0;
   padding: 1vh 0;
   position: relative;
   line-height: 1;
   cursor: pointer;
}
nav.links li span {
   position: absolute;
   right: 100%;
   top: 0;
   height: 100%;
   padding-right: 16px;
   display: flex;
   align-items: center;
   font-size: 2em;
   white-space: nowrap;
   visibility: hidden;
   opacity: 0;
   transition: 300ms;
   text-shadow: none;
}
nav.links.shown li span {
   visibility: visible;
   opacity: 1;
}


/* Trigger
 * */
nav.trigger {
   position: fixed;
   z-index: 8000;
   bottom: 5vh;
   left: 0;
   width: 0%;
   display: flex;
   column-gap: 32px;
   justify-content: center;
   align-items: center;
   line-height: 1;
   font-size: .75em;
/*
   pointer-events: none;
*/
   visibility: hidden;
   opacity: 0;
   transition: 500ms;
}
@media( orientation: landscape ) {
   nav.links {
/*
      visibility: visible;
      opacity: 1;
*/
/*
      display: flex;
*/
   }
   nav.trigger {
      visibility: hidden;
      opacity: 0;
   }
}
@media( orientation: portrait ) {
   nav.links li span {
/*
      visibility: visible;
*/
      opacity: 1;
   }
}

/* Threshold Hidden
 * */
@media( orientation: landscape ) {
   nav.links.thshown {
      visibility: visible;
      opacity: 1;
      height: 100vh;

   }
   nav.links.thshown ul {
      visibility: visible;
   }
   nav.links.thshown.labelshown li span {
      visibility: visible;
      opacity: 1;
   }
}
@media( orientation: portrait ) {
   nav.trigger.thshown {
      visibility: visible;
      opacity: 1;
      width: 100%;
   }
}



/* Buttons
 * */
nav button {
   transition: 500ms;
   border: 2px solid white;
   background: transparent;
   color: white;
   line-height: 1;
   padding: 7px 10px;
   border-radius: 40px;
   font-size: 1.25em;
   font-weight: 600;
/*
   text-shadow: -1px 1px 2px black;
*/
/*
   pointer-events: auto;
*/
   cursor: pointer;
}
nav.links li.active button {
   transition: 500ms;
   background: white;
   color: #0000cd;
}
nav button.plain {
   border: none;
   margin: 0;
   padding: 0;
   background: transparent;
   line-height: 1;
   font-size: 2em;
/*
   filter: drop-shadow(-1px 1px 2px black);
*/
}
nav.trigger button.plain {
   font-size: 1.25em;
}
nav button.plain svg {
   display: block;
}
nav button.plain path {
   transition: 500ms;
   fill: white;
}
nav .nextpage {
   transition: 500ms;
   border: 2px solid white;
   padding: 8px 16px;
   border-radius: 25px;
   background: transparent;
   color: white;
   font-size: 1em;
   font-weight: 500;
   text-decoration: none;
   line-height: 1;
/*
   pointer-events: auto;
*/
/*
   text-shadow: -1px 1px 2px black;
*/
}
nav.links .nextpage {
   writing-mode: vertical-lr;
   padding: 12px 8px;
/*
   text-shadow: 1px 1px 2px black;
*/
}
@media( min-height: 512px ) {
   nav.links {
      row-gap: 4vh;
   }
/*
   nav.links ul {
      row-gap: 3vh;
   }
*/
   nav.links li {
      margin: 0;
      padding: 1.5vh 0;
   }
}
@media( orientation: portrait ) {
   nav.links > button,
   nav.links .nextpage {
      display: none;
   }
}
@media( hover: hover ) {
   nav.links button.labeltrigger {
      display: none;
   }
}


/* Inverted
 * */
nav.inverted:not(.labelshown) button {
   color: #0000cd;
   border-color: #0000cd;
}
nav.inverted.links:not(.labelshown) li.active button {
   background: #0000cd;
   color: white;
}
nav.inverted:not(.labelshown) button.plain path {
   fill: #0000cd;
}
nav.inverted:not(.labelshown) .nextpage {
   border-color: #0000cd;
   color: #0000cd;
}


/* BG Fader
 * */
.navbg {
   position: fixed;
/*
   z-index: 8000;
*/
   z-index: 7500;
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   backdrop-filter: blur(10px);
   background-color: rgba(0,0,0,.6);
   visibility: hidden;
   opacity: 0;
   transition: 200ms;
}
.navbg.shown {
   visibility: visible;
   opacity: 1;
}