/******************************************************************
Site Name: Splunk Conf 24
Stylesheet: Main Stylesheet
******************************************************************/
/*
	_colors.scss
	Define color names and values to be used throughout the project
 */
:root {
  --black: #000;
  --white: #fff;
  --splunk_pink: #ED217B;
  --splunk_orange: #F37131;
  --splunk_yellow: #FBAA19;
  --splunk_purple: #7C4E9F;
  --splunk_gray: #84848A;
  --splunk_dark_gray: #6F6F76;
}

/*
	_fonts.scss
	Use this file to import webfont files and define font-faces
*/
@font-face {
  font-family: "Splunk Data Sans Bold";
  src: url("../webfonts/splunk-data-sans-bd.woff2") format("woff2"), url("../webfonts/splunk-data-sans-bd.woff") format("woff");
}
@font-face {
  font-family: "Splunk Data Sans Pro";
  src: url("../webfonts/splunk-data-sans-pro-md.woff2") format("woff2"), url("../webfonts/splunk-data-sans-pro-md.woff") format("woff");
}
@font-face {
  font-family: "Splunk Data Sans Pro Bold";
  src: url("../webfonts/splunk-data-sans-pro-bd.woff2") format("woff2"), url("../webfonts/splunk-data-sans-pro-bd.woff") format("woff");
}
/*
	_variables.scss
	Define global CSS variables
*/
/*
	_animations.scss
	Define CSS keyframe animations
 */
.pulse {
  animation: pulse 0.35s infinite ease-in-out alternate;
}

@keyframes pulse {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1.05);
  }
}
.bounce {
  animation: bounce 2s ease infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-12px);
  }
  60% {
    transform: translateY(-6px);
  }
}
.bounce-small {
  animation: bouncesmall 2s ease infinite;
}

@keyframes bouncesmall {
  70% {
    transform: translateY(0%);
  }
  80% {
    transform: translateY(-15%);
  }
  90% {
    transform: translateY(0%);
  }
  95% {
    transform: translateY(-7%);
  }
  97% {
    transform: translateY(0%);
  }
  99% {
    transform: translateY(-3%);
  }
  100% {
    transform: translateY(0);
  }
}
.gelatine {
  animation: gelatine 1s infinite;
}

@keyframes gelatine {
  from, to {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}
.scale-full {
  animation: scalefull 0.24s ease-in-out forwards;
}

.scale-full-med {
  animation: scalefull 0.5s ease-in-out forwards;
}

@keyframes scalefull {
  0% {
    transform: scale(0, 0);
  }
  100% {
    transform: scale(1, 1);
  }
}
.swing {
  transform-origin: top center;
  animation: swing 2s ease infinite;
}

@keyframes swing {
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.wobble {
  animation: wobble 2s ease infinite;
}

@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}
/*
	_reset.scss
	Reset browser defaults for easier styling
	https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html, body {
  height: 100%;
}

html {
  scroll-behavior: smooth;
  --scroll-behavior: smooth;
}

body {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

#root, #__next {
  isolation: isolate;
}

/*
	_typography.scss
	Define universal font styles and sizes
*/
body {
  font-size: 1em;
  font-family: "Splunk Data Sans Pro", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

strong {
  font-family: "Splunk Data Sans Pro Bold", Arial, sans-serif;
}

h2 {
  font-size: 2.25rem;
  color: var(--black);
}

h3 {
  font-size: 1.5rem;
  color: var(--black);
}
@media (min-width: 85.375rem) {
  h3 {
    font-size: 1.875rem;
  }
}
@media (min-width: 120rem) {
  h3 {
    font-size: 2.25rem;
  }
}

ul {
  width: 100%;
  margin-left: 13px;
  margin-bottom: 13px;
  padding: 0;
}
ul.small-margin {
  margin-bottom: 7px;
}
@media (min-width: 85.375rem) {
  ul {
    margin-left: 17px;
    margin-bottom: 17px;
  }
  ul.small-margin {
    margin-bottom: 8px;
  }
}
@media (min-width: 120rem) {
  ul {
    margin-left: 24px;
    margin-bottom: 24px;
  }
  ul.small-margin {
    margin-bottom: 12px;
  }
}

li {
  font-size: 0.8125rem;
  color: var(--black);
  margin-bottom: 10px;
}
li.small-margin {
  margin-bottom: 5px;
}
@media (min-width: 85.375rem) {
  li {
    font-size: 1.0625rem;
    margin-bottom: 14px;
  }
  li.small-margin {
    margin-bottom: 7px;
  }
}
@media (min-width: 120rem) {
  li {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }
  li.small-margin {
    margin-bottom: 10px;
  }
}

p {
  width: 100%;
  font-size: 0.875rem;
  color: var(--black);
  margin-bottom: 13px;
}
p.smaller {
  font-size: 0.8125rem;
}
p.small-margin {
  margin-bottom: 7px;
}
p.double-margin {
  margin-bottom: 24px;
}
@media (min-width: 85.375rem) {
  p {
    font-size: 1.25rem;
    margin-bottom: 17px;
  }
  p.smaller {
    font-size: 1.0625rem;
  }
  p.small-margin {
    margin-bottom: 8px;
  }
  p.double-margin {
    margin-bottom: 34px;
  }
}
@media (min-width: 120rem) {
  p {
    font-size: 1.75rem;
    margin-bottom: 24px;
  }
  p.smaller {
    font-size: 1.5rem;
  }
  p.small-margin {
    margin-bottom: 12px;
  }
  p.double-margin {
    margin-bottom: 48px;
  }
}
p a {
  color: var(--splunk_pink);
}
p.thumbnail, p.vidthumb {
  display: flex;
  justify-content: center;
  gap: 16px;
}
p.thumbnail span:first-of-type, p.vidthumb span:first-of-type {
  width: 30%;
}
p.thumbnail span:last-of-type, p.vidthumb span:last-of-type {
  width: 70%;
}
p.thumbnail img, p.vidthumb img {
  margin-top: 6px;
  cursor: pointer;
}
@media (min-width: 85.375rem) {
  p.thumbnail, p.vidthumb {
    gap: 20px;
  }
  p.thumbnail img, p.vidthumb img {
    margin-top: 8px;
  }
}
@media (min-width: 120rem) {
  p.thumbnail, p.vidthumb {
    gap: 30px;
  }
  p.thumbnail img, p.vidthumb img {
    margin-top: 12px;
  }
}

/*
	_global.scss
	Define global CSS for universal elements
*/
html {
  background-color: var(--black);
  color: var(--white);
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: var(--black);
  color: var(--white);
}

main#splunkApp {
  position: relative;
  width: 100%;
  max-width: 1024px;
  aspect-ratio: 16/9;
  overflow: hidden;
}
@media (min-width: 85.375rem) {
  main#splunkApp {
    max-width: 1366px;
  }
}
@media (min-width: 120rem) {
  main#splunkApp {
    max-width: 1920px;
  }
}

section {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
}

div.screen {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

video.transition-video {
  position: relative;
  z-index: 100;
}

#hudBar, #mapHUD {
  position: absolute;
  top: 12px;
  right: 0;
  left: 0;
  display: none;
  justify-content: space-between;
  align-items: center;
  width: 428px;
  height: 40px;
  margin: 0 auto;
}
#hudBar .spacer, #mapHUD .spacer {
  width: 1px;
  height: 18px;
  background-color: var(--white);
}
@media (min-width: 85.375rem) {
  #hudBar, #mapHUD {
    top: 16px;
    width: 566px;
    height: 58px;
  }
  #hudBar .spacer, #mapHUD .spacer {
    width: 1px;
    height: 24px;
  }
}
@media (min-width: 120rem) {
  #hudBar, #mapHUD {
    top: 24px;
    width: 794px;
    height: 80px;
  }
  #hudBar .spacer, #mapHUD .spacer {
    width: 2px;
    height: 36px;
  }
}

