.banner{
   /* background: url(../images/bg.jpg) no-repeat scroll center bottom;
    background-size: cover;*/
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(245, 132, 12, 0.2)), url(../images/banner.webp);
    background-position: center;
    background-size:cover;
    background-attachment: fixed;
  }

.banner-sm{
 
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(245, 132, 12, 0.4)), url(../images/obra2.webp);
  background-position:center no-repeat;
  background-size:auto;
  background-attachment: fixed;
 
}

.como-funciona
{
 
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.2)), url(../images/banner2.webp) ;
  background-position:center ;
  background-size:auto no-repeat;
  

}

.back
{
  background: url(../images/bg.webp) no-repeat scroll center bottom;
  background-position:center ;
  background-size:cover;
  
  

}

.back2
{
  background: url(../images/bg2.webp) no-repeat scroll center bottom;
  background-position:center ;
  background-size:cover;
}

.back3
{
  background: url(../images/bg3.webp) no-repeat scroll center bottom;
  background-position:center ;
  background-size:cover;
}



h2
{
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

.subtitle
{
  font-family: "Roboto", sans-serif;
    
    font-weight: 400;
  
}

.banner .top-banner
  {
    padding-top: 220px;
  }

.top-banner .apple-watch {
    margin: 0 auto 61px;
}

.color-tools
{
  color:#ffffff;
  background: #e76100;
}

button.accordion-button.collapsed.accordion-btn-color
{
  color:#ffffff;
  background: #e76100;
}

.accordion-btn-color
{
  color: #e76100;
}

.accordion-button:not(.collapsed) {
  color:#ffffff;
  background: #e76100;
  box-shadow: none;
  
}
.accordion-button:focus {
  box-shadow: none;

}


.color-tools:hover
{
  color:#ffffff;
  background: #000000;
}

.btn-whats{
    color: #fff;
    background-color: #25d366;
}

.btn-whats:hover {
    color: #fff;
    background-color: #000000;
}

/*---------------------
  Icono WhatApp 
-----------------------*/
.whatsapp{
  /*REGLA DADA: Define la posición flotante del icono, se muestra abajo a la derecha, 
  en caso de cambiar la posición a la izquierda cambia la regla right a left, 
  en caso de requerirla arriba cambia top en vez de bottom*/
  position:fixed;
  width:60px;
  height:60px;
  bottom:40px;
  right:20px;
  z-index:100;
  /*REGLA DADA: Define el aspecto en colores, tamaño y forma del icono lo más parecido al 
  de WhatApp*/
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
    font-size:30px;
  box-shadow: 2px 2px 3px #999;
}

/*Define un margen abajo del icono*/
.my-whatsapp{
  margin-top:16px;
}