html, body {  max-width:1280px; height:100%; color:white;  }

  header { background: rgba(255, 255, 255, 0.9); width: 100%; height:50px; position: fixed; z-index: 100; margin-top: -50px;  }
  a { text-decoration: none; color: white; }
  a:hover { text-decoration: none; color: white; }

  h1, h2, h3, h4, h5 { font-family: 'downlinkregular'; font-size: 38px;}
  p { font-size: 12px; }


  section { width:100%; height:100%; position: relative;  background:none;  }
  footer { width:100%; height:390px; background:url(../imagenes/footer.jpg) no-repeat center center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; padding-top: 20px;   }

  ul { width: 100%; height: 50px; text-align: center; margin: 0 auto;  padding-top: 15px;   }
  ul li {  list-style: none; height: 50px; width: auto; padding: 0 15px; float: left; }
  ul li a { color:#000; width: auto !important; height: 50px; vertical-align: middle;  }
  ul li a:hover { color:red; text-decoration: none; }

  ul.idioma { float: right; width: auto; position: absolute; top: 0; right: 5%; padding: 0; }
  ul.idioma li { float: right; width: auto; padding: 15px 5px 5px 5px; font-size: 12px; cursor: pointer; }

blockquote {  border: none; padding: 0; padding-top:10px ; display: block; }

video {  
   width:100%; 
   max-width:auto; 
   height:auto; 
}

.embed-container {
    position: relative;
    height: 750px;
    overflow-y: hidden;
}
.16by9 {
    padding-bottom: 56.25%;
}
.4by3 {
    padding-bottom: 50%;
}
.embed-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}

/* INDEX */


#start { width: 100%; height: 850px; margin-top: 50px;   background:white url(../imagenes/inicio1.jpg) no-repeat center; 
}

.in-2 {  background:url(../imagenes/inicio2.jpg) no-repeat center center !important; 
}

.in-3 { background:url(../imagenes/inicio.jpg) no-repeat center center !important;  
}


.pleca1 { width: 100%; height: 500px; background:url(../imagenes/pleca2.png) no-repeat center center; background-size: 100%; margin: -200px 0 -50px 0; z-index: 99999999999999; }
.pleca2 { width: 100%; height: 260px; background:url(../imagenes/pleca3.png) no-repeat center center; background-size: 100%; margin: -200px 0 -10px 0; z-index: 99999999999999; }
.pleca3 { width: 100%; height: 300px; background:url(../imagenes/pleca4.png) no-repeat center center; background-size: 100%; margin: -60px 0 -50px 0; z-index: 99999999999999; }

.pleca-cliente { width: 100%; height: 600px; background:url(../imagenes/pleca_clientes.png) no-repeat center center; background-size: 100%; margin: 50px 0 -50px 0; z-index: 99999999999999; }


#quienes_somos { width: 100%; min-height: 700px; background:#ea2227 url(../imagenes/nosotros.jpg) no-repeat top center; background-size: 100%;  }


.ajuste { width: 100%; height: 210px;}


#servicios { background:#323130; width: auto; padding-bottom: 50px; min-height: 650px; text-align: center; }
#servicios h2 { padding-top:100px;  }
.servicios { max-width: 960px; height: auto; margin: 0 auto; }