#hudLock {
  display: none;
  position: absolute;
  top: 0;
  z-index: 2000;
  left: 0;
  right: 0;
  width: 440px;
  height: 60px;
  background-color: transparent;
  margin: 0 auto;
}
@media (min-width: 85.375rem) {
  #hudLock {
    width: 580px;
    height: 80px;
  }
}
@media (min-width: 120rem) {
  #hudLock {
    width: 800px;
    height: 110px;
  }
}

#loadingMsg {
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--black);
  font-size: 1.5rem;
  padding-top: 80px;
}
#loadingMsg > img {
  width: 260px;
  height: 260px;
}
@media (min-width: 85.375rem) {
  #loadingMsg {
    padding-top: 112px;
  }
  #loadingMsg > img {
    width: 364px;
    height: 364px;
  }
}
@media (min-width: 120rem) {
  #loadingMsg {
    padding-top: 160px;
  }
  #loadingMsg > img {
    width: 520px;
    height: 520px;
  }
}

#progress-wrap {
  position: relative;
  width: 260px;
  padding-top: 24px;
}

#progress {
  height: 6px;
  background: var(--splunk_pink);
  position: absolute;
  width: 0; /* will be increased by JS */
  top: 50%;
}

#progstat {
  font-size: 1rem;
  position: absolute;
  top: 50%;
  margin-top: 12px;
  width: 100%;
  text-align: center;
  color: #fff;
}

@media (min-width: 85.375rem) {
  #progress-wrap {
    width: 364px;
    padding-top: 34px;
  }
  #progress {
    height: 8px;
  }
  #progstat {
    font-size: 1.375rem;
    margin-top: 34px;
  }
}
@media (min-width: 120rem) {
  #progress-wrap {
    width: 520px;
    padding-top: 48px;
  }
  #progress {
    height: 12px;
  }
  #progstat {
    font-size: 2rem;
    margin-top: 24px;
  }
}
button.hud-icon {
  position: absolute;
  top: 344px;
  left: 448px;
  z-index: -1;
  width: 130px;
  height: 130px;
  padding: 0;
  border: none;
  border-radius: 71px;
  transition: all 1s ease-out;
  cursor: pointer;
}
button.hud-icon.active {
  z-index: 2000;
  width: 20px;
  height: 20px;
  border-radius: 2px;
}
button.hud-icon.level-1 {
  top: 22px;
  left: 491px;
}
button.hud-icon.level-2 {
  top: 22px;
  left: 557px;
}
button.hud-icon.level-3 {
  top: 22px;
  left: 622px;
}
button.hud-icon.level-4 {
  top: 22px;
  left: 688px;
}
@media (min-width: 85.375rem) {
  button.hud-icon {
    top: 461px;
    left: 600px;
    width: 174px;
    height: 174px;
    border-radius: 96px;
  }
  button.hud-icon.active {
    width: 26px;
    height: 26px;
    border-radius: 3px;
  }
  button.hud-icon.level-1 {
    top: 32px;
    left: 652px;
  }
  button.hud-icon.level-2 {
    top: 32px;
    left: 740px;
  }
  button.hud-icon.level-3 {
    top: 32px;
    left: 827px;
  }
  button.hud-icon.level-4 {
    top: 32px;
    left: 915px;
  }
}
@media (min-width: 120rem) {
  button.hud-icon {
    top: 649px;
    left: 845px;
    width: 245px;
    height: 245px;
    border-radius: 134px;
  }
  button.hud-icon.active {
    width: 37px;
    height: 36px;
    border-radius: 4px;
  }
  button.hud-icon.level-1 {
    top: 45px;
    left: 916px;
  }
  button.hud-icon.level-2 {
    top: 45px;
    left: 1039px;
  }
  button.hud-icon.level-3 {
    top: 45px;
    left: 1162px;
  }
  button.hud-icon.level-4 {
    top: 45px;
    left: 1284px;
  }
}

#srReturnButton {
  background: url("../images/button-sr-return-button.png") no-repeat center center;
  background-size: contain;
}

#ilReturnButton {
  background: url("../images/button-il-return-button.png") no-repeat center center;
  background-size: contain;
}

#caReturnButton {
  background: url("../images/button-ca-return-button.png") no-repeat center center;
  background-size: contain;
}

#egReturnButton {
  background: url("../images/button-eg-return-button.png") no-repeat center center;
  background-size: contain;
}

#hudBar {
  z-index: 1000;
}

#progressBar, #progressBarHUD {
  width: 296px;
  height: 44px;
  background: url("../images/bg-progress-0.png") no-repeat center center;
  background-size: contain;
}
#progressBar.level-1, #progressBarHUD.level-1 {
  background: url("../images/bg-progress-1.png") no-repeat center center;
  background-size: contain;
}
#progressBar.level-2, #progressBarHUD.level-2 {
  background: url("../images/bg-progress-2.png") no-repeat center center;
  background-size: contain;
}
#progressBar.level-3, #progressBarHUD.level-3 {
  background: url("../images/bg-progress-3.png") no-repeat center center;
  background-size: contain;
}
#progressBar.level-4, #progressBarHUD.level-4 {
  background: url("../images/bg-progress-4.png") no-repeat center center;
  background-size: contain;
}
#progressBar.active, #progressBarHUD.active {
  background: url("../images/bg-progress-active.png") no-repeat center center;
  background-size: contain;
}
@media (min-width: 85.375rem) {
  #progressBar, #progressBarHUD {
    width: 395px;
    height: 58px;
  }
}
@media (min-width: 120rem) {
  #progressBar, #progressBarHUD {
    width: 555px;
    height: 80px;
  }
}

#arrowHUD {
  position: absolute;
  bottom: -60px;
  left: 264px;
  width: 42px;
  height: 56px;
}
#arrowHUD.progress {
  left: 34px;
}
@media (min-width: 85.375rem) {
  #arrowHUD {
    bottom: -84px;
    left: 344px;
    width: 56px;
    height: 75px;
  }
  #arrowHUD.progress {
    left: 48px;
  }
}
@media (min-width: 120rem) {
  #arrowHUD {
    bottom: -120px;
    left: 484px;
    width: 78px;
    height: 102px;
  }
  #arrowHUD.progress {
    left: 70px;
  }
}

img.thumbnail-arrow {
  position: absolute;
  top: 55px;
  left: -40px;
  width: 60px;
  z-index: 1;
}
img.thumbnail-arrow.cloud {
  top: 30px;
}
img.thumbnail-arrow.explore {
  top: 120px;
}
@media (min-width: 85.375rem) {
  img.thumbnail-arrow {
    top: 50px;
    left: -50px;
    width: 80px;
  }
  img.thumbnail-arrow.tech {
    top: 70px;
  }
  img.thumbnail-arrow.explore {
    top: 160px;
  }
}
@media (min-width: 120rem) {
  img.thumbnail-arrow {
    top: 65px;
    left: -75px;
    width: 120px;
  }
  img.thumbnail-arrow.tech {
    top: 95px;
  }
  img.thumbnail-arrow.cloud {
    top: 40px;
  }
  img.thumbnail-arrow.explore {
    top: 220px;
  }
}

.modal, .vidmodal {
  position: absolute;
  top: 138px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
  width: 508px;
  padding-top: 25px;
}
.modal.square, .vidmodal.square {
  top: 30px;
}
.modal.large, .vidmodal.large {
  top: 80px;
  width: 800px;
}
.modal::backdrop, .vidmodal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
@media (min-width: 85.375rem) {
  .modal, .vidmodal {
    top: 185px;
    width: 682px;
    padding-top: 34px;
  }
  .modal.square, .vidmodal.square {
    top: 40px;
  }
  .modal.large, .vidmodal.large {
    top: 100px;
    width: 1080px;
  }
}
@media (min-width: 120rem) {
  .modal, .vidmodal {
    top: 260px;
    width: 960px;
    padding-top: 48px;
  }
  .modal.square, .vidmodal.square {
    top: 40px;
  }
  .modal.large, .vidmodal.large {
    top: 140px;
    width: 1320px;
  }
}

