@import url('https://fonts.googleapis.com/css?family=Muli:400,700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Muli', sans-serif;
}

.acordeon {
  padding: 10rem 0;
}

@media all and (max-width: 1100px) {
  .acordeon {
    padding: 7rem 0;
  }
}

@media all and (max-width: 958px) {
  .acordeon {
    padding: 4rem 0;
  }
}

@media all and (max-width: 648px) {
  .acordeon {
    padding: 3rem 0;
  }
}

.acordeon h2 {
  color: #0056b4!important;
  font-weight: 700;
  letter-spacing: 10px!important;
}

.wrapper{
  width: 100%;
  margin: 50px auto 50px;
  -webkit-box-shadow: 0px 4px 64px -12px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 4px 64px -12px rgba(0,0,0,0.75);
box-shadow: 0px 4px 64px -12px rgba(0,0,0,0.75);
        font-size: 20px;
        border-radius: 1rem;
}

@media all and (max-width: 1250px) {
  .wrapper{
    width: 1000px!important;
  }
}

@media all and (max-width: 1050px) {
  .wrapper{
    width: 800px!important;
  }
}

@media all and (max-width: 850px) {
  .wrapper{
    width: 600px!important;
  }
}

@media all and (max-width: 678px) {
  .wrapper{
    width: 450px!important;
  }

  .accordion_header {
    font-size: 14px!important;
  }

  .wrapper .accordion_body p {
    font-size: 20px!important;
  }
}

@media all and (max-width: 527px) {
  .wrapper{
    width: 380px!important;
  }

}

@media all and (max-width: 431px) {
  .wrapper{
    width: 330px!important;
  }

  .wrapper .accordion_body p {
    font-size: 11px!important;
  }
}

@media all and (max-width: 370px) {
  .wrapper{
    width: 280px!important;
  }

  .accordion_header {
    padding-right: 30px!important;
  }
}

  @media all and (max-width: 325px) {
    .producto1, .producto2, .producto3 {
      height: 500px!important;
    }
}

.wrapper p {
  font-size: 20px!important;
}

.wrapper .accordion_wrap .accordion_header{
  width: 100%;
  height: 70px;
  background-image: url(assets/images/banner_product.jpg);
  background-size: cover;
  padding: 15px;
  color: #fff;
  font-weight: 700;
  border-bottom: 2px solid #fff;
  margin-bottom: 1rem!important;
  position: relative;
  cursor: pointer;
}

.wrapper .accordion_wrap:first-child .accordion_header{
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.wrapper .accordion_wrap:last-child .accordion_header{
  border-bottom: 2px solid transparent;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.wrapper .accordion_wrap:last-child .accordion_header:hover{
  border-bottom: 2px solid transparent;
}

.wrapper .accordion_wrap .accordion_header:before,
.wrapper .accordion_wrap .accordion_header:after{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  width: 20px;
  height: 2px;
  background: #fff;
}

.wrapper .accordion_wrap .accordion_header:hover{
  font-size: 23px;
  color:  #fff;
  border-color:  #fe4600e6;
}

.wrapper .accordion_wrap .accordion_header:hover:before,
.wrapper .accordion_wrap .accordion_header:hover:after{
  background: #fff;
}

.wrapper .accordion_wrap .accordion_header:after{
  transform: rotate(-90deg);
  transition: all 0.5s ease;
}

.wrapper .accordion_wrap .accordion_body{
  width: 100%;
  height: 0px;
  transition: all 0.5s ease;
  background: #fff;
  overflow: hidden;
}

.wrapper .accordion_wrap .accordion_body p{
  padding: 15px;
  font-size: 15px;
  line-height: 22px;
  color: #000;
}

.wrapper .accordion_wrap .accordion_header.active{
  color: #fff;
  border-color: #fe4600e6!important;
  background: #fe4600e6!important;
}

.wrapper .accordion_wrap:last-child .accordion_header.active{
  border-bottom: 4px solid orange;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.wrapper .accordion_wrap .accordion_header.active:before,
.wrapper .accordion_wrap .accordion_header.active:after{
  background: #fff;
}

.wrapper .accordion_wrap .accordion_header.active:after{
  transform: rotate(0deg);
}

.wrapper .accordion_wrap .accordion_header.active + .accordion_body{
  height: 100px;
}

.w3l-about-breadcrumb .breadcrumb-bg img {
  filter: drop-shadow(2px 4px 6px #fff)!important;
}