@charset "UTF-8";
/* FUENTES -------------------------------
    family: 'Rochester', cursive;
    family: 'Mali', cursive;
    family: 'Barlow Condensed', sans-serif;
*/
body #orientation-device.active .close, body header .descriptions .help .term .box .message .close {
  display: block;
  width: 35px;
  height: 35px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-image: url(../image/ico-cerrar-blanco.png);
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 15px;
  right: 15px;
}

html {
  scroll-behavior: smooth;
}

a:hover, a:visited, a:link, a:active {
  text-decoration: none !important;
}

body {
  margin: 0;
}
body * {
  box-sizing: border-box;
}
body figure {
  margin: 0;
}
body figure img {
  max-width: 100%;
  display: block;
}
body h1, body h2, body h3, body h4, body p, body a, body span, body label {
  font-family: "Mali", cursive;
}
body a, body a * {
  text-decoration: none !important;
}
body header {
  background: #fbe04b;
}
@media (max-width: 1080px) {
  body header {
    /* padding: 50px 0 0; */
    position: relative;
    z-index: 3;
  }
}
body header .top {
  margin: 0 auto;
  display: flex;
}
@media (max-width: 1080px) {
  body header .top {
    justify-content: space-between;
    width: 100vw;
    margin-bottom: 10px;
    top: 0;
    left: 0;
    background: #fbe04b;
    z-index: 1;
  }
}
body header .top .logo {
  display: block;
  max-width: 320px;
}
body header .top .logo img {
  height: 70px;
  padding: 10px 0;
  margin: 0 30px;
  display: block;
}
@media (max-width: 1080px) {
  body header .top .logo img {
    height: 50px;
    padding: 5px 10px;
    margin: 0;
  }
}
body header .top .menu, body header .top .btn-shared {
  display: none;
}
@media (max-width: 1080px) {
  body header .top .menu, body header .top .btn-shared {
    position: absolute;
    top: 0;
    right: 0;
    -webkit-appearance: inherit;
    display: block;
    margin: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    font-size: 0;
    outline: none;
  }
}
body header .top .menu:focus, body header .top .btn-shared:focus {
  background-color: rgba(0, 0, 0, 0.1);
}
body header .top .btn-shared {
  background-image: url(https://centrogabo.org/especiales/gabriel-garcia-marquez/themes/custom/gabo_theme/image/ico-share.svg);
  background-size: 30px;
}
body header .top .menu {
  position: absolute;
  background-image: url(https://centrogabo.org/especiales/gabriel-garcia-marquez/themes/custom/gabo_theme/image/ico-menu-blanco.png);
  background-size: 40px;
}
body header .top .menu.active {
  background-image: url(https://centrogabo.org/especiales/gabriel-garcia-marquez/themes/custom/gabo_theme/image/ico-cerrar-blanco.png);
  background-size: 30px;
}
@media (max-width: 1080px) {
  body header nav {
    position: fixed;
    top: 50px;
    right: 0;
    width: 170px;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    -webkit-transition: all 0.15s linear;
    transition: all 0.15s linear;
    z-index: 2;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  body header nav {
    height: calc(100vh - 50px);
  }
}
body header nav ul {
  display: flex;
  padding: 0;
  margin: 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  body header nav ul {
    flex-direction: column;
    height: calc(100vh - 90px);
  }
}
@media (max-width: 480px) {
  body header nav ul {
    flex-direction: column;
    height: 340px;
  }
}
body header nav ul li {
  list-style: none;
  width: 25%;
  height: 74px;
  border-bottom: 4px solid #fff;
}
@media (max-width: 1080px) {
  body header nav ul li {
    width: 100%;
    height: 14%;
    border: 0;
    position: relative;
  }
}
body header nav ul li a {
  display: block;
  width: 100%;
  height: 100%;
}
body header nav ul li a .field {
  margin: 10px auto;
  width: 145px;
  height: 50px;
  border: 2px dashed #fff;
  border-radius: 4px;
  font-family: "Rochester", cursive;
  font-size: 30px;
  line-height: 50px;
  color: #fff;
  text-align: center;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
body header nav ul li a .field:hover {
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}
@media (max-width: 1080px) {
  body header nav ul li a .field {
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 0 0 0 50px;
    border: 0;
    font-size: 24px;
    line-height: 1.1em;
    text-align: left;
  }
  body header nav ul li a .field:hover {
    -webkir-transform: none;
    transform: none;
  }
}
body header nav ul li.active {
  border-width: 0 4px;
  border-style: solid;
  border-color: transparent #fff;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  body header nav ul li.active {
    border: 0;
  }
}
body header nav ul li.home {
  background: #fbe04b;
}
body header nav ul li.home .field {
  color: #000;
}
body header nav ul li:nth-child(2) {
  background: #5a00ff;
}
body header nav ul li:nth-child(2).active {
  border-left: 0;
}
body header nav ul li:nth-child(3) {
  background: #ff7b23;
}
body header nav ul li:nth-child(4) {
  background: #99cc33;
}
body header nav ul li:nth-child(5) {
  background: #f15601;
}
body header nav ul li:nth-child(6) {
  background: #00a3a1;
}
body header nav ul li:nth-child(6).active {
  border-right: 0;
}
body header nav ul li.how {
  background: #5f2404;
}
body header nav ul li.movil {
  display: none;
}
@media (max-width: 1080px) {
  body header nav ul li.movil {
    display: block;
  }
}
body header nav ul li.movil a:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  margin: auto;
}
body header nav ul li.movil.home a:before {
  background-image: url(https://centrogabo.org/especiales/gabriel-garcia-marquez/themes/custom/gabo_theme/image/ico-home.svg);
  background-size: 24px;
}
body header nav ul li.movil.how a:before {
  background-image: url(https://centrogabo.org/especiales/gabriel-garcia-marquez/themes/custom/gabo_theme/image/forma-estrella-blanca.png);
}
body header nav.active {
  -webkit-transform: translate(0);
  transform: translate(0);
}
body header .descriptions {
  background: #ffad33;
  height: 70px;
  padding: 10px;
  position: relative;
}
@media (max-width: 1080px) {
  body header .descriptions {
    position: absolute;
    width: 100%;
    height: 10px;
    padding: 0;
    top: 51px;
    left: 0;
    z-index: 1;
  }
}
body header .descriptions .help {
  display: none;
}
@media (max-width: 1080px) {
  body header .descriptions .help {
    display: block;
  }
}
body header .descriptions .help .term {
  width: 110px;
  height: 30px;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #fff;
  border-radius: 6px 6px 0 0;
  background: #ffad33;
  position: absolute;
  top: -30px;
  right: 0;
  left: 0;
  margin: auto;
  z-index: 2;
}
body header .descriptions .help .term .title-term {
  font-family: "Rochester", cursive;
  font-size: 18px;
  line-height: 34px;
  color: #fff;
  text-align: center;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
body header .descriptions .help .term .box {
  width: 25px;
  height: 25px;
  position: absolute;
  top: -5px;
  right: -10px;
}
body header .descriptions .help .term .box .icon {
  display: block;
  width: 25px;
  height: 25px;
  padding: 2px;
  border-radius: 50%;
  background: #ff6600;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
body header .descriptions .help .term .box .icon:before {
  content: "i";
  display: block;
  width: 21px;
  height: 21px;
  padding: 0 0 0 1px;
  border: 1.5px dotted #fff;
  border-radius: 50%;
  box-sizing: border-box;
  font-family: "Mali", cursive;
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  line-height: 16px;
  color: #fff;
  text-align: center;
}
body header .descriptions .help .term .box .icon.close:before {
  content: "x";
}
body header .descriptions .help .term .box .message {
  position: absolute;
  top: 8px;
  left: 8px;
  margin: 0;
  width: calc(50vw - 50px);
  padding: 8px 10px 10px 10px;
  border-radius: 5px;
  background: #ff6600;
  font-family: "Mali", cursive;
  font-size: 14px;
  line-height: 1.4em;
  color: #fff;
  -webkit-transform: scale(0);
  transform: scale(0);
  transform-origin: top left;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
body header .descriptions .help .term .box .message.active {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}
body header .descriptions .help .term .box .message .close {
  background-color: #ff6600;
}
body header .descriptions .texto {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 50px;
}
@media (max-width: 1080px) {
  body header .descriptions .texto {
    display: none;
  }
}
body header .descriptions .texto p {
  font-family: "Mali", cursive;
  font-size: 14px;
  line-height: 1.5em;
  color: #fff;
  text-align: center;
  max-width: 60%;
  margin: 0 auto;
}
body header .descriptions .boton {
  display: block;
  width: 145px;
  height: 55px;
  padding: 0 0 0 40px;
  border: 2px dashed #fff;
  border-radius: 4px;
  background-image: url(https://centrogabo.org/especiales/gabriel-garcia-marquez/themes/custom/gabo_theme/image/forma-estrella-como.png);
  background-size: 30px;
  background-position: top left 10px;
  background-repeat: no-repeat;
  font-family: "Rochester", cursive;
  font-size: 30px;
  line-height: 51px;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(10% - 70px);
  margin: auto;
  cursor: pointer;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
@media (max-width: 1080px) {
  body header .descriptions .boton {
    display: none;
  }
}
body header .descriptions .boton:hover {
  -webkit-transform: scale(1);
  transform: scale(1);
}
body header .descriptions.quien {
  background: #5a00ff;
}
body header .descriptions.quien .help .term {
  background: #5a00ff;
}
body header .descriptions.que {
  background: #ff7b23;
}
body header .descriptions.que .help .term {
  background: #ff7b23;
}
body header .descriptions.cuando {
  background: #99cc33;
}
body header .descriptions.cuando .help .term {
  background: #99cc33;
}
body header .descriptions.donde {
  background: #f15601;
}
body header .descriptions.donde .help .term {
  background: #f15601;
}
body header .descriptions.por.que {
  background: #00a3a1;
}
body header .descriptions.por.que .help .term {
  background: #00a3a1;
}
body header.front .title {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  height: 100px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 1;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  body header.front .title {
    top: 0;
    left: 40%;
    width: 60%;
    height: 50px;
    z-index: 0;
  }
}
@media (max-width: 480px) {
  body header.front .title {
    top: -50px;
    left: auto;
    right: 0;
    width: calc(100% - 200px);
    height: 50px;
    z-index: 2;
  }
}
body header.front .title .gabo {
  width: 100%;
  height: 100px;
  padding: 0 10% 0 30px;
  background: #ffad33;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  body header.front .title .gabo {
    height: 50px;
    padding: 0 10%;
  }
}
@media (max-width: 480px) {
  body header.front .title .gabo {
    height: 50px;
    padding: 0 10%;
  }
}
body header.front .title .gabo h1 {
  font-family: "Neuton", serif;
  font-weight: 700;
  font-size: 60px;
  line-height: 1em;
  color: #fff;
  margin: 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  body header.front .title .gabo h1 {
    font-size: 30px;
  }
}
@media (max-width: 480px) {
  body header.front .title .gabo h1 {
    font-size: 22px;
  }
}
@media (max-width: 1080px) {
  body header.not-front {
    /* padding: 60px 0 0; */
  }
}
@media (max-width: 1080px) {
  body header.not-front .top {
    border-bottom: 1px solid #fff;
  }
}
@media (max-width: 1080px) {
  body header.not-front .top img {
    padding: 5px;
    width: 50px;
  }
}
body header.not-front .top img.movil {
  display: none;
}
@media (max-width: 1080px) {
  body header.not-front .top img.movil {
    display: block;
  }
}
@media (max-width: 1080px) {
  body header.not-front .top img.desktop {
    display: none;
  }
}
@media (max-width: 1080px) {
  body header.not-front .top .title {
    display: block;
    width: calc(100% - 50px);
    height: 50px;
  }
}
body header.not-front .top .title .gabo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 0 10px;
  background: #ffad33;
}
@media (min-width: 1080px) {
  body header.not-front .top .title .gabo {
    padding: 0;
    background: transparent;
    margin: 10px 0;
  }
}
body header.not-front .top .title .gabo h2 {
  font-family: "Mali", cursive;
  font-weight: 700;
  font-size: 22px;
  font-style: normal;
  line-height: 1em;
  color: #fff;
  margin: 0;
}
@media (max-width: 639px) {
  body header.not-front .top .title .gabo h2 {
    font-size: 18px;
    width: 90px;
  }
}
@media (min-width: 1080px) {
  body header.not-front .top .title .gabo h2:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin: 0 25px 0 0;
    width: 2px;
    height: 50px;
    background: #000;
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
  }
}
body header.not-front .top .title .gabo h2 a {
  color: #fff;
  font-family: "Neuton", serif;
}
@media (min-width: 1080px) {
  body header.not-front .top .title .gabo h2 a {
    color: #000;
  }
}
@media (max-width: 1080px) {
  body header.not-front .top .btn-shared {
    position: absolute;
    right: 40px;
  }
}
body main > .breadcrumb {
  height: 50px;
  padding: 10px;
  background: #fff;
}
@media (max-width: 1080px) {
  body main > .breadcrumb {
    height: 34px;
    padding: 2px 15px;
  }
}
body main > .breadcrumb ol {
  list-style: none;
  max-width: 1220px;
  padding: 0;
  margin: 0 auto;
  display: flex;
}
body main > .breadcrumb ol li {
  font-family: "Mali", cursive;
  font-size: 14px;
  line-height: 30px;
  color: #666;
  margin: 0 4px 0 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
body main > .breadcrumb ol li a {
  font-weight: 700;
  color: #ff7b23;
  display: flex;
}
body main > .breadcrumb ol li a:after {
  content: "";
  display: block;
  margin: 3px;
  width: 24px;
  height: 24px;
  background-image: url(https://centrogabo.org/especiales/gabriel-garcia-marquez/themes/custom/gabo_theme/image/flecha-migas.png);
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}
body main > .breadcrumb ol li:first-child a {
  font-size: 0;
  padding: 0 0 0 24px;
  background-image: url(https://centrogabo.org/especiales/gabriel-garcia-marquez/themes/custom/gabo_theme/image/ico-home.png);
  background-size: 24px;
  background-position: center left;
  background-repeat: no-repeat;
}
body footer {
  position: relative;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  z-index: 2;
}
@media (max-width: 1080px) {
  body footer {
    bottom: 0;
    left: 0;
    width: 100vw;
  }
}
body footer .desplegar {
  display: none;
}
@media (max-width: 1080px) {
  body footer .desplegar {
    display: block;
    width: 170px;
    height: 24px;
    border-width: 4px 4px 0;
    border-style: solid;
    border-color: #fff;
    border-radius: 6px 6px 0 0;
    background: #fbdf4b;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    top: -20px;
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: 1;
  }
  body footer .desplegar:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 10px;
    width: 15px;
    height: 15px;
    background-image: url(../image/desplegar-footer.png);
    background-size: 15px;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transition: all 0.15s linear;
    transition: all 0.15s linear;
  }
}
body footer .content {
  display: flex;
  padding: 20px 0;
  border-top: 4px solid #fff;
  background: #fbe04b;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  body footer .content {
    flex-wrap: wrap;
    padding: 15px 10px 0;
    height: 15px;
    overflow: hidden;
  }
}
@media (max-width: 480px) {
  body footer .content {
    flex-wrap: wrap;
    padding: 0;
    height: 15px;
    overflow: hidden;
  }
}
body footer .content .column {
  height: 100px;
}
@media (max-width: 1080px) {
  body footer .content .column {
    height: auto;
  }
}
body footer .content .column.logo {
  width: 60%;
  display: flex;
  justify-content: space-between;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  body footer .content .column.logo {
    width: 75%;
    padding: 20px 0;
    flex-wrap: wrap;
  }
}
@media (max-width: 480px) {
  body footer .content .column.logo {
    width: 100%;
    flex-wrap: wrap;
  }
}
body footer .content .column.logo .column-3 {
  width: 33.3%;
  border-right: 2px solid #fff;
}
@media (max-width: 480px) {
  body footer .content .column.logo .column-3 {
    width: 50%;
    padding: 15px 20px;
  }
}
body footer .content .column.logo .column-3 h4 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 18px;
  width: 120px;
  margin: 0 auto 20px;
  position: relative;
}
body footer .content .column.logo .column-3 h4:before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url(../image/flechas-footer.png);
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: darken;
  position: absolute;
  top: 7px;
  left: -18px;
}
body footer .content .column.logo .column-3 ul {
  list-style: none;
  width: 120px;
  padding: 0;
  margin: 0 auto;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  body footer .content .column.logo .column-3.logo {
    border: 0;
  }
}
@media (max-width: 480px) {
  body footer .content .column.logo .column-3.logo {
    width: 100%;
    border: 0;
  }
}
body footer .content .column.logo .column-3.logo img {
  display: block;
  margin: 0 auto;
  width: 100px;
  height: 100px;
}
body footer .content .column.logo .column-3.nosotros ul li a {
  font-family: "Mali", cursive;
  font-weight: 500;
  font-size: 14px;
  color: #000;
  text-decoration: underline;
}
@media (max-width: 1080px) {
  body footer .content .column.logo .column-3.redes-footer {
    border: 0;
  }
}
body footer .content .column.logo .column-3.redes-footer ul {
  display: flex;
  justify-content: space-between;
  -webkit-filter: contrast(0) brightness(0);
  filter: contrast(0) brightness(0);
}
body footer .content .column.logo .column-3.redes-footer ul li a img {
  display: block;
  width: 30px;
}
body footer .content .column.mintic {
  width: 40%;
}
@media (max-width: 1080px) {
  body footer .content .column.mintic {
    width: 100%;
  }
}
body footer .content .column.mintic figure img {
  margin: 23px auto;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  body footer .content .column.mintic figure img {
    margin: 0 auto;
  }
}
body footer.active .desplegar:after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  body footer.active .content {
    height: 230px;
    padding: 15px 10px;
  }
}
@media (max-width: 480px) {
  body footer.active .content {
    height: 355px;
  }
}
body #orientation-device {
  display: none;
  visibility: hidden;
  overflow: hidden;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
@media (max-width: 480px) {
  body #orientation-device {
    display: block;
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
body #orientation-device.active {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}
@media (max-width: 480px) {
  body #orientation-device.active {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
  }
}
body #orientation-device.active p {
  font-family: "Mali", cursive;
  font-weight: 600;
  font-size: 24px;
  color: #fff;
  margin: 30px 50px;
}
body #orientation-device.active img {
  display: block;
  margin: 0 auto;
}

.shared {
  position: fixed;
  z-index: 4;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  .shared {
    top: 45px;
    right: 10px;
    height: 0;
  }
}
@media (min-width: 1080px) {
  .shared {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    height: 70px;
  }
}
.shared .redes-sociales2 {
  display: flex;
  padding: 10px;
  margin: 0;
  list-style: none;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  .shared .redes-sociales2 {
    -webkit-transform: scale(0);
    transform: scale(0);
    transform-origin: center top;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.15s linear;
    transition: all 0.15s linear;
    background: #fbe04b;
  }
}
@media (min-width: 1080px) {
  .shared .redes-sociales2 {
    padding: 20px;
  }
}
.shared .redes-sociales2 span {
  font-weight: 700;
  line-height: 30px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  .shared .redes-sociales2 span {
    display: none;
  }
}
.shared .redes-sociales2 li a {
  display: block;
  margin: 0 5px 0 5px;
  width: 30px;
  height: 30px;
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 1080px) {
  .shared .redes-sociales2 li a {
    margin: 0 0 0 20px;
  }
}
.shared .redes-sociales2 li a > span {
  display: block;
  width: 30px !important;
  height: 30px !important;
}
.shared .redes-sociales2 li a.a2a_button_facebook {
  background-image: url(https://centrogabo.org/especiales/gabriel-garcia-marquez/themes/custom/gabo_theme/image/ico-facebook.png);
  background-color: #355b95;
}
.shared .redes-sociales2 li a.a2a_button_whatsapp {
  background-image: url(https://centrogabo.org/especiales/gabriel-garcia-marquez/themes/custom/gabo_theme/image/ico-whatsapp.png);
  background-color: #2ab525;
}
.shared .redes-sociales2 li a.a2a_button_email {
  background-image: url(https://centrogabo.org/especiales/gabriel-garcia-marquez/themes/custom/gabo_theme/image/ico-email.png);
  background-color: #126cf4;
}
.shared .redes-sociales2 li a:hover span {
  opacity: 1 !important;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  .shared .redes-sociales2 li:nth-child(2) a {
    margin: 0;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  .shared.active .redes-sociales2 {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    visibility: visible;
  }
}
.shared.rojo .redes-sociales2 a {
  background-color: #e03838;
}
.shared.naranja .redes-sociales2 a {
  background-color: #edb352;
}
.shared.verde .redes-sociales2 a {
  background-color: #9c9c3c;
}
.shared.verde-2 .redes-sociales2 a {
  background-color: #a3bd31;
}
.shared.azul .redes-sociales2 a {
  background-color: #507b84;
}
.shared.fucsia .redes-sociales2 a {
  background-color: #bd0052;
}

.back {
  display: block;
  width: 100px;
  height: 40px;
  border-radius: 10px 10px 0 0;
  position: absolute;
  bottom: 0;
  left: calc(50% - 590px);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  z-index: 1;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  .back {
    bottom: 0;
    left: 10px;
  }
}
.back:before {
  content: "";
  display: inline-block;
  margin: 0 5px 0 0;
  width: 0;
  height: 0;
  border-width: 0 0 10px 10px;
  border-style: solid;
  border-color: transparent #fff #fff transparent;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.back.rojo {
  background: #e03838;
}
.back.verde {
  background: #9c9c3c;
}
.back.azul {
  background: #507b84;
}
.back.fucsia {
  background: #bd0052;
}
.back.naranja {
  background: #edb352;
}

.front {
  position: relative;
  top: -200px;
  margin-bottom: -10px;
}

main#intro {
  display: flex;
  position: relative;
}
@media (max-width: 480px) {
  main#intro {
    flex-direction: column;
    height: calc(100vh - 65px);
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#intro {
    height: calc(100vh - 70px);
  }
}
main#intro .legacy a, main#intro .legacy .box {
  opacity: 0;
}
main#intro .legacy {
  width: 20%;
  min-height: calc(100vh - 190px);
  padding: 120px 20px 30px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#intro .legacy {
    height: calc(100vh - 70px);
    min-height: auto;
    padding: 15px 10px 40px;
    position: relative;
  }
}
@media (max-width: 480px) {
  main#intro .legacy {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 20%;
    min-height: auto;
    padding: 0 20px;
  }
}
main#intro .legacy figure {
  position: relative;
  z-index: 1;
}
main#intro .legacy figure img {
  display: block;
  margin: 0 auto;
  height: 300px;
  object-fit: contain;
  object-position: bottom;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#intro .legacy figure img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: 0 10px;
  }
}
@media (max-width: 480px) {
  main#intro .legacy figure img {
    height: 100%;
    width: 30vw;
    object-fit: cover;
    object-position: 0 10px;
  }
}
main#intro .legacy .action {
  display: block;
  margin: -15px auto 25px;
  width: 145px;
  height: 55px;
  border: 2px dashed #fff;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.1);
  font-family: "Rochester", cursive;
  font-size: 30px;
  line-height: 51px;
  color: #fff;
  text-align: center;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
