todos-contra-el-fuego-web/imports/ui/pages/Index/Index-custom.scss

@import '../../stylesheets/mixins';
@import '../../stylesheets/colors';

.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-control-next-icon, .carousel-control-prev-icon {
  width: 40px;
  height: 40px;
}

.carousel-indicators li {
  height: 5px;
  border-radius: 2px;
  cursor: pointer;
}

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

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

.py-5 > .container > {
  div > h1 {
    color: #280B0B;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 10px;
  }
  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;
    }

    .sectionTESTINGGGGG { // don't scroll sections in mobiles
      overflow: visible !important;
    }
}

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

.slide-1-icon, .slide-2-icon, .slide-3-icon, .slide-4-icon {
  position: relative;
  top: 35%;
}

.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: .8;
  right: 35%;
  text-shadow: 2px 2px #280B0B;
}

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

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

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

.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);
}

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

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

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

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

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

.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;
  background-image: url('/home-fires.jpg');
}

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

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

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

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

.full-width .page-header { // section titles
  margin-top: 20px;
}