.spot-the-phish {
    background: #2F70C2;
    padding: 1rem 2rem;
    color: var(--color-inv);
    min-height: 800px;
    position: relative;
    overflow: hidden;
}
.stp-loading {
    display: flex;
    position: absolute;
    color: #fff;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: var(--color-second);
    background: #00386c;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .5s;
    z-index: 200;
}
.stp-loading.deactive {
    opacity: 0;
    transform: translateY(-100%);
}
.stp-loading h4 {
    animation: blinky 1s infinite linear;
}
@keyframes blinky {
    0% {
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
.stp-backgrounds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.stp-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    z-index: 0;
}
.stp-bg--seascape-z1 {
    background-image: url(https://www.marconet.com/hubfs/spot-the-phish/stp-bgs/seascape-z1.svg);
    z-index: 10;
}
.stp-bg--seascape-z2 {
    background-image: url(https://www.marconet.com/hubfs/spot-the-phish/stp-bgs/seascape-z2.svg);
    z-index: 20;
}
.stp-bg--seascape-z3 {
    background-image: url(https://www.marconet.com/hubfs/spot-the-phish/stp-bgs/seascape-z3.svg);
    z-index: 30;
}
.stp-bg--seascape-z4 {
    background-image: url(https://www.marconet.com/hubfs/spot-the-phish/stp-bgs/seascape-z4.svg);
    z-index: 40;
}
.stp-bg--email-line {
    background-image: url(https://www.marconet.com/hubfs/spot-the-phish/stp-bgs/email-phish-line.svg);
    z-index: 35;
    opacity: 1;
    transform: translateY(-100%);
}
.stp-bg--email-line.active {
    opacity: 1;
    transform: translateY(0);
    transition: all 3s;
}
.stp-bg--email-line.deactive {
    opacity: 0;
    transform: translateY(-100%);
    transition: all 3s;
}
.stp-bg--email2 {
    background-image: url(https://www.marconet.com/hubfs/spot-the-phish/stp-bgs/email-2.svg);
    z-index: 25;
    opacity: 0; 
}
.stp-bg--email2.active {
    opacity: 1;
    transition: all 3s;
}
.stp-bg--email2.deactive {
    opacity: 0;
    transition: all 2s;
}
.stp-bg--fish-z1 {
    background-image: url(https://www.marconet.com/hubfs/spot-the-phish/stp-bgs/fish-school-z1.svg);
    z-index: 9;
    animation: fish1z 200s infinite linear;
}
.stp-bg--fish-z2 {
    background-image: url(https://www.marconet.com/hubfs/spot-the-phish/stp-bgs/fish-school-z2.svg);
    z-index: 19;
    animation: fish2z 100s infinite linear;
}
.stp-bg--bubbles {
    background-image: url(https://www.marconet.com/hubfs/spot-the-phish/stp-bgs/bubbles.svg);
    z-index: 22;
    background-position: 0 0;
    animation: bubleup 50s infinite linear;
}
@keyframes bubleup {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-100%);
    }
    50.00001% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0%);
    }
}
@keyframes fish1z {
    0% {
        transform: translateX(0%);
    }
    50% {
        transform: translateX(-100%);
    }
    50.00001% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}
@keyframes fish2z {
    0% {
        transform: translateX(0%);
    }
    50% {
        transform: translateX(-100%);
    }
    50.00001% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}
@media (max-width: 919px) {
  .stp-bg--fish-z1 {
    background-size: contain;
    background-position: center top;
  }
  .stp-bg--fish-z2 {
    background-size: contain;
    background-position: center center;
  }
  .stp-bg--email-line {
    display: none;
  }
}
.stp h1,
.stp h2,
.stp h3,
.stp h4,
.stp h5 {
    color: var(--color-inv);
}
.stp h1 span,
.stp h2 span {
    color: var(--color-second);
}
.stp-heading {
    text-align: center;
    position: relative;
    z-index: 99;
}
.stp-heading__top-title h1 {
    font-size: 1.625rem;
    white-space: nowrap;
    margin: .5em 0;
}
.stp__question-counter {
    opacity: 0;
    transition: opacity .5s;
    text-align: center;
    position: relative;
    z-index: 99;
}
.stp__question-counter.active {
    opacity: 1;
}
.stp-panel__splash img,
.stp-panel__splash h1 {
    display: none;
}
.stp-panel__splash h1 {
    text-shadow: 0 0 1em var(--color-third);
}
.stp-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    transform: translateY(100%);
    transition: transform .5s,
    opacity .5s;
    z-index: 113;
}
.stp-panel.active {
  opacity: 1;
  transform: translateY(0);
}
.stp-panel__content {
  width: 100%;
  max-width: 66rem;
  padding: 8rem 2rem 6rem;
}
.stp-panel__question-disclaimer {
  background: rgba(0,0,0,.2);
  font-size: .875rem;
  text-align: center;
  padding: .25rem 2rem;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}
.stp-panel__questions {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 2rem;
}
.stp-panel__choice-img {
  position: relative;
  margin-bottom: 1rem;
}
.stp-panel__choice-overlay {
  background: rgba(0,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.stp-panel__choice-overlay img {
  opacity: 0;
  transform: scale(1.2);
  transition: all .3s;
}
.complete .stp-panel__choice-overlay {
  background: rgba(0,0,0,.7);
}
.chosen .stp-panel__choice-overlay img {
  opacity: 1;
  transform: scale(1);
}
.stp-panel__question .stp-panel__content .btn--stp-next-panel {
  display: none;
}
.stp-panel__question .stp-panel__content.complete .btn--stp-next-panel {
  display: inline-block;
}
.stp-panel__question .stp-panel__content.complete .btn--stp-choice {
  display: none;
}
.stp-panel__answer-content {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 2rem;
  align-items: center;
  margin-bottom: 1rem;
}
.stp-panel__answer-details {
  text-align: left;
  text-shadow: 0 1px 7px var(--color-third);
}

.stp h2.stp-results {
  font-size: 5rem;
  margin: .25em 0;
}
.stp h2.stp-results span {
  color: var(--color-second);
  font-size: 8rem;
}
.stp-form {
  text-align: left;
  max-width: 720px;
  margin: auto;
}
@media (min-width: 920px) {
  .stp-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .stp-heading__top-title h1 {
    text-align: right;
    margin: 0;
  }
  .stp-panel__splash img,
  .stp-panel__splash h1 {
    display: block;
  }
  .stp-panel__splash img {
    margin: auto;
  }
  .stp-panel {
    align-items: center;
  }
  .stp-panel__answer-content,
  .stp-panel__questions {
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
  }
}