@media (min-width: 1080px) {
  main#intro .legacy .action:hover {
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
    z-index: 1;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#intro .legacy .action {
    width: 100%;
    height: 40px;
    border-style: dotted;
    margin: 1px 0 0;
    font-size: 21px;
    line-height: 36px;
  }
}
@media (max-width: 480px) {
  main#intro .legacy .action {
    margin: auto 5px;
  }
}
@media (max-width: 1080px) {
  main#intro .legacy .summary {
    display: none;
  }
}
main#intro .legacy .summary p {
  font-family: "Mali", cursive;
  font-size: 17px;
  line-height: 1.2em;
  color: #fff;
  margin: 0;
}
main#intro .legacy .box .ico-help {
  display: block;
  margin: 10px auto 0;
  width: 35px;
  height: 35px;
  padding: 5px;
  border-radius: 50%;
  background: #fcad34;
  position: relative;
  z-index: 2;
}
@media (min-width: 1180px) {
  main#intro .legacy .box .ico-help {
    display: none;
  }
}
main#intro .legacy .box .ico-help:before {
  content: "?";
  display: block;
  width: 25px;
  height: 25px;
  border: 1.5px dotted #fff;
  border-radius: 50%;
  box-sizing: border-box;
  font-family: "Mali", cursive;
  font-weight: 700;
  font-style: normal;
  line-height: 22px;
  color: #fff;
  text-align: center;
}
main#intro .legacy .box .ico-help.active:before {
  content: "x";
  line-height: 17px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#intro .legacy .box .summary {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15px 10px;
    background: rgba(0, 0, 0, 0.8);
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear;
  }
  main#intro .legacy .box .summary.active {
    z-index: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    visibility: visible;
  }
  main#intro .legacy .box .summary.active p {
    font-size: 2vw;
  }
}
main#intro .legacy:first-child {
  background: #5a00ff;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#intro .legacy:first-child figure img {
    object-position: 0 -70px;
  }
}
@media (max-width: 480px) {
  main#intro .legacy:first-child figure img {
    object-position: 0 -24vw;
  }
}
main#intro .legacy:nth-child(2) {
  background: #ff7b23;
}
main#intro .legacy:nth-child(3) {
  background: #99cc33;
}
main#intro .legacy:nth-child(4) {
  background: #f15601;
}
main#intro .legacy:nth-child(5) {
  background: #00a3a1;
}

main#arbol {
  position: relative;
}
main#arbol .center .content {
  display: flex;
  flex-wrap: wrap;
  padding: 15px calc(50% - 600px) 50px;
  background: #fef271;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content {
    padding: 10px 10px 70px;
  }
}
main#arbol .center .content h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: #1b859a;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0 0 20px;
  width: 100%;
}
@media (max-width: 1080px) {
  main#arbol .center .content h1 {
    font-size: 24px;
  }
}
main#arbol .center .content .left {
  width: 160px;
  padding: 30px 0;
  margin: 0 10px 0 0;
  position: relative;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .left {
    width: 170px;
  }
}
main#arbol .center .content .left .navigator {
  display: block;
  width: 0;
  height: 0;
  border-width: 0 0 30px 30px;
  border-style: solid;
  border-color: transparent #407205 #407205 transparent;
  margin: 0 auto;
  font-size: 0;
  position: absolute;
  left: 0;
  right: 0;
}
main#arbol .center .content .left .navigator.top {
  top: 0;
  transform: rotate(-135deg) translate(-10px, -10px);
}
main#arbol .center .content .left .navigator.bottom {
  bottom: 0;
  transform: rotate(45deg) translate(-10px, -10px);
}
main#arbol .center .content .left .personajes {
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .left .personajes {
    display: flex;
    flex-wrap: wrap;
  }
}
main#arbol .center .content .left .personajes li {
  position: relative;
  padding: 2px 0;
  margin: 12px 0;
  border-radius: 4px;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  z-index: 1;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .left .personajes li {
    width: 50%;
    padding: 5px;
    margin: 4px 0;
  }
}
main#arbol .center .content .left .personajes li.off {
  opacity: 0.3;
  cursor: not-allowed;
}
main#arbol .center .content .left .personajes li.off img {
  cursor: not-allowed;
}
main#arbol .center .content .left .personajes li img {
  display: block;
  margin: 0 auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #d3bc7a;
  object-fit: cover;
  cursor: grab;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .left .personajes li img {
    width: 40px;
    height: 40px;
  }
}
main#arbol .center .content .left .personajes li:hover {
  background: rgba(255, 255, 255, 0.6);
}
main#arbol .center .content .left .personajes li span {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  display: block;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .left .personajes li span {
    font-size: 14px;
    line-height: 1em;
    display: block;
  }
}
main#arbol .center .content .right {
  width: calc(100% - 170px);
  background: #fff;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right {
    width: calc(100vw - 200px);
  }
}
main#arbol .center .content .right .tree {
  margin: 0 auto;
  width: 920px;
  height: 690px;
  background-image: url(../image/new_arbol.png);
  background-size: 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: relative;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree {
    width: 100%;
    height: 300px;
    background-size: auto 300px;
  }
}
main#arbol .center .content .right .tree ul {
  margin: 0;
  list-style: none;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul {
    position: relative;
    width: 300px;
    height: 300px;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
  }
}
main#arbol .center .content .right .tree ul li {
  width: 72px;
  height: 72px;
  border: 2px dotted #007600;
  border-radius: 50%;
  background: #fff167;
  position: absolute;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li {
    width: 32px;
    height: 32px;
  }
}
main#arbol .center .content .right .tree ul li div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
main#arbol .center .content .right .tree ul li.pic div {
  background-color: #d3bc7a;
  cursor: pointer;
}
main#arbol .center .content .right .tree ul li#plyr1 {
  top: 46px;
  left: 275px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr1 {
    top: 6%;
    left: 23%;
  }
}
main#arbol .center .content .right .tree ul li#plyr2 {
  top: 46px;
  left: 351px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr2 {
    top: 6%;
    left: 34%;
  }
}
main#arbol .center .content .right .tree ul li#plyr3 {
  top: 46px;
  left: 475px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr3 {
    top: 6%;
    left: 52%;
  }
}
main#arbol .center .content .right .tree ul li#plyr4 {
  top: 46px;
  left: 551px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr4 {
    top: 6%;
    left: 63%;
  }
}
main#arbol .center .content .right .tree ul li#plyr5 {
  top: 191px;
  left: 391px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr5 {
    top: 27%;
    left: 40%;
  }
}
main#arbol .center .content .right .tree ul li#plyr6 {
  top: 191px;
  left: 468px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr6 {
    top: 27%;
    left: 51%;
  }
}
main#arbol .center .content .right .tree ul li#plyr7 {
  top: 159px;
  left: 199px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr7 {
    top: 23%;
    left: 12%;
  }
}
main#arbol .center .content .right .tree ul li#plyr8 {
  top: 208px;
  left: 139px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr8 {
    top: 30%;
    left: 3%;
  }
}
main#arbol .center .content .right .tree ul li#plyr9 {
  top: 277px;
  left: 172px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr9 {
    top: 40%;
    left: 8%;
  }
}
main#arbol .center .content .right .tree ul li#plyr10 {
  top: 310px;
  left: 245px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr10 {
    top: 44.5%;
    left: 18.5%;
  }
}
main#arbol .center .content .right .tree ul li#plyr11 {
  top: 321px;
  left: 325px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr11 {
    top: 46%;
    left: 30%;
  }
}
main#arbol .center .content .right .tree ul li#plyr12 {
  top: 321px;
  left: 534px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr12 {
    top: 46%;
    left: 60.5%;
  }
}
main#arbol .center .content .right .tree ul li#plyr13 {
  top: 310px;
  left: 614px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr13 {
    top: 44.5%;
    left: 72%;
  }
}
main#arbol .center .content .right .tree ul li#plyr14 {
  top: 277px;
  left: 687px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr14 {
    top: 40%;
    left: 83%;
  }
}
main#arbol .center .content .right .tree ul li#plyr15 {
  top: 208px;
  left: 721px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr15 {
    top: 30%;
    left: 88%;
  }
}
main#arbol .center .content .right .tree ul li#plyr16 {
  top: 159px;
  left: 660px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr16 {
    top: 23%;
    left: 79%;
  }
}
main#arbol .center .content .right .tree ul li#plyr17 {
  top: 386px;
  left: 391px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr17 {
    top: 55.5%;
    left: 40%;
  }
}
main#arbol .center .content .right .tree ul li#plyr18 {
  top: 386px;
  left: 468px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr18 {
    top: 55.5%;
    left: 51%;
  }
}
main#arbol .center .content .right .tree ul li#plyr19 {
  top: 452px;
  left: 276px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr19 {
    top: 65%;
    left: 23%;
  }
}
main#arbol .center .content .right .tree ul li#plyr20 {
  top: 452px;
  left: 583px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#arbol .center .content .right .tree ul li#plyr20 {
    top: 65%;
    left: 68%;
  }
}
main#arbol .modal {
  position: absolute;
  width: 40%;
  top: 30%;
  right: 0;
  left: 130px;
  margin: auto;
  background-color: #ff9802;
  padding: 20px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 7px;
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
@media (max-width: 1080px) {
  main#arbol .modal {
    width: calc(100vw - 220px);
    top: 105px;
    left: 180px;
  }
}
main#arbol .modal .close {
  -webkit-appearance: inherit;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-image: url(../image/ico-cerrar-blanco.png);
  background-size: 24px;
  background-position: center;
  background-color: #115f72;
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0;
  outline: none;
  cursor: pointer;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  z-index: 1;
}
main#arbol .modal .close:hover {
  background-color: #0f4253;
}
main#arbol .modal .box h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 24px;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
}
@media (max-width: 1080px) {
  main#arbol .modal .box h2 {
    font-size: 21px;
  }
}
main#arbol .modal .box h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 18px;
  color: #fef271;
  text-transform: uppercase;
  margin: 0 0 10px;
}
@media (max-width: 1080px) {
  main#arbol .modal .box h3 {
    font-size: 16px;
  }
}
main#arbol .modal .box p {
  font-size: 14px;
  color: #333;
  margin: 0;
}
main#arbol .modal.active {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

main#amigo .center {
  padding: 15px 0 50px;
  background: #bd0052;
  position: relative;
}
main#amigo .center .content {
  max-width: 1200px;
  margin: 0 auto;
}
main#amigo .center .content h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 36px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 0 0 10px;
}
@media (max-width: 1080px) {
  main#amigo .center .content h1 {
    font-size: 24px;
    padding: 0 20px;
  }
}
main#amigo .center .content .media {
  background: #fff;
  padding: 20px;
}
main#amigo .center .content .media .view-content {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}
main#amigo .center .content .media .view-content > div {
  width: calc(50% - 10px);
  border: 1px solid #eee;
  margin: 20px 0 0;
}
@media (max-width: 480px) {
  main#amigo .center .content .media .view-content > div {
    width: 100%;
  }
}
main#amigo .center .content .media .view-content > div > div {
  display: flex;
}
main#amigo .center .content .media .view-content > div > div figure {
  width: 110px;
}
@media (max-width: 1080px) {
  main#amigo .center .content .media .view-content > div > div figure {
    width: 100px;
  }
}
main#amigo .center .content .media .view-content > div > div figure img {
  display: block;
  width: 110px;
  height: 110px;
  object-fit: cover;
}
@media (max-width: 1080px) {
  main#amigo .center .content .media .view-content > div > div figure img {
    width: 100px;
    height: 100px;
  }
}
main#amigo .center .content .media .view-content > div > div .datos {
  width: calc(100% - 110px);
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (max-width: 1080px) {
  main#amigo .center .content .media .view-content > div > div .datos {
    padding: 10px;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#amigo .center .content .media .view-content > div > div .datos {
    width: calc(100% - 100px);
    flex-direction: column;
    justify-content: center;
  }
}
main#amigo .center .content .media .view-content > div > div .datos .people {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
main#amigo .center .content .media .view-content > div > div .datos .people h2 {
  font-family: sans-serif;
  font-size: 16px;
  color: #2c4387;
  margin: 0 0 5px;
}
@media (max-width: 1080px) {
  main#amigo .center .content .media .view-content > div > div .datos .people h2 {
    font-size: 14px;
    margin: 0;
  }
}
main#amigo .center .content .media .view-content > div > div .datos .people span {
  font-family: sans-serif;
  font-size: 14px;
  color: #666;
}
@media (max-width: 1080px) {
  main#amigo .center .content .media .view-content > div > div .datos .people span {
    font-size: 12px;
    margin: 0 0 8px;
  }
}
main#amigo .center .content .media .view-content > div > div .datos .show {
  width: 100px;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f5f7f7;
  margin: auto 0;
  font-family: sans-serif;
  font-size: 14px;
  cursor: pointer;
  outline: none;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#amigo .center .content .media .view-content > div > div .datos .show {
    height: 24px;
    margin: 0;
    font-size: 12px;
  }
}
main#amigo .center .content .media .view-content > div:first-child, main#amigo .center .content .media .view-content > div:nth-child(2) {
  margin: 0;
}
@media (max-width: 480px) {
  main#amigo .center .content .media .view-content > div:nth-child(2) {
    margin: 20px 0 0;
  }
}
main#amigo .center .content .media .live-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 480px;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#amigo .center .content .media .live-box {
    position: absolute;
  }
}
main#amigo .center .content .media .live-box .content-box {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
main#amigo .center .content .media .live-box .content-box .portada {
  height: 270px;
  position: relative;
  background: #ddd;
}
main#amigo .center .content .media .live-box .content-box .portada .close {
  -webkit-appearance: inherit;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-image: url(../image/ico-cerrar-blanco.png);
  background-size: 24px;
  background-position: center;
  background-color: #bd0652;
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0;
  outline: none;
  cursor: pointer;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
