/* EJEMPLO RETINA: @include retina('../img/menu/barra_menu_logo.png', 2, 808px 187px, top right no-repeat); */
/* RM */
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body {
  margin: 0;
  font-size: 16px; }

h1, h2, h3, h4, ol, p, ul {
  margin: 0;
  padding: 0; }

li {
  display: block;
  vertical-align: top; }

h1, h2, h3, h4 {
  font-size: inherit;
  font-weight: normal; }

a {
  text-decoration: none;
  color: inherit;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  transition: .3s; }

img {
  max-width: 100%;
  height: auto;
  border: 0; }

/* FIN RM */
/* ADD */
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
  -webkit-appearance: none;
  border-radius: 0; }

/* VARIABLES */
/* MIXINS */
/* ESTILOS GENERALES */
.oculto {
  display: none; }

.hidden {
  visibility: hidden; }

.visible {
  visibility: visible; }

.max-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%; }

.bold {
  font-weight: 700; }

.upper {
  text-transform: uppercase; }

.clearfix {
  overflow: auto; }

.block {
  display: block; }

.inline {
  display: inline-block; }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* CSS GENERAL */
body {
  font-family: "Catamaran", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #182218; }

/* MODAL */
.modal a.close-modal {
  position: absolute;
  top: 0px;
  right: -50px;
  margin-top: -0px;
  display: block;
  width: 31px;
  height: 31px;
  text-indent: -9999px;
  background: url(../img/8_pantalla_overlay/cerrar_ventana@2x.png) no-repeat 0 0;
  background-size: 31px 31px; }
  @media screen and (max-width: 500px) {
    .modal a.close-modal {
      right: -16px;
      top: -16px; } }

/* OWL SLIDER */
.owl-theme .owl-nav {
  margin-top: -200px;
  text-align: center;
  -webkit-tap-highlight-color: transparent; }
  @media screen and (max-width: 980px) {
    .owl-theme .owl-nav {
      margin-top: -150px; } }
  @media screen and (max-width: 680px) {
    .owl-theme .owl-nav {
      margin-top: -50px; } }

.owl-theme .owl-dots {
  text-align: center;
  margin-top: -200px;
  -webkit-tap-highlight-color: transparent; }

.owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: -225px;
  margin-bottom: 225px;
  position: relative;
  z-index: 10000; }
  @media screen and (max-width: 980px) {
    .owl-theme .owl-nav.disabled + .owl-dots {
      margin: -150px auto 150px auto; } }
  @media screen and (max-width: 680px) {
    .owl-theme .owl-nav.disabled + .owl-dots {
      margin: -50px auto 50px auto; } }

.owl-theme .owl-dots .owl-dot {
  display: inline-block;
  zoom: 1;
  *display: inline; }

.owl-theme .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 5px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  display: block;
  -webkit-backface-visibility: visible;
  transition: all 0.5s;
  background: white;
  box-sizing: border-box;
  /*border-radius: 30px;*/ }
  @media screen and (max-width: 710px) {
    .owl-theme .owl-dots .owl-dot span {
      /*width:25px;*/ } }

.owl-theme .owl-dots .owl-dot.active span {
  transition: all 0.5s;
  background: none;
  box-sizing: border-box;
  border: 3px solid #b43d34; }

.owl-theme .owl-dots .owl-dot:hover span {
  background: #b43d34;
  transition: all 0.5s; }

/* HEADER */
header {
  position: relative;
  z-index: 10000; }
  header div.boton-wrap {
    position: fixed;
    top: 25px;
    left: 25px;
    z-index: 1000;
    transition: all 0.5s; }
    header div.boton-wrap:hover {
      transition: all 0.5s;
      opacity: 0.5; }
  header nav ul {
    display: block;
    border-right: 3px solid #b43d34; }
    header nav ul li {
      display: block; }
      header nav ul li.c-menu-cerrar {
        padding: 20px 24px; }
      header nav ul li a {
        width: 100%;
        display: block;
        height: 100%;
        padding: 20px 24px; }
      header nav ul li button.cerrar-menu {
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        background: none;
        vertical-align: middle; }
        header nav ul li button.cerrar-menu img {
          margin-right: 25px;
          vertical-align: middle; }
  header h1 {
    text-align: center; }
    header h1 img {
      margin-top: 20px; }

/* SECCION HOME */
section#home {
  width: 100%;
  height: 709px;
  /*@include retina('../img/12_footer/fondo_foto.jpg', 2, 1920px 703px, top center no-repeat);*/ }
  @media screen and (max-width: 767px) {
    section#home {
      /*
       * Set a counter and get the length of the image path.
       */
      /*
       * Loop ver the image path and figure out the
       * position of the dot where the extension begins.
       */
      /*
       * If we were able to figure out where the extension is,
       * slice the path into a base and an extension. Use that to
       * calculate urls for different density environments. Set
       * values for different environments.
       */
      /*
       * Set a base background for 1x environments.
       */
      background: url("../img/12_footer/fondo_foto.jpg") top center no-repeat;
      background-size: 1920px 703px;
      /*
       * Create an @2x-ish media query.
       */
      /*
       * Create media queries for all environments that the user has
       * provided images for.
       */
      /*
       * If anything went wrong trying to separate the file from its
       * extension, set a background value without doing anything to it.
       */ } }
  @media screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 767px) and (min-resolution: 192dpi) {
    section#home {
      background: url("../img/12_footer/fondo_foto@2x.jpg") top center no-repeat;
      background-size: 1920px 703px; } }

  section#home div.ver-video {
    float: right;
    position: relative;
    z-index: 2;
    margin-right: 25px;
    margin-top: 375px; }
    section#home div.ver-video div.play {
      width: 65px;
      height: 65px;
      transition: all 0.5s;
      /*
       * Set a counter and get the length of the image path.
       */
      /*
       * Loop ver the image path and figure out the
       * position of the dot where the extension begins.
       */
      /*
       * If we were able to figure out where the extension is,
       * slice the path into a base and an extension. Use that to
       * calculate urls for different density environments. Set
       * values for different environments.
       */
      /*
       * Set a base background for 1x environments.
       */
      background: url("../img/1_home/boton_play_normal.png") top left no-repeat;
      background-size: 65px 65px;
      /*
       * Create an @2x-ish media query.
       */
      /*
       * Create media queries for all environments that the user has
       * provided images for.
       */
      /*
       * If anything went wrong trying to separate the file from its
       * extension, set a background value without doing anything to it.
       */ }
      @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
        section#home div.ver-video div.play {
          background: url("../img/1_home/boton_play_normal@2x.png") top left no-repeat;
          background-size: 65px 65px; } }
      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        section#home div.ver-video div.play {
          background: url("../img/1_home/boton_play_normal@2x.png") top left no-repeat;
          background-size: 65px 65px; } }
      section#home div.ver-video div.play:hover {
        transition: all 0.5s;
        /*
         * Set a counter and get the length of the image path.
         */
        /*
         * Loop ver the image path and figure out the
         * position of the dot where the extension begins.
         */
        /*
         * If we were able to figure out where the extension is,
         * slice the path into a base and an extension. Use that to
         * calculate urls for different density environments. Set
         * values for different environments.
         */
        /*
         * Set a base background for 1x environments.
         */
        background: url("../img/1_home/boton_play_hover.png") top left no-repeat;
        background-size: 65px 65px;
        /*
         * Create an @2x-ish media query.
         */
        /*
         * Create media queries for all environments that the user has
         * provided images for.
         */
        /*
         * If anything went wrong trying to separate the file from its
         * extension, set a background value without doing anything to it.
         */ }
        @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
          section#home div.ver-video div.play:hover {
            background: url("../img/1_home/boton_play_hover@2x.png") top left no-repeat;
            background-size: 65px 65px; } }
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
          section#home div.ver-video div.play:hover {
            background: url("../img/1_home/boton_play_hover@2x.png") top left no-repeat;
            background-size: 65px 65px; } }
      section#home div.ver-video div.play:active {
        /*
         * Set a counter and get the length of the image path.
         */
        /*
         * Loop ver the image path and figure out the
         * position of the dot where the extension begins.
         */
        /*
         * If we were able to figure out where the extension is,
         * slice the path into a base and an extension. Use that to
         * calculate urls for different density environments. Set
         * values for different environments.
         */
        /*
         * Set a base background for 1x environments.
         */
        background: url("../img/1_home/boton_play_click.png") top left no-repeat;
        background-size: 65px 65px;
        /*
         * Create an @2x-ish media query.
         */
        /*
         * Create media queries for all environments that the user has
         * provided images for.
         */
        /*
         * If anything went wrong trying to separate the file from its
         * extension, set a background value without doing anything to it.
         */ }
        @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
          section#home div.ver-video div.play:active {
            background: url("../img/1_home/boton_play_click@2x.png") top left no-repeat;
            background-size: 65px 65px; } }
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
          section#home div.ver-video div.play:active {
            background: url("../img/1_home/boton_play_click@2x.png") top left no-repeat;
            background-size: 65px 65px; } }
    section#home div.ver-video p {
      font-size: 8px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-top: -115px;
      color: white;
      -ms-transform: rotate(270deg);
      /* IE 9 */
      -webkit-transform: rotate(270deg);
      /* Chrome, Safari, Opera */
      transform: rotate(270deg); }
  section#home .scroll-downs {
    position: absolute;
    z-index: 2;
    /*top: 0;
    right: 0;
    bottom: 0;*/
    top: 435px;
    left: 30px;
    margin: auto;
    width: 34px;
    height: 55px; }
  section#home .mousey {
    width: 3px;
    padding: 2px 10px;
    height: 35px;
    border: 2px solid #fff;
    border-radius: 25px;
    opacity: 0.75;
    box-sizing: content-box; }
  section#home .scroller {
    width: 3px;
    height: 10px;
    border-radius: 25%;
    background-color: #fff;
    animation-name: scroll;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
    animation-iteration-count: infinite; }