img.icon {
  width: 80px;
  height: 80px;
}
@media (min-width: 85.375rem) {
  img.icon {
    width: 106px;
    height: 106px;
  }
}
@media (min-width: 120rem) {
  img.icon {
    width: 150px;
    height: 150px;
  }
}

/*
	_buttons.scss
	Define button styles and sizes
*/
button:not(.map):not(.hud):not(.close) {
  background: linear-gradient(90deg, rgb(251, 170, 25) 5%, rgb(243, 113, 49) 40%, rgb(237, 33, 123) 85%);
  font-family: "Splunk Data Sans Pro Bold", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--white);
  padding: 12px 30px;
  border: none;
  border-radius: 4px;
  box-shadow: -3px 3px 5px 0px rgba(0, 0, 0, 0.25);
  outline: 0;
  cursor: pointer;
}
button:not(.map):not(.hud):not(.close).small {
  font-size: 0.875rem;
}
button:not(.map):not(.hud):not(.close):disabled {
  cursor: default;
}
button:not(.map):not(.hud):not(.close) span {
  position: relative;
  z-index: 1;
  display: block;
  line-height: 1;
}
button:not(.map):not(.hud):not(.close).text {
  display: inline-flex;
  background: transparent;
  font-size: 0.625rem;
  color: var(--splunk_pink);
  padding: 6px 12px;
  border: solid 1px var(--splunk_pink);
}
@media (min-width: 85.375rem) {
  button:not(.map):not(.hud):not(.close) {
    font-size: 1.5625rem;
    padding: 16px 42px;
    border-radius: 6px;
    box-shadow: -4px 4px 7px 0px rgba(0, 0, 0, 0.25);
    border-width: 2px;
  }
  button:not(.map):not(.hud):not(.close).small {
    font-size: 1.25rem;
  }
  button:not(.map):not(.hud):not(.close).text {
    font-size: 0.875rem;
    padding: 8px 16px;
  }
}
@media (min-width: 120rem) {
  button:not(.map):not(.hud):not(.close) {
    font-size: 2.25rem;
    padding: 24px 60px;
    border-radius: 8px;
    box-shadow: -6px 6px 10px 0px rgba(0, 0, 0, 0.25);
  }
  button:not(.map):not(.hud):not(.close).small {
    font-size: 1.75rem;
  }
  button:not(.map):not(.hud):not(.close).text {
    font-size: 1.25rem;
    padding: 12px 24px;
    border-width: 3px;
  }
}

button.map {
  background: transparent;
  border: none;
  outline: 0;
  cursor: pointer;
}
button.map:disabled {
  cursor: default;
}

button.close {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--black);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  cursor: pointer;
}
@media (min-width: 85.375rem) {
  button.close {
    width: 34px;
    height: 34px;
    font-size: 1.875rem;
  }
}
@media (min-width: 120rem) {
  button.close {
    width: 48px;
    height: 48px;
    font-size: 2.25rem;
  }
}

#mapButton {
  width: 112px;
  height: 44px;
  background: url("../images/button-map-default.png") no-repeat center center;
  background-size: contain;
  border: none;
  outline: 0;
  padding: 0;
  cursor: pointer;
}
#mapButton:hover, #mapButton:focus, #mapButton:active, #mapButton:disabled {
  width: 112px;
  height: 44px;
  background: url("../images/button-map-active.png") no-repeat center center;
  background-size: contain;
}
@media (min-width: 85.375rem) {
  #mapButton {
    width: 150px;
    height: 58px;
  }
  #mapButton:hover, #mapButton:focus, #mapButton:active, #mapButton:disabled {
    width: 150px;
    height: 58px;
  }
}
@media (min-width: 120rem) {
  #mapButton {
    width: 210px;
    height: 80px;
  }
  #mapButton:hover, #mapButton:focus, #mapButton:active, #mapButton:disabled {
    width: 210px;
    height: 80px;
  }
}

#mapButtonHUD {
  width: 112px;
  height: 44px;
  background: url("../images/button-map-active.png") no-repeat center center;
  background-size: contain;
  border: none;
  outline: 0;
  padding: 0;
}
#mapButtonHUD.off {
  background: url("../images/button-map-default.png") no-repeat center center;
  background-size: contain;
}
@media (min-width: 85.375rem) {
  #mapButtonHUD {
    width: 150px;
    height: 58px;
  }
}
@media (min-width: 120rem) {
  #mapButtonHUD {
    width: 210px;
    height: 80px;
  }
}

/*
	_intro.scss
	Define styles for Intro Section
*/
#startScreen > div {
  position: absolute;
  left: 224px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  width: 256px;
  height: 100%;
}
@media (min-width: 85.375rem) {
  #startScreen > div {
    left: 300px;
    gap: 36px;
    width: 330px;
  }
}
@media (min-width: 120rem) {
  #startScreen > div {
    left: 420px;
    gap: 48px;
    width: 470px;
  }
}

#infoScreen > div {
  position: absolute;
  top: 80px;
  left: 475px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 364px;
  height: 356px;
  padding: 30px;
}
#infoScreen > div#introText2 {
  justify-content: flex-start;
}
#infoScreen > div button + button {
  margin-top: 13px;
}
#infoScreen > div button.text {
  position: absolute;
  bottom: 30px;
}
@media (min-width: 85.375rem) {
  #infoScreen > div {
    top: 106px;
    left: 634px;
    width: 486px;
    height: 476px;
    padding: 42px;
  }
  #infoScreen > div button + button {
    margin-top: 17px;
  }
  #infoScreen > div button.text {
    bottom: 42px;
  }
}
@media (min-width: 120rem) {
  #infoScreen > div {
    top: 148px;
    left: 892px;
    width: 682px;
    height: 671px;
    padding: 60px;
  }
  #infoScreen > div button + button {
    margin-top: 24px;
  }
  #infoScreen > div button.text {
    bottom: 60px;
  }
}

/*
	_mapsection.scss
	Define styles for map Section
*/
#mapSection {
  z-index: 1;
}

#mapInfoScreen > div:not(#mapHUD) {
  position: absolute;
  top: 122px;
  left: 475px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 364px;
  height: 356px;
  padding: 30px;
}
#mapInfoScreen > div:not(#mapHUD) button.text {
  position: absolute;
  bottom: 30px;
}
@media (min-width: 85.375rem) {
  #mapInfoScreen > div:not(#mapHUD) {
    top: 162px;
    left: 634px;
    width: 486px;
    height: 476px;
    padding: 42px;
  }
  #mapInfoScreen > div:not(#mapHUD) button.text {
    bottom: 42px;
  }
}
@media (min-width: 120rem) {
  #mapInfoScreen > div:not(#mapHUD) {
    top: 228px;
    left: 892px;
    width: 682px;
    height: 671px;
    padding: 60px;
  }
  #mapInfoScreen > div:not(#mapHUD) button.text {
    bottom: 60px;
  }
}