main#amigo .center .content .media .live-box .content-box .portada .close:hover {
  background-color: #ea7322;
}
main#amigo .center .content .media .live-box .content-box .portada img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main#amigo .center .content .media .live-box .content-box .profile {
  display: flex;
  justify-content: space-between;
  min-height: 100px;
  padding: 10px;
  border-bottom: 1px solid #ccc;
  background: #fff;
  position: relative;
}
main#amigo .center .content .media .live-box .content-box .profile .perfil {
  width: 110px;
  height: 110px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  margin: -60px 0 0;
}
main#amigo .center .content .media .live-box .content-box .profile .perfil img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main#amigo .center .content .media .live-box .content-box .profile .bio {
  width: calc(100% - 110px);
  padding: 5px 10px;
}
main#amigo .center .content .media .live-box .content-box .profile .bio h2 {
  font-family: sans-serif;
  font-size: 16px;
  color: #2c4387;
  margin: 0 0 5px;
}
@media (max-width: 1080px) {
  main#amigo .center .content .media .live-box .content-box .profile .bio h2 {
    font-size: 14px;
  }
}
main#amigo .center .content .media .live-box .content-box .profile .bio p {
  font-family: sans-serif;
  font-size: 13px;
  line-height: 1.3em;
  color: #333;
  margin: 0;
}
main#amigo .center .content .media .live-box .content-box .actions {
  height: 40px;
  padding: 7px;
  background: #f1f1f1;
  display: flex;
  justify-content: flex-end;
}
main#amigo .center .content .media .live-box .content-box .actions a {
  display: block;
  height: 26px;
  border: 1px solid #ccc;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 26px;
  color: #555;
  text-align: center;
  filter: contrast(0.5);
  background-color: #fff;
  opacity: 0.7;
  cursor: default;
}
main#amigo .center .content .media .live-box .content-box .actions a.amigo {
  width: 110px;
  border-radius: 4px;
  margin: 0 7px 0 0;
  background-image: url(../image/ico-check.png), url(../image/ico-desplegar.png);
  background-position: center left 5px, center right 5px;
  background-size: 16px;
  background-repeat: no-repeat;
}
main#amigo .center .content .media .live-box .content-box .actions a.siguiendo {
  width: 115px;
  border-radius: 4px 0 0 4px;
  background-image: url(../image/ico-check.png), url(../image/ico-desplegar.png);
  background-position: center left 5px, center right 5px;
  background-size: 16px;
  background-repeat: no-repeat;
}
main#amigo .center .content .media .live-box .content-box .actions a.mensaje {
  width: 90px;
  padding: 0 0 0 20px;
  border-left: 0;
  border-radius: 0 4px 4px 0;
  background-image: url(../image/ico-messenger.png);
  background-position: center left 7px;
  background-size: 16px;
  background-repeat: no-repeat;
}
main#amigo .center .content .media .live-box.active {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  z-index: 0;
}

@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#porque .content {
    padding: 0 0 30px;
  }
}
main#porque .content .item {
  display: flex;
  justify-content: space-between;
}
main#porque .content .item > .box {
  width: 50%;
  height: 240px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#porque .content .item > .box {
    height: 180px;
  }
}
main#porque .content .item > .box:first-child {
  padding: 0 25px 0 calc(50% - 620px);
}
@media (max-width: 1080px) {
  main#porque .content .item > .box:first-child {
    padding: 0 15px;
  }
}
main#porque .content .item > .box:last-child {
  padding: 0 calc(50% - 620px) 0 25px;
}
@media (max-width: 1080px) {
  main#porque .content .item > .box:last-child {
    padding: 0 15px;
  }
}
main#porque .content .item > .box.texto {
  border: 1px dotted;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#porque .content .item > .box.texto {
    border: 1px dotted;
  }
}
main#porque .content .item > .box.texto h2, main#porque .content .item > .box.texto h2 a, main#porque .content .item > .box.texto h2 span {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-size: 48px;
  color: #999;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
@media (max-width: 1080px) {
  main#porque .content .item > .box.texto h2, main#porque .content .item > .box.texto h2 a, main#porque .content .item > .box.texto h2 span {
    font-size: 24px;
  }
}
main#porque .content .item > .box.texto p {
  line-height: 1.3em;
  color: #333;
  width: 350px;
  margin: 0 auto;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
@media (max-width: 1080px) {
  main#porque .content .item > .box.texto p {
    font-size: 13px;
    width: auto;
  }
}
main#porque .content .item > .box.texto:after {
  content: "";
  width: 25px;
  height: 25px;
  border-style: dotted;
  background: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
}
main#porque .content .item > .box.imagen {
  position: relative;
  padding: 0;
}
main#porque .content .item > .box.imagen video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main#porque .content .item:nth-child(2) > .box.texto, main#porque .content .item:first-child > .box.texto {
  width: 75%;
  padding: 0 calc(50% - 620px) 0 0;
  border-color: #f7c754;
}
main#porque .content .item:nth-child(2) > .box.texto h2, main#porque .content .item:first-child > .box.texto h2 {
  line-height: 66px;
  height: 70px;
}
main#porque .content .item:nth-child(2) > .box.texto .box, main#porque .content .item:first-child > .box.texto .box {
  display: flex;
  border-top: 1px solid #ddd;
}
main#porque .content .item:nth-child(2) > .box.texto .box > div, main#porque .content .item:first-child > .box.texto .box > div {
  width: 50%;
  height: 160px;
  border-left: 1px solid #ddd;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#porque .content .item:nth-child(2) > .box.texto .box > div, main#porque .content .item:first-child > .box.texto .box > div {
    height: 105px;
  }
}
main#porque .content .item:nth-child(2) > .box.texto .box > div a, main#porque .content .item:first-child > .box.texto .box > div a {
  display: block;
  width: 100%;
  height: 100%;
}
main#porque .content .item:nth-child(2) > .box.texto .box > div a i, main#porque .content .item:first-child > .box.texto .box > div a i {
  display: block;
  margin: 20px auto;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#porque .content .item:nth-child(2) > .box.texto .box > div a i, main#porque .content .item:first-child > .box.texto .box > div a i {
    margin: 10px auto;
    width: 35px;
    height: 35px;
    background-size: 24px;
  }
}
main#porque .content .item:nth-child(2) > .box.texto .box > div a i:before, main#porque .content .item:first-child > .box.texto .box > div a i:before {
  content: "";
  display: block;
  width: 1px;
  height: 20px;
  background: #ddd;
  position: absolute;
  top: -20px;
  right: 0;
  left: 0;
  margin: 0 auto;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#porque .content .item:nth-child(2) > .box.texto .box > div a i:before, main#porque .content .item:first-child > .box.texto .box > div a i:before {
    height: 10px;
    top: -10px;
  }
}
main#porque .content .item:nth-child(2) > .box.texto .box > div a h3, main#porque .content .item:first-child > .box.texto .box > div a h3 {
  font-family: "Mali", cursive;
  font-weight: 400;
  font-size: 16px;
  color: #333;
  text-align: center;
  max-width: 145px;
  margin: 0 auto;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
main#porque .content .item:nth-child(2) > .box.texto .box > div a h3:hover, main#porque .content .item:first-child > .box.texto .box > div a h3:hover {
  color: #d02f7c;
  text-decoration: underline;
}
@media (max-width: 1080px) {
  main#porque .content .item:nth-child(2) > .box.texto .box > div a h3, main#porque .content .item:first-child > .box.texto .box > div a h3 {
    font-size: 13px;
    max-width: 135px;
    padding: 0 5px;
  }
}
main#porque .content .item:nth-child(2) > .box.texto:after, main#porque .content .item:first-child > .box.texto:after {
  border-width: 0 0 1px 1px;
  border-color: #f7c754;
  left: -14px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#porque .content .item:nth-child(2) > .box.texto:after, main#porque .content .item:first-child > .box.texto:after {
    border-width: 0 0 1px 1px;
  }
}
main#porque .content .item:nth-child(2) > .box.imagen, main#porque .content .item:first-child > .box.imagen {
  width: 25%;
}
main#porque .content .item:nth-child(2) > .box.imagen video, main#porque .content .item:first-child > .box.imagen video {
  object-position: center right;
}
main#porque .content .item:nth-child(3) > .box.texto {
  border-color: #7fa83f;
}
main#porque .content .item:nth-child(3) > .box.texto:after {
  border-width: 1px 1px 0 0;
  border-color: #7fa83f;
  right: -14px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#porque .content .item:nth-child(3) > .box.texto:after {
    border-width: 1px 1px 0 0;
  }
}
main#porque .content .item:hover > .box.texto h2 a:hover {
  text-decoration: underline;
}
main#porque .content .item:hover > .box.imagen {
  background-size: auto 110%;
}
main#porque .content .item:hover:nth-child(3) > .box.texto h2, main#porque .content .item:hover:nth-child(3) > .box.texto h2 a, main#porque .content .item:hover:nth-child(3) > .box.texto p {
  color: #fb9901;
  text-decoration: underline;
}

main#porque .content .item:nth-child(1) > .box.texto .box > div.left a i {
  background-image: url(../image/consejos.jpg);
  background-size: contain;
}

main#porque .content .item:nth-child(1) > .box.texto .box > div.center a i {
  background-image: url(../image/anecdotas.jpg);
  background-size: contain;
}

main#porque .content .item:nth-child(1) > .box.texto .box > div.right a i {
  background-image: url(../image/metodos.jpg);
  background-size: contain;
}

main#porque .content .item:nth-child(2) > .box.texto .box > div.left a i {
  background-image: url(../image/postulado.jpg);
  background-size: contain;
}

main#porque .content .item:nth-child(2) > .box.texto .box > div.center a i {
  background-image: url(../image/meme.jpg);
  background-size: contain;
}

main#porque .content .item:nth-child(2) > .box.texto .box > div.right a i {
  background-image: url(../image/paz.jpg);
  background-size: contain;
}

main#players {
  position: relative;
  overflow: hidden;
}
main#players .center #contenedorPuzzle {
  display: flex;
  justify-content: space-between;
}
main#players .center #contenedorPuzzle .content {
  width: 50%;
  padding: 20px;
  position: relative;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#players .center #contenedorPuzzle .content {
    padding: 20px 20px 50px;
  }
}
main#players .center #contenedorPuzzle .content .box {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#players .center #contenedorPuzzle .content .box {
    width: 100%;
    height: 22vw;
  }
}
main#players .center #contenedorPuzzle .content .image {
  padding: 10px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#players .center #contenedorPuzzle .content .image img {
    width: auto;
    height: 100%;
    display: block;
    margin: 0 auto;
  }
}
main#players .center #contenedorPuzzle .content.left {
  background: #a3bd31;
  z-index: 1;
}
main#players .center #contenedorPuzzle .content.left h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 30px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  height: 30px;
  margin: 0 0 20px;
}
@media (max-width: 1080px) {
  main#players .center #contenedorPuzzle .content.left h1 {
    font-size: 24px;
    margin: 0 0 10px;
  }
}
main#players .center #contenedorPuzzle .content.left .box-drag {
  width: 150px;
  margin: 0 auto;
  z-index: 2;
  position: relative;
}
main#players .center #contenedorPuzzle .content.left .image {
  -webkit-filter: brightness(100);
  filter: brightness(100);
}
main#players .center #contenedorPuzzle .content.left .image img {
  cursor: grab;
}
main#players .center #contenedorPuzzle .content.left .image img.active {
  opacity: 0.6;
  cursor: default;
}
main#players .center #contenedorPuzzle .content.left:after {
  content: "";
  display: block;
  width: 70px;
  height: 70px;
  background: #a3bd31;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50px;
  right: -35px;
  bottom: 0;
  margin: auto;
  z-index: 1;
}
main#players .center #contenedorPuzzle .content.right {
  background: #e2dcd0;
}
main#players .center #contenedorPuzzle .content.right .box-pieza {
  width: 300px;
  padding: 50px 0 0;
  margin: 0 auto;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#players .center #contenedorPuzzle .content.right .box-pieza {
    width: 100%;
  }
}
main#players .center #contenedorPuzzle .content.right .box-pieza .box {
  width: 300px;
  display: flex;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#players .center #contenedorPuzzle .content.right .box-pieza .box {
    width: 100%;
  }
}
main#players .center #contenedorPuzzle .content.right .box-pieza .box .image, main#players .center #contenedorPuzzle .content.right .box-pieza .box .color {
  width: 150px;
  height: 150px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#players .center #contenedorPuzzle .content.right .box-pieza .box .image, main#players .center #contenedorPuzzle .content.right .box-pieza .box .color {
    width: 50%;
    height: 22vw;
  }
}
main#players .center #contenedorPuzzle .content.right .box-pieza .box .color .contenedorPieza {
  height: 150px;
  padding: 7px;
  border: 3px dotted #4f7a2d;
  border-radius: 5px;
  background-size: 90%;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#players .center #contenedorPuzzle .content.right .box-pieza .box .color .contenedorPieza {
    height: 100%;
  }
}
main#players .modal {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 420px;
  height: 380px;
  padding: 40px;
  border: 5px dotted #fff;
  border-radius: 10px;
  background: #bd0052;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  z-index: 1;
}
@media (max-width: 1080px) {
  main#players .modal {
    width: 440px;
    height: 260px;
    padding: 15px 50px;
    position: fixed;
    top: 0;
    z-index: 2;
  }
}
main#players .modal .close {
  -webkit-appearance: inherit;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-image: url(../image/ico-cerrar-blanco.png);
  background-size: 24px;
  background-position: center;
  background-color: #115f72;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0;
  outline: none;
  cursor: pointer;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  z-index: 1;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#players .modal .close {
    top: 5px;
    right: 5px;
  }
}
main#players .modal .close:hover {
  background-color: #0f4253;
}
main#players .modal .box .pic {
  height: 150px;
  -webkit-filter: brightness(100);
  filter: brightness(100);
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#players .modal .box .pic {
    height: 100px;
  }
}
main#players .modal .box .pic img {
  margin: 0 5px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#players .modal .box .pic img {
    width: 100px;
  }
}
main#players .modal .box h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 32px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 10px 0;
}
@media (max-width: 1080px) {
  main#players .modal .box h2 {
    font-size: 24px;
    margin: 15px 0 0;
  }
}
main#players .modal .box p {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 21px;
  color: #fff;
  text-align: center;
  margin: 0 0 20px;
}
@media (max-width: 1080px) {
  main#players .modal .box p {
    font-size: 18px;
    margin: 5px 0 10px;
  }
}
main#players .modal .box .link {
  display: block;
  margin: 0 auto;
  width: 140px;
  height: 40px;
  border: 2px dashed #fff;
  border-radius: 4px;
  font-family: "Rochester", cursive;
  font-size: 30px;
  line-height: 34px;
  color: #fff;
  text-align: center;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#players .modal .box .link {
    width: 120px;
    height: 30px;
    font-size: 24px;
    line-height: 22px;
  }
}
main#players .modal.active {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

main#novels .content {
  position: relative;
}
main#novels .content .summary {
  padding: 25px calc(50% - 600px);
  border-bottom: 4px solid #fff;
  background: #73b2af;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#novels .content .summary {
    padding: 15px 50px 20px 20px;
  }
}
main#novels .content .summary h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0 0 20px;
}
@media (max-width: 1080px) {
  main#novels .content .summary h1 {
    font-size: 24px;
    margin: 0 0 10px;
  }
}
main#novels .content .summary p {
  font-family: "Mali", cursive;
  font-weight: 700;
  font-size: 28px;
  color: #fff;
  margin: 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#novels .content .summary p {
    font-size: 16px;
  }
}
main#novels .content .box-slide {
  background: #e9ddbc;
  padding: 20px 50px 40px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#novels .content .box-slide {
    padding: 20px 50px 60px;
  }
}
main#novels .content .box-slide h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #447b78;
  margin: 0;
}
main#novels .content .box-slide .data-slide {
  max-width: 1180px;
  margin: 0 auto;
  height: 0;
  border: 2px solid #ce6b03;
  border-radius: 4px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  position: relative;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
