/* Globals */

/*Fonts*/
/* proximanova-regular-webfont */
@font-face {
  font-family: proximanova-regular-webfont;
  src: url("/cdn/fc/assets/style-manager/fonts/aeb371d5-2daf-4890-85d9-b6627fdb1c59.otf") format("opentype");
}

@font-face {
  font-family: proximanova-bold-webfont;
  src: url("/cdn/fc/assets/style-manager/fonts/f42be800-0ba4-408e-8c6f-d0a2398b9ff6.otf") format("opentype");
}

@font-face {
  font-family: proximanova-semibold-webfont;
  src: url("/cdn/fc/assets/style-manager/fonts/aa6e7789-ce77-4ca2-b73a-5e061c3988d5.otf") format("opentype");
}

p.text {
  font-family: proximanova-regular-webfont;
  font-size: 16px;
}

h2.text {
  font-family: proximanova-semibold-webfont;
  font-size: 22px;
}

h2.heading.text {
  font-family: proximanova-semibold-webfont;
  font-size: 22px;
}

h2.text:active {
  outline: none;
}

h2.text:focus {
  outline: none;
}

div.box.container {
  border: 0.25px solid #FFF;
  border-radius: 5px;
}

div.alert.box {
  background: #E01021;
  font-family: proximanova-semibold-webfont;
  font-size: 16px;
  padding-top: 3%;
  padding-bottom: 3%;
}

button.button {
  background: #D14200;
  font-family: proximanova-semibold-webfont;
  border-radius: 4px;
  font-size: 14px;
}

button.button:hover {
  background: #E14700;
  outline-width: 1px !important;
}

button.button:active {
  background: #A83706;
  outline-width: 1px !important;
}

button.button:focus {
  background: #A83706;
  outline-style: dashed;
  outline-color: #242936;
  outline-width: 1px !important;
}

button.icon-button {
  height: 44px !important;
  border-radius: 4px;
}


div.navigation.box {
  margin-top: 4px;
}

.navigation p.text {
  font-size: 0.875rem;
  font-family: proximanova-regular-webfont;
}

.navigation img {
  margin-top: -2px;
  margin-bottom: -4px;
}

.navigation button.icon-button:active {
  outline: none;
}

.navigation button.icon-button:focus {
  outline-style: dashed;
  outline-color: #242936;
  outline-offset: 5px;
}

.navigation button.visual-button.icon-button {
  margin-top: 8px;
}

.navigation button.restart-button.icon-button {
  margin-top: 8px;
}

.navigation button.audio-button.icon-button {
  margin-top: 8px;
  font-family: proximanova-semibold-webfont;
}


/* Home */

div.home.box.screen {
  padding: 32px 32px 0px 32px;
}

.home img.logo {
  margin-top: 0px;
  margin-bottom: 6%;
  transform: scale(0.9);
}

.home h2.heading.text {
  font-family: proximanova-regular-webfont;
  margin-top: 0px;
  margin-bottom: 3.5%;
}

.home img.logo:active {
  outline: none;
}

.home img.logo:focus {
  outline: none;
}

.home p.embeddedSessionID {
  margin-top: 0.5%;
  font-size: 10px;
}

.home button.button {
  margin-top: 3.5%;
}

/* Progress */


div.progress.box.screen {
  padding: 32px;
}

div.progress-section-container {
  border: #EEF0F2;
  background: #EEF0F2;
}

div.progress-section-fill {
  background: #E14700;
}

.progress div.progress-section-container:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.progress div.progress-section-container:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.progress div.progress-section-fill {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}


/* Victory */

div.victory.box.screen {
  padding: 32px;
}

.victory path {
  fill: #008531;
}

.victory h2.heading.text {
  margin-bottom: 4%;
}

.victory p.text {
  margin-left: 10%;
  margin-right: 10%;
}

/* Audio game */

.audio-game.box.screen {
  padding: 32px 32px 0px 32px;
  margin-bottom:-4px;
}

h2.audio-game-alert.text {
  font-family: proximanova-semibold-webfont;
  font-size: 16px;
  margin-top: 0px;
}

.audio-game h2.heading.text {
  margin-top: 0px;
}

.audio-game p.embeddedSessionID {
  margin-top: 2px;
  font-size: 10px;
}


button.play-button {
  border: 1.5px solid #20242F;
  margin-bottom: 3%;
}

button.play-button:active {
  outline: none;
}

button.play-button:focus {
  outline-style: dashed;
  outline-color: #242936;
  outline-width: 1.5px;
}


/* Match game */

div.match-game.box.screen {
  padding: 32px 32px 0px 32px;
}

div.match-game-fail.box.screen {
  padding: 0px 0px 0px;
}

.match-game h2.text {
  font-size: 16px;
  margin-top: 0px;
  font-style: normal;
  font-weight: 400;
}

.match-game p.embeddedSessionID {
  margin-top: 2px;
  font-size: 10px;
}

.match-game-fail p.embeddedSessionID {
  margin-top: 2px;
  font-size: 10px;
}

div.match-game-fail.box.screen {
  padding: 16px 32px 0px 32px;
}

.match-game-fail div.example-container.box {
  margin-top: 0px;
  justify-content: space-between;
  transform: scale(0.9);
}

.match-game div.box.challenge-container {
  margin-top: 0px;
  justify-content: space-between;
  transform: scale(0.9);
}

h2.match-game-alert.text {
  font-family: proximanova-semibold-webfont;
  font-size: 16px;
  text-align: left;
}


.match-game-fail img.eeqjdh.key-frame-image {
  margin-right: 20px;
  margin-left: -15px;
}

.match-game-fail img {
  margin-right: 20px;
  margin-left: -15px;
}

.match-game-fail p.key-frame-text.text {
  margin-left: -15px;
}

.match-game p.key-frame-text.text {
  margin-left: -15px;
}


.match-game img.key-frame-image {
  margin-right: 20px;
  margin-left: -15px;
}



/* Tile game */

div.tile-game.box.screen {
  padding: 32px 32px 0px 32px;
}

div.tile-game-fail.box.screen {
  padding: 32px 32px 0px 32px;
}

div.tile-game-fail.box.screen {
  padding: 32px 32px 0px 32px;
}

h2.tile-game-alert.text {
  font-family: proximanova-semibold-webfont;
  font-size: 16px;
  text-align: left;
}

.tile-game h2.text {
  margin-top: 0px !important;
}

.tile-game p.embeddedSessionID {
  margin-top: 0%;
  font-size: 10px;
}

.tile-game-fail p.embeddedSessionID {
  margin-top: 0%;
  font-size: 10px;
}

@media screen and (max-width:375px) {
  .tile-game div.box.challenge-container {
    width: 299px;
    margin-left: auto;
    margin-right: auto;
    display: initial;
  }
}


.tile-game-fail div.box {
  transform: scale(0.92);
}

.tile-game-fail p.text {
  margin-top: 0px;
  margin-top: 0px;
}

.tile-game-fail button.button {
  margin-top: 0px;
}

.tile-game-fail div.example-container.box {
  margin-top: 0px;
  margin-bottom: 0px;
}

.error p.embeddedSessionID {
  margin-top: 0.5%;
  font-size: 10px;
}

div.error.box.screen {
  padding: 32px 32px 0px 32px;
}

.tile-game .challenge-instructions-container {
  margin-top:0px !important;
  margin:0px;
}


form.audio-game.box.screen {
  margin-bottom:-4px;
}

.audio-game p.text {
  margin-top:0px;
}