.submenu { width: auto; height: auto; transition:all 400ms ease; cursor: pointer; display: inline-block; font-family: 'downlinkregular'; font-weight: normal; background:#565251; font-size: 1.8em; padding: 5px 10px; margin:5px;  }
.submenu:hover { background:#ea2127; }

.slide { width: 100%; min-height: 650px; background: white; margin-bottom: -5px; margin-top: -50px; }
.submenu-z { width: 95%; height: 75px; font-size: 17px; vertical-align: middle; margin-bottom: 9px; line-height: 18px; color:white !important;}
.submenu-a { width: 50%; height: 75px; font-size: 17px; vertical-align: middle; margin-bottom: 9px; line-height: 18px; color:white !important; }
.submenu-b { width: 43.5%; height: 75px; font-size: 17px; vertical-align: middle; margin-bottom: 9px;  line-height: 18px; color:white !important; }

.clientes { width: 100%; min-height: 650px; background: white; margin-bottom: 0px; text-align: center; padding: 100px 14% ; text-align: center; color: black; }
.clientes h2 { font-family: 'downlinkbold'; margin-bottom: 25px;}
.clientes img { float: left; margin-right: 5px;}

.button-row { margin:0 auto;
  text-align: center; background:red; max-width:920px; height: auto; padding-left: 35px;
}


#contacto { width: 100%; height: 650px; margin-top: -50px; background:url(../imagenes/contacto.jpg) no-repeat center center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#contacto h2 { text-align: center; margin: 75px auto 50px auto; z-index: 99; 
}

.enviar { background: white; color: red; text-align: left; font-family: 'downlinkbold'; font-size: 14px;}

input { border: white solid 1px; background: none; color: white; width: 100%; height: 35px; padding: 5px; margin:0 0 10px 0; }
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #fff;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #fff;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #fff;
}

span { font-family: arial, verdana, georgia;}

button.flickity-prev-next-button.next .arrow { fill: #ea2227; }
button.flickity-prev-next-button.previous .arrow { fill: #ea2227; }

* { box-sizing: border-box; }

.base {width: 100%; height: 170px; background: url(../imagenes/pleca-s.png) center bottom no-repeat; 
       position: absolute; bottom: 0; background-size: 110%; padding-left: 50px;}


.col-info {  width: 295px; height: auto; float: left; color: white; font-size:13px; margin-right: 10px; text-align: left; font-family: arial; }


#slide .carousel {
  background: #fff;
  position: relative;
  width: 100%;
}

#slide .carousel-cell {
  position: relative;
  width: 100%;
  height: 670px;
   color:black;
  padding: 0;
  margin: 0 2px ;
}

#slide .carousel-cell h3 {
  text-align: left; color:white; line-height: 35px; margin-top: -150px; 
  font-size: 30px; width: 75%; padding-right: 20%; margin-bottom: 20px; padding-bottom: 0px; float: left;  
}

#slide .carousel-cell span {
   font-size:25px; 
}

#slide .carousel-cell b {
   color:#d50a0a;
}

#slide .carousel-cell .title {
   color:#ea2227; font-weight: 700; margin-top: 20px; text-transform: uppercase; font-size: 20px; line-height: 22px;  font-family: 'downlinkregular'; 
}


/* cell number 
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}*/


#inicio .carousel {
  background: #FAFAFA;
  position: relative;
}

#inicio .carousel-cell {
  width: 100%;
  height: 950px;
  margin-right: 0px;
  background: #8C8;
  border-radius: 0px;
}


#inicio .static-banner {
  position: absolute;
  z-index: 1;
  padding: 0px;
  color: white;
  pointer-events: none;
}

#inicio .static-banner1 {
  left: 0px;
  top: 15%;
}

.static-banner2 {
  right: 10px;
  bottom: 10px;
}

.comodin {  margin-left: 35%; margin-top: 20px}


/* PIEZAS */

#piezas {
position: relative;
}
.carousel-main { padding-top: 75px; }

#piezas .carousel {
  background:#ececec; margin-top: 25px;
}

#piezas .carousel-cell {
  width: 66%;
  height: 500px;
  margin-right: 3px;
  background:#ececec;
}

#piezas  .carousel-nav  {
  height: 80px;
  width: 100%;
  background: white !important;
  position: absolute;
  z-index: 999999999999999;
  top: -25px;
  right: 0;
}

#piezas  .carousel-nav .carousel-cell {
  height: 80px;
  width: auto;
  background: white;
  text-align: center;
  margin: -2px;
  color:rgba(0,0,0,0.4);
}