@keyframes scroll {
  0% {
    opacity: 0; }
  10% {
    transform: translateY(0);
    opacity: 1; }
  100% {
    transform: translateY(15px);
    opacity: 0; } }
  section#home #video-background {
    /*  making the video fullscreen  */
    position: absolute;
    right: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0; }

/* SECCION BIENVENIDOS */
section#bienvenidos-up div.separador-img {
  width: 100%;
  height: 290px;
  position: relative;
  z-index: 100;
  margin-top: -240px;
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
   * Set a base background for 1x environments.
   */
  background: url("../img/1_home/fondomascara_290.png") bottom center no-repeat;
  background-size: 1920px 290px;
  /*
   * Create an @2x-ish media query.
   */
  /*
   * Create media queries for all environments that the user has
   * provided images for.
   */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section#bienvenidos-up div.separador-img {
      background: url("../img/1_home/fondomascara_290@2x.png") bottom center no-repeat;
      background-size: 1920px 290px; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section#bienvenidos-up div.separador-img {
      background: url("../img/1_home/fondomascara_290@2x.png") bottom center no-repeat;
      background-size: 1920px 290px; } }

section#bienvenidos {
  margin-top: -155px;
  background: white;
  text-align: center; }
  section#bienvenidos img.isotipo {
    display: block;
    margin: -155px auto 0 auto;
    position: relative;
    z-index: 110; }
  section#bienvenidos img.logo {
    display: block;
    margin: 75px auto; }
  section#bienvenidos p {
    margin: 0 auto 50px auto;
    max-width: 510px;
    width: 85%;
    line-height: 26px;
    font-size: 14px; }
    section#bienvenidos p.segundo {
      max-width: 485px; }
  section#bienvenidos img.hoja {
    margin: 0 auto 45px auto; }
  section#bienvenidos h1 {
    font-family: "Zilla Slab", serif;
    font-weight: 700;
    letter-spacing: 10px;
    text-transform: uppercase;
    margin-right: 0px; }
  section#bienvenidos div.linea-bienvenidos {
    display: block;
    background: #bbcfb4;
    margin: -7px auto 160px auto;
    width: 200px;
    height: 9px; }
  section#bienvenidos div.personajes div.personaje-cont {
    display: inline-block; }
    section#bienvenidos div.personajes div.personaje-cont:hover {
      transition: all 0.5s;
      cursor: pointer; }
      section#bienvenidos div.personajes div.personaje-cont:hover div.titulo {
        opacity: 1; }
    section#bienvenidos div.personajes div.personaje-cont div.titulo {
      display: flex;
      transition: all 0.5s;
      opacity: 0;
      width: 100px;
      height: 100px;
      margin-top: -84px;
      margin-left: -40px;
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      -ms-border-radius: 50px;
      border-radius: 50px;
      border: 1px dashed #182218;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      font-family: "Zilla Slab", serif;
      font-size: 9px;
      font-weight: 700;
      position: absolute; }
  section#bienvenidos div.personajes img {
    margin-right: 40px; }
    section#bienvenidos div.personajes img.last {
      margin-right: 0; }

section#yuxta {
  max-width: 980px;
  width: 90%;
  margin: 150px auto 0 auto; }
  section#yuxta div#juxta-cont {
    margin-bottom: 25px; }
  section#yuxta p {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px; }
    section#yuxta p.izq {
      float: left;
      font-weight: 600;
      color: #b43d34; }
    section#yuxta p.der {
      float: right;
      color: #182218;
      font-weight: 700; }

section#casas-tipo {
  margin-top: 200px; }