main#novels .content .box-slide .data-slide .close {
  -webkit-appearance: inherit;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-image: url(../image/ico-cerrar-blanco.png);
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #73b2af;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0;
  outline: none;
  cursor: pointer;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  z-index: 1;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#novels .content .box-slide .data-slide .close {
    width: 30px;
    height: 30px;
    top: 5px;
    right: 5px;
  }
}
main#novels .content .box-slide .data-slide .close:hover {
  background-color: #ea7322;
}
main#novels .content .box-slide .data-slide .right {
  width: 190px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#novels .content .box-slide .data-slide .right {
    width: 100px;
  }
}
main#novels .content .box-slide .data-slide .right img {
  display: block;
  width: 100%;
}
main#novels .content .box-slide .data-slide .left {
  width: calc(100% - 190px);
  padding: 20px 70px 0 30px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#novels .content .box-slide .data-slide .left {
    width: calc(100% - 100px);
    padding: 10px 30px 0 10px;
  }
}
main#novels .content .box-slide .data-slide .left h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #cc6600;
  text-transform: uppercase;
  margin: 0 0 15px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#novels .content .box-slide .data-slide .left h2 {
    font-size: 21px;
    margin: 0 0 10px;
  }
}
main#novels .content .box-slide .data-slide .left p {
  font-family: "Mali", cursive;
  font-size: 18px;
  margin: 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#novels .content .box-slide .data-slide .left p {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.25em;
    margin: 0 0 10px;
  }
}
main#novels .content .box-slide .data-slide .left .link {
  display: block;
  margin: 15px 0 20px calc(100% - 295px);
  width: 295px;
  padding: 0 0 0 40px;
  border: 2px dotted #db9600;
  border-radius: 4px;
  background-image: url(../image/mark-guion.png);
  background-size: 40px;
  background-position: top left 20px;
  background-repeat: no-repeat;
  font-family: "Rochester", cursive;
  font-size: 24px;
  line-height: 52px;
  color: #cc6600;
  text-align: center;
}
main#novels .content .box-slide .data-slide.active {
  margin: 25px auto 40px;
  height: auto;
  padding: 10px;
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
  transform: scale(1);
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#novels .content .box-slide .data-slide.active {
    margin: 5px auto 20px;
  }
}
main#novels .content .box-slide .pic {
  margin: 0 auto;
  width: 1180px;
  padding: 20px 20px 40px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#novels .content .box-slide .pic {
    width: 100%;
    padding: 10px 20px;
  }
}
main#novels .content .box-slide .pic .owl-item .portada {
  position: relative;
  margin: 0 auto;
  width: 114px;
  height: 172px;
}
main#novels .content .box-slide .pic .owl-item .portada img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main#novels .content .box-slide .pic .owl-item .portada h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  height: 100%;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  cursor: pointer;
}
main#novels .content .box-slide .pic .owl-item .portada:hover h2 {
  opacity: 1;
  visibility: visible;
}
main#novels .content .box-slide .pic .owl-nav div {
  font-size: 0;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  position: absolute;
  bottom: 0;
  top: 0;
  margin: auto;
}
main#novels .content .box-slide .pic .owl-nav div.owl-prev {
  left: 0;
  border-color: transparent transparent transparent #73b2af;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#novels .content .box-slide .pic .owl-nav div.owl-prev {
    left: -30px;
  }
}
main#novels .content .box-slide .pic .owl-nav div.owl-next {
  right: 0;
  border-color: transparent #73b2af transparent transparent;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#novels .content .box-slide .pic .owl-nav div.owl-next {
    right: -30px;
  }
}
main#novels .content .box-slide .action {
  display: block;
  margin: 10px auto;
  width: 580px;
  height: 60px;
  padding: 0 0 0 40px;
  border: 2px dotted #447b78;
  border-radius: 4px;
  background-image: url(../image/mark-aqua-view.png);
  background-size: 40px;
  background-position: top left 20px;
  background-repeat: no-repeat;
  font-family: "Rochester", cursive;
  font-size: 24px;
  line-height: 56px;
  color: #447b78;
  text-align: center;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#novels .content .box-slide .action {
    width: 460px;
    height: 50px;
    background-size: 32px;
    background-position: top left 12px;
    font-size: 20px;
    line-height: 46px;
  }
}

main#narro .center .container {
  max-width: 1280px;
  padding: 0 2px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#narro .center .container {
    padding: 0 2px 40px;
  }
}
main#narro .center .container .narrate {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: calc(33.3% - 4px);
  height: 360px;
  padding: 15px 20px;
  margin: 0 2px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  position: relative;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#narro .center .container .narrate {
    height: calc(33.3vw - 4px);
    padding: 2vw;
  }
}
main#narro .center .container .narrate:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  position: absolute;
  top: 0;
  left: 0;
}
main#narro .center .container .narrate h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0 0 5px;
  padding: 0 0 0 40px;
  border-bottom: 1px solid;
  background-size: 24px;
  background-position: center left;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#narro .center .container .narrate h2 {
    font-size: 16px;
    line-height: 24px;
    padding: 0 0 0 30px;
    background-size: 24px;
  }
}
main#narro .center .container .narrate h3 {
  font-weight: 400;
  line-height: 1.3em;
  color: #fff;
  margin: 0;
  position: relative;
  z-index: 1;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#narro .center .container .narrate h3 {
    font-size: 10px;
    line-height: 1.2em;
  }
}
main#narro .center .container .narrate.novela {
  background-image: url(../image/que-narro-novela.jpg);
  margin: 0 2px 4px;
}
main#narro .center .container .narrate.novela h2 {
  background-image: url(../image/ico-novela.png);
  border-color: #ba007c;
}
main#narro .center .container .narrate.periodismo {
  background-image: url(../image/que-narro-periodismo.jpg);
}
main#narro .center .container .narrate.periodismo h2 {
  background-image: url(../image/ico-periodismo.png);
  border-color: #f15601;
}
main#narro .center .container .narrate.cuento {
  background-image: url(../image/que-narro-cuento.jpg);
  margin: 0 2px 4px;
}
main#narro .center .container .narrate.cuento h2 {
  background-image: url(../image/ico-cuento.png);
  border-color: #ffcc00;
}
main#narro .center .container .narrate.cine {
  width: calc(50% - 4px);
  background-image: url(../image/que-narro-cine-y-teatro.jpg);
}
main#narro .center .container .narrate.cine h2 {
  background-image: url(../image/ico-cine.png);
  border-color: #006f9b;
}
main#narro .center .container .narrate.tv {
  width: calc(50% - 4px);
  background-image: url(../image/que-narro-tv-y-radio.jpg);
}
main#narro .center .container .narrate.tv h2 {
  background-image: url(../image/ico-tv.png);
  border-color: #ff7b23;
}

@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#quien .content {
    padding: 0 0 30px;
  }
}
main#quien .content .item {
  display: flex;
  justify-content: space-between;
}
main#quien .content .item > .box {
  width: 50%;
  height: 240px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#quien .content .item > .box {
    height: 180px;
  }
}
main#quien .content .item > .box:first-child {
  padding: 0 25px 0 calc(50% - 620px);
}
@media (max-width: 1080px) {
  main#quien .content .item > .box:first-child {
    padding: 0 15px;
  }
}
main#quien .content .item > .box:last-child {
  padding: 0 calc(50% - 620px) 0 25px;
}
@media (max-width: 1080px) {
  main#quien .content .item > .box:last-child {
    padding: 0 15px;
  }
}
main#quien .content .item > .box.texto {
  border: 1px dotted;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#quien .content .item > .box.texto {
    border: 1px dotted;
  }
}
main#quien .content .item > .box.texto h2, main#quien .content .item > .box.texto h2 a, main#quien .content .item > .box.texto h2 span {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-size: 48px;
  color: #999;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
@media (max-width: 1080px) {
  main#quien .content .item > .box.texto h2, main#quien .content .item > .box.texto h2 a, main#quien .content .item > .box.texto h2 span {
    font-size: 24px;
  }
}
main#quien .content .item > .box.texto p {
  line-height: 1.3em;
  color: #333;
  width: 350px;
  margin: 0 auto;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
@media (max-width: 1080px) {
  main#quien .content .item > .box.texto p {
    font-size: 13px;
    width: auto;
  }
}
main#quien .content .item > .box.texto:after {
  content: "";
  width: 25px;
  height: 25px;
  border-style: dotted;
  background: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
}
main#quien .content .item > .box.imagen {
  position: relative;
  padding: 0;
}
main#quien .content .item > .box.imagen video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main#quien .content .item:first-child > .box.texto {
  border-color: #d02f7c;
}
main#quien .content .item:first-child > .box.texto:after {
  border-width: 1px 1px 0 0;
  border-color: #d02f7c;
  right: -14px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#quien .content .item:first-child > .box.texto:after {
    border-width: 1px 1px 0 0;
  }
}
main#quien .content .item:nth-child(2) > .box.texto {
  width: 75%;
  padding: 0 calc(50% - 620px) 0 0;
  border-color: #f7c754;
}
main#quien .content .item:nth-child(2) > .box.texto h2 {
  line-height: 66px;
  height: 70px;
}
main#quien .content .item:nth-child(2) > .box.texto .box {
  display: flex;
  border-top: 1px solid #ddd;
}
main#quien .content .item:nth-child(2) > .box.texto .box > div {
  width: 33.3%;
  height: 160px;
  border-right: 1px solid #ddd;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#quien .content .item:nth-child(2) > .box.texto .box > div {
    height: 105px;
  }
}
main#quien .content .item:nth-child(2) > .box.texto .box > div a {
  display: block;
  width: 100%;
  height: 100%;
}
main#quien .content .item:nth-child(2) > .box.texto .box > div a i {
  display: block;
  margin: 20px auto;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #d02f7c;
  position: relative;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#quien .content .item:nth-child(2) > .box.texto .box > div a i {
    margin: 10px auto;
    width: 35px;
    height: 35px;
    background-size: 24px;
  }
}
main#quien .content .item:nth-child(2) > .box.texto .box > div a i:before {
  content: "";
  display: block;
  width: 1px;
  height: 20px;
  background: #ddd;
  position: absolute;
  top: -20px;
  right: 0;
  left: 0;
  margin: 0 auto;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#quien .content .item:nth-child(2) > .box.texto .box > div a i:before {
    height: 10px;
    top: -10px;
  }
}
main#quien .content .item:nth-child(2) > .box.texto .box > div a h3 {
  font-family: "Mali", cursive;
  font-weight: 400;
  font-size: 16px;
  color: #333;
  text-align: center;
  max-width: 145px;
  margin: 0 auto;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
main#quien .content .item:nth-child(2) > .box.texto .box > div a h3:hover {
  color: #d02f7c;
  text-decoration: underline;
}
@media (max-width: 1080px) {
  main#quien .content .item:nth-child(2) > .box.texto .box > div a h3 {
    font-size: 13px;
    max-width: 135px;
    padding: 0 5px;
  }
}
main#quien .content .item:nth-child(2) > .box.texto .box > div.left a i {
  background-image: url(../image/ico-quien-era-gabo.png);
}
main#quien .content .item:nth-child(2) > .box.texto .box > div.center a i {
  background-image: url(../image/ico-que-tanto-conoces.png);
}
main#quien .content .item:nth-child(2) > .box.texto .box > div.right {
  border: 0;
}
main#quien .content .item:nth-child(2) > .box.texto .box > div.right a i {
  background-image: url(../image/ico-viste-a-gabo.png);
}
main#quien .content .item:nth-child(2) > .box.texto:after {
  border-width: 0 0 1px 1px;
  border-color: #f7c754;
  left: -14px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#quien .content .item:nth-child(2) > .box.texto:after {
    border-width: 0 0 1px 1px;
  }
}
main#quien .content .item:nth-child(2) > .box.imagen {
  width: 25%;
}
main#quien .content .item:nth-child(2) > .box.imagen video {
  object-position: center right;
}
main#quien .content .item:nth-child(3) > .box.texto {
  border-color: #7fa83f;
}
main#quien .content .item:nth-child(3) > .box.texto:after {
  border-width: 1px 1px 0 0;
  border-color: #7fa83f;
  right: -14px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#quien .content .item:nth-child(3) > .box.texto:after {
    border-width: 1px 1px 0 0;
  }
}
main#quien .content .item:hover > .box.texto h2 a:hover {
  text-decoration: underline;
}
main#quien .content .item:hover > .box.imagen {
  background-size: auto 110%;
}
main#quien .content .item:hover:first-child > .box.texto h2, main#quien .content .item:hover:first-child > .box.texto h2 a, main#quien .content .item:hover:first-child > .box.texto p, main#quien .content .item:hover:first-child > .box.texto span {
  color: #d02f7c;
  text-decoration: underline;
}
main#quien .content .item:hover:nth-child(2) > .box.texto h2, main#quien .content .item:hover:nth-child(2) > .box.texto h2 a, main#quien .content .item:hover:nth-child(2) > .box.texto p {
  color: #d02f7c;
}
main#quien .content .item:hover:nth-child(3) > .box.texto h2, main#quien .content .item:hover:nth-child(3) > .box.texto h2 a, main#quien .content .item:hover:nth-child(3) > .box.texto p {
  color: #fb9901;
  text-decoration: underline;
}

main#muerte .center, main#escuela .center, main#vestuario .center, main#minicuento .center {
  background: linear-gradient(to right, #a3bd31 30%, #fef271 30%);
  position: relative;
}
main#muerte .center .content, main#escuela .center .content, main#vestuario .center .content, main#minicuento .center .content {
  max-width: 1280px;
  padding: 25px 20px;
  margin: 0 auto;
  background: linear-gradient(to right, #a3bd31 200px, #fef271 200px);
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#muerte .center .content, main#escuela .center .content, main#vestuario .center .content, main#minicuento .center .content {
    padding: 20px 20px 50px;
    background: linear-gradient(to right, #a3bd31 15vw, #fef271 15vw);
  }
}
main#muerte .center .content h1, main#escuela .center .content h1, main#vestuario .center .content h1, main#minicuento .center .content h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0 0 20px 220px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#muerte .center .content h1, main#escuela .center .content h1, main#vestuario .center .content h1, main#minicuento .center .content h1 {
    font-size: 24px;
    margin: 0 0 20px;
    padding: 0 0 0 15vw;
  }
}
main#muerte .center .content .media, main#escuela .center .content .media, main#vestuario .center .content .media, main#minicuento .center .content .media {
  position: relative;
  margin: 0 0 35px 220px;
  padding: 0 80px 0 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#muerte .center .content .media, main#escuela .center .content .media, main#vestuario .center .content .media, main#minicuento .center .content .media {
    margin: 0 0 20px;
    padding: 0 30px;
  }
}
main#muerte .center .content .media iframe, main#escuela .center .content .media iframe, main#vestuario .center .content .media iframe, main#minicuento .center .content .media iframe {
  display: block;
  width: 100%;
  height: 500px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#muerte .center .content .media iframe, main#escuela .center .content .media iframe, main#vestuario .center .content .media iframe, main#minicuento .center .content .media iframe {
    height: 40vw;
  }
}
main#muerte .center .content .media .shared, main#escuela .center .content .media .shared, main#vestuario .center .content .media .shared, main#minicuento .center .content .media .shared {
  position: absolute;
  right: 20px;
  bottom: 0;
}
main#muerte .center .content .media .shared .redes-sociales2, main#escuela .center .content .media .shared .redes-sociales2, main#vestuario .center .content .media .shared .redes-sociales2, main#minicuento .center .content .media .shared .redes-sociales2 {
  margin: 0;
  list-style: none;
}
main#muerte .center .content .media .shared .redes-sociales2 a, main#escuela .center .content .media .shared .redes-sociales2 a, main#vestuario .center .content .media .shared .redes-sociales2 a, main#minicuento .center .content .media .shared .redes-sociales2 a {
  display: block;
  margin: 10px 0 0;
  width: 60px;
  height: 60px;
  padding: 10px;
  border-radius: 0 10px 10px 0;
  background: #aba138;
}
main#muerte .center .content .summary, main#escuela .center .content .summary, main#vestuario .center .content .summary, main#minicuento .center .content .summary {
  margin: 0 0 0 220px;
  padding: 0 140px 0 60px;
  word-break: break-word;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#muerte .center .content .summary, main#escuela .center .content .summary, main#vestuario .center .content .summary, main#minicuento .center .content .summary {
    margin: 0;
    padding: 0 30px 20px 15vw;
  }
}
main#muerte .center .content .summary p, main#escuela .center .content .summary p, main#vestuario .center .content .summary p, main#minicuento .center .content .summary p {
  font-weight: 700;
  margin: 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#muerte .center .content .summary p, main#escuela .center .content .summary p, main#vestuario .center .content .summary p, main#minicuento .center .content .summary p {
    font-weight: 400;
    font-size: 14px;
  }
}
main#vestuario .center, main#minicuento .center {
  background: linear-gradient(to right, #bd0052 30%, #d8db4b 30%);
}
main#vestuario .center .content, main#minicuento .center .content {
  background: linear-gradient(to right, #bd0052 255px, #d8db4b 255px);
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#vestuario .center .content, main#minicuento .center .content {
    padding: 20px 50px 50px;
  }
}
main#vestuario .center .content h1, main#minicuento .center .content h1 {
  margin: 0 0 20px 30px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#vestuario .center .content h1, main#minicuento .center .content h1 {
    margin: 0 0 20px;
    padding: 0;
  }
}
main#vestuario .center .content h1 span, main#minicuento .center .content h1 span {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  color: #fff;
}
main#vestuario .center .content .media, main#minicuento .center .content .media {
  padding: 0 30px;
  margin: 0 0 35px 0;
}
main#vestuario .center .content .media iframe, main#minicuento .center .content .media iframe {
  border: 5px solid #74b2af;
  border-radius: 4px;
}
main#vestuario .center .content #slideshow, main#minicuento .center .content #slideshow {
  position: relative;
  margin: 20px auto 0;
  width: 1000px;
  height: 560px;
  border: 5px solid #73b2af;
  border-radius: 6px;
  background: #fff;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#vestuario .center .content #slideshow, main#minicuento .center .content #slideshow {
    width: 100%;
    height: 47vw;
  }
}
main#vestuario .center .content #slideshow ul, main#minicuento .center .content #slideshow ul {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
main#vestuario .center .content #slideshow ul li, main#minicuento .center .content #slideshow ul li {
  display: none;
  position: absolute;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
