html, body { width: 100%; height: auto; margin: 0; padding: 0;   background: #000; color: #fff; font-size: 17px; font-family: 'Exo', sans-serif !important; font-weight: 400; letter-spacing: 1px;  scroll-behavior: smooth; }
body {
overflow-x: hidden !important;
 animation: fadein 2s;
    -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;} }
a { /* border-radius: 10px; box-shadow: 1px 1px 10px rgba(0, 0, 0, .7);*/ text-decoration: none; }
a:hover { text-decoration: none; }
b { font-weight: 800;  }
header { width: 100%; height: 100px; background: rgba(0, 0, 0, .8); position: fixed; z-index: 100; }
section {  width: 100%; height: auto; }
h1, h2, h3, a, blockquote, body, label, input, figure, .modal_, .tabcontent { transition:all 200ms ease;  }
h1, h2, h3, h4, h5 { font-family: 'Exo'; font-weight:700;  }
footer { background: url("img/footer.jpg") no-repeat center; background-size: cover; color: #fff; clear: both;  color: #fff; padding: 60px 8% !important; margin-top: 50px;  }
footer a { color: #fff; display: block; margin-bottom: 20px; }
footer a span { color: #7a7a7a; }
footer a:hover { color: #7a7a7a; background: none !important;  }
footer  ul.foo { padding: 0; }
footer  ul.foo li { list-style: none; margin-bottom: 1px; }
footer  ul.foo li a { text-transform: capitalize !important; }
footer hr { width: 75px; height: 2px !important; background: #439208; opacity: 1; margin: 0px auto 30px auto; }
.active { color: #7a7a7a; }
.rs { width: 100%; height: auto; margin-bottom: 10px; }
.rs a { display: inline-block; vertical-align: top; margin:0 1px ;  }
.rs a:hover { background: none !important;  }
a.logo { position: absolute; margin-left: 20px; top: 10px;  }
a.logo: hover; { background: none !important; }
a.logo img {width: 150px; }

.w3-dropdown-click:hover {
    background-color: rgba(0, 0, 0, .0) !important;
    color: #000;
}
.w3-button:hover  { background-color: rgba(0, 0, 0, .0) !important; }
.w3-dropdown-hover:hover > .w3-button:first-child, .w3-dropdown-click:hover > .w3-button:first-child {
    background-color:rgba(0, 0, 0, .0) !important;
    color: #000;
}

.lista-ser { display: block; width: 100%; height: auto; }
.tab-pane p { font-size: 14px; color: #fff; padding: 15px 0; }
.tab-content { margin-top: -50px; }
#metal { position:relative; z-index: 101; }
#metal .carousel {  background: #EEE; transition: none !important; }
#metal .carousel-cell {  width: 100%;  height: 100vh;  background: #8C8; transition: none !important;  }
#metal .slide1 {  background: url("img/slide.jpg") no-repeat center; background-size: cover; }
#metal .slide2 {  background: url("img/fondo-index.jpg") no-repeat center; background-size: cover; }

#id-section { width: 100%; min-height: 100vh !important; padding: 15% 3% 5% 3%; font-size: 8vw; margin-bottom: 90px;  } 
#id-section h3 { font-size: 2.2vw; background: rgba(0, 0, 0, 0); background-size: 100%; padding: 0 15px ; width: 70%; }
#id-section h2 { font-size: 1.8vw; background: rgba(0, 0, 0, 0); background-size: 100%; padding: 0 15px ; width: 70%; }

.carousel-cell { width: 100%; height: 100vh !important; padding: 15% 20% 20% 10%; font-size: 8vw;  } 
.carousel-cell h2 { font-size: 2.9vw; background: rgba(0, 0, 0, 0); background-size: 100%; padding: 0 15px ; width: 100%; font-weight:400; margin:35px 0 5px 0; }
.carousel-cell a { background: #143f88; padding: 20px 20px 0 0 0; width: 200px; font-size: 20px !important; }
.carousel-cell p { font-size:18px; max-width:450px; display:inline-block; }


.lav { background: url("img/lav.jpg") no-repeat center; background-size: cover; }
.man { background: url("img/man.jpg") no-repeat center; background-size: cover; }
.eya { background: url("img/eya.jpg") no-repeat center; background-size: cover; }
.did { background: url("img/did.jpg") no-repeat center !important; background-size: cover; }
.tie { background: url("img/tie.jpg") no-repeat center; background-size: cover; }
.cot { background: url("img/cot.jpg") no-repeat center; background-size: cover; }
.contacto { background: url("img/contacto.jpg") no-repeat center; background-size: cover; height:350px !important; margin-top:100px; color: #fff; padding:5vw 3%; }
.contacto h2 { font-size:7.5vh; }

#empresa {  background: url("img/empresa.jpg") no-repeat center; background-size: cover; width: 100%; height: auto; padding: 100px 0 190px 0;  }
#empresa h2 { }
#empresa h2 > span { display: block; font-size: 58px; color:#7f7f7f; margin-bottom: 50px; }
.clear { clear: both; }

#valores {  background: url("img/valores.jpg") no-repeat center; background-size: cover; width: 100%; min-height: 80vh; padding: 90px 10%;  }
#valores h2 { font-size:4.6vw ; color: #fff; position: relative; margin-bottom: 65px;  }
#valores .engrane { position: absolute;  margin-left: -80px;  }
#valores .col-sm-5 {  margin-right: 55px; }
#valores p  { max-width: 340px; margin-bottom: 85px; }


#clientes {  background: #fff; background-size: 100%; width: 100%; height: auto; padding: 50px;  }
#clientes h2 { font-size:5.6vw ; color: #000;  }
#clientes img {  margin: 25px; width: 15%; border-radius:5px;  }
.mm { width: 40px; height: 40px; position: absolute; right: 240px; top: 20px; }
.id { width: 40px; height: 40px; position: absolute; right: 80px; top: 15px; display:none; }

.servicio { width: 280px; min-height: 460px; padding: 10px; display: inline-block; vertical-align: top; margin: 10px; box-sizing: border-box; border: #fff solid 1px; position: relative;   }
.servicio h4 { font-size: 18px; text-transform: uppercase; text-align: center ; min-height: 45px; padding-right: 0px; margin: 10px 0; }
.ser { position: relative; width: 100%; min-height: 310px; border-radius: 30px; display:none; }
.ser figure { background: rgba(20, 63, 136, .7); width: 100%; height: 100%; color: #fff; text-align: left; position: absolute; top: 0 !important; left: 0; display: none; padding: 8px; box-sizing: border-box; }
.ser:hover figure { background: rgba(20, 63, 136, .7); width: 100%; height: 101%; color: #fff; text-align: left; position: absolute; top: -18px !important; left: -40px; display: none; padding: 8px; box-sizing: border-box;  display: inline; }


.carousel-nav {
  width: 100%;
  margin-left: 10px;
  max-height: 300px;
  overflow-y: scroll;
  font-size: 14px !important;
}

.carousel-nav .carousel-cell {
  height: 80px;
  width: 100px;
  margin: 0 0 5px 0;
  cursor: pointer;
}

.carousel-nav .carousel-cell:before {
  font-size: 50px;
  line-height: 80px;
}

.carousel-nav .carousel-cell.is-nav-selected {
  background: #ED2;
}
.bttn { font-size: 14px; display: block; }


.li1 {  background: url("img/li1.jpg") no-repeat center; background-size: cover; }
.li2 {  background: url("img/li2.jpg") no-repeat center; background-size: cover; }
.li3 {  background: url("img/li3.jpg") no-repeat center; background-size: cover; }
.li4 {  background: url("img/li4.jpg") no-repeat center; background-size: cover; }
.li5 {  background: url("img/li5.jpg") no-repeat center; background-size: cover; }
.li6 {  background: url("img/li6.jpg") no-repeat center; background-size: cover; }
.li7 {  background: url("img/li7.jpg") no-repeat center; background-size: cover; }
.li8 {  background: url("img/li8.jpg") no-repeat center; background-size: cover; }
.li9 {  background: url("img/li9.jpg") no-repeat center; background-size: cover; }

.man1 {  background: url("img/man1.jpg") no-repeat center; background-size: cover; }
.man2 {  background: url("img/man2.jpg") no-repeat center; background-size: cover; }
.man3 {  background: url("img/man3.jpg") no-repeat center; background-size: cover; }
.man4 {  background: url("img/man4.jpg") no-repeat center; background-size: cover; }
.man5 {  background: url("img/man5.jpg") no-repeat center; background-size: cover; }
.man6 {  background: url("img/man6.jpg") no-repeat center; background-size: cover; }
.man7 {  background: url("img/man7.jpg") no-repeat center; background-size: cover; }
.man8 {  background: url("img/man8.jpg") no-repeat center; background-size: cover; }
.man9 {  background: url("img/man9.jpg") no-repeat center; background-size: cover; }

.eya1 {  background: url("img/eya1.jpg") no-repeat center; background-size: cover; }
.eya2 {  background: url("img/eya2.jpg") no-repeat center; background-size: cover; }
.eya3 {  background: url("img/eya3.jpg") no-repeat center; background-size: cover; }
.eya4 {  background: url("img/eya4.jpg") no-repeat center; background-size: cover; }

.did1 {  background: url("img/did1.jpg") no-repeat center; background-size: cover; }
.did2 {  background: url("img/did2.jpg") no-repeat center; background-size: cover; }
.did3 {  background: url("img/did3.jpg") no-repeat center; background-size: cover; }
.did4 {  background: url("img/did4.jpg") no-repeat center; background-size: cover; }

.tie1 {  background: url("img/tie1.jpg") no-repeat center; background-size: cover; }
.tie2 {  background: url("img/tie2.jpg") no-repeat center; background-size: cover; }
.tie3 {  background: url("img/tie3.jpg") no-repeat center; background-size: cover; }
.tie4 {  background: url("img/tie4.jpg") no-repeat center; background-size: cover; }

.cot1 {  background: url("img/cot1.jpg") no-repeat center; background-size: cover; }
.cot2 {  background: url("img/cot2.jpg") no-repeat center; background-size: cover; }


#galeria { padding:75px 0; }
a.gall img  { width:100% !important; margin:20px 0px; display: inline-block;  }

#cata { padding:90px 0; }
#cata a { display:inline-block; }
#cata a img.gall { width:230px !important;  }

.nav-tabs .nav-link:hover {
    border: 1px solid transparent;
    border-radius: 30px !important; font-weight: 700;
    color: #f60;
    color: #fff;
   /* background: rgba(0, 0, 0, .7);*/
}


.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: 30px !important; font-weight: 500 !important;
    pointer-events: none;
    font-size: 16px !important;
    color: #fff !important;
}



.nav-link.active {
    color: #f60 ;
    color: #fff !Important;
    background: none !important; ;
     background-color: none !important;
    border-color: #dee2e6 #dee2e6 #fff; font-weight: 800 !important;
    border: 1px solid transparent !important;
}

.nav-link.active {
    border: 1px solid transparent;
    border-radius: 30px !important; font-weight: 500 !important;
    pointer-events: none;
    font-size: 16px !important;
}

.nav-tabs {
    border-bottom: none !important;
}

form { margin: 45px 0 145px 0; }
form  input { background: none; width: 100%; border: none; border-bottom: #c8c8c8 solid 2px; font-size: 20px; margin-bottom: 19px; }

input[type=submit] { background: #fff; padding: 10px 20px; color: #000; width: 150px;  font-size: 20px; border: none; font-weight: bold;  }
input[type=submit]:hover { background: #143f88; color: #fff;   }

* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* Style the tab */
.tab {
  display: inline-block;
  border: 0px solid #ccc;
  background-color: none;
  width: 100%;
  height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: rgba(0, 0, 0, .0);
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
  font-weight: bold;
  color: #fff ;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color:none ;
  padding-left: 20px;
}

/* Create an active/current "tab button" class */
.tab button.active {
  color:#143f88 ; padding-left: 20px; background: rgba(255, 255, 255, .9); 
}

/* Style the tab content */
.tabcontent {
  display: inline-block;
  padding: 0px 12px;
  border: 0px solid #ccc;
  width: 100%;
  border-left: none;
  height: auto;
}

.pon { display: none !important; }
.quit { display: inline !important; }

@media only screen and (max-width: 770px) {
#empresa { padding-bottom: 190px; }

.quit { display: none !important; }
.pon { display: inline !important; }
.tab button {
  display: block;
  background-color: rgba(0, 0, 0, .0);
  color: black;
  padding: 12px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
  font-weight: bold;
  color: #fff ;
}

#clientes img {  margin: 25px; width: 33.3%; }

}

@media only screen and (max-width: 510px) {

.mm { width: 40px; height: 40px; position: absolute; right: 200px; top: 12px; }

.carousel { height: 450px;  }
.carousel-cell {  width: 100%;  height: 450px !important;   transition: none !important;  }
.slide1 {  background: url("img/slide.jpg") no-repeat center; background-size: cover; }
.slide2 {  background: url("img/slide2.jpg") no-repeat center; background-size: cover; }

#id-section { width: 100%; height: auto !important; padding: 170px 5% 10% 5%; font-size: 8vw; margin-bottom: 90px;  } 
#id-section h3 { font-size: 7.5vw; background-size: 100%; padding: 0 15px  ; margin-bottom: 90px;  width: 90%; }

.carousel-cell { width: 100%; height:  450px  !important; padding: 25% 20% 20% 10%; font-size: 8vw;  } 
.carousel-cell h3 { font-size: 4.5vw; background: rgba(0, 0, 0, .7); background-size: 100%; padding: 0 15px ; width: 100%; }
.carousel-cell a { background: #143f88; padding: 20px 20px 0 0 0; width: 200px; font-size: 20px !important; }

a.logo { position: absolute; margin-left: 0px; top: 20px;  }
a.logo: hover; { background: none !important; }
a.logo img {width: 90px; }

#clientes img {  margin: 25px; width: 95%; }
}