@use '../../stylesheets/mixins' as *;
@use '../../stylesheets/colors' as *;

.full-width {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  /* margin-top: -21px; full pagen */
/*
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;*/
}

.carousel-item {
  height: 65vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.carousel-snd-item {
  height: 85vh;
  min-height: 400px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
  width: 40px;
  height: 40px;
}

// react-bootstrap v2 renders indicators as <button> (BS5 markup), not <li> (BS4),
// so port the base "bar" look here — the BS4 CSS only styles <li>. The last two
// rules are the original custom tweaks.
.carousel-indicators button,
.carousel-indicators li {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 5px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-radius: 2px;
  opacity: .5;
  transition: opacity .6s ease;
}

.carousel-indicators .active {
  opacity: 1;
}

// BS5 renames BS4's `.sr-only` to `.visually-hidden`; react-bootstrap's carousel
// prev/next labels use it. Shim it until the Bootstrap 5 CSS swap lands, else the
// "Anterior"/"Siguiente" labels would render visible over the controls.
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.carousel-snd-caption > h3,
.carousel-caption > h3 {
  > i {
    display: none;
  }
  font-size: 2.5rem;
  text-shadow: 2px 2px 1px #280B0B;
}

@include breakpoint(mobile) {
  .carousel-caption > h3 {
    font-size: 1.8rem;
  }
}

@include breakpoint(mobile) {
  .carousel-snd-caption > h3 {
    font-size: 1.3rem;
  }
}

.py-5 > .container > {
  div > h1 {
    color: #280B0B;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
  }
  p {
    padding-top: 10px;
    font-size: 1.7em;
  }
}

@include breakpoint(mobile) {
  .py-5 > .container > {
    p {
      font-size: 1.2em;
    }
  }

  .pt-5, .py-5 {
    padding-top: 1rem !important;
  }

  .moto {
    margin-top: 5px;
    margin-left: 5px;
  }
}

.slide-2-icon {
  border-radius: 50%;
  position: relative;
  width: 30%;
  left: 35%;
  border: 14px solid #FFF;
  opacity: .6;
  &:after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }
}

.slide-1-icon, .slide-2-icon, .slide-3-icon, .slide-4-icon {
  position: relative;
  top: 25%;
  text-align: center;
}

.slide-1-icon:before,
.slide-2-icon:before,
.slide-3-icon:before,
.slide-4-icon:before {
  font-family: FontAwesome;
  /* position: absolute; */
  font-size: 140px;
  color: white;
  opacity: .6;
  /* right: 35%; */
  text-shadow: 2px 2px #280B0B;
}

@include breakpoint(mobile) {
  .slide-1-icon:before,
  .slide-2-icon,
  .slide-2-icon:before,
  .slide-3-icon:before,
  .slide-4-icon:before {
    font-size: 100px;
    opacity: .6;
  }

  .slide-3-icon:before,
  .slide-4-icon:before {
    top: 10px;
    /* top: -50px; */
  }
}

.slide-1-icon:before {
  content: "";
  cursor: pointer;
}

.slide-2-icon {
  top: 5%;
}

@include breakpoint(mobile) {
  .slide-2-icon {
    top: 20%;
  }
}

.slide-2-iconDISABLED:before {
  content: "";
  font-size: 320px;
  top: -10%;
}

.slide-3-icon:before {
  content: "";
}

.slide-4-icon:before {
  content: "";
}

.scale__container--js {
  text-align: center;
}

.scale--js {
  display: inline-block;
  transform-origin: 50% 0;
  -webkit-font-smoothing: antialiased;
  transform: translate3d(0, 0, 0);
}

.no-webp .carousel-item-1 {
  background-image: url('/images/home-slide1.jpg')
}

.no-webp .carousel-item-2.lazy {
  background-image: url('/images/home-slide2.jpg')
}

.no-webp .carousel-item-3.lazy {
  background-image: url('/images/home-slide3.jpg')
}

