@media only screen and (max-width: 768px) {
.panel .patron-users {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
    .alert-text h1 {
        text-align: center;
        margin: 0px !important;
        font-size: 31px !important;
    }
    .category--grid {
        display: flex !important;
        flex-direction: column !important;
        margin-top: 20px;
    }
    .category {
        flex-direction: column;
    }
    
    .category .package {
        max-width: none !important;
    }
    
    .alert-block {
        margin-bottom: 0px !important;
        height: auto !important;
        padding: 28px !important;
    }
    div#content-wrapper {
        padding: 20px 0px !important;
    }
    #foot .top .left {
        display: none  !important;
    }
    div#foot .top .right {
        margin-right: auto !important;
    }
    div#foot .top {
        padding: 20px !important;
    }
    div#foot .middle {
        padding: 30px 0px !important;
        justify-content: center !important;
        align-items: center !important;
    }
    div#foot .middle .watermark {
        display: none !important;
    }
    div#foot .middle .text {
        margin: 0 auto !important;
        text-align: center !important;
    }
    .category--grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
    .container {
        padding: 0 20px !important;
    }
    #foot .container {
        padding: 0px !important;
    }
    .header--counts {
        display: none !important;
    }
    div#head .container {
        justify-content: center !important;
    }
    .user-block .text p {
        display: none !important;
    }
}
    .discount {
        text-decoration: line-through;
        color: red;
    }
.package-inner .image a {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.package-inner > a {text-decoration: none !important;display: block;}

.package-inner {
    flex: 1;
    width: 100%;
}

.package .btn {
    width: 100%;
}

.item-quantity {
    margin: 5px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.item-quantity > button {
    flex: 1;
    padding: 6px;
    font-weight: 900 !important;
    color: white;
    background: #4e2153;
    border-radius: 4px;
    border: 2px solid #69366e !important;
}

.item-quantity > button.active {
    background: #dc0c33 !important;
    color: white !important;
    border-color: #ff3f63 !important;
}

.package-inner > a .image img {
    margin: 0 auto;
}

.package-inner > a .image {
    display: flex;
}

.tab-content > .tab-pane {
    display: none !important;
}

.tab-content > .tab-pane.active {
    display: flex !important;
}
.body .full-width {
    padding: 0px !important;
}

.page-header {
    border-bottom: 2px solid #56245c !important;
}

.page-header h4 {
    font-weight: 700;
    color: white;
    font-size: 17px;
}

.form-control, .checkout .packages table tbody .quantity input {
    background: #1d0623 !important;
    border-color: #58285e !important;
    color: white !important;
    font-weight: bold;
}

input::placeholder,message::placeholder {
    color: #dbbddf !important;
}

.btn {
    outline: none !important;
    box-shadow: none !important;
}

button#purchase-button {
    padding: 18px;
    font-weight: 900;
    font-size: 15px;
}

.btn-primary {
    background: #9b43a5 !important;
}

.btn {
    font-weight: 800;
}

.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    margin: 0px !important;
}

input.form-control {}

.checkout .table > thead > tr > th {
    border: none !important;
    font-size: 14px;
}

.checkout .packages table tbody .options {
    width: 30%;
}

.checkout .packages table tbody .name {
    width: 24%;
}

.checkout .packages table tbody .buttons .btn {
    margin-left: 4px;
}

.btn-danger {
    background: #fc254d !important;
}

button.btn.btn-default.btn-sm.hidden-xs {
    background: #66316c !important;
    color: white !important;
}

.btn-success {
    background: #b043bd !important;
}

.checkout .packages table tbody .price {
    font-size: 14px;
}

