/*!
 * Componente Nombre:  .banner-home
 * Base: Bootstrap v4.6.2
 * Autor: DEX360
 * Copyright: DEX360

    1.  banner-home
        1.2.  banner-home-container - content

    10. responsive
*/

/* 1. banner-home */
.banner-home {
  overflow: hidden;
}

/* 1.2. banner-home-container - content */
.banner-home .banner-home-container {
  position: relative;
}
.banner-home .banner-home-content {
  position: absolute;
  margin: 0;
  top: 10%;
  text-align: center;
  width: 100%;
  z-index: 100;
}
.banner-home .banner-home-content h2 {
  color: var(--white);
  /* font-size:2.5em; */
  font-weight: 300;
  padding: 0% 0% 2%;
  text-align: left;
  width: 30%;
}
.banner-home .banner-home-content p {
  color: var(--white);
  font-size: 24px;
  padding: 0%;
  text-align: left;
  width: 34%;
}
.banner-home .banner-home-box {
  border-left: 1px solid var(--white);
  margin-top: 5%;
  padding-left: 3%;
}

/* 10. responsive */

/* Desktop 1919 */
@media (min-width: 1920px) {
}

/* Desktop 1025 */
@media (min-width: 1025px) and (max-width: 1919px) {
}

/* Tablet */
@media (min-width: 601px) and (max-width: 1024px) {
  .banner-home .banner-home-box {
    margin-top: 2%;
  }
  .banner-home .banner-home-content h2 {
    font-size: 1.7em;
    width: 38%;
  }
}

@media (max-width: 600px) {
  /* banner-home */
  .banner-home {
    background: var(--primary);
  }
  /* 1.2. banner-home-container - content */
  .banner-home .banner-home-content {
    position: relative;
    margin: 0px auto;
    padding: 10px 0px;
    top: inherit;
    width: 80%;
  }
  .banner-home .banner-home-content img {
    margin: 0px auto;
    width: 80%;
  }
  .banner-home .banner-home-content h3 {
    font-size: 1.5em;
    margin: 0px auto;
    padding: 0% 0% 3%;
    text-align: center;
    width: 100%;
  }
  .banner-home .banner-home-content p {
    font-size: 1em;
    text-align: center;
    width: 100%;
  }
  .banner-home .banner-home-image-bg-mobile {
    height: 100%;
    position: absolute;
    top: 0px;
  }
  .banner-home .banner-home-box {
    border-left: none;
    padding-left: 0%;
  }
  .banner-home .banner-home-content h2 {
    text-align: center;
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .banner-home .banner-home-content {
    top: 5%;
  }
  .banner-home .banner-home-content h2 {
    width: 44%;
  }
}

@media (min-width: 1400px) {
  .banner-home .banner-home-content h2 {
    width: 39%;
  }
}