/****FONTS******/
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  min-height: 400px;
  font-size: 15px; }

a {
  transition: color 0.3s; }

/****FUNCTIONS*******/
#wrapper {
  width: 100%;
  min-height: 400px;
  background-color: #000;
  display: flex;
  cursor: url("../images/cursor.png"), auto; }
  #wrapper main.juana {
    background-position: top !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat; }
    #wrapper main.juana > div#content article > div#character img.character {
      max-width: 24vw;
      height: auto;
      position: absolute;
      left: 18vw;
      bottom: 16vh; }
    #wrapper main.juana > div#content article > div#character img.text {
      max-width: 50vw;
      height: auto;
      position: absolute;
      z-index: 100;
      right: 12vw;
      top: 28vh; }
  #wrapper main.pascual {
    background-image: url("../images/personajes/pascual_bkp.png") !important; }
  #wrapper main.morro {
    background-image: url("../images/personajes/morro_bkp.png") !important; }
  #wrapper main.zorro {
    background-position: top !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat; }
    #wrapper main.zorro > div#content article > div#character img.character {
      max-width: 21vw;
      height: auto;
      position: absolute;
      left: 13vw;
      bottom: 23vh; }
    #wrapper main.zorro > div#content article > div#character img.text {
      max-width: 50vw;
      height: auto;
      position: absolute;
      z-index: 100;
      right: 12vw;
      top: 28vh; }
  #wrapper main.algarrobo {
    background-image: url("../images/personajes/algarrobo_bkp.png") !important; }
  #wrapper main.aguero {
    background-image: url("../images/personajes/aguero_bkp.png") !important;
    background-position: top !important; }
  #wrapper main.berta {
    background-image: url("../images/personajes/berta_bkp.png") !important; }
  #wrapper main.chorrillero {
    background-image: url("../images/personajes/chorrillero_bkp.png") !important; }
  #wrapper main.conlara {
    background-position: top !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat; }
    #wrapper main.conlara > div#content article > div#character img.character {
      max-width: 51vw;
      height: auto;
      position: absolute;
      right: -1vw;
      bottom: 11vh; }
    #wrapper main.conlara > div#content article > div#character img.text {
      max-width: 50vw;
      height: auto;
      position: absolute;
      z-index: 100;
      left: 2vw;
      top: 28vh; }
  #wrapper main.pringles {
    background-position: top !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat; }
    #wrapper main.pringles > div#content article > div#character img.character {
      max-width: 51vw;
      height: auto;
      position: absolute;
      right: 20vw;
      bottom: 11vh; }
    #wrapper main.pringles > div#content article > div#character img.text {
      max-width: 50vw;
      height: auto;
      position: absolute;
      z-index: 100;
      left: 2vw;
      top: 28vh; }
  #wrapper main.orion {
    background-image: url("../images/personajes/orion_bkp.png") !important; }
  #wrapper main.lafinur {
    background-image: url("../images/personajes/lafinur_bkp.png") !important; }
  #wrapper main.koslay {
    background-image: url("../images/personajes/koslay_bkp.png") !important; }
  #wrapper main.funes {
    background-image: url("../images/personajes/funes_bkp.png") !important; }
  #wrapper main.elena {
    background-image: url("../images/personajes/elena_bkp.png") !important; }
  #wrapper main.videos {
    background-image: url("../images/fondo_seccion_videos.jpg"); }
  #wrapper main.recursos {
    background-image: url("../images/fondo_seccion_redursos.jpg"); }
    #wrapper main.recursos > div#recursos > div#content > a {
      max-height: 335px !important; }
  #wrapper main.libros {
    background-image: url("../images/fondo_libros.jpg"); }
  #wrapper main.revista {
    background-image: url("../images/fondo-revistas.jpg"); }
  #wrapper main.juegos {
    background-image: url("../images/fondo-juegos.jpg"); }
  #wrapper main.personajes {
    background-image: url("../images/fondo-personajes.png");
    background-position: bottom;
    display: flex;
    flex-flow: column;
    height: 100vh !important;
    padding: 0; }
    #wrapper main.personajes footer {
      margin-bottom: 0; }
    #wrapper main.personajes > div#content {
      width: 100%;
      margin: 0;
      height: 62vh;
      display: flex; }
      #wrapper main.personajes > div#content article {
        width: 90%;
        height: 100%;
        margin: auto; }
        #wrapper main.personajes > div#content article > div#character {
          height: 80%;
          margin: 0;
          width: 100%;
          display: flex;
          align-items: center; }
          #wrapper main.personajes > div#content article > div#character img {
            margin: auto;
            margin-bottom: 10px;
            width: auto;
            /*max-height: 85%;*/
            max-height: 50vh;
            margin-right: 30px;
            max-width: 80vw; }
          #wrapper main.personajes > div#content article > div#character > div.data {
            width: 52.0833333333vw;
            background-image: url("../images/chars_back.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            max-height: 45vh;
            display: flex;
            flex-flow: column;
            box-sizing: border-box;
            padding: 1.5625vw;
            margin: auto;
            margin-left: 0; }
            #wrapper main.personajes > div#content article > div#character > div.data h1 {
              font-size: 2.5vw;
              color: #1D748B;
              font-family: "dimboregular";
              margin: 0; }
            #wrapper main.personajes > div#content article > div#character > div.data p {
              font-size: 1.5vw;
              color: #000;
              font-family: "dimboregular";
              margin: 0;
              padding: 0; }
          #wrapper main.personajes > div#content article > div#character > a#arrow {
            display: none; }
          #wrapper main.personajes > div#content article > div#character > a#arrow_top {
            display: none; }
        #wrapper main.personajes > div#content article > div#bar {
          height: calc(15% - 10px);
          margin: auto;
          margin-bottom: 10px;
          width: 50%;
          display: flex;
          position: relative;
          z-index: 1000; }
          #wrapper main.personajes > div#content article > div#bar > a {
            margin: auto 0;
            width: 27px; }
          #wrapper main.personajes > div#content article > div#bar > nav {
            width: calc(100% - 54px);
            box-sizing: border-box;
            padding: 0 5px;
            display: flex;
            justify-content: space-between;
            align-items: center; }
            #wrapper main.personajes > div#content article > div#bar > nav a {
              height: 100%;
              /*margin: auto;*/
              display: flex;
              width: 20%; }
              #wrapper main.personajes > div#content article > div#bar > nav a img {
                max-height: 100%;
                width: auto;
                margin: auto;
                max-width: 100%;
                flex: none; }
            #wrapper main.personajes > div#content article > div#bar > nav a.selected {
              height: 140%; }
  #wrapper main.home {
    background-image: url("../images/fondo-home.jpg");
    background-position: center bottom;
    display: flex;
    flex-flow: column;
    height: 100vh !important;
    padding: 0;
    overflow: hidden; }
    #wrapper main.home header {
      display: none; }
    #wrapper main.home div#header {
      width: 100%;
      max-width: 100%;
      display: flex;
      padding: 2.3vh;
      box-sizing: border-box;
      background: none;
      margin-top: 0; }
      #wrapper main.home div#header img {
        margin: auto;
        /*width: 25.5vw;
        max-width: 545px;
        height: auto;*/
        height: 27.7vh;
        width: auto;
        max-height: 358px;
        max-width: 545px; }
    #wrapper main.home footer {
      margin-bottom: 0; }
    #wrapper main.home > div#content {
      width: 100%;
      margin: 0;
      height: 62vh;
      display: flex; }
      #wrapper main.home > div#content aside:first-of-type a {
        margin-left: 7.2916666667vw; }
      #wrapper main.home > div#content aside:last-of-type a {
        margin-right: 7.2916666667vw; }
      #wrapper main.home > div#content aside {
        width: 27%;
        height: 120%;
        margin-top: -15vh;
        display: flex;
        flex-flow: column;
        align-items: center;
        position: relative;
        z-index: 100;
        justify-content: center; }
        #wrapper main.home > div#content aside a {
          margin: auto;
          display: flex;
          margin: 2vw auto; }
          #wrapper main.home > div#content aside a img {
            max-width: 100%;
            max-height: 100% !important;
            min-height: 1px;
            margin: auto;
            }
        #wrapper main.home > div#content aside a#revista {
          max-width: 383px;
          max-height: 102px;
          height: 10vmin;
          width: auto; }
        #wrapper main.home > div#content aside a#videos {
          max-width: 383px;
          max-height: 103px;
          height: 10vmin;
          width: auto; }
        #wrapper main.home > div#content aside a#juegos {
          max-width: 357px;
          max-height: 102px;
          height: 10vmin;
          width: auto; }
        #wrapper main.home > div#content aside a#recursos {
          max-width: 357px;
          max-height: 103px;
          height: 10vmin;
          width: auto; }
        #wrapper main.home > div#content aside a#libros {
          max-width: 374px;
          max-height: 102px;
          height: 10vmin;
          width: auto; }
        #wrapper main.home > div#content aside a#programa {
          max-width: 418px;
          max-height: 103px;
          height: 10vmin;
          width: auto; }
        #wrapper main.home > div#content aside a#manual{
            max-width: 333px;
            max-height: 102px;
            height: 9vmin;
            width: auto; }
        #wrapper main.home > div#content aside a#aula-v{
            max-width: 400px;
            max-height: 85px;
            height: 10vmin;
            width: auto; }
      #wrapper main.home > div#content article {
        width: 46%;
        height: 100%; }
        #wrapper main.home > div#content article > div#character {
          height: calc(85% - 20px);
          padding-bottom: 20px;
          margin: 0;
          width: 100%;
          display: flex;
          align-items: center; }
          #wrapper main.home > div#content article > div#character img {
            margin: auto;
            margin-bottom: 10px;
            width: auto;
            /*max-height: 85%;*/
            max-height: 50vh;
            max-width: 70vw; }
        #wrapper main.home > div#content article > div#bar {
          height: calc(15% - 10px);
          margin: 0 auto;
          margin-top: -10px;
          width: 100%;
          max-width: 730px;
          display: flex; }
          #wrapper main.home > div#content article > div#bar > a {
            margin: auto 0;
            width: 27px; }
          #wrapper main.home > div#content article > div#bar > nav {
            width: calc(100% - 54px);
            box-sizing: border-box;
            padding: 0 5px;
            display: flex;
            justify-content: space-between;
            align-items: center; }
            #wrapper main.home > div#content article > div#bar > nav a {
              height: 100%;
              /*margin: auto;*/
              display: flex;
              align-items: center; }
              #wrapper main.home > div#content article > div#bar > nav a img {
                max-height: 100%;
                width: auto;
                margin: auto;
                max-width: 100%; }
            #wrapper main.home > div#content article > div#bar > nav a.selected {
              height: 140%; }
      #wrapper main.home > div#content div.bottom {
        width: 100%;
        position: absolute;
        left: 0;
        display: flex;
        justify-content: center;
        bottom: 70px; }
        #wrapper main.home > div#content div.bottom a {
          margin: auto;
          display: flex;
          margin: 0 10px;

          width: auto; }
          #wrapper main.home > div#content div.bottom a img {
            max-width: 100%;
            max-height: 100% !important;
            margin: auto; }
          #wrapper main.home > div#content div.bottom a#manual{
            max-width: 333px;
            max-height: 102px;
            height: 9vmin;
          }
          #wrapper main.home > div#content div.bottom a#aula-v{
            max-width: 400px;
            max-height: 85px;
            height: 10vmin;
          }

          #wrapper main.home > div#content div.bottom a#revista-i{
            max-width: 420px;
            max-height: 102px;
            height: 10vmin;
            width: 30%;
          }
  #wrapper main {
    width: 100%;
    min-height: 100vh;
    background-size: cover;
    background-attachment: fixed; }
    #wrapper main header {
      width: calc(90% - 160px);
      padding-left: 11vw;
      max-width: 900px;
      height: 6.5vw;
      background-image: url("../images/header-back.png");
      background-repeat: no-repeat;
      background-size: calc(100% - 10vw) 5.2vw;
      background-position: right;
      margin: auto;
      margin-top: 30px;
      display: flex; }
      #wrapper main header > a#phone {
        display: none; }
      #wrapper main header > a.logo {
        margin: auto;
        margin-left: -8.3vw;
        margin-top: -0.3vw;
        position: relative; }
        #wrapper main header > a.logo img {
          width: 11.4583333333vw;
          max-width: 220px;
          height: auto; }
        #wrapper main header > a.logo > div.tooltip {
          position: absolute;
          bottom: -10px;
          font-size: 13px;
          font-family: "supersonic_rocketshipregular";
          color: #1D748B;
          opacity: 0;
          background-image: url("../images/tooltip.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          padding: 6px 20px;
          text-transform: uppercase;
          left: 50%;
          transform: translate(-50%, 0); }
      #wrapper main header > a.logo:hover > div.tooltip {
        opacity: 1; }
      #wrapper main header nav {
        width: calc(100% - 50px);
        height: 6.5vw;
        margin: auto;
        display: flex;
        justify-content: space-between;
        padding-left: 1.6vw;
        padding-right: 2.1vw;
        box-sizing: border-box; }
        #wrapper main header nav a {
          margin: auto;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          position: relative; }
          #wrapper main header nav a > div.tooltip {
            position: absolute;
            bottom: -30px;
            font-size: 13px;
            font-family: "supersonic_rocketshipregular";
            color: #1D748B;
            opacity: 0;
            background-image: url("../images/tooltip.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            padding: 6px 20px;
            text-transform: uppercase;
            left: 50%;
            transform: translate(-50%, 0); }
        #wrapper main header nav a:hover > div.tooltip {
          opacity: 1; }
        #wrapper main header nav a.selected {
          /*>div.tooltip{
            opacity: 1;
          }*/ }
        #wrapper main header nav a#home {
          display: none;
          width: 3.9583333333vw;
          height: 3.5416666667vw;
          background-image: url("../images/home_activo.png"); }
        #wrapper main header nav a#home:hover {
          background-image: url("../images/home_inactivo.png"); }
        #wrapper main header nav a#home.selected {
          background-image: url("../images/home_inactivo.png"); }
        #wrapper main header nav a#videos {
          width: 3.625vw;
          height: 3.5833333333vw;
          background-image: url("../images/barra-video-activo.png"); }
        #wrapper main header nav a#videos:hover {
          background-image: url("../images/barra-video-inactivo.png"); }
        #wrapper main header nav a#videos.selected {
          background-image: url("../images/barra-video-inactivo.png"); }
        #wrapper main header nav a#revista {
          width: 3.5416666667vw;
          height: 3.3333333333vw;
          background-image: url("../images/barra-revista-activo.png"); }
        #wrapper main header nav a#revista:hover {
          background-image: url("../images/barra-revista-inactivo.png"); }
        #wrapper main header nav a#revista.selected {
          background-image: url("../images/barra-revista-inactivo.png"); }
        #wrapper main header nav a#juegos {
          width: 3.9583333333vw;
          height: 3.3333333333vw;
          background-image: url("../images/barra-juegos-activo.png"); }
        #wrapper main header nav a#juegos:hover {
          background-image: url("../images/barra-juegos-inactivo.png"); }
        #wrapper main header nav a#juegos.selected {
          background-image: url("../images/barra-juegos-inactivo.png"); }
        #wrapper main header nav a#recursos {
          width: 2.9166666667vw;
          height: 3.125vw;
          background-image: url("../images/barra-recursos-activo.png"); }
        #wrapper main header nav a#recursos:hover {
          background-image: url("../images/barra-recursos-inactivo.png"); }
        #wrapper main header nav a#recursos.selected {
          background-image: url("../images/barra-recursos-inactivo.png"); }
        #wrapper main header nav a#libros {
          width: 2.7083333333vw;
          height: 3.125vw;
          background-image: url("../images/barra-libro-activo.png"); }
        #wrapper main header nav a#libros:hover {
          background-image: url("../images/barra-libro-inactivo.png"); }
        #wrapper main header nav a#libros.selected {
          background-image: url("../images/barra-libro-inactivo.png"); }
        #wrapper main header nav a#personajes {
          width: 4.0833333333vw;
          height: 4.25vw;
          background-image: url("../images/barra-personajes-activo.png"); }
        #wrapper main header nav a#personajes:hover {
          background-image: url("../images/barra-personajes-inactivo.png"); }
        #wrapper main header nav a#personajes.selected {
          background-image: url("../images/barra-personajes-inactivo.png"); }
        #wrapper main header nav a#manual {
          width: 3.3333333333vw;
          height: 3.3333333333vw;
          background-image: url("../images/barra-manual-activo.png"); }
        #wrapper main header nav a#manual:hover {
          background-image: url("../images/barra-manual-inactivo.png"); }
        #wrapper main header nav a#manual.selected {
          background-image: url("../images/barra-manual-inactivo.png"); }

          #wrapper main header nav a#aula-v {
            width: 3.333vw;
            height: 3.333vw;
            max-width: 70px;
            max-height: 70px;
            background-image: url("../images/barra-aulav-activa.png"); }
          #wrapper main header nav a#aula-v:hover {
            background-image: url("../images/barra-aulav-inactiva.png"); }
          #wrapper main header nav a#aula-v.selected {
            background-image: url("../images/barra-aulav-inactiva.png"); }

            #wrapper main header nav a#revista-i {
              width: 3.333vw;
              height: 3.333vw;
              max-width: 70px;
              max-height: 70px;
              background-image: url("../images/barra-revistai-activa.png"); }
            #wrapper main header nav a#revista-i:hover {
              background-image: url("../images/barra-revistai-inactiva.png"); }
            #wrapper main header nav a#revista-i.selected {
              background-image: url("../images/barra-revistai-inactiva.png"); }

    #wrapper main footer {
      width: 100%;
      height: 3.125vw;
      max-height: 10vh;
      background: #FFF;
      display: flex; }
      #wrapper main footer > a.logo {
        margin: auto 0;
        padding: 0 0.78125vw;
        border-right: 1px solid #de650b;
        height: 90%;
        display: flex;
        box-sizing: border-box;
        align-items: center; }
        #wrapper main footer > a.logo img {
          margin: auto;
          min-width: 50px;
          width: auto;
          max-height: 90%; }
      #wrapper main footer > nav#social {
        margin: 0 auto;
        margin-left: 0.78125vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 160px; }
        #wrapper main footer > nav#social a {
          display: block;
          box-sizing: border-box;
          height: auto;
          text-align: center;
          height: 1.5625vw; }
          #wrapper main footer > nav#social a img {
            margin: 0;
            width: auto;
            height: 100%; }
      #wrapper main footer > div.gobierno {
        display: flex;
        margin-right: 0;
        height: 3.125vw;
        max-height: 10vh; }
        #wrapper main footer > div.gobierno img {
          margin: auto;
          width: auto;
          min-width: 300px;
          max-height: 100%;
          margin-right: 0.78125vw; }
    #wrapper main div#videos {
      display: flex;
      width: 100%;
      flex-flow: column;
      margin-top: 50px; }
      #wrapper main div#videos > div.videoTooltip {
        position: absolute;
        z-index: 1000;
        background-color: #F3EFB8;
        padding: 15px 20px;
        border-radius: 10px;
        -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
        color: #000;
        font-family: "sairalight";
        font-size: 1vw;
        max-width: 300px;
        display: none; }
      #wrapper main div#videos > div.title {
        margin-top: 15px;
        margin-left: 70px; }
      #wrapper main div#videos > div.mainVideo {
        display: flex;
        margin: auto;
        width: 96%;
        margin-top: 15px; }
        #wrapper main div#videos > div.mainVideo article {
          width: 53.6458333333vw;
          height: 28.6458333333vw;
          background: #FFF;
          margin-left: 2.0833333333vw; }
        #wrapper main div#videos > div.mainVideo aside {
          width: 41.6666666667vw;
          height: auto;
          background-image: url("../images/video-desc-back.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          box-sizing: border-box;
          margin-left: 2.0833333333vw;
          padding-left: 1.0416666667vw;
          padding-top: 2.6041666667vw;
          padding-right: 3.125vw;
          padding-bottom: 2.6041666667vw; }
          #wrapper main div#videos > div.mainVideo aside h1 {
            width: 100%;
            font-family: "dimboregular";
            font-size: 2.9vw;
            color: #1D748B;
            margin: 0; }
          #wrapper main div#videos > div.mainVideo aside p {
            font-family: "sairalight";
            font-size: 1.2vw;
            color: #000;
            margin-top: 25px; }
      #wrapper main div#videos > div#filters {
        width: 100%;
        display: flex;
        margin-top: 50px; }
        #wrapper main div#videos > div#filters > nav#types {
          width: 90%;
          padding: 0 2%;
          height: 5.5vw;
          max-height: 106px;
          min-height: 40px;
          display: flex;
          justify-content: space-between;
          margin: auto;
          background-image: url("../images/videos/filter_back.png");
          background-size: 100% 100%; }
          #wrapper main div#videos > div#filters > nav#types a {
            font-family: "supersonic_rocketshipregular";
            font-size: 1.5vw;
            color: #F3EFB8;
            margin: auto;
            text-shadow: 5px 5px 0px black;
            text-decoration: none; }
          #wrapper main div#videos > div#filters > nav#types a:hover {
            color: #fccb25; }
          #wrapper main div#videos > div#filters > nav#types span {
            font-family: "supersonic_rocketshipregular";
            font-size: 1.5vw;
            text-transform: uppercase;
            color: #F3EFB8;
            margin: auto 0;
            text-shadow: 5px 5px 0px black;
            text-decoration: none; }
      #wrapper main div#videos > div#inner_filters {
        width: 100%;
        display: flex;
        margin-top: 50px; }
        #wrapper main div#videos > div#inner_filters > nav#types {
          min-width: 200px;
          margin: auto;
          background-image: url("../images/Fondo-submenu.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          min-height: 55px;
          height: auto;
          width: auto;
          padding: 5px 40px;
          display: flex;
          align-items: center; }
          #wrapper main div#videos > div#inner_filters > nav#types a {
            font-family: "supersonic_rocketshipregular";
            font-size: 20px;
            color: #FFF;
            text-decoration: none;
            margin: auto; }
          #wrapper main div#videos > div#inner_filters > nav#types span {
            font-family: "supersonic_rocketshipregular";
            font-size: 20px;
            color: #FFF;
            margin: auto 10px; }
      #wrapper main div#videos > nav {
        width: 96%;
        height: auto;
        margin: auto;
        box-sizing: border-box;
        padding: 0 2.0833333333vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 100px; }
        #wrapper main div#videos > nav a {
          width: 28.125vw;
          min-width: 400px;
          background-color: #FFF;
          text-decoration: none;
          margin-top: 5.2083333333vw;
          display: flex;
          flex-flow: column;
          border: 5px solid #FFF;
          border-radius: 5px; }
          #wrapper main div#videos > nav a img {
            width: 100%; }
          #wrapper main div#videos > nav a h2 {
            width: 100%;
            height: auto;
            background-image: url("../images/videos-franja-fondo.png");
            background-size: cover;
            font-size: 1.2vw;
            font-family: "supersonic_rocketshipregular";
            color: #FFF;
            text-align: center;
            margin: 0;
            margin-top: auto; }
      #wrapper main div#videos > a#ver_mas {
        margin: 40px auto;
        width: 20.46875vw;
        max-width: 393px;
        max-height: 106px; }
        #wrapper main div#videos > a#ver_mas img {
          width: 100%;
          height: auto;
          margin: auto; }
      @media screen and (max-width: 900px) {
        #wrapper main div#videos > div#inner_filters > nav#types a {
          font-size: 14px; }
        #wrapper main div#videos > div#inner_filters > nav#types span {
          font-size: 14px; } }
    #wrapper main > div#revista {
      display: flex;
      width: 100%;
      max-width: 1200px;
      margin: auto;
      justify-content: space-between;
      margin-top: 80px; }
      #wrapper main > div#revista > div#filters {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        top: 30vh; }
        #wrapper main > div#revista > div#filters > nav#types {
          width: 38vw;
          max-width: 730px;
          height: 5.5vw;
          max-height: 106px;
          min-height: 40px;
          display: flex;
          justify-content: space-between;
          margin: auto;
          background-image: url("../images/recursos/filter_back.png");
          background-size: 100% 100%; }
          #wrapper main > div#revista > div#filters > nav#types a {
            font-family: "supersonic_rocketshipregular";
            font-size: 2.5vw;
            color: #F3EFB8;
            margin: auto;
            text-shadow: 5px 5px 0px black;
            text-decoration: none; }
          #wrapper main > div#revista > div#filters > nav#types a:hover {
            color: #fccb25; }
          #wrapper main > div#revista > div#filters > nav#types span {
            font-family: "supersonic_rocketshipregular";
            font-size: 2.5vw;
            text-transform: uppercase;
            color: #F3EFB8;
            margin: auto 0;
            text-shadow: 5px 5px 0px black;
            text-decoration: none; }
      #wrapper main > div#revista > article {
        min-width: 350px;
        width: 60%;
        display: flex;
        margin-left: 2vw;
        margin-bottom: 2vw; }
        #wrapper main > div#revista > article > div {
          margin: auto;
          margin-top: 0;
          width: 80%;
          background-color: #FFF;
          box-sizing: border-box;
          padding: 10px;
          padding-right: 17px; }
          #wrapper main > div#revista > article > div img {
            width: 100%;
            height: auto;
            -webkit-box-shadow: 7px 7px 0px 0px #999999;
            -moz-box-shadow: 7px 7px 0px 0px #999999;
            box-shadow: 7px 7px 0px 0px #999999; }
        #wrapper main > div#revista > article > nav {
          display: flex;
          flex-flow: column;
          width: 20%;
          margin: auto;
          margin-top: 10px; }
          #wrapper main > div#revista > article > nav a:first-of-type {
            width: 100%;
            margin-left: 1vw;
            max-width: 252px;
            min-width: 150px; }
          #wrapper main > div#revista > article > nav a:last-of-type {
            width: 110%;
            margin-left: 1vw;
            max-width: 281px;
            min-width: 170px; }
          #wrapper main > div#revista > article > nav a img {
            width: 100%;
            height: auto; }
      #wrapper main > div#revista > aside {
        max-width: 320px;
        width: 18.2291666667vw;
        display: flex;
        flex-flow: column;
        margin-right: 2vw; }
        #wrapper main > div#revista > aside form {
          width: 100%;
          display: flex;
          position: relative; }
          #wrapper main > div#revista > aside form input[type="submit"] {
            width: 13.125vw;
            height: 4.2708333333vw;
            top: -0.78125vw;
            position: relative;
            z-index: 8;
            border: none;
            background: none;
            background-image: url("../images/revista-boton-buscador.png");
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center;
            position: absolute;
            cursor: pointer; }
          #wrapper main > div#revista > aside form input[type="text"] {
            width: 80%;
            height: 2.5vw;
            position: relative;
            margin: auto;
            margin-right: 0px;
            border: none;
            font-family: "sairaregular";
            color: #000;
            font-size: 2vw;
            text-align: right;
            padding-right: 10px;
            box-sizing: border-box;
            -moz-appearance: textfield; }
          #wrapper main > div#revista > aside form input[type=number]::-webkit-inner-spin-button,
          #wrapper main > div#revista > aside form input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            margin: 0; }
        #wrapper main > div#revista > aside > a {
          width: 42px;
          height: 32px;
          margin: 10px auto; }
        #wrapper main > div#revista > aside > a#arrow-up {
          background-image: url("../images/home-flecha-arriba.png"); }
        #wrapper main > div#revista > aside > a#arrow-down {
          background-image: url("../images/home-flecha-abajo.png"); }
        #wrapper main > div#revista > aside > nav {
          width: 100%;
          display: flex;
          flex-flow: column; }
          #wrapper main > div#revista > aside > nav a {
            width: 45%;
            margin: 5px auto;
            min-width: 120px; }
            #wrapper main > div#revista > aside > nav a img {
              width: 100%;
              height: auto;
              -webkit-box-shadow: 3px 3px 0px 0px #999999;
              -moz-box-shadow: 3px 3px 0px 0px #999999;
              box-shadow: 3px 3px 0px 0px #999999; }
          #wrapper main > div#revista > aside > nav a.selected {
            width: 55%; }
    #wrapper main > div#libros {
      display: flex;
      flex-flow: column;
      width: 100%;
      margin: auto;
      justify-content: space-between;
      margin-top: 80px; }
      #wrapper main > div#libros > div#filters {
        display: flex; }
        #wrapper main > div#libros > div#filters > nav#types {
          width: auto;
          max-width: 730px;
          padding: 0 30px;
          height: 3.5vw;
          max-height: 106px;
          min-height: 40px;
          display: flex;
          justify-content: space-between;
          margin: auto;
          background-image: url("../images/recursos/filter_back.png");
          background-size: 100% 100%; }
          #wrapper main > div#libros > div#filters > nav#types a {
            font-family: "supersonic_rocketshipregular";
            font-size: 1.5vw;
            opacity: 0.5;
            color: #F3EFB8;
            margin: auto 20px;
            text-shadow: 5px 5px 0px black;
            text-decoration: none; }
          #wrapper main > div#libros > div#filters > nav#types a:hover {
            color: #fccb25; }
          #wrapper main > div#libros > div#filters > nav#types a.selected {
            opacity: 1;
            pointer-events: none; }
          #wrapper main > div#libros > div#filters > nav#types span {
            font-family: "supersonic_rocketshipregular";
            font-size: 2.5vw;
            text-transform: uppercase;
            color: #F3EFB8;
            margin: auto 0;
            text-shadow: 5px 5px 0px black;
            text-decoration: none; }
      #wrapper main > div#libros div#book_list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin-top: 60px;
        height: auto;
        min-height: calc(100vh - 360px); }
        #wrapper main > div#libros div#book_list > a {
          width: 30%;
          height: 20vw;
          max-height: 380px;
          max-width: 540px;
          text-decoration: none;
          margin-bottom: 5vw;
          border: 5px solid #FFF;
          border-radius: 5px;
          position: relative; }
          #wrapper main > div#libros div#book_list > a > div.top {
            width: 100%;
            height: 91%;
            position: relative;
            background-size: cover; }
            #wrapper main > div#libros div#book_list > a > div.top img {
              position: absolute;
              left: 1px;
              top: 1px;
              width: 10%;
              height: auto; }
          #wrapper main > div#libros div#book_list > a > h2 {
            width: 100%;
            height: auto;
            font-family: "supersonic_rocketshipregular";
            color: #FFF;
            font-size: 1.2vw;
            text-transform: uppercase;
            text-align: center;
            text-decoration: none;
            background-size: cover;
            margin: 0;
            overflow: hidden;
            bottom: 0;
            position: absolute;
            background-image: url("../images/recursos/ta_title_back.png"); }
      #wrapper main > div#libros div#content {
        display: flex;
        width: 100%;
        max-width: 1220px;
        margin: auto;
        justify-content: space-between;
        margin-top: 20px;
        position: relative; }
        #wrapper main > div#libros div#content > a#volver {
          position: absolute;
          z-index: 10;
          top: 0px;
          right: 20px; }
        #wrapper main > div#libros div#content > article {
          min-width: 350px;
          width: 60%;
          display: flex;
          margin-left: 2vw;
          margin-bottom: 2vw; }
          #wrapper main > div#libros div#content > article > div {
            margin: auto;
            margin-top: 0;
            width: 80%;
            background-color: #FFF;
            box-sizing: border-box;
            padding: 10px;
            padding-right: 17px; }
            #wrapper main > div#libros div#content > article > div img {
              width: 100%;
              height: auto;
              -webkit-box-shadow: 7px 7px 0px 0px #999999;
              -moz-box-shadow: 7px 7px 0px 0px #999999;
              box-shadow: 7px 7px 0px 0px #999999; }
          #wrapper main > div#libros div#content > article > nav {
            display: flex;
            flex-flow: column;
            width: 20%;
            margin: auto;
            margin-top: 10px; }
            #wrapper main > div#libros div#content > article > nav a:first-of-type {
              width: 100%;
              margin-left: 1vw;
              max-width: 252px;
              min-width: 150px; }
            #wrapper main > div#libros div#content > article > nav a:last-of-type {
              width: 110%;
              margin-left: 1vw;
              max-width: 281px;
              min-width: 170px; }
            #wrapper main > div#libros div#content > article > nav a img {
              width: 100%;
              height: auto; }
        #wrapper main > div#libros div#content > aside {
          max-width: 320px;
          width: 18.2291666667vw;
          display: flex;
          flex-flow: column;
          margin-right: 2vw; }
          #wrapper main > div#libros div#content > aside form {
            width: 100%;
            display: flex;
            position: relative; }
            #wrapper main > div#libros div#content > aside form input[type="submit"] {
              width: 13.125vw;
              height: 4.2708333333vw;
              top: -0.78125vw;
              position: relative;
              z-index: 8;
              border: none;
              background: none;
              background-image: url("../images/revista-boton-buscador.png");
              background-size: 100%;
              background-repeat: no-repeat;
              background-position: center;
              position: absolute;
              cursor: pointer; }
            #wrapper main > div#libros div#content > aside form input[type="text"] {
              width: 80%;
              height: 2.5vw;
              position: relative;
              margin: auto;
              margin-right: 0px;
              border: none;
              font-family: "sairaregular";
              color: #000;
              font-size: 2vw;
              text-align: right;
              padding-right: 10px;
              box-sizing: border-box;
              -moz-appearance: textfield; }
            #wrapper main > div#libros div#content > aside form input[type=number]::-webkit-inner-spin-button,
            #wrapper main > div#libros div#content > aside form input[type=number]::-webkit-outer-spin-button {
              -webkit-appearance: none;
              -moz-appearance: none;
              appearance: none;
              margin: 0; }
          #wrapper main > div#libros div#content > aside > a {
            width: 42px;
            height: 32px;
            margin: 10px auto; }
          #wrapper main > div#libros div#content > aside > a#arrow-up {
            background-image: url("../images/home-flecha-arriba.png"); }
          #wrapper main > div#libros div#content > aside > a#arrow-down {
            background-image: url("../images/home-flecha-abajo.png"); }
          #wrapper main > div#libros div#content > aside > nav {
            width: 100%;
            display: flex;
            flex-flow: column; }
            #wrapper main > div#libros div#content > aside > nav a {
              width: 45%;
              margin: 5px auto;
              min-width: 120px; }
              #wrapper main > div#libros div#content > aside > nav a img {
                width: 100%;
                height: auto;
                -webkit-box-shadow: 3px 3px 0px 0px #999999;
                -moz-box-shadow: 3px 3px 0px 0px #999999;
                box-shadow: 3px 3px 0px 0px #999999; }
            #wrapper main > div#libros div#content > aside > nav a.selected {
              width: 55%; }
    #wrapper main > div#recursos {
      display: flex;
      flex-flow: column;
      width: 96%;
      margin: 0 auto;
      padding-top: 35px;
      position: relative; }
      #wrapper main > div#recursos > div.videoTooltip {
        position: absolute;
        z-index: 1000;
        background-color: #F3EFB8;
        padding: 15px 20px;
        border-radius: 10px;
        -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
        color: #000;
        font-family: "sairalight";
        font-size: 1vw;
        max-width: 300px;
        display: none; }
      #wrapper main > div#recursos > a#back {
        position: absolute;
        right: 2.0833333333vw;
        top: 0;
        width: 9.1145833333vw;
        max-width: 175px;
        display: flex;
        flex-flow: column;
        text-decoration: none; }
        #wrapper main > div#recursos > a#back img {
          width: 50%;
          height: auto;
          margin: auto;
          max-width: 80px;
          margin-bottom: 0; }
        #wrapper main > div#recursos > a#back p {
          width: 100%;
          height: 2.2vw;
          background-image: url("../images/tooltip.png");
          background-size: 100% 100%;
          font-family: "sairaregular";
          font-size: 1.4vw;
          color: #EC5767;
          text-align: center;
          box-sizing: border-box;
          padding-top: 0.4vw;
          margin-top: 0;
          opacity: 0; }
      #wrapper main > div#recursos > a#back:hover p {
        opacity: 1; }
      #wrapper main > div#recursos > div#filters {
        width: 100%;
        display: flex;
        margin-top: 50px; }
        #wrapper main > div#recursos > div#filters > nav#types.persons {
          width: 28vw !important;
          max-width: 600px !important;
          margin-left: auto !important;
          margin-right: 2.6041666667vw; }
          #wrapper main > div#recursos > div#filters > nav#types.persons a {
            text-transform: uppercase; }
        #wrapper main > div#recursos > div#filters > nav#types {
          width: 60vw;
          max-width: 930px;
          height: 5.5vw;
          max-height: 106px;
          min-height: 40px;
          display: flex;
          justify-content: space-between;
          margin: auto;
          padding-right: 20px;
          background-image: url("../images/recursos/filter_back.png");
          background-size: 100% 100%; }
          #wrapper main > div#recursos > div#filters > nav#types a {
            font-family: "supersonic_rocketshipregular";
            font-size: 2.5vw;
            color: #F3EFB8;
            margin: auto;
            text-shadow: 5px 5px 0px black;
            text-decoration: none; }
          #wrapper main > div#recursos > div#filters > nav#types a:hover {
            color: #fccb25; }
          #wrapper main > div#recursos > div#filters > nav#types span {
            font-family: "supersonic_rocketshipregular";
            font-size: 2.5vw;
            text-transform: uppercase;
            color: #F3EFB8;
            margin: auto 0;
            text-shadow: 5px 5px 0px black;
            text-decoration: none; }
      #wrapper main > div#recursos > div#inner_filters {
        width: 100%;
        display: flex;
        margin-top: 50px; }
        #wrapper main > div#recursos > div#inner_filters > nav#types {
          min-width: 200px;
          margin: auto;
          background-image: url("../images/Fondo-submenu.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          min-height: 55px;
          height: auto;
          width: auto;
          padding: 5px 40px;
          display: flex;
          align-items: center; }
          #wrapper main > div#recursos > div#inner_filters > nav#types a {
            font-family: "supersonic_rocketshipregular";
            font-size: 20px;
            color: #FFF;
            text-decoration: none;
            margin: auto; }
          #wrapper main > div#recursos > div#inner_filters > nav#types span {
            font-family: "supersonic_rocketshipregular";
            font-size: 20px;
            color: #FFF;
            margin: auto 10px; }
      @media screen and (max-width: 900px) {
        #wrapper main > div#recursos > div#filters {
          flex-flow: column;
          margin-top: 20px; }
          #wrapper main > div#recursos > div#filters > nav#persons {
            margin: auto;
            width: 80vw;
            max-width: 280px; }
          #wrapper main > div#recursos > div#filters > nav#types {
            margin: auto;
            margin-top: 20px;
            width: 60vw; }
        #wrapper main > div#recursos > div#inner_filters {
          display: none; }
          #wrapper main > div#recursos > div#inner_filters > nav#types a {
            font-size: 14px; }
          #wrapper main > div#recursos > div#inner_filters > nav#types span {
            font-size: 14px; } }
      #wrapper main > div#recursos > div#content {
        width: 100%;
        height: auto;
        min-height: 700px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin-top: 60px; }
        #wrapper main > div#recursos > div#content > p#content_loading {
          font-family: "supersonic_rocketshipregular";
          font-size: 20px;
          color: #000;
          margin: auto; }
        #wrapper main > div#recursos > div#content > a {
          width: 30%;
          height: 20vw;
          max-height: 350px;
          max-width: 540px;
          text-decoration: none;
          margin-bottom: 5vw;
          border: 5px solid #FFF;
          border-radius: 5px;
          position: relative; }
          #wrapper main > div#recursos > div#content > a > div.top {
            width: 100%;
            height: 91%;
            position: relative;
            background-size: cover;
            background-position: center; }
            #wrapper main > div#recursos > div#content > a > div.top img {
              position: absolute;
              left: 1px;
              top: 1px;
              width: 10%;
              height: auto; }
          #wrapper main > div#recursos > div#content > a > h2 {
            width: 100%;
            height: auto;
            font-family: "supersonic_rocketshipregular";
            color: #FFF;
            font-size: 1.2vw;
            text-transform: uppercase;
            text-align: center;
            text-decoration: none;
            background-size: cover;
            margin: 0;
            overflow: hidden;
            bottom: 0;
            position: absolute; }
        #wrapper main > div#recursos > div#content > a.video {
          /*>div.top{
            img{
              width: 12%;
            }
          }*/ }
          #wrapper main > div#recursos > div#content > a.video > h2 {
            background-image: url("../images/recursos/vi_title_back.png"); }
        #wrapper main > div#recursos > div#content > a.audio > div.top {
          background-color: #cff2f6;
          background-image: url("../images/recursos/audio_back.png");
          background-size: auto;
          background-position: center;
          background-repeat: no-repeat; }
        #wrapper main > div#recursos > div#content > a.audio > h2 {
          background-image: url("../images/recursos/au_title_back.png"); }
        #wrapper main > div#recursos > div#content > a.task > h2 {
          background-image: url("../images/recursos/ta_title_back.png"); }
          #wrapper main > div#recursos > div#content > a.virtualclassroom > h2 {
            background-image: url("../images/recursos/ta_title_back.png"); }

        #wrapper main > div#recursos > div#content > a.game {
          /*border: 5px solid #FFF;
          border-radius: 5px;*/ }
          #wrapper main > div#recursos > div#content > a.game > h2 {
            background-image: url("../images/recursos/ju_title_back.png"); }
      #wrapper main > div#recursos > a#ver_mas {
        margin: 40px auto;
        width: 20.46875vw;
        max-width: 393px;
        max-height: 106px; }
        #wrapper main > div#recursos > a#ver_mas img {
          width: 100%;
          height: auto;
          margin: auto; }
      #wrapper main > div#recursos > div#videos {
        margin-top: 40px; }
      #wrapper main > div#recursos > div#video_otros {
        width: 26vw;
        max-width: 509px;
        margin: auto;
        margin-top: 60px; }
        #wrapper main > div#recursos > div#video_otros img {
          width: 100%;
          height: auto;
          margin: auto; }
      #wrapper main > div#recursos > div#audio_player {
        width: 100%;
        height: 6.7708333333vw;
        max-height: 130px;
        position: fixed;
        bottom: 10px;
        left: 0;
        background-image: url("../images/recursos/audio/back.png");
        background-size: 100% 100%;
        display: flex; }
        #wrapper main > div#recursos > div#audio_player > div#left {
          width: calc(30% - 100px);
          margin: 1.3020833333vw 0;
          border-right: 2px solid #135fa7;
          box-sizing: border-box;
          display: flex; }
          #wrapper main > div#recursos > div#audio_player > div#left img {
            margin: auto 0;
            width: 3.8541666667vw;
            max-width: 74px;
            height: 4.2708333333vw;
            max-height: 82px; }
          #wrapper main > div#recursos > div#audio_player > div#left p {
            color: #135fa7;
            font-family: "dimboregular";
            font-size: 2vw;
            margin: auto;
            text-transform: uppercase; }
        #wrapper main > div#recursos > div#audio_player > div#download {
          width: 100px;
          display: flex;
          margin: 1.3020833333vw 0;
          border-right: 2px solid #135fa7;
          box-sizing: border-box; }
          #wrapper main > div#recursos > div#audio_player > div#download > a {
            margin: auto; }
        #wrapper main > div#recursos > div#audio_player > div#right {
          width: 70%;
          display: flex; }
          #wrapper main > div#recursos > div#audio_player > div#right > a {
            width: 3.1vw;
            height: 3.1vw;
            max-width: 60px;
            max-height: 60px;
            background-size: 100%;
            margin: auto; }
          #wrapper main > div#recursos > div#audio_player > div#right > a#pp {
            background-image: url("../images/recursos/audio/pause.png"); }
          #wrapper main > div#recursos > div#audio_player > div#right > a.doplay {
            background-image: url("../images/recursos/audio/play.png") !important; }
          #wrapper main > div#recursos > div#audio_player > div#right > a#stop {
            background-image: url("../images/recursos/audio/stop.png"); }
          #wrapper main > div#recursos > div#audio_player > div#right > div#vol {
            position: relative;
            width: 3.1vw;
            height: 3.1vw;
            max-width: 60px;
            max-height: 60px;
            margin: auto;
            margin-right: 2.6vw; }
            #wrapper main > div#recursos > div#audio_player > div#right > div#vol > a {
              background-image: url("../images/recursos/audio/vol_on.png");
              width: 3.1vw;
              height: 3.1vw;
              max-width: 60px;
              max-height: 60px;
              display: block;
              background-size: 100%; }
            #wrapper main > div#recursos > div#audio_player > div#right > div#vol > a.vol_off {
              background-image: url("../images/recursos/audio/vol_off.png"); }
            #wrapper main > div#recursos > div#audio_player > div#right > div#vol > div.vol {
              position: absolute;
              width: 3.1vw;
              height: 200px;
              background: #FFF;
              top: -210px;
              left: 0;
              -webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.5);
              -moz-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.5);
              box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.5);
              display: flex;
              display: none; }
              #wrapper main > div#recursos > div#audio_player > div#right > div#vol > div.vol > a#volbar {
                width: 5px;
                height: 80%;
                background: #939598;
                margin: auto;
                display: flex; }
                #wrapper main > div#recursos > div#audio_player > div#right > div#vol > div.vol > a#volbar > div {
                  width: 100%;
                  height: 60%;
                  background: #135fa7;
                  margin-top: auto; }
          #wrapper main > div#recursos > div#audio_player > div#right > div#bar {
            width: 48vw;
            display: flex;
            flex-flow: column;
            justify-content: center;
            margin: 0 3vw; }
            #wrapper main > div#recursos > div#audio_player > div#right > div#bar > div#numbers {
              display: flex;
              width: 100%;
              justify-content: space-between;
              margin: auto;
              margin-bottom: 1px;
              height: 1.2vw; }
              #wrapper main > div#recursos > div#audio_player > div#right > div#bar > div#numbers p {
                font-family: "sairaregular";
                font-size: 1.2vw;
                margin: 0; }
              #wrapper main > div#recursos > div#audio_player > div#right > div#bar > div#numbers p:first-of-type {
                color: #135fa7; }
              #wrapper main > div#recursos > div#audio_player > div#right > div#bar > div#numbers p:last-of-type {
                color: #939598; }
            #wrapper main > div#recursos > div#audio_player > div#right > div#bar > a#timebar {
              width: 100%;
              height: 5px;
              background: #939598;
              margin: auto;
              margin-top: 1px; }
              #wrapper main > div#recursos > div#audio_player > div#right > div#bar > a#timebar > div {
                width: 50%;
                height: 5px;
                background: #135fa7; }
      #wrapper main > div#recursos > div#task {
        margin: 10vw auto;
        width: 100%;
        display: flex; }
        #wrapper main > div#recursos > div#task > div#image {
          box-sizing: border-box;
          background-color: #FFF;
          padding: 10px;
          padding-right: 15px;
          max-width: 27vw;
          margin: auto;
          margin-top: 0; }
          #wrapper main > div#recursos > div#task > div#image > img {
            width: 100%;
            height: auto;
            -webkit-box-shadow: 7px 7px 0px 0px #999999;
            -moz-box-shadow: 7px 7px 0px 0px #999999;
            box-shadow: 7px 7px 0px 0px #999999; }
        #wrapper main > div#recursos > div#task > article {
          margin: auto;
          margin-left: 8vw;
          display: flex;
          flex-flow: column;
          margin-top: 12.7604166667vw; }
          #wrapper main > div#recursos > div#task > article h1 {
            width: 37.0833333333vw;
            height: auto;
            background-image: url("../images/recursos/task_title_back.png");
            background-size: 100% 100%;
            box-sizing: border-box;
            text-align: center;
            font-size: 3vw;
            padding-top: 2vw;
            padding-bottom: 2vw;
            color: #008ba8;
            font-family: "supersonic_rocketshipregular";
            margin: 0 auto; }
          #wrapper main > div#recursos > div#task > article a {
            margin: auto;
            margin-top: 6.9270833333vw;
            width: 19.4270833333vw;
            max-width: 373px;
            display: flex;
            align-items: center; }
            #wrapper main > div#recursos > div#task > article a img {
              width: 100%; }
      #wrapper main > div#recursos > div#game {
        width: calc(98vw - 20px);
        height: auto;
        background: #000;
        position: absolute;
        top: 60px;
        left: 0;
        border: 10px solid #FFF;
        border-radius: 10px;
        box-sizing: border-box; }
      #wrapper main > div#recursos > a#back_game {
        position: absolute;
        right: 0;
        top: -40px;
        width: 9.1145833333vw;
        max-width: 175px;
        display: flex;
        flex-flow: column;
        text-decoration: none; }
        #wrapper main > div#recursos > a#back_game img {
          width: 50%;
          height: auto;
          margin: auto;
          max-width: 80px;
          margin-bottom: 0; }
        #wrapper main > div#recursos > a#back_game > div.tooltip {
          position: absolute;
          bottom: -20px;
          font-size: 13px;
          font-family: "supersonic_rocketshipregular";
          color: #1D748B;
          opacity: 0;
          background-image: url("../images/tooltip.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          padding: 6px 20px;
          text-transform: uppercase;
          left: 50%;
          transform: translate(-50%, 0); }
      #wrapper main > div#recursos > a#back_game:hover > div.tooltip {
        opacity: 1; }

#loading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #000;
  display: flex;
  z-index: 200; }
  #loading p {
    font-family: "supersonic_rocketshipregular";
    color: #FFF;
    font-size: 20px;
    margin: auto; }

.magazine-content {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  display: none; }
  .magazine-content > a.close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: auto; }
    .magazine-content > a.close img {
      width: 100%;
      height: auto; }
  .magazine-content > a.left {
    position: absolute;
    width: 27px;
    height: 42px;
    top: calc(50vh - 21px);
    left: 20px;
    z-index: 2000; }
  .magazine-content > a.right {
    position: absolute;
    width: 27px;
    height: 42px;
    top: calc(50vh - 21px);
    right: 20px;
    z-index: 2000; }

/*# sourceMappingURL=styles.css.map */