@font-face {
    font-family: tuercasytornillos;
    src: url(../font/tt0144m_.ttf) format("opentype");
}

body {font-family: tuercasytornillos;}

#home {
    position: relative;
    height: 100vh;
    max-height: 100vh;
    width: auto;
    margin: 0 auto;
    overflow: hidden;
    background: url(../images/index/1.png) no-repeat fixed center center #efeff1;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
}

#home .botton_1 {
    width: 100%;
    height: auto;
    position: relative;
    text-align: center;
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
}

.botton_1 .promo {
    width: 400px;
    margin: auto;
}

.promo img {
    width: 100%;
}

.promo2 {
    margin: auto;
    width: 98%;
    height: 86%;
    margin-top: 70px;
    margin-bottom: 8px;
    text-align: center;
}

.promo2 a {
    display: block;
    width: 100%;
    height: auto;
    font-size: 80px;
    text-decoration: none;
    color: white;
    animation-name: example;
    animation-duration: 1.7s;
    animation-iteration-count: infinite;
    position: relative;
    -webkit-animation-name: example;
    -webkit-animation-duration: 1.7s;
    -webkit-animation-iteration-count: infinite;
}

@keyframes example {
    from {top:0px;opacity: 0;}
    to {top:30px;opacity: 1;}
}
/* ************************************************   section-proveedores */
#proveedores {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

#proveedores .provee {
    width: 95%;
    height: 100%;
    text-align: center;
}

.provee .provee_img {
    display: inline-block;
    width: 150px;
    height: 60px;
    margin: 20px;
    
}

.provee_img img {
    width: 100%;
    height: 100%;
}

/* ************************************************   section-articulos */

#articulos {
    width: 100%;
    height: auto;
}

#articulos .arti_indiv {
    width: 90%;
    height: auto;
    margin: 60px auto;
    text-align: center;
    box-shadow: 0px 0px 70px 10px #b2b2b2;
    border-radius: 20px;
}

