/* [project]/src/views/website/home/sections/SocialSection/style.scss.css [app-client] (css) */
#social-banner {
  height: 280px;
  min-height: 250px;
}

#social-banner .overlay-dk-grey {
  background-color: #0a0a0af0;
}

#social-banner .overlay-dk-grey .social-icon-lg {
  width: auto;
  height: 50px;
}

#social-banner .overlay-dk-grey h2 {
  margin: 0 0 37px;
}

#social-banner .socialw {
  width: 181px;
  height: 100%;
  margin: 28px auto 0;
  overflow: auto;
}

#social-banner .social {
  float: left;
  border: 1px solid #292929;
  width: 37px;
  height: 62px;
  margin-left: 10px;
  position: relative;
  overflow: hidden;
}

#social-banner .first {
  margin-left: 0;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100px);
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@-o-keyframes fadeInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-100px);
  }

  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#social-banner .fadeInDown {
  animation: 1s .5s both fadeInDown;
}

#social-banner .social img {
  -o-transition: margin-top .25s ease-in;
  transition: margin-top .25s ease-in;
  position: absolute;
  top: 0;
  left: 0;
}

#social-banner .social:hover img {
  margin-top: -62px;
}

@media only screen and (max-width: 768px) {
  #social-banner {
    height: 480px;
  }
}