#egButton {
  position: absolute;
  top: 111.83px;
  left: 184.97px;
  width: 254.4px;
  height: 131.44px;
  background: url("../images/button-eg-default.png") no-repeat center center;
  background-size: contain;
  padding: 0;
}
#egButton:hover, #egButton:active, #egButton:focus, #egButton.complete {
  width: 254.4px;
  height: 131.44px;
  background: url("../images/button-eg-active.png") no-repeat center center;
  background-size: contain;
}
#egButton.complete {
  background: url("../images/button-eg-complete.png") no-repeat center center;
  background-size: contain;
}
#egButton:disabled {
  background: url("../images/button-eg-default.png") no-repeat center center;
  background-size: contain;
  opacity: 0.5;
}
@media (min-width: 85.375rem) {
  #egButton {
    top: 149.81px;
    left: 247.79px;
    width: 340.8px;
    height: 176.08px;
  }
  #egButton:hover, #egButton:active, #egButton:focus, #egButton.complete {
    width: 340.8px;
    height: 176.08px;
  }
}
@media (min-width: 120rem) {
  #egButton {
    top: 211px;
    left: 349px;
    width: 480px;
    height: 248px;
  }
  #egButton:hover, #egButton:active, #egButton:focus, #egButton.complete {
    width: 480px;
    height: 248px;
  }
}

#caButton {
  position: absolute;
  bottom: 177.02px;
  left: 134.62px;
  width: 283.55px;
  height: 129.85px;
  background: url("../images/button-ca-default.png") no-repeat center top;
  background-size: contain;
  padding: 0;
}
#caButton:hover, #caButton:active, #caButton:focus, #caButton.complete {
  width: 283.55px;
  height: 129.85px;
  background: url("../images/button-ca-active.png") no-repeat center top;
  background-size: contain;
}
#caButton.complete {
  background: url("../images/button-ca-complete.png") no-repeat center top;
  background-size: contain;
}
#caButton:disabled {
  background: url("../images/button-ca-default.png") no-repeat center top;
  background-size: contain;
  opacity: 0.5;
}
@media (min-width: 85.375rem) {
  #caButton {
    bottom: 237.14px;
    left: 180.34px;
    width: 379.85px;
    height: 173.95px;
  }
  #caButton:hover, #caButton:active, #caButton:focus, #caButton.complete {
    width: 379.85px;
    height: 173.95px;
  }
}
@media (min-width: 120rem) {
  #caButton {
    bottom: 334px;
    left: 254px;
    width: 535px;
    height: 245px;
  }
  #caButton:hover, #caButton:active, #caButton:focus, #caButton.complete {
    width: 535px;
    height: 245px;
  }
}

#ilButton {
  position: absolute;
  top: 93.81px;
  right: 157.94px;
  width: 344.5px;
  height: 154.76px;
  background: url("../images/button-il-default.png") no-repeat center top;
  background-size: contain;
  padding: 0;
}
#ilButton:hover, #ilButton:active, #ilButton:focus, #ilButton.complete {
  width: 344.5px;
  height: 154.76px;
  background: url("../images/button-il-active.png") no-repeat center top;
  background-size: contain;
}
#ilButton.complete {
  background: url("../images/button-il-complete.png") no-repeat center top;
  background-size: contain;
}
#ilButton:disabled {
  background: url("../images/button-il-default.png") no-repeat center top;
  background-size: contain;
  opacity: 0.5;
}
@media (min-width: 85.375rem) {
  #ilButton {
    top: 125.67px;
    right: 211.58px;
    width: 461.5px;
    height: 207.32px;
  }
  #ilButton:hover, #ilButton:active, #ilButton:focus, #ilButton.complete {
    width: 461.5px;
    height: 207.32px;
  }
}
@media (min-width: 120rem) {
  #ilButton {
    top: 177px;
    right: 298px;
    width: 650px;
    height: 292px;
  }
  #ilButton:hover, #ilButton:active, #ilButton:focus, #ilButton.complete {
    width: 650px;
    height: 292px;
  }
}

#srButton {
  position: absolute;
  bottom: 166.95px;
  right: 141.51px;
  width: 287.26px;
  height: 136.74px;
  background: url("../images/button-sr-default.png") no-repeat center top;
  background-size: contain;
  padding: 0;
}
#srButton:hover, #srButton:active, #srButton:focus, #srButton.complete {
  width: 287.26px;
  height: 136.74px;
  background: url("../images/button-sr-active.png") no-repeat center top;
  background-size: contain;
}
#srButton.complete {
  background: url("../images/button-sr-complete.png") no-repeat center top;
  background-size: contain;
}
#srButton:disabled {
  background: url("../images/button-sr-default.png") no-repeat center top;
  background-size: contain;
  opacity: 0.5;
}
@media (min-width: 85.375rem) {
  #srButton {
    bottom: 223.65px;
    right: 189.57px;
    width: 384.82px;
    height: 183.18px;
  }
  #srButton:hover, #srButton:active, #srButton:focus, #srButton.complete {
    width: 384.82px;
    height: 183.18px;
  }
}
@media (min-width: 120rem) {
  #srButton {
    bottom: 315px;
    right: 267px;
    width: 542px;
    height: 258px;
  }
  #srButton:hover, #srButton:active, #srButton:focus, #srButton.complete {
    width: 542px;
    height: 258px;
  }
}

#outroButton {
  width: 254px;
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin: 0 auto;
}
@media (min-width: 85.375rem) {
  #outroButton {
    width: 340px;
  }
}
@media (min-width: 120rem) {
  #outroButton {
    width: 480px;
  }
}

/*
	_egsection.scss
	Define styles for Expert Guidance Section
*/
#egIntroScreen > div {
  position: absolute;
  top: 80px;
  left: 475px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 364px;
  height: 356px;
  padding: 30px;
}
#egIntroScreen > div .button-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
@media (min-width: 85.375rem) {
  #egIntroScreen > div {
    top: 106px;
    left: 634px;
    width: 486px;
    height: 476px;
    padding: 42px;
  }
  #egIntroScreen > div .button-wrap {
    gap: 34px;
  }
}
@media (min-width: 120rem) {
  #egIntroScreen > div {
    top: 149px;
    left: 892px;
    width: 682px;
    height: 671px;
    padding: 60px;
  }
  #egIntroScreen > div .button-wrap {
    gap: 48px;
  }
}

#egSupportButton {
  position: absolute;
  top: 104px;
  left: 294px;
  width: 104px;
  height: 134px;
  background: url("../images/button-eg-support-default.png") no-repeat center center;
  background-size: contain;
  padding: 0;
}
#egSupportButton:hover, #egSupportButton:focus, #egSupportButton:active, #egSupportButton.complete {
  width: 104px;
  height: 134px;
  background: url("../images/button-eg-support-active.png") no-repeat center center;
  background-size: contain;
}
#egSupportButton:disabled {
  background: url("../images/button-eg-support-default.png") no-repeat center center;
  background-size: contain;
  opacity: 0.5;
}
@media (min-width: 85.375rem) {
  #egSupportButton {
    top: 139px;
    left: 392px;
    width: 139px;
    height: 179px;
  }
  #egSupportButton:hover, #egSupportButton:focus, #egSupportButton:active, #egSupportButton.complete {
    width: 139px;
    height: 179px;
  }
}
@media (min-width: 120rem) {
  #egSupportButton {
    top: 196px;
    left: 550px;
    width: 196px;
    height: 252px;
  }
  #egSupportButton:hover, #egSupportButton:focus, #egSupportButton:active, #egSupportButton.complete {
    width: 196px;
    height: 252px;
  }
}

#egSupportScreen h3,
#egSuccessScreen h3 {
  position: absolute;
  top: 151px;
  left: 341px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 438px;
  height: 46px;
  margin: 0;
  padding: 0 30px;
}
@media (min-width: 85.375rem) {
  #egSupportScreen h3,
  #egSuccessScreen h3 {
    top: 201px;
    left: 456px;
    width: 583px;
    height: 61px;
    padding: 0 42px;
  }
}
@media (min-width: 120rem) {
  #egSupportScreen h3,
  #egSuccessScreen h3 {
    top: 282px;
    left: 640px;
    width: 820px;
    height: 87px;
    padding: 0 60px;
  }
}

