.slider {
    position: relative;
    padding: 156px 0 70px;
    background: #fff
}

.slider .slider-center {
    width: 1000px;
    margin: 0 auto
}

.slider .slider-center, .slider .slider-left, .slider .slider-right {
    position: relative;
    height: 300px
}

.slider .slider-left, .slider .slider-right {
    overflow: hidden;
    -webkit-perspective: 1600px;
    perspective: 1600px
}

.slider .slider-left {
    float: left;
    width: 500px
}

.slider .slider-right {
    float: right;
    width: 460px
}

.slider .slider-content, .slider .slider-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden
}

.slider .slider-content {
    background: #fff
}

.slider .slider-content h1 {
    font-size: 24px;
    color: #333;
    text-transform: uppercase
}

.slider .slider-content h1 a {
    height: 47px;
    color: #3d4b66;
    font-size: 26px;
    line-height: 47px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden
}

.slider .slider-content h1 a:hover {
    color: #21adfc
}

.slider .slider-text {
    height: 224px;
    font-size: 16px;
    color: #666;
    line-height: 32px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden
}

.slider .slider-text p {
    margin-top: 10px
}

.slider .slider-footer {
    text-align: right;
    background: #fff
}

.slider .slider-nav {
    position: absolute;
    top: 50%;
    margin-top: -30px;
    width: 33px;
    height: 59px;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear
}

.slider .slider-nav:hover {
    opacity: 1
}

.slider .slider-prev {
    left: -100px;
    background-image: url(../images/prev.png);
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.slider .slider-prev:hover {
    background-image: url(../images/prevh.png)
}

.slider .slider-next {
    right: -100px;
    background-image: url(../images/next.png);
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.slider .slider-next:hover {
    background-image: url(../images/nexth.png)
}

.slider .slider-dots {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 500px;
    text-align: center
}

.slider .slider-dots a {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    border-radius: 50%;
    vertical-align: middle;
    text-indent: -999em
}

.slider .slider-dots a.current {
    width: 10px;
    height: 10px;
    background: #fff
}

.slider-content.active, .slider-thumbnail.current {
    z-index: 2
}

.slider-content.current, .slider-thumbnail.active {
    z-index: 1
}

.slider-thumbnail.current .bg-img {
    -webkit-transition: -webkit-transform 1.1s ease-in-out;
    transition: -webkit-transform 1.1s ease-in-out;
    transition: transform 1.1s ease-in-out;
    transition: transform 1.1s ease-in-out, -webkit-transform 1.1s ease-in-out
}

.slider-thumbnail.active .bg-tile {
    -webkit-animation: slider-scaleDown 1.1s ease-in-out;
    animation: slider-scaleDown 1.1s ease-in-out
}

.slider-content.active, .slider-content.active .slider-footer, .slider-content.active .slider-text, .slider-content.active h1, .slider-content.current, .slider-content.current .slider-footer, .slider-content.current .slider-text, .slider-content.current h1 {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slider-content h1 {
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
    -webkit-transform: translate3d(0, 60px, 0);
    transform: translate3d(0, 60px, 0)
}

.slider-content .slider-text {
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out;
    -webkit-transform: translate3d(0, 120px, 0);
    transform: translate3d(0, 120px, 0)
}

@-webkit-keyframes slider-scaleDown {
    from {
        -webkit-transform: translate3d(0, 0, 380px);
        transform: translate3d(0, 0, 380px)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slider-scaleDown {
    from {
        -webkit-transform: translate3d(0, 0, 380px);
        transform: translate3d(0, 0, 380px)
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.slider-thumbnail .bg-tile {
    position: absolute;
    overflow: hidden;
    width: 50%;
    height: 50%
}

.bg-tile:nth-child(2), .bg-tile:nth-child(4) {
    left: 50%
}

.bg-tile:nth-child(3), .bg-tile:nth-child(4) {
    top: 50%
}

.bg-img {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: #999
}

.bg-img img {
    position: absolute;
    display: block;
    width: 200%;
    max-width: 200%
}

.bg-tile:nth-child(2) .bg-img img, .bg-tile:nth-child(4) .bg-img img {
    left: -100%
}

.bg-tile:nth-child(3) .bg-img img, .bg-tile:nth-child(4) .bg-img img {
    top: -100%
}