@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fira400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fira600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body { font-family:'Fira Sans'; color:#888; text-align:center; letter-spacing:0.2em; text-transform:uppercase; width:100%; padding:0px; margin:0px; }
#logo { margin-top:2em; margin-bottom:3.14em; max-width:90%;}


#logocard p { font-size:90%;
  max-width: 30ch;
  text-align: center;
  transform: scale(0.84);
  animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}
@keyframes scale {
  100% {
    transform: scale(1);
  }
}

#logocard p span {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
  padding:0.1em;
  margin-right:0.3em; 
}

#logocard span:nth-child(1) {
  animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#logocard span:nth-child(2) {
  animation: fade-in 1.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#logocard span:nth-child(3) {
  animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#logocard span:nth-child(4) {
  animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#logocard span:nth-child(5) {
  animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#logocard span:nth-child(6) {
  animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#logocard span:nth-child(7) {
  animation: fade-in 0.4s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#logocard span:nth-child(8) {
  animation: fade-in 1.8s 2.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#logocard span:nth-child(9) {
  animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#logocard span:nth-child(10) {
  animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#logocard span:nth-child(11) {
  animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#logocard span:nth-child(12) {
  animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#logocard span:nth-child(13) {
  animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#logocard span:nth-child(14) {
  animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#logocard span:nth-child(15) {
  animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#logocard span:nth-child(16) {
  animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#logocard span:nth-child(17) {
  animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

#logocard span:nth-child(18) {
  animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}



.orange { color:#f57317; transform: rotate(-3.14deg); }
.highlight { color:#111; }

a { color:#999; text-decoration:none; }
#footer { display:block; position:absolute; font-size:60%; padding-left:0px; padding-right:0px; width:100%;  text-align:center; bottom:1em; color:#AAA; margin:0 auto; background:rgba(255,255,255,0.9);}
#header { display:block; position:absolute; font-size:60%; padding-left:0px; padding-right:0px; width:100%;  text-align:center; top:2em; color:#AAA; margin:0 auto; background:rgba(255,255,255,0.9);}
#footer span { padding-left:1em; padding-right:1em; }


.lab-alignment
{
    display: flex;

    height: calc(100vh - 6em); 

    justify-content: center;
    align-items: center;
}

.card
{
    perspective: 1000px;
    cursor: pointer;
}
.card--flipped .card__inner,
.card--flipped .card__inner,
.card--flipped .card__inner
{
    transform: rotateY(180deg);
}

.card,
.card__inner
{
    position: relative;

    width: 300px;
    height: 320px;
}

.card__inner
{
    transition: transform .25s ease-in-out;
    transform-origin: 50% 50%;

    transform-style: preserve-3d;
}

.card__back
{
    transform: rotateY(180deg);
}

.card__front,
.card__back
{
    position: absolute;
    top: 0;
    left: 0;

    display: flex;

    width: 100%;
    height: 100%;

    color: #888;
    background-color: #fff;

    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
}


.card p { text-transform:none; letter-spacing:0px; padding:3em;  }
.greymark { color:#333; }
.orangemark { color:#f4730e; }

.infotext { text-align:left; padding:3em; text-transform:none; width:70%; margin:0px; font-size:100%; letter-spacing:0px; }

.card__back { border-radius: 1em 1em 0px 5em;  }
.card__front { border-radius: 1em 1em 5em 0px; }

.card__back, .card__front {  border:1px solid #EEE; 

    display: flex;
    width: 100%;
    height: 100%;
    padding-top:3em; 
    padding-bottom:3em; 
    color: #888;
    background-color: #FAFAFA;

    justify-content: center;
    align-items: center;
    backface-visibility: hidden;

background: #EDEDED;
background: -webkit-radial-gradient(top right, #EDEDED, #FFFFFF);
background: -moz-radial-gradient(top right, #EDEDED, #FFFFFF);
background: radial-gradient(to bottom left, #EDEDED, #FFFFFF);


}

.ccard:hover .card__inner,
.ccard:active .card__inner,
.ccard:focus .card__inner
{
    transform: rotateY(180deg);
}