@charset "UTF-8";
/*Tipography*/
@import url("https://fonts.googleapis.com/css?family=Gochi+Hand|Oswald|Roboto&display=swap");
/*Colors*/
/*Estructura General*/
.clearfix:after {
  content: ".";
  display: block;
  font-size: 0;
  line-height: 0;
  height: 0;
  clear: both;
  visibility: hidden; }

.clearfix {
  display: inline-block; }

* html .clearfix {
  height: 1%; }

.clearfix {
  display: block; }

*, *:after, *:before {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }

html, body {
  width: 100%;
  height: 100%;
  position: relative;
  float: left;
  color: #000000; }

body {
  font-family: "Roboto", sans-serif;
  font-size: 1em; }
  body main {
    padding: 0; }
  body section {
    width: 90%;
    max-width: 1200px;
    margin: 0; }
  body img {
    width: 100%;
    line-height: 0; }
  @media only screen and (max-width: 1000px) {
    body .imglarge {
      display: none;
      visibility: hidden; } }
  body .imgmedium {
    display: none;
    visibility: hidden; }
    @media only screen and (max-width: 1000px) {
      body .imgmedium {
        display: block;
        visibility: visible; } }
    @media only screen and (max-width: 500px) {
      body .imgmedium {
        display: none;
        visibility: hidden; } }
  body .imgsmall {
    display: none;
    visibility: hidden; }
    @media only screen and (max-width: 500px) {
      body .imgsmall {
        display: block;
        visibility: visible; } }
  body p, body label {
    width: 100%;
    text-align: left;
    padding-bottom: 1em; }
  body a {
    color: #000000;
    text-decoration: none;
    border: none;
    outline: none; }
    body a:hover {
      color: #84691e; }
  body ul, body ol {
    list-style: none; }
  body h1 {
    width: auto;
    float: left;
    color: #ffffff;
    line-height: 1em;
    font-family: "Gochi Hand", cursive;
    font-size: 5em; }
  body h2 {
    color: #434343;
    font-family: "Gochi Hand", cursive;
    font-size: 3em;
    padding-bottom: 1em;
    text-align: center; }
    body h2 b {
      color: #eeb500; }
  body h3 {
    color: #000000;
    text-align: center;
    font-family: "Gochi Hand", cursive;
    font-size: 2em; }
  body h4 {
    color: #eeb500;
    font-size: 1.2em;
    font-family: "Roboto", sans-serif;
    font-weight: normal; }
    body h4 b {
      color: #eeb500; }
  body h5 {
    color: #000000;
    font-family: "Oswald", sans-serif;
    font-size: 1.2em; }
  body #bee {
    position: fixed;
    z-index: 1900;
    width: 2em;
    height: 2em;
    background: url("../images/abeja.gif") no-repeat;
    background-size: cover;
    top: 49%;
    left: 48.85%;
    pointer-events: none; }
  body .fancybox-navigation {
    position: absolute;
    height: 100%; }
  body .nicebtn {
    width: auto;
    font-size: 0.8em;
    padding: 1em 2em;
    border-radius: 10px;
    border: 3px solid #000000;
    background: #000000;
    color: #ffffff; }
    body .nicebtn:hover {
      background: rgba(0, 0, 0, 0.6);
      color: #ffffff; }
  @media only screen and (max-width: 500px) {
    body p, body label {
      font-size: 0.9em; } }

body main, body main article, body section, header, header section, header nav, header nav a, header nav ul, header nav ul li ul, footer, footer section .finger:nth-child(2), #banner, #banner #motion .imgmove, #banner #motion .lovers, .intro .introtitle, .family .famer .famname .opendesc, .btnfooterin, .slidebanner, .slidebanner .slider .sliderin, .slidebanner .slider .sliderin picture, .slidebanner .slider .sliderin .slcontent, .modal .modal-content, .modal .modal-content .modalest, .description .desctext, .description .desctext .descintro, .description .desctext .descintro .desctitle, .description .desctext ul, .description .desctext .descsizes, .description .desctext .descsizes a, .introcat .bnrcat, .introcat .bnrcat .bnrtext, .introcat .backer, .ingredientes label, .ingredientes .ingclass .inglist li:nth-child(1), .ingredientes .ingclass .inglist .ingcar, .amazon .intramazon, .amazon .amazonrecomnd, .amazon .amazonrecomnd .recomndbtn, .amazon .amazonreview, .amazon .amazonreview .amretitle, .amazon .amazonreview .amretitle .amreicon, .contactar .contactform, #contact, #contact .wannamore, .conquest, .conquest #contact .fenviar, .contactprev .modal-content, .contactprev .modal-content .opciones, .actividades .actividad, .actividades .actividad .actdesc, .actividades .actividad .actdesc ul, .todosjuegos .losjuegos, .todosjuegos .losjuegos .cadajuego, .todosjuegos .losjuegos .eljuego, .modal-overlay .modal, .bosque .campo, .bosque .elcamino .wall-left, .bosque .elcamino .wall-right, .bosque .elcamino .treehouse, .bosque .elcamino #gameover, .bosque .elcamino #win, .bosque .elcamino .wall-left:hover ~ #gameover,
.bosque .elcamino .wall-right:hover ~ #gameover,
.bosque .elcamino #gameover:hover, .endscreen:target, .beekiller .bk-game, .beekiller .bk-game .bk-game-scene .bk-game-row, .beekiller .bk-gameover, .beekiller .bk-gameover .bk-massage, .beekiller .bk-gameover .bk-massage .bk-mstxt .bk-txt, .terminos .t-table, .terminos .t-table .t-line {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }

.intro .introtitle, .catalogo, .description .desctext .descintro .desctitle, .description .desctext .descsizes, .conquest #contact, .todosjuegos .losjuegos, .bosque .campo {
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }

/*Direction*/
body main, body main article, header section, header nav ul li ul, footer, .intro, .family .famer .famname .opendesc, .btnfooterin, .description .desctext, .description .desctext .descintro, .description .desctext ul, .description .desctext .descsizes a, .introcat .bnrcat .bnrtext, .ingredientes, .ingredientes .ingclass .inglist li:nth-child(1), .amazon, .amazon .intramazon, .amazon .amazonreview, .contactar section, .contactar .contactform, #contact, .conquest, .contactprev .modal-content, .actividades, .actividades .actividad .actdesc, .actividades .actividad .actdesc ul, .todosjuegos, .todosjuegos .losjuegos .eljuego, .modal-overlay .modal, .bosque, .endscreen, .beekiller .bk-head, .beekiller .bk-game, .beekiller .bk-gameover .bk-massage, .beekiller .bk-gameover .bk-massage .bk-mstxt .bk-txt, .terminos .t-table, .nohay article section {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column; }

.conquest #contact {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row; }

/*Justify items*/
body main {
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between; }

header, #banner #motion .imgmove, .intro .introtitle, .family .famer .famname .opendesc, .slidebanner, .slidebanner .slider .sliderin, .slidebanner .slider .sliderin picture, .slidebanner .slider .sliderin .slcontent, .modal .modal-content, .catalogo, .description .desctext .descsizes a, .introcat, .introcat .bnrcat .bnrtext, .ingredientes label, .ingredientes .ingclass .inglist .ingcar, .amazon .intramazon, .amazon .amazonrecomnd, .amazon .amazonreview .amretitle .amreicon, .conquest, .conquest #contact .fenviar, .contactprev .modal-content, .contactprev .modal-content .opciones, .todosjuegos .losjuegos .cadajuego, .todosjuegos .losjuegos .eljuego, .modal-overlay .modal, .bosque, .bosque .campo, .bosque .elcamino .treehouse, .bosque .elcamino #gameover, .bosque .elcamino #win, .endscreen, .beekiller .bk-head, .beekiller .bk-gameover, .beekiller .bk-gameover .bk-massage, .beekiller .bk-gameover .bk-massage .bk-mstxt .bk-txt, .terminos .t-table, .terminos .t-table .t-line {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center; }

header nav, footer section .finger:nth-child(2), .modal .modal-content .modalest, .description, .introcat .bnrcat, .introcat .backer, .actividades .actividad, .beekiller .bk-game .bk-game-scene .bk-game-row {
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between; }

footer section, #banner #motion .lovers, .description .desctext .descsizes, .todosjuegos .losjuegos {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: space-around;
  justify-content: space-around; }

header nav a, .description .desctext .descintro .desctitle, .amazon .amazonrecomnd .recomndbtn, .amazon .amazonreview .amretitle, #contact .wannamore, .actividades .actividad .actdesc, .bosque .elcamino .wall-left {
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start; }

header nav ul, .bosque .elcamino .wall-right {
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end; }

/*Align items*/
body main, body main article, header, header nav, footer, footer section .finger:nth-child(2), #banner, #banner #motion .imgmove, #banner #motion .lovers, .family .famer .famname .opendesc, .slidebanner, .slidebanner .slider .sliderin, .slidebanner .slider .sliderin picture, .slidebanner .slider .sliderin .slcontent, .modal .modal-content, .modal .modal-content .modalest, .description .desctext .descsizes a, .introcat .bnrcat .bnrtext, .introcat .backer, .ingredientes label, .ingredientes .ingclass .inglist li:nth-child(1), .amazon, .amazon .amazonrecomnd, .amazon .amazonreview .amretitle .amreicon, #contact, .conquest, .contactprev .modal-content, .contactprev .modal-content .opciones, .actividades .actividad, .actividades .actividad .actdesc, .todosjuegos, .todosjuegos .losjuegos .cadajuego, .todosjuegos .losjuegos .eljuego, .modal-overlay .modal, .bosque, .bosque .elcamino #gameover, .bosque .elcamino #win, .endscreen, .beekiller .bk-head, .beekiller .bk-game .bk-game-scene .bk-game-row, .beekiller .bk-gameover, .beekiller .bk-gameover .bk-massage, .beekiller .bk-gameover .bk-massage .bk-mstxt .bk-txt, .terminos .t-table, .terminos .t-table .t-line {
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center; }

footer section, .catalogo, .description, .description .desctext, .description .desctext .descsizes, .introcat .bnrcat, .todosjuegos .losjuegos, .bosque .elcamino .treehouse {
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start; }

header section, .contactar .contactform {
  -webkit-box-align: end;
  -moz-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end; }

/* Backgrounds */
/* Animaciones */
body a, header, header .logo, header nav a, header nav ul li:hover ul, header nav ul li ul, .family .famer, .family .famer .famname, .catalogo .producto, .catalogo .producto img, .catalogo .producto p, .description .descimg img, .description .desctext a, .introcat .bnrcat .bnrimg .bebe1, .introcat .bnrcat .bnrimg .bebe2, .introcat .bnrcat .bnrimg .bebe3, .introcat .bnrcat .bnrimg .familia1, .introcat .bnrcat .bnrimg .familia2, .ingredientes label, .ingredientes .ingclass li label, .amazon .label, .amazon .dareviews, .contactprev .modal-content .close, .contactprev .modal-content .back, .actividades .actividad .actimg img, .todosjuegos .losjuegos .eljuego, .wrap .game .card .front, .wrap .game .card .back, .tic-tac-toe .end a, .bosque .puzzle .piece1 .dabg, .bosque .puzzle .piece2 .dabg, .bosque .puzzle .piece3 .dabg, .bosque .puzzle .piece4 .dabg, .bosque .puzzle .piece5 .dabg, .bosque .puzzle .piece6 .dabg, .bosque .puzzle .piece7 .dabg, .bosque .puzzle .piece8 .dabg, .bosque .puzzle .piece9 .dabg {
  transition: 0.2s all;
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -o-transition: 0.2s all;
  -ms-transition: 0.2s all; }

@keyframes fadeIn {
  0% {
    opacity: 0;
    left: -100%; }
  100% {
    opacity: 1;
    left: 0; } }
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
    left: -100%; }
  100% {
    opacity: 1;
    left: 0; } }
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    left: -100%; }
  100% {
    opacity: 1;
    left: 0; } }
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
    left: -100%; }
  100% {
    opacity: 1;
    left: 0; } }
