@import 'Montserrat/montserrat.css';
@import 'Nunito/nunito.css';

html, body {height: 100%;}

/*  ROJO  #F00  */
* {
  font-family: 'Montserrat';
  box-sizing: border-box;
}
*::selection {background: #006; color: #fff;}
a {text-decoration: none;}
h2 {
  font-family: 'Nunito';
  text-transform: uppercase;
  font-weight: 800;
  font-size: 26px;
  margin-top: 0;
  letter-spacing: 2px;
  color: #006
}
p {
  color: #444;
  font-weight: 500;
}

.mt0 {margin-top: 0;}

.mr5 {margin-right: 5px;}

.mb100 {margin-bottom: 100px;}
.mb60 {margin-bottom: 60px;}
.mb30 {margin-bottom: 30px;}
.mb20 {margin-bottom: 20px;}
.mb15 {margin-bottom: 15px;}
.mb10 {margin-bottom: 10px;}
.mb5 {margin-bottom: 5px;}

.ml5 {margin-left: 5px;}

.contenedor {
  padding: 100px 200px;
  position: relative;
  z-index: 2;
  background: #fff;
}
.boton {
  margin-top: 20px;
  padding: 10px 35px;
  background: #006;
  color: #fff;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  font-family: 'Nunito';
  font-weight: 600;
  letter-spacing: 3px;
  display: inline-block;
  transition: all 500ms;
}
.boton:hover {
  background: #005;
}
.text-center {text-align: center;}



/* ----HEADER----  */

header {
  padding: 20px 60px;
  user-select: none;
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  transition: all 500ms;
  top: 0;
  z-index: 10;
}
.header-2 {background: #fff;border-bottom: 1px solid rgba(50, 50, 50, 0.2);padding: 10px 60px;}
.header-2 a {color: #444;}
.header-bg {
  background: #fff;
  border-bottom: 1px solid rgba(50, 50, 50, 0.2);
  padding: 10px 60px;
}
.header-bg a {color: #444;}
.header-bg a:hover {color: #888;}
header img {
  max-width: 500px;
}
header nav {
  display: flex;
  justify-content: flex-end;
}
header nav ul {
  list-style: none;
  display: flex;
}
header nav ul li {
  margin-left: 25px;
}
header nav ul li a {
  padding: 10px;
  font-family: 'Nunito';
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  text-transform: uppercase;
  transition: all 500ms;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px
}
header nav ul li a:hover {
  color: #d9d9d9;
}



/* ----INDEX----  */

body.index main {
  background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.3)), url('../img/main-inicio.jpg');
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background-size: cover;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(auto, auto);
  justify-items: center;
  align-items: center;
}
body.index main h1 {
  color: #fff;
  font-size: 65px;
  text-transform: uppercase;
  text-align: center;
  max-width: 960px;
}
body.index main button {
  background: #fff;
  border: none;
  border-radius: 1px;
  padding: 12px 20px;
  text-transform: uppercase;
  cursor: pointer;
}

body.index .experiencia .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 100px;
}
body.index .experiencia .encabezado {
  text-align: center;
}
body.index .experiencia h3 {
  text-transform: uppercase;
  font-family: 'Nunito';
}
body.index .experiencia img {
  max-height: 170px;
}
body.index .experiencia .contenido {
  text-align: center;
}

body.index .nosotros {background: #f8f8f8;}
body.index .nosotros .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 75px;
}
body.index .nosotros p {
  line-height: 25px;
  font-weight: 400;
}
body.index .nosotros img {width: 100%;}

body.index .marcas {
  padding: 100px 0;
  
  
  background-attachment: fixed;
  background-repeat: repeat-y;
  background-size: cover;
}
body.index .marcas .grid {
  /*
  padding: 0 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  user-select: none;
  background: url('../img/bg2.png')
  */
  
}
body.index .marcas .grid > div {
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 320px;
}
body.index .marcas img {
  width: 100%;
  /*
  max-width: 200px;
  transition: all 500ms;
  */
}



/* ----EMPRESA----  */

body.empresa main {
  max-height: 550px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.3)), url('../img/main-empresa.jpg');
  background-size: cover;
  background-position: top;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(auto, auto) minmax(auto, auto);
  justify-items: center;
}
body.empresa main h2 {
  font-size: 50px;
  margin: 0;
  font-family: 'Montserrat';
}

body.empresa .premios {background: #f8f8f8;}
body.empresa .premios .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 100px;
}
body.empresa .premios .grid p {text-align: center;}
body.empresa .premios .grid img {width: 100%;}

body.empresa .lugar {
  padding: 50px;
  background: #fff;
}
body.empresa .lugar .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 50px;
  margin-bottom: 50px;
  transition: all 500ms;
}
body.empresa .lugar .grid > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 350px;
  overflow: hidden;
  background-size: cover;
  align-items: center;
  transition: all 500ms;
  width: 100%;
}
body.empresa .lugar .texto {
  text-align: center;
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
  max-width: 300px;
  display: none;
}