.checkout .packages table tbody .name {
    font-weight: 700;
    color: white;
    font-size: 14px;
}
.title-text {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title-text:after {
    content: "";
    width: 45px;
    height: 6px;
    background: #ee143a;
    margin-bottom: 5px;
}
.category .packages-row table .button .btn.btn-danger {
    background: #f32148 !important;
}
.category--grid > .category-item {
    text-decoration: none !important;
}
.body:before,.body:after {
    display: none;
}

.body {
    display: flex;
    margin: 0px;
}

.body .content {
    width: auto;
    padding: 0;
    flex: 1;
}
.panel {
    border: none !important;
    background: #331137 !important;
    border-radius: 10px;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.panel .panel-heading {
    background: transparent !important;
    border-bottom: 2px solid #451d4a !important;
    color: white !important;
    padding: 25px;
    font-weight: 900;
    font-size: 20px;
}

.panel-body {
    padding: 25px;
    font-size: 15px;
    color: #d2b8d5;
}

.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
    background: #2a0c2f;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    border-top: 2px solid #451d4a !important;
}

.category .packages-row table .name {
    font-weight: bold;
    color: white;
}

.price {
    font-weight: bold;
    color: #93fb65;
}

.category .packages-row table td {
    padding: 15px !important;
}

.category .packages-row table .button .btn {
    font-weight: 900;
    font-size: 14px;
    border-color: transparent !important;
    border-radius: 5px !important;
    background: #6ec34a !important;
}

.modal-content {
    background: #331137 !important;
    border: none !important;
    border-radius: 12px !important;
}

.modal-header {
    padding: 25px;
    display: flex;
    align-items: center;
    color: white !important;
    border-bottom: 2px solid #4d1e53 !important;
}

.modal-header .close {
    margin-top: 0px;
    order: 5;
    margin-left: auto;
    text-shadow: none !important;
    color: #906695;
    opacity: 1;
}

.modal-title {
    font-size: 22px;
    font-weight: 800;
}

.modal-body {
    padding: 25px;
    color: #d2b8d5;
    font-size: 15px;
}

.modal-body strong,.modal-body b {
    color: white;
}

.modal-footer {
    padding: 17px 25px;
    border-top: 2px solid #4d1e53 !important;
    color: white !important;
}

.modal-footer .btn {
    font-weight: 900;
    font-size: 14px;
    border-color: transparent !important;
    border-radius: 5px !important;
    background: #6ec34a !important;
    padding: 8px 15px;
}
.panel {
    border: none !important;
    background: #331137 !important;
    border-radius: 10px;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.panel .panel-heading {
    background: transparent !important;
    border-bottom: 2px solid #451d4a !important;
    color: white !important;
    padding: 25px;
    font-weight: 900;
    font-size: 20px;
}

.panel-body {
    padding: 25px;
    font-size: 15px;
    color: #d2b8d5;
}

.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
    background: #2a0c2f;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    border-top: 2px solid #451d4a !important;
}

.category .packages-row table .name {
    font-weight: bold;
    color: white;
}

.price {
    font-weight: bold;
    color: #93fb65;
}

.category .packages-row table td {
    padding: 15px !important;
}

.category .packages-row table .button .btn {
    font-weight: 900;
    font-size: 14px;
    border-color: transparent !important;
    border-radius: 5px !important;
    background: #6ec34a !important;
}
.user-block {
    text-decoration: none !important;
}

.dropdown-menu {
    background: #411946 !important;
    border: none !important;
}

.dropdown-menu > li > a {
    background: transparent !important;
    color: white !important;
    font-weight: bold;
    text-align: center;
}

.dropdown-menu > li.active > a {
    background: #5f2865 !important;
}
a.user-block {
    text-decoration: none !important;
}
.player-wrapper .icon {
    position: relative;
}

.icon .count {
    position: absolute;
    top: 0;
    background: #ec2046;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 10px;
    left: 0;
    margin: -10px;
}

.right .icon .count {
    left: inherit;
    right: 0;
}

.player-wrapper {
    cursor: pointer;
    transition: all .12s ease;
}

.player-wrapper:hover {
    opacity: .86;
}
#belowHeader .container:after,#belowHeader .container:before {
    display: none;
}

.right .user-block {
    display: none !important;
    align-items: center;
}

.user-block h2 {
    margin: 0;
    font-size: 18px;
    color: white !important;
    font-weight: 800;
    margin-bottom: 1px;
}

#belowHeader .container {
    display: flex;
    align-items: center;
}

div#belowHeader {
    display: flex;
}

div#belowHeader .right {
    margin-left: auto;
}

.user-block .text p {
    margin-bottom: 0;
    font-size: 13px;
    color: #c799c4 !important;
    font-weight: 800;
}

.header .buttons .toolbar > div > .btn i {
    margin-right: 5px;
    color: #c799c4 !important;
    font-size: 17px;
}
#belowHeader .container:after,#belowHeader .container:before {
    display: none;
}
.user-block .text {
    line-height: 1;
}
.header {margin: 0px;}
.header .buttons {text-align: center;width: 100%;margin: 0px;}
.header .buttons .toolbar {margin: 0px;display: flex;}
.header .buttons .toolbar > div > .btn {border: none !important;background: transparent !important;font-size: 14px;color: white !important;font-weight: 800;font-family: "Prompt", sans-serif;outline: none !important;}
.user-block {display: flex;margin-right: auto;align-items: center;cursor: pointer;}
.user-block .flex {display: flex;align-items: center;}
.user-block .avatar img {max-width: 40px;border-radius: 5px;margin-right: 15px;}

