.banners{
  padding-top:4rem;
}
.banner-derecha{
  bottom:11rem !important;
  display: flex;
  justify-content: start;
  align-items:start;
  flex-direction: column;
  left:10% !important;
  width: 45%;
  transition-delay: 5s;
  animation: letrasTop 2s;
  text-align: left !important;
}
.banner-izquierda{
  bottom:11rem !important;
  display: flex;
  justify-content: end;
  flex-direction: column;
  align-items:end;
  left:45% !important;
  width: 45% !important;
  transition-delay: 5s;
  animation: letrasTop 2s;
  text-align: end !important;
}
.banner-derecha-rojo{
  bottom:9rem !important;
  display: flex;
  justify-content: start;
  align-items:start;
  flex-direction: column;
  left:10% !important;
  width: 50%;
  transition-delay: 5s;
  animation: letrasTop 2s;
  text-align: left !important;
}
.banner-derecha-rojo h1{
  color:var(--rojo);
  font-size: 3.8rem;
  font-family: fuente-bold;
  letter-spacing: .2rem;
  text-shadow: 1.5px 1.5px 2.5px white;
}

/* BANNER SECCION CONTIGO */
.banner-derecha-about{
  bottom:13rem !important;
  display: flex;
  justify-content: start;
  align-items:start;
  flex-direction: column;
  left:10% !important;
  width: 55%;
  transition-delay: 5s;
  animation: letrasTop 2s;
  text-align: left !important;
}
.banner-derecha-about h2{
  color:var(--verde-oscuro);
  font-size: 2.5rem;
  font-family: fuente-bold;
  letter-spacing: .2rem;
  /*text-shadow: 1px 1px 2px white;*/
  text-transform: uppercase;
}
.banner-derecha-about h2 span{
  font-size: 3rem;
}
.banner-derecha-about h3{
  color:black;
  font-size: 3rem;
  font-family: fuente-bold;
  letter-spacing: .2rem;
  text-shadow: 1px 1px 2px white;
  text-transform: uppercase;
}
.banner-derecha-about p{
  font-size: 1.5rem;
  font-family: fuente-media;
  /*text-shadow: 1px 1px 2px grey;*/
  color:black;
  padding-right: 5rem !important;
}
/* BANNER SECCION CONTIGO */

/* BANNER LECHERO AFRICANO */
.banner-derecha-lechero{
  bottom:18rem !important;
  display: flex;
  justify-content: start;
  align-items:start;
  flex-direction: column;
  left:10% !important;
  width: 45%;
  transition-delay: 5s;
  animation: letrasTop 2s;
  text-align: left !important;
}
.banner-derecha-lechero h2{
  color:var(--verde-oscuro);
  font-size: 3rem;
  font-family: fuente-bold;
  letter-spacing: .2rem;
  /*text-shadow: 1px 1px 2px grey;*/
  text-transform: uppercase;
}
.banner-derecha-lechero h2 span{
  font-size: 3.5rem;
}
.banner-derecha-lechero h3{
  color:black;
  font-size: 3rem;
  font-family: fuente-bold;
  letter-spacing: .2rem;
  text-shadow: 1px 1px 2px grey;
  text-transform: uppercase;
}
.banner-derecha-lechero p{
  font-size: 1.5rem;
  font-family: fuente-media;
  text-shadow: 1px 1px 2px grey;
  color:black;
  padding-right: 5rem !important;
}
/* BANNER LECHERO AFRICANO */

/* BANNER ARTEMISA */
.banner-derecha-artemisa{
  bottom:16rem !important;
  display: flex;
  justify-content: start;
  align-items:start;
  flex-direction: column;
  left:10% !important;
  width: 50%;
  transition-delay: 5s;
  animation: letrasTop 2s;
  text-align: left !important;
}
.banner-derecha-artemisa h2{
  color:var(--verde-oscuro);
  font-size: 3rem;
  font-family: fuente-bold;
  letter-spacing: .2rem;
  text-shadow: 1px 1px 2px grey;
  text-transform: uppercase;
}
.banner-derecha-artemisa h2 span{
  font-size: 3.5rem;
}
.banner-derecha-artemisa h3{
  color:black;
  font-size: 3rem;
  font-family: fuente-bold;
  letter-spacing: .2rem;
  text-shadow: 1px 1px 2px grey;
  text-transform: uppercase;
}
.banner-derecha-artemisa p{
  font-size: 1.5rem;
  font-family: fuente-media;
  text-shadow: 1px 1px 2px grey;
  color:black;
  padding-right: 5rem !important;
}
/* BANNER ARTEMISA */

.banner-derecha h1{
  color:white;
  font-size: 2.8rem;
  font-family: fuente-bold;
  letter-spacing: .2rem;
  text-shadow: 1.5px 1.5px 2.5px black;
  text-transform: uppercase;
}
.banner-izquierda h1{
  color:white;
  font-size: 2.8rem;
  font-family: fuente-bold;
  letter-spacing: .2rem;
  text-shadow: 1.5px 1.5px 2.5px black;
  text-transform: uppercase;
}
.banner-izquierda p{
  font-size: 1.5rem;
  font-family: fuente-media;
  text-shadow: 1.5px 1.5px 2.5px black;
}
.banner-derecha p{
  font-size: 1.5rem;
  font-family: fuente-media;
  text-shadow: 1.5px 1.5px 2.5px black;
}
.btn-banner{
  background-color: white;
  color: black;
  border: 1px solid white ;
  padding: .5rem 1.5rem !important;
  border-radius: 0rem !important;
  transition:.5s !important;
  font-size: 1.2rem;
  margin-top:2rem;
}
.btn-banner:hover{
  background-color: transparent !important;
  color:white !important;
}

@keyframes letrasBottom{
  from{
    margin-top:50%;
  }
  to{
    margin-top:0%;
  }
}

@keyframes letrasTop{
  from{
    margin-bottom: 50%;
  }
  to{
    margin-bottom:0%;
  }
}

@media (max-width:420px){
  .btn-banner{
    margin-top: 1rem;
    font-size: 1rem;
  }
}