#egSupportScreen > div,
#egSuccessScreen > div {
  position: absolute;
  top: 201px;
  left: 341px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 438px;
  height: 243px;
  padding: 30px;
}
#egSupportScreen > div .button-wrap,
#egSuccessScreen > div .button-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 24px;
}
#egSupportScreen > div .button-wrap ul,
#egSuccessScreen > div .button-wrap ul {
  margin-bottom: 0;
}
#egSupportScreen > div .button-wrap ul li:last-of-type,
#egSuccessScreen > div .button-wrap ul li:last-of-type {
  margin-bottom: 0;
}
#egSupportScreen > div .button-wrap button,
#egSuccessScreen > div .button-wrap button {
  flex: 1 0 auto;
}
@media (min-width: 85.375rem) {
  #egSupportScreen > div,
  #egSuccessScreen > div {
    top: 269px;
    left: 456px;
    width: 583px;
    height: 323px;
    padding: 42px;
  }
  #egSupportScreen > div .button-wrap,
  #egSuccessScreen > div .button-wrap {
    gap: 34px;
  }
}
@media (min-width: 120rem) {
  #egSupportScreen > div,
  #egSuccessScreen > div {
    top: 378px;
    left: 640px;
    width: 820px;
    height: 454px;
    padding: 60px;
  }
  #egSupportScreen > div .button-wrap,
  #egSuccessScreen > div .button-wrap {
    gap: 48px;
  }
}

#egSuccessButton {
  position: absolute;
  top: 265px;
  left: 154px;
  width: 130px;
  height: 135px;
  background: url("../images/button-eg-success-default.png") no-repeat center center;
  background-size: contain;
  padding: 0;
}
#egSuccessButton:hover, #egSuccessButton:focus, #egSuccessButton:active, #egSuccessButton.complete {
  width: 130px;
  height: 135px;
  background: url("../images/button-eg-success-active.png") no-repeat center center;
  background-size: contain;
}
#egSuccessButton:disabled {
  background: url("../images/button-eg-success-default.png") no-repeat center center;
  background-size: contain;
  opacity: 0.5;
}
@media (min-width: 85.375rem) {
  #egSuccessButton {
    top: 353px;
    left: 205px;
    width: 175px;
    height: 180px;
  }
  #egSuccessButton:hover, #egSuccessButton:focus, #egSuccessButton:active, #egSuccessButton.complete {
    width: 175px;
    height: 180px;
  }
}
@media (min-width: 120rem) {
  #egSuccessButton {
    top: 494px;
    left: 287px;
    width: 246px;
    height: 254px;
  }
  #egSuccessButton:hover, #egSuccessButton:focus, #egSuccessButton:active, #egSuccessButton.complete {
    width: 246px;
    height: 254px;
  }
}

#egServicesButton {
  position: absolute;
  top: 144px;
  right: 115px;
  width: 182px;
  height: 139px;
  background: url("../images/button-eg-services-default.png") no-repeat center center;
  background-size: contain;
  padding: 0;
}
#egServicesButton:hover, #egServicesButton:focus, #egServicesButton:active, #egServicesButton.complete {
  width: 182px;
  height: 139px;
  background: url("../images/button-eg-services-active.png") no-repeat center center;
  background-size: contain;
}
#egServicesButton:disabled {
  background: url("../images/button-eg-services-default.png") no-repeat center center;
  background-size: contain;
  opacity: 0.5;
}
@media (min-width: 85.375rem) {
  #egServicesButton {
    top: 191px;
    right: 153px;
    width: 243px;
    height: 186px;
  }
  #egServicesButton:hover, #egServicesButton:focus, #egServicesButton:active, #egServicesButton.complete {
    width: 243px;
    height: 186px;
  }
}
@media (min-width: 120rem) {
  #egServicesButton {
    top: 268px;
    right: 214px;
    width: 342px;
    height: 262px;
  }
  #egServicesButton:hover, #egServicesButton:focus, #egServicesButton:active, #egServicesButton.complete {
    width: 342px;
    height: 262px;
  }
}

#egServicesScreen h3 {
  position: absolute;
  top: 151px;
  left: 212px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 438px;
  height: 46px;
  margin: 0;
  padding: 0 30px;
}
@media (min-width: 85.375rem) {
  #egServicesScreen h3 {
    top: 201px;
    left: 284px;
    width: 583px;
    height: 61px;
    padding: 0 42px;
  }
}
@media (min-width: 120rem) {
  #egServicesScreen h3 {
    top: 282px;
    left: 398px;
    width: 820px;
    height: 87px;
    padding: 0 60px;
  }
}

#egServicesScreen > div {
  position: absolute;
  top: 201px;
  left: 212px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 438px;
  height: 243px;
  padding: 30px;
}
#egServicesScreen > div .button-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 24px;
}
#egServicesScreen > div .button-wrap ul {
  margin-bottom: 0;
}
#egServicesScreen > div .button-wrap ul li:last-of-type {
  margin-bottom: 0;
}
#egServicesScreen > div .button-wrap button {
  flex: 1 0 auto;
}
@media (min-width: 85.375rem) {
  #egServicesScreen > div {
    top: 269px;
    left: 284px;
    width: 583px;
    height: 323px;
    padding: 42px;
  }
  #egServicesScreen > div .button-wrap {
    gap: 34px;
  }
}
@media (min-width: 120rem) {
  #egServicesScreen > div {
    top: 378px;
    left: 398px;
    width: 820px;
    height: 454px;
    padding: 60px;
  }
  #egServicesScreen > div .button-wrap {
    gap: 48px;
  }
}

#egMessageScreen > div {
  position: absolute;
  top: 123px;
  left: 475px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 364px;
  height: 356px;
  padding: 30px;
}
#egMessageScreen > div img {
  margin-bottom: 12px;
}
@media (min-width: 85.375rem) {
  #egMessageScreen > div {
    top: 164px;
    left: 634px;
    width: 486px;
    height: 476px;
    padding: 42px;
  }
  #egMessageScreen > div img {
    margin-bottom: 18px;
  }
}
@media (min-width: 120rem) {
  #egMessageScreen > div {
    top: 228px;
    left: 892px;
    width: 682px;
    height: 671px;
    padding: 60px;
  }
  #egMessageScreen > div img {
    margin-bottom: 24px;
  }
}

#egCompleteScreen > div {
  position: absolute;
  bottom: 83px;
  left: 0;
  right: 0;
  width: 436px;
  text-align: right;
  margin: 0 auto;
}
@media (min-width: 85.375rem) {
  #egCompleteScreen > div {
    bottom: 110px;
    width: 584px;
  }
}
@media (min-width: 120rem) {
  #egCompleteScreen > div {
    bottom: 156px;
    width: 822px;
  }
}

/*
	_egsection.scss
	Define styles for Expert Guidance Section
*/
#caIntroScreen > div {
  position: absolute;
  top: 122px;
  left: 475px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 364px;
  height: 356px;
  padding: 30px;
}
#caIntroScreen > div button.text {
  position: absolute;
  bottom: 30px;
}
@media (min-width: 85.375rem) {
  #caIntroScreen > div {
    top: 162px;
    left: 634px;
    width: 486px;
    height: 476px;
    padding: 42px;
  }
  #caIntroScreen > div button.text {
    bottom: 42px;
  }
}
@media (min-width: 120rem) {
  #caIntroScreen > div {
    top: 228px;
    left: 892px;
    width: 682px;
    height: 671px;
    padding: 60px;
  }
  #caIntroScreen > div button.text {
    bottom: 60px;
  }
}