.right .user-block {
    display: none !important;
    align-items: center;
}

.user-block h2 {
    margin: 0;
    font-size: 18px;
    color: white !important;
    font-weight: 800;
    margin-bottom: 1px;
}

#belowHeader .container {
    display: flex;
    align-items: center;
}

div#belowHeader {
    display: flex;
}

div#belowHeader .right {
    margin-left: auto;
}

.user-block .text p {
    margin-bottom: 0;
    font-size: 13px;
    color: #c799c4 !important;
    font-weight: 800;
}

.header .buttons .toolbar > div > .btn i {
    margin-right: 5px;
    opacity:.5;
    font-size:16px;
    color: white !important;
}
.category--grid > .category-item.other {
    background: #a4320d !important;
}

.category--grid > .category-item {border-bottom: 12px solid transparent;}
.category--grid > .category-item.other:after {
    background: linear-gradient(45deg, #ffa207, transparent);
}

.category--grid > .category-item.bundles {
    background: #00387d;
}

.category--grid > .category-item.bundles:after {
    background: linear-gradient(45deg, #2196F3, transparent);
}

.category-item.bundles p {
    color: #b1daff !important;
}

.category-item.other p {
    color: #ffe9b5 !important;
}

.category-name h1 {
    margin-top: 0px;
    position: relative;
}

.category-item:before {
    height: 45px;
    width: 7px;
    background: white;
    content: "";
    position: absolute;
    left: 0px;
    z-index: 2;
    bottom: 80px;
}

.category--grid > .category-item.ranks {
    background: #7e1027;
}
.category--grid > .category-item.ranks:after {
    background: linear-gradient(45deg, #d9082f, transparent);
}
.category--grid > .category-item.ranks p {
    color: #ff94a8;
}
.category-name h1 {
    font-weight: 900;
    color: white;
    font-size: 41px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.category-name p {
    font-size: 12px;
    color: #c799c4;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.category-name {
    display: flex;
    flex-direction: column;
    line-height: 1;
    position: relative;
    z-index: 5;
}

.category--grid > .category-item {
    padding: 50px;
    display: flex;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
}

.category--grid > .category-item:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: linear-gradient(45deg, #531f59, transparent);
}

div#head {
    position: relative;
}
.category--grid > .category-item {
    cursor: pointer;
    transition: all .13s linear;
}

.category--grid > .category-item:hover {
    transform: scale(1.02);
}
.header-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    opacity: .35;
}

.header-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(10px);
}

div#head .container {
    position: relative;
    z-index: 5;
}

.header-gradient {
    position: absolute;
    z-index: 2;
    background: linear-gradient(0deg, #26082a, transparent);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.player-wrapper .icon {
    background: linear-gradient(225deg, #3d1c41, transparent) !important;
}
h1,h2,h3,h4,h5 {
    font-family: "Prompt", sans-serif;
}
body {
    font-family: "Nunito", sans-serif;
}
.alert-top-bar .container {
    display: flex;
    align-items: center;
}
.alert-top-bar .container:before,.alert-top-bar .container:after {
    display: none;
}

.alert-top-bar .container {
    gap: 10px;
}
.alert-top-bar .container p {
    margin-right: auto;
}

.alert-top-bar .container i {
    opacity: .65;
    cursor: pointer;
}
.alert-top-bar {
    background: #d2092f;
    padding: 17px 0px;
    text-align: center;
    color: white;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.alert-top-bar p {
    margin: 0px;
}
.player-wrapper .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
div#belowHeader {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
div#foot {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.view-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

body {
    background: #1d0623;
    margin: 0px;
}

div#foot {
    margin-top: auto;
    background: #26082a;
    border-top: 7px solid #330b31;
}

div#head {
    background: #26082a;
    padding: 50px 0px;
}

div#head .container {
    display: flex;
    gap: 60px;
    align-items: center;
}

div#head .container:before,div#head .container:after {
    display: none;
}

.header--counts {
    flex: 1;
    border-left: 2px solid #41103e;
    display: flex;
    align-items: center;
    padding-left: 60px;
    height: 62px;
}

.logo {
    max-width: 264px;
}

img {
    max-width: 100%;
}

.player-wrapper .icon {
    width: 60px;
    height: 60px;
    background: #330b31;
    border-radius: 15px;
}

.player-wrapper {
    display: flex;
    align-items: center;
    gap: 25px;
}

