@charset "utf-8";
/* CSS Document */

.social-media {
  height: 100vh;
}
.social-media-box {
  position: relative;
  width: 514px;
  height: 621px;
  margin-left: 0;
  margin-top: 75px;
  transform-style: preserve-3d; 
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: all .5s;
  transform: perspective(1000px);
}
.social-media-box > div {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  -webkit-animation: fadeInUp cubic-bezier(0.85, 0.17, 0.25, 1) 1s both;
          animation: fadeInUp cubic-bezier(0.85, 0.17, 0.25, 1) 1s both;
}
 
.social-media-bg {
  top: 0;
  left: 0;
  transform: translateZ(0);
}


 
.mail {
  right: -134px;
  bottom: 44px;
  transform: translateZ(10px);
}
 
 
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}