body {

  }
#banner{
    width: 100%;
    height: 100vh;
    background: url('../images/contacto.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

}

  #contacto{
    padding-top: 200px; 
    padding-bottom: 100px;
  }

  #color-card{
      background-color: #000000ad;
      color: white;
      /*background-color: transparent;*/
      border-radius: 10px;
  }

  .inputs-styles{
    width: 100% ; 
    padding: 12px 20px;
    box-sizing: border-box;
    border: none;
    border-bottom: 3px solid rgb(236, 176, 25);
    color: black;
    margin: 10px;
}

.inputs-styles:focus{
    background-color: #fff;
    color: black;
    border: none;
}

.classservicio{
    display: none;
}

.comentario{
    display: none;
    margin-top: 1rem;
}
/*Responsive*/
@media (max-width: 575.98px) { 
   
    #contacto{
        padding-top: 35px;
    }
    
    #banner{
    -webkit-background-size:cover;
    -webkit-background-repeat:no-repeat;
    -webkit-background-position: center center;
    }
    
 }

@media (min-width: 576px) and (max-width: 767.98px) { 
   
   #contacto{
        padding-top: 35px;
        padding-bottom: 100px;
   }

}

 @media (min-width: 768px) and (max-width: 991.98px) { 
   
        #contacto{
            padding-top: 25px;
            padding-bottom: 100px;
        }

 }

@media (min-width: 992px) and (max-width: 1199.98px) { 
    
    #contacto{
        padding-top: 25px;
        padding-bottom: 100px;
    }
       
 }

@media (min-width: 1200px) { 
    
    #contacto{
        padding-top: 50px;
    }

 }

 @media (min-width: 1400px) { 
    
    #contacto{
        padding-top: 35px;
    }

 }