.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
}
.flipper-col {
    width: calc(100% / 4);
    padding: 0 10px;
    margin-bottom: 20px;
}
.flipper-item {
    position: relative;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    width: 100%;
    height: 100%;
    padding-top: calc(380/410*100%);
}
.flipper-front {
    background-color: #f7a801;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
    -webkit-transition: all .7s cubic-bezier(.5, .12, .46, .88);
    -o-transition: all .7s cubic-bezier(.5, .12, .46, .88);
    transition: all .7s cubic-bezier(.5, .12, .46, .88);
}
.flipper-front .inner {
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    -webkit-transition: all .4s cubic-bezier(.5, .12, .46, .88) .2s;
    -o-transition: all .4s cubic-bezier(.5, .12, .46, .88) .2s;
    transition: all .4s cubic-bezier(.5, .12, .46, .88) .2s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-family: RobotoBold;
}
.flipper-front .inner h3 {
    text-transform: capitalize;
    line-height: initial;
    display: -webkit-box;
    width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: Roboto-Bold;
    background: linear-gradient(to top, white 0%, rgb(0 0 0 / 30%) 70%, #0000 100%);
    font-size: 20px;
    padding-top: 50px;
    color: #333333;
}
.flipper-back {
    background-color: #1b242b;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    -webkit-transition: all .7s cubic-bezier(.5, .12, .46, .88);
    -o-transition: all .7s cubic-bezier(.5, .12, .46, .88);
    transition: all .7s cubic-bezier(.5, .12, .46, .88);
}
.flipper-back .inner {
    -webkit-transform: translateZ(125px);
    transform: translateZ(125px);
    -webkit-transition: all .4s cubic-bezier(.5, .12, .46, .88);
    -o-transition: all .4s cubic-bezier(.5, .12, .46, .88);
    transition: all .4s cubic-bezier(.5, .12, .46, .88);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    text-align: left;
    color: #fff;
}
.flipper-back h3 {
    font-size: 25px;
    font-family: Roboto-Regular;
    margin-bottom: 10px;
    line-height: initial;
    display: -webkit-box;
    width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.flipper-back p {
    font-size: 15px;
    font-family: Roboto-Regular;
    margin-bottom: 10px;
    display: -webkit-box;
    width: 100%;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.flipper-back a.xt {
    color: #fff;
    font-size: 14px;
}
.flipper-back a.xt i {
    transition: 0.4s;
}
.flipper-back a.xt:hover i {
    padding-left: 15px;
}
.flipper-front,
.flipper-back {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: center;
    justify-content: flex-end;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: flex-end;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    min-width: 100%;
    z-index: 2;
}
.flipper-back::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(27, 36, 43, 0.85);
    text-align: left;
    color: #fff;
}
.flipper-item:hover .flipper-front {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-transition: all .7s cubic-bezier(.5, .12, .46, .88);
    -o-transition: all .7s cubic-bezier(.5, .12, .46, .88);
    transition: all .7s cubic-bezier(.5, .12, .46, .88);
    height: 385px;
}
.flipper-item:hover .flipper-front .inner {
    -webkit-transform: translateZ(125px);
    transform: translateZ(125px);
    -webkit-transition: all .4s cubic-bezier(.5, .12, .46, .88);
    -o-transition: all .4s cubic-bezier(.5, .12, .46, .88);
    transition: all .4s cubic-bezier(.5, .12, .46, .88);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}
.flipper-item:hover .flipper-back {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition: all .7s cubic-bezier(.5, .12, .46, .88);
    -o-transition: all .7s cubic-bezier(.5, .12, .46, .88);
    transition: all .7s cubic-bezier(.5, .12, .46, .88)
}
.flipper-item:hover .flipper-back .inner {
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    -webkit-transition: all .4s cubic-bezier(.5, .12, .46, .88) .2s;
    -o-transition: all .4s cubic-bezier(.5, .12, .46, .88) .2s;
    transition: all .4s cubic-bezier(.5, .12, .46, .88) .2s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}


/* Fotorama + Owl */

.duan-detail-album{width: 65%;margin: 0 auto;position: relative;}
#custom-owl-prev,#custom-owl-next{position:absolute;left:-100px;top: 0;bottom: 0;z-index:9999;background:none;cursor:pointer;border:none;}
#custom-owl-prev:focus,#custom-owl-next:focus{outline: 0;}
#custom-owl-next{right:-100px;left:auto;}
.duan-detail-album .owl-nav button{display: none !important;}


.circle-animate {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    -webkit-transform: translate3D(-50%, -50%, 0);
    -moz-transform: translate3D(-50%, -50%, 0);
    -ms-transform: translate3D(-50%, -50%, 0);
    -o-transform: translate3D(-50%, -50%, 0);
    transform: translate3D(-50%, -50%, 0);
}

.circle-animate .circle {
    border: 1px solid #be69ca;
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border-radius: 95% 105% 105% 95%;
}

.circle-animate .circle:nth-child(1) {
    -webkit-animation: spin 6s linear infinite;
    -moz-animation: spin 6s linear infinite;
    -o-animation: spin 6s linear infinite;
    animation: spin 6s linear infinite;
}

.circle-animate .circle:nth-child(2) {
    -webkit-animation: spin2 6s linear infinite;
    -moz-animation: spin2 6s linear infinite;
    -o-animation: spin2 6s linear infinite;
    animation: spin2 6s linear infinite
}

.circle-animate .circle:nth-child(3) {
    -webkit-animation: spin3 6s linear infinite;
    -moz-animation: spin3 6s linear infinite;
    -o-animation: spin3 6s linear infinite;
    animation: spin3 6s linear infinite
}

.circle-animate .circle:nth-child(4) {
    -webkit-animation: spin4 6s linear infinite;
    -moz-animation: spin4 6s linear infinite;
    -o-animation: spin4 6s linear infinite;
    animation: spin4 6s linear infinite
}
@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes spin2 {
    0% {
        transform: rotate(72deg)
    }

    100% {
        transform: rotate(-288deg)
    }
}

@-webkit-keyframes spin2 {
    0% {
        -webkit-transform: rotate(72deg)
    }

    100% {
        -webkit-transform: rotate(288deg)
    }
}

@keyframes spin3 {
    0% {
        transform: rotate(-144deg)
    }

    100% {
        transform: rotate(216deg)
    }
}

@-webkit-keyframes spin3 {
    0% {
        -webkit-transform: rotate(-144deg)
    }

    100% {
        -webkit-transform: rotate(216deg)
    }
}

@keyframes spin4 {
    0% {
        transform: rotate(216deg)
    }

    100% {
        transform: rotate(-144deg)
    }
}

@-webkit-keyframes spin4 {
    0% {
        -webkit-transform: rotate(216deg)
    }

    100% {
        -webkit-transform: rotate(-144deg)
    }
}