/*
    ************** BUNDLE MY PROJECT **************
*/
/*
    ** LAYOUT **
*/
/*
    ** CONFIG/MIXINS MQ **
*/
/*
    ** MEDIA BREAKPOINTS **
    ** Define the mediaquery necessary for your project

    ** You can add, delete, or change the value and name of the key in the $ brackpoints map, also  you can overwrite the $breakpoints map for rewrite the keys


        ** EXAMPLE

        $breakpoints: (
            mobile      :   375px,
            tablet      :   768px,
            laptop      :   1199px,
            desktop     :   1460px,
        );
*/
/*
    ** Media mixin from $breakpoints map
*/
/*
    ** Media-up mixin from $breakpoints map
    ** Use of media-up
    ** You can use these media mixin for you self scss files, the size of mediaquery is accord the values of $breackpoint map

            **Example
                .text{
                    color: blue;
                    @include media-up(desktop($breakpoint map value)){
                        color: plum;
                    }
                }
*/
/*
    ** COLORS **
*/
html, body {
  min-height: 100%;
  width: 100%;
  position: relative;
  overflow-x: hidden;
}

body {
  color: #121212;
  font-family: "BS-BBVA book", sans-serif;
}

.loader {
  background-color: #072146;
}
.loader-spinner {
  border-color: #fff;
}

.container--bbva {
  max-width: 100% !important;
}
@media screen and (min-width: 992px) {
  .container--bbva {
    max-width: 960px !important;
  }
}
@media screen and (min-width: 1200px) {
  .container--bbva {
    max-width: 1176px !important;
  }
}

.pop-up-flow {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background-color: #fff;
  overflow: auto;
  z-index: 100;
}

