body{
    padding: 0;
    margin: 0;
    background-color: rgb(255, 255, 255);
}


.slider-frame{
    overflow: hidden;
    height: 200px;
    width: 100%;
    margin-left: 30px;
    margin-top: 20px;
}


@keyframes slide_animation{
    0% {left:0px;}
    10% {left:0px;}
    20% {left:1200px;}
    30% {left:1200px;}
    40% {left: 2400px;}
    50% {left: 2400px;}
    60% {left: 1200px;}
    70% {left: 1200px;}
    80% {left: 0px;}
    90% {left: 0px;}
    100% {left:0px;}
}
@-webkit-keyframes slide_animation{
    0% {left:0px;}
    10% {left:0px;}
    20% {left:1200px;}
    30% {left:1200px;}
    40% {left: 2400px;}
    50% {left: 2400px;}
    60% {left: 1200px;}
    70% {left: 1200px;}
    80% {left: 0px;}
    90% {left: 0px;}
    100% {left:0px;}
}

.slide-images{
    width: 3200px;
    height: 200px;
    margin: 0 0 0 -2400px;
    position: relative;
    -webkit-animation-name: slide_animation;
    animation-name: slide_animation;
    -webkit-animation-duration: 33s;
    animation-duration: 33s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.img-container{
    height: 100px;
    width: 200px;
    position:relative;
    float: left;
}