section#casas-tipo, section#campo-mitico {
  max-width: 980px;
  margin: 200px auto; }
  section#casas-tipo div.texto, section#campo-mitico div.texto {
    display: inline-block;
    max-width: 280px;
    margin-top: 25px; }
    @media screen and (max-width: 1070px) {
      section#casas-tipo div.texto, section#campo-mitico div.texto {
        margin-left: 40px; } }
    @media screen and (max-width: 855px) {
      section#casas-tipo div.texto, section#campo-mitico div.texto {
        margin: 0 auto;
        display: block;
        width: 85%; } }
    section#casas-tipo div.texto h1, section#campo-mitico div.texto h1 {
      text-transform: uppercase;
      font-family: "Zilla Slab", serif;
      color: #b43d34;
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 10px; }
    section#casas-tipo div.texto p, section#campo-mitico div.texto p {
      line-height: 20px;
      margin-bottom: 24px; }
  section#casas-tipo div.foto, section#campo-mitico div.foto {
    display: inline-block;
    float: right;
    margin-right: -50px; }
    @media screen and (max-width: 855px) {
      section#casas-tipo div.foto, section#campo-mitico div.foto {
        margin: 30px auto 0 auto;
        float: none;
        display: block;
        max-width: 90%; } }
  section#casas-tipo ul.iconos-tipo, section#campo-mitico ul.iconos-tipo {
    margin-top: 110px;
    max-width: 980px;
    width: 100%;
    clear: both; }
    @media screen and (max-width: 1000px) {
      section#casas-tipo ul.iconos-tipo, section#campo-mitico ul.iconos-tipo {
        max-width: 680px;
        margin: 110px auto 0 auto; } }
    @media screen and (max-width: 855px) {
      section#casas-tipo ul.iconos-tipo, section#campo-mitico ul.iconos-tipo {
        margin: 50px auto 0 auto; } }
    section#casas-tipo ul.iconos-tipo li, section#campo-mitico ul.iconos-tipo li {
      cursor: pointer;
      width: 300px;
      box-sizing: border-box;
      display: inline-block;
      font-size: 14px;
      font-family: "Zilla Slab", serif;
      font-weight: 700; }
      @media screen and (max-width: 680px) {
        section#casas-tipo ul.iconos-tipo li, section#campo-mitico ul.iconos-tipo li {
          cursor: default; } }
      section#casas-tipo ul.iconos-tipo li:hover div.hover-tipo, section#campo-mitico ul.iconos-tipo li:hover div.hover-tipo {
        opacity: 1;
        transition: all 0.5s; }
      section#casas-tipo ul.iconos-tipo li div.hover-tipo, section#campo-mitico ul.iconos-tipo li div.hover-tipo {
        width: 220px;
        height: 240px;
        box-sizing: border-box;
        padding: 40px 35px;
        font-family: "Catamaran", sans-serif;
        font-size: 14px;
        line-height: 18px;
        background: white;
        font-weight: 400;
        position: absolute;
        z-index: 100;
        transition: all 0.5s;
        margin-top: -165px;
        margin-left: 25px;
        opacity: 0;
        -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3); }
        @media screen and (max-width: 680px) {
          section#casas-tipo ul.iconos-tipo li div.hover-tipo, section#campo-mitico ul.iconos-tipo li div.hover-tipo {
            display: none; } }
        section#casas-tipo ul.iconos-tipo li div.hover-tipo.last, section#campo-mitico ul.iconos-tipo li div.hover-tipo.last {
          margin-left: -175px; }
      @media screen and (max-width: 1000px) {
        section#casas-tipo ul.iconos-tipo li, section#campo-mitico ul.iconos-tipo li {
          width: 200px; } }
      @media screen and (max-width: 680px) {
        section#casas-tipo ul.iconos-tipo li, section#campo-mitico ul.iconos-tipo li {
          width: 49%;
          text-align: center; } }
      section#casas-tipo ul.iconos-tipo li:last-child, section#campo-mitico ul.iconos-tipo li:last-child {
        width: 80px; }
        @media screen and (max-width: 680px) {
          section#casas-tipo ul.iconos-tipo li:last-child, section#campo-mitico ul.iconos-tipo li:last-child {
            width: 49%;
            text-align: center; } }
      section#casas-tipo ul.iconos-tipo li img, section#campo-mitico ul.iconos-tipo li img {
        display: block;
        margin-bottom: 20px; }
        @media screen and (max-width: 680px) {
          section#casas-tipo ul.iconos-tipo li img, section#campo-mitico ul.iconos-tipo li img {
            margin: 30px auto 20px auto; } }

section#campo-mitico {
  margin-top: 100px; }
  section#campo-mitico div.texto {
    display: inline-block;
    max-width: 255px;
    margin-top: 25px; }
    @media screen and (max-width: 855px) {
      section#campo-mitico div.texto {
        margin: 0 auto;
        display: block;
        width: 85%; } }

section#slider {
  margin: 150px auto 0 auto;
  max-width: 85%; }
  @media screen and (max-width: 680px) {
    section#slider {
      margin-bottom: 200px; } }
  section#slider div.submenu {
    margin-bottom: 200px;
    margin-top: 20px; }
    section#slider div.submenu ul {
      text-align: center; }
      section#slider div.submenu ul li {
        font-family: "Zilla Slab", serif;
        color: #b43d34;
        cursor: pointer;
        text-transform: uppercase;
        position: relative;
        z-index: 400;
        font-weight: 700;
        font-size: 20px;
        display: inline-block;
        padding: 10px 20px; }
  section#slider div.flechas {
    margin-top: -410px;
    position: absolute;
    width: 85%;
    z-index: 100; }
    @media screen and (max-width: 980px) {
      section#slider div.flechas {
        margin-top: -310px; } }
    @media screen and (max-width: 800px) {
      section#slider div.flechas {
        margin-top: -270px; } }
    @media screen and (max-width: 680px) {
      section#slider div.flechas {
        margin-top: -210px; } }
    @media screen and (max-width: 500px) {
      section#slider div.flechas {
        margin-top: -140px; } }
    section#slider div.flechas div.flecha {
      width: 62px;
      height: 62px;
      cursor: pointer; }
      section#slider div.flechas div.flecha.anterior {
        position: absolute;
        left: 20px;
        transition: all 0.5s;
        opacity: 0.4;
        /*
         * Set a counter and get the length of the image path.
         */
        /*
         * Loop ver the image path and figure out the
         * position of the dot where the extension begins.
         */
        /*
         * If we were able to figure out where the extension is,
         * slice the path into a base and an extension. Use that to
         * calculate urls for different density environments. Set
         * values for different environments.
         */
        /*
         * Set a base background for 1x environments.
         */
        background: url("../img/5_panorama_fotos/boton_slider_adelante.png") top left no-repeat;
        background-size: 62px 62px;
        /*
         * Create an @2x-ish media query.
         */
        /*
         * Create media queries for all environments that the user has
         * provided images for.
         */
        /*
         * If anything went wrong trying to separate the file from its
         * extension, set a background value without doing anything to it.
         */
        -ms-transform: rotate(180deg);
        /* IE 9 */
        -webkit-transform: rotate(180deg);
        /* Chrome, Safari, Opera */
        transform: rotate(180deg); }
        @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
          section#slider div.flechas div.flecha.anterior {
            background: url("../img/5_panorama_fotos/boton_slider_adelante@2x.png") top left no-repeat;
            background-size: 62px 62px; } }
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
          section#slider div.flechas div.flecha.anterior {
            background: url("../img/5_panorama_fotos/boton_slider_adelante@2x.png") top left no-repeat;
            background-size: 62px 62px; } }
        section#slider div.flechas div.flecha.anterior:hover {
          transition: all 0.5s;
          opacity: 1; }
      section#slider div.flechas div.flecha.siguiente {
        position: absolute;
        right: 20px;
        transition: all 0.5s;
        opacity: 0.4;
        /*
         * Set a counter and get the length of the image path.
         */
        /*
         * Loop ver the image path and figure out the
         * position of the dot where the extension begins.
         */
        /*
         * If we were able to figure out where the extension is,
         * slice the path into a base and an extension. Use that to
         * calculate urls for different density environments. Set
         * values for different environments.
         */
        /*
         * Set a base background for 1x environments.
         */
        background: url("../img/5_panorama_fotos/boton_slider_adelante.png") top left no-repeat;
        background-size: 62px 62px;
        /*
         * Create an @2x-ish media query.
         */
        /*
         * Create media queries for all environments that the user has
         * provided images for.
         */
        /*
         * If anything went wrong trying to separate the file from its
         * extension, set a background value without doing anything to it.
         */ }
        @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
          section#slider div.flechas div.flecha.siguiente {
            background: url("../img/5_panorama_fotos/boton_slider_adelante@2x.png") top left no-repeat;
            background-size: 62px 62px; } }
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
          section#slider div.flechas div.flecha.siguiente {
            background: url("../img/5_panorama_fotos/boton_slider_adelante@2x.png") top left no-repeat;
            background-size: 62px 62px; } }
        section#slider div.flechas div.flecha.siguiente:hover {
          transition: all 0.5s;
          opacity: 1; }
  section#slider div#slider-principal {
    margin-top: -105px; }
    @media screen and (max-width: 680px) {
      section#slider div#slider-principal {
        margin-top: 150px; } }
  section#slider div.bloque-sup {
    width: 100%;
    height: 111px;
    position: relative;
    z-index: 200;
    /*
     * Set a counter and get the length of the image path.
     */
    /*
     * Loop ver the image path and figure out the
     * position of the dot where the extension begins.
     */
    /*
     * If we were able to figure out where the extension is,
     * slice the path into a base and an extension. Use that to
     * calculate urls for different density environments. Set
     * values for different environments.
     */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/5_panorama_fotos/fondomascara_panorama_arriba.png") top center no-repeat;
    background-size: 1920px 111px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
     * If anything went wrong trying to separate the file from its
     * extension, set a background value without doing anything to it.
     */ }
    @media screen and (max-width: 680px) {
      section#slider div.bloque-sup {
        display: none; } }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      section#slider div.bloque-sup {
        background: url("../img/5_panorama_fotos/fondomascara_panorama_arriba@2x.png") top center no-repeat;
        background-size: 1920px 111px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      section#slider div.bloque-sup {
        background: url("../img/5_panorama_fotos/fondomascara_panorama_arriba@2x.png") top center no-repeat;
        background-size: 1920px 111px; } }
  section#slider div.bloque-inf {
    width: 100%;
    height: 111px;
    position: relative;
    margin-top: -105px;
    z-index: 200;
    /*
     * Set a counter and get the length of the image path.
     */
    /*
     * Loop ver the image path and figure out the
     * position of the dot where the extension begins.
     */
    /*
     * If we were able to figure out where the extension is,
     * slice the path into a base and an extension. Use that to
     * calculate urls for different density environments. Set
     * values for different environments.
     */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/5_panorama_fotos/fondomascara_panorama_abajo.png") top center no-repeat;
    background-size: 1920px 111px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
     * If anything went wrong trying to separate the file from its
     * extension, set a background value without doing anything to it.
     */ }
    @media screen and (max-width: 680px) {
      section#slider div.bloque-inf {
        display: none; } }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      section#slider div.bloque-inf {
        background: url("../img/5_panorama_fotos/fondomascara_panorama_abajo@2x.png") top center no-repeat;
        background-size: 1920px 111px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      section#slider div.bloque-inf {
        background: url("../img/5_panorama_fotos/fondomascara_panorama_abajo@2x.png") top center no-repeat;
        background-size: 1920px 111px; } }

