* {
    margin: 0;
    padding:0;
}

body {
    font-family:'Roboto', sans-serif;
    font-size:100%;
}

.contenedor {
    position:relative;
    width:100%;
    height:100%;
    max-width:1100px;
    margin: 0 auto;
    background:#fff;
}

a, a:visited {
    text-decoration:none;
    color:#fff;
}

p {
    text-align:justify;
}

.titulos {
    float:left;
    text-align:left;
    width:100%;
    height:auto;
    padding:20px;
    box-sizing:border-box;
    color:#464646;
    font-size:2em;
    font-weight:bold;
    border-bottom:1px solid #a1a1a1;
}

.txt_nosotros {
    width:100%;
    height:auto;
    padding:20px;
    box-sizing:border-box;
    color:#808080;
    float:left;
}

.secciones {
    float:left;
    padding:10px 20px;
    box-sizing:border-box;
    height: auto;
    margin: 0 auto;
    width: 100%;
    text-align:center;
}

.contenedor_tarjeta {
    width:100%;
    height:auto;
    margin: 0 auto;
    color:#fff;
}

.tarjeta_servicio_uno {
    float:left;
    width:33%;
    height:auto;
    background:#ff8080;
    padding:15px 20px;
    box-sizing:border-box;
    text-align:left;
    text-align:justify;
}

.tarjeta_servicio_dos {
    float:left;
    width:33%;
    height:auto;
    background:#ff0000;
    padding:15px 20px;
    box-sizing:border-box;
    text-align:left;
    text-align:justify;
}

.tarjeta_servicio_tres {
    float:left;
    width:33%;
    height:auto;
    background:#ff8080;
    padding:15px 20px;
    box-sizing:border-box;
    text-align:left;
    text-align:justify;
}

.btn {
    margin-top:20px;
    float:right;
    width:100px;
    height:auto;
    text-align:center;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    font-family: Arial;
    color: #fff;
    font-size: 20px;
    background: #3498db;
    padding: 10px;
    text-decoration: none;
    }

.btn:hover {
    background: #00619e;
    text-decoration: none;
}

.tarjeta_otros_uno {
    float: left;
    width: 33%;
    height: auto;
    color:#808080;
    padding: 15px 20px;
    box-sizing: border-box;
    text-align: center;
}

.tarjeta_otros_dos {
    float:left;
    width:33%;
    height:auto;
    color:#808080;
    padding:15px 20px;
    box-sizing:border-box;
    text-align: center;
}

.tarjeta_otros_tres {
    float:left;
    width:33%;
    height:auto;
    color:#808080;
    padding:15px 20px;
    box-sizing:border-box;
    text-align: center;
}

.btn_signo {
    margin-top:20px;
    float:right;
    width:20px;
    height:20px;
    text-align:center;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    background: #3498db;
    padding: 10px;
    text-decoration: none;
    }

.btn_signo:hover {
    background: #00619e;
    text-decoration: none;
}

.banner_medio {
    float:left;
     /* Ubicación de la imagen */
    background-image: url(../img/4.jpg);

    /* Nos aseguramos que la imagen de fondo este centrada vertical y
    horizontalmente en todo momento */
    background-position: center center;

    /* La imagen de fondo no se repite */
    background-repeat: no-repeat;

    /* La imagen de fondo está fija en el viewport, de modo que no se mueva cuando
        la altura del contenido supere la altura de la imagen. */
    /*background-attachment: fixed;*/

    /* La imagen de fondo se reescala cuando se cambia el ancho de ventana
        del navegador */
    background-size: cover;

    /* Fijamos un color de fondo para que se muestre mientras se está
    cargando la imagen de fondo o si hay problemas para cargarla  */
    background-color: #464646;
    width:100%;
    height:400px;
}

.tarjeta_imagenes {
    float:left;
    width:33%;
    height:auto;
    color:#808080;
    padding:15px 20px;
    box-sizing:border-box;
    text-align: center;
}

