@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");

#distintivos {
  margin-top: 50px;
}

#distintivos .content {

  text-align: center;
  padding: 4em 0;
  width: 100%;
}

#distintivos .cards {
  display: flex;
  justify-content: space-evenly;
}

#distintivos .card {
  position: relative;
  height: 25em;
  perspective: 150em;
  background-color: transparent;
}
#distintivos .card__side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25em;
  backface-visibility: hidden;
  transition: all 0.6s ease;
  box-shadow: 1em 1em 2em rgba(0, 0, 0, 0.2);
}
#distintivos .card__side--front {
background-color: #FFF;
border-radius: 1rem;
}
#distintivos .card__side--back {
  color: #FFF;
  transform: rotateY(180deg);
  border-radius: 1rem;
  overflow: scroll;
}

#distintivos .card__side--back-1 {
    background: white;
}
#distintivos .card__side--back-2 {
    background: white;
}
#distintivos .card__side--back-3 {
    background: white;
}
#distintivos .card:hover .card__side--front {
  transform: rotateY(-180deg);
}
#distintivos .card:hover .card__side--back {
  transform: rotate(0);
}
#distintivos .card__description {
  text-transform: uppercase;
  font-size: 1em;
  padding: 1em 0;
}

.card__side--front img.botella {
    position:absolute;
    top:-25%;
    left:0;
}

@media screen and (max-width: 768px) {
    .card__side--front img.botella {
        position: relative;
        height: 15rem;
        top: -35%;
        width: auto;
    }

    .card__side--back img.botella {
      position: relative;
        height: 15rem;
        top: -35%;
        width: auto;
    }
    
    #distintivos {
      margin-top: 0px;
      padding-bottom: 0px !important;
    }

    #distintivos .card, #distintivos .card__side {
      height: 15em;
      margin-bottom: 4rem;
    }

    #distintivos .card__description {
      font-size: 12px;
      padding: 20px;
    }
}