main#vestuario .center .content #slideshow ul li canvas, main#minicuento .center .content #slideshow ul li canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none !important;
}
main#vestuario .center .content #slideshow ul li .background, main#minicuento .center .content #slideshow ul li .background {
  position: relative;
}
main#vestuario .center .content #slideshow ul li .background img, main#minicuento .center .content #slideshow ul li .background img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main#vestuario .center .content #slideshow ul li .background img.gif, main#minicuento .center .content #slideshow ul li .background img.gif {
  position: absolute;
  top: 0;
  left: 0;
}
main#vestuario .center .content #slideshow ul li .background figcaption, main#minicuento .center .content #slideshow ul li .background figcaption {
  position: absolute;
  font-family: "Mali", cursive;
  font-size: 22px;
  line-height: 1.2em;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#vestuario .center .content #slideshow ul li .background figcaption, main#minicuento .center .content #slideshow ul li .background figcaption {
    font-size: 2.4vw;
  }
}
main#vestuario .center .content #slideshow ul li:first-child, main#vestuario .center .content #slideshow ul li.slideActive, main#minicuento .center .content #slideshow ul li:first-child, main#minicuento .center .content #slideshow ul li.slideActive {
  display: block;
  opacity: 1;
  visibility: visible;
}
main#vestuario .center .content #slideshow canvas, main#minicuento .center .content #slideshow canvas {
  display: none;
  position: absolute;
}
main#vestuario .center .content #slideshow #controls, main#minicuento .center .content #slideshow #controls {
  width: 260px;
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
main#vestuario .center .content #slideshow #controls .button, main#minicuento .center .content #slideshow #controls .button {
  width: 55px;
  height: 43px;
  border-radius: 10px 10px 0 0;
  background-size: 35px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #73b2af;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  font-size: 0;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  cursor: pointer;
}
main#vestuario .center .content #slideshow #controls .button:hover, main#minicuento .center .content #slideshow #controls .button:hover {
  background-color: #bd0652;
}
main#vestuario .center .content #slideshow #controls .button.reload, main#minicuento .center .content #slideshow #controls .button.reload {
  background-image: url(../image/ico-reload.png);
}
main#vestuario .center .content #slideshow #controls .button.previous, main#minicuento .center .content #slideshow #controls .button.previous {
  background-image: url(../image/ico-previous.png);
}
main#vestuario .center .content #slideshow #controls .button.pause, main#minicuento .center .content #slideshow #controls .button.pause {
  background-image: url(../image/ico-pause.png);
}
main#vestuario .center .content #slideshow #controls .button.play, main#minicuento .center .content #slideshow #controls .button.play {
  background-image: url(../image/ico-play.png);
}
main#vestuario .center .content #slideshow #controls .button.next, main#minicuento .center .content #slideshow #controls .button.next {
  background-image: url(../image/ico-next.png);
}
main#vestuario .center .content #slideshow #controls .button.play, main#vestuario .center .content #slideshow #controls .button.pause, main#minicuento .center .content #slideshow #controls .button.play, main#minicuento .center .content #slideshow #controls .button.pause {
  display: none;
}
main#vestuario .center .content #slideshow #controls .button.play.active, main#vestuario .center .content #slideshow #controls .button.pause.active, main#minicuento .center .content #slideshow #controls .button.play.active, main#minicuento .center .content #slideshow #controls .button.pause.active {
  display: block;
}
main#vestuario .center .content .summary, main#minicuento .center .content .summary {
  padding: 0 180px 20px 40px;
}
main#vestuario .center .content .summary p, main#minicuento .center .content .summary p {
  font-weight: 400;
}
main#vestuario.gabo .center .content #slideshow ul li:first-child .background figcaption, main#minicuento.gabo .center .content #slideshow ul li:first-child .background figcaption {
  top: 10px;
  right: 0;
  left: 0;
  margin: auto;
  width: 90%;
  line-height: 1.3em;
  color: #fff;
  text-shadow: 1px 2px 4px #000;
  background-color: rgba(1, 1, 1, 0.3);
  padding: 5px 10px;
  border-radius: 5px;
}
main#vestuario.gabo .center .content #slideshow ul li:nth-child(2) .background figcaption, main#minicuento.gabo .center .content #slideshow ul li:nth-child(2) .background figcaption {
  top: 15px;
  left: 20px;
  width: 50%;
  color: #fff;
  text-shadow: 1px 2px 4px #000;
  background-color: rgba(1, 1, 1, 0.3);
  padding: 5px 10px;
  border-radius: 5px;
}
main#vestuario.gabo .center .content #slideshow ul li:nth-child(3) .background figcaption, main#minicuento.gabo .center .content #slideshow ul li:nth-child(3) .background figcaption {
  top: 15px;
  right: 20px;
  width: 40%;
  color: #fff;
  color: #fff;
  text-shadow: 0 2px 3px #000;
  background-color: rgba(1, 1, 1, 0.5);
  padding: 5px 10px;
  border-radius: 5px;
}
main#vestuario.gabo .center .content #slideshow ul li:nth-child(4) .background figcaption, main#minicuento.gabo .center .content #slideshow ul li:nth-child(4) .background figcaption {
  top: 20%;
  left: 10%;
  width: 41%;
}
main#vestuario.gabo .center .content #slideshow ul li:nth-child(5) .background figcaption, main#minicuento.gabo .center .content #slideshow ul li:nth-child(5) .background figcaption {
  top: 2%;
  right: 30px;
  width: 41%;
  color: #fff;
  text-shadow: 0 2px 3px #000;
  background-color: rgba(1, 1, 1, 0.5);
  padding: 5px 10px;
  border-radius: 5px;
}
main#vestuario.gabo .center .content #slideshow ul li:nth-child(6) .background figcaption, main#minicuento.gabo .center .content #slideshow ul li:nth-child(6) .background figcaption {
  top: 5%;
  left: 30px;
  width: 55%;
  color: #fff;
  text-shadow: 0 2px 3px #000;
  background-color: rgba(1, 1, 1, 0.3);
  padding: 5px 10px;
  border-radius: 5px;
}
main#vestuario.gabo .center .content #slideshow ul li:nth-child(7) .background figcaption, main#minicuento.gabo .center .content #slideshow ul li:nth-child(7) .background figcaption {
  top: 20%;
  left: 7%;
  width: 41%;
}
main#vestuario.macondo .center .content #slideshow ul li .background figcaption, main#minicuento.macondo .center .content #slideshow ul li .background figcaption {
  font-size: 22px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#vestuario.macondo .center .content #slideshow ul li .background figcaption, main#minicuento.macondo .center .content #slideshow ul li .background figcaption {
    font-size: 2.4vw;
  }
}
main#vestuario.macondo .center .content #slideshow ul li:first-child .background figcaption, main#minicuento.macondo .center .content #slideshow ul li:first-child .background figcaption {
  top: 15px;
  left: 20px;
  margin: auto;
  width: 46%;
}
main#vestuario.macondo .center .content #slideshow ul li:nth-child(2) .background figcaption, main#minicuento.macondo .center .content #slideshow ul li:nth-child(2) .background figcaption {
  top: 15px;
  left: 20px;
  width: 95%;
}
main#vestuario.macondo .center .content #slideshow ul li:nth-child(3) .background figcaption, main#minicuento.macondo .center .content #slideshow ul li:nth-child(3) .background figcaption {
  top: 5%;
  right: 10px;
  width: 49%;
}
main#vestuario.macondo .center .content #slideshow ul li:nth-child(4) .background figcaption, main#minicuento.macondo .center .content #slideshow ul li:nth-child(4) .background figcaption {
  top: 8%;
  left: 5%;
  width: 50%;
}
main#minicuento .center .content {
  background: linear-gradient(to right, #bd0052 235px, #d8db4b 235px);
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#minicuento .center .content {
    background: linear-gradient(to right, #bd0052 200px, #d8db4b 200px);
  }
}

main#cuando {
  position: relative;
}
main#cuando .timelines {
  background: #fef47d;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cuando .timelines {
    padding: 20px 10px 40px;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cuando .timelines .swiper-container {
    height: auto !important;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cuando .timelines .swiper-container .swiper-button-prev, main#cuando .timelines .swiper-container .swiper-button-next {
    display: none;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cuando .timelines .swiper-container-vertical .swiper-slide {
    display: flex;
    flex-direction: row-reverse;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cuando .timelines .swiper-container-vertical .swiper-slide .swiper-slide-content {
    padding: 0 30px 0 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cuando .timelines .swiper-container-vertical .swiper-slide .swiper-slide-content .timeline-year {
    font-weight: 700;
    margin: 0 !important;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cuando .timelines .swiper-container-vertical .swiper-slide .swiper-slide-content .timeline-title {
    font-size: 28px;
    line-height: 1em;
    margin: 0;
    padding: 0 0 5px;
    border-bottom: 3px solid #f15600;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cuando .timelines .swiper-container-vertical .swiper-slide .swiper-slide-content .timeline-text {
    font-size: 11px !important;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cuando .timelines .swiper-container-vertical .swiper-slide .contenedorVideo {
    width: 50%;
    flex-shrink: 0;
  }
  main#cuando .timelines .swiper-container-vertical .swiper-slide .contenedorVideo video {
    max-height: 80vh;
    max-width: 100%;
    display: block;
  }
}
main#cuando .timelines .swiper-container-vertical .owl-nav > div {
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 10;
  text-indent: -9999px;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  cursor: pointer;
}
main#cuando .timelines .swiper-container-vertical .owl-nav > div:after {
  content: "";
  width: 12px;
  height: 12px;
  border-width: 0 3px 3px 0;
  border-style: solid;
  border-color: #333;
  border-radius: 0 0 2px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
main#cuando .timelines .swiper-container-vertical .owl-nav > div.owl-prev {
  left: 0;
}
main#cuando .timelines .swiper-container-vertical .owl-nav > div.owl-prev:after {
  left: 10px;
  right: 0;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
main#cuando .timelines .swiper-container-vertical .owl-nav > div.owl-next {
  right: 0;
}
main#cuando .timelines .swiper-container-vertical .owl-nav > div.owl-next:after {
  left: 0;
  right: 10px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
main#cuando .timelines .swiper-container-vertical .owl-nav > div.disabled {
  display: none;
  visibility: hidden;
  opacity: 0;
}
main#cuando .timelines .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet:first-child {
  font-size: 0;
}
main#cuando .timelines .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet:first-child:after {
  content: "nace";
  font-size: 14px;
}
main#cuando .timelines .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(2) {
  font-size: 0;
}
main#cuando .timelines .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet:nth-child(2):after {
  content: "1 año";
  font-size: 14px;
}
main#cuando .timelines .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
  font-size: 32px;
}

main#tv .center {
  background: #d8db4b;
  position: relative;
  display: flex;
}
main#tv .center .column {
  width: 50%;
}
main#tv .center .column .content {
  max-width: 640px;
}
main#tv .center .column .content h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  height: 50px;
  margin: 0 40px;
}
@media (max-width: 1080px) {
  main#tv .center .column .content h1 {
    font-size: 21px;
    margin: 0 20px;
  }
}
main#tv .center .column .content p {
  font-weight: 600;
  line-height: 1.5em;
  margin: 0 40px 15px;
}
@media (max-width: 1080px) {
  main#tv .center .column .content p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3em;
    margin: 0 20px 15px;
  }
}
main#tv .center .column.left {
  padding: 20px 0 0;
  background: #ea4f3d;
  display: flex;
  justify-content: flex-end;
}
main#tv .center .column.left figure {
  position: relative;
}
main#tv .center .column.left figure img {
  display: block;
  margin: 50px auto 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#tv .center .column.left figure img {
    width: 60%;
  }
}
main#tv .center .column.left figure a {
  display: none;
  width: 100px;
  height: 100px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 60px;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  font-size: 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#tv .center .column.left figure a {
    bottom: 15vw;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
}
main#tv .center .column.left figure a:before {
  content: "";
  width: 0;
  height: 0;
  border-width: 0 0 35px 35px;
  border-style: solid;
  border-color: transparent #fff #fff transparent;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  left: 0;
  margin: auto;
}
main#tv .center .column.left figure a.pause {
  background-image: url(../image/ico-pause.png);
  background-size: 50px;
  background-position: center;
  background-repeat: no-repeat;
}
main#tv .center .column.left figure a.pause:before {
  display: none;
}
main#tv .center .column.left figure a.active {
  display: block;
}
main#tv .center .column.left figure iframe {
  margin: 0 40px;
  position: absolute;
  top: 0;
  display: none;
}
main#tv .center .column.right {
  background: #d8db4b;
  padding: 70px 0 15px;
}
main#tv .center .column.right .content figure img {
  display: block;
  margin: 0 auto;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#tv .center .column.right .content figure img {
    width: 30%;
  }
}
main#tv .center .column.right .content #controls button {
  -webkit-appearance: inherit;
  display: block;
  margin: 15px auto 0;
  width: 100px;
  height: 100px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(red 20px, rgba(255, 255, 255, 0.3) 22px, rgba(255, 255, 255, 0.3) 46px, red 48px);
  font-size: 0;
  cursor: pointer;
  outline: none;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#tv .center .column.right .content #controls button {
    margin: 10px auto 15px;
    width: 10vw;
    height: 10vw;
    background: radial-gradient(red 2vw, rgba(255, 255, 255, 0.3) 2.2vw, rgba(255, 255, 255, 0.3) 4.5vw, red 5vw);
  }
}
main#tv .center .column.right .content #controls button:disabled {
  display: none;
}
main#tv .center .column.right .content #controls button.wait {
  background-image: url(../image/loading.gif);
  background-repeat: no-repeat;
  background-size: contain;
}
main#tv .center .column.right .content #controls button#stopButton {
  background-image: url(../image/ico-stop.png), radial-gradient(rgba(255, 255, 255, 0.3) 46px, #60611c 48px);
  background-size: 36px, 100%;
  background-position: center;
  background-repeat: no-repeat;
}
main#tv .center .column.right .content h3 {
  display: none;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  margin: 10px 0 15px;
}
main#tv .center .column.right .content h3.active {
  display: block;
}
main#tv .center .column.right .content #recordingsList {
  margin: 0;
  padding: 0;
  list-style: none;
}
main#tv .center .column.right .content #recordingsList li {
  display: flex;
  justify-content: center;
  margin: 10px 0 0;
}
main#tv .center .column.right .content #recordingsList li a {
  display: block;
  margin: 0 0 0 10px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-image: url(../image/ico-download.png);
  background-size: 34px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f1f3f4;
  font-size: 0;
}
main#tv .center .column.right .content #formats, main#tv .center .column.right .content #log {
  display: none;
}

main#print .center {
  display: flex;
}
main#print .center .content {
  width: 50%;
}
main#print .center .content.left {
  padding: 25px 20px;
  background: #73b2af;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#print .center .content.left {
    padding: 20px 10px 50px 20px;
  }
}
main#print .center .content.left form {
  max-width: 580px;
  margin: 0 auto;
}
main#print .center .content.left form .form-item {
  margin: 0 0 30px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#print .center .content.left form .form-item {
    margin: 0 0 20px;
  }
}
main#print .center .content.left form .form-item label {
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  display: block;
  margin: 0 0 15px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#print .center .content.left form .form-item label {
    font-size: 14px;
    margin: 0 0 5px;
  }
}
main#print .center .content.left form .form-item .input {
  display: flex;
  justify-content: space-between;
  position: relative;
}
main#print .center .content.left form .form-item .input input[type=text] {
  width: calc(100% - 50px);
  height: 40px;
  padding: 10px;
  border: 2px solid #ddd;
  background: transparent;
  font-size: 16px;
  color: #fff;
  outline: none;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#print .center .content.left form .form-item .input input[type=text] {
    width: calc(100% - 40px);
  }
}
main#print .center .content.left form .form-item .input textarea {
  width: calc(100% - 50px);
  height: 80px;
  padding: 10px;
  border: 2px solid #ddd;
  background: transparent;
  font-size: 16px;
  color: #fff;
  outline: none;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#print .center .content.left form .form-item .input textarea {
    width: calc(100% - 40px);
  }
}
main#print .center .content.left form .form-item .input .help {
  display: block;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #ff6600;
  cursor: pointer;
}
main#print .center .content.left form .form-item .input .help:before {
  content: "?";
  display: block;
  width: 25px;
  height: 25px;
  border: 1.5px dotted #fff;
  border-radius: 50%;
  box-sizing: border-box;
  margin: 5px;
  font-family: "Mali", cursive;
  font-weight: 700;
  font-style: normal;
  line-height: 22px;
  color: #fff;
  text-align: center;
}
main#print .center .content.left form .form-item .input aside {
  position: absolute;
  right: 0;
  top: 40px;
  max-width: 400px;
  padding: 10px;
  border-radius: 4px;
  background: #ff6600;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  -webkit-transform: scale(0);
  transform: scale(0);
  transform-origin: 96% 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  z-index: 1;
}
main#print .center .content.left form .form-item .input aside:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: #ff6600;
  position: absolute;
  top: -5px;
  right: 12px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