#caMigrationScreen h3,
#caAdoptionScreen h3,
#caDocsScreen h3 {
  position: absolute;
  top: 151px;
  left: 293px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 438px;
  height: 46px;
  margin: 0;
  padding: 0 30px;
}
@media (min-width: 85.375rem) {
  #caMigrationScreen h3,
  #caAdoptionScreen h3,
  #caDocsScreen h3 {
    top: 201px;
    left: 392px;
    width: 583px;
    height: 61px;
    padding: 0 42px;
  }
}
@media (min-width: 120rem) {
  #caMigrationScreen h3,
  #caAdoptionScreen h3,
  #caDocsScreen h3 {
    top: 282px;
    left: 552px;
    width: 820px;
    height: 87px;
    padding: 0 60px;
  }
}

#caMigrationScreen > div,
#caAdoptionScreen > div,
#caDocsScreen > div {
  position: absolute;
  top: 201px;
  left: 293px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 438px;
  height: 243px;
  padding: 30px;
}
@media (min-width: 85.375rem) {
  #caMigrationScreen > div,
  #caAdoptionScreen > div,
  #caDocsScreen > div {
    top: 269px;
    left: 392px;
    width: 583px;
    height: 323px;
    padding: 42px;
  }
}
@media (min-width: 120rem) {
  #caMigrationScreen > div,
  #caAdoptionScreen > div,
  #caDocsScreen > div {
    top: 378px;
    left: 551px;
    width: 820px;
    height: 454px;
    padding: 60px;
  }
}

#caMigrationButton {
  position: absolute;
  bottom: 74px;
  left: 426px;
  width: 148px;
  height: 85px;
  background: url("../images/button-ca-migration-button-default.png") no-repeat center center;
  background-size: contain;
  padding: 0;
}
#caMigrationButton:hover, #caMigrationButton:focus, #caMigrationButton:active, #caMigrationButton.complete {
  width: 148px;
  height: 85px;
  background: url("../images/button-ca-migration-button-active.png") no-repeat center center;
  background-size: contain;
}
#caMigrationButton:disabled {
  background: url("../images/button-ca-migration-button-default.png") no-repeat center center;
  background-size: contain;
  opacity: 0.5;
}
@media (min-width: 85.375rem) {
  #caMigrationButton {
    bottom: 98px;
    left: 568px;
    width: 198px;
    height: 114px;
  }
  #caMigrationButton:hover, #caMigrationButton:focus, #caMigrationButton:active, #caMigrationButton.complete {
    width: 198px;
    height: 114px;
  }
}
@media (min-width: 120rem) {
  #caMigrationButton {
    bottom: 138px;
    left: 798px;
    width: 279px;
    height: 160px;
  }
  #caMigrationButton:hover, #caMigrationButton:focus, #caMigrationButton:active, #caMigrationButton.complete {
    width: 279px;
    height: 160px;
  }
}

#caAdoptionButton {
  position: absolute;
  top: 260px;
  left: 278px;
  width: 115px;
  height: 80px;
  background: url("../images/button-ca-adoption-button-default.png") no-repeat center center;
  background-size: contain;
  padding: 0;
}
#caAdoptionButton:hover, #caAdoptionButton:focus, #caAdoptionButton:active, #caAdoptionButton.complete {
  width: 115px;
  height: 80px;
  background: url("../images/button-ca-adoption-button-active.png") no-repeat center center;
  background-size: contain;
}
#caAdoptionButton:disabled {
  background: url("../images/button-ca-adoption-button-default.png") no-repeat center center;
  background-size: contain;
  opacity: 0.5;
}
@media (min-width: 85.375rem) {
  #caAdoptionButton {
    top: 347px;
    left: 370px;
    width: 154px;
    height: 106px;
  }
  #caAdoptionButton:hover, #caAdoptionButton:focus, #caAdoptionButton:active, #caAdoptionButton.complete {
    width: 154px;
    height: 106px;
  }
}
@media (min-width: 120rem) {
  #caAdoptionButton {
    top: 487px;
    left: 521px;
    width: 216px;
    height: 150px;
  }
  #caAdoptionButton:hover, #caAdoptionButton:focus, #caAdoptionButton:active, #caAdoptionButton.complete {
    width: 216px;
    height: 150px;
  }
}

#caDocsButton {
  position: absolute;
  top: 275px;
  right: 224px;
  width: 134px;
  height: 105px;
  background: url("../images/button-ca-docs-button-default.png") no-repeat center center;
  background-size: contain;
  padding: 0;
}
#caDocsButton:hover, #caDocsButton:focus, #caDocsButton:active, #caDocsButton.complete {
  width: 134px;
  height: 105px;
  background: url("../images/button-ca-docs-button-active.png") no-repeat center center;
  background-size: contain;
}
#caDocsButton:disabled {
  background: url("../images/button-ca-docs-button-default.png") no-repeat center center;
  background-size: contain;
  opacity: 0.5;
}
@media (min-width: 85.375rem) {
  #caDocsButton {
    top: 367px;
    right: 299px;
    width: 180px;
    height: 140px;
  }
  #caDocsButton:hover, #caDocsButton:focus, #caDocsButton:active, #caDocsButton.complete {
    width: 180px;
    height: 140px;
  }
}
@media (min-width: 120rem) {
  #caDocsButton {
    top: 516px;
    right: 421px;
    width: 253px;
    height: 197px;
  }
  #caDocsButton:hover, #caDocsButton:focus, #caDocsButton:active, #caDocsButton.complete {
    width: 253px;
    height: 197px;
  }
}

#caCompleteScreen > div {
  position: absolute;
  bottom: 83px;
  left: 0;
  right: 0;
  width: 436px;
  text-align: right;
  margin: 0 auto;
}
@media (min-width: 85.375rem) {
  #caCompleteScreen > div {
    bottom: 110px;
    width: 584px;
  }
}
@media (min-width: 120rem) {
  #caCompleteScreen > div {
    bottom: 156px;
    width: 822px;
  }
}

/*
	_ilsection.scss
	Define styles for Expert Guidance Section
*/
#ilIntroScreen > div {
  position: absolute;
  top: 122px;
  left: 475px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 364px;
  height: 356px;
  padding: 30px;
}
#ilIntroScreen > div button.text {
  position: absolute;
  bottom: 30px;
}
@media (min-width: 85.375rem) {
  #ilIntroScreen > div {
    top: 162px;
    left: 634px;
    width: 486px;
    height: 476px;
    padding: 42px;
  }
  #ilIntroScreen > div button.text {
    bottom: 42px;
  }
}
@media (min-width: 120rem) {
  #ilIntroScreen > div {
    top: 228px;
    left: 892px;
    width: 682px;
    height: 671px;
    padding: 60px;
  }
  #ilIntroScreen > div button.text {
    bottom: 60px;
  }
}

#ilOfficeButton {
  position: absolute;
  top: 129px;
  left: 415px;
  width: 195px;
  height: 162px;
  background: url("../images/button-il-office-default.png") no-repeat center center;
  background-size: contain;
  padding: 0;
}
#ilOfficeButton:hover, #ilOfficeButton:focus, #ilOfficeButton:active, #ilOfficeButton.complete {
  width: 195px;
  height: 162px;
  background: url("../images/button-il-office-active.png") no-repeat center center;
  background-size: contain;
}
#ilOfficeButton:disabled {
  background: url("../images/button-il-office-default.png") no-repeat center center;
  background-size: contain;
  opacity: 0.5;
}
@media (min-width: 85.375rem) {
  #ilOfficeButton {
    top: 171px;
    left: 552px;
    width: 261px;
    height: 217px;
  }
  #ilOfficeButton:hover, #ilOfficeButton:focus, #ilOfficeButton:active, #ilOfficeButton.complete {
    width: 261px;
    height: 217px;
  }
}
@media (min-width: 120rem) {
  #ilOfficeButton {
    top: 241px;
    left: 777px;
    width: 367px;
    height: 305px;
  }
  #ilOfficeButton:hover, #ilOfficeButton:focus, #ilOfficeButton:active, #ilOfficeButton.complete {
    width: 367px;
    height: 305px;
  }
}

