@media (min-width: 992px) {

    .modal-dialog,
    .modal:before {
        display: inline-block;
        vertical-align: middle
    }

    .modal {
        text-align: center;
        padding: 0 !important
    }

    .modal:before {
        content: '';
        height: 100%;
        margin-right: -4px
    }

    .modal-dialog {
        text-align: left
    }
}

@media (min-width: 768px) {
    .slmdscoc .modal-dialog {
        width: 570px;
        margin: auto
    }
}

@media (max-width: 1200px) {

    .sl-menu>li>a,
    .slchgame .swiper-slide a h3 {
        font-size: 14px
    }

    .sl-ht2,
    .sl-htul>li {
        margin-bottom: 10px
    }

    .sl-hdtop {
        padding-top: 20px
    }

    .sl-menu {
        margin-right: 165px
    }

    .sl-logreg>li>a {
        padding: 0 10px
    }

    .sl-ht1 {
        padding: 13px 0
    }

    .slchgame .swiper-slide a span {
        width: 70px;
        height: 70px;
        line-height: 70px
    }

    .slchgame .swiper-slide a span img {
        max-height: 70px
    }

    .sl-hdbot table thead td {
        color: #b3b3b3;
        font-size: 9px
    }

    .sl-hdbot table td {
        padding: 10px;
        font-size: 12px
    }

    .sl-hdbot {
        max-height: 345px
    }

    .sl-prodli {
        width: 33.333%
    }

    .sl-ftcall {
        padding-top: 10px
    }

    .sl-ftcall span {
        font-size: 14px
    }

    .sl-ftcall strong {
        font-size: 20px
    }

    .sa-lonotis {
        width: 100%;
        max-width: 370px;
        margin: 0 auto;
        position: relative;
        top: 0;
        right: 0
    }

    .l-i-c-acc li {
        width: 16.6666667%
    }
}

@media (max-width: 992px) {

    .sl-header,
    .sl-logo img {
        height: 50px
    }

    .sl-menu,
    .sl-menu>li {
        float: none;
        width: 100%
    }

    .sl-col1,
    .sl-col2,
    .sl-menu {
        width: 100%
    }

    .sl-logo {
        left: 45px
    }

    .sl-logreg {
        top: 7px
    }

    .sl-htul {
        padding: 0 10px
    }

    .sl-menu {
        display: none;
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        margin: 0;
        z-index: 10;
        background: #000;
        -webkit-box-shadow: 0 5px 10px 1px #2f2f2f;
        -moz-box-shadow: 0 5px 10px 1px #2f2f2f;
        box-shadow: 0 5px 10px 1px #2f2f2f
    }

    .sl-icmenu {
        display: inline-block
    }

    .slshowmn.sl-menu {
        display: block
    }

    .sl-menu li~li:before {
        display: none
    }

    .sl-menu>li>a {
        display: block;
        text-align: left;
        height: auto;
        line-height: normal;
        padding: 10px;
        border-bottom: 1px solid #acacac
    }

    .sl-menu>li.active>a {
        border-bottom: 1px solid #ffea00;
        color: #ffea00
    }

    .sl-menu>li:last-child>a {
        border-bottom: none
    }

    .slchgame .swiper-slide a span {
        display: inline-block
    }

    .slchgame.swiper-container {
        margin-bottom: 20px
    }

    .sl-htul>li .sl-btn,
    .sl-htul>li>.form-control {
        height: 34px
    }

    .sl-rboxs,
    .sl-sebox,
    .sllpbox {
        padding: 10px
    }

    .sl-hdbot {
        max-height: 220px;
        margin-bottom: 10px
    }

    .sl-seckul {
        margin: 0 -5px 10px
    }

    .sl-prodli {
        width: 50%
    }

    .sl-ftadds,
    .sl-mdctit {
        margin-bottom: 10px
    }

    .sl-lrins {
        top: 7px
    }

    .l-i-c-acc li {
        width: 20%
    }
}

@media (max-width: 768px) {

    .sa-ttacc-tit,
    .sa-ttactul {
        float: none
    }

    .sa-ttactul li.sa-ttac-pri {
        display: block;
        padding: 0;
        margin-bottom: 10px
    }

    .sa-ttacc-tabs li {
        float: none;
        border-bottom: 1px solid #212121
    }

    .sa-ttacc-tabs li a {
        display: block
    }

    .sl-col2 .sl-ht3 {
        margin-bottom: 10px
    }

    .sl-sebtns {
        width: 100%;
        max-width: inherit;
        margin: 0 -3px;
        position: relative;
        top: 0;
        right: 0
    }

    .l-i-c-acc li {
        width: 25%
    }
}

@media (max-width: 680px) {
    .sl-seauls>li {
        width: 50%
    }
}

@media (max-width: 550px) {
    .sl-prifs {
        position: relative;
        padding-top: 5px
    }

    .sllpbox {
        padding: 0
    }

    .sl-prodbox {
        border: 1px solid #545454
    }

    .sl-prifbot ul {
        height: 65px
    }

    .sl-prifbot ul li {
        font-size: 14px;
        margin-bottom: 3px
    }

    .sl-primg {
        height: 120px;
        margin-bottom: 5px
    }

    .sl-prpri {
        display: block;
        position: relative;
        right: 0;
        left: 0;
        top: 0;
        padding: 0 10px
    }

    .sl-prifbot {
        padding: 10px;
        max-height: 140px
    }

    .sl-prodli:hover .sl-priftop {
        display: none
    }

    .l-i-c-acc li {
        width: 33.3333%
    }
}