main#print .center .content.left form .form-item .input aside p {
  font-size: 14px;
  color: #fff;
  margin: 0;
}
main#print .center .content.left form .form-item .input.active .help:before {
  content: "x";
  line-height: 17px;
}
main#print .center .content.left form .form-item .input.active aside {
  -webkit-transform: scale(1);
  transform: scale(1);
  visibility: visible;
  opacity: 1;
}
main#print .center .content.left form .form-item.form-type-checkbox {
  display: flex;
  flex-wrap: wrap;
}
main#print .center .content.left form .form-item.form-type-checkbox .input {
  width: 50%;
  margin: 0 0 20px;
  justify-content: flex-start;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#print .center .content.left form .form-item.form-type-checkbox .input {
    margin: 0 0 5px;
  }
}
main#print .center .content.left form .form-item.form-type-checkbox .input input[type=checkbox] {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  margin: 4px 10px 0 0;
}
main#print .center .content.left form .form-item.form-type-checkbox .input label {
  margin: 0;
}
main#print .center .content.right {
  padding: 25px 20px;
  background-image: url(../image/fondo-imprimir.svg);
  background-size: cover;
  background-color: #ffeb89;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#print .center .content.right {
    padding: 20px 20px 50px;
  }
}
main#print .center .content.right .text {
  margin: 60px auto 70px;
  max-width: 580px;
  padding: 5px 50px;
  border: 3px solid #d4f0a1;
  border-radius: 30px;
  box-shadow: 0 0 0 5px #fff;
  background: #fff;
  position: relative;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#print .center .content.right .text {
    margin: 40px auto 50px;
  }
}
main#print .center .content.right .text:before, main#print .center .content.right .text:after {
  content: "";
  display: block;
  width: calc(100% - 100px);
  height: 40px;
  border: 3px solid #d4f0a1;
  background: #fff;
  box-shadow: 0 0 0 5px #fff;
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#print .center .content.right .text:before, main#print .center .content.right .text:after {
    width: calc(100% - 50px);
    height: 30px;
  }
}
main#print .center .content.right .text:before {
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  top: -43px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#print .center .content.right .text:before {
    top: -33px;
  }
}
main#print .center .content.right .text:after {
  border-top: 0;
  border-radius: 0 0 30px 30px;
  bottom: -43px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#print .center .content.right .text:after {
    bottom: -33px;
  }
}
main#print .center .content.right .text h1 {
  margin: 0 0 20px;
  text-align: center;
}
main#print .center .content.right .text p {
  color: #333;
}
main#print .center .content.right .action #btn-print, main#print .center .content.right .action #btn-converte {
  -webkit-appearance: inherit;
  display: block;
  margin: 0 auto;
  width: 180px;
  height: 40px;
  border: 0;
  border-radius: 20px;
  background: #7eb8b5;
  font-family: "Mali", cursive;
  font-weight: 700;
  font-size: 20px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  outline: none;
  cursor: pointer;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#print .center .content.right .action #btn-print, main#print .center .content.right .action #btn-converte {
    height: 35px;
    font-size: 16px;
    line-height: 35px;
  }
}
main#print .center .content.right .action #btn-print {
  width: 320px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#print .center .content.right .action #btn-print {
    width: 260px;
  }
}
main#print .center .content.right .action #btn-converte {
  width: 220px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#print .center .content.right .action #btn-converte {
    width: 200px;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  main#paint .mouse {
    display: block;
    width: 24px;
    height: 44px;
    border-radius: 11px 11px 15px 15px;
    border: 2px solid #111;
    position: absolute;
    left: 50%;
    margin-left: -13px;
    z-index: 9s;
    position: fixed;
    left: 97vw;
    top: 65vh;
  }
  main#paint .mouse span {
    display: block;
    margin: 6px auto;
    width: 2px;
    height: 5px;
    border-radius: 4px;
    background: #111;
    border: 2px solid transparent;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: scroll;
    animation-name: scroll;
  }
  @keyframes scroll {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translateY(12px);
      -ms-transform: translateY(12px);
      transform: translateY(12px);
    }
  }
}
main#paint .center {
  position: relative;
}
main#paint .center .content {
  padding: 20px 50px 40px 20px;
  background: #fff271;
}
@media (max-width: 1080px) {
  main#paint .center .content {
    padding: 10px 10px 60px 10px;
  }
}
main#paint .center .content h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0 0 20px;
  width: 100%;
}
@media (max-width: 1080px) {
  main#paint .center .content h1 {
    font-size: 24px;
  }
}
main#paint .center .content .drawing {
  width: 86vw;
  margin: auto;
}
main#paint .center .content .drawing .literally {
  height: 60vh;
  min-height: 350px;
  background: transparent;
}
main#paint .center .content .drawing .literally .lc-drawing {
  left: 35px;
  top: 40px;
}
main#paint .center .content .drawing .literally .lc-options {
  left: unset;
  right: unset;
}
main#paint .center .content .drawing .literally .lc-picker {
  z-index: auto;
  width: auto;
  background: #fff272;
  height: 40px;
}
main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents > div {
  position: relative !important;
  float: left !important;
  top: unset !important;
  width: 300px;
}
main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .lc-pick-tool {
  width: 28px;
  height: 35px;
}
main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .lc-pick-tool:nth-child(6), main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .lc-redo, main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .lc-zoom {
  display: none;
}
main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .lc-clear {
  font-size: 0;
  line-height: 22px;
  color: #fff;
  background: #f15602;
}
main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .lc-clear:after {
  content: "limpiar";
  font-family: "Mali", cursive;
  font-size: 14px;
}
main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .lc-clear.disabled {
  opacity: 1;
  background: #ccc;
  color: #999;
}
main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .lc-print {
  color: #fff;
  background: #f15602;
  height: 26px;
  line-height: 30px;
}
main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .lc-zoom, main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .lc-color-pickers, main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .lc-undo-redo {
  position: relative;
  float: left;
  width: auto;
}
main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .lc-clear {
  position: absolute;
  right: 7px;
}
main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .color-well {
  width: 40px;
}
main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .color-well .color-well-color-container {
  width: 30px;
  height: 20px;
}
main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .color-well .color-picker-popup {
  left: auto;
  bottom: auto;
}
main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .color-well .color-picker-popup .color-row:nth-child(1) {
  display: block;
}
main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .color-well .color-picker-popup .label {
  display: none;
}
main#paint .center .content .drawing .literally .lc-picker .lc-picker-contents .color-well .color-picker-popup input {
  display: none;
}
main#paint .center .content .drawing .literally .lc-picker .toolbar-button.selected:not(.disabled) {
  background-color: #fb7b24;
}
main#paint .center .content .drawing .literally .lc-picker .toolbar-button:hover:not(.disabled) {
  border-color: #fb7b24;
}

main#escribir .center {
  background: linear-gradient(to right, #d02f7c 30%, #e9ddbc 30%);
  position: relative;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#escribir .center {
    background: #e9ddbc;
  }
}
main#escribir .center .content {
  max-width: 1280px;
  padding: 15px 30px;
  margin: 0 auto;
  background: linear-gradient(to right, #d02f7c 235px, #e9ddbc 235px);
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#escribir .center .content {
    padding: 15px 50px;
    background: #e9ddbc;
  }
}
main#escribir .center .content h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 10px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#escribir .center .content h1 {
    color: #d02f7c;
  }
}
main#escribir .center .content h1 span {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  color: #d02f7c;
  margin: 0 0 0 10px;
}
main#escribir .center .content .media {
  display: flex;
  justify-content: space-between;
  margin: 0 0 10px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#escribir .center .content .media {
    display: block;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#escribir .center .content .media .view-id-videos_que .view-content {
    display: flex;
    justify-content: space-between;
  }
  main#escribir .center .content .media .view-id-videos_que .view-content .views-row {
    width: 30%;
  }
}
main#escribir .center .content .media .column .blog iframe {
  width: 100%;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#escribir .center .content .media .column .blog iframe {
    height: 47vw;
  }
}
main#escribir .center .content .media .column .blog img {
  display: block;
  width: 100%;
}
main#escribir .center .content .media .column:first-child {
  width: calc(70% - 15px);
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#escribir .center .content .media .column:first-child {
    width: 100%;
  }
}
main#escribir .center .content .media .column:last-child {
  width: calc(30% - 15px);
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#escribir .center .content .media .column:last-child {
    width: 100%;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#escribir .center .content .media .column:last-child .view-content .views-row:last-child {
    margin-bottom: 50px;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#escribir .center .content .media .column:last-child .view-content .views-row .blog {
    margin: 0 0 20px;
  }
}
main#escribir .center .content .media .column:last-child .view-content .views-row .blog img {
  border: 2px solid #d02f7c;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#escribir .center .content .media .column:last-child .view-content .views-row .blog img {
    /* width: 40%; */
    height: auto;
    margin-bottom: 10px;
  }
}
main#escribir .center .content .media .column:last-child .view-content .views-row .blog h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: normal;
  font-size: 21px;
  color: #d02f7c;
  margin: 10px 0 20px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#escribir .center .content .media .column:last-child .view-content .views-row .blog h2 {
    font-size: 16px;
    font-weight: bold;
    line-height: 1em;
    margin: 0;
  }
  main#escribir .center .content .media .column:last-child .view-content .views-row .blog h2 a {
    color: #333;
  }
}
main#escribir .center .content .summary {
  margin: 0 0 20px 220px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#escribir .center .content .summary {
    margin: 0 0 40px;
  }
}
main#escribir .center .content .summary p {
  /* font: {
      weight: 700;
  } */
  line-height: 1.5em;
  margin: 10px 0 50px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#escribir .center .content .summary p {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4em;
    margin: 10px 0 20px;
  }
}
main#escribir .center .content .summary .action {
  display: block;
  height: 60px;
  padding: 0 0 0 40px;
  border: 2px dotted #ba007c;
  border-radius: 4px;
  background-image: url(../image/forma-lapiz.png);
  background-size: 40px;
  background-position: top left 15px;
  background-repeat: no-repeat;
  font-family: "Rochester", cursive;
  font-size: 24px;
  line-height: 55px;
  color: #d02f7c;
  text-align: center;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#escribir .center .content .summary .action {
    margin: 40px auto;
    width: 380px;
    height: 50px;
    background-size: 35px;
    line-height: 45px;
  }
}

@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#que .content {
    padding: 0 0 30px;
  }
}
main#que .content .item {
  display: flex;
  justify-content: space-between;
}
main#que .content .item .box {
  width: 50%;
  height: 240px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#que .content .item .box {
    height: 180px;
  }
}
main#que .content .item .box:first-child {
  padding: 0 25px 0 calc(50% - 620px);
}
@media (max-width: 1080px) {
  main#que .content .item .box:first-child {
    padding: 0 15px;
  }
}
main#que .content .item .box:last-child {
  padding: 0 calc(50% - 620px) 0 25px;
}
@media (max-width: 1080px) {
  main#que .content .item .box:last-child {
    padding: 0 15px;
  }
}
main#que .content .item .box.texto {
  border: 1px dotted;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  position: relative;
}
main#que .content .item .box.texto h2, main#que .content .item .box.texto h2 a, main#que .content .item .box.texto h2 span {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-size: 48px;
  color: #999;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
@media (max-width: 1080px) {
  main#que .content .item .box.texto h2, main#que .content .item .box.texto h2 a, main#que .content .item .box.texto h2 span {
    font-size: 24px;
  }
}
main#que .content .item .box.texto p {
  line-height: 1.3em;
  color: #333;
  width: 350px;
  margin: 0 auto;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
@media (max-width: 1080px) {
  main#que .content .item .box.texto p {
    font-size: 14px;
    width: auto;
  }
}
main#que .content .item .box.texto:after {
  content: "";
  width: 25px;
  height: 25px;
  border-style: dotted;
  background: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
}
main#que .content .item .box.imagen {
  position: relative;
  padding: 0;
}
main#que .content .item .box.imagen video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main#que .content .item:first-child .box.texto {
  border-color: #73b2af;
}
main#que .content .item:first-child .box.texto:after {
  border-width: 1px 1px 0 0;
  border-color: #73b2af;
  right: -14px;
}
main#que .content .item:nth-child(2) .box.texto {
  border-color: #ff9900;
}
main#que .content .item:nth-child(2) .box.texto:after {
  border-width: 0 0 1px 1px;
  border-color: #ff9900;
  left: -14px;
}
main#que .content .item:nth-child(3) .box.texto {
  border-color: #73b2af;
}
main#que .content .item:nth-child(3) .box.texto:after {
  border-width: 1px 1px 0 0;
  border-color: #73b2af;
  right: -14px;
}
main#que .content .item:hover > .box.texto h2 a:hover {
  text-decoration: underline;
}
main#que .content .item:hover > .box.imagen {
  background-size: auto 110%;
}
main#que .content .item:hover:first-child > .box.texto h2, main#que .content .item:hover:first-child > .box.texto h2 a, main#que .content .item:hover:first-child > .box.texto p {
  color: #73b2af;
}
main#que .content .item:hover:nth-child(2) > .box.texto h2, main#que .content .item:hover:nth-child(2) > .box.texto h2 a, main#que .content .item:hover:nth-child(2) > .box.texto p {
  color: #ff9900;
}
main#que .content .item:hover:nth-child(3) > .box.texto h2, main#que .content .item:hover:nth-child(3) > .box.texto h2 a, main#que .content .item:hover:nth-child(3) > .box.texto p {
  color: #d02f7c;
}

main#conoces .center, main#periodismo .center {
  position: relative;
  background-size: cover;
  background-position: center;
}
main#conoces .center .content, main#periodismo .center .content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#conoces .center .content, main#periodismo .center .content {
    padding: 20px 50px 50px;
  }
}
main#conoces .center .content h1, main#periodismo .center .content h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0 0 20px 20px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#conoces .center .content h1, main#periodismo .center .content h1 {
    font-size: 24px;
  }
}
main#conoces .center .content .embebed, main#periodismo .center .content .embebed {
  margin: 20px auto;
  width: 100%;
  max-width: 700px;
  min-height: 500px;
  padding: 0 10px;
  border: 3px solid #a3bd31;
  border-radius: 8px;
  background: #fff;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#conoces .center .content .embebed, main#periodismo .center .content .embebed {
    max-width: 360px;
  }
}
main#conoces .center {
  background-image: url(../image/fondo-conoces-gabo.jpg);
}
main#conoces .center .content .embebed {
  margin: 20px 0 20px calc(100% - 860px);
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#conoces .center .content .embebed {
    margin: 20px auto;
  }
}
main#periodismo .center {
  background-image: url(../image/fondo-periodismo.png);
}
main#periodismo .center .content .embebed {
  margin: 20px 20px 40px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#periodismo .center .content .embebed {
    margin: 20px auto;
  }
}

main#escuela_cuba .center {
  background: #a3bd31;
}
main#escuela_cuba .center .content {
  margin: 0 auto;
  padding: 20px 0 0;
  position: relative;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#escuela_cuba .center .content {
    padding: 10px 0 19px;
  }
}
main#escuela_cuba .center .content h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  max-width: 1220px;
  margin: 0 auto 20px;
}
@media (max-width: 1080px) {
  main#escuela_cuba .center .content h1 {
    font-size: 24px;
    margin: 0 0 10px 20px;
  }
}
main#escuela_cuba .center .content .story-map iframe {
  display: block;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#escuela_cuba .center .content .story-map iframe {
    height: 75vh;
  }
}

main#cine .center {
  background: #e1ddbe;
  position: relative;
  display: flex;
}
main#cine .center .column {
  width: 50%;
  padding: 25px 20px;
}
main#cine .center .column .content {
  max-width: 640px;
  margin: 0 auto;
}
main#cine .center .column .content h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: #ea4f3d;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0 0 20px;
}
@media (max-width: 1080px) {
  main#cine .center .column .content h1 {
    font-size: 24px;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cine .center .column.left {
    padding: 15px 10px 50px 20px;
  }
}
main#cine .center .column.left form .form-item {
  margin: 0 0 30px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cine .center .column.left form .form-item {
    margin: 0 0 20px;
  }
}
main#cine .center .column.left form .form-item label {
  font-weight: 700;
  font-size: 18px;
  color: #772d2c;
  display: block;
  margin: 0 35px 15px 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cine .center .column.left form .form-item label {
    font-size: 15px;
    margin: 0 35px 5px 0;
  }
}
main#cine .center .column.left form .form-item .input {
  display: flex;
  justify-content: space-between;
  position: relative;
}
main#cine .center .column.left form .form-item .input input[type=text], main#cine .center .column.left form .form-item .input textarea {
  width: calc(100% - 50px);
  height: 40px;
  padding: 10px;
  border: 2px solid #772d2c;
  background: transparent;
  font-size: 16px;
  color: #772d2c;
  outline: none;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cine .center .column.left form .form-item .input input[type=text], main#cine .center .column.left form .form-item .input textarea {
    width: calc(100% - 40px);
    height: 35px;
    font-size: 13px;
  }
}
main#cine .center .column.left form .form-item .input textarea {
  height: 60px;
}
main#cine .center .column.left form .form-item .input .help {
  display: block;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #ff6600;
  cursor: pointer;
}
main#cine .center .column.left form .form-item .input .help:before {
  content: "?";
  display: block;
  width: 25px;
  height: 25px;
  border: 1.5px dotted #fff;
  border-radius: 50%;
  box-sizing: border-box;
  margin: 5px;
  font-family: "Mali", cursive;
  font-weight: 700;
  font-style: normal;
  line-height: 22px;
  color: #fff;
  text-align: center;
}
main#cine .center .column.left form .form-item .input aside {
  position: absolute;
  right: 0;
  top: 40px;
  max-width: 400px;
  padding: 10px;
  border-radius: 4px;
  background: #ff6600;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  -webkit-transform: scale(0);
  transform: scale(0);
  transform-origin: 96% 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  z-index: 2;
}
main#cine .center .column.left form .form-item .input aside:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: #ff6600;
  position: absolute;
  top: -5px;
  right: 12px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
main#cine .center .column.left form .form-item .input aside p {
  font-size: 14px;
  color: #fff;
  margin: 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cine .center .column.left form .form-item .input aside p {
    font-size: 12px;
  }
}
main#cine .center .column.left form .form-item .input.active .help:before {
  content: "x";
  line-height: 17px;
}
main#cine .center .column.left form .form-item .input.active aside {
  -webkit-transform: scale(1);
  transform: scale(1);
  visibility: visible;
  opacity: 1;
}
main#cine .center .column.left form .form-item.form-type-images {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
main#cine .center .column.left form .form-item.form-type-images > label {
  width: 100%;
}
main#cine .center .column.left form .form-item.form-type-images .input {
  width: 25%;
  margin: 0 0 20px;
  z-index: 1;
  cursor: grab;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cine .center .column.left form .form-item.form-type-images .input {
    margin: 0;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cine .center .column.left form .form-item.form-type-images .input img {
    width: 90%;
    height: auto;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cine .center .column.left form .form-item.form-type-images .input:not(:last-child) {
    display: block;
  }
}
main#cine .center .column.left form .form-item.form-type-images .input .help {
  margin: 0 0 0 calc(100% - 35px);
}
main#cine .center .column.left form .form-item.form-type-images .input:last-child {
  position: absolute;
  top: 0;
  right: 0;
}
main#cine .center .column.left form .form-item.form-type-checkbox {
  display: flex;
  flex-wrap: wrap;
}
main#cine .center .column.left form .form-item.form-type-checkbox > label {
  width: 100%;
}
main#cine .center .column.left form .form-item.form-type-checkbox .input {
  width: 50%;
  margin: 0 0 20px;
  justify-content: flex-start;
}
main#cine .center .column.left form .form-item.form-type-checkbox .input input[type=checkbox] {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;
  margin: 4px 10px 0 0;
}
main#cine .center .column.left form .form-item.form-type-checkbox .input label {
  margin: 0;
}
main#cine .center .column.right {
  background-color: #772d2c;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cine .center .column.right {
    padding: 15px 20px 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
}
main#cine .center .column.right .content {
  position: relative;
  margin: 0 auto;
  width: 424px;
  height: 566px;
  padding: 40px 0 20px;
  background: #ea4f3d;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cine .center .column.right .content {
    width: 244px;
    height: 325px;
  }
}
main#cine .center .column.right .content .name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  margin: 0 0 20px;
}
@media (max-width: 1080px) {
  main#cine .center .column.right .content .name {
    font-size: 21px;
    padding: 0 15px;
    margin: 0 0 10px;
  }
}
main#cine .center .column.right .content .end {
  text-align: center;
  margin: 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cine .center .column.right .content .end {
    font-size: 14px;
    padding: 0 20px;
  }
}
main#cine .center .column.right .content .action {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
}
main#cine .center .column.right .content .action #btn-save, main#cine .center .column.right .content .action #btn-converte {
  -webkit-appearance: inherit;
  display: block;
  margin: 0 auto;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #fef271;
  font-family: "Mali", cursive;
  font-weight: 700;
  font-size: 20px;
  line-height: 40px;
  color: #333;
  text-align: center;
  outline: none;
  cursor: pointer;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cine .center .column.right .content .action #btn-save, main#cine .center .column.right .content .action #btn-converte {
    height: 35px;
    font-size: 16px;
    line-height: 35px;
  }
}
main#cine .center .column.right .content .action #btn-save {
  width: 320px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cine .center .column.right .content .action #btn-save {
    width: auto;
    font-size: 80%;
    padding: 0 20px;
  }
}
main#cine .center .column.right .content .action #btn-converte {
  width: 220px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#cine .center .column.right .content .action #btn-converte {
    width: 200px;
  }
}
main#cine .center .column.right .content.active {
  background-size: cover;
  background-position: center;
}

