body{
    position: relative;
    background-color: #00cf4a;
}
.hojas{
    position: absolute;
    transform: rotateX(180deg);
    top: -15px;
}
.hojas3{
    position: absolute;
    transform: rotateX(180deg);
    right: 0;
    top: -15px;
}
.hojas2{
    position: absolute;
    bottom: 0px;
}
.hojas4{
    position: absolute;
    right: 0;
    bottom: 0px;
}
.logoNelica{
    padding-top: 200px;
    padding-bottom: 50px;
}
.logoNelica img{
    width: 18em;
}
.introduccion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.introDatos span{
    color: #000;
}
.introDatos p{
    font-size: 20px;
    color: #fff;
    text-align: left;
}
.consultaForm{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 45em;
    background: transparent;
    /* padding: 60px 60px; */
    transition: .8s;
}
.consultaForm select{
    color: #a1a1a1;
    /* -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none; 
    background: url('/img/flecha.png') 93% / 12px no-repeat; */
}
.consultaForm input,.consultaForm select{
    border-radius: 20px;
    border: 1px solid #00cf4a;
    height: 45px;
    margin-bottom: 7px;
    padding-left: 25px;    
}
.consultaForm select{
    color: #00cf4a;
}
#formConsulta{
    padding: 50px 50px;
}
.introduccion h3,#formConsulta h3{
    margin-bottom: 30px;
    color: #000000;
}
.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #a1a1a1;
}
.form-control::-moz-placeholder { /* Firefox 19+ */
    color: #a1a1a1;
}
.form-control::-ms-input-placeholder { /* IE 10+ */
    color: #a1a1a1;
}
.form-control::-moz-placeholder { /* Firefox 18- */
    color: #a1a1a1;
}
.consultaForm textarea{
    border-radius: 20px;
    border: 1px solid #00cf4a;
    resize: none;
    height: 160px;
    padding-left: 25px;
}
.consultaForm #button-form{
    position: relative;
    overflow: hidden;
    color: #fff;
    border-radius: 20px;
    background: #000;
    border: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 11em;
    height: 45px;
    cursor: pointer;
    outline: none;
    margin-top: 50px;
    margin-bottom: 80px;
    transition: .8s all ease;
}
.consultaForm #button-form::before{
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0);
    transition: .5s all ease;
    z-index: -1;
}
.consultaForm #button-form:hover{
    color: #000;
}
.consultaForm #button-form:hover::before{
    transform: translate(-50%,-50%) scale(12);
}
/* #formConsulta{
    padding-top: 40px;
} */
.btnClose button{
    color: #00cf4a;
    outline: none;
}
.btnClose button:hover{
    color: #008bd1;
}
.input-auto {
    display: block;
    width: 100%;
    background: white;
    border-radius: 20px;
    text-align: left;
    border: 1px solid #00cf4a;
    padding: 7px;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    cursor: pointer;
    color: #00cf4a;
}
#file {
    display: none;
}

.form-check {
    padding: 0 39px;
    font-size: 14px;
    line-height: 16px;
}
.containerCheck input {
    position: absolute;
    top: -5px;
    left: 35px;
    cursor: pointer;
    height: 15px;
    width: 15px;
    z-index: 1;
    opacity: 0;
}
  
  /* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 15px;
    height: 15px;
    width: 15px;
    border-radius: 4px;
    background-color: transparent;
    border: 1px solid #fff;
}
  
  /* Create the checkmark/indicator (hidden when not checked) */
.checkmark::after {
    content: '';
    position: absolute;
    display: none;
}
  
  /* Show the checkmark when checked */
.containerCheck input:checked ~ .checkmark::after{
    display: block;
}
  
  /* Style the checkmark/indicator */
.containerCheck .checkmark::after {
    left: 4px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.containerCheck{
    color: #000;
}

#telefono{
    margin-bottom: 50px;
}
/**************************/
@media screen and (max-width:767px){
    .hojas img,.hojas3 img{
        width: 12em;
    }
    .hojas2 img,.hojas4 img{
        width: 18em;
    }
    .logoNelica {
        padding-top: 150px;
        padding-bottom: 0;
    }
    .consultaForm {
        width: 35em;
        padding: 60px 20px;
    }
    .consultaForm input, .consultaForm select,.consultaForm textarea {
        padding-left: 15px;
    }
    #formConsulta{
        padding: 50px 0px;
    }
    #formConsulta h3 {
        font-size: 23px;
    }
}
@media screen and (max-width:575px){
    .hojas2 img,.hojas4 img{
        width: 12em;
    }
    .logoNelica img {
        width: 15em;
    }
    .introduccion {
        padding: 0 20px;
    }
    /***/
    .consultaForm {
        width: 90%;
        padding: 60px 10px;
    }
}
@media screen and (max-width:400px){
    .hojas img,.hojas3 img, .hojas2 img,.hojas4 img{
        width: 10em;
    }
}