body::-webkit-scrollbar { display: none; }

body {
    overflow-x:auto;
    overflow-y:auto;
}

#slide-window
{
    position:fixed;
    width:100%;
    height:100%;
    overflow:hidden;
    top:0px;
    left:0px;
}

#slides
{
    height:100%;
    width: 100%;
    position:absolute;
    margin:0px;
    padding:0px;

    -webkit-transform: translate3d(0px,0px,0px);
    transform: translate3d(0px,0px,0px);

    transition: all 0.66s ease; -webkit-transition: all 0.66s ease;

}

.slide
{
    width: 100%;
    max-width: 100%;
    list-style:none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    //width: 500px;
    height: 100%;
    background: #ccc;
    text-align: center;
    line-height: 300px;
    background-size: cover;
    background-position:50% 50%;
    color:#fff;
    -webkit-transform: translate3d(0px,0px,0px);
    visibility:hidden;
    -webkit-transform-style: preserve-3d;
}

.alive { visibility:visible; }

.nav
{
    position:fixed;
    z-index:9;
    top:50%;
    cursor:pointer;
    color:#fff;
    opacity:0.7;
    transition: all 0.66s ease; -webkit-transition: all 0.66s ease;
}

.nav:hover { opacity:1.0; }
#left { left:3%; }
#right { right:3%; }

.color-0 {
    background-image: url(../img/1.png);
    background-repeat: no-repeat;
    background-size: 80%;
}
.color-1 {
    background-image: url(../img/2.png);
    background-repeat: no-repeat;
    background-size: 50%;
}
.color-2 {
    background-image: url(../img/3.png);
    background-repeat: no-repeat;
    background-size: 35%;
}
.color-3 {
    background-image: url(../img/4.png);
    background-repeat: no-repeat;
    background-size: 57%;
}
.color-4 {
    background-image: url(../img/5.png);
    background-repeat: no-repeat;
    background-size: 59%;
}
.color-5 {
    background-image: url(../img/6.png);
    background-repeat: no-repeat;
    background-size: 68%;
}
.color-6 {
    background-image: url(../img/7.png);
    background-repeat: no-repeat;
    background-size: 78%;
}
.color-7 {
    background-image: url(../img/8.png);
    background-repeat: no-repeat;
    background-size: 67%;
}
.color-8 {
    background-image: url(../img/9.png);
    background-repeat: no-repeat;
    background-size: 67%;
}
@media all and (min-width: 489px) and (max-width: 992px) {
    .color-0 {
        background-size: 76%;
    }
    .color-1 {
        background-size: 48%;
    }
    .color-2 {
        background-size: 33%;
    }
    .color-3 {
        background-size: 53%;
    }
    .color-4 {
        background-size: 58%;
    }
    .color-5 {
        background-size: 68%;
    }
    .color-6 {
        background-size: 77%;
    }
    .color-7 {
        background-size: 73%;
    }
}
@media all and (min-width: 992px) and (max-width: 1199px) {
    .color-0 {
        background-size: 98%;
    }
    .color-1 {
        background-size: 75%;
    }
    .color-2 {
        background-size: 54%;
    }
    .color-3 {
        background-size: 86%;
    }
    .color-4 {
        background-size: 90%;
    }
    .color-5 {
        background-size: 98%;
    }
    .color-6 {
        background-size: 98%;
    }
    .color-7 {
        background-size: 98%;
    }
}
@media all and (max-width: 489px){
    .color-0, .color-1, .color-2, .color-3, .color-4, .color-5, .color-6, .color-7 {
        background-size: 98%;
    }
}