html { margin:0; font-family: "Open Sans", sans-serif; font-size:16px; }
body { overflow-x: hidden !important; animation: fadein 2s; scroll-behavior: smooth; letter-spacing: 1px;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */ }
@keyframes fadein { from { opacity:0; } to { opacity:1;} }
@-moz-keyframes fadein { /* Firefox */ from { opacity:0; } to { opacity:1;} }
@-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1;} }
@-o-keyframes fadein { /* Opera */ from { opacity:0; } to { opacity:1;} }
  button, a, li, h1, h2, h3, h4, img, div, p  { transition:all 200ms ease;  }
  h1, h2, h3, h4, h5, h6 { font-weight:800; }
  a { text-decoration:none; }
  p { font-size:16px; }
  p.max1 { max-width:390px; }
  .sombra {  -webkit-filter: drop-shadow(1px 1px 5px #000);  filter: drop-shadow(1px 1px 5px #000); }
  .ele-c { margin:15px auto; }

  .top-175 { margin-top:175px; }
  .container { position:relative; z-index:10; }
  .logo { position:fixed; top:0px; z-index:15; margin:35px; } 
  .waffle { position:fixed; top:0px; right: 0px; z-index:190; margin:35px; } 

  .header { width:200px !important; height:100vh  !important; position:fixed; top: 0; right: -200px !important; z-index:50; background: rgba(0, 0, 0, .6); transition:all 400ms ease; }
  .waffle:hover + .header { width:300px !important; height:100vh  !important; position:fixed; top: 0; right: 0px !important; z-index:50; background: rgba(0, 0, 0, .6); transition:all 400ms ease; }
  .header:hover { width:300px !important; height:100vh  !important; position:fixed; top: 0; right: 0px !important; z-index:50; background: rgba(0, 0, 0, .6); transition:all 400ms ease; }
  
  ul.men { margin-top:100px; padding:0; width:190px; margin-left:25px; text-align:right; }
  ul.men li { list-style:none; padding:15px 0;   }
  ul.men li a { color:#811c15; text-decoration:none;  text-transform: uppercase; background: rgba(255, 255, 255, 1); padding:15px; display: block; font-size:16px; font-weight:700; }
  ul.men li.active {  background:#811c15; color: #fff; padding:15px; }
  ul.men li a:hover { background:#811c15; color: #fff; padding:15px; }
  #formasa { position:relative;  overflow: hidden; background:#000; color:#fff; }
   #formasa h3 { margin-top:50px; }
  .iso { max-width:390px; display:inline-block; padding-left:70px; }
  .iso_ { display:inline-block; position:relative; }
  .cruz { position:absolute; z-index:1; width:100px; left:40px; top:40px;  }
  #hacemos { background: url(img/lineas.jpg) no-repeat center; background-size:cover; color:#fff !important; padding:80px 0; color:#015cab; }
  #hacemos .col-sm { width:22% !important; margin: 25px; background: rgba(255, 255, 255, .5); padding:3%; color:#000 !important; }
  #hacemos .col-sm h3 { font-size: 24px;}
  #hacemos .col-sm p  { font-size:14px !important; margin:25px 0;  }
  #nosotros { color:#015cab; padding:50px 0 !important; }
  #productos { background: url(img/productos.jpg) no-repeat center; background-size:cover; padding:150px 0; color:#015cab; }
  .somos { position:absolute; width:50%; height:100%; right:55%; top:0px; }
  #contacto a { width:100%;  color:#fff ; background: rgba(0, 0, 0, .7); padding:15px; display:block; width:250px; }
  #contacto a:hover { background:#811c15;   }
  .contacto input { width:100%; margin:5px 0; border:none; padding:10px; }
  .contacto textarea { width:100%; height: 130px; margin:5px 0; border:none; resize: none; padding:10px; }
  input[type=submit] { width:260px; padding:15px; text-align:center; color:#fff; background:#811c15; }
  #contacto { background: url(img/contacto.jpg) no-repeat center; background-size:cover; color:#fff; padding:150px 0; }
  footer { background: url(img/footer.jpg) no-repeat center; background-size:cover; color:#fff; padding:50px 0; }
  footer a { color:#fff; display: inline-block; margin-bottom:15px;  }
   .video { position:absolute; top:-50px !important; opacity:.3; }
   .producto_ { display:inline-block; height:150px; margin:20px; }
   #formasa .video {
      position: absolute; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* Esto asegura que el video cubra todo el contenedor */
    }
  .open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
section { position:relative; min-height:100vh; padding:150px 0; }
video { margin-top:50px; }
.panel { position:absolute; width:50%; height:100%; }
.cliente1 { display:inline-block; vertical-align:middle; height:120px; margin:25px; }
.cliente { display:inline-block; vertical-align:middle; height:80px; margin:25px; }
/**
.btn_ { position:fixed; z-index: 200000000 !important; top:0; right:0; color:#fff; font-weight: 600; padding: 25px  5px; cursor: pointer; opacity: 0; transform: rotate(-90deg); }
.btn_1 { position:fixed; z-index: 200; top:0; right:0; color:#fff; font-weight: 600; padding: 25px  5px; cursor: pointer; opacity: 1; transform: rotate(-90deg); }
**/
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #575756;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #575756;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #575756;
}
:-moz-placeholder { /* Firefox 18- */
  color: #575756;
}
.logo-foo { margin-bottom:50px; }



    @media only screen and (max-width: 490px) {
      .tt-alambre { margin-left:-175px; }
      .producto_ { display:block; margin:25px auto; }
      #formasa .container {  padding:135px 5%; }
      .somos {    position: relative;
    width: 100%;    height: 100%;
    right: 0;    top: 0px; margin-top: 50px; }
    #hacemos .col-sm {
    width: 85% !important;
    margin: 25px;
    background: rgba(255, 255, 255, .5);
    padding: 3%;
    color: #000 !important; }

#contacto a {
    width: 100%;
    color: #fff;
    background: rgba(0, 0, 0, .7);
    padding: 15px;
    display: block;
    width: 250px;
    margin-bottom: 50px;
}

.logo-foo { margin-bottom:50px; width:60%; }

    }