@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
:root {
  --empower-red: rgba(219, 24, 48, 1);
  --empower-dark-blue: rgba(0, 33, 87, 1);
  --empower-med-blue: rgba(0, 65, 133, 1);
  --empower-light-blue: rgba(86, 172, 204, 1);
  --empower-grey: rgba(140, 160, 170, 1);
  --empower-light-gray: rgba(177, 192, 201, 1);
  --empower-light-gray-2: rgba(236, 236, 236, 1);
  --empower-gold: rgba(246, 191, 22, 1);
  --empower-green: rgba(104, 173, 69, 1);
  --empower-green-alt: rgba(104, 154, 69, 1);
  --empower-orange: rgba(243, 112, 33, 1);
  --empower-orange-alt: rgba(244, 144, 48, 1);
  --empower-neutral: rgba(214, 204, 182, 1);
  --empower-violet: rgba(133, 82, 161, 1);
  --empower-teal: rgba(29, 183, 199, 1); }

body,
html {
  height: auto;
  min-height: 500px !important;
  display: flex;
  width: 100%; }

#main {
  min-height: 800px;
  height: 100vh !important; }
  @media (max-width: 768px) {
    #main {
      height: 100% !important;
      overflow: auto !important; } }

p {
  margin: 0; }

.wrapper {
  font-size: 14px;
  font-family: 'Open-sans', Arial, Helvetica;
  width: 100%;
  margin: 0 auto;
  padding: 0; }

h1,
h2,
h3,
h4,
h4,
h6 {
  font-family: 'Merriweather', 'Open-sans', sans-serif;
  color: var(--empower-light-blue); }

.hide {
  display: none !important; }

.outline {
  outline: 1px solid black; }

.outline * {
  outline: 1px solid black; }

img {
  align-self: center;
  height: auto; }

.quiz {
  width: 100%;
  height: auto;
  margin: 0 auto; }

.emp-blue {
  background-color: var(--empower-dark-blue); }

.top-colorbar {
  display: none !important; }

.content-wrapper p {
  color: var(--empower-dark-blue);
  font-family: 'Merriweather', 'Open Sans', sans-serif; }

h1 {
  font-size: 2.5vh;
  text-transform: uppercase;
  font-family: 'Open-sans', sans-serif;
  font-weight: 100;
  color: var(--empower-dark-blue);
  text-align: center; }
  @media (min-width: 768px) {
    h1 {
      text-align: start;
      font-size: 1.25rem; } }

.h1 strong {
  line-height: initial; }

@media (max-width: 768px) {
  .main-content h3.question {
    text-align: center; } }

.enter-quiz button {
  font-family: 'Open-sans', sans-serif;
  font-weight: bold;
  border-color: var(--empower-dark-blue);
  color: var(--empower-dark-blue); }
  .enter-quiz button:hover, .enter-quiz button:active {
    border-color: var(--empower-dark-blue) !important;
    background-color: var(--empower-dark-blue) !important; }

.buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; }
  .buttons button.reset {
    border-color: var(--empower-dark-blue);
    color: var(--empower-dark-blue); }
  @media (max-width: 768px) {
    .buttons button {
      width: 50% !important; } }
  @media (max-width: 768px) {
    .buttons {
      width: 100% !important; } }

button.btn:focus {
  outline: var(--empower-dark-blue);
  box-shadow: 0 0 0 0.1rem rgba(92, 93, 95, 0.5); }

button.btn.btn-red-empower {
  color: var(--white);
  background-color: var(--empower-red);
  background-image: none;
  border-color: var(--empower-red);
  font-weight: 600; }
  button.btn.btn-red-empower:hover {
    transform: scale(1.0125); }
  button.btn.btn-red-empower:focus {
    outline: var(--empower-red) !important;
    box-shadow: 0 0 0 0.1rem rgba(219, 24, 48, 0.5) !important; }
  button.btn.btn-red-empower:active {
    outline: #c5152b !important;
    background-color: #c5152b !important;
    border-color: var(--empower-red) !important; }

button#one, button#two, button.prev, button.reset {
  text-transform: uppercase;
  font-family: 'Open-sans', sans-serif;
  font-weight: bold;
  border-color: var(--empower-dark-blue);
  color: var(--empower-dark-blue);
  background-color: var(--white);
  font-size: 0.75rem; }
  button#one:hover, button#two:hover, button.prev:hover, button.reset:hover {
    border-color: var(--empower-dark-blue);
    background-color: var(--empower-dark-blue);
    color: var(--white); }

.emp-logo img {
  width: 10vw;
  max-width: 8rem;
  min-width: 6rem; }