.contenedor_img_uno {
    /* Ubicación de la imagen */
    background-image: url(../img/5.jpg);

    /* Nos aseguramos que la imagen de fondo este centrada vertical y
    horizontalmente en todo momento */
    background-position: center center;

    /* La imagen de fondo no se repite */
    background-repeat: no-repeat;

    /* La imagen de fondo está fija en el viewport, de modo que no se mueva cuando
        la altura del contenido supere la altura de la imagen. */
    /*background-attachment: fixed;*/

    /* La imagen de fondo se reescala cuando se cambia el ancho de ventana
        del navegador */
    background-size: cover;

    /* Fijamos un color de fondo para que se muestre mientras se está
    cargando la imagen de fondo o si hay problemas para cargarla  */
    background-color: #464646;
    width:100%;
    height:200px
}

.contenedor_img_dos {
    /* Ubicación de la imagen */
    background-image: url(../img/6.jpg);

    /* Nos aseguramos que la imagen de fondo este centrada vertical y
    horizontalmente en todo momento */
    background-position: center center;

    /* La imagen de fondo no se repite */
    background-repeat: no-repeat;

    /* La imagen de fondo está fija en el viewport, de modo que no se mueva cuando
        la altura del contenido supere la altura de la imagen. */
    /*background-attachment: fixed;*/

    /* La imagen de fondo se reescala cuando se cambia el ancho de ventana
        del navegador */
    background-size: cover;

    /* Fijamos un color de fondo para que se muestre mientras se está
    cargando la imagen de fondo o si hay problemas para cargarla  */
    background-color: #464646;
    width:100%;
    height:200px
}

.contenedor_img_tres {
    /* Ubicación de la imagen */
    background-image: url(../img/7.jpg);

    /* Nos aseguramos que la imagen de fondo este centrada vertical y
    horizontalmente en todo momento */
    background-position: center center;

    /* La imagen de fondo no se repite */
    background-repeat: no-repeat;

    /* La imagen de fondo está fija en el viewport, de modo que no se mueva cuando
        la altura del contenido supere la altura de la imagen. */
    /*background-attachment: fixed;*/

    /* La imagen de fondo se reescala cuando se cambia el ancho de ventana
        del navegador */
    background-size: cover;

    /* Fijamos un color de fondo para que se muestre mientras se está
    cargando la imagen de fondo o si hay problemas para cargarla  */
    background-color: #464646;
    width:100%;
    height:200px
}

.contenedor_descrip {
    text-align:justify;
    width:100%;
    height:auto;
    background:#cbcbcb;
    color:#464646;
    padding:10px 20px 15px 20px;
    box-sizing:border-box;
}

footer {
    float:left;
    width:100%;
    height:auto;
    padding:10px;
    box-sizing:border-box;
    background:#000;
    color:#fff;
}

    footer .logo {
        float:right;
        width:20%;
        height:auto;
        text-align:left;
    }

        footer .logo img {
            width:100%;
            height:auto;
        }

.contacto {
    float:left;
    width:80%;
    height:auto;
    padding:20px 10px;
    box-sizing:border-box;
}

.ubicacion {
    float:right;
    width:100%;
    height:auto;
    padding:10px;
    box-sizing:border-box;
    color:#808080;
}

@media screen and (max-width: 639px) {

    .tarjeta_servicio_uno {
        width:100%;
        margin-bottom:10px;
    }

    .tarjeta_servicio_dos {
        width:100%;
        margin-bottom:10px;
    }

    .tarjeta_servicio_tres {
        width:100%;
        margin-bottom:10px;
    }

    .tarjeta_otros_uno {
        width:100%;
        padding: 10px 10px;
    }

    .tarjeta_otros_dos {
        width:100%;
        padding: 10px 10px;
    }

    .tarjeta_otros_tres {
        width:100%;
        padding: 10px 10px;
    }

    .banner_medio {
        width: 100%;
        height: 200px;
    }

    .ubicacion {
        padding:10px 0px;
    }

    .ubicacion_mapa {
        height:250px
    }

     footer .logo {
        width:100%;
        height:auto;
        text-align:center;
    }

        footer .logo img {
            width:40%;
            height:auto;
        }

    .contacto {
        width:100%;
        height:auto;
        text-align:center;
    }

}