@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
    left: -100%; }
  100% {
    opacity: 1;
    left: 0; } }
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* Safari and Chrome */
  ::i-block-chrome header, body header {
    float: left;
    position: relative;
    top: 0; }
    ::i-block-chrome header nav, body header nav {
      width: 55%; }
  ::i-block-chrome .btnfooter, body .btnfooter {
    float: left; }
  ::i-block-chrome .catalogo, body .catalogo {
    display: block; }
    ::i-block-chrome .catalogo .producto, body .catalogo .producto {
      float: left;
      margin-left: 3%;
      margin-right: 3%; }
      ::i-block-chrome .catalogo .producto img, body .catalogo .producto img {
        transform: scale(1);
        -webkit-transform: scale(1); } }
/*Contenido*/
#navbar {
  transition: top 0.5s; }

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 1em;
  z-index: 2000; }
  header section {
    width: 95%;
    max-width: 1200px; }
  header .logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    min-width: 180px;
    opacity: 1;
    z-index: 2020;
    pointer-events: all; }
    header .logo:hover {
      transform: scale(1.05);
      -webkit-transform: scale(1.05); }
  header nav {
    pointer-events: all; }
    header nav a {
      padding: 1em;
      color: #ffffff;
      font-weight: bold; }
      header nav a:hover {
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
        color: #ffffff; }
    header nav ul li {
      width: auto; }
      header nav ul li:hover ul {
        background: rgba(255, 255, 255, 0.6);
        opacity: 1;
        max-height: 1000px;
        border-radius: 10px; }
      header nav ul li ul {
        position: absolute;
        min-width: 150px;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        font-size: .9em;
        padding: 1em;
        padding-bottom: 0; }
        header nav ul li ul li a {
          color: #000000;
          padding: 0;
          padding-bottom: 1em; }
          header nav ul li ul li a:hover {
            color: #000000; }
  header .mobile {
    width: 100%;
    display: none;
    font-size: 2em;
    padding: 0.5em;
    padding-top: 1em;
    color: gris;
    pointer-events: all; }
  header .active {
    max-height: 9000px !important;
    transition: all 1s ease; }
  @media only screen and (max-width: 800px) {
    header .arrow {
      display: block;
      background: url("../fonts/expand_more.svg") no-repeat;
      background-position: center;
      float: right;
      height: 2em;
      width: 2em;
      position: absolute;
      right: 1em;
      top: 0.8em;
      transition: all 0.3s ease; }
      header .arrow:hover {
        cursor: pointer; }
    header .rotate {
      transition: all 0.3s ease;
      -webkit-transform: rotate(-180deg);
      -moz-transform: rotate(-180deg);
      -o-transform: rotate(-180deg);
      transform: rotate(-180deg); }
    header section {
      width: 100%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -moz-box-orient: vertical;
      -moz-box-direction: normal;
      -ms-flex-direction: column;
      -webkit-flex-direction: column;
      flex-direction: column;
      background-position: top;
      background-size: 100% auto; }
    header nav {
      max-width: none;
      max-height: 0;
      overflow: hidden;
      transition: 0.2s all;
      background: rgba(238, 181, 0, 0.8);
      padding-left: 1em;
      padding-right: 1em;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -moz-box-orient: vertical;
      -moz-box-direction: normal;
      -ms-flex-direction: column;
      -webkit-flex-direction: column;
      flex-direction: column; }
      header nav ul {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column; }
        header nav ul li:hover ul {
          max-height: 0; }
        header nav ul li ul {
          max-height: 0;
          opacity: 1;
          position: relative;
          overflow: hidden;
          transition: 0.2s all;
          padding-top: 0;
          -webkit-transition: 0.2s all; }
          header nav ul li ul li a {
            padding-top: 0.5em; }
    header .mobile {
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      display: -webkit-box;
      -webkit-box-pack: end;
      -moz-box-pack: end;
      -ms-flex-pack: end;
      -webkit-justify-content: flex-end;
      justify-content: flex-end; } }

footer {
  background: #ffffff;
  padding-top: 200px; }
  @media only screen and (max-width: 800px) {
    footer {
      padding-top: 100px; } }
  footer .horney {
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden; }
    @media only screen and (max-width: 800px) {
      footer .horney {
        height: 100px; } }
    footer .horney .muchhoney {
      height: 100%;
      background: url("../images/footerhoney.png") no-repeat;
      background-size: cover;
      background-position: left;
      animation-duration: 5s;
      animation-name: escurre;
      animation-iteration-count: infinite; }
@keyframes escurre {
  from, to {
    margin-top: 0; }
  50% {
    margin-top: -20px; } }
  footer h3 {
    padding-top: 2em;
    padding-bottom: 2em;
    color: #000000; }
  footer section {
    font-size: 0.9em;
    padding-top: 3em;
    padding-bottom: 2em; }
    footer section h3 {
      padding-top: 0;
      padding-bottom: 0.5em;
      text-align: right; }
    footer section .finger {
      width: 50%; }
      footer section .finger:nth-child(1) p {
        text-align: left;
        padding-bottom: 0; }
      @media only screen and (max-width: 800px) {
        footer section .finger:nth-child(2) {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -moz-box-orient: vertical;
          -moz-box-direction: normal;
          -ms-flex-direction: column;
          -webkit-flex-direction: column;
          flex-direction: column; } }
      footer section .finger p {
        text-align: right;
        padding-bottom: 0; }
      @media only screen and (max-width: 800px) {
        footer section .finger p, footer section .finger h3 {
          text-align: left; } }
      footer section .finger .smile {
        font-size: 1.5em;
        padding-bottom: 0.5em; }
      footer section .finger .nail {
        width: 45%;
        text-align: right; }
        @media only screen and (max-width: 800px) {
          footer section .finger .nail {
            width: 100%;
            text-align: left;
            padding: 0.5em 0; } }
  @media only screen and (max-width: 800px) {
    footer section {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -moz-box-orient: vertical;
      -moz-box-direction: normal;
      -ms-flex-direction: column;
      -webkit-flex-direction: column;
      flex-direction: column; }
      footer section .finger {
        width: 100%; } }

#banner {
  perspective: 30px;
  overflow: hidden;
  height: 500px;
  background: #f09a30;
  background: -moz-linear-gradient(top, #f09a30 0%, #ffc336 47%, #c75f10 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #f09a30), color-stop(47%, #ffc336), color-stop(100%, #c75f10));
  background: -webkit-linear-gradient(top, #f09a30 0%, #ffc336 47%, #c75f10 100%);
  background: -o-linear-gradient(top, #f09a30 0%, #ffc336 47%, #c75f10 100%);
  background: -ms-linear-gradient(top, #f09a30 0%, #ffc336 47%, #c75f10 100%);
  background: linear-gradient(to bottom, #f09a30 0%, #ffc336 47%, #c75f10 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09a30', endColorstr='#c75f10', GradientType=0 ); }
  #banner:hover {
    cursor: pointer; }
  #banner #motion {
    height: 100%;
    transition: transform 0.5s;
    -webkit-transition: transform 0.5s; }
    #banner #motion .imgmove {
      height: 130%;
      opacity: 0.9; }
      #banner #motion .imgmove picture {
        width: 40%;
        min-width: 350px; }
    #banner #motion .lovers {
      position: absolute;
      bottom: 20%;
      left: 0; }
      #banner #motion .lovers h1 {
        text-shadow: 1px 1px 2px #84691e; }

.intro {
  padding-top: 10em;
  padding-bottom: 10em; }
  .intro h4 {
    color: #000000;
    font-weight: bold;
    text-align: center; }
  .intro p {
    text-align: justify; }
  .intro .introtitle {
    padding-bottom: 3em; }
    .intro .introtitle h2 {
      width: auto;
      padding-bottom: 0; }
  .intro .minus2 {
    font-size: 2em;
    padding-bottom: 0;
    padding-top: 2em; }

.family {
  position: fixed;
  z-index: 2500;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none; }
  .family .fammelessai {
    bottom: 5em;
    animation-name: asomamelessai;
    animation-duration: 12s;
    animation-iteration-count: infinite; }
  .family .famclover {
    bottom: 10em;
    animation-name: asomaclover;
    animation-duration: 12s;
    animation-iteration-count: infinite; }
    .family .famclover img {
      -webkit-transform: scaleX(-1);
      -moz-transform: scaleX(-1);
      transform: scaleX(-1);
      filter: FlipH;
      -ms-filter: "FlipH"; }
  .family .famcubby {
    top: 5em;
    animation-name: asomacubby;
    animation-duration: 12s;
    animation-iteration-count: infinite; }
  .family .famer {
    width: 180px;
    position: absolute; }
    .family .famer:hover .famname {
      opacity: 1; }
    .family .famer .famname {
      position: absolute;
      height: 100%;
      top: 0;
      left: 0;
      font-size: 0.8em;
      opacity: 0;
      pointer-events: all; }
      .family .famer .famname .opendesc {
        width: 80%;
        min-width: 100px;
        position: absolute;
        bottom: -3em;
        left: 3em;
        background: #84691e;
        border-radius: 10px;
        padding: 0.75em; }
        .family .famer .famname .opendesc:before {
          content: "";
          width: 0;
          height: 0;
          position: absolute;
          top: -15px;
          left: 20px;
          border-bottom: 15px solid #84691e;
          border-right: 10px solid transparent;
          border-left: 10px solid transparent; }
        .family .famer .famname .opendesc h3, .family .famer .famname .opendesc p {
          color: #ffffff;
          width: auto;
          padding-bottom: 0; }
        .family .famer .famname .opendesc p {
          text-align: center; }
@keyframes asomacubby {
  0%, 65%, 100% {
    left: -180px;
    opacity: 0; }
  75%, 90% {
    left: 0;
    opacity: 1; } }
@keyframes asomaclover {
  0%, 40%, 75%, 100% {
    right: -180px;
    opacity: 0; }
  50%, 65% {
    right: 0;
    opacity: 1; } }
@keyframes asomamelessai {
  0%, 35%, 100% {
    left: -180px;
    opacity: 0; }
  10%, 25% {
    left: 0;
    opacity: 1; } }
.btnfooterin .btnfooter {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  font-size: 2.7em;
  color: #000000;
  font-family: "Gochi Hand", cursive;
  text-align: center;
  font-weight: bold; }
  .btnfooterin .btnfooter:hover {
    z-index: 50;
    box-shadow: 0 2px 10px 2px #000000; }
  .btnfooterin .btnfooter:nth-child(1), .btnfooterin .btnfooter:nth-child(3) {
    background: #eeb500; }
  .btnfooterin .btnfooter:nth-child(2) {
    background: #ffffff; }
    .btnfooterin .btnfooter:nth-child(2) b {
      color: #eeb500; }
  .btnfooterin .btnfooter:nth-child(4) {
    background: #000000;
    color: #ffffff; }
    .btnfooterin .btnfooter:nth-child(4) b {
      color: #eeb500; }
  .btnfooterin .btnfooter b {
    color: #ffffff; }
.btnfooterin .fancybox-navigation {
  position: absolute;
  height: 100%; }

@media only screen and (max-width: 500px) {
  #banner {
    height: 300px; }
    #banner #motion .imgmove {
      height: 100%; }
      #banner #motion .imgmove img {
        width: auto;
        min-width: inherit;
        height: 100%; }
    #banner #motion .lovers h1 {
      font-size: 2.5em; }

  .intro {
    padding-bottom: 5em;
    padding-top: 5em;
    font-size: 0.9em; }

  .btnfooterin .btnfooter {
    font-size: 1.5em; }
    .btnfooterin .btnfooter:hover {
      box-shadow: 0 2px 5px 2px #000000; }

  .family .famer {
    width: 120px; }
    .family .famer .famname {
      font-size: 0.75em; }
  @keyframes asomamelessai {
    0%, 10%, 65%, 100% {
      left: -120px;
      opacity: 0; }
    30%, 45% {
      left: 0;
      opacity: 1; } }
  @keyframes asomaclover {
    0%, 40%, 95%, 100% {
      right: -120px;
      opacity: 0; }
    60%, 75% {
      right: 0;
      opacity: 1; } }
  @keyframes asomacubby {
    0%, 45%, 100% {
      left: -120px;
      opacity: 0; }
    10%, 25% {
      left: 0;
      opacity: 1; } } }
.slidebanner {
  height: 700px;
  overflow: hidden;
  background: #000000; }
  @media only screen and (max-width: 600px) {
    .slidebanner {
      height: 500px; } }
  .slidebanner .slider {
    height: 100%;
    float: left; }
    .slidebanner .slider .sliderin {
      height: 100%;
      overflow: hidden; }
      .slidebanner .slider .sliderin picture {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        opacity: 0.6; }
        .slidebanner .slider .sliderin picture img {
          min-height: 100%; }
      .slidebanner .slider .sliderin .slcontent {
        max-width: 1200px;
        height: 100%;
        font-size: 1.5em; }
        .slidebanner .slider .sliderin .slcontent h4, .slidebanner .slider .sliderin .slcontent h3, .slidebanner .slider .sliderin .slcontent p {
          color: #ffffff; }
        .slidebanner .slider .sliderin .slcontent p {
          width: 70%; }
          @media only screen and (max-width: 600px) {
            .slidebanner .slider .sliderin .slcontent p {
              width: 80%;
              font-size: 0.7em; } }
        .slidebanner .slider .sliderin .slcontent .heading-frame {
          position: absolute;
          top: 20%;
          left: 10%;
          width: 80%;
          height: 60%;
          display: grid;
          grid-template-columns: -webkit-max-content auto;
          grid-template-columns: max-content auto;
          grid-template-rows: auto -webkit-max-content;
          grid-template-rows: auto max-content; }
          @media only screen and (max-width: 600px) {
            .slidebanner .slider .sliderin .slcontent .heading-frame {
              height: 80%;
              width: 90%;
              left: 5%;
              top: 10%; } }
          .slidebanner .slider .sliderin .slcontent .heading-frame:before, .slidebanner .slider .sliderin .slcontent .heading-frame:after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            border: 1px solid #ffffff; }
          .slidebanner .slider .sliderin .slcontent .heading-frame:before {
            grid-row: 1 / 2;
            border-right: none;
            border-bottom: none; }
          .slidebanner .slider .sliderin .slcontent .heading-frame:after {
            grid-row: 1 / span 2;
            border-left: none; }
          .slidebanner .slider .sliderin .slcontent .heading-frame h3 {
            max-width: 100%;
            text-align: left; }
            @media only screen and (max-width: 600px) {
              .slidebanner .slider .sliderin .slcontent .heading-frame h3 {
                font-size: 1.5em; } }
  .slidebanner .slick-slider, .slidebanner .slick-list, .slidebanner .slick-track {
    height: 100%; }

.paginator-center {
  position: absolute;
  left: 0;
  top: 50%;
  pointer-events: none; }
  .paginator-center ul {
    padding: 0 1em;
    pointer-events: none; }
    .paginator-center ul li {
      width: auto;
      display: block;
      float: left;
      font-size: 2.5em;
      color: #ffffff;
      pointer-events: all;
      opacity: 0.2;
      transition: 0.5s all;
      -webkit-transition: 0.5s all; }
      .paginator-center ul li:hover {
        opacity: 1; }
    .paginator-center ul .next {
      float: right;
      text-align: right; }

.slick-dots {
  bottom: 0px;
  margin-left: 0;
  position: absolute;
  left: 50%;
  bottom: 1em;
  z-index: 1000;
  list-style: none;
  width: auto;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  opacity: 0.2;
  transition: 0.5s all;
  -webkit-transition: 0.5s all; }
  @media only screen and (max-width: 800px) {
    .slick-dots {
      left: 45%; } }
  @media only screen and (max-width: 600px) {
    .slick-dots {
      left: 40%; } }
  @media only screen and (max-width: 400px) {
    .slick-dots {
      left: 30%; } }
  .slick-dots:hover {
    opacity: 1; }
  .slick-dots li {
    width: auto;
    float: left;
    padding: 0.5em; }
  .slick-dots button {
    display: block;
    width: 0.8em;
    height: 0.8em;
    padding: 0;
    border: none;
    border-radius: 100%;
    background-color: #ffffff;
    text-indent: -9999px; }
  .slick-dots li.slick-active button {
    background-color: #eeb500; }

.modal {
  display: none;
  position: fixed;
  z-index: 3000;
  left: 0;
  top: 0;
  padding-top: 5%;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4); }
  .modal .modal-content {
    margin: auto;
    border-radius: 10px;
    border: 5px solid #eeb500;
    width: 90%;
    height: 90%;
    min-height: 600px;
    max-width: 1200px;
    background: rgba(0, 0, 0, 0.8); }
    .modal .modal-content .close {
      width: auto;
      position: absolute;
      right: 0.5em;
      top: 0.5em;
      z-index: 3001;
      font-size: 2em;
      color: #ffffff; }
      .modal .modal-content .close:hover, .modal .modal-content .close:focus {
        cursor: pointer;
        transform: scale(1.1);
        -webkit-transform: scale(1.1); }
    .modal .modal-content .modalest {
      height: 80%;
      width: 90%;
      float: left;
      padding: 1em;
      border: 1px solid #eeb500;
      border-radius: 10px;
      color: #ffffff; }
      .modal .modal-content .modalest .modalimg {
        width: 30%;
        min-width: 180px;
        min-height: 180px;
        border: 2px solid #eeb500;
        border-radius: 50%;
        overflow: hidden;
        line-height: 0; }
      .modal .modal-content .modalest .modaltext {
        width: 60%; }
        .modal .modal-content .modalest .modaltext h2, .modal .modal-content .modalest .modaltext p {
          width: auto; }
        .modal .modal-content .modalest .modaltext h2 {
          text-align: left;
          color: #ffffff; }
  @media only screen and (max-width: 650px) {
    .modal .modal-content .modalest {
      height: 90%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -moz-box-orient: vertical;
      -moz-box-direction: normal;
      -ms-flex-direction: column;
      -webkit-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center; }
      .modal .modal-content .modalest .modalimg {
        min-width: 120px;
        min-height: 120px; }
      .modal .modal-content .modalest .modaltext {
        width: 100%; }
        .modal .modal-content .modalest .modaltext h2 {
          text-align: center;
          padding-bottom: 0.5em;
          padding-top: 0.5em; } }

.catalogo {
  padding-bottom: 3em; }
  .catalogo .producto {
    width: 26%;
    min-width: 200px;
    padding: 1em; }
    .catalogo .producto:hover img {
      transform: scale(1);
      -webkit-transform: scale(1); }
    .catalogo .producto:hover p {
      color: #84691e;
      background: white;
      background: -moz-linear-gradient(top, white 0%, #f0d04f 100%);
      background: -webkit-gradient(left top, left bottom, color-stop(0%, white), color-stop(100%, #f0d04f));
      background: -webkit-linear-gradient(top, white 0%, #f0d04f 100%);
      background: -o-linear-gradient(top, white 0%, #f0d04f 100%);
      background: -ms-linear-gradient(top, white 0%, #f0d04f 100%);
      background: linear-gradient(to bottom, white 0%, #f0d04f 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0d04f', GradientType=0 ); }
    .catalogo .producto img {
      transform: scale(0.9);
      -webkit-transform: scale(0.9); }
    .catalogo .producto p {
      color: #434343;
      text-align: center;
      padding: 0.5em;
      padding-top: 1em;
      border-radius: 10px; }
      .catalogo .producto p b {
        font-family: "Gochi Hand", cursive;
        font-weight: normal; }

.description {
  padding-bottom: 3em;
  padding-top: 3em; }
  .description .descimg {
    width: 30%;
    min-width: 340px; }
    .description .descimg:hover img {
      transform: scale(1);
      -webkit-transform: scale(1); }
    .description .descimg img {
      transform: scale(0.95);
      -webkit-transform: scale(0.95); }
  .description .desctext {
    width: 60%; }
    .description .desctext .descintro {
      padding-left: 1em;
      border-left: 10px solid #eeb500;
      padding-bottom: 0.5em;
      margin-bottom: 1em; }
      .description .desctext .descintro .desctitle h3 {
        width: auto;
        color: #000000;
        font-size: 3em; }
        .description .desctext .descintro .desctitle h3 b {
          color: #eeb500; }
      .description .desctext .descintro p {
        padding-bottom: 0; }
    .description .desctext ul li {
      padding-bottom: 1em; }
      .description .desctext ul li:before {
        font-family: 'icomoon';
        content: '\f043';
        font-size: 0.7em;
        margin-right: 1em;
        color: #84691e; }
      .description .desctext ul li:hover:before {
        color: #eeb500; }
    .description .desctext a {
      width: auto;
      padding: 0.5em 1em;
      border-radius: 10px;
      border: 2px solid #84691e;
      color: #84691e;
      font-weight: bold; }
      .description .desctext a:hover {
        background: #eeb500;
        color: #434343; }
    .description .desctext .descsizes {
      padding-top: 2em; }
      .description .desctext .descsizes a {
        width: 30%;
        border: none;
        padding: 1em 0; }
        .description .desctext .descsizes a p {
          width: auto;
          text-align: center; }
          .description .desctext .descsizes a p b {
            font-family: "Gochi Hand", cursive;
            font-size: 0.9em; }

@media only screen and (max-width: 700px) {
  .description {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center; }
    .description .desctext {
      width: 100%; }
      .description .desctext .descintro {
        padding-left: 0;
        border-left: 0;
        border-bottom: 10px solid #eeb500;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center; }
        .description .desctext .descintro h4, .description .desctext .descintro p {
          width: auto;
          text-align: center; }
        .description .desctext .descintro .desctitle {
          -webkit-box-pack: center;
          -moz-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center; }
      .description .desctext h4 {
        padding-top: 1em;
        padding-bottom: 0.5em; }
    .description .descimg {
      width: 80%;
      min-width: inherit; } }
@media only screen and (max-width: 500px) {
  .catalogo .producto {
    min-width: inherit;
    width: 48%;
    padding-left: 0;
    padding-right: 0;
    font-size: 0.9em; } }
.introcat {
  width: 100%;
  max-width: none;
  overflow: hidden; }
  .introcat .bnrcat {
    width: 80%;
    max-width: 1000px;
    height: 400px;
    padding: 2em;
    padding-bottom: 0; }
    .introcat .bnrcat .bnrimg {
      width: 45%;
      pointer-events: none; }
      .introcat .bnrcat .bnrimg picture {
        position: absolute;
        top: 0;
        left: 0; }
      .introcat .bnrcat .bnrimg .bebe1, .introcat .bnrcat .bnrimg .bebe2, .introcat .bnrcat .bnrimg .bebe3, .introcat .bnrcat .bnrimg .familia1, .introcat .bnrcat .bnrimg .familia2 {
        min-width: 400px; }
    .introcat .bnrcat .bnrtext {
      width: 55%;
      height: 100%; }
      .introcat .bnrcat .bnrtext h2 {
        width: auto;
        color: #000000;
        padding-bottom: 0; }
  .introcat .backer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: url("../images/banner/backs-l.png");
    background-position: top;
    background-size: 100%;
    background-attachment: fixed; }

.parabebes {
  background: #bd93e2;
  background: -moz-linear-gradient(top, #bd93e2 0%, #dbc5e2 46%, #b590e2 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #bd93e2), color-stop(46%, #dbc5e2), color-stop(100%, #b590e2));
  background: -webkit-linear-gradient(top, #bd93e2 0%, #dbc5e2 46%, #b590e2 100%);
  background: -o-linear-gradient(top, #bd93e2 0%, #dbc5e2 46%, #b590e2 100%);
  background: -ms-linear-gradient(top, #bd93e2 0%, #dbc5e2 46%, #b590e2 100%);
  background: linear-gradient(to bottom, #bd93e2 0%, #dbc5e2 46%, #b590e2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bd93e2', endColorstr='#b590e2', GradientType=0 ); }
  .parabebes:hover .bnrcat .bnrimg .bebe1 {
    top: -2em;
    left: -2em;
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg); }
  .parabebes:hover .bnrcat .bnrimg .bebe2 {
    top: -2em;
    left: 2em;
    transform: rotate(10deg);
    -webkit-transform: rotate(10deg); }
  .parabebes:hover .bnrcat .bnrimg .bebe3 {
    top: -1em; }

.parafamilia {
  background: #f09a30;
  background: -moz-linear-gradient(top, #f09a30 0%, #ffc336 47%, #c75f10 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #f09a30), color-stop(47%, #ffc336), color-stop(100%, #c75f10));
  background: -webkit-linear-gradient(top, #f09a30 0%, #ffc336 47%, #c75f10 100%);
  background: -o-linear-gradient(top, #f09a30 0%, #ffc336 47%, #c75f10 100%);
  background: -ms-linear-gradient(top, #f09a30 0%, #ffc336 47%, #c75f10 100%);
  background: linear-gradient(to bottom, #f09a30 0%, #ffc336 47%, #c75f10 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09a30', endColorstr='#c75f10', GradientType=0 ); }
  .parafamilia:hover .bnrcat .bnrimg .familia1 {
    top: -2em;
    left: -2em;
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg); }
  .parafamilia:hover .bnrcat .bnrimg .familia2 {
    top: -2em;
    left: 2em;
    transform: rotate(10deg);
    -webkit-transform: rotate(10deg); }

@media only screen and (max-width: 900px) {
  .introcat .bnrcat {
    width: 90%;
    padding-bottom: 2em; }
    .introcat .bnrcat .bnrtext {
      -webkit-box-align: end;
      -moz-box-align: end;
      -ms-flex-align: end;
      -webkit-align-items: flex-end;
      align-items: flex-end; } }
@media only screen and (max-width: 800px) {
  .introcat .backer {
    background: url("../images/banner/backs-l.png");
    background-position: top;
    background-size: 100%;
    background-attachment: fixed; }
  .introcat .bnrcat {
    width: 100%;
    height: 250px; }
    .introcat .bnrcat .bnrimg {
      width: 100%;
      max-width: 400px; }
      .introcat .bnrcat .bnrimg .bebe1, .introcat .bnrcat .bnrimg .bebe2, .introcat .bnrcat .bnrimg .bebe3, .introcat .bnrcat .bnrimg .familia1, .introcat .bnrcat .bnrimg .familia2 {
        min-width: inherit; }
    .introcat .bnrcat .bnrtext {
      width: 100%;
      height: auto;
      font-size: 0.9em;
      padding-top: 1em;
      padding-bottom: 1em;
      /* Centrar */
      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      /* Al principio */
      -webkit-box-pack: start;
      -moz-box-pack: start;
      -ms-flex-pack: start;
      -webkit-justify-content: flex-start;
      justify-content: flex-start; } }
@media only screen and (max-width: 500px) {
  .introcat .bnrcat .bnrtext {
    padding-bottom: 0;
    padding-top: 0; }
    .introcat .bnrcat .bnrtext a {
      padding: 0.5em 1em; }
  .introcat .bnrcat .bnrimg {
    max-width: 250px; }

  .parabebes .bnrcat {
    height: 300px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -moz-box-orient: vertical;
    -moz-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center; }

  .parafamilia .bnrcat {
    height: 300px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center; } }
.ingredientes {
  width: 100%;
  max-width: none;
  /* Escondiendo listas */
  /* Volver a ocultar */ }
  .ingredientes .inglist, .ingredientes .ingcar {
    height: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s ease-in-out; }
  .ingredientes [hidden] {
    display: none;
    visibility: hidden; }
  .ingredientes .ingclass input[type=checkbox]:checked + label + ul {
    /* resetear altura */
    max-height: 1000px; }
  .ingredientes label {
    cursor: pointer;
    padding-bottom: 0; }
  .ingredientes .ingclass li:nth-child(2n) label {
    background: #000000; }
    .ingredientes .ingclass li:nth-child(2n) label:hover, .ingredientes .ingclass li:nth-child(2n) label:focus {
      z-index: 50;
      text-shadow: 1px 1px 2px #ffffff; }
  .ingredientes .ingclass li label {
    background: #eeb500;
    padding: 1em;
    color: #ffffff;
    font-size: 2em;
    font-family: "Gochi Hand", cursive;
    text-align: center;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000000; }
    .ingredientes .ingclass li label:hover, .ingredientes .ingclass li label:focus {
      z-index: 50;
      text-shadow: none; }
  .ingredientes .ingclass .inglist li label {
    background: #ffffff;
    color: #000000;
    font-family: "Roboto", sans-serif;
    font-size: 1em;
    text-shadow: none; }
    .ingredientes .ingclass .inglist li label:hover, .ingredientes .ingclass .inglist li label:focus {
      color: #eeb500;
      box-shadow: none;
      font-size: 1em; }
  .ingredientes .ingclass .inglist li:nth-child(1) {
    padding: 2em 1em;
    text-align: center;
    background: rgba(238, 181, 0, 0.6); }
    .ingredientes .ingclass .inglist li:nth-child(1) p {
      max-width: 1000px;
      text-align: center; }
      .ingredientes .ingclass .inglist li:nth-child(1) p:nth-child(2) {
        font-weight: bold; }
  .ingredientes .ingclass .inglist .ingcar li {
    text-align: center;
    max-width: 1000px;
    background: none; }

.amazon {
  padding-top: 2em;
  padding-bottom: 2em; }
  .amazon #activar {
    display: none; }
  .amazon .label {
    width: auto;
    margin: 0 auto;
    padding: 0.5em 1em;
    box-sizing: border-box;
    color: #000000;
    background: #ffffff;
    box-shadow: 0 2px 2px #000000;
    border-radius: 0 0 20px 20px;
    cursor: pointer; }
    .amazon .label:hover {
      background: #eeb500; }
  .amazon #activar ~ .label:before {
    content: "Ver más"; }
  .amazon #activar:checked ~ .dareviews {
    height: 100%; }
  .amazon #activar:checked ~ .label:before {
    content: "Ver menos"; }
  .amazon .dareviews {
    height: 300px;
    overflow: hidden; }
  .amazon .amazonhover {
    pointer-events: none;
    position: absolute;
    bottom: 2em;
    left: 0;
    height: 4em;
    background: rgba(255, 255, 255, 0);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, white));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 ); }
  .amazon .intramazon h3, .amazon .intramazon p, .amazon .intramazon h4 {
    width: auto; }
  .amazon .intramazon h3 {
    color: #000000; }
    .amazon .intramazon h3 b {
      color: #eeb500; }
  .amazon .intramazon h4 {
    color: #eeb500;
    text-align: center; }
  .amazon .intramazon p {
    text-align: center; }
  .amazon .amazonrecomnd {
    background: rgba(0, 0, 0, 0.1);
    padding: 1em;
    border-radius: 10px;
    font-weight: bold; }
    .amazon .amazonrecomnd p {
      padding-bottom: 0; }
    .amazon .amazonrecomnd .recomndask {
      width: 50%; }
      .amazon .amazonrecomnd .recomndask p {
        text-align: right;
        padding-right: 1em; }
    .amazon .amazonrecomnd .recomndbtn {
      width: 50%; }
      .amazon .amazonrecomnd .recomndbtn .btnrcmnd1 {
        max-width: 150px;
        padding: 0.5em 1em;
        background: #eeb500;
        margin-right: 1em;
        border-radius: 10px;
        text-align: center; }
  .amazon .amazonreview {
    padding: 1em; }
    .amazon .amazonreview .amretitle {
      padding-top: 1em;
      padding-bottom: 1em; }
      .amazon .amazonreview .amretitle .amreicon {
        border-radius: 50%;
        background: rgba(67, 67, 67, 0.6);
        color: #ffffff;
        padding: 0.2em;
        width: 2em;
        height: 2em;
        font-size: 2em; }
        .amazon .amazonreview .amretitle .amreicon i {
          width: auto; }
      .amazon .amazonreview .amretitle .amredet {
        padding-left: 1em; }
        .amazon .amazonreview .amretitle .amredet h4 {
          color: #84691e;
          font-weight: bold; }
        .amazon .amazonreview .amretitle .amredet p {
          padding-bottom: 0; }
        .amazon .amazonreview .amretitle .amredet b {
          color: #eeb500; }
    .amazon .amazonreview h3 {
      text-align: left; }

.contactar {
  padding-top: 5em; }
  .contactar section {
    padding-bottom: 2em; }
  .contactar .contactform {
    padding: 4em;
    background: rgba(238, 181, 0, 0.3);
    border-radius: 10px;
    overflow: hidden; }
    .contactar .contactform p span {
      font-size: 0.8em; }
    .contactar .contactform .justconfirm {
      text-align: center; }
      .contactar .contactform .justconfirm h1 {
        width: 100%;
        padding-bottom: 1em;
        line-height: 1.2em;
        font-size: 3em; }
  @media only screen and (max-width: 650px) {
    .contactar .contactform {
      font-size: 0.9em;
      padding: 2em;
      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center; }
      .contactar .contactform h1, .contactar .contactform h2 {
        width: 100%; }
      .contactar .contactform #contact, .contactar .contactform p {
        width: 100%; }
      .contactar .contactform .justconfirm {
        width: 100%; } }
  @media only screen and (max-width: 500px) {
    .contactar .contactform {
      padding: 1em; } }

#contact {
  padding: 1em 0;
  font-family: "Roboto", sans-serif; }
  #contact fieldset {
    border: #000000 !important;
    margin-bottom: 1em; }
  #contact textarea {
    height: 100px;
    width: 100%;
    resize: none; }
  #contact .wannamore {
    padding-left: 2%;
    padding-bottom: 1em; }
    #contact .wannamore input {
      width: auto;
      padding-right: 0.5em; }

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.4);
  padding: 10px;
  color: #8a8a8a;
  font-family: "Roboto", sans-serif;
  border: none; }

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
  background: rgba(255, 255, 255, 0.7); }

#contact button[type="submit"] {
  cursor: pointer;
  text-align: center; }

#contact button[type="submit"]:hover {
  opacity: 0.8;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: hover-color 0.3s ease-in-out; }

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px #000000; }

#contact input:focus, #contact textarea:focus {
  outline: 0; }

::-webkit-input-placeholder {
  color: #000000; }

:-moz-placeholder {
  color: #000000; }

::-moz-placeholder {
  color: #000000; }

:-ms-input-placeholder {
  color: #000000; }

.conquest {
  margin-top: 3em;
  margin-bottom: 3em;
  padding: 2em;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.4); }
  .conquest .archivaldo {
    padding-top: 1em;
    padding-bottom: 2em; }
  .conquest #contact fieldset {
    width: 48%; }
    .conquest #contact fieldset:nth-child(1), .conquest #contact fieldset:nth-child(3) {
      margin-right: 4%; }
    @media only screen and (max-width: 800px) {
      .conquest #contact fieldset {
        width: 94%;
        margin: 1em 0; } }
  .conquest #contact h2 {
    color: #434343; }
  .conquest #contact .textmen {
    width: 96%; }
    @media only screen and (max-width: 800px) {
      .conquest #contact .textmen {
        width: 94%;
        margin: 1em 3%; } }
    .conquest #contact .textmen textarea {
      height: 100px;
      max-width: 100%;
      resize: none; }
  .conquest #contact .fenviar {
    width: 96%;
    margin-left: 2%;
    padding-top: 2em; }
    @media only screen and (max-width: 800px) {
      .conquest #contact .fenviar {
        width: 94%;
        margin: 1em 3%; } }

#myBtn {
  display: none;
  visibility: hidden; }

.contactprev {
  height: 100%;
  position: fixed;
  z-index: 2500;
  overflow: auto; }
  .contactprev .modal-content {
    width: 100%;
    height: auto;
    min-height: 100%;
    padding: 2em;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.6); }
    .contactprev .modal-content .close, .contactprev .modal-content .back {
      width: auto;
      color: #ffffff;
      padding: 1em;
      font-size: 0.9em;
      text-align: center;
      border: #ffffff 2px solid; }
      .contactprev .modal-content .close:hover, .contactprev .modal-content .close:focus, .contactprev .modal-content .back:hover, .contactprev .modal-content .back:focus {
        background: rgba(255, 255, 255, 0.2); }
      @media onlys creen and (max-width: 700px) {
        .contactprev .modal-content .close, .contactprev .modal-content .back {
          padding: 0.5em; } }
    .contactprev .modal-content .close {
      position: relative;
      right: 0;
      top: 0;
      z-index: auto; }
      .contactprev .modal-content .close:hover {
        transform: none; }
    .contactprev .modal-content h1, .contactprev .modal-content p, .contactprev .modal-content ul, .contactprev .modal-content .diezocho, .contactprev .modal-content .opciones {
      max-width: 1200px; }
    .contactprev .modal-content h1 {
      width: 100%;
      font-size: 2em;
      opacity: 1;
      text-align: center;
      padding-bottom: 0.5em; }
    .contactprev .modal-content p {
      color: #ffffff;
      padding-bottom: 1em; }
    .contactprev .modal-content ul {
      padding-bottom: 1em; }
      .contactprev .modal-content ul li {
        color: #ffffff;
        padding-left: 1em;
        padding-bottom: 0.5em; }
    .contactprev .modal-content .diezocho {
      text-align: center; }
    .contactprev .modal-content .opciones .justbetween {
      width: 2em; }

/*Actividades*/
.actividades .actividad {
  border: 5px solid #eeb500;
  border-radius: 10px;
  margin-bottom: 1em;
  margin-top: 1em;
  padding: 1em; }
  .actividades .actividad .actimg {
    width: 60%; }
    .actividades .actividad .actimg img {
      transform: scale(0.8);
      -webkit-transform: scale(0.8); }
      .actividades .actividad .actimg img:hover {
        opacity: 0.8; }
  .actividades .actividad .actdesc {
    width: 35%;
    height: 100%; }
    .actividades .actividad .actdesc h4, .actividades .actividad .actdesc p {
      width: auto; }
    .actividades .actividad .actdesc h2 {
      padding-bottom: 0; }
    .actividades .actividad .actdesc h4 {
      color: #434343;
      text-align: left;
      font-size: 1.5em;
      padding-bottom: 1em; }
    .actividades .actividad .actdesc ul li {
      padding-bottom: 1em; }
      .actividades .actividad .actdesc ul li:before {
        font-family: 'icomoon';
        content: '\f043';
        font-size: 0.7em;
        margin-right: 1em;
        color: #84691e; }
      .actividades .actividad .actdesc ul li:hover:before {
        color: #eeb500; }
    .actividades .actividad .actdesc a {
      width: auto;
      font-size: 0.8em;
      padding: 1em 2em;
      border-radius: 10px;
      border: 3px solid #000000;
      background: #000000;
      color: #ffffff; }
      .actividades .actividad .actdesc a:hover {
        background: rgba(0, 0, 0, 0.6); }
    .actividades .actividad .actdesc .actip {
      background: #eeb500;
      padding: 1em;
      margin-top: 1em;
      border-radius: 10px; }

.todosjuegos {
  padding-top: 5em;
  padding-bottom: 5em; }
  .todosjuegos .losjuegos .cadajuego {
    width: 20%; }
  .todosjuegos .losjuegos .eljuego {
    width: 90%;
    height: 90%;
    border: 2px solid #eeb500;
    border-radius: 10px;
    padding: 1em;
    margin-bottom: 1em; }
    .todosjuegos .losjuegos .eljuego:hover {
      border: 2px solid #84691e;
      box-shadow: 0 0 3px 2px #eeb500; }
    .todosjuegos .losjuegos .eljuego p {
      text-align: center;
      padding-bottom: 0;
      padding-top: 1em; }

.consejo h4 {
  padding-bottom: 0.5em;
  padding-top: 1em; }
.consejo .bnrconsejo {
  padding-top: 1em;
  padding-bottom: 2em; }

@media only screen and (max-width: 850px) {
  .todosjuegos .losjuegos .cadajuego {
    width: 25%; } }
@media only screen and (max-width: 700px) {
  .actividades .actividad {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column; }
    .actividades .actividad .actimg {
      width: 60%; }
    .actividades .actividad .actdesc {
      width: 100%; }

  .todosjuegos .losjuegos .cadajuego {
    width: 33%; } }
@media only screen and (max-width: 500px) {
  .actividades .actividad .actdesc h2 {
    font-size: 2em; }

  .banner-lovers .motion {
    height: 300px; }

  .todosjuegos .losjuegos .cadajuego {
    width: 50%; } }
.meetbears {
  padding-right: 0;
  height: 100%; }
  .meetbears main {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    box-sizing: content-box;
    scroll-behavior: smooth; }
    .meetbears main .banner-lovers {
      overflow: visible; }
      .meetbears main .banner-lovers .motion {
        height: 500px;
        overflow: hidden; }

.wrap {
  display: block;
  height: 100%;
  padding-bottom: 20px; }
@-webkit-keyframes matchAnim {
  0% {
    background: #84691e; }
  100% {
    background: #ffffff; } }
@keyframes matchAnim {
  0% {
    background: #84691e; }
  100% {
    background: #ffffff; } }
  .wrap .game {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 500px;
    perspective: 500px;
    height: 650px;
    width: 95%;
    max-width: 1200px;
    margin: 0 auto; }
    @media only screen and (max-width: 800px) {
      .wrap .game {
        height: 625px; } }
    @media only screen and (max-width: 700px) {
      .wrap .game {
        height: 600px; } }
    @media only screen and (max-width: 600px) {
      .wrap .game {
        height: 575px; } }
    @media only screen and (max-width: 500px) {
      .wrap .game {
        height: 550px; } }
    .wrap .game .card {
      float: left;
      width: 16.66666%;
      height: 25%;
      padding: 5px;
      text-align: center;
      display: block;
      -webkit-perspective: 500px;
      perspective: 500px;
      position: relative;
      cursor: pointer;
      z-index: 50;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
      @media (max-width: 800px) {
        .wrap .game .card {
          width: 25%;
          height: 16.666%; } }
      .wrap .game .card .inside {
        width: 100%;
        height: 100%;
        display: block;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        transition: .4s ease-in-out; }
      .wrap .game .card .inside.picked, .wrap .game .card .inside.matched {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg); }
      .wrap .game .card .inside.matched {
        -webkit-animation: 1s matchAnim ease-in-out;
        animation: 1s matchAnim ease-in-out;
        -webkit-animation-delay: .4s;
        animation-delay: .4s; }
      .wrap .game .card .front, .wrap .game .card .back {
        border-radius: 10px;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        .wrap .game .card .front img, .wrap .game .card .back img {
          line-height: 0;
          width: auto;
          height: 100%; }
      .wrap .game .card .front {
        background: #ffffff;
        border: 5px solid #84691e;
        padding: 0.5em;
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg); }
        @media (max-width: 800px) {
          .wrap .game .card .front {
            padding-left: 0;
            padding-right: 0; } }
      .wrap .game .card .back {
        background: #eeb500;
        border: 5px solid #000000;
        padding: 1em;
        -webkit-transform: rotateX(0);
        transform: rotateX(0); }
        .wrap .game .card .back:hover {
          background: rgba(238, 181, 0, 0.6); }
        @media (max-width: 800px) {
          .wrap .game .card .back {
            padding: 0.5em;
            padding-left: 0;
            padding-right: 0; } }

.modal-overlay {
  display: none;
  background: rgba(255, 255, 255, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%; }
  .modal-overlay .modal {
    /*display: none;*/
    position: relative;
    height: 100%;
    padding: 2em 1em; }
    .modal-overlay .modal button {
      max-width: 150px; }

.bosque {
  height: 100%;
  padding: 3em 0;
  /* Animaciónes */ }
@keyframes peekaboo {
  0%, 10% {
    top: 100%; }
  5% {
    top: 30%; } }
  .bosque .campo {
    width: 500px;
    background: url("../images/games/golpeacubby/grass.jpg") no-repeat;
    background-size: cover;
    background-position: center; }
    .bosque .campo .hideout {
      position: relative;
      margin: 15px;
      width: 100px;
      height: 100px;
      border-radius: 33%;
      overflow: hidden;
      background: radial-gradient(circle at 50% 105%, #000 0, #000 50px, transparent 51px); }
      .bosque .campo .hideout .mole {
        display: block;
        width: 60px;
        height: 70px;
        background: url("../images/games/golpeacubby/cubby.png") no-repeat;
        background-size: cover;
        background-position: center;
        position: absolute;
        left: 20px;
        top: 100%;
        animation: peekaboo 10s linear infinite var(--delay); }
      .bosque .campo .hideout .branch {
        display: block;
        width: 60px;
        height: 60px;
        background: url("../images/games/golpeacubby/panal.png") no-repeat;
        background-size: cover;
        background-position: center;
        position: absolute;
        left: 20px;
        top: 100%;
        animation: peekaboo 10s linear infinite var(--delay); }
  .bosque .elcamino {
    position: relative;
    height: 600px;
    background: #eeb500;
    overflow: hidden;
    /*Animaciones*/ }
    .bosque .elcamino:hover .wall-left, .bosque .elcamino:hover .wall-right {
      -webkit-animation: wallScroll 10s ease-in forwards;
      animation: wallScroll 10s ease-in forwards; }
    .bosque .elcamino:hover .treehouse {
      -webkit-animation: treeScroll 10s ease-in forwards;
      animation: treeScroll 10s ease-in forwards; }
    .bosque .elcamino:hover #win {
      -webkit-animation: win 10s linear forwards;
      animation: win 10s linear forwards; }
    .bosque .elcamino:hover #start-spot {
      display: none; }
    .bosque .elcamino #start-spot {
      position: absolute;
      bottom: 1em;
      left: 45%;
      width: 10%; }
    .bosque .elcamino .treehouse {
      position: absolute;
      top: -100%;
      width: 100%;
      height: 100%; }
    .bosque .elcamino .wall-left img, .bosque .elcamino .wall-right img, .bosque .elcamino .treehouse img {
      width: auto;
      min-width: 100%;
      height: 100%; }
    .bosque .elcamino .wall-left, .bosque .elcamino .wall-right {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100%; }
    .bosque .elcamino .wall-left {
      left: 0;
      -webkit-clip-path: polygon(0 0, 40% 0, 35% 15%, 55% 35%, 45% 45%, 60% 60%, 30% 80%, 40% 100%, 0 100%); }
    .bosque .elcamino .wall-right {
      right: 0;
      -webkit-clip-path: polygon(60% 0, 100% 0, 100% 100%, 60% 100%, 44% 81%, 70% 60%, 57% 44%, 65% 35%, 46% 15%); }
    .bosque .elcamino #gameover, .bosque .elcamino #win {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%; }
      .bosque .elcamino #gameover h1, .bosque .elcamino #win h1 {
        text-shadow: 1px 1px 2px #000000; }
    .bosque .elcamino #gameover {
      display: none;
      background: rgba(132, 105, 30, 0.5); }
    .bosque .elcamino #win {
      opacity: 0;
      background: rgba(238, 181, 0, 0.6);
      pointer-events: none; }
    .bosque .elcamino .wall-left:hover ~ #gameover,
    .bosque .elcamino .wall-right:hover ~ #gameover,
    .bosque .elcamino #gameover:hover {
      z-index: 1; }
@keyframes wallScroll {
  0% {
    transform: none; }
  100% {
    transform: translateY(100%); } }
@keyframes treeScroll {
  0% {
    transform: none; }
  100% {
    transform: translateY(100%); } }
@keyframes win {
  0% {
    opacity: 0; }
  99% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.endscreen {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(132, 105, 30, 0.7);
  color: #ffffff;
  font-size: 2em; }
  .endscreen h2 {
    color: #ffffff; }
  .endscreen .cta {
    display: inline-block;
    padding: 0.6em 1.5em;
    color: #ffffff;
    background: #000000;
    margin: 1.6em 0 0;
    text-decoration: none;
    font-size: 0.8em;
    width: auto;
    border-radius: 10px; }

@media only screen and (max-width: 800px) {
  .bosque .elcamino {
    height: 500px; } }
@media only screen and (max-width: 600px) {
  .bosque .elcamino {
    height: 400px; } }
@media only screen and (max-width: 400px) {
  .bosque .elcamino {
    height: 300px; } }
.tic-tac-toe {
  height: 300px;
  overflow: hidden;
  position: relative;
  width: 300px;
  margin-bottom: 3em; }
  .tic-tac-toe input[type="radio"] {
    display: none; }
    .tic-tac-toe input[type="radio"]:checked + label {
      cursor: default;
      z-index: 10 !important; }
  .tic-tac-toe input[type="radio"].player-1 + label:after {
    content: ""; }
  .tic-tac-toe input[type="radio"].player-2 + label:after {
    content: ""; }
  .tic-tac-toe input[type="radio"].player-1:checked + label:after, .tic-tac-toe input[type="radio"].player-2:checked + label:after {
    opacity: 1; }
  .tic-tac-toe input[type="radio"].player-1:checked + label {
    background-color: #18f0c4; }
  .tic-tac-toe input[type="radio"].player-2:checked + label {
    background-color: #b213ba; }
  .tic-tac-toe input[type="radio"].turn-1 + label {
    z-index: 1; }
  .tic-tac-toe input[type="radio"].turn-2 + label {
    z-index: 2; }
  .tic-tac-toe input[type="radio"].turn-3 + label {
    z-index: 3; }
  .tic-tac-toe input[type="radio"].turn-4 + label {
    z-index: 4; }
  .tic-tac-toe input[type="radio"].turn-5 + label {
    z-index: 5; }
  .tic-tac-toe input[type="radio"].turn-6 + label {
    z-index: 6; }
  .tic-tac-toe input[type="radio"].turn-7 + label {
    z-index: 7; }
  .tic-tac-toe input[type="radio"].turn-8 + label {
    z-index: 8; }
  .tic-tac-toe input[type="radio"].turn-9 + label {
    z-index: 9; }
  .tic-tac-toe input[type="radio"].turn-1 + label {
    display: block; }
  .tic-tac-toe input[type="radio"].turn-1:checked ~ .turn-2 + label {
    display: block; }
  .tic-tac-toe input[type="radio"].turn-2:checked ~ .turn-3 + label {
    display: block; }
  .tic-tac-toe input[type="radio"].turn-3:checked ~ .turn-4 + label {
    display: block; }
  .tic-tac-toe input[type="radio"].turn-4:checked ~ .turn-5 + label {
    display: block; }
  .tic-tac-toe input[type="radio"].turn-5:checked ~ .turn-6 + label {
    display: block; }
  .tic-tac-toe input[type="radio"].turn-6:checked ~ .turn-7 + label {
    display: block; }
  .tic-tac-toe input[type="radio"].turn-7:checked ~ .turn-8 + label {
    display: block; }
  .tic-tac-toe input[type="radio"].turn-8:checked ~ .turn-9 + label {
    display: block; }
  .tic-tac-toe input[type="radio"].left + label {
    left: 0; }
  .tic-tac-toe input[type="radio"].top + label {
    top: 0; }
  .tic-tac-toe input[type="radio"].middle + label {
    left: 100px; }
  .tic-tac-toe input[type="radio"].right + label {
    left: 200px; }
  .tic-tac-toe input[type="radio"].center + label {
    top: 100px; }
  .tic-tac-toe input[type="radio"].bottom + label {
    top: 200px; }
  .tic-tac-toe input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
  input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
  input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ .end {
    display: block; }
  .tic-tac-toe input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
  input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~
  input[type="radio"]:checked ~ input[type="radio"]:checked ~ input[type="radio"]:checked ~ .end > h3:before {
    content: "Empate!!"; }
  .tic-tac-toe .player-1.first-column:checked ~ .player-1.first-column:checked ~ .player-1.first-column:checked ~ .end,
  .tic-tac-toe .player-1.second-column:checked ~ .player-1.second-column:checked ~ .player-1.second-column:checked ~ .end,
  .tic-tac-toe .player-1.third-column:checked ~ .player-1.third-column:checked ~ .player-1.third-column:checked ~ .end,
  .tic-tac-toe .player-1.first-row:checked ~ .player-1.first-row:checked ~ .player-1.first-row:checked ~ .end,
  .tic-tac-toe .player-1.second-row:checked ~ .player-1.second-row:checked ~ .player-1.second-row:checked ~ .end,
  .tic-tac-toe .player-1.third-row:checked ~ .player-1.third-row:checked ~ .player-1.third-row:checked ~ .end,
  .tic-tac-toe .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .end,
  .tic-tac-toe .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .end {
    display: block; }
  .tic-tac-toe .player-1.first-column:checked ~ .player-1.first-column:checked ~ .player-1.first-column:checked ~ .end h3:before,
  .tic-tac-toe .player-1.second-column:checked ~ .player-1.second-column:checked ~ .player-1.second-column:checked ~ .end h3:before,
  .tic-tac-toe .player-1.third-column:checked ~ .player-1.third-column:checked ~ .player-1.third-column:checked ~ .end h3:before,
  .tic-tac-toe .player-1.first-row:checked ~ .player-1.first-row:checked ~ .player-1.first-row:checked ~ .end h3:before,
  .tic-tac-toe .player-1.second-row:checked ~ .player-1.second-row:checked ~ .player-1.second-row:checked ~ .end h3:before,
  .tic-tac-toe .player-1.third-row:checked ~ .player-1.third-row:checked ~ .player-1.third-row:checked ~ .end h3:before,
  .tic-tac-toe .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .player-1.first-diagonal:checked ~ .end h3:before,
  .tic-tac-toe .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .player-1.second-diagonal:checked ~ .end h3:before {
    content: "Gana jugador 1!" !important; }
  .tic-tac-toe .player-2.first-column:checked ~ .player-2.first-column:checked ~ .player-2.first-column:checked ~ .end,
  .tic-tac-toe .player-2.second-column:checked ~ .player-2.second-column:checked ~ .player-2.second-column:checked ~ .end,
  .tic-tac-toe .player-2.third-column:checked ~ .player-2.third-column:checked ~ .player-2.third-column:checked ~ .end,
  .tic-tac-toe .player-2.first-row:checked ~ .player-2.first-row:checked ~ .player-2.first-row:checked ~ .end,
  .tic-tac-toe .player-2.second-row:checked ~ .player-2.second-row:checked ~ .player-2.second-row:checked ~ .end,
  .tic-tac-toe .player-2.third-row:checked ~ .player-2.third-row:checked ~ .player-2.third-row:checked ~ .end,
  .tic-tac-toe .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .end,
  .tic-tac-toe .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .end {
    display: block; }
  .tic-tac-toe .player-2.first-column:checked ~ .player-2.first-column:checked ~ .player-2.first-column:checked ~ .end h3:before,
  .tic-tac-toe .player-2.second-column:checked ~ .player-2.second-column:checked ~ .player-2.second-column:checked ~ .end h3:before,
  .tic-tac-toe .player-2.third-column:checked ~ .player-2.third-column:checked ~ .player-2.third-column:checked ~ .end h3:before,
  .tic-tac-toe .player-2.first-row:checked ~ .player-2.first-row:checked ~ .player-2.first-row:checked ~ .end h3:before,
  .tic-tac-toe .player-2.second-row:checked ~ .player-2.second-row:checked ~ .player-2.second-row:checked ~ .end h3:before,
  .tic-tac-toe .player-2.third-row:checked ~ .player-2.third-row:checked ~ .player-2.third-row:checked ~ .end h3:before,
  .tic-tac-toe .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .player-2.first-diagonal:checked ~ .end h3:before,
  .tic-tac-toe .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .player-2.second-diagonal:checked ~ .end h3:before {
    content: "Gana jugador 2!" !important; }
  .tic-tac-toe label {
    background-color: #eeb500;
    border-radius: 1em;
    cursor: pointer;
    color: #ffffff;
    display: none;
    height: 90px;
    margin: 5px;
    position: absolute;
    width: 90px;
    -moz-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s; }
    .tic-tac-toe label:hover {
      background-color: #84691e; }
      .tic-tac-toe label:hover:after {
        opacity: .4; }
    .tic-tac-toe label:after {
      left: 0;
      font-family: 'icomoon';
      font-size: 3em;
      margin-top: -22.5px;
      opacity: 0;
      position: absolute;
      text-align: center;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
      top: 50%;
      width: 100%; }
  .tic-tac-toe .end {
    background: rgba(255, 255, 255, 0.8);
    bottom: 5px;
    color: #3d4250;
    display: none;
    left: 5px;
    padding-top: 55px;
    position: absolute;
    right: 5px;
    top: 5px;
    text-align: center;
    z-index: 11; }
    .tic-tac-toe .end h3 {
      font-size: 3em;
      padding-bottom: 1em;
      color: #000000; }
    .tic-tac-toe .end a {
      background: #000000;
      border-radius: 10px;
      border: 3px solid #000000;
      color: #ffffff;
      padding: 1em 2em; }
      .tic-tac-toe .end a:hover {
        background-color: rgba(0, 0, 0, 0.6);
        cursor: pointer; }
  @media (min-width: 450px) {
    .tic-tac-toe {
      height: 450px;
      width: 450px; }
      .tic-tac-toe input[type="radio"].middle + label {
        left: 150px; }
      .tic-tac-toe input[type="radio"].right + label {
        left: 300px; }
      .tic-tac-toe input[type="radio"].center + label {
        top: 150px; }
      .tic-tac-toe input[type="radio"].bottom + label {
        top: 300px; }
      .tic-tac-toe label {
        height: 140px;
        width: 140px; }
        .tic-tac-toe label:after {
          font-size: 70px;
          margin-top: -35px; }
      .tic-tac-toe .end {
        padding-top: 110px; }
        .tic-tac-toe .end h3 {
          font-size: 40px; } }

.bosque {
  height: 100%;
  padding: 3em 0; }
  .bosque .puzzle {
    width: 400px;
    height: 450px; }
    .bosque .puzzle .piece1, .bosque .puzzle .piece2, .bosque .puzzle .piece3, .bosque .puzzle .piece4, .bosque .puzzle .piece5, .bosque .puzzle .piece6, .bosque .puzzle .piece7, .bosque .puzzle .piece8, .bosque .puzzle .piece9 {
      display: table-cell;
      width: 133px;
      height: 133px;
      border: 1px solid white;
      cursor: pointer;
      background: #000000; }
      .bosque .puzzle .piece1 .dabg, .bosque .puzzle .piece2 .dabg, .bosque .puzzle .piece3 .dabg, .bosque .puzzle .piece4 .dabg, .bosque .puzzle .piece5 .dabg, .bosque .puzzle .piece6 .dabg, .bosque .puzzle .piece7 .dabg, .bosque .puzzle .piece8 .dabg, .bosque .puzzle .piece9 .dabg {
        height: 100%;
        position: absolute;
        top: 0;
        left: 0; }
        .bosque .puzzle .piece1 .dabg:hover, .bosque .puzzle .piece2 .dabg:hover, .bosque .puzzle .piece3 .dabg:hover, .bosque .puzzle .piece4 .dabg:hover, .bosque .puzzle .piece5 .dabg:hover, .bosque .puzzle .piece6 .dabg:hover, .bosque .puzzle .piece7 .dabg:hover, .bosque .puzzle .piece8 .dabg:hover, .bosque .puzzle .piece9 .dabg:hover {
          opacity: 0.8; }
    .bosque .puzzle .piece1 .dabg {
      background: url("../images/games/puzzle/toronja.jpg") no-repeat;
      background-size: 300%;
      background-position: left top; }
    .bosque .puzzle .piece2 .dabg {
      background: url("../images/games/puzzle/toronja.jpg") no-repeat;
      background-size: 300%;
      background-position: center top; }
    .bosque .puzzle .piece3 .dabg {
      background: url("../images/games/puzzle/toronja.jpg") no-repeat;
      background-size: 300%;
      background-position: right top; }
    .bosque .puzzle .piece4 .dabg {
      background: url("../images/games/puzzle/toronja.jpg") no-repeat;
      background-size: 300%;
      background-position: left center; }
    .bosque .puzzle .piece5 .dabg {
      background: url("../images/games/puzzle/toronja.jpg") no-repeat;
      background-size: 300%;
      background-position: center center; }
    .bosque .puzzle .piece6 .dabg {
      background: url("../images/games/puzzle/toronja.jpg") no-repeat;
      background-size: 300%;
      background-position: right center; }
    .bosque .puzzle .piece7 .dabg {
      background: url("../images/games/puzzle/toronja.jpg") no-repeat;
      background-size: 300%;
      background-position: left bottom; }
    .bosque .puzzle .piece8 .dabg {
      background: url("../images/games/puzzle/toronja.jpg") no-repeat;
      background-size: 300%;
      background-position: center bottom; }
    .bosque .puzzle .piece9 .dabg {
      background: url("../images/games/puzzle/toronja.jpg") no-repeat;
      background-size: 300%;
      background: #ffffff;
      cursor: default; }
    .bosque .puzzle .nicebtn {
      margin-top: 1em; }

@media only screen and (max-width: 600px) {
  .bosque .puzzle {
    width: 360px;
    height: 410px; }
    .bosque .puzzle .piece1, .bosque .puzzle .piece2, .bosque .puzzle .piece3, .bosque .puzzle .piece4, .bosque .puzzle .piece5, .bosque .puzzle .piece6, .bosque .puzzle .piece7, .bosque .puzzle .piece8, .bosque .puzzle .piece9 {
      width: 120px;
      height: 120px; } }
@media only screen and (max-width: 400px) {
  .bosque .puzzle {
    width: 270px;
    height: 320px; }
    .bosque .puzzle .piece1, .bosque .puzzle .piece2, .bosque .puzzle .piece3, .bosque .puzzle .piece4, .bosque .puzzle .piece5, .bosque .puzzle .piece6, .bosque .puzzle .piece7, .bosque .puzzle .piece8, .bosque .puzzle .piece9 {
      width: 90px;
      height: 90px; } }
.beekiller {
  overflow: hidden;
  cursor: crosshair;
  counter-reset: hit; }
  .beekiller input {
    width: 300px;
    height: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; }
    .beekiller input:focus {
      outline: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none; }
    .beekiller input:checked {
      counter-increment: hit; }
      .beekiller input:checked:after {
        content: "+1";
        position: relative;
        top: 80px;
        left: 150px;
        padding: 10px;
        width: 75px;
        height: 75px;
        z-index: 5;
        color: gold;
        font-size: 30px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        -webkit-animation: hit 2s forwards;
        animation: hit 2s forwards; }
  .beekiller a {
    color: red;
    text-decoration: none; }
  .beekiller .bk-head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 12em;
    text-align: center;
    background: #f09a30;
    background: -moz-linear-gradient(top, #f09a30 0%, #ffc336 47%, #c75f10 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #f09a30), color-stop(47%, #ffc336), color-stop(100%, #c75f10));
    background: -webkit-linear-gradient(top, #f09a30 0%, #ffc336 47%, #c75f10 100%);
    background: -o-linear-gradient(top, #f09a30 0%, #ffc336 47%, #c75f10 100%);
    background: -ms-linear-gradient(top, #f09a30 0%, #ffc336 47%, #c75f10 100%);
    background: linear-gradient(to bottom, #f09a30 0%, #ffc336 47%, #c75f10 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09a30', endColorstr='#c75f10', GradientType=0 ); }
    @media only screen and (max-width: 900px) {
      .beekiller .bk-head {
        padding-top: 8em; } }
    @media only screen and (max-width: 600px) {
      .beekiller .bk-head {
        font-size: 0.8em; } }
    .beekiller .bk-head .bk-headscore {
      padding: 20px;
      font-size: 30px;
      font-weight: bolder; }
      .beekiller .bk-head .bk-headscore:after {
        content: counter(hit); }
  .beekiller .bk-game {
    width: 100%;
    margin-top: 20em;
    overflow: hidden; }
    @media only screen and (max-width: 600px) {
      .beekiller .bk-game {
        margin-top: 16em; } }
    .beekiller .bk-game .bk-game-scene {
      padding-top: 2em;
      padding-bottom: 2em;
      border-bottom: 5px solid #ffba00;
      overflow: hidden;
      perspective: 1000px; }
      .beekiller .bk-game .bk-game-scene .bk-game-row {
        margin-left: -500%;
        width: 500%;
        transform-style: preserve-3d; }
        .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee {
          width: 150px;
          height: 135px; }
          @media only screen and (max-width: 550px) {
            .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee {
              width: 100px;
              height: 90px; } }
          .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(1) .bk-bee-img, .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(10) .bk-bee-img {
            background: url("../images/games/beekiller/bee01.png");
            background-size: contain; }
          .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(2) .bk-bee-img, .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(11) .bk-bee-img {
            background: url("../images/games/beekiller/bee02.png");
            background-size: contain; }
          .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(3) .bk-bee-img, .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(12) .bk-bee-img {
            background: url("../images/games/beekiller/bee03.png");
            background-size: contain; }
          .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(4) .bk-bee-img, .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(13) .bk-bee-img {
            background: url("../images/games/beekiller/bee04.png");
            background-size: contain; }
          .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(5) .bk-bee-img, .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(14) .bk-bee-img {
            background: url("../images/games/beekiller/bee05.png");
            background-size: contain; }
          .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(6) .bk-bee-img, .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(15) .bk-bee-img {
            background: url("../images/games/beekiller/bee06.png");
            background-size: contain; }
          .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(7) .bk-bee-img, .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(16) .bk-bee-img {
            background: url("../images/games/beekiller/bee07.png");
            background-size: contain; }
          .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(8) .bk-bee-img, .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(17) .bk-bee-img {
            background: url("../images/games/beekiller/bee08.png");
            background-size: contain; }
          .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(9) .bk-bee-img, .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee:nth-child(18) .bk-bee-img {
            background: url("../images/games/beekiller/bee09.png");
            background-size: contain; }
          .beekiller .bk-game .bk-game-scene .bk-game-row .bk-game-bee .bk-bee-img {
            width: 100%;
            height: 100%;
            transition: all 0.2s; }
      .beekiller .bk-game .bk-game-scene .bk-01 {
        -webkit-animation: move-right 22s linear forwards 1;
        animation: move-right 22s linear forwards 1; }
      .beekiller .bk-game .bk-game-scene .bk-02 {
        -webkit-animation: move-left 14s linear forwards 0.5s 1;
        animation: move-left 14s linear forwards 0.5s 1; }
      .beekiller .bk-game .bk-game-scene .bk-03 {
        -webkit-animation: move-right 18s linear forwards 1s 1;
        animation: move-right 18s linear forwards 1s 1; }
  .beekiller .bk-gameover {
    position: absolute;
    top: -100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 200;
    cursor: pointer;
    -webkit-animation: over 3s forwards 13s;
    animation: over 3s forwards 13s; }
    .beekiller .bk-gameover .bk-massage {
      width: 80%;
      max-width: 600px; }
      .beekiller .bk-gameover .bk-massage h1, .beekiller .bk-gameover .bk-massage p {
        width: auto; }
      .beekiller .bk-gameover .bk-massage h1 {
        color: #eeb500;
        font-size: 3em;
        padding-bottom: 0.5em; }
      .beekiller .bk-gameover .bk-massage .bk-mstxt {
        background: #ffffff;
        padding: 0.5em;
        border-radius: 20px; }
        .beekiller .bk-gameover .bk-massage .bk-mstxt:after {
          content: '';
          position: absolute;
          top: -50px;
          right: 0;
          width: 90px;
          height: 90px;
          z-index: 10;
          background: url("../images/games/beekiller/cubbyface.svg") no-repeat;
          background-size: cover;
          background-position: center; }
        .beekiller .bk-gameover .bk-massage .bk-mstxt .bk-txt {
          border: 0.2em solid #eeb500;
          border-radius: 20px;
          padding: 2em; }
          .beekiller .bk-gameover .bk-massage .bk-mstxt .bk-txt h1:after {
            content: counter(hit); }

@keyframes move-right {
  0% {
    margin-left: -500%; }
  100% {
    margin-left: 300%; } }
@keyframes move-left {
  0% {
    margin-left: 100%; }
  100% {
    margin-left: -500%; } }
@keyframes hit {
  0% {
    top: 80px; }
  100% {
    top: 10px;
    display: none; } }
@keyframes over {
  0% {
    top: -2000px; }
  100% {
    top: 0; } }
.terminos {
  width: 90%;
  max-width: 900px;
  padding-top: 3em; }
  .terminos h1 {
    color: #eeb500; }
  .terminos h2 {
    font-size: 2em;
    padding-bottom: 1em; }
    .terminos h2 b {
      color: #000000; }
  .terminos h3 {
    color: #eeb500;
    text-align: left;
    padding-top: 1em;
    padding-bottom: 0.5em; }
  .terminos p a {
    font-weight: bold;
    color: #84691e; }
  .terminos ul li {
    padding-bottom: 1em; }
    .terminos ul li:before {
      font-family: 'icomoon';
      font-size: 1.5em;
      width: auto;
      margin-right: 0.5em;
      content: '\f061';
      color: #434343;
      opacity: 0.8; }
  .terminos .advice {
    background: rgba(238, 181, 0, 0.6);
    border-radius: 10px;
    padding: 2em;
    text-align: center; }
  .terminos .t-table {
    width: 90%;
    max-width: 500px; }
    .terminos .t-table .t-line:nth-child(1) {
      background: #000000;
      color: #ffffff;
      font-weight: bold; }
    .terminos .t-table .t-line .t-column {
      padding: 1em;
      border: 1px solid #000000;
      border-top: none;
      text-align: center; }
      .terminos .t-table .t-line .t-column:nth-child(1) {
        width: 35%;
        border-right: none; }
      .terminos .t-table .t-line .t-column:nth-child(2) {
        width: 65%; }

.nohay {
  height: 100%; }
  .nohay header section a {
    width: auto;
    color: #ffffff;
    font-weight: bold;
    padding-top: 1em; }
  .nohay article {
    padding-top: 10em; }
    .nohay article section {
      min-height: 100%;
      max-width: 900px;
      color: #434343; }
      .nohay article section h1, .nohay article section h2 {
        color: #84691e; }
      .nohay article section h1 {
        text-align: center;
        font-size: 3em; }
      .nohay article section h2 {
        font-size: 2em;
        text-align: left;
        padding-bottom: 0;
        padding-top: 1em; }
  .nohay .nubes {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    background-image: url("../images/nubes.png");
    background-position: 0px 0px;
    background-repeat: repeat-x;
    background-size: auto 100%;
    animation: animatedBackground 120s linear infinite;
    -ms-animation: animatedBackground 120s linear infinite;
    -moz-animation: animatedBackground 120s linear infinite;
    -webkit-animation: animatedBackground 120s linear infinite; }
@keyframes animatedBackground {
  from {
    background-position: 0 0; }
  to {
    background-position: 100% 0; } }
@-webkit-keyframes animatedBackground {
  from {
    background-position: 0 0; }
  to {
    background-position: 100% 0; } }
@-ms-keyframes animatedBackground {
  from {
    background-position: 0 0; }
  to {
    background-position: 100% 0; } }
@-moz-keyframes animatedBackground {
  from {
    background-position: 0 0; }
  to {
    background-position: 100% 0; } }