* {
  margin-left: 0em;
  margin-top: 0em;
  margin-right: 0em;
  margin-bottom: 0em;
}
html, body {
  background-color: #bfbfbf;
}
.visually-hidden {
	/*http://developer.yahoo.com/blogs/ydn/posts/2012/10/clip-your-hidden-content-for-better-accessibility/*/
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0 !important;
	border: 0 !important;
	z-index: -1000;
	/*filter:alpha(opacity=0); /* that one we could drop,  we're really taking about one single pixel after all */
    /*opacity:0; /* we make that single box transparent */
}
#application_wrapper:focus,
#application:focus,
#main_content_wrapper:focus,
#content_wrapper:focus {
  /* outline: 1px solid pink !important; */
  outline: thin dotted black;
}

#application_wrapper {
  position: relative;
  /* min-width: 1024px; */
  min-width: 820px;
  max-width: 1349px;
  margin: 0 auto;
}

#top_band {
  width: 100%;
  position: relative;
  z-index: 2;
  background-color: #009fe6;
}

.topband_bg.sprite_interface.topband_waves_big {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  z-index: -1;
}

#top_band_top {
  width: 100%;
  /* background-color: #FFF; */
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  padding: 0px 0px;
}

.topband-left {
  float: left;
  padding: 5px 10px;
}

.topband-middle {
  font-size: initial;
  position: absolute;
  top: 20px;
  left: 130px;
  width: calc(100% - 400px);
  overflow: hidden;
  color: #015caf;
  text-align: center;
  /* background-color: red; */
}

.topband-middle>h1 {
  margin: 0px;
  padding: 0px;
  line-height: 85%;
  text-align: center;
  display: inline-block;
  position: relative;
}

.topband-right {
  padding: 0px 55px;
  float: right;
}

.topband-right>* {
  vertical-align: middle;
  margin-right: 8px;
}

.topband-right>*:last-child {
  margin-right: 0px;
}

.topband-right>.score_base,
.topband-right>.close {
  margin-bottom: 20px;
}

#title > .level_1 {
  font-family: "Fredoka-Bold";
  font-size: 30px;
  text-transform: uppercase;
  color: #015caf;
}

#score {
  font-family: "Fredoka-Semibold";
  font-size: 28px;
  color: #ffffff;
  padding: 4px 0px 4px 38px;
}

.sprite_icons.timer_base {
  position: absolute;
  top: 90px;
  right: 10px;
  z-index: 8;
}

.sprite_icons.close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.sprite_icons.close-hover {
  position: absolute;
  top: 10px;
  right: 10px;
}

#main_content_wrapper {
  position: relative;
  background-color: #009fe6;
  z-index: 1;
}

.background_graphics {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgb(0, 66, 172);
  background: linear-gradient(0deg, rgba(0, 66, 172, 1) 19%, rgba(0, 159, 230, 1) 100%);
}

#content_wrapper {
  position: relative;
  top: 80px;
  width: 100%;
  height: 100%;
}

/* ---bottom mode ---*/
#bottom_band {
  position: relative;
  width: 100%;
}

.background {
  height: 140px;
}

img.bottomband_background,
img.bottomband_foreground {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.sprite_interface.bubbles {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.sprite_interface.fish {
  position: absolute;
  left: 10.8%;
  top: 39%;
}

.sprite_interface.fish_left {
  position: absolute;
  left: 2%;
  top: 20%;
}

.sprite_interface.fish_right {
  position: absolute;
  right: 3.8%;
  top: 27%;
}

a,
button {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-decoration: none !important;
}
a:hover,
a:focus,
a:active,
a:visited {
  text-decoration: none !important;
}
a.disabled,
button.disabled {
  cursor: default;
  pointer-events: none;
}
a > * {
  pointer-events: none;
}
button:focus,
a:focus {
  /* outline: 3px dotted #00b2ff !important; */
  outline: 3px dotted #000000 !important;
  outline-offset: 2px !important;
}

/* Cards` */
.cards {
  text-align: center;

  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /* bottom: -6%; */

  max-width: 100%;
  z-index: 3;
}
.cards>.card-wrapper {
  display: inline-block;
  position: relative;
  padding-bottom: 10px;
  margin-right: 16px;
}
.cards>.card-wrapper::before {
  content: '';
  background-image: url(themes/source/cards/card_shadow.png);
  background-repeat: no-repeat;
  position: absolute;
  opacity: 0.8;
  bottom: 0px;
  left: -8px;
  width: 272px;
  height: 32px;
  z-index: -1;
}
.cards>.card-wrapper:last-child {
  margin-right: 0px;
}
.cards>.card-wrapper>a.card,
.cards>.card-wrapper>a.card * {
  font-family: 'Fredoka-Semibold';
  font-size: 26px;
  color: #69360e;
  border-radius: 50px;
}
.cards>.card-wrapper>a.card .txt-heading {
  position: absolute;
  top: 18px;
  left: 13%;
}
span.video_play {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}
/* More */
a.more {
  font-family: 'Fredoka-Semibold';
  font-size: 24px;
  color: #ffffff !important;
  position: absolute;
  bottom: -78px;
  left: 3px;
  padding: 15px 20px;
  border-radius: 20px;
}
.more.reading,
.more.math,
.more.lectura {
  vertical-align: middle;
}
.more > span:first-child {
  display: block;
  text-align: left;
}
/* .more_align {
  padding: 10px 20px;
  border-radius: 20px;
} */

/* Mic */
button.mic {
  position: relative;
  z-index: 1;
  left: 3%;
  top: 120px;
  border-radius: 55px;
}
/* Popups */
#popup_container {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  max-width: 1349px;
  z-index: 3;
  pointer-events: none;
}
.overlay, .popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0.8;
  -webkit-filter: alpha(opacity=80);
  -moz-filter: alpha(opacity=80);
  -ms-filter: alpha(opacity=80);
  filter: alpha(opacity=80);
  z-index: 5;
  background-color: #000000;
  pointer-events: initial;
}
.ui-popup {
  z-index: 6;
  overflow: auto;
  position: absolute;
}
dialog.ui-popup {
  background-color: #F2FAFD;
  max-width: 80%;
  /* min-width: 55%; */
  height: auto;
  padding: 15px;
  border: 0;
  pointer-events: initial;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
}
dialog.ui-popup.portrait {
  display: none !important;
  z-index: -1;
  padding: 0;
  background-color: transparent;
}
dialog.ui-popup.portrait {
  display: none !important;
  z-index: -1;
  padding: 0;
  background-color: transparent;
}
@media only screen and (orientation: portrait) and (pointer: coarse) {
  #popup_container {
      position: fixed !important;
      width: 100% !important;
      height: 100% !important;
  }
  .popup-overlay {
      display: block !important;
      opacity: 0.90 !important;
      visibility: visible !important;
      z-index: 7 !important;
  }
  dialog.ui-popup.portrait {
      display: block !important;
      z-index: 8 !important;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  dialog.ui-popup.portrait .popup-content p {
      font-family: 'Fredoka-Semibold';
      position: relative;
      z-index: 9;
      text-align: center;
      color: #FFFFFF;
      font-size: 30px;
      margin-top: 30px;
  }
}

@media only screen and (max-width: 1240px) {
  .background {
    height: 210px;
  }
  button.mic {
    top: 200px;
  }
}
@media only screen and (max-width: 1164px) {
  #title > .level_1 {
    font-size: 28px;
  }
}
@media only screen and (max-width: 1114px) {
  .topband-middle {
    top: 12px;
  }
}