main#como .content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 3px 1.5px 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content {
    padding: 3px 1.5px 40px;
  }
}
main#como .content section {
  width: 50%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
main#como .content section .item {
  width: 100%;
  margin: 0 1.5px 3px;
  background-repeat: no-repeat;
  position: relative;
}
main#como .content section .item a {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
}
main#como .content section .item a h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #FFF;
  line-height: 1.5em;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  position: relative;
  margin: 0;
  height: 72px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item a h2 {
    font-size: 14px;
    height: 43px;
  }
}
main#como .content section .item a h2:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 0;
  border-top: 2px dashed;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
main#como .content section .item.video a {
  position: relative;
}
main#como .content section .item.video video {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main#como .content section .item.arbol {
  height: 225px;
  background: #f3f5de;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.arbol {
    height: 22.5vw;
  }
}
main#como .content section .item.arbol a {
  padding: 70px 0 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.arbol a {
    padding: 13vw 0 0;
  }
}
main#como .content section .item.arbol a h2 {
  padding: 0 10px 0 15px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.arbol a h2 {
    padding: 0 5px 0 10px;
  }
}
main#como .content section .item.arbol video {
  max-width: 610px;
}
main#como .content section .item.voz {
  height: 470px;
  background-image: url(../image/microfono.png);
  background-size: auto 60%;
  background-position: top 90px center;
  background-color: #ea4f3d;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.voz {
    height: 47vw;
    background-position: top 25% center;
  }
}
main#como .content section .item.voz a {
  padding: 365px 0 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.voz a {
    padding: 70% 0 0;
  }
}
main#como .content section .item.voz a h2 {
  padding: 0 70px 0 15px;
}
main#como .content section .item.viste {
  height: 455px;
  background-image: url(../image/fondo-viste.png);
  background-size: 500px;
  background-position: bottom -210px right -190px;
  background-color: #bd0052;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.viste {
    height: 47vw;
    background-size: auto 55vw;
    background-position: bottom -10vw right -18vw;
  }
}
main#como .content section .item.viste a {
  padding: 70px 0 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.viste a {
    padding: 37vw 0 0;
  }
}
main#como .content section .item.viste a h2 {
  padding: 0 75px 0 15px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.viste a h2 {
    padding: 0 15px 0 10px;
  }
}
main#como .content section .item.narro {
  height: 240px;
  background-image: url(../image/conoce_gabo.png);
  background-size: cover;
  background-position: center;
  background-color: #a3bd31;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.narro {
    height: 22.5vw;
    background-position: center left 25%;
  }
}
main#como .content section .item.narro a {
  padding: 140px 0 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.narro a {
    padding: 13vw 0 0;
  }
}
main#como .content section .item.narro a h2 {
  padding: 0 5px 0 15px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.narro a h2 {
    font-size: 12px;
    height: 38px;
  }
}
main#como .content section .item.narro video {
  width: 70%;
  height: 65%;
  object-fit: cover;
  object-position: top left;
}
main#como .content section .item.amigo {
  height: 225px;
  background-image: url(../image/ilustraciones-cuento/page-5.jpg);
  background-size: cover;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.amigo {
    height: 22.5vw;
  }
}
main#como .content section .item.amigo a {
  padding: 135px 0 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.amigo a {
    padding: 14vw 0 0;
  }
}
main#como .content section .item.amigo a h2 {
  padding: 0 50px 0 15px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.amigo a h2 {
    padding: 0 10px 0 10px;
  }
}
main#como .content section .item.fundo {
  height: 470px;
  background-image: url(../image/dibuja_recuerdo.png);
  background-size: cover;
  background-position: center left 10%;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.fundo {
    height: 47vw;
    background-size: auto 110%;
    background-position: top left 25%;
  }
}
main#como .content section .item.fundo a {
  padding: 65px 0 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.fundo a {
    padding: 13vw 0 0;
  }
}
main#como .content section .item.fundo a h2 {
  padding: 0 5px 0 15px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.fundo a h2 {
    font-size: 12px;
    height: 38px;
  }
}
main#como .content section .item.tutoriales {
  height: 240px;
  background-image: url(../image/fondo-tutoriales.png);
  background-size: auto 80%;
  background-position: center left 20%;
  background-color: #e9ddbc;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.tutoriales {
    height: 24vw;
    background-size: auto 70%;
    background-position: center left 5%;
  }
}
main#como .content section .item.tutoriales a {
  padding: 75px 0 0;
}
main#como .content section .item.tutoriales a h2 {
  padding: 0 25px 0 15px;
}
main#como .content section .item.dibuja {
  height: 225px;
  background-image: url(../image/dibuja_donde_vives.png);
  background-size: cover;
  background-position: center;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.dibuja {
    height: 22.5vw;
  }
}
main#como .content section .item.dibuja a {
  padding: 140px 0 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.dibuja a {
    padding: 13vw 0 0;
  }
}
main#como .content section .item.dibuja a h2 {
  padding: 0 10px 0 15px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.dibuja a h2 {
    padding: 0 5px 0 10px;
  }
}
main#como .content section .item.cartel {
  height: 225px;
  background-image: url(../image/crea_cartel.png);
  background-size: cover;
  background-position: center left;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.cartel {
    height: 22.5vw;
  }
}
main#como .content section .item.cartel a {
  padding: 140px 0 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.cartel a {
    padding: 13vw 0 0;
  }
}
main#como .content section .item.cartel a h2 {
  padding: 0 10px 0 15px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.cartel a h2 {
    padding: 0 5px 0 10px;
  }
}
main#como .content section .item.periodista {
  height: 225px;
  background-image: url(../image/gabo_periodista.png);
  background-size: cover;
  background-position: center left;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.periodista {
    height: 22.5vw;
  }
}
main#como .content section .item.periodista a {
  padding: 140px 0 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.periodista a {
    padding: 13vw 0 0;
  }
}
main#como .content section .item.periodista a h2 {
  padding: 0 10px 0 15px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#como .content section .item.periodista a h2 {
    padding: 0 5px 0 10px;
  }
}
main#como .content section:nth-child(2), main#como .content section:nth-child(3), main#como .content section:nth-child(5), main#como .content section:nth-child(6) {
  width: 25%;
}

main#viste-gabo .center {
  background: linear-gradient(to left, #ffffcc 30%, #ee7264 30%);
  position: relative;
}
main#viste-gabo .center .content {
  max-width: 1280px;
  padding: 20px 20px 50px;
  margin: 0 auto;
  background: linear-gradient(to left, #ffffcc 480px, #ee7264 480px);
  display: flex;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#viste-gabo .center .content {
    background: linear-gradient(to left, #ffffcc 300px, #ee7264 300px);
  }
}
main#viste-gabo .center .content .column.left {
  width: calc(100% - 460px);
  padding: 0 25px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  z-index: 1;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#viste-gabo .center .content .column.left {
    width: calc(100% - 280px);
    padding: 0 20px 0 0;
  }
}
main#viste-gabo .center .content .column.left h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  width: 100%;
  margin: 0 0 20px;
}
@media (max-width: 1080px) {
  main#viste-gabo .center .content .column.left h1 {
    font-size: 24px;
  }
}
main#viste-gabo .center .content .column.left .box {
  padding: 35px 0 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#viste-gabo .center .content .column.left .box {
    padding: 0 0 15px;
  }
}
main#viste-gabo .center .content .column.left .box h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  margin: 0 0 20px;
}
@media (max-width: 1080px) {
  main#viste-gabo .center .content .column.left .box h2 {
    font-size: 18px;
    margin: 0 0 5px;
  }
}
main#viste-gabo .center .content .column.left .box .pic {
  height: 120px;
  border: 1px solid #fff;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#viste-gabo .center .content .column.left .box .pic {
    height: auto;
  }
}
main#viste-gabo .center .content .column.left .box .pic ul {
  margin: 9px 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-around;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#viste-gabo .center .content .column.left .box .pic ul {
    margin: 4px 0;
    flex-wrap: wrap;
  }
}
main#viste-gabo .center .content .column.left .box .pic ul li img {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: contain;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#viste-gabo .center .content .column.left .box .pic ul li img {
    width: 45px;
    height: 45px;
  }
}
main#viste-gabo .center .content .column.left .box.camisas {
  width: 100%;
}
main#viste-gabo .center .content .column.left .box.pantalones {
  width: calc(60% - 10px);
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#viste-gabo .center .content .column.left .box.pantalones {
    width: 100%;
  }
}
main#viste-gabo .center .content .column.left .box.zapatos {
  width: calc(40% - 10px);
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#viste-gabo .center .content .column.left .box.zapatos {
    width: calc(50% - 10px);
  }
}
main#viste-gabo .center .content .column.left .box.blazers {
  width: calc(40% - 10px);
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#viste-gabo .center .content .column.left .box.blazers {
    width: calc(50% - 10px);
  }
}
main#viste-gabo .center .content .column.left .box.accesorios {
  width: calc(60% - 10px);
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#viste-gabo .center .content .column.left .box.accesorios {
    width: 100%;
  }
}
main#viste-gabo .center .content .column.right {
  width: 460px;
  padding: 60px 0 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#viste-gabo .center .content .column.right {
    width: 280px;
  }
}
main#viste-gabo .center .content .column.right .gabo {
  width: 460px;
  height: 600px;
  background-image: url(../image/prendas_completas/gabriel_garcia.png);
  background-size: 460px;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#viste-gabo .center .content .column.right .gabo {
    width: 280px;
    height: 360px;
    background-size: 280px;
  }
}
main#viste-gabo .center .content .column.right .gabo ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
main#viste-gabo .center .content .column.right .gabo ul li {
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
}
main#viste-gabo .center .content .column.right .gabo ul li .ui-droppable {
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
main#viste-gabo .center .content .column.right .gabo ul li .ui-droppable.focus {
  z-index: 1;
}
main#viste-gabo .center .content .column.right .gabo ul li.camisas, main#viste-gabo .center .content .column.right .gabo ul li.blazers {
  width: 324px;
  height: 324px;
  top: 47px;
  left: 12px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#viste-gabo .center .content .column.right .gabo ul li.camisas, main#viste-gabo .center .content .column.right .gabo ul li.blazers {
    width: 197px;
    height: 197px;
    top: 26px;
    left: 6px;
  }
}
main#viste-gabo .center .content .column.right .gabo ul li.pantalones {
  width: 270px;
  height: 270px;
  bottom: 70px;
  left: 20px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#viste-gabo .center .content .column.right .gabo ul li.pantalones {
    width: 165px;
    height: 165px;
    bottom: 40px;
    left: 12px;
  }
}
main#viste-gabo .center .content .column.right .gabo ul li.zapatos {
  width: 120px;
  height: 120px;
  bottom: 13px;
  left: 20px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#viste-gabo .center .content .column.right .gabo ul li.zapatos {
    width: 75px;
    height: 75px;
    bottom: 4px;
    left: 12px;
  }
}
main#viste-gabo .center .content .column.right .gabo ul li.accesorios {
  width: 130px;
  height: 130px;
  top: 0;
  left: 42px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#viste-gabo .center .content .column.right .gabo ul li.accesorios {
    width: 80px;
    height: 80px;
    top: -3px;
    left: 25px;
  }
}
main#viste-gabo .center .content .column.right #reset {
  -webkit-appearance: inherit;
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 40px;
  border: 0;
  border-radius: 20px;
  background: #ef7264;
  font-family: "Mali", cursive;
  font-weight: 700;
  font-size: 20px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  outline: none;
  cursor: pointer;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#viste-gabo .center .content .column.right #reset {
    width: auto;
    height: 35px;
    font-size: 16px;
    line-height: 35px;
    padding: 0px 10px;
  }
}

main#gabo-mundo .center {
  background-image: url(../image/mapagabo.jpg);
  background-size: 2900px;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #e5ddd2;
  position: relative;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center {
    background-size: 1280px;
    background-position: center top;
  }
}
main#gabo-mundo .center .content {
  max-width: 1280px;
  padding: 15px 30px 0;
  margin: 0 auto;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content {
    padding: 15px 0;
  }
}
main#gabo-mundo .center .content h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 24px;
  line-height: 38px;
  color: #0743a2;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  display: inline-block;
  height: 40px;
  padding: 0 10px 0 15px;
  border-radius: 30px;
  background: #e5ddd2;
  margin: 0 40px;
}
@media (max-width: 1080px) {
  main#gabo-mundo .center .content h1 {
    font-size: 21px;
    line-height: 28px;
    height: 30px;
    margin: 0 20px;
  }
}
main#gabo-mundo .center .content .media .map {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  height: 666px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map {
    width: 540px;
    height: 270px;
    margin: 0 auto;
  }
}
main#gabo-mundo .center .content .media .map .item {
  position: absolute;
}
main#gabo-mundo .center .content .media .map .item > img {
  display: block;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  cursor: pointer;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
main#gabo-mundo .center .content .media .map .item > img:hover {
  -webkit-transform: scale(1);
  transform: scale(1);
}
main#gabo-mundo .center .content .media .map .item aside {
  position: absolute;
  margin: -110px calc(50% - 100px) 0;
  padding: 15px 40px 15px 15px;
  width: 420px;
  border: 2px dashed #fff;
  border-radius: 20px;
  background: #33999B;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  -webkit-transform: scale(0);
  transform: scale(0);
  transform-origin: 25% 40%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  z-index: 2;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item aside {
    position: fixed;
    top: 110px;
    right: 0;
    left: 0;
    margin: auto;
    width: 90%;
    transform-origin: top center;
  }
}
main#gabo-mundo .center .content .media .map .item aside .close {
  -webkit-appearance: inherit;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-image: url(../image/ico-cerrar-blanco.png);
  background-size: 24px;
  background-position: center;
  background-color: #115f72;
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0;
  outline: none;
  cursor: pointer;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  z-index: 1;
}
main#gabo-mundo .center .content .media .map .item aside .close:hover {
  background-color: #0f4253;
}
main#gabo-mundo .center .content .media .map .item aside .info {
  display: flex;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item aside .info {
    height: 100%;
    overflow: auto;
  }
}
main#gabo-mundo .center .content .media .map .item aside .info img {
  display: block;
  width: 110px;
  height: 110px;
  object-fit: cover;
  margin: 0 15px 0 0;
  border-radius: 4px;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
