@charset "UTF-8";
@use "sass:math" as *;
/**
 * Clay 3.105.0
 *
 * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
 * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
 *
 * SPDX-License-Identifier: BSD-3-Clause
 */
/**
 * Bootstrap v4.4.1
 *
 * SPDX-FileCopyrightText: © 2019 Twitter, Inc. <https://twitter.com>
 * SPDX-FileCopyrightText: © 2019 The Bootstrap Authors <https://getbootstrap.com/>
 *
 * SPDX-License-Identifier: LicenseRef-MIT-Bootstrap
 */
.hotspots .tarjeta-producto {
  -webkit-box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.1); }

@-webkit-keyframes fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@media (max-width: 991px) {
  .anime-shake .hotspot-overflow img {
    animation: shake 2s ease both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px; } }

@keyframes shake {
  40% {
    transform: translate3d(80px, 0, 0); }
  80% {
    transform: translate3d(-80px, 0, 0); } }

@-webkit-keyframes shake {
  40% {
    transform: translate3d(80px, 0, 0); }
  80% {
    transform: translate3d(-80px, 0, 0); } }

.hotspots {
  margin-bottom: 50px; }
  .hotspots .jumbotron {
    width: 100%;
    display: block;
    position: relative;
    background-size: cover;
    background-color: #FFFFFF;
    padding: 0;
    margin-bottom: 0; }
    .hotspots .jumbotron .container, .hotspots .jumbotron .row, .hotspots .jumbotron .col-xs-12 {
      height: auto; }
    .hotspots .jumbotron img {
      -ms-max-width: none !important;
      max-width: none !important; }
    @media (max-width: 1199px) and (min-width: 768px) {
      .hotspots .jumbotron img {
        max-height: 90vh; } }
    @media (orientation: landscape) and (max-width: 1199px) and (min-width: 768px) {
      .hotspots .jumbotron img {
        max-height: 100vh; } }
    @media (orientation: portrait) and (max-width: 767px) {
      .hotspots .jumbotron img {
        max-height: 80vh; } }
    @media (orientation: landscape) and (max-width: 767px) {
      .hotspots .jumbotron img {
        max-height: unset; } }
  .hotspots .hotspot-overflow {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    height: 100%; }
    @media (min-width: 960px) {
      .hotspots .hotspot-overflow {
        max-height: 75vh; } }
    @media (min-width: 1200px) {
      .hotspots .hotspot-overflow img {
        width: 100%; } }
  .hotspots .hotspots-points {
    padding: 0;
    position: absolute;
    top: 0;
    left: 0; }
    .hotspots .hotspots-points a {
      display: block;
      position: relative; }
      .hotspots .hotspots-points a:before {
        content: "";
        width: 0;
        height: 0;
        border: 1px solid #00538b;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-transition: all 300ms cubic-bezier(0, 1, 0.66, 1);
        transition: all 300ms cubic-bezier(0, 1, 0.66, 1); }
    .hotspots .hotspots-points .point {
      width: 27px;
      height: 27px;
      background-color: #00538b;
      border-radius: 50%;
      position: relative;
      display: block;
      -webkit-transition: all 800ms cubic-bezier(0, 1, 0.66, 1);
      transition: all 800ms cubic-bezier(0, 1, 0.66, 1); }
      .hotspots .hotspots-points .point::before {
        content: "";
        position: absolute;
        width: 9px;
        height: 1px;
        background-color: #FFFFFF;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
      .hotspots .hotspots-points .point::after {
        content: "";
        position: absolute;
        width: 9px;
        height: 1px;
        background-color: #FFFFFF;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%) rotate(90deg);
        transform: translate(-50%, -50%) rotate(90deg);
        opacity: 1;
        -webkit-transition: all 300ms cubic-bezier(0, 1, 0.66, 1);
        transition: all 300ms cubic-bezier(0, 1, 0.66, 1); }
    .hotspots .hotspots-points a:hover .point, .hotspots .hotspots-points a:focus .point {
      background-color: #0071be; }
    .hotspots .hotspots-points a.active:before, .hotspots .hotspots-points a:active:before {
      content: "";
      width: 47px;
      height: 47px;
      border: 1px solid #000000; }
    .hotspots .hotspots-points a.active .point, .hotspots .hotspots-points a:active .point {
      background-color: #000000; }
      .hotspots .hotspots-points a.active .point::before, .hotspots .hotspots-points a:active .point::before {
        content: "";
        position: absolute;
        width: 9px;
        height: 1px;
        background-color: #FFFFFF;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
      .hotspots .hotspots-points a.active .point::after, .hotspots .hotspots-points a:active .point::after {
        content: "";
        position: absolute;
        width: 9px;
        height: 1px;
        background-color: #FFFFFF;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 0; }
  .hotspots .velo-25:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 0; }
  .hotspots .content {
    padding: 60px 0 30px 0; }
    .hotspots .content h2 {
      font-family: 'SuisseIntl-Medium', 'rocablack';
      font-size: 40px;
      line-height: 40px;
      letter-spacing: -1px;
      font-weight: normal;
      margin-bottom: 20px; }
    .hotspots .content p {
      font-family: 'Roboto-Light', Helvetica, Arial, sans-serif;
      font-size: 15px;
      line-height: 24px;
      width: 80%; }
  .hotspots .hotspots-sliders {
    position: relative; }
  .hotspots .hotspots-slide {
    margin-top: -70%;
    position: absolute;
    display: none;
    opacity: 0;
    -webkit-transition: all 600ms cubic-bezier(0, 1, 0.66, 1);
    transition: all 600ms cubic-bezier(0, 1, 0.66, 1); }
    .hotspots .hotspots-slide.show {
      display: block;
      opacity: 1;
      -webkit-animation: fade 600ms ease-in;
      animation: fade 600ms ease-in; }
    @media (max-width: 991px) {
      .hotspots .hotspots-slide {
        margin-top: -90%;
        position: relative; } }
    @media (max-width: 767px) {
      .hotspots .hotspots-slide {
        margin-top: -20%; } }
  @media (min-width: 768px) {
    .hotspots .hotspots-sliders-arrows {
      display: none; } }
  @media (max-width: 767px) {
    .hotspots .hotspots-sliders-arrows {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-top: 25px;
      margin-left: 8px; }
      .hotspots .hotspots-sliders-arrows img {
        width: 24px; } }
  .hotspots .tarjeta-producto {
    background-color: #FFFFFF;
    width: 339px;
    padding-top: 50px; }
    .hotspots .tarjeta-producto .header {
      display: block;
      padding-bottom: 20px;
      float: left;
      width: 100%; }
      .hotspots .tarjeta-producto .header .close {
        display: block;
        top: 22px;
        right: 22px;
        position: absolute; }
        .hotspots .tarjeta-producto .header .close:before {
          content: "\e90d";
          display: inline-block;
          width: 24px;
          height: 24px;
          font-family: "icomoon" !important;
          color: #000000; }
    .hotspots .tarjeta-producto .image {
      display: block;
      width: 100%; }
      .hotspots .tarjeta-producto .image .image-content {
        width: 100%;
        height: 230px;
        margin: 0 auto;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center; }
      @media (max-width: 400px) {
        .hotspots .tarjeta-producto .image .image-content {
          width: 180px;
          height: 180px; } }
  .hotspots .tarjeta-content {
    padding: 30px; }
    .hotspots .tarjeta-content h3, .hotspots .tarjeta-content p {
      font-family: 'SuisseIntl-Regular', 'roca';
      font-size: 14px;
      line-height: 16px;
      letter-spacing: normal;
      font-weight: normal;
      color: #000000;
      margin: 0;
      font-weight: normal; }
    .hotspots .tarjeta-content p:first-child {
      font-family: 'Roboto-Bold', Helvetica, Arial, sans-serif;
      font-size: 11px;
      letter-spacing: normal;
      line-height: 15px;
      color: #00538b;
      text-transform: uppercase;
      margin-bottom: 10px; }

@media (orientation: portrait) and (max-width: 991px) {
  .slick-slider .jumbotron img {
    max-height: none; } }

@media (orientation: landscape) and (max-width: 991px) {
  .slick-slider .jumbotron {
    height: 100vh !important; }
    .slick-slider .jumbotron img {
      max-height: none; } }

.slick-slider .hotspots .hotspot-overflow > img {
  max-width: 100%; }
  @media (max-width: 1180px) {
    .slick-slider .hotspots .hotspot-overflow > img {
      min-width: auto;
      max-height: 100vh;
      max-width: none; } }

.slick-slider .tarjeta-producto img {
  width: 100%; }

.slick-slider .hotspots-wrapper {
  height: 100%; }

.slick-slider .hotspot-overflow {
  overflow: hidden; }

.slick-slider .hotspots-slide {
  bottom: 0; }

/* tablet Portrait and Landscape */
@media (min-width: 992px) and (max-width: 1024px) {
  .hotspots {
    margin-bottom: 70px; }
    .hotspots .content p {
      width: 100%; }
    .hotspots .tarjeta-content h3, .hotspots .tarjeta-content p {
      font-family: 'roca';
      font-size: 13px;
      line-height: 20px;
      letter-spacing: normal;
      font-weight: normal; }
    .hotspots .tarjeta-content p:first-child {
      font-family: 'Roboto-Bold', Helvetica, Arial, sans-serif;
      font-size: 11px;
      letter-spacing: 1px;
      line-height: 15px; } }

/* mobile */
@media (max-width: 991px) {
  .hotspots {
    margin-bottom: 70px; }
    .hotspots .tarjeta-producto {
      width: 98%;
      padding-top: 10px; }
    .hotspots .tarjeta-content h3, .hotspots .tarjeta-content p {
      font-family: 'roca';
      font-size: 13px;
      line-height: 20px;
      letter-spacing: normal;
      font-weight: normal; }
    .hotspots .tarjeta-content p:first-child {
      font-family: 'Roboto-Bold', Helvetica, Arial, sans-serif;
      font-size: 11px;
      letter-spacing: normal;
      line-height: 15px; }
  .slick-slider .hotspots-slide {
    margin-top: -157%; }
  .slick-slider .hotspot-overflow {
    overflow: hidden; }
  .slick-slider .hotspots-sliders-arrows {
    display: none; } }

.slick-slider .hotspots {
  margin-bottom: 0 !important; }