section#masterplan {
  margin-top: 300px; }
  @media screen and (max-width: 680px) {
    section#masterplan {
      margin-top: 150px; } }
  section#masterplan div.master-plan {
    margin: 0 auto;
    max-width: 1138px;
    margin-bottom: 35px;
    width: 100%; }
    @media screen and (max-width: 1150px) {
      section#masterplan div.master-plan {
        width: 85%; } }
    @media screen and (max-width: 1150px) {
      section#masterplan div.master-plan div.masterplan-desktop {
        display: none; } }
    section#masterplan div.master-plan div.masterplan-responsive {
      display: none; }
      @media screen and (max-width: 1150px) {
        section#masterplan div.master-plan div.masterplan-responsive {
          display: block; } }
      section#masterplan div.master-plan div.masterplan-responsive ul.lista {
        font-family: "Zilla Slab", serif;
        font-size: 30px;
        margin: 60px auto 90px auto;
        font-weight: 700; }
        @media screen and (max-width: 900px) {
          section#masterplan div.master-plan div.masterplan-responsive ul.lista {
            font-size: 22px; } }
        section#masterplan div.master-plan div.masterplan-responsive ul.lista > li {
          width: 49%;
          box-sizing: border-box;
          display: inline-block; }
          @media screen and (max-width: 650px) {
            section#masterplan div.master-plan div.masterplan-responsive ul.lista > li {
              width: 100%; } }
          section#masterplan div.master-plan div.masterplan-responsive ul.lista > li:first-child {
            border-right: 1px solid #182218; }
            @media screen and (max-width: 650px) {
              section#masterplan div.master-plan div.masterplan-responsive ul.lista > li:first-child {
                border-right: none; } }
          section#masterplan div.master-plan div.masterplan-responsive ul.lista > li:last-child {
            padding-left: 70px; }
            @media screen and (max-width: 710px) {
              section#masterplan div.master-plan div.masterplan-responsive ul.lista > li:last-child {
                padding-left: 30px; } }
            @media screen and (max-width: 650px) {
              section#masterplan div.master-plan div.masterplan-responsive ul.lista > li:last-child {
                padding-left: 0; } }
          section#masterplan div.master-plan div.masterplan-responsive ul.lista > li ul.sublista li.rojo {
            color: #b43d34; }
  section#masterplan div.info-box {
    max-width: 105px;
    text-align: center;
    position: absolute;
    margin-left: 30px;
    margin-top: 150px; }
    @media screen and (max-width: 1150px) {
      section#masterplan div.info-box {
        display: none; } }
    section#masterplan div.info-box p {
      font-size: 14px;
      line-height: 14px;
      font-family: "Zilla Slab", serif;
      font-weight: 600;
      color: #b43d34;
      margin-bottom: 35px; }
  section#masterplan div.menu {
    max-width: 1010px;
    width: 90%;
    margin: 0 auto;
    border-bottom: 1px solid #182218; }
    @media screen and (max-width: 780px) {
      section#masterplan div.menu {
        border-bottom: none; } }
    section#masterplan div.menu div {
      text-transform: uppercase;
      display: inline-block;
      color: white;
      box-sizing: border-box;
      height: 49px;
      max-height: 49px;
      font-family: "Zilla Slab", serif;
      font-size: 13px;
      font-weight: 700; }
      @media screen and (max-width: 500px) {
        section#masterplan div.menu div {
          padding: 10px 15px;
          font-size: 11px; } }
      section#masterplan div.menu div img {
        margin-left: 10px; }
      section#masterplan div.menu div div.contenido {
        padding: 0; }
      section#masterplan div.menu div.mp-hd {
        padding: 15px 30px 15px 20px;
        opacity: 1;
        transition: all 0.5s;
        background-image: url("../img/7_masterplan/filito_masterplan_Verde@2x.jpg"), linear-gradient(to right, #182218, #182218);
        background-size: 10px 49px, 100% 100%;
        background-repeat: no-repeat, repeat;
        background-position: top right, top right;
        /*@include retina('../img/7_masterplan/filito_masterplan_Verde.jpg' $cafe, 2, 10px 49px, top right no-repeat);*/ }
        section#masterplan div.menu div.mp-hd:hover {
          opacity: 0.8;
          transition: all 0.5s; }
      section#masterplan div.menu div.mp-disp {
        padding: 15px 20px 15px 30px;
        float: right;
        opacity: 1;
        transition: all 0.5s;
        background-image: url("../img/7_masterplan/filito_masterplan_Naranja@2x.jpg"), linear-gradient(to right, #b43d34, #b43d34);
        background-size: 10px 49px, 100% 100%;
        background-repeat: no-repeat, repeat;
        background-position: top left, top right; }
        section#masterplan div.menu div.mp-disp:hover {
          opacity: 0.8;
          transition: all 0.5s; }
  section#masterplan div.modal-master {
    /*background: $blanco;*/
    max-width: 1080px;
    width: 85%;
    height: auto;
    vertical-align: top; }
    section#masterplan div.modal-master.modal-acceso {
      max-width: 330px; }
    @media screen and (max-width: 1150px) {
      section#masterplan div.modal-master {
        width: 80%; } }
    section#masterplan div.modal-master img.img-modal {
      display: inline-block;
      vertical-align: top; }
    section#masterplan div.modal-master div.info-modal-ac {
      max-width: 300px;
      margin: 0 auto; }
      section#masterplan div.modal-master div.info-modal-ac h2 {
        font-family: "Zilla Slab", serif;
        font-weight: 700;
        font-size: 38px;
        color: #b43d34;
        line-height: 35px;
        text-transform: uppercase;
        margin-bottom: 55px;
        text-align: center; }
      section#masterplan div.modal-master div.info-modal-ac form input::-webkit-input-placeholder {
        color: #182218; }
      section#masterplan div.modal-master div.info-modal-ac form input:-moz-placeholder {
        /* Firefox 18- */
        color: #182218; }
      section#masterplan div.modal-master div.info-modal-ac form input::-moz-placeholder {
        /* Firefox 19+ */
        color: #182218; }
      section#masterplan div.modal-master div.info-modal-ac form input:-ms-input-placeholder {
        color: #182218; }
      section#masterplan div.modal-master div.info-modal-ac form textarea::-webkit-input-placeholder {
        color: #182218 !important; }
      section#masterplan div.modal-master div.info-modal-ac form textarea:-moz-placeholder {
        /* Firefox 18- */
        color: #182218 !important; }
      section#masterplan div.modal-master div.info-modal-ac form textarea::-moz-placeholder {
        /* Firefox 19+ */
        color: #182218 !important; }
      section#masterplan div.modal-master div.info-modal-ac form textarea:-ms-input-placeholder {
        color: #182218 !important; }
      section#masterplan div.modal-master div.info-modal-ac form input[type=text] {
        border: none;
        width: 100%;
        margin-bottom: 30px;
        font-size: 14px;
        font-family: "Catamaran", sans-serif;
        font-weight: 600;
        border-bottom: 1px solid #182218;
        padding-bottom: 5px; }
      section#masterplan div.modal-master div.info-modal-ac button {
        display: block;
        padding: 20px 30px;
        margin: 20px auto;
        font-family: "Cousine", monospace;
        font-size: 11px;
        font-weight: 700;
        border: 2px solid #6f8962;
        color: #6f8962;
        text-transform: uppercase;
        background: white;
        position: relative;
        z-index: 10;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        -ms-border-radius: 30px;
        border-radius: 30px;
        transition: all 0.5s; }
        section#masterplan div.modal-master div.info-modal-ac button:hover {
          background: #6f8962;
          color: white;
          transition: all 0.5s;
          cursor: pointer; }
    section#masterplan div.modal-master div.info-modal {
      max-width: 300px;
      display: inline-block;
      vertical-align: top;
      margin-left: 70px;
      margin-top: 15px; }
      @media screen and (max-width: 1150px) {
        section#masterplan div.modal-master div.info-modal .desktop {
          display: none; } }
      @media screen and (max-width: 1150px) {
        section#masterplan div.modal-master div.info-modal {
          margin-left: 0;
          margin-top: 30px;
          max-width: 100%;
          width: 100%; } }
      section#masterplan div.modal-master div.info-modal h2 {
        font-size: 14px;
        font-weight: 800;
        margin-bottom: 20px;
        color: #b43d34; }
      section#masterplan div.modal-master div.info-modal p {
        margin-bottom: 20px;
        line-height: 18px;
        font-size: 14px; }
    section#masterplan div.modal-master#modalGarita {
      max-width: 1100px; }
      @media screen and (max-width: 1150px) {
        section#masterplan div.modal-master#modalGarita {
          width: 80%; } }
      section#masterplan div.modal-master#modalGarita div.info-modal {
        max-width: 370px;
        margin-left: 40px;
        margin-top: 0; }
        @media screen and (max-width: 1150px) {
          section#masterplan div.modal-master#modalGarita div.info-modal {
            margin-left: 0;
            margin-top: 30px;
            max-width: 100%;
            width: 100%; } }
        section#masterplan div.modal-master#modalGarita div.info-modal h2, section#masterplan div.modal-master#modalGarita div.info-modal p {
          margin-bottom: 15px;
          line-height: 15px; }
  @media screen and (max-width: 1140px) {
    section#masterplan div.hovers {
      display: none; } }
  section#masterplan div.hovers .btn-wrap {
    position: absolute; }
    section#masterplan div.hovers .btn-wrap.salon {
      margin-top: -480px;
      margin-left: 35px; }
    section#masterplan div.hovers .btn-wrap.la-estacion {
      margin-top: -475px;
      margin-left: 65px; }
    section#masterplan div.hovers .btn-wrap.hipico {
      margin-top: -475px;
      margin-left: 118px; }
    section#masterplan div.hovers .btn-wrap.restaurante {
      margin-left: 410px;
      margin-top: -350px; }
    section#masterplan div.hovers .btn-wrap.gimnasio {
      margin-left: 433px;
      margin-top: -357px; }
    section#masterplan div.hovers .btn-wrap.albercas {
      margin-left: 427px;
      margin-top: -335px; }
    section#masterplan div.hovers .btn-wrap.raqueta {
      margin-left: 410px;
      margin-top: -320px; }
    section#masterplan div.hovers .btn-wrap.hoyo19 {
      margin-top: -340px;
      margin-left: 450px; }
    section#masterplan div.hovers .btn-wrap.spa {
      margin-left: 685px;
      margin-top: -350px; }
    section#masterplan div.hovers .btn-wrap.garita {
      margin-left: 123px;
      margin-top: -173px; }
    section#masterplan div.hovers .btn-wrap:hover div.info-block {
      transition: all 0.5s;
      display: block; }
    section#masterplan div.hovers .btn-wrap div.info-block {
      transition: all 0.5s;
      display: none;
      margin-left: 10px;
      margin-top: -110px;
      width: 284px;
      padding: 5px;
      background: white;
      position: relative;
      z-index: 1000;
      -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); }
      section#masterplan div.hovers .btn-wrap div.info-block img {
        display: block; }
      section#masterplan div.hovers .btn-wrap div.info-block ul li {
        font-family: "Zilla Slab", serif;
        font-weight: 700;
        font-size: 14px;
        display: inline-block;
        color: white;
        box-sizing: border-box;
        padding: 7px; }
        section#masterplan div.hovers .btn-wrap div.info-block ul li h2 {
          font-weight: 700; }
        section#masterplan div.hovers .btn-wrap div.info-block ul li:first-child {
          background: #b43d34;
          width: 60%; }
        section#masterplan div.hovers .btn-wrap div.info-block ul li:last-child {
          text-align: center;
          background: #182218;
          width: 40%; }
  section#masterplan div.hovers .pulse {
    width: 5px;
    height: 5px;
    border: 5px solid #b43d34;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    border-radius: 30px;
    background-color: white;
    z-index: 10;
    position: absolute;
    transition: all 0.5s; }
    section#masterplan div.hovers .pulse:hover {
      border: 5px solid #182218;
      transition: all 0.5s; }
  section#masterplan div.hovers .dot {
    border: 30px solid #b43d34;
    background: transparent;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    border-radius: 60px;
    height: 25px;
    width: 25px;
    /*-webkit-animation: pulse 2s ease-out;
    -moz-animation: pulse 2s ease-out;
    animation: pulse 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    */
    position: absolute;
    top: -35px;
    left: -35px;
    z-index: 1;
    opacity: 0; }