#empresaImg1 {background-image: url('../img/empresa1.jpg');}
#empresaImg2 {background-image: url('../img/empresa2.jpg');}
#empresaImg3 {background-image: url('../img/empresa3.jpg');}
#empresaImg4 {background-image: url('../img/empresa4.jpg');}
#empresaImg5 {background-image: url('../img/empresa5.jpg');}
#empresaImg6 {background-image: url('../img/empresa6.jpg');}
#empresaImg7 {background-image: url('../img/empresa7.jpg');}
#empresaImg8 {background-image: url('../img/empresa8.jpg');}
#empresaImg9 {background-image: url('../img/empresa9.jpg');}
#empresaImg10 {background-image: url('../img/empresa10.jpg');}
#empresaImg11 {background-image: url('../img/empresa11.jpg');}
#empresaImg12 {background-image: url('../img/empresa12.jpg');}
#empresaImg13 {background-image: url('../img/empresa13.jpg');}
#empresaImg14 {background-image: url('../img/empresa14.jpg');}
#empresaImg15 {background-image: url('../img/empresa15.jpg');}
#empresaImg16 {background-image: url('../img/empresa16.jpg');}
#empresaImg17 {background-image: url('../img/empresa17.jpg');}

#empresaImg1:hover {background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/empresa1.jpg');}
#empresaImg2:hover {background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/empresa2.jpg');}
#empresaImg3:hover {background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/empresa3.jpg');}
#empresaImg4:hover {background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/empresa4.jpg');}
#empresaImg5:hover {background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/empresa5.jpg');}
#empresaImg6:hover {background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/empresa6.jpg');}
#empresaImg7:hover {background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/empresa7.jpg');}
#empresaImg8:hover {background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/empresa8.jpg');}
#empresaImg9:hover {background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/empresa9.jpg');}
#empresaImg10:hover {background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/empresa10.jpg');}
#empresaImg11:hover {background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/empresa11.jpg');}
#empresaImg12:hover {background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/empresa12.jpg');}
#empresaImg13:hover {background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/empresa13.jpg');}
#empresaImg14:hover {background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/empresa14.jpg');}
#empresaImg15:hover {background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/empresa15.jpg');}
#empresaImg16:hover {background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/empresa16.jpg');}
#empresaImg17:hover {background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/empresa17.jpg');}

.empresaImg1:hover > .texto,
.empresaImg2:hover > .texto {display: block !important;}



/* ----SERVICIOS----  */
body.servicios main {
  position: fixed;
  top: 0;
  width: 100%;
  max-height: 550px;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.4)), url('../img/main-servicios.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
body.servicios main h2 {
  color: #fff;
  font-size: 50px;
  letter-spacing: 10px;
  font-family: 'Montserrat';
}

body.servicios .marcas {padding: 100px 50px;}
body.servicios .marcas .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  user-select: none;
}
body.servicios .marcas .grid > div {
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 320px;
}
body.servicios .marcas img {
  max-width: 200px;
  transition: all 500ms;
}
body.servicios .marcas img:hover {max-width: 250px;}



/* ----CONTACTO----  */

body.contacto main {
  max-height: 450px;
  height: 100%;
  background: #fff;
}

.footer .contacto {
  background: #f8f8f8;
}
.footer .contacto-2 {
  display: grid;
  grid-template-columns: 2fr minmax(auto, auto) 3fr;
  grid-gap: 50px;
}
.footer .contacto-2 .linea {
  width: 2px;
  height: 70%;
  margin: auto 0;
  background: rgba(0,0,0,.2);
}
.footer .contacto form {
  max-width: 650px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.footer .contacto form h3 {
  text-transform: uppercase;
  font-family: 'Nunito';
  font-weight: 600;
  margin-bottom: 10px;
}
.footer .contacto form input,
.footer .contacto form textarea {
  width: 100%;
  padding: 0 10px;
  margin-bottom: 15px;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 1px;
  text-transform: uppercase;
}
.footer .contacto form input {line-height: 40px;}
.footer .contacto form textarea {
  height: 200px;
  padding: 10px;
  line-height: 20px;
  resize: none;
}

footer .info {
  background: #006;
  color: #fff;
  position: fixed;
  bottom: 0;
  z-index: -1;
  width: 100%;
}
footer .info h3 {
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  line-height: 24px;
  font-size: 18px;
}

@media screen and (max-width: 600px) {
  .contenedor {
    padding: 50px 20px;
  }
  body.index .experiencia .grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  body.index .nosotros .grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  body.index .marcas .grid {
    grid-template-columns: 1fr;
    grid-gap: 20px;
  }
}