html, body {background: #fff url(instalacion.jpg);margin: 0;color: #21212c;padding: 0;height: 100%;font-family: "Maven Pro", arial, sans-serif;font-weight: 400;font-size: 20px;height: 100%;text-align: center;}
a {text-decoration: none;color: #f00;border: 0;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;}
img {max-width: 100%;border: 0;margin: 0;padding: 0;}
.clear {clear: both;}
form{ width:340px;background:rgba(128,0,0,0.6);float:right;margin-right:2%; margin-top:20px; font-size:18px}
input, textarea{margin-bottom:20px; width:70%}
.motores{background:#FF0000;color:#fff;font-weight:700;font-size:18px;cursor:pointer;border: 0}
.motores:hover{background:#900;color:#666;}
.xxxx {width: 38%;min-width:430px;height:390px;float: right;margin: 20px 6% 20px 0;border:0}
#cortinas {width:100%;height: 38px;position: fixed;top: 0;left: 0;background: #FFF;line-height: 38px;text-align: left;z-index: 40;border-bottom: 2px solid #EEE;}
.tel {font-weight:700;font-size: 26px;color: #f00;padding-left: 10px;position:fixed;z-index: 80;}
.venta {width: 100%;padding: 20px 0;background: #f00;background-size: cover;color: #fff;font-weight: 700;font-size: 26px;text-align: center;border-bottom: 7px solid #f00;}
.enrollar {width: 31.33%;margin: 0 1%;float: left;}
.direccion {width: 98%;height: 300px;margin-top: 20px;border: 0;}
.metalicas {width: 120px;background-color: #FFF;margin-right:4px;color: #21212c;font-weight: 400;float: right;line-height: 30px;border-top: 4px solid #FFF;padding-bottom: 4px;font-size: 16px;text-align: center;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;}
.metalicas:hover {background-color: #EEE;border-top: 4px solid #F00;color: #F00;box-shadow: none;}
.amedida, .persiana {display: none;font-weight: 700;}
.metal {width: 100%;height: 420px;margin-top: 40px;overflow: hidden;border-bottom: 7px solid #f00;}
@keyframes alarmas {0% {transform: translate(0px, 0px);}22% {transform: translate(0px, 0px);}25% {transform: translate(0, -420px);}47% {transform: translate(0, -420px);}50% {transform: translate(0, -840px);}72% {transform: translate(0, -840px);}75% {transform: translate(0, -1260px);}97% {transform: translate(0, -1260px);}100% {transform: translate(0px, 0px);}}
@-moz-keyframes alarmas {0% {transform: translate(0px, 0px);}22% {transform: translate(0px, 0px);}25% {transform: translate(0, -420px);}47% {transform: translate(0, -420px);}50% {transform: translate(0, -840px);}72% {transform: translate(0, -840px);}75% {transform: translate(0, -1260px);}97% {transform: translate(0, -1260px);}100% {transform: translate(0px, 0px);}}
@-webkit-keyframes alarmas {0% {transform: translate(0px, 0px);}22% {transform: translate(0px, 0px);}25% {transform: translate(0, -420px);}47% {transform: translate(0, -420px);}50% {transform: translate(0, -840px);}72% {transform: translate(0, -840px);}75% {transform: translate(0, -1260px);}97% {transform: translate(0, -1260px);}100% {transform: translate(0px, 0px);}}
.microperforada {width: 100%;height: 1680px;animation: alarmas 11s infinite;-moz-animation: alarmas 11s infinite;-webkit-animation: alarmas 11s infinite;}
.motorde {text-align:center;width: 100%;height: 420px;text-transform: uppercase;}
.cortinaenrollar {background: url(persiana.jpg) center;background-size: cover;}
.persianametal {background: url(cortinas.jpg) center;background-size: cover;}
.cortinametal {background: url(metalicas.jpg) center;background-size: cover;}
.cortinamecanica {background: url(reparacion.jpg) center;background-size: cover;}
#comercial {width: 100%;position: absolute;top: 38px;right: 0;}
.locales {position: absolute;top: 115px;left: 6%;z-index: 30;}
.averiado {background: rgba(0,0,0,0.5);float: right;width: 38%;margin: 20px 6% 20px 0;font-size: 18px;font-weight: 400;color: #fff;}
.reparar {width: 88%;max-width: 440px;margin-bottom: 8px;padding: 6px;font-family: "Maven Pro", arial, sans-serif;font-weight: 400;font-size: 14px;color: #4c4c66;border: 1px solid #4c4c66;border-radius: 3px;-o-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;}
.zonanorte {width: 90%;max-width: 300px;background: #f00;color: #fff;font-weight: 700;box-shadow: 2px 2px 2px #222;border: 0;padding: 8px;font-size: 20px;margin-bottom: 20px;font-family: "Maven Pro", arial, sans-serif;border-radius: 2px;-o-border-radius: 2px;-moz-border-radius: 2px;-webkit-border-radius: 2px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;}
.zonanorte:hover {background: #b00;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;}
.cortinas {width: 100%;min-height: 100%;text-align: center;padding-top: 40px;font-size: 26px;}
.motorautomatizado {min-height: auto !important;}
h1 {font-size: 62px;margin: 16px 0;padding: 0;font-weight: 900;text-transform: uppercase;color: #f00;}
h2 {font-size: 30px;margin: 12px 0;padding: 0;font-weight: 700;}
.reparacion {height: 220px;width: 100%;margin-bottom: 20px;background: url(metalica.png);}
.fabrica {height: 220px;width: 100%;margin-bottom: 20px;background: url(fabrica.png);}
.instalacion {height: 220px;width: 100%;margin-bottom: 20px;background: url(venta.png);}
.automatizacion {height: 220px;width: 100%;margin-bottom: 20px;background: url(automatizar.png);}
.servicio {margin: 20px 12px 0;}
.enviado {background: url(asc.png) top right no-repeat;width: 96%;padding-left: 4%;min-height: 400px;text-align: left;}
.elevadores {width: 82%;max-width: 980px;margin: 0 auto;margin-bottom: 15px;}
.chapa {width: 33.33%;float: left;margin-bottom: 15px;text-align: center;}
.chapa img, .galvanizada {padding-bottom: 12px;background: url(automaticas.png);}
.motorizada {width: 44%;float: left;margin: 22px 3% 0;text-align: center;}
.motorizada p {font-size: 16px;text-align: justify;}
.aluminio {color: #1c1c22;text-align: center;}
.fabricantee{display:block;position:fixed;bottom:20px;left:10px;background:#00be00;width:52px;padding:10px 0 5px;border-radius:50px;box-shadow:0 0 5px #333;z-index:6}
@media only screen and (max-width: 1014px) {
#cortinas {overflow: hidden;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;}
.metalicas {width: 96%;text-align: right;padding-right: 4%;margin-right: 0;background: #eee url(but.gif) center right no-repeat;}
.locales {width:34% !important;}
.persiana {display: block;}
.amedida {display: block;box-shadow: none;}
.enviado {background: none;}
}
@media only screen and (max-width: 840px) {
form{text-align:center; font-size:15px; width:90%;float:none;margin:0 auto}
.metal {height: 300px;}
.motorde {height: 300px;margin-bottom: 120px;}
.locales {top: 60px;left: 50%;margin-left: -210px;}
#comercial {width: 100%;position: static;top: auto;right: auto;}
.locales {width:auto !important;}
.xxxx {width: 100%;min-width:auto;float: none;margin: 20px 0 0;}
.venta{padding-bottom:0;padding-top:40px;border-bottom:0;margin-bottom:-5px}
.averiado {background: none;float: none;width: 100%;margin: 20px auto;}
.enrollar {width: 31.33%;padding-bottom:20px;}
.enrollar img{max-width:64px;}
h1 {font-size: 38px;}
.zonanorte {background: #454545;}
}
@media only screen and (max-width: 600px) {
.reparacion, .fabrica, .instalacion, .automatizacion {height: 150px;background-size: cover;}
.cortinas {font-size: 16px;}
.motorizada {width: 94%;float: none;}
.enrollar {width: 100%;float:none;padding-bottom:20px;}
}
@media only screen and (max-width: 460px) {
html, body {word-break: break-word;margin-top: 110px;}
#cortinas, .metalicas {display: none;}
.locales {position: fixed;top: 0;left: 0;margin: 0 auto;z-index: 700;width: 80% !important;padding: 4px 10%;background: #121212;}
.metal {display: none;}
h1 {font-size: 38px;margin: 16px 0;}
.xxxx{height:500px}
.cortinas {min-height: 0;}
.tel {display: none;}
.direccion {width: 80%;}
}
@media only screen and (max-width: 400px) {
html, body {margin-top: 54px;}
.enrollar {width: 98%;margin: 10px 1%;float: none;}
h1 {font-size: 28px;}
.enrollar img {display: none;}
.servicio {display: none;}
}