.frame-1 {
  z-index: 1;
  width: 150px;
  position: relative;
  top: -70px; }
  @media (max-width: 768px) {
    .frame-1 {
      top: -20px; } }

.frame-2 {
  z-index: 0;
  width: 150px;
  position: relative;
  bottom: -30px; }

.question--4 .frame-1,
.question--6 .frame-1 {
  top: 70px; }
  @media (max-width: 768px) {
    .question--4 .frame-1,
    .question--6 .frame-1 {
      top: 40px; } }

.question--4 .frame-2,
.question--6 .frame-2 {
  bottom: 30px; }
  @media (max-width: 768px) {
    .question--4 .frame-2,
    .question--6 .frame-2 {
      bottom: 10px; } }

.splash-frame-1,
.splash-frame-2,
.splash-frame-3 {
  position: relative; }
  @media (max-width: 768px) {
    .splash-frame-1,
    .splash-frame-2,
    .splash-frame-3 {
      width: 16vw !important; } }
  .splash-frame-1:hover,
  .splash-frame-2:hover,
  .splash-frame-3:hover {
    animation: bounce 1s infinite cubic-bezier(1, 2, 1, -2); }

.splash-frame-1 {
  right: 3rem;
  top: -3rem; }

.splash-frame-2 {
  bottom: -4rem;
  z-index: 2; }

.splash-frame-3 {
  left: 3rem;
  top: -4rem; }

.frame-container img {
  min-width: 8rem;
  max-width: 12rem;
  width: 15vw;
  padding: 0.5rem; }
  @media (max-width: 768px) {
    .frame-container img {
      max-width: 20rem;
      width: 8rem; } }

@media (min-width: 576px) and (max-width: 992px) {
  #splash-content .frame-container img {
    min-width: 8.75rem !important; } }

#footer,
#alt-footer {
  background-color: var(--empower-light-gray-2); }
  #footer p,
  #alt-footer p {
    text-align: start !important;
    font-size: 10px; }
    @media (min-width: 768px) {
      #footer p,
      #alt-footer p {
        font-size: 8pt; } }
  #footer .emp-logo picture,
  #alt-footer .emp-logo picture {
    display: flex; }
    #footer .emp-logo picture img,
    #alt-footer .emp-logo picture img {
      width: 8vw; }
      @media (max-width: 768px) {
        #footer .emp-logo picture img,
        #alt-footer .emp-logo picture img {
          min-width: 4.5rem; } }
  #footer .social-links p,
  #alt-footer .social-links p {
    color: var(--white); }
  #footer .social-links ul,
  #alt-footer .social-links ul {
    list-style-type: none; }
    #footer .social-links ul .social-link-item img,
    #alt-footer .social-links ul .social-link-item img {
      max-width: 1.25rem; }

#splash-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 5;
  min-height: 800px;
  height: 100vh !important;
  width: auto;
  opacity: 1; }
  #splash-content #ie11-unsupported-content p {
    text-align: center !important;
    width: 100%; }
  #splash-content #ie11-unsupported-content .emp-logo img {
    width: 12vw;
    max-width: 10rem;
    min-width: 8rem; }
  #splash-content.fade-out {
    opacity: 0;
    transition: all 0.25s ease-out; }
  #splash-content .h1 {
    font-family: 'Open Sans', sans-serif;
    color: var(--empower-dark-blue);
    font-weight: 100;
    font-size: 20pt; }
    @media (max-width: 768px) {
      #splash-content .h1 {
        text-align: center;
        width: auto; } }
    @media (min-width: 768px) {
      #splash-content .h1 {
        text-align: end; } }
    @media (min-width: 768px) and (max-width: 992px) {
      #splash-content .h1 {
        width: 75%; } }
    @media (min-width: 992px) {
      #splash-content .h1 {
        width: 50%; } }
    #splash-content .h1 strong {
      font-weight: 400;
      color: var(--empower-light-blue); }
    @media (max-width: 768px) {
      #splash-content .h1 {
        font-size: 1.5em; } }
    @media (max-width: 768px) {
      #splash-content .h1 ~ p {
        width: 100%; } }
    @media (min-width: 768px) {
      #splash-content .h1 ~ p {
        width: 75%; } }
    @media (min-width: 992px) {
      #splash-content .h1 ~ p {
        width: 50%; } }
  #splash-content p {
    text-align: center; }
    @media (min-width: 768px) {
      #splash-content p {
        text-align: end; } }
  #splash-content .top-colorbar {
    position: relative;
    opacity: 1;
    background-color: var(--empower-green);
    z-index: 2;
    width: 100vw;
    height: 1rem;
    max-height: 1rem;
    display: block !important;
    margin-bottom: 5%; }
    @media (max-width: 768px) {
      #splash-content .top-colorbar {
        margin-bottom: 5px !important; } }
    #splash-content .top-colorbar + div {
      background-color: var(--white); }
      @media (min-width: 768px) {
        #splash-content .top-colorbar + div {
          height: 100% !important; } }
  #splash-content .container .content-wrapper {
    background-color: var(--white); }
    #splash-content .container .content-wrapper .enter-quiz {
      background-color: var(--white); }
      @media (max-width: 768px) {
        #splash-content .container .content-wrapper .enter-quiz .btn {
          width: auto; } }
      @media (min-width: 768px) {
        #splash-content .container .content-wrapper .enter-quiz .btn {
          width: 25%; } }
  @media (max-width: 768px) {
    #splash-content #splash-main {
      -webkit-box-flex: 1 !important;
      -ms-flex: 1 0 auto !important;
      flex: 1 0 auto !important; } }

