@-webkit-keyframes scroll {
    0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
    100% {
    -webkit-transform: translateX(calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
    }
    }
    @keyframes scroll {
    0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    }
    100% {
    -webkit-transform: translateX(calc(-250px * 7));
    transform: translateX(calc(-250px * 7));
    }
    }
    #slider {
    
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 500px;
    overflow: auto;
    transition: transform 10s ease-in-out;
    }
    .slider::before, #slider::after {
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100px;
    position: absolute;
    width: 200px;
    z-index: 2;
    }
    #slider::after {
    right: 0;
    top: 0;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    }
    #slider::before {
    left: 0;
    top: 0;
    }
    #slider .slide-track {
    -webkit-animation: scroll 60s linear infinite;
    animation: scroll 60s linear infinite;
    display: flex;
    width: calc(250px * 14);
    }
    #slider .slide {
    height: 100px;
    width: 250px;
    }
    #social {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #social ul {
        position: relative;
        margin: 0;
        padding: 0;
        display: flex;
      }
      #social ul li {
        position: relative;
        list-style: none;
        width: 45px;
        height: 45px;
        margin: 0 30px;
        transform: rotate(-30deg) skew(25deg);
        background: #ccc;
      }
      #social ul li span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        transition: 0.5s;
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 30px !important;
      }
      #social ul li:hover span:nth-child(5) {
        transform: translate(40px, -40px);
        opacity: 1;
      }
      #social ul li:hover span:nth-child(4) {
        transform: translate(30px, -30px);
        opacity: 0.8;
      }
      #social ul li:hover span:nth-child(3) {
        transform: translate(20px, -20px);
        opacity: 0.6;
      }
      #social ul li:hover span:nth-child(2) {
        transform: translate(10px, -10px);
        opacity: 0.6;
      }
      #social ul li:hover span:nth-child(1) {
        transform: translate(0px, 0px);
        opacity: 0.2;
      }
      #social ul li:nth-child(1) span {
        background-color: #3b5999;
      }
      #social ul li:nth-child(2) span {
        background-color: #e4405f;
      }
      #social ul li:nth-child(3) span {
        background-color: #e4405f;
      }
      #social ul li:nth-child(4) span {
        background-color: #0077b5;
      }
      @media screen and ( max-width:360px){
        
        #slider{
          width: 90px;
        }
      }