/* MASTER PLAN HD */
section#inverted-contain a.back {
  display: block;
  position: absolute;
  z-index: 100;
  top: 15px;
  left: 15px;
  width: 39px;
  height: 39px;
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
   * Set a base background for 1x environments.
   */
  background: url("../img/13_mapahd/back.png") top left no-repeat;
  background-size: 39px 39px;
  /*
   * Create an @2x-ish media query.
   */
  /*
   * Create media queries for all environments that the user has
   * provided images for.
   */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section#inverted-contain a.back {
      background: url("../img/13_mapahd/back@2x.png") top left no-repeat;
      background-size: 39px 39px; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section#inverted-contain a.back {
      background: url("../img/13_mapahd/back@2x.png") top left no-repeat;
      background-size: 39px 39px; } }
  section#inverted-contain a.back:hover {
    width: 87px;
    height: 37px;
    /*
     * Set a counter and get the length of the image path.
     */
    /*
     * Loop ver the image path and figure out the
     * position of the dot where the extension begins.
     */
    /*
     * If we were able to figure out where the extension is,
     * slice the path into a base and an extension. Use that to
     * calculate urls for different density environments. Set
     * values for different environments.
     */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/13_mapahd/back_hover.png") top left no-repeat;
    background-size: 87px 37px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
     * If anything went wrong trying to separate the file from its
     * extension, set a background value without doing anything to it.
     */ }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      section#inverted-contain a.back:hover {
        background: url("../img/13_mapahd/back_hover@2x.png") top left no-repeat;
        background-size: 87px 37px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      section#inverted-contain a.back:hover {
        background: url("../img/13_mapahd/back_hover@2x.png") top left no-repeat;
        background-size: 87px 37px; } }
