.container {
    position: absolute;
    border: 0;
    background: none;
    width: 50px;
    height: 150px;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.left-arrow.container {
    left: 0;
}

.right-arrow.container {
    right: 0;
}

.chevron {
    position: absolute;
    width: 4px;
    height: 28px;
    -ms-opacity: 0;
    opacity: 0;
    -ms-transform: scale3d(0.5, 0.5, 0.5);
    -webkit-transform: scale3d(0.5, 0.5, 0.5);
    -moz-transform: scale3d(0.5, 0.5, 0.5);
    -o-transform: scale3d(0.5, 0.5, 0.5);
    transform: scale3d(0.5, 0.5, 0.5);
}

.chevron.left {
    -ms-animation: move-left 3s ease-out infinite;
    -webkit-animation: move-left 3s ease-out infinite;
    animation: move-left 3s ease-out infinite;
}

.chevron.right {
    -ms-animation: move-right 3s ease-out infinite;
    -webkit-animation: move-right 3s ease-out infinite;
    animation: move-right 3s ease-out infinite;
}

.chevron.left:first-child {
    -ms-animation: move-left 3s ease-out 1s infinite;
    -webkit-animation: move-left 3s ease-out 1s infinite;
    animation: move-left 3s ease-out 1s infinite;
}

.chevron.left:nth-child(2) {
    -ms-animation: move-left 3s ease-out 2s infinite;
    -webkit-animation: move-left 3s ease-out 2s infinite;
    animation: move-left 3s ease-out 2s infinite;
}

.chevron.right:first-child {
    -ms-animation: move-right 3s ease-out 1s infinite;
    -webkit-animation: move-right 3s ease-out 1s infinite;
    animation: move-right 3s ease-out 1s infinite;
}

.chevron.right:nth-child(2) {
    -ms-animation: move-right 3s ease-out 2s infinite;
    -webkit-animation: move-right 3s ease-out 2s infinite;
    animation: move-right 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
    content: ' ';
    position: absolute;
    height:51%;
    width: 100%;
    background: black;
}

.chevron.left:before,
.chevron.left:after {
    left: 0;
}

.chevron.right:before,
.chevron.right:after {
    right: 0;
}

.chevron.left:before {
    bottom: 0;
    -ms-transform: skew(30deg, 0deg);
    -webkit-transform: skew(30deg, 0deg);
    -moz-transform: skew(30deg, 0deg);
    -o-transform: skew(30deg, 0deg);
    transform: skew(30deg, 0deg);
}

.chevron.left:after {
    top: 0;
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    -moz-transform: skew(-30deg, 0deg);
    -o-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
}

.chevron.right:before {
    bottom: 0;
    -ms-transform: skew(-30deg, 0deg);    
    -webkit-transform: skew(-30deg, 0deg);    
    -moz-transform: skew(-30deg, 0deg);    
    -o-transform: skew(-30deg, 0deg);    
    transform: skew(-30deg, 0deg);    
}

.chevron.right:after {
    top: 0;
    -ms-transform: skew(30deg, 0deg);
    -webkit-transform: skew(30deg, 0deg);
    -moz-transform: skew(30deg, 0deg);
    -o-transform: skew(30deg, 0deg);
    transform: skew(30deg, 0deg);
}


@keyframes move-left {
    0% {
        opacity: 0;
        -ms-transform: translateX(45px) scale3d(0.5, 0.5, 0.5);
        -webkit-transform: translateX(45px) scale3d(0.5, 0.5, 0.5);
        -moz-transform: translateX(45px) scale3d(0.5, 0.5, 0.5);
        -o-transform: translateX(45px) scale3d(0.5, 0.5, 0.5);
        transform: translateX(45px) scale3d(0.5, 0.5, 0.5);
    }
    33% {
        opacity: 1;
        -ms-transform: translateX(30px);
        -webkit-transform: translateX(30px);
        -moz-transform: translateX(30px);
        -o-transform: translateX(30px);
        transform: translateX(30px);
    }
    67% {
        opacity: 1;
        -ms-transform: translateX(20px);
        -webkit-transform: translateX(20px);
        -moz-transform: translateX(20px);
        -o-transform: translateX(20px);
        transform: translateX(20px);
    }
    75% {
        opacity: 1;
    }
}

@keyframes move-right {
    0% {
        opacity: 0;
        -ms-transform: translateX(0) scale3d(0.5, 0.5, 0.5);
        -webkit-transform: translateX(0) scale3d(0.5, 0.5, 0.5);
        -moz-transform: translateX(0) scale3d(0.5, 0.5, 0.5);
        -o-transform: translateX(0) scale3d(0.5, 0.5, 0.5);
        transform: translateX(0) scale3d(0.5, 0.5, 0.5);
    }

    33% {
        opacity: 1;
        -ms-transform: translateX(10px);
        -webkit-transform: translateX(10px);
        -moz-transform: translateX(10px);
        -o-transform: translateX(10px);
        transform: translateX(10px);
    }

    67% {
        opacity: 1;
        -ms-transform: translateX(20px);
        -webkit-transform: translateX(20px);
        -moz-transform: translateX(20px);
        -o-transform: translateX(20px);
        transform: translateX(20px);
    }

    100% {
        opacity: 0;
        -ms-transform: translateX(45px) scale3d(0.5, 0.5, 0.5);
        -webkit-transform: translateX(45px) scale3d(0.5, 0.5, 0.5);
        -moz-transform: translateX(45px) scale3d(0.5, 0.5, 0.5);
        -o-transform: translateX(45px) scale3d(0.5, 0.5, 0.5);
        transform: translateX(45px) scale3d(0.5, 0.5, 0.5);
    }
}

@keyframes pulse {
    to {
        opacity: 1;
    }
}

@media all and (max-width: 1000px) {
    .left-arrow.container {
        left: -25px;
    }

    .right-arrow.container {
        right: -25px;
    }
}