.icon-scroll:before {
    position: absolute;
    left: 50%;
}

.icon-scroll {
    width: 35px;
    height: 60px;
    box-shadow: inset 0 0 0 2px #fff;
    border-radius: 25px;
    position: relative;
    margin: 0 auto;
}

.icon-scroll:before {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    margin-left: -4px;
    top: 8px;
    border-radius: 4px;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: scroll;
    animation-name: scroll;
}

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

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

/*scroll down mouse*/

/*scroll down arrow*/


.scroll_down_arrow {
    width: 30px;
    height: 72px;
    position: relative;
    bottom: 20px;
    cursor: pointer;
}

.scroll_down_arrow path {
    stroke: #fff;
    fill: transparent;
    stroke-width: 2px;
    animation: arrow 2s infinite;
    -webkit-animation: arrow 2s infinite;
}

@keyframes arrow
{
    0% {opacity:0}
    40% {opacity:1}
    80% {opacity:0}
    100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
    0% {opacity:0}
    40% {opacity:1}
    80% {opacity:0}
    100% {opacity:0}
}

.scroll_down_arrow path.a1 {
    animation-delay:-1s;
    -webkit-animation-delay:-1s; /* Safari ? Chrome */
}

.scroll_down_arrow path.a2 {
    animation-delay:-0.5s;
    -webkit-animation-delay:-0.5s; /* Safari ? Chrome */
}

.scroll_down_arrow path.a3 {
    animation-delay:0s;
    -webkit-animation-delay:0s; /* Safari ? Chrome */
}

/*scroll down arrow*/