section#inverted-contain div.controles {
  height: 85px;
  border-top: #b43d34 2px solid;
  padding: 22px 60px 0 35px;
  box-sizing: border-box; }
  section#inverted-contain div.controles div.buttons {
    display: inline-block; }
    section#inverted-contain div.controles div.buttons button {
      display: inline-block;
      border: none;
      padding: none;
      width: 22px;
      height: 22px;
      transition: all 0.5s; }
      section#inverted-contain div.controles div.buttons button.zoom-in {
        margin-right: 20px;
        cursor: pointer;
        /*
         * Set a counter and get the length of the image path.
         */
        /*
         * Loop ver the image path and figure out the
         * position of the dot where the extension begins.
         */
        /*
         * If we were able to figure out where the extension is,
         * slice the path into a base and an extension. Use that to
         * calculate urls for different density environments. Set
         * values for different environments.
         */
        /*
         * Set a base background for 1x environments.
         */
        background: url("../img/13_mapahd/zoomin_normal.png") top left no-repeat;
        background-size: 22px 22px;
        /*
         * Create an @2x-ish media query.
         */
        /*
         * Create media queries for all environments that the user has
         * provided images for.
         */
        /*
         * If anything went wrong trying to separate the file from its
         * extension, set a background value without doing anything to it.
         */ }
        @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
          section#inverted-contain div.controles div.buttons button.zoom-in {
            background: url("../img/13_mapahd/zoomin_normal@2x.png") top left no-repeat;
            background-size: 22px 22px; } }
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
          section#inverted-contain div.controles div.buttons button.zoom-in {
            background: url("../img/13_mapahd/zoomin_normal@2x.png") top left no-repeat;
            background-size: 22px 22px; } }
        section#inverted-contain div.controles div.buttons button.zoom-in:hover {
          transition: all 0.5s;
          /*
           * Set a counter and get the length of the image path.
           */
          /*
           * Loop ver the image path and figure out the
           * position of the dot where the extension begins.
           */
          /*
           * If we were able to figure out where the extension is,
           * slice the path into a base and an extension. Use that to
           * calculate urls for different density environments. Set
           * values for different environments.
           */
          /*
           * Set a base background for 1x environments.
           */
          background: url("../img/13_mapahd/zoomin_hover.png") top left no-repeat;
          background-size: 22px 22px;
          /*
           * Create an @2x-ish media query.
           */
          /*
           * Create media queries for all environments that the user has
           * provided images for.
           */
          /*
           * If anything went wrong trying to separate the file from its
           * extension, set a background value without doing anything to it.
           */ }
          @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
            section#inverted-contain div.controles div.buttons button.zoom-in:hover {
              background: url("../img/13_mapahd/zoomin_hover@2x.png") top left no-repeat;
              background-size: 22px 22px; } }
          @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            section#inverted-contain div.controles div.buttons button.zoom-in:hover {
              background: url("../img/13_mapahd/zoomin_hover@2x.png") top left no-repeat;
              background-size: 22px 22px; } }
      section#inverted-contain div.controles div.buttons button.zoom-out {
        cursor: pointer;
        /*
         * Set a counter and get the length of the image path.
         */
        /*
         * Loop ver the image path and figure out the
         * position of the dot where the extension begins.
         */
        /*
         * If we were able to figure out where the extension is,
         * slice the path into a base and an extension. Use that to
         * calculate urls for different density environments. Set
         * values for different environments.
         */
        /*
         * Set a base background for 1x environments.
         */
        background: url("../img/13_mapahd/zoomout_normal.png") top left no-repeat;
        background-size: 22px 22px;
        /*
         * Create an @2x-ish media query.
         */
        /*
         * Create media queries for all environments that the user has
         * provided images for.
         */
        /*
         * If anything went wrong trying to separate the file from its
         * extension, set a background value without doing anything to it.
         */ }
        @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
          section#inverted-contain div.controles div.buttons button.zoom-out {
            background: url("../img/13_mapahd/zoomout_normal@2x.png") top left no-repeat;
            background-size: 22px 22px; } }
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
          section#inverted-contain div.controles div.buttons button.zoom-out {
            background: url("../img/13_mapahd/zoomout_normal@2x.png") top left no-repeat;
            background-size: 22px 22px; } }
        section#inverted-contain div.controles div.buttons button.zoom-out:hover {
          transition: all 0.5s;
          /*
           * Set a counter and get the length of the image path.
           */
          /*
           * Loop ver the image path and figure out the
           * position of the dot where the extension begins.
           */
          /*
           * If we were able to figure out where the extension is,
           * slice the path into a base and an extension. Use that to
           * calculate urls for different density environments. Set
           * values for different environments.
           */
          /*
           * Set a base background for 1x environments.
           */
          background: url("../img/13_mapahd/zoomout_hover.png") top left no-repeat;
          background-size: 22px 22px;
          /*
           * Create an @2x-ish media query.
           */
          /*
           * Create media queries for all environments that the user has
           * provided images for.
           */
          /*
           * If anything went wrong trying to separate the file from its
           * extension, set a background value without doing anything to it.
           */ }
          @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
            section#inverted-contain div.controles div.buttons button.zoom-out:hover {
              background: url("../img/13_mapahd/zoomout_hover@2x.png") top left no-repeat;
              background-size: 22px 22px; } }
          @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            section#inverted-contain div.controles div.buttons button.zoom-out:hover {
              background: url("../img/13_mapahd/zoomout_hover@2x.png") top left no-repeat;
              background-size: 22px 22px; } }
  section#inverted-contain div.controles div.mensaje {
    display: inline-block;
    font-size: 14px;
    line-height: 14px;
    max-width: 178px;
    margin-left: 45px;
    margin-top: 2px; }
  section#inverted-contain div.controles img.logo-cola {
    float: right; }
    @media screen and (max-width: 660px) {
      section#inverted-contain div.controles img.logo-cola {
        float: none;
        display: block;
        clear: both;
        margin-top: 30px; } }
section#inverted-contain div.panzoom-parent {
  width: 100%;
  height: 620px; }
  @media screen and (max-width: 900px) {
    section#inverted-contain div.panzoom-parent {
      height: 400px; } }
section#inverted-contain div.panzoom-parent img {
  /*margin-top: -500px;*/ }

/* PULSE */
@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(0);
    opacity: 0.0; }
  25% {
    -moz-transform: scale(0);
    opacity: 0.1; }
  50% {
    -moz-transform: scale(0.1);
    opacity: 0.3; }
  75% {
    -moz-transform: scale(0.5);
    opacity: 0.5; }
  100% {
    -moz-transform: scale(1);
    opacity: 0.0; } }
@-webkit-keyframes "pulse" {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0; }
  25% {
    -webkit-transform: scale(0);
    opacity: 0.1; }
  50% {
    -webkit-transform: scale(0.1);
    opacity: 0.3; }
  75% {
    -webkit-transform: scale(0.5);
    opacity: 0.5; }
  100% {
    -webkit-transform: scale(1);
    opacity: 0.0; } }