.no-webp .carousel-item-4.lazy {
  background-image: url('/images/home-slide4.jpg')
}

.no-webp .carousel-snd-item-1 {
  background-image: url('/images/home-slide-snd-1.jpg')
}

.no-webp .carousel-snd-item-2.lazy {
  background-image: url('/images/home-slide-snd-2.jpg')
}

.webp .carousel-item-1 {
  background-image: url('/images/home-slide1.webp')
}

.webp .carousel-item-2.lazy {
  background-image: url('/images/home-slide2.webp')
}

.webp .carousel-item-3.lazy {
  background-image: url('/images/home-slide3.webp')
}

.webp .carousel-item-4.lazy {
  background-image: url('/images/home-slide4.webp')
}

/* .webp .carousel-item-1 {
  background-image: url('/images/home-slide1-blur.webp')
} */

.webp .carousel-item-2 {
  background-image: url('/images/home-slide2-blur.webp')
}

.webp .carousel-item-3 {
  background-image: url('/images/home-slide3-blur.webp')
}

.webp .carousel-item-4 {
  background-image: url('/images/home-slide4-blur.webp')
}

.webp .carousel-snd-item-1 {
  background-image: url('/images/home-slide-snd-1.webp')
}

.webp .carousel-snd-item-2 {
  background-image: url('/images/home-slide-snd-2-blur.webp')
}

.webp .carousel-snd-item-2.lazy {
  background-image: url('/images/home-slide-snd-2.webp')
}

.participe-btn {
  background-color: $todos-palette1;
  color: white;
  text-transform: uppercase;
}

.bg-image-full {
  color: white;
  text-shadow: 2px 2px 1px #280B0B;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.no-webp .bg-image-full {
  background-image: url('/images/home-fires.jpg');
}

.webp .bg-image-full {
  background-image: url('/images/home-fires.webp');
}

@media only screen and (max-width: 767px) {
  .no-webp .bg-image-full {
    background-image: url('/images/home-fires-800.jpg');
  }

  .webp .bg-image-full {
    background-image: url('/images/home-fires-800.webp');
  }
}

@media only screen and (max-width: 400px) {
  .no-webp .bg-image-full {
    background-image: url('/images/home-fires-400.jpg');
  }

  .webp .bg-image-full {
    background-image: url('/images/home-fires-400.webp');
  }
}

@media only screen and (max-width: 1000px) {
  .no-webp .bg-image-full {
    background-image: url('/images/home-fires-1000.jpg');
  }

  .webp .bg-image-full {
    background-image: url('/images/home-fires-1000.webp');
  }
}

.nowebp .device[data-device=iPhone6][data-orientation=portrait][data-color=white] {
  background-image: url(/images/mobile.png);
}

.webp .device[data-device=iPhone6][data-orientation=portrait][data-color=white] {
  background-image: url(/images/mobile.webp);
}

.full-width .page-header { // section titles
  padding-top: 30px;
}

.sect1 {
}

.sect2 {
}

.sect3 {
  background-color: $todos-back4;
}

.sect4 {
  background-color: $todos-back5;
}

.sect5 {
  background-color: $todos-back6;
}

.sect6 {
  background-color: $todos-back5;
}

.sect3, sect4, sect5, sect6 {
  overflow: visible !important;
}


.crowd-footer {
  position: relative;
  bottom: -150px;
  left: 0px;
  text-align: left;
}

.slides-footer {
  position: relative;
  bottom: 0px;
  left: 0px;
  text-align: left;
}

.slides-footer > p,
.crowd-footer > p {
  font-size: 13px;
  margin-left: 20px;
  margin-right: 20px;
}

.slides-footer > p > a,
.slides-footer > p > a:hover {
  color: #868e96 !important;
  text-shadow: 2px 2px 1px #280B0B;
}

#carouselSndIndicators > div > div.carousel-item.carousel-snd-item-1 > div > h3 > span > a {
  color: white;
}