@media (max-width: 450px) {

    .sl-logo img,
    .sl-logreg {
        height: 30px
    }

    .sl-ftviews li,
    .sl-ftviews li p {
        text-align: center
    }

    .sl-logo {
        top: 10px;
        left: 40px
    }

    .sl-logreg {
        width: auto;
        padding: 0 5px;
        top: 10px
    }

    .sl-logreg>li>a {
        padding: 0 2px;
        height: 30px;
        line-height: 30px
    }

    .sl-seauls>li .form-control {
        font-size: 12px
    }

    .sa-lognav-tabs {
        margin-bottom: 20px
    }

    .sa-lognav-tabs li {
        padding: 0 5px
    }

    .sa-lognav-tabs li a {
        font-size: 20px
    }

    .sa-logtct ul li .btn {
        font-size: 15px
    }

    .sa-lib-lpas {
        font-size: 12px
    }

    .sl-skips>ul>li {
        float: left;
        width: 100%;
        margin-bottom: 5px
    }

    .la-cskin ul li {
        display: block;
        margin: 0 0 5px
    }

    .la-cskin ul li .btn {
        width: 100%
    }

    .sl-ftviews li span {
        display: inline-block;
        float: none;
        margin: auto
    }

    .sl-ftviews li p {
        margin-left: 0
    }

    .l-i-c-acc li {
        width: 50%
    }

    .sa-ttac-btn a {
        margin: 0 3px
    }
}

@media (max-width: 370px) {

    .sl-primg,
    .sl-prodbox,
    .sl-prodli {
        height: auto
    }

    .sa-ttac-bott,
    .sl-prbot {
        text-align: center
    }

    .sl-prodli {
        width: 100%
    }

    .sa-ttactul li {
        margin-bottom: 10px
    }

    .sa-ttac-btn a,
    .sa-ttactul li {
        width: 100%;
        display: block;
        text-align: center
    }

    .sl-prifs {
        padding-top: 5px
    }

    .sl-prodbox {
        padding-bottom: 10px
    }

    .sl-prbot {
        position: absolute;
        display: inline-block;
        bottom: 0;
        right: 10px
    }

    .sl-lrins .dropdown button {
        width: 150px
    }
}

.ui.champion.card {
    max-width: 100px;
    margin: 5px 10px 25px;
    display: inline-block
}

.ui.champion.card.skin {
    max-width: 156px;
    margin: 5px 15px 25px;
    display: inline-block
}

.ui.champion.card.linhthu {
    max-width: 177px;
    margin: 18px 23px 33px;
    display: inline-block;
}

.ui.champion.card.chuongluc {
    max-width: 177px;
    margin: 10px 20px 33px;
    display: inline-block;
}

.ui.champion.card.sandau {
    max-width: 177px;
    margin: 10px 20px 33px;
    display: inline-block;
}

.champion-card-content {
    min-height: 30px;
    background: rgba(0, 0, 0, 0.8);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center
}

.champion-card-content,
.skin-card-content {
    position: absolute;
    top: 100%;
    width: 100%;
    font-weight: 700;
    padding: 0 .2rem;
    color: #eee;
}

.linhthu-content {
    position: absolute;
    top: 105%;
    width: 100%;
    font-weight: 700;
    padding: 0 .2rem;
    color: #eee;
}

.ui.card,
.ui.cards>.card {
    max-width: 100%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 290px;
    min-height: 0;
    background: #FFF;
    padding: 0;
    border: none;
    border-radius: .2857rem;
    box-shadow: 0 1px 3px 0 #D4D4D5, 0 0 0 1px #D4D4D5;
    -webkit-transition: box-shadow .1s ease, -webkit-transform .1s ease;
    transition: box-shadow .1s ease, -webkit-transform .1s ease;
    transition: box-shadow .1s ease, transform .1s ease;
    transition: box-shadow .1s ease, transform .1s ease, -webkit-transform .1s ease
}

.ui.card>.image,
.ui.cards>.card>.image {
    position: relative;
    display: block;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 0;
    background: rgba(0, 0, 0, .05)
}

.ui.card>:first-child,
.ui.cards>.card>:first-child {
    border-radius: .2857rem .2857rem 0 0 !important;
    border-top: none !important
}

ul.l-i-c-acc .skin-effect {
    position: relative;
    overflow: hidden;
}

@keyframes shine {
    to {
        opacity: 1;
        top: -30%;
        left: -30%;
        transition-property: left, top, opacity;
        transition-duration: 0.7s, 0.7s, 0.15s;
        transition-timing-function: ease;
    }
}

ul.l-i-c-acc .skin-effect:after {
    animation: shine 1.5s infinite linear alternate;
    content: "";
    position: absolute;
    top: -110%;
    left: -210%;
    width: 200%;
    height: 200%;
    opacity: 0;
    transform: rotate(30deg);
    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient(to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
}

ul.l-i-c-acc .skin-effect:active:after {
    opacity: 0;
}

.clothes-bg-bottom {
    background: url(../img/hr2.png) center center no-repeat;
    height: 34px;
    display: block;
    margin: 10px 0
}

.clothes-bg-top {
    background: url(../img/hr.png) center center no-repeat;
    height: 45px;
    display: block;
    margin: 10px 0;
}

#canvasContainer {
    position: relative
}

#vertical-slider {
    height: 150px;
    margin-left: 30px
}

#prizePointer {
    right: 0;
    margin-left: auto;
    margin-right: auto;
    border: none;
    cursor: pointer
}

#prizePointer img {
    width: 16%;
    border: none;
    cursor: pointer
}