/* CONTACTO */

#contacto{}

#contacto input,
#contacto textarea {
    background: #fff;
    width: 100%;
    font-size: 1.6em;
    box-sizing: border-box;
    padding: 10px;
    margin-top: 10px;
    color:#1f1e21;
}

#contacto .boton{
    text-transform:uppercase;
    color:#fff;
    font-size:1.4em;
    font-weight: bold;
    border:1px solid #fff;
    padding:3px 5px;
    letter-spacing: 0.16em;
    margin-top: 10px;
}

#contacto .boton:hover{
    background:#fff;
    color:#1F1E21;
}

#contacto #mapa{
    background:rgba(55,55,55,0.5);
    width:100%;
    height: 270px;
}
#contacto #marcador{
    display:block;
    background-image:url(../images/marcador.svg);
    width:40px;
    height:48px;
}



/* FORM */

#contacto #datos-form{
    position:relative;
}
#contacto #datos-form .fade{
    position:relative;
    overflow:hidden;
    opacity:1;
    
    transition:opacity 300ms ease-out;
    -webkit-transition:opacity 300ms ease-out;
    -moz-transition:opacity 300ms ease-out;
    -o-transition:opacity 300ms ease-out;
}
#contacto #datos-form .fade:before{
    content:"";
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
#contacto #datos-form.sending .fade:before,
#contacto #datos-form.sent .fade:before{
    display:block;
}
#contacto #datos-form.sending .fade{
    opacity:.7;
}
#contacto #datos-form.sent .fade{
    opacity:.04;
}

#contacto label.error{
    display:block;
    font-size:1.4em;
    color:#D07676;
    margin-top: 5px;
    padding-bottom: 5px;
}


#response{
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
#response:before{
    content:"";
    display:inline-block;
    vertical-align: middle;
    height:100%;
}
#response > *{
    display:inline-block;
    vertical-align: middle;
    width:100%;
    font-size:2em;
    margin:-25px 0 0;
    color:#fff;
    
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}


/* ********************** de Mobile a TABLET ********************** */

@media only screen and (min-width: 768px) {


    #contacto #mapa{
        height: 450px;
    }


}

/* ********************** de Tablet a DESKTOP ********************** */

@media only screen and (min-width: 980px) {

    #contacto .content {
        left: inherit;
        right: 100px;
    }

    #contacto #mapa{
        width: 100%;
        position: fixed !important;
        bottom: 0;
        top: 0;
        height: auto;
    }

}