.twister, .twister * {box-sizing: border-box;}

.twister {
    position: relative;
    min-height:100px;
    margin:0 -10px;
}

.twister .item {
    display: inline-block;
    vertical-align: top;
    float:left;
    box-sizing: border-box;
    padding:0 10px;
}

.tw-cont0,
.tw-cont {
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    /*overflow: auto;*/
    white-space: nowrap;
    transition: left 300ms;
}
.tw-cont {margin-left:0px;}
.tw-cont0 {
    left:0px;
    right:0px;
    overflow: hidden;
}
.tw-page {
    display: inline-block;
    white-space: normal;
    vertical-align: top;
}
.tw-arrow-right:hover,
.tw-arrow-left:hover {
    opacity: 1;
}
.tw-arrow-right,
.tw-arrow-left {
    position: absolute;
    width:20px;
    height:60px;
    top:50%;
    margin-top:-30px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 300ms;
    background:url(../images/twister/arrows2.png) no-repeat;
}
.tw-arrow-left {
    margin-left:-30px;
    left:0;
    background-position: 50% 0;
}
.tw-arrow-right {
    margin-right:-30px;
    right:0;
    background-position: 50% 100%;
}

/*************************************/
.tw-round > div > * {
    display: inline-block;
    vertical-align: middle;
}
.tw-round > div {
    border-radius: 20px;
    background:rgba(0,0,0,0.5);
    display: inline-block;
    padding:6px 20px;
}
.tw-round {
    position: absolute;
    left:0; right:0;
    bottom:15px;
    height:50px;
    text-align:center;
}
.tw-round-right,
.tw-round-left {
    background:url(../images/twister/scroll.png) no-repeat 50% -60px;
    cursor: pointer;
    width:30px;
    height:30px;
    vertical-align: middle;
}
.tw-round-right {
    background-position: 50% -92px;
}
.tw-round-pages {height:14px; margin:0 20px; line-height: 14px;}
.tw-round-pages span.sel {background:#aaa;}
.tw-round-pages span {
    display: inline-block;
    width:14px;
    height:14px;
    background:white;
    border-radius: 50%;
    margin:0 9px;
    cursor:pointer;
}
.tw-round-small .tw-round > div {background:none; padding-left:5px; padding-right: 5px;}
.tw-round-small .tw-round {bottom:0px; height:40px;}
.tw-round-small .tw-round-left,
.tw-round-small .tw-round-right {display: none !important;}
.tw-round-small .tw-scroll {display:none;}
.tw-round-small .tw-round-pages {margin:0 10px;}
.tw-round-small .tw-round-pages span {margin:0 7px;}

/*************************************/
.tw-scroll-right,
.tw-scroll-left {
    background:url(../images/twister/scroll.png) no-repeat 45% -117px;
    cursor: pointer;
    border:1px solid #7d8790;
    border-radius: 50%;
    height:46px;
    margin-top:-8px;
}
.tw-scroll-right {
    background-position: 55% -149px;
    right:0;
}
.tw-scroll > * {
    position: absolute;
    top:0;
    bottom:0;
    width:46px;
}
.tw-scroll-line-cont > * {position: absolute;}
.tw-scroll-line-cont {
    left:66px;
    right:66px;
    width:auto;
}
.tw-scroll-line {
    left:0;right:0;
    top:50%;
    margin-top:-1px;
    height:2px;
    background:#b9bfc4;
    border-radius: 3px;
    cursor: pointer;
}
.tw-scroll-button {
    background: #7d8790;
    border-radius: 5px;
    height:10px;
    top:50%;
    margin-top:-5px;
    width:50px;
    cursor: pointer;
    transition: left 300ms;
}
.tw-scroll {
    height:30px;
    position: absolute;
    bottom:0;
    left:10px;
    right:10px;
}

/*****/
@media screen and (max-width: 768px) {
    .tw-round > div {background:none;}
    .tw-round {bottom:0px; height:40px;}
    .tw-round-left,
    .tw-round-right {display: none !important;}
    
    .tw-scroll {display:none;}
    
    .tw-round-small .tw-round {display: none;}
}