#piezas  .carousel-nav .carousel-cell img {
  margin-left: 10px; transition:all 200ms ease; width: 90px;

}

#piezas  .carousel-nav .carousel-cell:hover img {
  margin-top: 5px;
}

#piezas .carousel-nav .carousel-cell:before {
  font-size: 50px;
  line-height: 80px;
  margin-right: 0px;
}

#piezas .carousel-nav .carousel-cell.is-nav-selected {
  color: red;
  border-bottom: red solid 5px;
  padding-bottom: 3px;
}


.carousel {
  background: #FAFAFA;
  margin-bottom: 20px;
}

.carousel-cell {
  width: 100%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  line-height: 200px;
  font-size: 80px;
  color: white;
}

.button {
  float:left;
  border: none;
}





ul.menu { width:100%; height:120px; text-align:center;  padding:0;  }
ul.menu li { width:auto; float:left; height:120px; list-style:none; width:20%; }
ul.menu li a { width:auto;  height:120px; font-size:15px; background:url(../imagenes/plequita.jpg) no-repeat; background-position:bottom left; font-size:14px; color:white; text-align:left; font-family: 'adria_grotesk_xlight';  }
ul.menu li a img { padding-top:45px; }
ul.menu li btn { width:auto; color:#b29549; font-size:15px; background:none; border:none;  transition:all 400ms ease; margin-right:30px; font-size:12px;  }
ul.menu li a:hover { width:auto; color:#b29549;  text-decoration:none; transition:all 200ms ease; }

.burger { position:absolute; top:10px; right:10px; display:none;  cursor: pointer; }
.nav-up { top:-120px; transition:all 600ms ease;  }
.nav-down { transition:all 600ms ease;  }



.submenu_ { width:100%; min-height:400px; position: absolute; top: 50px; left: -100%; transition:all 300ms ease;  text-align:center;  background:#ea2227; z-index:99999; padding:10px 0;  }
.submenu_ ul li { list-style:none; padding:0; margin: 0;  width: 100%; }
.submenu_ ul li a { color:white; font-size:14px; margin:15px auto; margin-left: -40px; display: block; }

.listo { top: 50px; left: 0%; }

.menu {
  cursor: pointer;
  margin: 0 auto;
  padding-left: 1.25em;
  position: relative;
  width: 40px;
  height: 30px;
}
.menu-global {
  backface-visibility: hidden;
  position: absolute;
  left: 0;
  border-top: 7px solid #ea2227;
  width: 100%;
  transition: 0.55s;
}
.menu-top {
  top: 0;
}
.menu-middle {
  top: 13px;
}
.menu-bottom {
  top: 26px;
}
.menu-top-click {
  backface-visibility: hidden;
  top: 15px;
  transform: rotate(50deg);
  transition: 0.55s 0.5s;
}
.menu-middle-click {
  opacity: 0;
}
.menu-bottom-click {
  backface-visibility: hidden;
  top: 15px;
  transform: rotate(-410deg);
  transition: 0.55s 0.5s;
}


.prod1 { background:url(../imagenes/inicio2.jpg) no-repeat ; background-size: cover; }
.prod2 { background:url(../imagenes/nylon.jpg) no-repeat ; background-size: cover;}
.prod3 { background:url(../imagenes/ecoat.jpg) no-repeat ; background-size: cover;}
.prod4 { background:url(../imagenes/pintura.jpg) no-repeat ; background-size: cover;}
.prod5 { background:url(../imagenes/galvan.png) no-repeat ; background-size: cover;}
.prod6 { background:url(../imagenes/grama.png) no-repeat ; background-size: cover;}

.hrv { background:url(../imagenes/hrv-piezas.jpg) no-repeat center !important;  background-size: 100% !important; }
.fit { background:url(../imagenes/fit-piezas.jpg) no-repeat center !important;  background-size: 100% !important; }
.crv { background:url(../imagenes/crv-piezas.png) no-repeat center !important;  background-size: 100% !important; }
.kicks { background:url(../imagenes/kicks-piezas.jpg) no-repeat  center !important; background-size: 100% !important; }
.mazda { background:url(../imagenes/mazda-piezas.png) no-repeat center !important; background-size: 100% !important; }
.sentra { background:url(../imagenes/sentra-piezas.jpg) no-repeat center !important; background-size: 100% !important; }

.mapa { color: white; font-weight: bold; }
.mapa:hover { color: red; font-weight: bold; text-decoration: none; }




  /* */ 
    @media only screen and (max-width : 1080px) {

.clientes { height: auto !important; padding-bottom: 100px; background: white; }
.clientes img { float: left; width: 25%;}
#servicios {  margin-top: -100px; }
    
    ul { width: 100%; height: 50px; text-align: center; margin: 0 auto;  padding-top: 15px;    }
    }

@media only screen and (max-width : 780px) {
 .logo_ { display: inline; }
 #piezas  .carousel-nav  {
  height: 16.6%;
  width: 100%;
  background: white;
  position: absolute;
  z-index: 999999999999999;
  right: 0;
}
}
 /*  */ 
    @media only screen and (max-width : 580px) {


      .index  { text-align: center; padding-top: 100px; }
      .index img  { margin-top: 50px; }
      .copy { width: 80% !important; }
      .index_2 {  height: auto; padding-top: 25px; }
      .boton-in { width: 100%; height: 50px; border: white solid 1px; text-align: left; float: left; margin-right: 20px; margin-bottom: 30px; }
.clientes { width: 100%; min-height: auto; background: white; margin-bottom: 0px; text-align: center; padding: 0px 14% ; text-align: center; color: black; }
.clientes img { margin: 0 auto }


.boton-in:hover { width: 100%; height: 150px; }

footer { width:100%; height:auto; background:url(../imagenes/footer.jpg) no-repeat center center; -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; padding-top: 20px;   }
    }

  /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 750px) {

.burger { display:inline; }
#inicio { height: 450px; }
#quienes_somos { height: auto; padding-bottom: 50px; background-image: none; }
#quienes_somos .ajuste { height: 10px;  }

#servicios h2 { padding-top:50px;  }

a.submenu { color:red !important; }
a.submenu-a { color:white !important;  width: 90%; height: auto; font-size: 17px; vertical-align: middle; margin-bottom: 9px; line-height: 18px; }
a.submenu-b { color:white !important;  width: 90%; height: auto; font-size: 17px; vertical-align: middle; margin-bottom: 9px;  line-height: 18px; }

.pleca1 { width: 100%; height: 150px; background:url(../imagenes/pleca2.png) no-repeat center center; background-size: 100%; margin: -50px 0 -50px 0; }
.pleca2 { width: 100%; height: 260px; background:url(../imagenes/pleca33.png) no-repeat 0 0; background-size: 100%; margin: -150px 0 -100px 0; }
.pleca3 { width: 100%; height: 300px; background:url(../imagenes/pleca4.png) no-repeat center center; background-size: 100%; margin: -60px 0 -50px 0; z-index: 99999999999999; }


.clientes { height: auto !important; padding-bottom: 100px; background: white; }
.clientes img { float: left; width: 25%;}

    }




    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 550px) {


#inicio { height: 450px; }
#quienes_somos { height: auto; padding-bottom: 50px; background-image: none; }
#quienes_somos .ajuste { height: 10px;  }

#servicios { padding-bottom:200px; height: 960px !important;  }
#servicios h2 { padding-top:50px;  }
.clientes { height: auto !important; }

.submenu-a { width: 90%; height: auto; font-size: 17px; vertical-align: middle; margin-bottom: 9px; line-height: 18px; }
.submenu-b { width: 90%; height: auto; font-size: 17px; vertical-align: middle; margin-bottom: 9px;  line-height: 18px; }

.pleca1 { width: 100%; height: 150px; background:url(../imagenes/pleca2.png) no-repeat center center; background-size: 100%; margin: -50px 0 -50px 0; }
.pleca2 { width: 100%; height: 260px; background:url(../imagenes/pleca3.png) no-repeat 0 0; background-size: 100%; margin: -50px 0 -100px 0; }
.pleca3 { width: 100%; height: 100px; background:url(../imagenes/pleca4.png) no-repeat 0 0; background-size: 100%; margin: 0; z-index: 99999999999999; }

.piezas { height: 300px; }

.clientes  { height: 550px !important; padding-top: 25px;  background: white;}
.clientes img { float: left; width: 50%;}
.comodin {  margin-left: 25%; margin-top: 0px}

#contacto { width: 100%; height: auto; margin-top: 0px; padding-top: 0; padding-bottom: 50px;
}

