.mapa, .mapa iframe{
    width: 520px;
    height: 411px;
}

.mapa{border:solid 1px #999;}

form input[type=text]{
    display: block;
    border:solid 1px #777777;
    width: 85%;
    margin: auto;
    margin-bottom: 15px;
    padding: 6px 2% 9px 2%;
}

form .archivo{
    padding: 6px 2% 9px 2%;
    width: 89%;    
    margin: auto;
}

form .archivo span{padding: 5px 0px; display: block;}

form input[type=submit]{    
    border: 0px;
    width: 95px;
    height: 36px;
    margin-left: 7.5%;
    cursor: pointer;
    padding: 0px 9px 0px 9px;
    color: #FFF;
    
}

form textarea{
    width: 85%;
    margin: auto;
    border:solid 1px #999;
    height: 134px;
    padding: 6px 2% 9px 2%;
    margin: auto;
    display: block;
    margin-bottom: 15px;
}

form{
    width: 520px;
    height: 387px;    
    border:solid 1px #999;
    padding-top: 23px;
}

.contacto2{    
    margin: auto;
}

.contacto2 p{
    margin: 50px 0px;
    text-align: center;
}

.mapa iframe{position: absolute;}


.mapa .fondoNegroTransparente{
    width: 100px;
    color: #FFF;
    position: absolute;
    padding: 15px;
    z-index: 1000;
    margin: 15px;
}

@media screen and (min-width:1170px){
    form{float: right; }
    .mapa{float: left; }
    .contacto2{width: 1120px;}
}

@media screen and (max-width:1169px){
    .mapa, form{
        width: 80%;    
        margin: auto;
    }
    
    .mapa iframe{
        width: 80%;        
    }
    
    .mapa{margin-top: 30px; }
    
    form input[type=text], form textarea{width: 70%;}
    form input[type=submit]{margin-left: 15%;}
}

@media screen and (max-width:400px){
    
    .mapa{
        background: #000;
        height: 320px;
    }
    
    .mapa iframe{height: 250px;}
    
    .mapa .fondoNegroTransparente{
        width: 76%;
        margin: 0px;
        margin-top: 250px;
        padding: 7px 2%;
        height: 50px;
    }
}