.question {
  color: var(--white);
  font-weight: bold;
  font-size: 2.5rem;
  text-align: start; }
  @media (max-width: 768px) {
    .question {
      font-size: 3vh; } }

.question--1,
.question--3 {
  background-color: var(--empower-green-alt); }

.question--2,
.question--5 {
  background-color: var(--empower-orange-alt); }

.question--4,
.question--6 {
  background-color: var(--empower-teal); }

@media (max-width: 768px) {
  #main .quiz {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 0 auto !important;
    flex: 1 0 auto !important; }
    #main .quiz > div {
      -webkit-box-flex: 0 !important;
      -ms-flex: 0 0 auto !important;
      flex: 0 0 auto !important; } }

@media (max-width: 768px) {
  .answers #main {
    min-height: calc(100vh + 15%) !important; } }

.answers .top-colorbar {
  display: flex !important; }

.answers .title-content {
  flex-direction: column !important;
  align-items: center !important; }
  .answers .title-content h1 {
    text-transform: none; }
    .answers .title-content h1 strong {
      color: var(--empower-green-alt);
      text-transform: lowercase;
      font-style: italic;
      font-weight: 600; }
  .answers .title-content h3.answer {
    color: var(--empower-dark-blue);
    font-size: 3em; }
    @media (max-width: 768px) {
      .answers .title-content h3.answer {
        font-size: 2em; } }
  .answers .title-content picture.emp-logo {
    padding: 0.5em; }

@media (max-width: 768px) {
  .answers .quiz .frame-container {
    padding-bottom: 1em !important; } }

.answers .quiz .frame-container img {
  width: 15rem !important; }
  @media (max-width: 768px) {
    .answers .quiz .frame-container img {
      width: 10rem !important; } }

.answers .quiz .main-content {
  font-family: 'Merriweather', 'Open-sans', sans-serif;
  display: flex !important;
  flex-direction: column-reverse !important;
  color: var(--empower-dark-blue); }
  .answers .quiz .main-content .desc-details {
    font-size: 1.5em;
    font-weight: 400; }
    @media (max-width: 768px) {
      .answers .quiz .main-content .desc-details {
        text-align: center;
        font-size: 1em; } }
  .answers .quiz .main-content #find-your-way {
    font-size: 1.5em;
    font-weight: 600; }
    @media (max-width: 768px) {
      .answers .quiz .main-content #find-your-way {
        font-size: 1.25em !important; } }
  .answers .quiz .main-content .share-options ul.social {
    list-style-type: none; }
    .answers .quiz .main-content .share-options ul.social p {
      color: #727272; }
    .answers .quiz .main-content .share-options ul.social li img {
      width: 2em;
      height: auto; }
    .answers .quiz .main-content .share-options ul.social li a.mail img {
      width: 1.5em; }

.answers .quiz .results-desc .result > p {
  width: 100%; }

.answers .top-colorbar {
  position: relative;
  opacity: 1;
  background-color: var(--empower-green);
  z-index: 2;
  width: 100vw;
  height: 1rem;
  max-height: 1rem; }

.answer--1 .result,
.answer--2 .result,
.answer--3 .result {
  justify-content: flex-start; }

.answer--4 .result,
.answer--5 .result,
.answer--6 .result {
  justify-content: flex-end; }

.result {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; }
  .result .result-vid {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 75%; }
    @media (max-width: 768px) {
      .result .result-vid {
        height: 12rem !important; } }
    .result .result-vid:focus, .result .result-vid:focus-visible, .result .result-vid:focus-within {
      outline: none; }
  .result .result-pic {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; }
    .result .result-pic img {
      padding: 0; }

@keyframes bounce {
  from {
    transform: translateY(0px); }
  to {
    transform: translateY(-15px); } }

@-webkit-keyframes bounce {
  from {
    transform: translateY(0px); }
  to {
    transform: translateY(-15px); } }