/* EMPIEZA EL RESET */
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
img {
  display: block;
  object-fit: cover;
  max-width: 100%;
  width: 100%;
  background-repeat: no-repeat;
}
a {
  display: block;
  text-decoration: none;
}
strong {
  font-weight: 400;
}

li {
  list-style-type: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1em;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
}
.clear::after {
  display: block;
  clear: both;
  content: "";
}
/* TERMINA EL RESET */
body{
  width: 100%;
}


/*EMPIEZA EL HEADER*/
header{
  width: 100%;
  margin: center;
  /* background-color: aquamarine; */
  padding: 0 5%;
  /* height: 100px; */
  /* background-color: aquamarine; */
}
header i.fas{
  color:rgb(180, 112, 124);
  float: left;
  display: none;
  }
header h1{
  width:240px;
  /* height: 100px; */
  /* background-color:aquamarine; */
  float:left;

}
header h1 img{
  width: 70%;
  margin:0 50px ;
}
header nav{
  width: (100% - 240px);
float: right;
font-family: 'Roboto', sans-serif;
  color:white;
  margin: 10px 0 0px 0;
/* padding: 40px 0; */
}
header nav ul{
  width: 100%;
  text-align: center;
}
header nav ul li{
  width: (100% / 6);
  /* background-color: brown; */
 display:inline-block;
 padding: 20px;
}
header nav ul li div.linea{
  background: rgb(34, 34, 34);
  width: 50px;
  height: 2px;
  transition:all .4s ease;
  transform-origin:50% 50%;
  transform: scale(0);
}
header nav ul li:hover div.linea{
transform: scale(1);

}

/*ACABA EL HEADER*/
/*EMPIEZA EL MAIN1*/
main{
  width: 100%;
  position: relative;
}
main section.uno{
  width: 100%;
  min-height: 600px; 
  margin: auto;
  background-image: url(../img/slide-1.jpg);
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-size:cover;
  background-position: center center;
  /* height:790px; */
  background-color: pink;
}

section.uno img{
width: 90%;
margin: auto;
}
/*EMPIEZA EL MAIN2*/
section.dos{
  width: 90%;
  max-width: 1150px;
  margin:auto;

}
section.dos > p{
width: 100%;
/* background-color: aquamarine; */
padding: 60px 30px;
margin: auto;
text-align: center;
font-family: 'Poppins', sans-serif;
font-size: 1.6em;

}
section.dos > article.texto{
  width: 46%;
  /* background: greenyellow; */
  float: left;
  max-width: 600px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color:grey;
  font-size: 1.1em;
  letter-spacing: 0.4px;
 line-height: 2em;
  } 
/* section>:nth-child(3){
  float: right;
} */
section.dos article{
  width: 50%;
  padding: 0 0 90px 0;
  float: right;
  text-align: left;
  font-family: 'Roboto', sans-serif;
  color:grey;
  letter-spacing: 0.4px;
  font-weight: 300;
}
section.dos article ul{
  width: 100%;
  margin: auto;
}
section.dos article ul li{
  width: calc(100% / 2);
  /* background-color: orange; */
  float: left;
  /* margin: 0 40px 40px 80px; */
}
section.dos ul li h5{
  font-family: 'Poppins', sans-serif;
  color:black;
  font-size: 1.4em;
  padding: 10px 0px 10px 0;
}
/*EMPIEZA EL MAIN3*/

section.tres{
  width: 100%;
  margin: auto;
  max-width:2600px ;
  /* background: blueviolet; */
}
section.tres article{
  width: calc( 25% - 20px );
  height: 100%;
  background:grey;
  float: left;
  margin: auto;
  margin:10px;
  
}
section.tres article a{
  background-color: aquamarine;
  width: 100%;
  height: 100%;
  position: relative;
}
section.tres article a img{
width: 100%;
}

section.tres article a div{
  width: 100%;
  height: 100%;
  position: absolute;
  padding: 10% 0px 0px 0px;
  transition: all 1s ease;
  color: rgba(250, 249, 249,0);
  background-color: rgba(255, 0, 0, 0);
}
section.tres article a div:hover{
  background-color: rgba(255, 255, 255, 0.509);
  color: rgba(255, 255, 255, 0.755);
}
section.tres article a div h3{
  font-family: 'Roboto', sans-serif;
  color: rgba(0, 0, 0, 0);
  font-size: 1em;
  text-align: center;
  transition: all 1s ease;
}
section.tres article a div:hover h3{
  color: black;
}
section.tres article a div p{
  font-family: 'Poppins', sans-serif;
  color:rgba(255, 255, 255, 0);
  font-size: 0.8em;
  text-align: center;
  transition: all 1s ease;
  }
  section.tres article a div:hover p{
color: grey;
  }


/*EMPIEZA EL FOOTER*/
footer{
  width: 100%;
}
footer h2{
  width: 100%;
  text-align: center;
  padding: 4% 0;

}
footer nav{
  width: 100%;
  /* background-color: brown; */
}
footer nav ul {
  width: 100%;
  /* background-color: blue; */
text-align: center;
  
}
footer nav ul li {
  width: 10%;
  /* background-color: aquamarine; */
  /* margin: 50px 0; */
  margin: auto;
  display:inline-block;
  font-family: 'Roboto', sans-serif;
  color: grey;
}
footer p a{
 
  /* background-color: blue; */
 
 text-align: center;
  color: black;
  font-family: 'Roboto', sans-serif;
  font-size: 0.9em;
padding: 40px 0;
}


@media screen and (max-width: 938px){
 
 header nav.menu{
    display: none;
  }
  .activado{
   float: left;
    background-color: plum;
    display:block;
    width: 40%;
    margin: auto;
  }
  header nav li{
  width: 100%;
  top:0;
  left:0;
  }
  div.linea{
    color: rebeccapurple;
    margin: auto;
  }
  header h1{
    width: calc(100% - 30px);
    float: left;
  }
  header h1 img{
    width: 24%;
    margin: auto;
  }

header i.fas{
  display: inline;
  margin: 2% 0 5% 0;
  /* float: left;
  width: 30px; */
  }
  section.tres article  
  {
    width: calc(50%- 20px);
    margin: center;
  }
  footer nav ul li {
    width: 15%;}
 

/* RESPONSIVE */


  @media screen and (max-width: 600px) {
body{
  font-size: 14px;
}
header{font-size: 0.8em;
}

section.tres article a img{
  width: 100%; 
  float:none;
  
}
section.tres article {
  width: 100%;
 
}
section.dos > article.texto {
  width: 100%;}
  section.dos article {
    width: 100%}
}
section.tres article a div {
 position: relative;
  transition: none;
  background-color: rgba(255, 0, 0, 0);}
  section.tres article a div h3 {
    color: black;
  }
  section.tres article a div p {
    color:white;}
    
    section.tres article a div {
    padding: 8%  0px;
    background-color: pink;
    height: 100px;
  }
  main section.dos article.texto{
    font-size: 0.8em;
  }
  main section.dos ul li{
    width: 100%;
    /* padding: 0 0 0 30%; */
    text-align: center;
  }
  main section.dos p{
    font-size: 0.8em;
  }
main section.dos ul li h5{
    font-size: 1.1em;
  }
}
main section.dos ul li {
  width: 45%}