#ilOfficeScreen h3,
#ilTechScreen h3,
#ilShareScreen h3 {
  position: absolute;
  top: 151px;
  left: 293px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 438px;
  height: 46px;
  margin: 0;
  padding: 0 30px;
}
@media (min-width: 85.375rem) {
  #ilOfficeScreen h3,
  #ilTechScreen h3,
  #ilShareScreen h3 {
    top: 201px;
    left: 392px;
    width: 583px;
    height: 61px;
    padding: 0 42px;
  }
}
@media (min-width: 120rem) {
  #ilOfficeScreen h3,
  #ilTechScreen h3,
  #ilShareScreen h3 {
    top: 282px;
    left: 552px;
    width: 820px;
    height: 87px;
    padding: 0 60px;
  }
}

#ilOfficeScreen > div,
#ilTechScreen > div,
#ilShareScreen > div {
  position: absolute;
  top: 201px;
  left: 293px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 438px;
  height: 243px;
  padding: 30px;
}
#ilOfficeScreen > div button + button,
#ilTechScreen > div button + button,
#ilShareScreen > div button + button {
  margin-top: 13px;
}
@media (min-width: 85.375rem) {
  #ilOfficeScreen > div,
  #ilTechScreen > div,
  #ilShareScreen > div {
    top: 269px;
    left: 392px;
    width: 583px;
    height: 323px;
    padding: 42px;
  }
  #ilOfficeScreen > div button + button,
  #ilTechScreen > div button + button,
  #ilShareScreen > div button + button {
    margin-top: 17px;
  }
}
@media (min-width: 120rem) {
  #ilOfficeScreen > div,
  #ilTechScreen > div,
  #ilShareScreen > div {
    top: 378px;
    left: 551px;
    width: 820px;
    height: 454px;
    padding: 60px;
  }
  #ilOfficeScreen > div button + button,
  #ilTechScreen > div button + button,
  #ilShareScreen > div button + button {
    margin-top: 24px;
  }
}

#ilTechButton {
  position: absolute;
  top: 155px;
  left: 182px;
  width: 194px;
  height: 148px;
  background: url("../images/button-il-tech-default.png") no-repeat center center;
  background-size: contain;
  padding: 0;
}
#ilTechButton:hover, #ilTechButton:focus, #ilTechButton:active, #ilTechButton.complete {
  width: 194px;
  height: 148px;
  background: url("../images/button-il-tech-active.png") no-repeat center center;
  background-size: contain;
}
#ilTechButton:disabled {
  background: url("../images/button-il-tech-default.png") no-repeat center center;
  background-size: contain;
  opacity: 0.5;
}
@media (min-width: 85.375rem) {
  #ilTechButton {
    top: 206px;
    left: 242px;
    width: 260px;
    height: 199px;
  }
  #ilTechButton:hover, #ilTechButton:focus, #ilTechButton:active, #ilTechButton.complete {
    width: 260px;
    height: 199px;
  }
}
@media (min-width: 120rem) {
  #ilTechButton {
    top: 290px;
    left: 340px;
    width: 366px;
    height: 280px;
  }
  #ilTechButton:hover, #ilTechButton:focus, #ilTechButton:active, #ilTechButton.complete {
    width: 366px;
    height: 280px;
  }
}

#ilShareButton {
  position: absolute;
  top: 150px;
  right: 181px;
  width: 195px;
  height: 153px;
  background: url("../images/button-il-share-default.png") no-repeat center center;
  background-size: contain;
  padding: 0;
}
#ilShareButton:hover, #ilShareButton:focus, #ilShareButton:active, #ilShareButton.complete {
  width: 195px;
  height: 153px;
  background: url("../images/button-il-share-active.png") no-repeat center center;
  background-size: contain;
}
#ilShareButton:disabled {
  background: url("../images/button-il-share-default.png") no-repeat center center;
  background-size: contain;
  opacity: 0.5;
}
@media (min-width: 85.375rem) {
  #ilShareButton {
    top: 199px;
    right: 242px;
    width: 260px;
    height: 205px;
  }
  #ilShareButton:hover, #ilShareButton:focus, #ilShareButton:active, #ilShareButton.complete {
    width: 260px;
    height: 205px;
  }
}
@media (min-width: 120rem) {
  #ilShareButton {
    top: 280px;
    right: 340px;
    width: 367px;
    height: 289px;
  }
  #ilShareButton:hover, #ilShareButton:focus, #ilShareButton:active, #ilShareButton.complete {
    width: 367px;
    height: 289px;
  }
}

#ilMessageScreen > div {
  position: absolute;
  top: 80px;
  left: 475px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 364px;
  height: 356px;
  padding: 30px;
}
#ilMessageScreen > div img {
  margin-bottom: 12px;
}
@media (min-width: 85.375rem) {
  #ilMessageScreen > div {
    top: 106px;
    left: 634px;
    width: 486px;
    height: 476px;
    padding: 42px;
  }
  #ilMessageScreen > div img {
    margin-bottom: 18px;
  }
}
@media (min-width: 120rem) {
  #ilMessageScreen > div {
    top: 148px;
    left: 892px;
    width: 682px;
    height: 671px;
    padding: 60px;
  }
  #ilMessageScreen > div img {
    margin-bottom: 24px;
  }
}

#ilCompleteScreen > div {
  position: absolute;
  bottom: 83px;
  left: 0;
  right: 0;
  width: 436px;
  text-align: right;
  margin: 0 auto;
}
@media (min-width: 85.375rem) {
  #ilCompleteScreen > div {
    bottom: 110px;
    width: 584px;
  }
}
@media (min-width: 120rem) {
  #ilCompleteScreen > div {
    bottom: 156px;
    width: 822px;
  }
}

/*
	_srsection.scss
	Define styles for Expert Guidance Section
*/
#srIntroScreen > div {
  position: absolute;
  top: 122px;
  left: 475px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 364px;
  height: 356px;
  padding: 30px;
}
#srIntroScreen > div button.text {
  position: absolute;
  bottom: 30px;
}
@media (min-width: 85.375rem) {
  #srIntroScreen > div {
    top: 162px;
    left: 634px;
    width: 486px;
    height: 476px;
    padding: 42px;
  }
  #srIntroScreen > div button.text {
    bottom: 42px;
  }
}
@media (min-width: 120rem) {
  #srIntroScreen > div {
    top: 228px;
    left: 892px;
    width: 682px;
    height: 671px;
    padding: 60px;
  }
  #srIntroScreen > div button.text {
    bottom: 60px;
  }
}

#srBaseScreen h3,
#srLanternScreen h3,
#srEssentialsScreen h3 {
  position: absolute;
  top: 151px;
  left: 293px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 438px;
  height: 46px;
  margin: 0;
  padding: 0 30px;
}
@media (min-width: 85.375rem) {
  #srBaseScreen h3,
  #srLanternScreen h3,
  #srEssentialsScreen h3 {
    top: 201px;
    left: 392px;
    width: 583px;
    height: 61px;
    padding: 0 42px;
  }
}
@media (min-width: 120rem) {
  #srBaseScreen h3,
  #srLanternScreen h3,
  #srEssentialsScreen h3 {
    top: 282px;
    left: 552px;
    width: 820px;
    height: 87px;
    padding: 0 60px;
  }
}

