
 
.dinamic-logo {
  margin: 0 auto;
  width: 60%;
  text-align: center;
  padding-bottom: 100px;
}

.dinamic-logo__cristal {
  width: 90%;
}

@media screen and (orientation: landscape) and (min-width: 740px) {

.dinamic-logo__shadow {
  height: 40px;
}

.dinamic-logo__shadow::after {
  position: relative;
  margin: 20px auto;
  content: "";
  display: block;
  height: 20px;
  width: 20%;
  background-color: #8ee8ce;
  border-radius: 50%;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

.dinamic-logo:hover .dinamic-logo__shadow::after {
  height: 30px;
  width: 50%;
  opacity: .5;
}

.dinamic-logo__cristal {
  width: auto;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

.dinamic-logo:hover .dinamic-logo__cristal {
 transform: translateY(-30px);
}