.carousel-cell {
  width: 100%;
  margin-right: 5px;
  counter-increment: carousel-cell; color:black;
  padding: 0 30px;
  margin: 0 50px;
}

.carousel-cell h3 {
  text-align: right; color:black; font-size: 14px; border-bottom:#ea2227 solid 3px; width: 100%; padding-bottom: 20px; float: left;  
}

.carousel-cell .title {
   color:#ea2227; font-weight: 700; margin-top: 10px;
}

h1, h2 { font-size: 16px !important;}
.prod1 { background-size: 300%; background-position: center;  }
.prod2 { background-size: 300%; background-position: center;  }
.prod3 { background-size: 300%; background-position: center;  }
.prod4 { background-size: 300%; background-position: center;  }
.prod5 { background-size: 300%; background-position: center;  }
.prod6 { background-size: 300%; background-position: center;  }

.base { background-image: none; background:rgba(0,0,0,0.8); }
.base h3 { text-align: left !important; font-size: 18px !important; line-height: 22px !important; float: left !important;  }

.base {width: 100%; height: auto; background: rgba(0,0,0,0.8); padding-bottom: 20px;
       position: absolute; bottom: 0; background-size: 110%; padding-left: 50px;}

#inicio { height: 250px; }
#inicio .carousel { height: 250px; }
#inicio .carousel .carousel-cell { height: 250px; }