.arti_indiv .art1 { 
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: url(../images/index/articulos/Logo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    background-attachment: local;
    position: relative;
    border: solid 20px #070050;
    margin: 20px;
}

.arti_indiv .art2 { 
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: url(../images/index/articulos/tornillo.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    background-attachment: local;
    position: relative;
    border: solid 20px #070050;
    margin: 20px;
}

.art2 h1 {
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    color: #ff0000; 
    font-size: 20px;
    background: rgba(255, 255, 255, 0.78);
    padding: 5px 10px 5px 10px;
    border-radius: 10px;
}

.arti_indiv .art3 { 
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: url(../images/index/articulos/tuercas.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    background-attachment: local;
    position: relative;
    border: solid 20px #070050;
    margin: 20px;
}

.art3 h1 {
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    color: #ff0000; 
    font-size: 20px;
    background: rgba(255, 255, 255, 0.78);
    padding: 5px 10px 5px 10px;
    border-radius: 10px;
}

.arti_indiv .art4 { 
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: url(../images/index/articulos/rondanas.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    background-attachment: local;
    position: relative;
    border: solid 20px #070050;
    margin: 20px;
}

.art4 h1 {
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    color: #ff0000; 
    font-size: 20px;
    background: rgba(255, 255, 255, 0.78);
    padding: 5px 10px 5px 10px;
    border-radius: 10px;
}

.arti_indiv .art5 { 
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: url(../images/index/articulos/varillas.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    background-attachment: local;
    position: relative;
    border: solid 20px #070050;
    margin: 20px;
}

.art5 h1 {
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    color: #ff0000; 
    font-size: 20px;
    background: rgba(255, 255, 255, 0.78);
    padding: 5px 10px 5px 10px;
    border-radius: 10px;
}

.arti_indiv .art6 { 
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: url(../images/index/articulos/abrazadera.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    background-attachment: local;
    position: relative;
    border: solid 20px #070050;
    margin: 20px;
}

.art6 h1 {
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    color: #ff0000; 
    font-size: 20px;
    background: rgba(255, 255, 255, 0.78);
    padding: 5px 10px 5px 10px;
    border-radius: 10px;
}

.arti_indiv .art7 { 
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: url(../images/index/articulos/acero.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    background-attachment: local;
    position: relative;
    border: solid 20px #070050;
    margin: 20px;
}

.art7 h1 {
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    color: #ff0000; 
    font-size: 20px;
    background: rgba(255, 255, 255, 0.78);
    padding: 5px 10px 5px 10px;
    border-radius: 10px;
}

.arti_indiv .art8 { 
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: url(../images/index/articulos/Logo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    background-attachment: local;
    position: relative;
    border: solid 20px #070050;
    margin: 20px;
}

.art8 h1 {
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    color: #ff0000; 
    font-size: 20px;
    background: rgba(255, 255, 255, 0.78);
    padding: 5px 10px 5px 10px;
}

.arti_indiv a {
    text-decoration: none;
    color: #ff0000;
}

/* ************************************************   section-promociones */

#promos {
    position: relative;
    height: auto;
    width: auto;
    margin: 0 auto;
    overflow: hidden;
    background: url(../images/index/fondo.jpg) no-repeat fixed center #efeff1;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    text-align: center;
}

#promos .promo1 {
    display: inline-block;
    width: 250px;
    height: 250px;
    margin: 70px 50px 100px 50px;

}

.promo1 img{
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
}

.promo1 a{
    width: 100%;
    font-size: 30px;
    background: rgba(0, 0, 0, 0.31);
    padding: 0px 40px 0px 40px;
    color: red;
}

/* ************************************************   section-footer */

footer {
    width: 100%;
    height: auto;
    background: #070050;
    text-align: center;
}

.redes {
    width: 100%;
    padding: 2px;
    background: white;
}

.redes a{
    text-decoration: none;
    color: #070050;
    font-size: 30px;
}

.redes hr {
    width: 70%;
    margin: auto;
    border: solid 1px #070050;
}

footer .direccion {
    display: inline-block;
    width: 250px;
    height: 250px;
    margin: 20px;
    vertical-align: top;
    border-left: solid 1px white;
    border-right: solid 1px white;
}


footer .productos {
    display: inline-block;
    width: 250px;
    height: 250px;
    margin: 20px;
    vertical-align: top;
    border-left: solid 1px white;
    border-right: solid 1px white;
}

footer .contacto {
    display: inline-block;
    width: 250px;
    height: 250px;
    margin: 20px;1
    vertical-align: top;
    border-left: solid 1px white;
    border-right: solid 1px white;
}

footer h2 {
    margin-top: 10px;
}

h2 a {
    text-decoration: none;
    padding: 5px 30px 5px 30px;
    background: white;
    color: black;
    border-radius: 10px;
}

.direccion p {
    margin: 10px auto;
    width: 80%;
    color: white;
}

.productos p {
    margin: 10px auto;
    width: 80%;
    color: white;
}
.ramas {
    margin-top: 10px;
}

.ramas a{
    text-decoration: none;
    color: white;
}

.info {
    margin-top: 10px;
}

.info p {
    padding: 10px;
    color: white;
}

.info a {
    color: white;
    font-size: 12px;
}

@media (max-width:1024px) {
    #home {
    background: url(../images/index/1_movil.jpg) no-repeat fixed center #efeff1;
    }
    #articulos .arti_indiv {
    width: 95%;
    }
    .arti_indiv .art1 { 
    border: solid 15px #070050;
    margin: 10px;
    }
        .arti_indiv .art2 { 
    border: solid 15px #070050;
    margin: 10px;
    }
        .arti_indiv .art3 { 
    border: solid 15px #070050;
    margin: 10px;
    }
        .arti_indiv .art4 { 
    border: solid 15px #070050;
    margin: 10px;
    }
        .arti_indiv .art5 { 
    border: solid 15px #070050;
    margin: 10px;
    }
        .arti_indiv .art6 { 
    border: solid 15px #070050;
    margin: 10px;
    }
        .arti_indiv .art7 { 
    border: solid 15px #070050;
    margin: 10px;
    }
        .arti_indiv .art8 { 
    border: solid 15px #070050;
    margin: 10px;
    }
    #promos {
    background: url(../images/index/fondo-movil.jpg) no-repeat fixed center #efeff1;
    }
    #promos .promo1 {
    margin: 30px 20px 70px 20px;
    }
    .promo1 a{
    padding: 0px 20px 0px 20px;
    }
}

@media (max-width:500px) {
    #home {
    background: url(../images/index/1_movil.jpg) no-repeat fixed center #efeff1;
    }
    
    .botton_1 .promo {
    width: 300px;
    }

    .promo img {
    width: 100%;
    }
    #promos {
    background: url(../images/index/fondo-movil.jpg) no-repeat fixed center center;
    }
    /* ************************************************   section-footer */

    footer .direccion {
        border-left: solid 0px white;
        border-right: solid 0px white;
        border-top: solid 1px white;
        height: auto;
    }


    footer .productos {
        border-left: solid 0px white;
        border-right: solid 0px white;
        border-top: solid 1px white;
        height: auto;
    }

    footer .contacto {
        border-left: solid 0px white;
        border-right: solid 0px white;
        border-top: solid 1px white;
        height: auto;
    }

    footer h2 {
        margin-top: 10px;
    }
}