.vinyl-animation {
  padding-top: 50px; }
  .vinyl-animation .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin: 0 auto; }
    .vinyl-animation .wrapper:hover .vinyl-top .foto {
      left: -365px;
      transform: rotate(180deg); }
    .vinyl-animation .wrapper:hover .vinyl-bottom .foto {
      left: -170px;
      transform: rotate(-180deg); }
    .vinyl-animation .wrapper .vinyl-top .foto-cover {
      position: relative;
      z-index: 2; }
      .vinyl-animation .wrapper .vinyl-top .foto-cover img {
        width: 423px; }
    .vinyl-animation .wrapper .vinyl-top .foto {
      display: flex;
      align-items: flex-end; }
      .vinyl-animation .wrapper .vinyl-top .foto img {
        width: 396px; }
    .vinyl-animation .wrapper .vinyl-bottom {
      margin-top: -65px;
      position: relative;
      z-index: 2;
      margin-left: 165px; }
      .vinyl-animation .wrapper .vinyl-bottom .foto-cover {
        position: relative;
        z-index: 2; }
        .vinyl-animation .wrapper .vinyl-bottom .foto-cover img {
          width: 195px; }
      .vinyl-animation .wrapper .vinyl-bottom .foto img {
        width: 190px; }
    .vinyl-animation .wrapper .vinyl {
      width: fit-content;
      display: flex;
      justify-content: center; }
      .vinyl-animation .wrapper .vinyl .foto {
        left: -50px;
        position: relative;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s; }
    .vinyl-animation .wrapper .buttons {
      margin-top: 70px; }

@media (max-width: 575.5px) {
  .vinyl-animation {
    padding-top: 30px; }
    .vinyl-animation .wrapper:hover .vinyl-top .foto {
      left: -116px; }
    .vinyl-animation .wrapper:hover .vinyl-bottom .foto {
      left: -75px; }
    .vinyl-animation .wrapper .vinyl-top .foto-cover img {
      width: 140px; }
    .vinyl-animation .wrapper .vinyl-top .foto img {
      width: 140px; }
    .vinyl-animation .wrapper .vinyl-bottom {
      margin-top: -35px;
      margin-left: 114px; }
      .vinyl-animation .wrapper .vinyl-bottom .foto-cover img {
        width: 100px; }
      .vinyl-animation .wrapper .vinyl-bottom .foto img {
        width: 95px; }
    .vinyl-animation .wrapper .buttons {
      margin-right: 15px;
      margin-top: 30px; } }
@media (min-width: 576px) and (max-width: 767.5px) {
  .vinyl-animation .wrapper:hover .vinyl-top .foto {
    left: -210px; }
  .vinyl-animation .wrapper:hover .vinyl-bottom .foto {
    left: -120px; }
  .vinyl-animation .wrapper .vinyl-top .foto-cover img {
    width: 250px; }
  .vinyl-animation .wrapper .vinyl-top .foto img {
    width: 250px; }
  .vinyl-animation .wrapper .vinyl-bottom .foto-cover img {
    width: 160px; }
  .vinyl-animation .wrapper .vinyl-bottom .foto img {
    width: 155px; } }
@media (min-width: 768px) and (max-width: 991.5px) {
  .vinyl-animation .wrapper:hover .vinyl-top .foto {
    left: -210px; }
  .vinyl-animation .wrapper:hover .vinyl-bottom .foto {
    left: -120px; }
  .vinyl-animation .wrapper .vinyl-top .foto-cover img {
    width: 250px; }
  .vinyl-animation .wrapper .vinyl-top .foto img {
    width: 250px; }
  .vinyl-animation .wrapper .vinyl-bottom .foto-cover img {
    width: 160px; }
  .vinyl-animation .wrapper .vinyl-bottom .foto img {
    width: 155px; } }
@media (min-width: 992px) and (max-width: 1199.5px) {
  .vinyl-animation .wrapper:hover .vinyl-top .foto {
    left: -295px; }
  .vinyl-animation .wrapper .vinyl-top .foto-cover img {
    width: 335px; }
  .vinyl-animation .wrapper .vinyl-top .foto img {
    width: 335px; } }
@media (min-width: 1200px) and (max-width: 1579.5px) {
  .vinyl-animation .wrapper:hover .vinyl-top .foto {
    left: -295px; }
  .vinyl-animation .wrapper .vinyl-top .foto-cover img {
    width: 335px; }
  .vinyl-animation .wrapper .vinyl-top .foto img {
    width: 335px; } }

/*# sourceMappingURL=vinyl_animations.css.map */