#banner{
  display: flex;
  flex-direction: column;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  top: 12vh; 
  height: 100%;
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  transition: all 500ms;
  padding-bottom: 15vh;
  margin-bottom: 8vh;

}

.container-all{
  position: relative;
  max-width: 100vw;
  border-radius: 6px;
  overflow: hidden;
  padding-top: 0;
  margin-top: 0;
}
.slide{
  width: 100%;
  margin-right: -8vw;
  padding-top: 0;
  margin-top: 0;
  display: flex;
  transform: translate3d(0, 0, 0);
  animation-name: autoplay2;
  animation-duration: 40s;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}
.slide img{
  width: 98%;
  margin: auto;
}
.item-slide{
  padding-top: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  flex-grow: 0;
  max-width: 100%;
}
#enlace:hover, .unica__img:hover, .max__img2:hover, #seleccionar:hover{
  filter: grayscale(100%);
  cursor: pointer;
}
.pagination{
  position: absolute;
  left: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  bottom: 20.5vh;
}

@media (max-width: 416px) {
  .pagination {
    bottom: 60.5vh;
  }
}
.pagination-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid #375f9c;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
  margin: 4vh 12px;
  text-align: center;
  transition: all 1s;
}
.pagination-item:hover{
  transform: scale(2);
}
.pagination-item img{
  display: inline-block;
  max-width: none;
  height: 100%;
  transform: scale(1);
  opacity: 0;
  transition: all 300ms;
}
.pagination-item:hover img{
  opacity: 1;
  transform: scale(1);
}
input[id="1"]:checked ~ .slide{
  animation: none;
  transform: translate3d(0,0,0);
}
input[id="1"]:checked ~ .pagination .pagination-item[for="1"]{
  background: #375f9c;
}

input[id="2"]:checked ~ .slide{
  animation: none;
  transform: translate3d(calc(-100% * 1),0,0);
}
input[id="2"]:checked ~ .pagination .pagination-item[for="2"]{
  background: #375f9c;
}

input[id="3"]:checked ~ .slide{
  animation: none;
  transform: translate3d(calc(-100% * 2),0,0);
}
input[id="3"]:checked ~ .pagination .pagination-item[for="3"]{
  background: #375f9c;
}
input[id="4"]:checked ~ .slide{
  animation: none;
  transform: translate3d(calc(-100% * 3),0,0);
}
input[id="4"]:checked ~ .pagination .pagination-item[for="4"]{
  background: #375f9c;
}

@keyframes autoplay2{
  25%{
    transform: translate3d(calc(-100% * 0),0,0);
  }
  50%{
    transform: translate3d(calc(-100% * 1),0,0);
  }
  75%{
    transform: translate3d(calc(-100% * 2),0,0);
  }
  100%{
    transform: translate3d(calc(-100% * 3),0,0);
  }
 
}

@media screen and (min-width: 1380px) and (max-width: 1390px){
    .slide img{
  width: 100%;

}
}

@media screen and (min-width: 1400px) and (max-width: 1440px){
 .slide img{
     margin-right: 55vw;
}
}

@media screen and (min-width: 1441px) and (max-width: 1451px){
 .slide img{
     margin-right: 65vw;
}
}

@media screen and (min-width: 1452px) and (max-width: 1461px){
 .slide img{
     margin-right: 75vw;
}
}
@media screen and (min-width: 1462px) and (max-width: 1536px){
 .slide img{
     margin-right: 95vw;
}
}

@media screen and (min-width: 1900px) and (max-width: 1950px){
 .slide img{
     margin-right: 210vw;
}
}

@media screen and (min-width: 0px) and (max-width: 767px){
 #cambiart, #camb{
display: none;
}
}

#cambiart:hover{
 color: dimgray;
}
#enlace{
    margin: 0;
    padding: 0;
}
#enlace:hover{
   filter: grayscale(62%);
-webkit-filter: grayscale(62%);
-moz-filter: grayscale(62%);
}