section#video {
  margin-top: 230px; }
  section#video div.video {
    margin: 0 auto;
    text-align: center; }
    section#video div.video div.boton-play {
      margin: -330px auto 330px auto;
      position: relative;
      z-index: 10;
      width: 97px;
      height: 97px;
      cursor: pointer;
      cursor: hand;
      transition: all 0.5s;
      /*
       * Set a counter and get the length of the image path.
       */
      /*
       * Loop ver the image path and figure out the
       * position of the dot where the extension begins.
       */
      /*
       * If we were able to figure out where the extension is,
       * slice the path into a base and an extension. Use that to
       * calculate urls for different density environments. Set
       * values for different environments.
       */
      /*
       * Set a base background for 1x environments.
       */
      background: url("../img/9_video/boton_play_normal.png") top left no-repeat;
      background-size: 97px 97px;
      /*
       * Create an @2x-ish media query.
       */
      /*
       * Create media queries for all environments that the user has
       * provided images for.
       */
      /*
       * If anything went wrong trying to separate the file from its
       * extension, set a background value without doing anything to it.
       */ }
      @media screen and (max-width: 900px) {
        section#video div.video div.boton-play {
          margin: -250px auto 250px auto; } }
      @media screen and (max-width: 600px) {
        section#video div.video div.boton-play {
          margin: -200px auto 200px auto; } }
      @media screen and (max-width: 500px) {
        section#video div.video div.boton-play {
          margin: -180px auto 180px auto; } }
      @media screen and (max-width: 415px) {
        section#video div.video div.boton-play {
          margin: -160px auto 160px auto; } }
      @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
        section#video div.video div.boton-play {
          background: url("../img/9_video/boton_play_normal@2x.png") top left no-repeat;
          background-size: 97px 97px; } }
      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        section#video div.video div.boton-play {
          background: url("../img/9_video/boton_play_normal@2x.png") top left no-repeat;
          background-size: 97px 97px; } }
      section#video div.video div.boton-play:hover {
        transition: all 0.5s;
        /*
         * Set a counter and get the length of the image path.
         */
        /*
         * Loop ver the image path and figure out the
         * position of the dot where the extension begins.
         */
        /*
         * If we were able to figure out where the extension is,
         * slice the path into a base and an extension. Use that to
         * calculate urls for different density environments. Set
         * values for different environments.
         */
        /*
         * Set a base background for 1x environments.
         */
        background: url("../img/9_video/boton_play_hover.png") top left no-repeat;
        background-size: 97px 97px;
        /*
         * Create an @2x-ish media query.
         */
        /*
         * Create media queries for all environments that the user has
         * provided images for.
         */
        /*
         * If anything went wrong trying to separate the file from its
         * extension, set a background value without doing anything to it.
         */ }
        @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
          section#video div.video div.boton-play:hover {
            background: url("../img/9_video/boton_play_hover@2x.png") top left no-repeat;
            background-size: 97px 97px; } }
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
          section#video div.video div.boton-play:hover {
            background: url("../img/9_video/boton_play_hover@2x.png") top left no-repeat;
            background-size: 97px 97px; } }
      section#video div.video div.boton-play:active {
        transition: all 0.5s;
        /*
         * Set a counter and get the length of the image path.
         */
        /*
         * Loop ver the image path and figure out the
         * position of the dot where the extension begins.
         */
        /*
         * If we were able to figure out where the extension is,
         * slice the path into a base and an extension. Use that to
         * calculate urls for different density environments. Set
         * values for different environments.
         */
        /*
         * Set a base background for 1x environments.
         */
        background: url("../img/9_video/boton_play_click.png") top left no-repeat;
        background-size: 97px 97px;
        /*
         * Create an @2x-ish media query.
         */
        /*
         * Create media queries for all environments that the user has
         * provided images for.
         */
        /*
         * If anything went wrong trying to separate the file from its
         * extension, set a background value without doing anything to it.
         */ }
        @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
          section#video div.video div.boton-play:active {
            background: url("../img/9_video/boton_play_click@2x.png") top left no-repeat;
            background-size: 97px 97px; } }
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
          section#video div.video div.boton-play:active {
            background: url("../img/9_video/boton_play_click@2x.png") top left no-repeat;
            background-size: 97px 97px; } }

section#fotos {
  width: 100%;
  max-width: 1230px;
  margin: 0 auto;
  text-align: center; }
  section#fotos .width-1 {
    width: 188px; }
  section#fotos .width-2 {
    width: 411px; }
  section#fotos .width-3 {
    width: 342px; }
  section#fotos .width-4 {
    width: 258px; }
  section#fotos .width-5 {
    width: 100%;
    max-width: 627px; }
  section#fotos .width-6 {
    width: 209px; }
  section#fotos .width-7 {
    width: 374px; }
  section#fotos .grid-sizer {
    width: 1px; }
  section#fotos div.grid-item {
    display: inline-block;
    /*width:388px;*/
    margin-bottom: 30px;
    box-sizing: border-box;
    /*max-width:30%;*/
    text-align: center; }
  section#fotos div.col-izq {
    width: 100%;
    max-width: 610px;
    display: inline-block; }
    section#fotos div.col-izq div {
      padding: 10px;
      max-width: 595px;
      display: inline-block;
      box-sizing: border-box; }
  section#fotos div.col-der {
    width: 100%;
    max-width: 610px;
    display: inline-block; }
    section#fotos div.col-der div {
      padding: 10px;
      box-sizing: border-box;
      max-width: 595px;
      display: inline-block; }

