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%;
    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
{
    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/TF_preview_1.png");
    background-repeat: no-repeat;
    background-size: 80%;
}
.color-1 {
    background-image: url("../img/TF_preview_2.png");
    background-repeat: no-repeat;
    background-size: 33%;
}
.color-2 {
    background-image: url("../img/TF_preview_3.png");
    background-repeat: no-repeat;
    background-size: 28%;
}
.color-3 {
    background-image: url("../img/TF_preview_4.png");
    background-repeat: no-repeat;
    background-size: 60%;
}
.color-4 {
    background-image: url("../img/TF_preview_5.png");
    background-repeat: no-repeat;
    background-size: 69%;
}
.color-5 {
    background-image: url("../img/TF_preview_6.png");
    background-repeat: no-repeat;
    background-size: 57%;
}