#teaser {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  height: 100%;
  background: #0F0D0C; /* near black */
  transition: opacity 1s;
}

#album {
  position: relative;
  margin: 0 auto;
  top: 50%;
  width: 500px;
  height: 500px;
  transform: translateY(-50%);
}

@keyframes border {
  0% {
    width: 0;
    height: 0;
  }
  25% {
    width: 100%;
    height: 0;
  }
  50% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}
@keyframes borderColor {
  0% {
    border-bottom-color: #fffff4;
    border-left-color: #fffff4;
  }
  50% {
    border-bottom-color: #fffff4;
    border-left-color: #fffff4;
  }
  51% {
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  100% {
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
}
#bg-logo {
  display: block;
  position: relative;
  top: 50%;
  margin: 0 auto;
  width: 60%;
  height: auto;
  transform: translateY(-50%);
}

/* Adapted from / props to Vivus Instant (https://maxwellito.github.io/vivus-instant/) */

/* boxes */
.fXRTAPSv_0 {
  stroke-dasharray: 454 456;
  stroke-dashoffset: 455;
  animation: fXRTAPSv_draw 556ms linear 0ms forwards;
}
/* K */
.fXRTAPSv_1 {
  stroke-dasharray: 194 196;
  stroke-dashoffset: 195;
  animation: fXRTAPSv_draw 238ms linear 556ms forwards;
}
/* A */
.fXRTAPSv_2 {
  stroke-dasharray: 174 176;
  stroke-dashoffset: 175;
  animation: fXRTAPSv_draw 214ms linear 795ms forwards;
}
/* W */
.fXRTAPSv_3 {
  stroke-dasharray:269 271;
  stroke-dashoffset:270;
  animation:fXRTAPSv_draw 330ms linear 1009ms forwards;
}
/* A */
.fXRTAPSv_4 {
  stroke-dasharray: 174 176;
  stroke-dashoffset: 175;
  animation: fXRTAPSv_draw 214ms linear 1339ms forwards;
}
/* T */
.fXRTAPSv_5 {
  stroke-dasharray: 129 131;
  stroke-dashoffset: 130;
  animation: fXRTAPSv_draw 159ms linear 1553ms forwards;
}
/* S */
.fXRTAPSv_6 {
  stroke-dasharray: 165 167;
  stroke-dashoffset: 166;
  animation: fXRTAPSv_draw 203ms linear 1712ms forwards;
}
/* K */
.fXRTAPSv_7 {
  stroke-dasharray: 194 196;
  stroke-dashoffset: 195;
  animation: fXRTAPSv_draw 238ms linear 1915ms forwards;
}
/* I */
.fXRTAPSv_8 {
  stroke-dasharray: 104 106;
  stroke-dashoffset: 105;
  animation: fXRTAPSv_draw 128ms linear 2153ms forwards;
}
/* 1st A negative space */
.fXRTAPSv_9 {
  stroke-dasharray: 24 26;
  stroke-dashoffset: 25;
  animation: fXRTAPSv_draw 30ms linear 556ms forwards;
}
/* 2nd A negative space */
.fXRTAPSv_10 {
  stroke-dasharray: 24 26;
  stroke-dashoffset: 25;
  animation: fXRTAPSv_draw 30ms linear 556ms forwards;
}
/* [ N A T H A N ] */
.fXRTAPSv_11 {
  stroke-dasharray: 1148 1150;
  stroke-dashoffset: 1149;
  animation: fXRTAPSv_draw 1405ms linear 556ms forwards;
}
/* G */
.fXRTAPSv_12 {
  stroke-dasharray: 95 97;
  stroke-dashoffset: 96;
  animation: fXRTAPSv_draw 117ms linear 2200ms forwards;
}
/* R */
.fXRTAPSv_13 {
  stroke-dasharray: 93 95;
  stroke-dashoffset: 94;
  animation: fXRTAPSv_draw 114ms linear 2318ms forwards;
}
/* A */
.fXRTAPSv_14 {
  stroke-dasharray: 84 86;
  stroke-dashoffset: 85;
  animation: fXRTAPSv_draw 103ms linear 2423ms forwards;
}
/* P */
.fXRTAPSv_15 {
  stroke-dasharray: 73 75;
  stroke-dashoffset: 74;
  animation: fXRTAPSv_draw 90ms linear 2537ms forwards;
}
/* H */
.fXRTAPSv_16 {
  stroke-dasharray: 99 101;
  stroke-dashoffset: 100;
  animation: fXRTAPSv_draw 122ms linear 2627ms forwards;
}
/* I */
.fXRTAPSv_17 {
  stroke-dasharray: 50 52;
  stroke-dashoffset: 51;
  animation: fXRTAPSv_draw 62ms linear 2749ms forwards;
}
/* C */
.fXRTAPSv_18 {
  stroke-dasharray: 82 84;
  stroke-dashoffset: 83;
  animation: fXRTAPSv_draw 101ms linear 2812ms forwards;
}
/* A */
.fXRTAPSv_19 {
  stroke-dasharray: 84 86;
  stroke-dashoffset: 85;
  animation: fXRTAPSv_draw 103ms linear 2913ms forwards;
}
/* R */
.fXRTAPSv_20 {
  stroke-dasharray: 93 95;
  stroke-dashoffset: 94;
  animation: fXRTAPSv_draw 114ms linear 3017ms forwards;
}
/* T */
.fXRTAPSv_21 {
  stroke-dasharray: 63 65;
  stroke-dashoffset: 64;
  animation: fXRTAPSv_draw 78ms linear 3132ms forwards;
}
/* I */
.fXRTAPSv_22 {
  stroke-dasharray: 51 53;
  stroke-dashoffset: 52;
  animation: fXRTAPSv_draw 63ms linear 3211ms forwards;
}
/* S */
.fXRTAPSv_23 {
  stroke-dasharray: 80 82;
  stroke-dashoffset: 81;
  animation: fXRTAPSv_draw 99ms linear 3274ms forwards;
}
/* T */
.fXRTAPSv_24 {
  stroke-dasharray: 63 65;
  stroke-dashoffset: 64;
  animation: fXRTAPSv_draw 78ms linear 3373ms forwards;
}
/* pencil line drawn in animation */
@keyframes fXRTAPSv_draw  {
  100%  {
    stroke-dashoffset: 0;
  }
}
@keyframes fXRTAPSv_fade  {
  0%  {
    stroke-opacity: 1;
  }
  95.65217391304348% {
    stroke-opacity: 1;
  }
  100% {
    stroke-opacity: 0;
  }
}
/* Quick n dirty mobile hax */

@media screen and (max-width: 767px) {
  #album {
    max-width: 80%;
    height: auto;
    transform: none;
  }
}