section#interesado {
  text-align: center;
  margin-top: 240px; }
  section#interesado h1 {
    font-family: "Zilla Slab", serif;
    font-weight: 700;
    font-size: 38px;
    color: #b43d34;
    line-height: 35px;
    text-transform: uppercase;
    margin-bottom: 35px; }
  section#interesado p {
    max-width: 400px;
    width: 85%;
    margin: 0 auto;
    font-size: 13px;
    line-height: 25px; }
  section#interesado div.linea-separacion {
    max-width: 285px;
    width: 85%;
    height: 1px;
    background: #182218;
    margin: 70px auto 50px auto; }
  section#interesado h2 {
    letter-spacing: 4px;
    font-size: 13px;
    font-weight: 700; }
  section#interesado div.mandar-msj {
    display: inline-block;
    padding: 20px 30px;
    margin: 110px auto 0 auto;
    font-family: "Cousine", monospace;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid #6f8962;
    color: #6f8962;
    text-transform: uppercase;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    border-radius: 30px;
    transition: all 0.5s; }
    section#interesado div.mandar-msj:hover {
      background: #6f8962;
      color: white;
      transition: all 0.5s;
      cursor: pointer; }
  section#interesado div.interesado-cont {
    -webkit-animation: fadeIn 2s;
    animation: fadeIn 2s; }
  section#interesado div.contacto-form {
    -webkit-animation: fadeIn 2s;
    animation: fadeIn 2s; }
    section#interesado div.contacto-form form {
      max-width: 390px;
      width: 85%;
      margin: 0 auto; }
      section#interesado div.contacto-form form input::-webkit-input-placeholder {
        color: #182218; }
      section#interesado div.contacto-form form input:-moz-placeholder {
        /* Firefox 18- */
        color: #182218; }
      section#interesado div.contacto-form form input::-moz-placeholder {
        /* Firefox 19+ */
        color: #182218; }
      section#interesado div.contacto-form form input:-ms-input-placeholder {
        color: #182218; }
      section#interesado div.contacto-form form textarea::-webkit-input-placeholder {
        color: #182218 !important; }
      section#interesado div.contacto-form form textarea:-moz-placeholder {
        /* Firefox 18- */
        color: #182218 !important; }
      section#interesado div.contacto-form form textarea::-moz-placeholder {
        /* Firefox 19+ */
        color: #182218 !important; }
      section#interesado div.contacto-form form textarea:-ms-input-placeholder {
        color: #182218 !important; }
      section#interesado div.contacto-form form input[type=text], section#interesado div.contacto-form form textarea {
        border: none;
        width: 100%;
        margin-bottom: 30px;
        font-size: 14px;
        font-family: "Catamaran", sans-serif;
        font-weight: 600; }
      section#interesado div.contacto-form form input[type=text] {
        border-bottom: 1px solid #182218;
        padding-bottom: 5px; }
      section#interesado div.contacto-form form textarea {
        height: 110px; }
      section#interesado div.contacto-form form input[type=submit] {
        display: inline-block;
        padding: 20px 30px;
        margin: 0 auto;
        font-family: "Cousine", monospace;
        float: right;
        font-size: 11px;
        font-weight: 700;
        border: 2px solid #6f8962;
        color: #6f8962;
        text-transform: uppercase;
        background: white;
        position: relative;
        z-index: 10;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        -ms-border-radius: 30px;
        border-radius: 30px;
        transition: all 0.5s; }
        section#interesado div.contacto-form form input[type=submit]:hover {
          background: #6f8962;
          color: white;
          transition: all 0.5s;
          cursor: pointer; }
      section#interesado div.contacto-form form div.boton-back {
        width: 61px;
        height: 61px;
        /*
         * Set a counter and get the length of the image path.
         */
        /*
         * Loop ver the image path and figure out the
         * position of the dot where the extension begins.
         */
        /*
         * If we were able to figure out where the extension is,
         * slice the path into a base and an extension. Use that to
         * calculate urls for different density environments. Set
         * values for different environments.
         */
        /*
         * Set a base background for 1x environments.
         */
        background: url("../img/11_contacto/boton_atras_normal.png") top left no-repeat;
        background-size: 61px 61px;
        /*
         * Create an @2x-ish media query.
         */
        /*
         * Create media queries for all environments that the user has
         * provided images for.
         */
        /*
         * If anything went wrong trying to separate the file from its
         * extension, set a background value without doing anything to it.
         */
        transition: all 0.5s;
        float: left;
        cursor: pointer; }
        @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
          section#interesado div.contacto-form form div.boton-back {
            background: url("../img/11_contacto/boton_atras_normal@2x.png") top left no-repeat;
            background-size: 61px 61px; } }
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
          section#interesado div.contacto-form form div.boton-back {
            background: url("../img/11_contacto/boton_atras_normal@2x.png") top left no-repeat;
            background-size: 61px 61px; } }
        section#interesado div.contacto-form form div.boton-back:hover {
          /*
           * Set a counter and get the length of the image path.
           */
          /*
           * Loop ver the image path and figure out the
           * position of the dot where the extension begins.
           */
          /*
           * If we were able to figure out where the extension is,
           * slice the path into a base and an extension. Use that to
           * calculate urls for different density environments. Set
           * values for different environments.
           */
          /*
           * Set a base background for 1x environments.
           */
          background: url("../img/11_contacto/boton_atras_hover.png") top left no-repeat;
          background-size: 61px 61px;
          /*
           * Create an @2x-ish media query.
           */
          /*
           * Create media queries for all environments that the user has
           * provided images for.
           */
          /*
           * If anything went wrong trying to separate the file from its
           * extension, set a background value without doing anything to it.
           */
          transition: all 0.5s; }
          @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
            section#interesado div.contacto-form form div.boton-back:hover {
              background: url("../img/11_contacto/boton_atras_hover@2x.png") top left no-repeat;
              background-size: 61px 61px; } }
          @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            section#interesado div.contacto-form form div.boton-back:hover {
              background: url("../img/11_contacto/boton_atras_hover@2x.png") top left no-repeat;
              background-size: 61px 61px; } }
      section#interesado div.contacto-form form div.linea {
        width: 200px;
        height: 2px;
        margin-left: 61px;
        margin-top: 28px;
        background: #6f8962;
        position: absolute;
        z-index: 0; }

footer {
  margin-top: 235px; }
  footer div.upper-footer {
    text-align: center;
    height: 703px;
    /*
     * Set a counter and get the length of the image path.
     */
    /*
     * Loop ver the image path and figure out the
     * position of the dot where the extension begins.
     */
    /*
     * If we were able to figure out where the extension is,
     * slice the path into a base and an extension. Use that to
     * calculate urls for different density environments. Set
     * values for different environments.
     */
    /*
     * Set a base background for 1x environments.
     */
    background: url("../img/12_footer/fondo_foto.jpg") top center no-repeat;
    background-size: 1920px 703px;
    /*
     * Create an @2x-ish media query.
     */
    /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
    /*
     * If anything went wrong trying to separate the file from its
     * extension, set a background value without doing anything to it.
     */ }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      footer div.upper-footer {
        background: url("../img/12_footer/fondo_foto@2x.jpg") top center no-repeat;
        background-size: 1920px 703px; } }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      footer div.upper-footer {
        background: url("../img/12_footer/fondo_foto@2x.jpg") top center no-repeat;
        background-size: 1920px 703px; } }
  footer div.subfooter {
    background: #182218;
    color: white;
    text-transform: uppercase;
    height: 70px;
    font-weight: 800;
    font-size: 9px;
    padding: 35px 25px 0 25px;
    box-sizing: border-box; }
    @media screen and (max-width: 565px) {
      footer div.subfooter {
        padding-top: 20px; } }
    @media screen and (max-width: 415px) {
      footer div.subfooter {
        padding-top: 10px; } }
    footer div.subfooter img.detalle {
      position: absolute;
      right: 0;
      margin-top: -37px; }
      @media screen and (max-width: 565px) {
        footer div.subfooter img.detalle {
          display: none; } }
    footer div.subfooter div.izq {
      float: left; }
    footer div.subfooter div.der {
      float: right; }
    @media screen and (max-width: 565px) {
      footer div.subfooter div.izq, footer div.subfooter div.der {
        float: none;
        margin: 0 auto;
        display: block;
        text-align: center; } }

/* LOADER */
#preloader-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.95);
  z-index: 9999999999999999;
  height: 100%; }

#loader {
  animation: animate 1.5s linear infinite;
  clip: rect(0, 80px, 80px, 40px);
  height: 80px;
  width: 80px;
  position: absolute;
  z-index: 9999999;
  left: calc(50% - 40px);
  top: calc(50% - 40px); }

@keyframes animate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(220deg); } }
#loader:after {
  animation: animate2 1.5s ease-in-out infinite;
  clip: rect(0, 80px, 80px, 40px);
  content: '';
  border-radius: 50%;
  height: 80px;
  width: 80px;
  position: absolute; }

@keyframes animate2 {
  0% {
    box-shadow: inset #b43d34 0 0 0 17px;
    transform: rotate(-140deg); }
  50% {
    box-shadow: inset #b43d34 0 0 0 2px; }
  100% {
    box-shadow: inset #b43d34 0 0 0 17px;
    transform: rotate(140deg); } }
/* VIDEO FULLSCREEN */
.fullscreen-bg {
  /*display:none;*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -10; }

.video {
  margin-top: -85px !important; }

.noise-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
   * Set a base background for 1x environments.
   */
  background: url("../img/video_overlay.png") top left repeat;
  background-size: 5px 5px;
  /*
   * Create an @2x-ish media query.
   */
  /*
   * Create media queries for all environments that the user has
   * provided images for.
   */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */
  /*background: url("http://api.thumbr.it/whitenoise-361x370.png?background=f7fafa00&noise=080108&density=15&opacity=61") repeat top left;
*/ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    .noise-bg {
      background: url("../img/video_overlay@2x.png") top left repeat;
      background-size: 5px 5px; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .noise-bg {
      background: url("../img/video_overlay@2x.png") top left repeat;
      background-size: 5px 5px; } }

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  margin: 0 auto;
  min-height: 1080px !important;
  height: 1080px;
  max-height: 1080px; }

@media (min-aspect-ratio: 16 / 9) {
  .fullscreen-bg__video {
    height: 1080px;
    max-height: 1080px;
    /*top: -100%;*/ } }
@media (max-aspect-ratio: 16 / 9) {
  .fullscreen-bg__video {
    width: 1920px;
    /*left: -100%;*/ } }
/*
.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height:800px;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    max-height:800px;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;

    left: -100%;
  }
}*/
@media (max-width: 767px) {
  .fullscreen-bg {
    background: url("../video/cdl.jpg") center center/cover no-repeat;
    background-size: 100%;
    display: none; }

  .fullscreen-bg__video {
    display: none; } }

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