.right .player-wrapper .icon {
    order: 5;
}

.right .player-wrapper {
    text-align: right;
}

.header--counts .right {
    margin-left: auto;
}

.player-wrapper .text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 3px;
}

.player-wrapper .text .s-text {
    order: -1;
    color: #ff2c54;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
}

.player-wrapper .text .l-text {
    font-family: "Prompt", sans-serif;
    color: white;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 24px;
}
.category--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.category--grid > .category-item {
    min-height: 225px;
    background: #2c0d30;
    border-radius: 15px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
div#content-wrapper {
    flex: 1;
    padding-top: 50px;
    padding-bottom: 75px;
}

div#foot .top {
    display: flex;
    align-items: center;
    padding: 30px 0px;
}

div#foot .top h1 {
    margin: 0px;
    color: white;
    font-weight: 900;
    font-size: 22px;
}

div#foot .top .right {
    margin-left: auto;
    display: flex;
    gap: 20px;
}

div#foot .container:after,div#foot .container:before {
    display: none;
}

div#foot span#benj {
    max-width: 47px;
    display: block;
}

div#foot span#benj svg {
    width: 100%;
    height: 100%;
}

div#foot .middle {
    display: flex;
    align-items: center;
}

div#foot .middle .watermark {
    margin-left: auto;
}

div#foot .top .right > a {
    background: #441a42;
    color: #e2b7e0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

div#foot .middle {
    padding: 40px 0px;
    border-top: 2px solid #30112f !important;
    color: #64356d;
    font-size: 12px;
    font-weight: bold;
}

div#foot .middle span {
    font-size: 14px;
    display: inline-block;
    color: #895986;
}

div#foot .middle span strong {
    color: #c799c4;
}

div#foot span#benj svg path {
    fill: #441a42;
}

div#belowHeader {
    background: #2c0d30;
    height: 92px;
    border-bottom: 7px solid #331137;
}

.container {
    width: 100%;
    max-width: 1200px;
    padding: 0px;
}
.alert-block {
    height: 150px;
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: 15px;
    position: relative;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    background: #ec0934;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert-image {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: .065;
}

.alert-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.alert-text {
    position: relative;
    color: white;
}

.alert-text h1 {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 42px;
    text-shadow: 5px 6px 0px #0000002e;
    letter-spacing: 2px;
}
.panel.panel-default.transparent {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.panel.panel-default.transparent .panel-body {
    padding: 0px !important;
}

.category {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.category .package {
    max-width: 380px;
    background: #2c0d30;
    padding: 50px;
    border: 3px solid #331137;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    transition: all .15s ease;
}

.panel.transparent .panel-heading {
    border: none !important;
    text-align: center;
    margin-bottom: 0px !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:25px 0;
    font-size: 40px;
}

.category .package .info {
    flex: 1;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.package .btn {
    padding: 10px;
    font-weight: 900;
    font-size: 17px;
}

.btn {
    border-radius: 6px !important;
    border-color: transparent !important;
}

.btn-info {
    background: #03A9F4 !important;
}

.info .price {
    font-size: 18px;
}

.category .package .info .name {
    font-size: 22px;
    font-weight: 700;
    color: white;
    font-family: "Prompt", sans-serif;
}
.panel-heading .tooltip-inner {
    background:#411946 !important;
    padding:12px;
    max-width: 400px;
}
.panel-heading .tooltip-inner p {
    margin:0;
}
.category .package:hover {
    transform: scale(1.04);
}
.panel-heading .return,.panel-heading .info {
    background: #2c0d30;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 18px;
    color: #ab73b2 !important;
    border: 2px solid #3e1643;
}

.panel-heading .return {
    margin-right: auto;
    text-decoration: none !important;
}

.panel-heading .info {
    margin-left: auto;
}

.panel.transparent .panel-heading {
    padding: 25px 0px !important;
}
.header .buttons .toolbar > div > .btn {
    background: #f21d44 !important;
    padding: 10px 20px;
    font-weight: 600 !important;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
}

.header .buttons .toolbar {
    gap: 15px;
}

.header .buttons .toolbar:before,.header .buttons .toolbar:after {
    display: none;
}

.header .buttons .toolbar > div.currency > .btn {
    background: #2196F3 !important;
}

.header .buttons .toolbar > div.basket > .btn {
    opacity: 1 !important;
    cursor: pointer !important;
}
.header .buttons .toolbar > div > .btn {
    border: 2px solid #ffffff45 !important;
}
.header .buttons .toolbar > div.patrons > .btn {
    background: #ab3acd !important;
}