html,body{margin:0;padding:0;font-family: 'Fira Sans', Arial, sans-serif;background:#F2F2F2 url(cielo.jpg) center fixed;background-size:cover;color:#142252;text-align: center;font-size:16px;}
a:link,a:visited{text-decoration:none;color:#5C76D6;transition:all 0.3s ease;cursor:pointer;}
a:hover{color:inherit;}
.clear{clear:both;}
img{max-width: 100%;}
.wsp{position:fixed;bottom:10px;right:10px;background:#00be00 url(wp.png) 14px 14px no-repeat;width:264px;height:46px;overflow:hidden;z-index:6;transition:all 0.3s ease;text-align:center;line-height: 34px;font-weight:700;color:#EFF1FB;padding:14px 14px 0 60px;text-transform:uppercase;border-radius:3px;}
.wsp:hover{filter:brightness(70%);}
.tel{width:100%;position:fixed;top:0;left:0;z-index:4;font-size:26px;font-weight:700;background:#213682;color:#F2F2F2;padding:2px 0;}
.tel div{margin:0 auto;max-width:1220px;}

.cristales{width:90%;margin:0 auto 20px;background:#F2F2F2;border-radius:4px;overflow: hidden;}


/* Animacion */
.tonelada{width:100%;overflow: hidden;height:420px;background:url(cocina.jpg) center; background-size: cover;}
@keyframes metales {0% {margin-left: 0;}23% {margin-left: 0;}25% {margin-left: -100%;}48% {margin-left: -100%;}50% {margin-left: -200%;}73% {margin-left: -200%;}75% {margin-left: -300%;}98% {margin-left: -300%;}100% {margin-left: 0;}}
.kilo{width:400%;height:420px;display:table; animation: metales 20s linear infinite;}
.compro{width:25%;display:table-cell;vertical-align:middle;background-size:cover !important;}
.compro div{width: fit-content;padding:6px 10px;margin-left:10px;background:#213682;color:#F2F2F2;font-weight:800;font-size:32px;text-transform:uppercase;}
.aluminio{background:url(vidrios/oficinas.jpg) center no-repeat;}
.bronce{background:url(vidrios/ventanas.jpg) center no-repeat;}
.cobre{background:url(vidrios/mamparas.jpg) center no-repeat;}
.hierro{background:url(vidrios/venta.jpg) center no-repeat;}


/* Info */
img[src="logo.png"]{padding-top:40px;max-width:90%;}
h1{margin:20px auto 16px;}
h2{margin:20px auto 12px;}
.espejos{margin:0 auto 12px;}
.firma{font-size:14px;}
.pie1 {width: 100%;height: 125px;background: url(buil.png) repeat-x center;}
.pie2{width: 100%;background: url(bk.png);padding-top:2px;color:#F2F2F2;}
.foto{width:25%;float:left;padding-bottom:10px;}
.foto img{border:4px solid #313339;max-width:90%;transition:0.2s ease;}
.foto img:hover{border:4px solid #2943A3;}
.ventanas{width: 25%;float: left;padding-bottom: 14px;color:#213682;font-weight: 800;}
.ventanas div{width: 90%;margin: 0 auto 10px;background:#E0E0E0;padding: 2px 0;}
img[src="logo2.png"]{max-width: 90%;}

@media only screen and (max-width: 780px) {
.tonelada,.kilo{height:320px;}
.compro div{font-size:26px;}
.ventanas,.foto{width:50%;}
.wsp{width:46px;padding:8px;background-position: center;}
.wsp span{display: none;}
}

@media only screen and (max-width: 450px) {
html,body{font-size:14px;}
.tonelada,.kilo{height:240px;}
.compro div{font-size:20px;}
.ventanas,.foto{width:100%;float:none;}
.foto img{max-width:75%;}
}
@media only screen and (max-width: 370px) {
.tonelada,.kilo{height:200px;}
.compro div{font-size:16px;}
}