i{
    font-style: normal;
   letter-spacing: 2px;
     font-family:"Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.section-title{
    margin-top: 1.7vh;
}



main {
display: grid;
position: relative;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 45px;
margin-left:5%;
margin-right:3%;
margin-bottom: 7vh;
margin-top: 3vh;
}

section {
margin-bottom: 3vh;
}

section p {
margin: 2%;
text-align: justify;
margin-bottom: 5%;
}

.imgsec{
width: 100%;
}

.imgparr, .imgtitulo{
    margin-left: 3%;
}


section h2, section h3{
    margin-left: 2%;
}

section h2{
     font-size: 110px;
  color: #35a08b;
  font-weight: bold;
}
@media screen and (min-width: 250px) and (max-width: 320px){
   .imgsec{
     margin-left: -9%;}
    section p {
    font-size: 0.8em;
      margin-left: -2%;
      margin-right: 21%;
  }
  section h2{
    font-size: 3.1em;
  }
  .imgrespon{
      width: 80%;
      margin-top: 3%;
      margin-bottom: 5%;
      margin-left: -1%;
    }
}
@media screen and (min-width: 321px) and (max-width: 379px){
    section p {
    font-size: 0.9em;
    margin-right: 15%;
    margin-left: -1%;
  }
  section h2{
    font-size: 3.5em;
  }
 
}
@media screen and (min-width: 321px) and (max-width: 350px){
  .imgrespon{
      width: 83%;
      margin-top: 5%;
      margin-bottom: 5%;
      margin-left: 0;
    }
}
@media screen and (min-width: 351px) and (max-width: 360px){
  .imgrespon{
      width: 90%;
      margin-top: 5%;
      margin-bottom: 7%;
      margin-left: -1%;
    }
}
@media screen and (min-width: 361px) and (max-width: 400px){
  .imgrespon{
      width: 95%;
      margin-top: 5%;
      margin-bottom: 7%;
      margin-left: 1%;
    }
}

@media screen and (min-width: 401px) and (max-width: 500px){
  .imgrespon{
      width: 97%;
      margin-top: 5%;
      margin-bottom: 7%;
      margin-left: -1%;
    }
}
@media screen and (min-width: 501px) and (max-width: 900px){
  .imgrespon{
      width: 70%;
      margin-top: 4%;
      margin-bottom: 6%;
      margin-left:14%;
    }
}


@media screen and (min-width: 380px) and (max-width: 800px){
   .imgsec{
    margin: 10px auto;
}
    section p {
    font-size: 1em;
      margin-left: -2%;
      margin-right: 1%;
  }
  section h2{
    font-size:3.8em;
  }
}
@media screen and (min-width: 801px) and (max-width: 900px){
section h2{
    font-size:3.9em;
  }}

@media screen and (min-width: 260px) and (max-width: 900px){
 
  .imgparr, .brand, .brand2, .cuatro, .tres, .tres2, .dos{
    display:none;
  }
    
  .imgsec{
width: 90%;
}

}
@media screen and (min-width: 901px) and (max-width: 2000px){
     .imgrespon{
        display: none;
    }
  .imgparr{
    width: 85%;
}
  .brand{
  width: 100%;
  }
  .brand2{
    width: 50%;
    margin-top: 6%;
    margin-left:27%;
  }
  .cuatro{
    width: 100%;
  }
  .tres{
    width: 66%;
    margin-left: 12%;
  }
  .tres2{
     width: 66%;
    margin-left: 17%;
  }
  .dos{
    width: 39%;
    margin-left: 28%;
  }

}

@media screen and (min-width: 901px) and (max-width: 1299px){
 section h2{
    font-size: 4.5em;
  }
}
@media screen and (min-width: 1300px) and (max-width: 1700px){
 section h2{
    font-size: 6.5em;
  }
}
@media screen and (min-width: 1701px) and (max-width: 1950px){
 section h2{
    font-size: 8em;
  }
}

  


