@import url('../font/stylesheet.css');

*{ padding: 0; margin: 0; box-sizing: border-box;  }
html,body{ padding:0; margin:0; height:100%; font-family: 'aviano_sansregular'; }
body{ overflow-y: scroll; background:#fff url(bgsucursales.jpg)no-repeat center center;
background-attachment: fixed; background-size: cover; }

@media screen and (min-width:50px){
    html{visibility: hidden; opacity: 0;}
}


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

    html{visibility: visible; opacity: 1;}

    .reveal{display: block; margin:0 auto; padding:0;  opacity: 0; 
    animation:reveal_all forwards ease 1s .4s; }

    @keyframes reveal_all {

        0%{ opacity: 0;  }
        100%{ opacity: 1; }
        
    }

    .topBar{display: block; width: 90%; max-width:370px; height:27px; margin: 10px auto; background: #c0c0c0; }
    .logotipo{ display: block; width:90%; height:auto; margin: 0 auto;  }
    .logotipo img{display: block; margin:auto; width: 70%; max-width:270px; height:auto;  }
    .nuestrassuc{ display: block; padding:0; text-align:center; margin:0 auto; font-size:24px;  }

    .mainWrapp{ display:flex; flex-direction: column; justify-content: space-between; width:90%;
    margin: 5px auto; gap:15px; align-items: stretch;  }

    .cards{ margin:10px auto; border: 2px solid #242424; border-radius:4px; width:90%;
    max-width:300px; height:155px; padding:10px; text-align:center; color: #9c9c9c; position: relative;
    letter-spacing: -1px; overflow:hidden; transition:all ease-in-out .25s; }

    .cards h1{ display: block; color:#000; padding:0; margin:0; font-size:22px; }

    .cards p{ display: block; padding:0; margin:0; font-size:16px; }

    .cards:hover p{ color:#9c9c9c; transition:all ease-in-out .25s; }

    .cards .whatsapp{display: block; width:95%; margin:0 auto; position: absolute; bottom:25px;
    left:0; right:0; letter-spacing: 0; font-size:20px;  }

    .cards .whatsapp a{text-decoration:none;  padding: 5px 7px; border:1px solid transparent;
    border-radius:3px; background: #9b9b9b; color:#fff;  }

    .cards .whatsappicon{display:inline-block; width:30px; height:30px; background: #9b9b9b;
    border-radius: 100%;transform:translateY(8px); margin-right:0; position: relative; color:#fff;  }

    .cards .whatsappicon .icon-whatsapp{display: block; position: absolute; top:4px; left:0; right:-2px;
    margin: 0 auto; font-size:22px; transition:all ease-in-out .25s; }

    .cards:hover .whatsappicon { color: #fff; background:#00bb2d; transition:all ease-in-out .25s; }

    .cards:hover .whatsapp a{ color: #fff; transition:all ease-in-out .25s; 
    border:1px solid rgba(255,255,255,0.15); }

    .social{display: block; width:90%; margin:20px auto; padding:10px 0; text-align: center;
    border-bottom: 2px solid #000; }
    .social .links{ display:inline-block; width:45px; height:45px;position: relative;
    overflow:hidden; margin:0 15px; }
    .social .links a{ display:block; text-decoration:none; color:#000; font-size:35px;
    transition: all ease-in-out .25s;  }
    .social .links .icon-facebook-circled, .icon-instagram{display: block; position: absolute; 
    top:0; left:-6px; margin: 0 auto; }

    .websitelink{ font-size:18px;color:#000;margin:auto; text-align:center;font-weight:bold }
    .websitelink a{ text-decoration:none; color:#000; text-align:center; }

}


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

    .logotipo{ display: block; width:350px; height:auto; margin: 0 auto;  }
    .logotipo img{display: block; margin:auto; width: 70%; max-width:270px; height:auto;  }

    .mainWrapp{ display:flex; flex-direction: column; justify-content: space-between; width:90%;
     max-width:550px; margin: 5px auto; gap:15px; align-items: stretch;  }
    
    .cards{ margin:10px auto; border: 2px solid #242424; border-radius:4px; width:90%;
    max-width:300px; height:155px; padding:10px; text-align:center; color: #9c9c9c; position: relative;
    letter-spacing: -1px; overflow:hidden; transition:all ease-in-out .25s; }

    .social{width:90%; max-width:550px; }
}


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

    .topBar{display: block; width: 370px; height:27px; margin: 10px auto; background: #c0c0c0; }
    .logotipo{ display: block; width:350px; height:auto; margin: 0 auto;  }
    .logotipo img{display: block; margin:auto; width: 70%; max-width:270px; height:auto;  }

    .mainWrapp{ display:flex; flex-direction: row; justify-content: space-between; width:90%;
    max-width:650px; margin: 0 auto; gap:45px; align-items: stretch; }

    .cards{ margin:20px auto; border: 2px solid #242424; border-radius:4px; width:100%;
    max-width:300px; height:160px; padding:10px; text-align:center; color: #9c9c9c; position: relative;
    letter-spacing: -1px; overflow:hidden; transition:all ease-in-out .25s; }

    /* .cards:hover{ background: #9b9b9b; color:#fff; border:2px solid #9b9b9b; 
    transition:all ease-in-out .25s;  } */

    /* .cards:hover h1{ color:#9c9c9c; transition:all ease-in-out .25s; } */
    .cards:hover p{ color:#9c9c9c; transition:all ease-in-out .25s; }
    .cards:hover .whatsapp a{ color: #fff; transition:all ease-in-out .25s; 
    border:1px solid rgba(255,255,255,0.15); }
    
    .cards:hover .whatsappicon { color: #fff; background:#00bb2d; transition:all ease-in-out .25s; }

    .social{width:90%; max-width:500px; }
    .social .links a:hover{ color:#9b9b9b; transition: all ease-in-out .25s;  }
    
    
}