.bonus{
  background: var(--bgDefault);
  color: #fff;
  padding-top: 5rem;
}

.bonus .container{overflow: hidden;}
.bonus h2{margin-bottom: 5rem;}

.bonus .itensBonus .flex{
  width: 100%;
  margin-bottom: calc(var(--defaultSpace) * 6);
  opacity: 0;
  transform: translate3d(-300px, 0, 0);
  transition: 1s;
  background: rgba(255, 255, 255, 0.05);
  padding: calc(var(--defaultSpace) * 2);
}

.bonus .itensBonus .flex:nth-child(even){transform: translate3d(300px, 0, 0);}

.bonus .itensBonus .flex.anime{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.bonus .itensBonus .flex img{
  width: 100%;
  margin-top: -4rem;
  margin-bottom: calc(var(--defaultSpace) * 1.6);
  align-self: baseline;
  box-shadow: 10px 10px 20px 0px rgb(0 0 0 / 30%);
}

.bonus .itensBonus .flex div{width: 100%;}
.bonus .itensBonus .flex div h3{font-weight: var(--fwBolder);}

.bonus .itensBonus .flex div p{
  margin: 0;
  color: var(--optionalTextColor);
}

.moreBonus{
  width: 100%;
  margin-bottom: 3rem;
}

.boxMoreBonus.flex{align-items: stretch;}

.imgMoreBonus{
  width: 60px;
  height: 60px;
  position: relative;
}

.imgMoreBonus::before{
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: var(--mainColor);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.imgMoreBonus img{
  width: 45%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: invert(6%) sepia(40%) saturate(282%) hue-rotate(192deg) brightness(91%) contrast(100%);
}

.moreBonus p{
  width: calc(100% - 80px);
  margin: 0;
}

@media only screen and (min-width: 768px){
  .bonus .itensBonus .flex{
    flex-flow: column;
    flex-direction: row;
  }

  .bonus .itensBonus .flex img{
    max-width: 300px;
    margin-bottom: 0;
  }

  .bonus .itensBonus .flex div{width: calc(100% - 330px);}
  .bonus .itensBonus .flex:nth-child(even) img{order: 2;}
  .bonus .itensBonus .flex:nth-child(even) div{order: 1;}
  .bonus .itensBonus .flex:nth-child(even) div p, .bonus .itensBonus .flex:nth-child(even) div h3{text-align: right;}

  .moreBonus{width: calc(50% - 2rem);}
}

@media only screen and (min-width: 1280px){
  .bonus .itensBonus .flex img{
    max-width: 440px;
    margin-top: -5rem;
  }

  .bonus .itensBonus .flex div{width: calc(100% - 480px);}
}