main#gabo-mundo .center .content .media .map .item aside .info p {
  font-size: 12px;
  margin: 0;
  width: calc(100% - 125px);
}
main#gabo-mundo .center .content .media .map .item aside.rojo {
  background: #d03400;
}
main#gabo-mundo .center .content .media .map .item aside.rojo .info p {
  color: #fff;
}
main#gabo-mundo .center .content .media .map .item aside.verde {
  background: #99cc00;
}
main#gabo-mundo .center .content .media .map .item aside.verde-2 {
  background: #cccc00;
}
main#gabo-mundo .center .content .media .map .item aside.naranja {
  background: #ff6600;
}
main#gabo-mundo .center .content .media .map .item aside.naranja .info p {
  color: #fff;
}
main#gabo-mundo .center .content .media .map .item aside.naranja-2 {
  background: #ff9900;
}
main#gabo-mundo .center .content .media .map .item aside.amarillo {
  background: #ffcc00;
}
main#gabo-mundo .center .content .media .map .item aside.azul {
  background: #0099ff;
}
main#gabo-mundo .center .content .media .map .item aside.azul .info p {
  color: #fff;
}
main#gabo-mundo .center .content .media .map .item aside.fucsia {
  background: #ee00d1;
}
main#gabo-mundo .center .content .media .map .item aside.fucsia .info p {
  color: #fff;
}
main#gabo-mundo .center .content .media .map .item aside.active {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}
main#gabo-mundo .center .content .media .map .item.aracataca {
  top: 291px;
  left: 665px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.aracataca {
    top: 111px;
    left: 293px;
  }
}
main#gabo-mundo .center .content .media .map .item.aracataca > img {
  width: 33px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.aracataca > img {
    width: 18px;
  }
}
main#gabo-mundo .center .content .media .map .item.cartagena {
  top: 294px;
  left: 606px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.cartagena {
    top: 109px;
    left: 263px;
  }
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.cartagena > img {
    width: 22px;
  }
}
main#gabo-mundo .center .content .media .map .item.barranquilla {
  top: 249px;
  left: 590px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.barranquilla {
    top: 86px;
    left: 254px;
  }
}
main#gabo-mundo .center .content .media .map .item.barranquilla > img {
  width: 90px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.barranquilla > img {
    width: 45px;
  }
}
main#gabo-mundo .center .content .media .map .item.sucre {
  top: 383px;
  left: 653px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.sucre {
    top: 147px;
    left: 284px;
  }
}
main#gabo-mundo .center .content .media .map .item.sucre > img {
  width: 33px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.sucre > img {
    width: 24px;
  }
}
main#gabo-mundo .center .content .media .map .item.since {
  top: 357px;
  left: 632px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.since {
    top: 126px;
    left: 269px;
  }
}
main#gabo-mundo .center .content .media .map .item.since > img {
  width: 33px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.since > img {
    width: 24px;
  }
}
main#gabo-mundo .center .content .media .map .item.zipaquira {
  top: 486px;
  left: 594px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.zipaquira {
    top: 188px;
    left: 292px;
  }
}
main#gabo-mundo .center .content .media .map .item.zipaquira > img {
  width: 33px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.zipaquira > img {
    width: 24px;
  }
}
main#gabo-mundo .center .content .media .map .item.bogota {
  top: 486px;
  left: 594px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.bogota {
    top: 195px;
    left: 264px;
  }
}
main#gabo-mundo .center .content .media .map .item.bogota > img {
  width: 90px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.bogota > img {
    width: 50px;
  }
}
main#gabo-mundo .center .content .media .map .item.ginebra {
  top: 105px;
  left: 850px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.ginebra {
    top: 20px;
    left: 380px;
  }
}
main#gabo-mundo .center .content .media .map .item.ginebra > img {
  width: 84px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.ginebra > img {
    width: 42px;
  }
}
main#gabo-mundo .center .content .media .map .item.roma {
  top: 160px;
  left: 865px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.roma {
    top: 50px;
    left: 385px;
  }
}
main#gabo-mundo .center .content .media .map .item.roma > img {
  width: 96px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.roma > img {
    width: 48px;
  }
}
main#gabo-mundo .center .content .media .map .item.paris {
  top: 30px;
  left: 790px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.paris {
    top: -15px;
    left: 350px;
  }
}
main#gabo-mundo .center .content .media .map .item.paris > img {
  width: 62px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.paris > img {
    width: 31px;
  }
}
main#gabo-mundo .center .content .media .map .item.londres {
  top: 50px;
  left: 710px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.londres {
    top: 0;
    left: 307px;
  }
}
main#gabo-mundo .center .content .media .map .item.londres > img {
  width: 94px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.londres > img {
    width: 47px;
  }
}
main#gabo-mundo .center .content .media .map .item.barcelona {
  top: 190px;
  left: 700px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.barcelona {
    top: 62px;
    left: 305px;
  }
}
main#gabo-mundo .center .content .media .map .item.barcelona > img {
  width: 90px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.barcelona > img {
    width: 45px;
  }
}
main#gabo-mundo .center .content .media .map .item.estocolmo {
  top: -45px;
  left: 875px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.estocolmo {
    left: 385px;
  }
}
main#gabo-mundo .center .content .media .map .item.estocolmo > img {
  width: 82px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.estocolmo > img {
    width: 41px;
  }
}
main#gabo-mundo .center .content .media .map .item.caracas {
  top: 468px;
  left: 338px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.caracas {
    top: 170px;
    left: 150px;
  }
}
main#gabo-mundo .center .content .media .map .item.caracas > img {
  width: 54px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.caracas > img {
    width: 27px;
  }
}
main#gabo-mundo .center .content .media .map .item.nueva-york {
  top: 83px;
  left: 230px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.nueva-york {
    top: 15px;
    left: 100px;
  }
}
main#gabo-mundo .center .content .media .map .item.nueva-york > img {
  width: 174px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.nueva-york > img {
    width: 87px;
  }
}
main#gabo-mundo .center .content .media .map .item.habana {
  top: 343px;
  left: 243px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.habana {
    top: 130px;
    left: 105px;
  }
}
main#gabo-mundo .center .content .media .map .item.habana > img {
  width: 50px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.habana > img {
    width: 25px;
  }
}
main#gabo-mundo .center .content .media .map .item.mexico {
  top: 360px;
  left: 40px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.mexico {
    top: 135px;
    left: 15px;
  }
}
main#gabo-mundo .center .content .media .map .item.mexico > img {
  width: 98px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.mexico > img {
    width: 49px;
  }
}
main#gabo-mundo .center .content .media .map .item.caribe {
  top: 388px;
  left: 282px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.caribe {
    top: 145px;
    left: 130px;
  }
}
main#gabo-mundo .center .content .media .map .item.caribe > img {
  width: 61px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#gabo-mundo .center .content .media .map .item.caribe > img {
    width: 32px;
  }
}

main#consejos {
  background-color: #F8F4D2;
  padding-bottom: 30px;
}
main#consejos .center {
  padding-top: 30px;
}
main#consejos .center .container {
  max-width: 1280px;
  padding: 0 2px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#consejos .center .container {
    padding: 0 2px 40px;
  }
}
main#consejos .center .container .narrate {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: calc(33.3% - 4px);
  height: 360px;
  padding: 15px 20px;
  margin: 0 2px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  position: relative;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#consejos .center .container .narrate {
    height: calc(33.3vw - 4px);
    padding: 2vw;
  }
}
main#consejos .center .container .narrate:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  position: absolute;
  top: 0;
  left: 0;
}
main#consejos .center .container .narrate h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0 0 5px;
  padding: 0 0 0 40px;
  border-bottom: 1px solid;
  background-size: 24px;
  background-position: center left;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#consejos .center .container .narrate h2 {
    font-size: 16px;
    line-height: 24px;
    padding: 0 0 0 30px;
    background-size: 24px;
  }
}
main#consejos .center .container .narrate h3 {
  font-weight: 400;
  line-height: 1.3em;
  color: #fff;
  margin: 0;
  position: relative;
  z-index: 1;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#consejos .center .container .narrate h3 {
    font-size: 10px;
    line-height: 1.2em;
  }
}
main#consejos .center .container .narrate.novela {
  background-image: url(../image/el-papel-abuelos.jpg);
  margin: 0 2px 4px;
}
main#consejos .center .container .narrate.novela h2 {
  background-image: url(../image/ico-novela.png);
  border-color: #ba007c;
}
main#consejos .center .container .narrate.periodismo {
  background-image: url(../image/amigos-maestros.jpg);
}
main#consejos .center .container .narrate.periodismo h2 {
  background-image: url(../image/ico-periodismo.png);
  border-color: #f15601;
}
main#consejos .center .container .narrate.cuento {
  background-image: url(../image/gabo-profe.jpg);
  margin: 0 2px 4px;
}
main#consejos .center .container .narrate.cuento h2 {
  background-image: url(../image/ico-cuento.png);
  border-color: #ffcc00;
}
main#consejos .center .container .narrate.cine {
  width: calc(50% - 4px);
  background-image: url(../image/que-narro-cine-y-teatro.jpg);
}
main#consejos .center .container .narrate.cine h2 {
  background-image: url(../image/ico-cine.png);
  border-color: #006f9b;
}
main#consejos .center .container .narrate.tv {
  width: calc(50% - 4px);
  background-image: url(../image/que-narro-tv-y-radio.jpg);
}
main#consejos .center .container .narrate.tv h2 {
  background-image: url(../image/ico-tv.png);
  border-color: #ff7b23;
}

main#papel-abuelos .content {
  position: relative;
}
main#papel-abuelos .content .summary {
  padding: 25px calc(50% - 600px);
  border-bottom: 4px solid #fff;
  background: #5B51DD;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#papel-abuelos .content .summary {
    padding: 15px 50px 20px 20px;
  }
}
main#papel-abuelos .content .summary h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0 0 20px;
}
@media (max-width: 1080px) {
  main#papel-abuelos .content .summary h1 {
    font-size: 24px;
    margin: 0 0 10px;
  }
}
main#papel-abuelos .content .summary p {
  font-family: "Mali", cursive;
  font-weight: 700;
  font-size: 28px;
  color: #fff;
  margin: 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#papel-abuelos .content .summary p {
    font-size: 16px;
  }
}
main#papel-abuelos .content .box-slide {
  background: #F5F8E7;
  padding: 20px 50px 40px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#papel-abuelos .content .box-slide {
    padding: 20px 50px 60px;
  }
}
main#papel-abuelos .content .box-slide h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #447b78;
  margin: 0;
}
main#papel-abuelos .content .box-slide .data-slide {
  max-width: 1180px;
  margin: 0 auto;
  height: 0;
  border: 2px solid #ce6b03;
  border-radius: 4px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  position: relative;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
main#papel-abuelos .content .box-slide .data-slide .close {
  -webkit-appearance: inherit;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-image: url(../image/ico-cerrar-blanco.png);
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #73b2af;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0;
  outline: none;
  cursor: pointer;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  z-index: 1;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#papel-abuelos .content .box-slide .data-slide .close {
    width: 30px;
    height: 30px;
    top: 5px;
    right: 5px;
  }
}
main#papel-abuelos .content .box-slide .data-slide .close:hover {
  background-color: #ea7322;
}
main#papel-abuelos .content .box-slide .data-slide .right {
  width: 190px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#papel-abuelos .content .box-slide .data-slide .right {
    width: 100px;
  }
}
main#papel-abuelos .content .box-slide .data-slide .right img {
  display: block;
  width: 100%;
}
main#papel-abuelos .content .box-slide .data-slide .left {
  width: calc(100% - 190px);
  padding: 20px 70px 0 30px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#papel-abuelos .content .box-slide .data-slide .left {
    width: calc(100% - 100px);
    padding: 10px 30px 0 10px;
  }
}
main#papel-abuelos .content .box-slide .data-slide .left h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #cc6600;
  text-transform: uppercase;
  margin: 0 0 15px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#papel-abuelos .content .box-slide .data-slide .left h2 {
    font-size: 21px;
    margin: 0 0 10px;
  }
}
main#papel-abuelos .content .box-slide .data-slide .left p {
  font-family: "Mali", cursive;
  font-size: 18px;
  margin: 0;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#papel-abuelos .content .box-slide .data-slide .left p {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.25em;
    margin: 0 0 10px;
  }
}
main#papel-abuelos .content .box-slide .data-slide .left .link {
  display: block;
  margin: 15px 0 20px calc(100% - 295px);
  width: 295px;
  padding: 0 0 0 40px;
  border: 2px dotted #db9600;
  border-radius: 4px;
  background-image: url(../image/mark-guion.png);
  background-size: 40px;
  background-position: top left 20px;
  background-repeat: no-repeat;
  font-family: "Rochester", cursive;
  font-size: 24px;
  line-height: 52px;
  color: #cc6600;
  text-align: center;
}
main#papel-abuelos .content .box-slide .data-slide.active {
  margin: 25px auto 40px;
  height: auto;
  padding: 10px;
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
  transform: scale(1);
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#papel-abuelos .content .box-slide .data-slide.active {
    margin: 5px auto 20px;
  }
}
main#papel-abuelos .content .box-slide .pic {
  margin: 0 auto;
  width: 1180px;
  padding: 20px 20px 40px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#papel-abuelos .content .box-slide .pic {
    width: 100%;
    padding: 10px 20px;
  }
}
main#papel-abuelos .content .box-slide .pic .owl-item .portada {
  position: relative;
  margin: 0 auto;
  width: 200px;
  height: 295px;
}
main#papel-abuelos .content .box-slide .pic .owl-item .portada img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main#papel-abuelos .content .box-slide .pic .owl-item .portada h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  height: 100%;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  cursor: pointer;
}
main#papel-abuelos .content .box-slide .pic .owl-item .portada:hover h2 {
  opacity: 1;
  visibility: visible;
}
main#papel-abuelos .content .box-slide .pic .owl-nav div {
  font-size: 0;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  position: absolute;
  bottom: 0;
  top: 0;
  margin: auto;
}
main#papel-abuelos .content .box-slide .pic .owl-nav div.owl-prev {
  left: 0;
  border-color: transparent transparent transparent #73b2af;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#papel-abuelos .content .box-slide .pic .owl-nav div.owl-prev {
    left: -30px;
  }
}
main#papel-abuelos .content .box-slide .pic .owl-nav div.owl-next {
  right: 0;
  border-color: transparent #73b2af transparent transparent;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#papel-abuelos .content .box-slide .pic .owl-nav div.owl-next {
    right: -30px;
  }
}
main#papel-abuelos .content .box-slide .action {
  display: block;
  margin: 10px auto;
  width: 580px;
  height: 60px;
  padding: 0 0 0 40px;
  border: 2px dotted #447b78;
  border-radius: 4px;
  background-image: url(../image/mark-aqua-view.png);
  background-size: 40px;
  background-position: top left 20px;
  background-repeat: no-repeat;
  font-family: "Rochester", cursive;
  font-size: 24px;
  line-height: 56px;
  color: #447b78;
  text-align: center;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#papel-abuelos .content .box-slide .action {
    width: 460px;
    height: 50px;
    background-size: 32px;
    background-position: top left 12px;
    font-size: 20px;
    line-height: 46px;
  }
}

main#metodos {
  position: relative;
  overflow: hidden;
}
main#metodos .center #contenedorPuzzle {
  display: flex;
  justify-content: space-between;
}
main#metodos .center #contenedorPuzzle .content {
  width: 50%;
  padding: 20px;
  position: relative;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#metodos .center #contenedorPuzzle .content {
    padding: 20px 20px 50px;
  }
}
main#metodos .center #contenedorPuzzle .content .box {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#metodos .center #contenedorPuzzle .content .box {
    width: 100%;
    height: 22vw;
  }
}
main#metodos .center #contenedorPuzzle .content .image {
  padding: 10px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#metodos .center #contenedorPuzzle .content .image img {
    width: auto;
    height: 100%;
    display: block;
    margin: 0 auto;
  }
}
main#metodos .center #contenedorPuzzle .content.left {
  background: #5753d5;
  z-index: 1;
}
main#metodos .center #contenedorPuzzle .content.left h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 30px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  height: 30px;
  margin: 0 0 20px;
}
@media (max-width: 1080px) {
  main#metodos .center #contenedorPuzzle .content.left h1 {
    font-size: 24px;
    margin: 0 0 10px;
  }
}
main#metodos .center #contenedorPuzzle .content.left .box-drag {
  width: 150px;
  margin: 0 auto;
  z-index: 2;
  position: relative;
}
main#metodos .center #contenedorPuzzle .content.left .image {
  -webkit-filter: brightness(100);
  filter: brightness(100);
}
main#metodos .center #contenedorPuzzle .content.left .image img {
  cursor: grab;
}
main#metodos .center #contenedorPuzzle .content.left .image img.active {
  opacity: 0.6;
  cursor: default;
}
main#metodos .center #contenedorPuzzle .content.left:after {
  content: "";
  display: block;
  width: 70px;
  height: 70px;
  background: #5753d5;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50px;
  right: -35px;
  bottom: 0;
  margin: auto;
  z-index: 1;
}
main#metodos .center #contenedorPuzzle .content.right {
  background: #e2dcd0;
}
main#metodos .center #contenedorPuzzle .content.right .box-pieza {
  width: 300px;
  padding: 50px 0 0;
  margin: 0 auto;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#metodos .center #contenedorPuzzle .content.right .box-pieza {
    width: 100%;
  }
}
main#metodos .center #contenedorPuzzle .content.right .box-pieza .box {
  width: 300px;
  display: flex;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#metodos .center #contenedorPuzzle .content.right .box-pieza .box {
    width: 100%;
  }
}
main#metodos .center #contenedorPuzzle .content.right .box-pieza .box .image, main#metodos .center #contenedorPuzzle .content.right .box-pieza .box .color {
  width: 150px;
  height: 150px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#metodos .center #contenedorPuzzle .content.right .box-pieza .box .image, main#metodos .center #contenedorPuzzle .content.right .box-pieza .box .color {
    width: 50%;
    height: 22vw;
  }
}
main#metodos .center #contenedorPuzzle .content.right .box-pieza .box .color .contenedorPieza {
  height: 150px;
  padding: 7px;
  border: 3px dotted #5753d5;
  border-radius: 5px;
  background-size: 90%;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#metodos .center #contenedorPuzzle .content.right .box-pieza .box .color .contenedorPieza {
    height: 100%;
  }
}
main#metodos .modal {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 420px;
  height: 380px;
  padding: 40px;
  border: 5px dotted #fff;
  border-radius: 10px;
  background: #bd0052;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  z-index: 1;
}
@media (max-width: 1080px) {
  main#metodos .modal {
    width: 440px;
    height: 260px;
    padding: 15px 50px;
    position: fixed;
    top: 0;
    z-index: 2;
  }
}
main#metodos .modal .close {
  -webkit-appearance: inherit;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-image: url(../image/ico-cerrar-blanco.png);
  background-size: 24px;
  background-position: center;
  background-color: #115f72;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0;
  outline: none;
  cursor: pointer;
  -webkit-transition: all 0.15s linear;
  transition: all 0.15s linear;
  z-index: 1;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#metodos .modal .close {
    top: 5px;
    right: 5px;
  }
}
main#metodos .modal .close:hover {
  background-color: #0f4253;
}
main#metodos .modal .box .pic {
  height: 150px;
  -webkit-filter: brightness(100);
  filter: brightness(100);
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#metodos .modal .box .pic {
    height: 100px;
  }
}
main#metodos .modal .box .pic img {
  margin: 0 5px;
  height: 150px;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#metodos .modal .box .pic img {
    width: 100px;
  }
}
main#metodos .modal .box h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 32px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 10px 0;
}
@media (max-width: 1080px) {
  main#metodos .modal .box h2 {
    font-size: 24px;
    margin: 15px 0 0;
  }
}
main#metodos .modal .box p {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 21px;
  color: #fff;
  text-align: center;
  margin: 0 0 20px;
}
@media (max-width: 1080px) {
  main#metodos .modal .box p {
    font-size: 18px;
    margin: 5px 0 10px;
  }
}
main#metodos .modal .box .link {
  display: block;
  margin: 0 auto;
  width: 140px;
  height: 40px;
  border: 2px dashed #fff;
  border-radius: 4px;
  font-family: "Rochester", cursive;
  font-size: 30px;
  line-height: 34px;
  color: #fff;
  text-align: center;
}
@media (min-width: 480px) and (max-width: 1080px) and (orientation: landscape) {
  main#metodos .modal .box .link {
    width: 120px;
    height: 30px;
    font-size: 24px;
    line-height: 22px;
  }
}
main#metodos .modal.active {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

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