.in-1 {  background:url(../imagenes/inicio1.jpg) no-repeat center center !important; -webkit-background-size: 450px !important;
  -moz-background-size:450px !important;
  -o-background-size: 450px !important;
  background-size: 450px !important;
}

.in-2 {  background:url(../imagenes/inicio2.jpg) no-repeat center center !important;  -webkit-background-size: 450px !important;
  -moz-background-size: 450px !important;
  -o-background-size: 450px !important;
  background-size: 450px !important;
}

.in-3 { background:url(../imagenes/inicio.jpg) no-repeat center center !important;  -webkit-background-size: 450px !important;
  -moz-background-size: 450px !important;
  -o-background-size: 450px !important;
  background-size: 450px !important;
}

.submenu-a, .submenu-b, .submenu-z { height: auto; padding: 25px 5%;  }


#piezas  .carousel-nav .carousel-cell img {
  margin-top: 15px; transition:all 200ms ease; width: 100%;
}

#start { width: 100%; height: 400px; padding-top: 150px; background-size: 200% !important;   background:white url(../imagenes/inicio1.jpg) no-repeat center; 
}

#slide .carousel {
  background: #fff;
  position: relative;
  width: 100%;
}

#slide .carousel-cell {
  position: relative;
  width: 100%;
  height: 570px;
   color:black;
  padding: 0;
  margin: 0 2px ;
}

#slide .carousel-cell h3 {
  text-align: left; color:white; line-height: 35px; margin-top: -150px; 
  font-size: 30px; width: 75%; padding-right: 20%; margin-bottom: 20px; padding-bottom: 0px; float: left;  
}


    }