.fade-in-down {
  /* display: none; */
  visibility: hidden;
}

.fade-in-down-start {
  animation-name: FadeInDown;
  animation-duration: 2s;
  transition-timing-function: linear;
}

@keyframes FadeInDown {
  0% {
    transform: translateY(-50vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@-moz-keyframes FadeInDown {
  0% {
    transform: translateY(-50vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes FadeInDown {
  0% {
    transform: translateY(-50vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@-o-keyframes FadeInDown {
  0% {
    transform: translateY(-50vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@-ms-keyframes FadeInDown {
  0% {
    transform: translateY(-50vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.fade-in-up,
.fade-in-up-gmaps,
.fade-in-up-porto {
  /* display: none; */
  visibility: hidden;
}

.fade-in-up-start {
  animation-name: FadeInUp;
  animation-duration: 2s;
  transition-timing-function: linear;
}

@keyframes FadeInUp {
  0% {
    transform: translateY(50vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@-moz-keyframes FadeInUp {
  0% {
    transform: translateY(50vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes FadeInUp {
  0% {
    transform: translateY(50vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@-o-keyframes FadeInUp {
  0% {
    transform: translateY(50vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@-ms-keyframes FadeInUp {
  0% {
    transform: translateY(50vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.desktop-img {
  transition: transform 0.7s ease-in-out;
}
.desktop-img:hover {
  transform: rotate(360deg);
}

.env-img {
  transition: transform 0.7s ease-in-out;
}
.env-img:hover {
  transform: rotate(360deg);
}

.fade-in-left {
  visibility: hidden;
  /* display: none; */
}

.fade-in-left,
.fade-in-left-skills,
.fade-in-left-msg,
.fade-in-left-env {
  visibility: hidden;
  /* display: none; */
}

.fade-in-left-start {
  animation-name: FadeInLeft;
  animation-duration: 2s;
  transition-timing-function: linear;
}

@keyframes FadeInLeft {
  0% {
    transform: translateX(-50vh);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@-moz-keyframes FadeInLeft {
  0% {
    transform: translateX(-50vh);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@-webkit-keyframes FadeInLeft {
  0% {
    transform: translateX(-50vh);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@-o-keyframes FadeInLeft {
  0% {
    transform: translateX(-50vh);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@-ms-keyframes FadeInLeft {
  0% {
    transform: translateX(-50vh);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.fade-in-right,
.fade-in-right-skills,
.fade-in-right-contact-form {
  visibility: hidden;
  /* display: none; */
}

.fade-in-right-start {
  animation-name: FadeInRight;
  animation-duration: 2s;
  transition-timing-function: linear;
}

@keyframes FadeInRight {
  0% {
    transform: translateX(50vh);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@-moz-keyframes FadeInRight {
  0% {
    transform: translateX(50vh);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@-webkit-keyframes FadeInRight {
  0% {
    transform: translateX(50vh);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@-o-keyframes FadeInRight {
  0% {
    transform: translateX(50vh);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@-ms-keyframes FadeInRight {
  0% {
    transform: translateX(50vh);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}