.bg-full {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.scroll-indicator {
  animation: scroll 1.2s infinite;
}

@keyframes scroll {
  0% {
    opacity: 0;
    transform: translate(0);
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    transform: translateX(16px);
  }
  100% {
    opacity: 0;
  }
}
/*
    ** COMPONENTS **
*/
.wrapper-swiper-out {
  position: relative;
}

.wrapper-swiper-nav {
  position: absolute;
}

.swiper-button-disabled {
  opacity: 0 !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-family: initial !important;
  content: "" !important;
}

/* .swiper-slide {
    padding: 1px;
} */
.swiper-button-prev,
.swiper-button-next {
  z-index: 2 !important;
  transition: all 0.1s !important;
}
.swiper-button-prev img,
.swiper-button-next img {
  width: 20px;
}
@media (min-width: 768px) {
  .swiper-button-prev img,
  .swiper-button-next img {
    width: 24px;
  }
}

.swiper-button-prev img {
  transform: rotate(180deg);
}

.swiper-pagination-bullet-active, .swiper-pagination-bullet-active-main {
  background-color: red !important;
}

/*
    ** LAYOUT PARTIALS **
*/
/*
    ** UTILITIES **
*/
@keyframes own-fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.own-fade-in {
  display: flex !important;
  animation: own-fadeIn ease-in 200ms;
}

/*
    **  BACKGROUND
*/
.bg-withe {
  background-color: #fff;
}

.bg-black {
  background-color: #000;
}

/* RENDER TEXT - BACKGROUND - BORDER */
.tx-blue-1 {
  color: #072146;
}

.bg-blue-1 {
  background-color: #072146;
}

.border-blue-1 {
  border-color: #072146;
}

.tx-blue-2 {
  color: #002D67;
}

.bg-blue-2 {
  background-color: #002D67;
}

.border-blue-2 {
  border-color: #002D67;
}

.tx-blue-3 {
  color: #1464A5;
}

.bg-blue-3 {
  background-color: #1464A5;
}

.border-blue-3 {
  border-color: #1464A5;
}

.tx-blue-4 {
  color: #00A7E9;
}

.bg-blue-4 {
  background-color: #00A7E9;
}

.border-blue-4 {
  border-color: #00A7E9;
}

.tx-blue-5 {
  color: #1FB9F9;
}

.bg-blue-5 {
  background-color: #1FB9F9;
}

.border-blue-5 {
  border-color: #1FB9F9;
}

.tx-blue-green-1 {
  color: #2DCCCD;
}

.bg-blue-green-1 {
  background-color: #2DCCCD;
}

.border-blue-green-1 {
  border-color: #2DCCCD;
}

[class*=hover] {
  transition: all 120ms;
}

.tx-white {
  color: #fff;
}

.tx-black {
  color: #000;
}

.tx-book {
  font-family: "BS-BBVA book", sans-serif;
}

.tx-medium {
  font-family: "BS-BBVA medium", sans-serif;
}

.tx-bold {
  font-family: "BS-BBVA bold", sans-serif;
}

/* SIMPLE FADE */
.fade-enter-active, .fade-leave-active {
  transition: opacity 150ms;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

/* SIMPLE FADE FAST*/
.fade-fast-enter-active, .fade-fast-leave-active {
  transition: opacity 100ms;
}

.fade-fast-enter, .fade-fast-leave-to {
  opacity: 0;
}

/* SIMPLE FADE SLOW*/
.fade-slow-enter-active, .fade-slow-leave-active {
  transition: opacity 250ms;
}

.fade-slow-enter, .fade-slow-leave-to {
  opacity: 0;
}

/* FADE IN DOWN */
.slide-fade-enter-active {
  transition: all 200ms ease;
}

.slide-fade-leave-active {
  transition: all 200ms ease;
}

.slide-fade-enter, .slide-fade-leave-to {
  transform: translateY(-30px);
  opacity: 0;
}

/* POP UP */
.pop-enter-active,
.pop-leave-active {
  transition: transform 500ms cubic-bezier(0.5, 0, 0.5, 1), opacity 500ms linear;
}

.pop-enter,
.pop-leave-to {
  opacity: 0;
  transform: scale(0.3) translateY(-20%);
}

/*
    ** PAGES **
*/
.container--starting-map {
  max-width: 100%;
  padding-left: 28px;
  padding-right: 28px;
}
.container--starting-map .gs\:grid {
  margin-right: -28px;
  margin-left: -28px;
}
.container--starting-map [class*=col-], .container--starting-map .col {
  padding-right: 28px;
  padding-left: 28px;
}
@media (min-width: 768px) {
  .container--starting-map {
    max-width: 93%;
  }
}
@media (min-width: 1100px) {
  .container--starting-map {
    max-width: 88.3333333333%;
  }
}

.btn-download {
  background-color: #007DE9;
  border-color: #007DE9;
  color: #fff;
  border-radius: 0;
  width: 100%;
  max-width: 232px;
  height: 76px;
  margin-bottom: calc(30 / 1080 * 100vh);
}
@media (min-width: 1580px) {
  .btn-download {
    max-width: 292px;
    height: 92px;
  }
}

@media (min-width: 1100px) {
  .starting-map .btn:hover {
    transform: translateY(-6px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
  }
}

.btn-starting-map {
  font-size: 18px;
  font-family: "BS-BBVA medium", sans-serif;
  width: 100%;
  max-width: 232px;
  height: 60px;
  border-radius: 0;
}
@media (min-width: 1580px) {
  .btn-starting-map.btn--lg {
    font-size: 24px;
    max-width: 320px;
    height: 80px;
  }
}
.btn-starting-map.btn--blue-5 {
  background-color: #1FB9F9;
  border-color: #1FB9F9;
  color: #fff;
}
.btn-starting-map.btn--blue-green-1 {
  background-color: #2DCCCD;
  border-color: #2DCCCD;
  color: #fff;
}
.btn-starting-map.btn--yellow-1 {
  background-color: #FFCE44;
  border-color: #FFCE44;
  color: #fff;
}
.btn-starting-map.disable {
  pointer-events: none;
  background-color: #DDDBD7;
  border-color: #DDDBD7;
}

.starting-map .slide-init {
  background-position: top 10%;
}
@media (min-width: 1100px) {
  .starting-map .slide-init {
    background-position: center;
  }
}

.box-info {
  margin-top: calc(280 / 1080 * 100vh);
}
@media (min-width: 1580px) {
  .box-info {
    margin-top: calc(250 / 1080 * 100vh);
  }
}

.map-number {
  transition: all 100ms ease;
}

.map-badge {
  opacity: 0;
}

.pin {
  transition: all 200ms ease;
  cursor: pointer;
}
.pin rect, .pin tspan, .pin .map-badge {
  transition: all 100ms ease;
}
@media (min-width: 1100px) {
  .pin:not(.disable):hover .map-title rect {
    fill: #002D67;
  }
  .pin:not(.disable):hover .map-title tspan {
    fill: #fff;
  }
  .pin:not(.disable):hover .map-badge--no-finish {
    opacity: 1;
  }
}
.pin.disable .map-title rect {
  fill: #fff;
}
.pin.disable .map-title tspan {
  fill: #B7B7B7;
}
.pin.disable:hover .map-badge--finish {
  opacity: 1;
}

.starting-map-bg {
  height: inherit;
  width: inherit;
}

/*
    ** SHAME **
*/