#banner {
  position: relative;
  margin: 0;
  padding: 0;
  margin-bottom: 8px;
  overflow: hidden;
}

#banner .slider {
  width: 100%;
  height: auto;
  overflow: hidden;
}

#banner .slides {
  width: 500%;
  height: auto;
  display: flex;
}

#banner .slides input {
  display: none;
}

#banner .slide {
  width: 20%;
  transition: 2s;
}

#banner .slide img {
  width: 100%;
  z-index: 10;
}

#banner .slide .columna-100-bt {
  position: absolute;
  margin-top: 100px;
  margin-left: 70px;
  //width: 100%;
}

#banner .slide .columna-100-bt img {
  opacity: 1;
  transition: all .3s ease;
}

#banner .slide .columna-100-bt img:hover {
  opacity: .8;
}

#banner .slide .columna-100-bti {
  position: absolute;
  margin-top: 25%;
  width: 100%;
  //margin-left: 70px;
}

#banner .slide .columna-100-bti img {
  width: 500px;
  margin-left: 100px;
  opacity: 1;
  transition: all .3s ease;
}

#banner .slide .columna-100-bti img:hover {
  opacity: .8;
}

.caja-icons-banner {
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.caja1b {
  margin-left: 50px;
}

.caja-icons-banner .flex-col-icobanner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.caja-icons-banner .flex-col-icobanner i {
  font-size: 1.5rem;
  color: #fff;
  margin-top: 80px;
  padding-bottom: 5px;
  margin-bottom: 5px;
}

.caja-icons-banner .flex-col-icobanner p {
  padding-top: 0;
  margin-top: -5px;
}

//<------navagacion manual------>//
#banner .navigation-manual {
  position: absolute;
  width: 100%;
  display: flex;
  z-index: 100;
}

#banner .navigation-manual .manual-btn {
  position: absolute;
  border: 1px solid #fff;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: .5s;
  margin-left: 70vw;
  bottom: 25px;
  //transform: translateX(80vw, 100px);
}

#banner .navigation-manual .manual-btn:hover {
  background: #fff;
}

#banner .navigation-manual .b1 {
  left: 0;
}

#banner .navigation-manual .b2 {
  left: 25px;
}

#banner .navigation-manual .b3 {
  left: 50px;
}

#banner .navigation-manual .b4 {
  left: 75px;
}

#banner .navigation-manual .b5 {
  left: 100px;
}

#banner .navigation-manual .manual-btn:not(:last-child) {
  //margin-right: 10px;
  //left: 80%;
}

#radio1:checked~.first {
  margin-left: 0;
}

#radio2:checked~.first {
  margin-left: -20%;
}

#radio3:checked~.first {
  margin-left: -40%;
}

#radio4:checked~.first {
  margin-left: -60%;
}

#radio5:checked~.first {
  margin-left: -80%;
}

//<------navagacion automatic------>//
#banner .navigation-auto {
  position: absolute;
  width: 100%;
  display: flex;
  z-index: 99;
}

#banner .navigation-auto div {
  position: absolute;
  border: 1px solid #fff;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: .5s;
  margin-left: 70vw;
  bottom: 25px;
}

#banner .navigation-auto .bo1 {
  left: 0;
}

#banner .navigation-auto .bo2 {
  left: 25px;
}

#banner .navigation-auto .bo3 {
  left: 50px;
}

#banner .navigation-auto .bo4 {
  left: 75px;
}

#banner .navigation-auto .bo5 {
  left: 100px;
}

#banner .navigation-auto div:not(:last-child) {
  //margin-right: 40px;
}

#radio1:checked~.navigation-auto .auto-btn1 {
  background-color: #fff;
}

#radio2:checked~.navigation-auto .auto-btn2 {
  background-color: #fff;
}

#radio3:checked~.navigation-auto .auto-btn3 {
  background-color: #fff;
}

#radio4:checked~.navigation-auto .auto-btn4 {
  background-color: #fff;
}

#radio5:checked~.navigation-auto .auto-btn5 {
  background-color: #fff;
}

//------------------------------------------//
@media (min-width: 1200px) {
  #banner .slide .columna-100-bt {
    position: absolute;
    margin-top: 20px;
    margin-left: 20px;
  }

  //---------------------bti-------------------//
  #banner .slide .columna-100-bti {
    position: absolute;
    margin-top: 25%;
    margin-left: 50px;
  }
}

@media (max-width: 1199px) {
  #banner .slide .columna-100-bt {
    margin-top: 20px;
    margin-left: 20px;
  }

  #banner .slide .columna-100-bt img {
    width: 80%;
  }

  //---------------------bti-------------------//
  #banner .slide .columna-100-bti {
    margin-top: 25%;
    //margin-left: 40px;
  }

  #banner .slide .columna-100-bti img {
    width: 80%;
    margin-left: 40px;
  }
}

@media (max-width: 767px) {
    #banner {
      margin-top: 121px;
      overflow: hidden;
    }

    #banner .slides {
      overflow: auto;
    }

    #banner .slide .columna-100-bt {
      //width: 100%;
      margin-top: 0;
      margin-left: 0;
      margin-bottom: 0;
      display: block;
      border: 0;
    }

    #banner .slide .columna-100-bt img {
      width: 100%;
      border: 0;
      margin-bottom: 0;
      display: block;
    }

    .caja-icons-banner .flex-col-icobanner i {
      margin-top: 179px;
    }

    //---------------------bti-------------------//

    #banner .slide {

    }

    #banner .slide .columna-100-bti {
      width: 100%;
      max-width: 100%;
      overflow: hidden;
    }

    #banner .slide .columna-100-bti img {
      width: 100%;
      margin-top: 160px;
      margin-left: 0;
      display: block;
    }

  ///<--------navigation-auto------>///
    /*#banner .navigation-auto div {
      position: relative;
      border: 1px solid #fff;
      padding: 9px;
      border-radius: 15px;
      cursor: pointer;
      transition: .5s;
      margin-left: 100vw;
      bottom: 20px;
    }

    #banner .navigation-manual .manual-btn {
      padding: 9px;
      border-radius: 15px;
      margin-left: 40vw;
      bottom: 20px;
    }*/


}