#srBaseScreen > div,
#srLanternScreen > div,
#srEssentialsScreen > div {
  position: absolute;
  top: 201px;
  left: 293px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 438px;
  height: 243px;
  padding: 30px;
}
#srBaseScreen > div button + button,
#srLanternScreen > div button + button,
#srEssentialsScreen > div button + button {
  margin-top: 13px;
}
@media (min-width: 85.375rem) {
  #srBaseScreen > div,
  #srLanternScreen > div,
  #srEssentialsScreen > div {
    top: 269px;
    left: 392px;
    width: 583px;
    height: 323px;
    padding: 42px;
  }
  #srBaseScreen > div button + button,
  #srLanternScreen > div button + button,
  #srEssentialsScreen > div button + button {
    margin-top: 17px;
  }
}
@media (min-width: 120rem) {
  #srBaseScreen > div,
  #srLanternScreen > div,
  #srEssentialsScreen > div {
    top: 378px;
    left: 551px;
    width: 820px;
    height: 454px;
    padding: 60px;
  }
  #srBaseScreen > div button + button,
  #srLanternScreen > div button + button,
  #srEssentialsScreen > div button + button {
    margin-top: 24px;
  }
}

#srLanternButton {
  position: absolute;
  top: 138px;
  left: 441px;
  width: 208px;
  height: 154px;
  background: url("../images/button-sr-lantern-default.png") no-repeat center center;
  background-size: contain;
  padding: 0;
}
#srLanternButton:hover, #srLanternButton:focus, #srLanternButton:active, #srLanternButton.complete {
  width: 208px;
  height: 154px;
  background: url("../images/button-sr-lantern-active.png") no-repeat center center;
  background-size: contain;
}
#srLanternButton:disabled {
  background: url("../images/button-sr-lantern-default.png") no-repeat center center;
  background-size: contain;
  opacity: 0.5;
}
@media (min-width: 85.375rem) {
  #srLanternButton {
    top: 183px;
    left: 586px;
    width: 282px;
    height: 208px;
  }
  #srLanternButton:hover, #srLanternButton:focus, #srLanternButton:active, #srLanternButton.complete {
    width: 282px;
    height: 208px;
  }
}
@media (min-width: 120rem) {
  #srLanternButton {
    top: 258px;
    left: 824px;
    width: 396px;
    height: 292px;
  }
  #srLanternButton:hover, #srLanternButton:focus, #srLanternButton:active, #srLanternButton.complete {
    width: 396px;
    height: 292px;
  }
}

#srEssentialsButton {
  position: absolute;
  top: 107px;
  right: 101px;
  width: 252px;
  height: 208px;
  background: url("../images/button-sr-essentials-default.png") no-repeat center center;
  background-size: contain;
  padding: 0;
}
#srEssentialsButton:hover, #srEssentialsButton:focus, #srEssentialsButton:active, #srEssentialsButton.complete {
  width: 252px;
  height: 208px;
  background: url("../images/button-sr-essentials-active.png") no-repeat center center;
  background-size: contain;
}
#srEssentialsButton:disabled {
  background: url("../images/button-sr-essentials-default.png") no-repeat center center;
  background-size: contain;
  opacity: 0.5;
}
@media (min-width: 85.375rem) {
  #srEssentialsButton {
    top: 144px;
    right: 135px;
    width: 338px;
    height: 278px;
  }
  #srEssentialsButton:hover, #srEssentialsButton:focus, #srEssentialsButton:active, #srEssentialsButton.complete {
    width: 338px;
    height: 278px;
  }
}
@media (min-width: 120rem) {
  #srEssentialsButton {
    top: 201px;
    right: 189px;
    width: 476px;
    height: 392px;
  }
  #srEssentialsButton:hover, #srEssentialsButton:focus, #srEssentialsButton:active, #srEssentialsButton.complete {
    width: 476px;
    height: 392px;
  }
}

#srBaseButton {
  position: absolute;
  top: 287px;
  left: 330px;
  width: 175px;
  height: 122px;
  background: url("../images/button-sr-base-default.png") no-repeat center center;
  background-size: contain;
  padding: 0;
}
#srBaseButton:hover, #srBaseButton:focus, #srBaseButton:active, #srBaseButton.complete {
  width: 175px;
  height: 122px;
  background: url("../images/button-sr-base-active.png") no-repeat center center;
  background-size: contain;
}
#srBaseButton:disabled {
  background: url("../images/button-sr-base-default.png") no-repeat center center;
  background-size: contain;
  opacity: 0.5;
}
@media (min-width: 85.375rem) {
  #srBaseButton {
    top: 382px;
    left: 440px;
    width: 234px;
    height: 164px;
  }
  #srBaseButton:hover, #srBaseButton:focus, #srBaseButton:active, #srBaseButton.complete {
    width: 234px;
    height: 164px;
  }
}
@media (min-width: 120rem) {
  #srBaseButton {
    top: 537px;
    left: 618px;
    width: 330px;
    height: 230px;
  }
  #srBaseButton:hover, #srBaseButton:focus, #srBaseButton:active, #srBaseButton.complete {
    width: 330px;
    height: 230px;
  }
}

#srMessageScreen > div {
  position: absolute;
  top: 80px;
  left: 475px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 364px;
  height: 356px;
  padding: 30px;
}
#srMessageScreen > div img {
  margin-bottom: 12px;
}
#srMessageScreen > div button + button {
  margin-top: 1em;
}
@media (min-width: 85.375rem) {
  #srMessageScreen > div {
    top: 106px;
    left: 634px;
    width: 486px;
    height: 476px;
    padding: 42px;
  }
  #srMessageScreen > div img {
    margin-bottom: 18px;
  }
}
@media (min-width: 120rem) {
  #srMessageScreen > div {
    top: 148px;
    left: 892px;
    width: 682px;
    height: 671px;
    padding: 60px;
  }
  #srMessageScreen > div img {
    margin-bottom: 24px;
  }
}

#srCompleteScreen > div {
  position: absolute;
  bottom: 83px;
  left: 0;
  right: 0;
  width: 436px;
  text-align: right;
  margin: 0 auto;
}
@media (min-width: 85.375rem) {
  #srCompleteScreen > div {
    bottom: 110px;
    width: 584px;
  }
}
@media (min-width: 120rem) {
  #srCompleteScreen > div {
    bottom: 156px;
    width: 822px;
  }
}

/*
	_outrosection.scss
	Define styles for Expert Guidance Section
*/
#outroSection {
  z-index: 2;
}

#outroScreen > #outroHeadline {
  position: absolute;
  top: 106px;
  left: 100px;
  display: block;
  background-color: rgba(0, 0, 0, 0.8);
  width: 472px;
  margin: 0;
  padding: 13px;
  border-radius: 13px;
}
#outroScreen > #outroHeadline img {
  display: block;
  margin: 4px auto;
  transform: scale(0, 0);
}
#outroScreen > #outroHeadline img#animateHeadline2 {
  width: 70%;
}
@media (min-width: 85.375rem) {
  #outroScreen > #outroHeadline {
    top: 142px;
    left: 150px;
    width: 629px;
    margin: 6px auto;
    padding: 17px;
    border-radius: 17px;
  }
}
@media (min-width: 120rem) {
  #outroScreen > #outroHeadline {
    top: 200px;
    left: 200px;
    width: 884px;
    margin: 8px auto;
    padding: 24px;
    border-radius: 24px;
  }
}
#outroScreen > #outroMessage {
  position: absolute;
  top: 196px;
  left: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 535px;
  height: 308px;
  background: url("../images/bg-outro-window.png") no-repeat center center;
  background-size: cover;
  padding: 48px;
}
#outroScreen > #outroMessage p {
  font-size: 1.125rem;
  text-align: center;
}
@media (min-width: 85.375rem) {
  #outroScreen > #outroMessage {
    top: 260px;
    left: 100px;
    width: 717px;
    height: 413px;
  }
  #outroScreen > #outroMessage p {
    font-size: 1.5rem;
    text-align: center;
  }
}
@media (min-width: 120rem) {
  #outroScreen > #outroMessage {
    top: 366px;
    left: 140px;
    width: 1010px;
    height: 582px;
  }
  #outroScreen > #outroMessage p {
    font-size: 2.25rem;
    text-align: center;
  }
}