*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  
  font-family: 'lato';
background-attachment: fixed;
  background-size: cover;
  background-position: center;

}
.nav5{
    background-color: rgba(29, 153, 255);
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    height: 70px;
    align-items: center;  
}
.container5{
    
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    max-width: 1200PX;
    
}

.hero5{
    height: 20vh;
    background-attachment: fixed;
    background-position: center;
    position: relative;
}

.nav5 :hover{
    background: rgba(255, 255, 255, 0.336);
    transition: .9s;
}
.nav5--footer{
    font-weight: 300;
    justify-content: flex-start;
}

.about{
  padding-top: 50px;
  min-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 80px;
  justify-items: center;
  align-items: center;
}

.nav__items7   {
    color: rgb(255, 255, 255);
    text-decoration: none;
    margin-right: 20 px;
    padding: 10px 15px;
    font-weight: inherit;
    
}

.nav__items7--footer{
    padding: 10px;
}

.nav__items6{
    color: rgb(255, 255, 255);
    text-decoration: none;
    margin-right: 20 px;
    padding: 10px 15px;
    font-weight: inherit;
    justify-content: space-around;
}
.titleDoc{
  text-align: center;
color: rgb(0, 0, 0);
padding-top: 0;
}


.picturextra{
  text-align: center;
}
.imgextra--right{
  text-align:center;
}

.imgextra--right{
  height: 500px;
  max-width: 100%;
}
.slide-contenedor{
padding-right: 50px;
  max-width: 1000px;
  max-height: 100vh;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  /*margin: auto;*/
}

/*.miSlider{
  display: none;
  transition: 2s;
  max-height: 100vh;
}
*/

.miSlider{
  padding-left: 20px;
  width: 100%;
  
  max-height: 100vh;
  height:inherit;
  object-fit: cover;
  vertical-align: top;
  transition: 2s;
}

.picture1{
  max-width: 100%;
  max-height: 100%;
  
}

.direcciones{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  padding: 30px;
}

.direcciones a{
  color: rgb(0, 0, 0);
  display: inline-block;
  padding: 20px;
  text-decoration: none;
}

.direcciones a:hover{
  background: steelblue;
  transition: .5s;
}

.barras{
  position:absolute;
  bottom: 0;
  width: 100%;
  display:flex ;
  justify-content: center;
  margin-bottom: 15px;
}

.barra{
  cursor: pointer;
  height: 2px;
  width: 25px;
  margin: 0 2px;
  background: rgb(0, 0, 0);
  display: inline-block;
  margin-left: 3px;
}

.active{
  background-color: rgb(255, 0, 0);
}

.fade{
  animation-name: fade;
  animation-duration: 4s;

}

@keyframes fade {
  from{opacity: .4;}
  to{opacity: 1;}
  
}
@media screen and (max-width: 750px){
  :root{
      --boton-padding: 30px 80px;
  }
  .nav5{
     
    flex-wrap: wrap;
    justify-content:space-around;
    margin-top: 0px;
}
.titleDoc{
 font-size: 0.8rem;
}
.direcciones a{
padding: 10px;
}
.direcciones{
padding-left: 0;
max-width: 100%;
}
.about{
 grid-template-columns: 1fr;
}

.miSlider{
 max-width: 1200px;
}
.picture1{
 
 width: 100%;
}
.about .container5{
 padding-top: 30px;
}
.container5{
max-width: 350px;

}
.nav5{
width: 350px;
}
.imgextra--right{
width: 250px;
height: 250px;
}

}

@media screen and (max-width: 500px){
  :root{
      --boton-padding: 18px 50px;
  }
  .nav5{
     
      flex-wrap: wrap;
      justify-content:space-around;
      margin-top: 0px;
  }
 .titleDoc{
   font-size: 0.8rem;
 }
 .direcciones a{
  padding: 10px;
}
.direcciones{
  padding-left: 0;
  max-width: 100%;
}
 .about{
   grid-template-columns: 1fr;
 }

 .miSlider{
   max-width: 1200px;
 }
 .picture1{
   
   width: 100%;
 }
 .about .container5{
   padding-top: 30px;
 }
.container5{
  max-width: 350px;
  
}
.nav5{
  width: 350px;
}
.imgextra--right{
  width: 250px;
  height: 250px;
}

}


@media screen and(max-width: 400px) {
  :root{
    --boton-padding: 18px 35px;    
  }

  .miSlider{
    padding-left: 100px;
  }
  .direcciones{
    padding-left: 50px;
  }
  
}