@import "../fonts/helveticarounded/style.css";
@import "../fonts/arialroundedmt/styles.css";

/* General */
body {
    overflow-x: hidden;
    /* font-family: 'Roboto Slab', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' */
    font-family: "Arial Rounded MT";
    /* font-weight: bold; */
    color: #000;
}

p {
    line-height: 1.75;
    font-family: "Helvetica";
}

a {
    color: #808080;
    font-family: "Helvetica";
}

.light-grey {
    color: #808080;
}

.products-menu--img{
    width: 11%;
}

a:hover {
    color: #808080;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    font-family: "Helvetica";
    color: #000;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.special-container {
    position: relative;
    min-height: 180px;
}

#loader {
    color: #564f4f;
}

.close-section:focus {
    box-shadow: unset;
}

.close-section:hover {
    color: lightgray;
}

.small-text {
    font-size: 0.8rem;
}

.cover {
    z-index: 100000;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: black;
}

.btn:hover {
    filter: brightness(70%);
}

.btn-default:hover {
    background-color: rgb(242, 242, 242) !important;
    filter: unset !important;
}

.slick-slide {
    height: unset !important;
}

.enable-link {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.template-slick .icon .bookmark i,
.template-container .icon .bookmark i,
#templatePreviewModal .bookmark i {
    color: rgb(252, 209, 64);
}

#search-artist a:hover {
    color: #59d9d4;
    cursor: pointer;
}

#search-artist .card {
    border-radius: 20px;
}

#search-input .custom-dropdown {
    width: 25%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
    border-right: unset;
    border-color: rgb(166, 168, 171);
    background-color: white;
    color: #808080;
}

#search-input .btn:hover {
    background-color: white;
    color: unset;
}

#search-input .btn:focus,
#search-input .custom-dropdown:hover {
    box-shadow: unset;
    filter: unset;
}

#search-input .show>.btn-outline-secondary.dropdown-toggle {
    background-color: white;
    color: unset;
    filter: unset;
}

#search-input .dropdown-toggle::after {
    display: inline-block !important;
}

.home-page-search {
    height: 50px;
    border-radius: unset;
    border-color: rgb(166, 168, 171);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.home-page-search:focus {
    box-shadow: unset;
}

.search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    width: 50px;
    color: white;
    background-color: #59d9d4;
    padding: 0;
    border-color: transparent;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 1.6rem;
}

.search-button:hover {
    filter: brightness(70%);
}

.search-button:focus {
    outline: unset;
}

.blue-bg {
    background-image: linear-gradient(to right,
            rgb(91, 193, 205),
            rgb(98, 199, 207),
            rgb(125, 218, 215));
}

.text-primary {
    color: #59d9d4 !important;
}

.container-fluid {
    padding-left: 5%;
    padding-right: 5%;
}

.scrollbar {
    overflow-y: scroll;
}

#component .scrollbar {
    height: 430px !important;
    overflow-y: scroll;
}

.scrollbar.style1::-webkit-scrollbar-track {
    width: 10px;
    height: 10px;
    background-color: transparent;
}

.scrollbar.style1::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
}

.scrollbar.style1::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #808080;
}

/* Home */
.template-slide-mobile-show {
    position: relative;
    height: 300px;
}

.template-slide-mobile-show .swiper-container-autoheight {
    height: 100%;
}

.profile-slick {
    height: 50%;
}

/* Profile */
.brand-description {
    overflow: hidden;
    max-height: 50px;
    font-family: Arial Rounded MT;
    font-size: 14px;
    line-height: 16px;

    color: #564F4F;
}

.see-more {
    line-height: 2.75;
}

.profile-image {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: inline-block;
    background-color: #9e9293;
    background-repeat: no-repeat;
}

.profile-image.bg-center-with-image {
    overflow: hidden;
}

.profile-image.bg-center-with-image img.visible-hidden.img-fluid {
    /* max-height: 100%; */
    /* height: 100%; */
    width: 100%;
}

.profile-image.bg-center-with-image img.visible-hidden {
    visibility: hidden;
}

.profile-image-user .profile-image {
    height: 7rem;
    width: 7rem;
}

.profile-image-artist .profile-image {
    height: 5rem;
    width: 5rem;
}

.profile-image-header .profile-image {
    height: 3rem;
    width: 3rem;
}

.profile-image-tiny .profile-image {
    height: 2rem;
    width: 2rem;
}

.profile-picture-change-btn,
.brand-logo-change-btn {
    cursor: pointer;
    color: #59d9d4 !important;
}

.profile-picture-change-btn:hover,
.brand-logo-change-btn:hover {
    color: #808080 !important;
}

.yellow-box,
.pink-box {
    min-height: 130px;
    padding: 10px;
    border-radius: 10px;
    margin: 10px;
}

.yellow-box span,
.pink-box span {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.yellow-box img,
.pink-box img {
    position: absolute;
    top: 10px;
    left: 10px;
}

.purple-container {
    background-color: #685CD2 !important;
}

#photo-library-form.dropzone.purple-container {
    border: dashed 2px #594EB3;
}

.stive-nav .nav-link {
    background-color: unset !important;
    border: unset !important;
}

.stive-nav .nav-link:hover img {
    filter: brightness(80%);
}

.stive-nav .nav-link.active img {
    filter: brightness(80%);
}

.blue-container {
    background-color: #29ABE2 !important;
}

#photo-library-form.dropzone.blue-container {
    border: dashed 2px #2586B7;
}

.green-container {
    background-color: #296D68 !important;
}

#photo-library-form.dropzone.green-container {
    border: dashed 2px #1d514d;
}

#music-form.dropzone.pink-container {
    border: dashed 2px #DB3A78;
}

.photo-category {
    width: 100%;
}

#photo-library-form .dz-preview, #music-form .dz-preview, #image-post-form.dz-preview {
    margin: 40px;
}

#photo-library-form.dropzone .dz-message,
#music-form.dropzone .dz-message,
#image-post-form.dropzone .dz-message,
.drop-zone-checkbox,
.drop-zone-checkbox-subscription,
.drop-zone-checkbox-quantity,
.dz-remove,
#photo-library-form h2 ,
#music-form h2,
#image-post-form h2 {
    font-family: "Helvetica";
    color: white;
}

#photo-library-form.dropzone .dz-preview .dz-image, #music-form.dropzone .dz-preview .dz-image, #image-post-form.dropzone .dz-preview .dz-image {
    border-radius: unset;
}

#photo-library-form .drop-zone-checkbox, #music-form .drop-zone-checkbox, #image-post-form .drop-zone-checkbox {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, -65px);
}
#photo-library-form .drop-zone-checkbox-subscription, #music-form .drop-zone-checkbox-subscription, #image-post-form .drop-zone-checkbox-subscription {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, -45px);
}
#photo-library-form .drop-zone-checkbox-quantity, #music-form .drop-zone-checkbox-quantity, #image-post-form .drop-zone-checkbox-quantity {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, -25px);
}

#photo-library-form .dz-remove, #music-form .dz-remove, #image-post-form .dz-remove  {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(0, -25px);
    cursor: pointer;
    padding: 5px;
}

#photo-library-form .dz-remove:hover, #music-form .dz-remove:hover, #image-post-form .dz-remove:hover  {
    color: #59d9d4;
}

#photo-library-form .drop-zone-custom-filename .drop-zone-custom-quantity .drop-zone-custom-price, #music-form .drop-zone-custom-filename .drop-zone-custom-quantity .drop-zone-custom-price, #image-post-form .drop-zone-custom-filename .drop-zone-custom-quantity .drop-zone-custom-price {
    position: absolute;
    bottom: 0px;
    left: 0px;
    transform: translate(0, 45px);
}

#photo-library-form .drop-zone-custom-filename .drop-zone-custom-quantity .drop-zone-custom-price input, #music-form .drop-zone-custom-filename .drop-zone-custom-quantity .drop-zone-custom-price input, #image-post-form .drop-zone-custom-filename .drop-zone-custom-quantity .drop-zone-custom-price input  {
    width: 200px;
    text-align: center;
}

.photo-fa {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-10%, 30%);
}

.delete-photo {
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: inline-block;
}

#photo-video .photo {
    max-width: 23% !important;
}

#postModal .yellow-box {
    background-color: rgb(252, 209, 64);
}

#postModal .pink-box {
    background-color: rgb(237, 30, 121);
}

#photo-video .photo-album .photo,
#photo-library .photo-library .photo,
#sticker .photo-library .photo,
#gif .photo-library .photo,
#draft-photo-library .photo-library .photo,
#draft-sticker .photo-library .photo {
    border: 1px solid #dee2e6;
    margin: 10px;
    position: relative;
    height: 300px;
    overflow: hidden;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding:0;
}

.photo .image img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    width: 100%;
}

#photo-video .photo-album .photo .description p,
#photo-library .photo-library .photo .description p,
#gif .photo-library .photo .description p,
#sticker .photo-library .photo .description p,
#draft-photo-library .photo-library .photo .description p,
#draft-sticker .photo-library .photo .description p {
    position: absolute;
    bottom: 0;
    background-color: white;
    width: 100%;
    /* left: 5%; */
    height: fit-content;
    padding: unset;
    color: #808080;
    margin: unset;
    font-size: 16px;
    font-family: 'Helvetica';
    color: #564F50;
}

#photo-video .photo-album .photo .description p .date,
#photo-library .photo-library .photo .description p .date,
#sticker .photo-library .photo .description p .date,
#draft-photo-library .photo-library .photo .description p .date,
#draft-sticker .photo-library .photo .description p .date{
    font-family: 'Arial Rounded MT';
    font-size: 14px;
    color: #726969;
}

.post-details .title {
    font-size: 16px;
    font-family: 'Helvetica';
    color: #564F50;
}

.post-details .date {
    font-family: 'Arial Rounded MT';
    font-size: 14px;
    color: #726969;
}

.blog-container {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
}

.blog .thumbnail {
    height: 300px;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
}

.blog p {
    padding: unset !important;
}

.blog .border {
    border-radius: 10px;
    /* width: 250px; */
    display: inline-block;
    background-color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

/* Story */
.stive-section {
    position: relative;
}

.stive-section .section-phone {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(10%, -3%);
}

/* Artists */
.artists-menu,
.bg-img-container {
    /* height: 15.6875rem; */
    background-color: #808080;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

/* Search */
#search .template-container {
    position: relative;
    height: 120px;
    margin: 1rem;
    border-radius: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media (min-width: 768px) {
    #search .template-container {
        height: 27rem;
    }
}

.image-container {
    position: relative;
    text-align: center;
    color: black;
}

.artwork-status {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #59d9d4;
    min-width: 40%;
    min-height: 10%;
    margin: 0;
    padding-top: 10px;
}

.artist-slick {
    height: 75%;
}

.remove-button-style {
    outline: 0;
    border: 0;
    background-color: transparent;
}

.contact-form-social-media {
    font-size: 1.5rem;
    color: white;
}

.contact-form-social-media i {
    background-color: #59d9d4;
    padding: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    margin-right: 10px;
    align-items: center;
    line-height: 30px;
}

.navbar {
    min-height: 10%;
}

.page-section {
    padding: 100px 0;
}

.page-section h2.section-heading {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 15px;
}

.page-section h3.section-subheading {
    font-size: 16px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 75px;
    text-transform: none;
    font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

::-moz-selection {
    background: #59d9d4;
    text-shadow: none;
}

::selection {
    background: #59d9d4;
    text-shadow: none;
}

img::-moz-selection {
    background: 0 0;
}

img::selection {
    background: 0 0;
}

img::-moz-selection {
    background: 0 0;
}

.btn {
    font-family: "Helvetica";
    font-weight: 700;
}

.btn-xl {
    padding: 15px 30px;
    margin-top: 5px;
}

.btn-l {
    padding: 0.8rem 1.5rem;
    margin-top: 5px;
}

.btn-primary {
    background-color: #59d9d4 !important;
    border-color: #59d9d4;
    font-size: 1rem;
    color: #ffffff;
    letter-spacing: 1px;
    line-height: 15px;
    border: 0px solid rgba(108, 89, 179, 0.75);
    border-radius: 40px;
    transition: all 0.3s ease 0s;
}

.btn-grey {
    background-color: #C4C4C4 !important;
    border-color: #C4C4C4;
    font-size: 1rem;
    color: #ffffff;
    letter-spacing: 1px;
    line-height: 15px;
    border: 0px solid rgba(108, 89, 179, 0.75);
    border-radius: 40px;
    transition: all 0.3s ease 0s;
}

.btn-subscribe{
    background-color: #FFFFFF !important;
    border-color: #FFFFFF;
    font-size: 1rem;
    color: #000000;
    letter-spacing: 1px;
    line-height: 15px;
    border: 0px solid rgba(108, 89, 179, 0.75);
    border-radius: 40px;
    transition: all 0.3s ease 0s;
}

.btn-primary.btn-black-white {
    color: black !important;
    background-color: white !important;
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
    background-color: #59d9d4;
    border-color: #59d9d4;
    color: #ffffff;
}

.btn-default {
    background-color: transparent !important;
    border-color: #59d9d4;
    font-size: 13px;
    color: #000;
    letter-spacing: 1px;
    line-height: 15px;
    border: 1px solid rgba(108, 89, 179, 0.75);
    border-radius: 40px;
    transition: all 0.3s ease 0s;
}

.btn-preview {
    background-color: #ffffff !important;
    font-size: 13px;
    color: grey;
    letter-spacing: 1px;
    line-height: 15px;
    border-radius: 40px;
    transition: all 0.3s ease 0s;
    box-shadow: gray 1px 1px;
}

.link-preview {
    cursor: pointer;
}

.btn-preview:hover {
    color: #59d9d4;
    filter: brightness(110%);
}

.btn-preview :focus {
    color: #59d9d4;
}

.btn-preview :focus {
    color: #59d9d4;
}

.logo {
    /* filter: invert(30%) sepia(0%) saturate(2%) hue-rotate(214deg) brightness(97%) contrast(90%); */
}

.white-logo .logo {
    /* filter: invert(100%) sepia(100%) saturate(38%) hue-rotate(321deg) brightness(110%) contrast(110%); */
}

#mainNav.navbar-shrink .main {
    /* filter: invert(0) sepia(0) saturate(0) hue-rotate(0) brightness(0) contrast(0); */
}

#mainNav .main.logo {
    display: block;
}

#mainNav .second.logo {
    display: none;
}

#mainNav.navbar-shrink .main.logo {
    display: none;
}

#mainNav.navbar-shrink .second.logo {
    display: block;
}

#mainNav .navbar-toggler {
    font-size: 18px;
    right: 0;
    padding: 13px;
    text-transform: uppercase;
    border: 0;
    background-color: #ffffff;
    color: black;
    border-color: black;
    border: 1px solid black;
    border-radius: 40px;
    font-family: "Helvetica";
}

#mainNav {
    transition: 0.25s;
}

#mainNav li a {
    font-size: 90%;
    font-weight: 400;
    padding: 0.5em 1em !important;
    letter-spacing: 1px;
    color: #564f4f;
    font-family: "Helvetica";
}

.dropdown-product span {
    font-size: 70%;
    font-weight: 400;
    color: #000000;
    font-family: "Arial Rounded MT";
}

.user-nav #mainNav li a {
    text-shadow: none;
}

.navbar a {
    color: #564f4f;
}

.nav-card{
    width: 35px;
    height: 35px;
}

#mainNav .dropdown-menu a {
    color: #564f4f !important;
}

#mainNav.navbar-shrink .dropdown-menu a.nav-link.dropdown-item, #mainNav.navbar-shrink .dropdown-menu a.nav-link.dropdown-item-no-active {
    color: #564f4f !important;
}

#mainNav .navbar-nav .nav-item .nav-link {
    transition: all linear .3s;
}

#mainNav .navbar-nav .nav-item .nav-link.active {
    color: rgb(35, 168, 182) !important;
    font-family: "Helvetica";
    background-color: unset;
}


#mainNav .navbar-nav .nav-item .nav-link:not(.active):hover {
    color: rgb(35, 168, 182) !important;
    font-family: "Helvetica";
    /* background-color: unset; */
}

#mainNav .navbar-nav .nav-item .nav-link.active:hover {
    color: rgba(255, 255, 255, 1) !important;
    font-family: "Helvetica";
    background-color: unset;
}

#mainNav.contest-navbar .navbar-nav .nav-item .nav-link.active {
    color: rgb(35, 168, 182) !important;
    font-family: "Helvetica";
    background-color: unset;
}


#mainNav.contest-navbar .navbar-nav .nav-item .nav-link:not(.active):hover {
    color: rgb(35, 168, 182) !important;
    font-family: "Helvetica";
    /* background-color: unset; */
}

#mainNav.contest-navbar .navbar-nav .nav-item .nav-link.active:hover {
    color: rgb(0, 0, 0)important;
    font-family: "Helvetica";
    background-color: unset;
}

#mainNav.contest-navbar.navbar-shrink .navbar-nav .nav-item .nav-link.active {
    color: rgb(0, 0, 0) !important;
    font-family: "Helvetica";
    background-color: unset;
}
#mainNav.contest-navbar.navbar-shrink .navbar-nav .nav-item .nav-link:not(.active):hover {
    color: rgb(0, 0, 0) !important;
    font-family: "Helvetica";
    /* background-color: unset; */
}
#mainNav.contest-navbar.navbar-shrink .navbar-nav .nav-item .nav-link.active:hover {
    color: rgba(255, 255, 255, 1) !important;
    font-family: "Helvetica";
    background-color: unset;
}

#mainNav .nav-link.active,
.show>.nav-link {
    background-color: unset !important;
}

#mainNav.navbar-shrink .logo {
    /* max-height: 2.5rem !important; */
}

#mainNav.navbar-shrink {
    /* padding-top: 0rem !important; */
    /* padding-bottom: 0rem !important; */
}

#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link {
    color: white;
    /* font-size: 80%; */
}

#mainNav.contest-navbar.navbar-shrink .navbar-nav .nav-item .nav-link.active {
    color: black;
    /* font-size: 80%; */
}

#mainNav.navbar-shrink .btn-default {
    background-color: white !important;
    border-color: transparent;
    color: #564f4f;
}

#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link {
    /* background-color: #212529; */
    background-color: transparent;
    color: white;
}

#mainNav .nav-item.languages {
    padding: 5px 10px;
    color: #564f4f;
}

#mainNav.navbar-shrink .nav-item.languages span,
#mainNav.navbar-shrink .nav-item.languages a {
    color: white;
}

#mainNav .nav-item.languages a {
    padding: 15px 0px !important;
}

#mainNav .nav-item.languages span.font-weight-bold a {
    text-decoration: underline;
}

.buffer {
    background: rgb(74, 179, 201);
    background: -moz-linear-gradient(90deg,
            rgba(74, 179, 201, 1) 0%,
            rgba(54, 196, 194, 1) 100%);
    background: -webkit-linear-gradient(90deg,
            rgba(74, 179, 201, 1) 0%,
            rgba(54, 196, 194, 1) 100%);
    background: linear-gradient(90deg,
            rgba(74, 179, 201, 1) 0%,
            rgba(54, 196, 194, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4ab3c9", endColorstr="#36c4c2", GradientType=1);
    min-height: 10rem;
}

.float-buffer {
    /* position: absolute; */
    width: 100%;
    margin-top: -5rem;
}

.relative-buffer {
    /* margin-top: 8rem; */
}

@media (max-width: 425px) {
    .float-buffer {
        position: relative;
        margin-top: 0;
        padding-top: 5rem;
    }

    .relative-buffer {
        margin-top: 0;
    }
}

.user-nav {
    /* background-color: #5DBCD2; */
    background: rgb(74, 179, 201);
    background: -moz-linear-gradient(90deg,
            rgba(74, 179, 201, 1) 0%,
            rgba(54, 196, 194, 1) 100%);
    background: -webkit-linear-gradient(90deg,
            rgba(74, 179, 201, 1) 0%,
            rgba(54, 196, 194, 1) 100%);
    background: linear-gradient(90deg,
            rgba(74, 179, 201, 1) 0%,
            rgba(54, 196, 194, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4ab3c9", endColorstr="#36c4c2", GradientType=1);
}

.user-nav .navbar a {
    /* color: white !important; */
}

.user-nav .dropdown-menu a {
    color: #564f4f !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #59d9d4;
}

header.masthead {
    color: black;
    padding: 0 0em;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
}

header.masthead .intro-text {
    padding-top: 150px;
    padding-bottom: 100px;
}

header.masthead .intro-text .intro-lead-in {
    font-size: 22px;
    font-style: italic;
    line-height: 22px;
    margin-bottom: 25px;
    font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

header.masthead .intro-text .intro-heading {
    font-size: 50px;
    font-weight: 700;
    line-height: 50px;
    margin-bottom: 25px;
    font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.body-image {
    height: 700px;
    width: auto;
    background-repeat: no-repeat;
    background-size: contain;
}

.inner-text {
    font-size: 36px;
}

.learn-icon {
    height: 35px;
    padding: 10px;
}

.card-option {
    border-radius: 10%;
    text-align: center;
}

.card-logo {
    height: 30px;
    width: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.col-md-3-5 {
    -ms-flex: 0 0 19.8333335%;
    flex: 0 0 19.8333335%;
    max-width: 19.8333335%;
}

.latest-design {
    position: relative;
    height: 250px;
    /* width: 200px !important; */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /* padding: 0 7.5px; */
}

.actions-bar {
    position: absolute;
    top: 0;
    right: 0;
}

/* .latest-design::before {
    content: '';
    display: block;
    padding-bottom: 177.78%;
} */

.latest-design:hover {
    opacity: 1;
}

.latest-design-fa {
    padding: 5px;
    font-size: 16px;
}

#slick .slick-list {
    margin-left: -15px;
    margin-right: -15px;
}

#slick .slick-slide {
    padding-right: 15px;
    padding-left: 15px;
}

#slick .slick-slide:focus {
    outline: none;
}

.slick-prev,
.slick-next {
    color: black;
}

.slick-prev:before,
.slick-next:before {
    color: black;
}

.artist-showcase {
    height: 400px !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.brand-text {
    text-align: justify;
}

.section-bg {
    background-color: #f3efee;
}

.section-title {
    text-align: center;
    padding: 24px;
}

.settings-profile-image {
    height: 75px !important;
    width: auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
}

.settings-payment-image {
    height: 100px !important;
    width: auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
}

.profile-tab {
    min-height: 30%;
}

.profile-tab p {
    color: rgb(196, 189, 191);
    padding: 20px;
}

#music-table .btn-success {
    pointer-events: none;
}

#music-table .btn-warning {
    pointer-events: none;
}

p.card-text {
    padding: unset;
}

.footer {
    padding: 20px 0;
    text-align: center;
    left: 0;
    bottom: 0;
    width: 100%;
    position: fixed;
    background-color: white;
}

.footer-bg {
    background-color: #59d9d414;
    color: white;
}

.footer span.copyright {
    font-size: 90%;
    line-height: 40px;
    text-transform: none;
    font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.footer ul.quicklinks {
    font-size: 90%;
    line-height: 40px;
    margin-bottom: 0;
    text-transform: none;
    font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.socials {
    line-height: 50px;
}

ul.social-buttons {
    margin-bottom: 0;
}

ul.social-buttons li a {
    font-size: 20px;
    line-height: 50px;
    display: block;
    width: 50px;
    height: 50px;
    transition: all 0.3s;
    color: #fff;
    border-radius: 100%;
    outline: 0;
    background-color: #212529;
}

ul.social-buttons li a:active,
ul.social-buttons li a:focus,
ul.social-buttons li a:hover {
    background-color: #59d9d4;
}

.search-modal {
    min-height: 100vh;
}

.search-icon {
    width: 15px;
    margin-top: -3%;
}

.round-hashtag {
    border-radius: 20px;
    color: #9d9193;
    font-size: 12.8px;
    font-family: "Arial Rounded MT";
}


.round-hashtag:hover {
    text-decoration: none;
    color: #59d9d4;
    border-color: #59d9d4;
}

/* .modal-dialog {
    margin: auto;
    max-width: none;
} */

.learn-modal {
    position: fixed;
    bottom: 0;
    left: 0;
    height: auto;
    top: unset;
}

.learn-modal-content {
    border-radius: 45px;
}

.modal-title {
    text-align: center;
}

.modal-image {
    height: 150px;
    width: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.modal-guide-image {
    height: 50px;
    width: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.modal-body-title {
    text-align: center;
}

.btn-filter {
    padding: 15px 30px;
    margin-left: -10px;
    border-radius: 0 25px 25px 0;
}

.search-bar {
    border-radius: 25px 0 0 25px;
}

.dropdown-menu {
    left: unset;
}

.dropdown-menu-right {
    border: none;
}

.btn-select {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 99;
    min-width: 120px;
    line-height: 15px;
    height: 38px;
}

.btn-preview {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 130%);
    z-index: 99;
    min-width: 120px;
    height: 38px;
}

.template-container .icon,
.template-slick .icon {
    position: relative;
}

.template-container .icon .float-icon {
    position: absolute;
    top: 1rem;
    width: 35px;
    height: 35px;
    padding: 8px;
    font-size: 1.2rem;
    background-color: rgb(243, 243, 243);
    border-radius: 5px;
    text-align: center;
    color: #808080;
}

.float-icon {
    /*position: absolute;*/
    border-radius: 50%;
    width: 35px;
    height: 35px;
    padding: 5px;
    background-color: white;
    border: solid 0.5px lightgray;
}

.paid-artwork {
    position: absolute;
    display: flex;
    gap: 8px;
    top: 8px;
    left: 10px;
}

.float-icon.user-subscribed-artwork{
    /*top: 1rem;*/
    /*left: 50px;*/
    /*padding-top: 3px;*/
    /*padding: 8px;*/
}

.float-icon.special-icon {
    top: 1rem;
    left: 50px;
}


.template-container .actions-bar-2 {
    opacity: 0;
    transition: .3s;
}

.template-container:hover .actions-bar-2 {
    opacity: 1;
}


.template-container .icon .top-right-icon,
.template-slick .icon .top-right-icon {
    position: absolute;
    top: 1rem;
    right: 0rem;
    width: 35px;
    height: 35px;
    padding: 8px;
    font-size: 1rem;
    background-color: rgb(243, 243, 243);
    border-radius: 5px;
    text-align: center;
    color: #808080;
    vertical-align: middle;
}

.template-container .report-artwork,
.template-slick .report-artwork {
    cursor: pointer;
}

.template-container .icon i:hover,
.template-slick .icon i:hover {
    opacity: 0.5;
}

.template-slick a.btn-primary:focus,
.template-slick a.btn-primary:active,
.template-slick a.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    color: black;
    box-shadow: grey 1px 1px;
}

.template-artist {
    width: 100%;
}

@media (min-width: 768px) {
    .template-artist {
        /* width: 250px; */
        margin: 0 auto;
    }
}

.blog-mobile-show .thumbnail {
    height: auto;
}

.blog-mobile-show .swiper-wrapper {
    height: auto !important;
}

@media (min-width: 768px) {
    .blog-mobile-show .thumbnail {
        height: auto;
    }
}

/* .login-modal-header {
    .close {
        margin-top: -1.5rem;
    }
} */

.login-modal-body {
    padding: 0.5em;
}

.login-modal-header.modal-header .close {
    padding: 0;
}

@media (min-width: 576px) {
    .modal-dialog {
        margin: 0.75rem auto;
    }
}


.login-form-title {
    margin: -2rem 0rem 2rem;
    padding: 0.5em;
}

.login-btn-round {
    border-radius: 3rem;
}

.delimiter {
    padding: 1rem;
}

/* .login-social-buttons {
    .btn {
        margin: 0 0.5rem 1rem;
    }
} */

.signup-section {
    padding: 0.3rem 0rem;
}

.modal-backdrop.show {
    z-index: 1031;
}

.login-modal-content {
    border-radius: 25px;
    padding: 1em;
}

.input-round {
    border-radius: 25px !important;
}

.input-round-half-left {
    border-top-left-radius: 25px !important;
    border-bottom-left-radius: 25px !important;
    border-bottom-right-radius: unset;
    border-top-right-radius: unset;
}

.input-round-half-right {
    border-top-right-radius: 25px !important;
    border-bottom-right-radius: 25px !important;
    border-bottom-left-radius: unset;
    border-top-left-radius: unset;
}

.hr-text {
    line-height: 1em;
    position: relative;
    outline: 0;
    border: 0;
    color: black;
    text-align: center;
    height: 1.5em;
    opacity: 0.5;
}

.hr-text:before {
    content: "";
    background: linear-gradient(to right, transparent, #818078, transparent);
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
}

.hr-text:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    color: black;
    padding: 0 0.5em;
    line-height: 1.5em;
    color: #818078;
    background-color: #fcfcfa;
}

.profile {
    border-radius: 50px;
    width: 80%;
}

.profile-dp {
    height: 75px !important;
    width: auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.brand-dp {
    height: 150px !important;
    width: auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.nav-tabs {
    padding: 0.5%;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #59d9d4 !important;
    border: unset;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border: unset;
}

.edit-profile {
    border: 1px solid grey;
    border-radius: 25px;
}

.edit-profile .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #59d9d4;
    background-color: unset;
}

.settings-border-bottom {
    border-bottom: 1px solid grey;
}

.settings-border-right {
    border-right: 1px solid grey;
}

.nav-link.active,
.show>.nav-link {
    color: white;
    background-color: #5dbcd2;
    border-radius: 20px;
    font-family: "Helvetica";
}

.secondary-bg {
    background-color: #f9f9f9;
}

.nav-pills {
    font-family: "Helvetica";
}

.fancybox-slide {
    display: block;
}

.popup-button {
    position: absolute;
    display: grid;
    z-index: 99999;
}

.popup-fa {
    font-size: 32px;
    color: white;
}

.popup-fa:hover {
    font-size: 32px;
    color: white;
    filter: brightness(110%);
}

.template-title {
    font-weight: 600;
}

.template-caption {
    position: absolute;
    bottom: 1rem;
    left: 0;
    padding: 5px;
    background-color: gray;
    width: -webkit-fill-available;
    text-align: center;
    line-height: 1.2;
    color: white;
    text-align: left;
}

/* Contact */
#contact-form select,
#contact-form input,
#contact-form textarea {
    color: white;
    background-color: transparent;
}

#contact-form select option {
    color: black;
}

#contact-form input::placeholder {
    font-weight: bolder;
}

.simplified-tiles {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    height: 300px;
    width: auto;
}

.simplified-tiles:hover {
    filter: brightness(90%);
}

.simplified-title {
    color: white;
    padding: 10px;
    font-size: 20px;
    font-weight: 600;
}

.category-tiles {
    display: flex;
    margin: auto;
    width: 60px;
    height: 60px;
}

.center-image {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

hr {
    height: 1px;
    color: white;
    /* background: #ed1d61; */
    font-size: 0;
    border: 0;
}

hr.black {
    border-top: 0.5px solid black;
    width: 90%;
}

hr.light-grey {
    border-top: 0.5px solid #cbcbcb;
    width: 90%;
}

hr.black-full {
    border-top: 0.5px solid black;
    width: 100%;
}

hr.gray {
    border-top: solid 1px gray;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    width: 100%;
}

.talent-bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 300px;
}

.contest-bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.contest-slider {
    background-repeat: no-repeat;
    background-position: center;
}

.forum-bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.navbar-nav li:hover>ul.dropdown-menu {
    display: block;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
}

/* rotate caret on hover */
.dropdown-menu>li>a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
}

.creator-bg {
    background-image: url("images/be-a-creator.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.testimonial-bg {
    background-color: rgb(249, 247, 257);
}

.header-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.footer-social {
    list-style-type: none;
    display: inline;
}

.footer-social li {
    display: inline;
    padding: 1px;
}

.page-footer h5 {
    color: white !important;
}

.featured-logo {
    height: 30px;
    margin: 10px;
}

.nav-logo {
    font-size: 1.1rem;
}

.modal {
    padding: 0px 15px !important;
}

.card {
    border-radius: 20px;
}

.card-img-top {
    position: relative;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* .slick-slide{
    height:auto;
} */

.quote-sign {
    position: absolute;
    left: -15%;
    top: 20%;
}

hr.testimonial {
    border-top: 1px solid grey;
    width: 10%;
}

.text-white {
    color: white !important;
}

.card.pricing-card {
    width: 100%;
}

@media (min-width: 768px) {
    .card.pricing-card {
        position: absolute;
        top: -15%;
        z-index: 99;
        width: 20rem;
    }
}

.pricing-card-header {
    background: none !important;
}

.faq-accordion {
    border-top: none;
    border-left: none;
    border-right: none;
}
.hr-top {
    border-top: 1px solid #cbcbcb;
}

.hr-top-bot {
    border-top: 1px solid #cbcbcb;
    border-bottom: 1px solid #cbcbcb;
}

.circle-fa {
    display: inline-block;
    border-radius: 60px;
    box-shadow: 0px 0px 2px #888;
    padding: 0.5em 0.6em;
}

.share-pill {
    color: #59d9d4 !important;
    background-color: transparent !important;
}

#shareSelector {
    color: #564f4f;
    font-family: "helvetica";
}

.testimonial-text {
    text-align-last: center;
    font-family: "helvetica";
}

.phone {
    width: 60px;
    height: 100px;
    background-color: #c2c2c2;
}

.square {
    width: 100px;
    height: 75px;
    background-color: #c2c2c2;
}

.lower-square {
    width: 100px;
    height: 75px;
    background-color: #c2c2c2;
}

.contest-pic {
    max-height: 500px;
}

/* .slick-next {
    right: -20px;
} */


.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.custom-swiper-button .swiper-button-prev.swiper-button-border {
    outline: none;
    left: -2px;
}

.custom-swiper-button .swiper-button-next.swiper-button-border {
    outline: none;
    right: -2px;
}

@media (max-width: 768px) {

    /* .slick-next {
        display: none !important;
    } */
    #mainNav {
        /* background-color: white; */
        /* background-color: #212529; */
    }

    #mainNav.creator-menu {
        background-color: transparent;
    }

    .round-hashtag {
        font-size: 12px;
    }
}

/* .search-modal-dialog{
    width:80%;
} */

.fancybox-slide {
    padding: 141px 6px 0;
}

.dropdown-toggle::after {
    display: none !important;
}

/* .dropdown-menu.show {
    position: absolute;
    will-change: transform;
    top: 66px !important;
    right: 0px !important;
    left: unset !important;
    transform: translate3d(0px, 0px, 0px);
    width: 200px;
    left: unset !important;
} */

.learn-more-modal {
    border-radius: 40px;
}

ol.d {
    list-style-type: lower-alpha;
}

ol.e {
    list-style-type: lower-roman;
}

.agreement-table .col-md-6 {
    border: 0.1px solid #564f4f;
}

.refer-card {
    border-radius: 50px;
    width: 40%;
    border: 1px solid #564f4f;
}

.slick-slide {
    outline: none;
}

.right-rounded {
    border-radius: 0 25px 25px 0;
}

.artwork-fa {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-90%, 70%);
}

.duplicate-fa {
    position: absolute;
    top: 22px;
    right: 3px;
    transform: translate(-90%, 70%);
    color: #000000;
}

.notification-card {
    border-radius: 50px;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: #fff;
}

.big-titles {
    height: 90vh;
}

.small-titles {
    height: 45vh;
}

.project-name:hover .btn-edit {
    display: inline-block!important;
    cursor: pointer;
}

.input-project-name {
    z-index: 9999;
}

@media (min-width: 300px) {
    .m-top {
        margin-top: 90px;
    }

    .inner-text,
    .learn-more {
        text-align: center;
    }
}

@media (min-width: 320px) {
    .profile-row {
        padding-top: 0%;
    }

    #mainNav.navbar-shrink {
        background-image: linear-gradient(90deg, rgba(74, 179, 201, 1) 0%, rgba(54, 196, 194, 1) 100%);
        color: white;
    }

    .pill-row {
        margin-top: 100%;
    }

    .header-height {
        min-height: 20%;
    }

    .profile {
        margin-top: -10%;
    }
}

@media (min-width: 375px) {
    .header-height {
        min-height: 10%;
    }

    .pill-row {
        margin-top: 100%;
    }
}

@media (min-width: 425px) {
    .header-height {
        min-height: 20%;
    }

    .pill-row {
        margin-top: 50%;
    }

    .profile {
        margin-top: -8%;
    }
}

@media (min-width: 576px) {
    .login-modal-dialog {
        max-width: 400px;
    }
}

@media (min-width: 768px) {
    .profile-row {
        padding-top: 30%;
    }

    .pill-row {
        margin-top: 20%;
    }

    .header-height {
        min-height: 97px;
    }

    section {
        padding: 150px 0;
    }

    .h-md-100 {
        height: 100vh;
    }

    .popup-button {
        top: 14%;
        right: 0%;
    }

    .m-top {
        margin-top: 150px;
    }

    header.masthead .intro-text {
        padding-top: 300px;
        padding-bottom: 200px;
    }

    header.masthead .intro-text .intro-lead-in {
        font-size: 40px;
        font-style: italic;
        line-height: 40px;
        margin-bottom: 25px;
        font-family: "Droid Serif", -apple-system, BlinkMacSystemFont,
            "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
            "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
            "Noto Color Emoji";
    }

    header.masthead .intro-text .intro-heading {
        font-size: 75px;
        font-weight: 700;
        line-height: 75px;
        margin-bottom: 50px;
        font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
            "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }

    .inner-text,
    .learn-more {
        text-align: left;
    }

    .profile {
        margin-top: -12rem;
    }
}

@media (min-width: 1024px) {
    .m-top {
        margin-top: 150px;
    }

    .profile {
        margin-top: -14rem;
    }
}

@media (min-width: 1280px) {
    .m-top {
        margin-top: 200px;
    }

    .profile {
        margin-top: -15rem;
    }
}

@media (min-width: 1366px) {
    .profile-row {
        padding-top: 25%;
    }

    .pill-row {
        margin-top: 10%;
    }

    .header-height {
        min-height: 20%;
    }

    .popup-button {
        top: 19%;
        right: 17%;
    }
}

@media (min-width: 1920px) {
    .popup-button {
        top: 17%;
        right: 24%;
    }
}

@media (max-width: 425px) {
    #mainNav .navbar-toggler {
        position: absolute;
        right: 5%;
        top: 7%;
    }

    .success-text-container {
        position: absolute;
    }

    .success-description {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 2rem;
        background-color: rgba(255, 255, 255, 0.5);
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {

    .artist-slick {
        height: 20%;
    }

    #templatePreviewModal #artist_name {
        padding: 0 15px;
    }

    /* Mobile Nav item */
    #mainNav li a {
        text-shadow: none;
    }

    /* Preview Template */
    #templatePreviewModal .modal-dialog {
        width: calc(100% - 70px);
    }

    /* Music Collection */
    .music-player {
        position: relative;
        width: 350px;
        height: 290px;
        margin: 150px auto;
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.4);
        border-radius: 10px;
        background: rgb(74, 179, 201);
        overflow: hidden;
        z-index: 0;
    }

    .music-player img {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        z-index: -1;
        display: block;
        width: 100% !important;
        height: 100% !important;
        -webkit-filter: blur(2px);
        filter: blur(2px);
    }

    .music-player .info {
        width: 100%;
        height: 100px;
        background: rgb(74, 179, 201);
        text-align: center;
        position: relative;
    }

    .music-player .info .jp-playlist li {
        display: none;
    }

    .music-player .info .jp-playlist li a {
        font-size: 30px;
        font-weight: 300;
        text-decoration: none;
        color: #fff;
        color: rgba(225, 225, 225, 0.4);
    }

    .music-player .info .jp-playlist li a span {
        font-size: 14px;
        display: block;
        margin-top: 10px;
    }

    .music-player .info .jp-playlist li.jp-playlist-current {
        display: block;
    }

    .music-player .info .jp-playlist li .jp-free-media,
    .music-player .info .jp-playlist li .jp-playlist-item-remove {
        display: none;
    }

    .music-player .info .left,
    .music-player .info .right {
        width: 25px;
        position: absolute;
        top: 30px;
        left: 30px;
    }

    .music-player .info .right {
        left: auto;
        right: 30px;
    }

    .music-player .info [class^="icon-"] {
        margin: 0 0 10px;
    }

    /* .music-player .info .center {
    padding: 20px 0 0;
} */
    .music-player .progress,
    .music-player .volume-level {
        width: 100%;
        height: 5px;
        display: block;
        background: rgb(74, 179, 201);
        position: absolute;
        bottom: 0px;
        cursor: pointer;
        border: none;
    }

    .music-player .progress .ui-slider-range,
    .music-player .volume-level .ui-slider-range {
        display: block;
        background: #ed553b;
        height: 5px;
        border-radius: 0;
    }

    .music-player .progress .ui-slider-handle,
    .music-player .volume-level .ui-slider-handle {
        position: absolute;
        top: -8px;
        width: 8px;
        height: 22px;
        background: url("//i.imgur.com/tsqwz1N.png") no-repeat center;
        border: none;
        outline: none;
        margin: 0 0 0 -3px;
        cursor: move;
    }

    .music-player .controls {
        text-align: center;
        width: 100%;
        height: 190px;
        background: #fff;
    }

    .music-player .controls .current {
        font-size: 28px;
        color: #000;
        padding: 15px 0 20px;
    }

    .music-player .controls .play-controls a {
        display: inline-block;
        width: 35px;
        height: 40px;
        margin: 0 30px;
    }

    .music-player .controls .volume-level {
        position: relative;
        bottom: auto;
        width: 200px;
        height: 2px;
        margin: 30px auto 0;
        background: rgba(225, 225, 225, 0.3);
    }

    .music-player .controls .volume-level .ui-slider-range {
        height: 2px;
    }

    .music-player .controls .volume-level .ui-slider-handle {
        top: -8px;
        margin-left: -9px;
        width: 22px;
        height: 22px;
        background-image: url("//i.imgur.com/V5i67V2.png");
    }

    .music-player .controls .volume-level .icon-volume-up,
    .music-player .controls .volume-level .icon-volume-down {
        position: absolute;
        right: -34px;
        top: -8px;
        width: 22px;
    }

    .music-player .controls .volume-level .icon-volume-down {
        right: auto;
        left: -27px;
    }

    [class^="icon-"] {
        width: 18px;
        height: 18px;
        background: url("//i.imgur.com/E09T8tf.png") no-repeat center;
        display: block;
    }

    .icon-play {
        background-image: url("//i.imgur.com/xlBv5aR.png");
    }

    .music-player h1,
    .music-player h6 {
        color: #fff;
    }

    .stive-section {
        position: relative;
    }

    .stive-section .section-phone {
        position: unset;
        transform: unset;
    }

    .custom-swiper-button .swiper-button-prev.swiper-button-border {
        left: -0;
    }

    .custom-swiper-button .swiper-button-next.swiper-button-border {
        right: -0;
    }
}

.hashtag-search.active {
    color: #212529;
    text-decoration: none;
    border-color: #212529;
}


.profile-tab .card .image-container {
    display: flex;
}

.profile-tab .card .image-container img {
    align-self: center;
}

.custom-swiper-button .swiper-button-border {
    border: 1px solid #cecece;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
}

.custom-swiper-button .swiper-button-border::after {
    font-size: 18px;
}

.template-slide-mobile-show .template-main-container {
    margin: 5px;
}

.template-main-container {
    position: relative;
}

#search .template-main-container .template-container {
    margin: 1rem 0;
    padding: 0.5rem 1rem;
}


.contest-slide:nth-child(n+1) {
    display: none;
}

.slick-initialized .contest-slide,
.contest-slide:first-child {
    display: block;
}

.kinokuniya-slide:nth-child(n+1) {
    display: none;
}

.slick-initialized .kinokuniya-slide,
.kinokuniya-slide:first-child {
    display: block;
}


.contest-slick .slick-track {
    display: flex;
    align-items: center;
}

.mobile-nav-bottom a.btn {
    margin-bottom: 10px;
}

.mobile-nav-bottom a.btn:not(#loginButton) {
    border: none;
}

.mobile-nav-bottom a.btn#loginButton {
    border-color: #59d9d4;
    border: 1px solid rgba(108, 89, 179, 0.75);
}

.mobile-nav-bottom {
    position: absolute;
    bottom: 15px;
    left: 15px;
}

.mobile-nav-bottom .dropdown-menu {
    border-radius: 0;
    border: none;
    /* border-top: 1px solid #564f4f8f; */
    padding: 0;
    margin-top: 15px;
    width: auto;
    bottom: auto;
    left: auto;
    top: auto;
    width: 100%;
    position: initial;
}

#mainNav .btn-default.be-a-creator-mobile {
    color: rgba(74, 179, 201, 1) !important;
}

#navbarResponsive .navbar-nav li.nav-item.dropdown ul.dropdown-menu {
    top: 32px;
}

.modal-header .close {
    z-index: 10;
    outline: 0;
}

.footer-copyright,
.footer-copyright p {
    font-family: 'Arial Rounded MT', Helvetica, sans-serif;
    size: 12.8px;
}

.color-white {
    color: #ffffff!important;
}

.color-black {
    color: #000000!important;
}

.color-grey {
    color: #564F50!important;
}
.color-grey-2 {
    color: #726969!important;
}
.color-grey-3 {
    color: #cbcbcb!important;
}
.color-grey-4 {
    color: #a09093!important;
}

.font-arial-rounded-mt {
    font-family: 'Arial Rounded MT';
}

.font-helvetica {
    font-family: "Helvetica";
}
.btn-primary.btn-color-custom {
    color: #564F50!important;
}

.font-size-16 {
    font-size: 16px;
}

.font-size-14 {
    font-size: 14px;
}

.login-method-container {
    position: relative;
}
.login-img-icon {
    width: 25px;
    height: auto;
    position: absolute;
    left: 8%;
    top: 50%;
    transform: translate(0, -50%);
}

@media (max-width: 768px) {
    .login-img-icon {
        width: 15px;
    }
}

.hr-with-or {
    font-size: 14px;
    font-weight: 900;
}

.hr-with-or:before {
    background: linear-gradient(to right, #000000ad, #818078, #000000ad);
}

.forgot-text {
    text-decoration: underline!important;
    font-family: 'Arial Rounded MT';
    color: #564F50;
}
.new-to-arc, .signup-section {
    font-family: 'Arial Rounded MT';
    color: #564F50;
}

.click-signup, .click-login {
    text-decoration: underline!important;
    font-family: 'Arial Rounded MT';
    color: #59d9d4 !important;
}

.slideInDown .click-signup {
    color: white !important;
}

.agreement-text {
    font-family: 'Arial Rounded MT';
    color: #564F50;
}

.link-agreement {
    font-family: 'Arial Rounded MT';
    color: #007BFF;
}

.dropdown-top-menu-icon {
    width: 18px;
    transform: translate(0px, -2px);
}

.edit-profile-icon-svg {
    filter: invert(69%) sepia(0%) saturate(2587%) hue-rotate(227deg) brightness(73%) contrast(91%);
}
.btn-default:hover .edit-profile-icon-svg {
    filter: invert(0%) sepia(2%) saturate(7458%) hue-rotate(36deg) brightness(104%) contrast(96%);
}

.job-enquiry-icon-svg {
    filter: invert(100%) sepia(100%) saturate(38%) hue-rotate(321deg) brightness(110%) contrast(110%);
}

.one-line {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    max-width: 100%;
}

a.no-deco {
    text-decoration: none;
}

.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
    color: #929292;
    height: 4rem;
}

.steps > .step {
    position: relative;
    display: table-cell;
    text-align: center;
    /* font-size: 0.875rem; */
    color: #6d6875;
}

.steps > .step:before {
    content: attr(data-step);
    display: block;
    margin: 0 auto;
    background: #ffffff;
    border: 2px solid #e6e6e6;
    color: #e6e6e6;
    width: 2rem;
    height: 2rem;
    text-align: center;
    margin-bottom: -4.2rem;
    line-height: 1.9rem;
    border-radius: 100%;
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: 1.1rem;
}

.steps > .step:after {
    content: "";
    position: absolute;
    display: block;
    background: #e6e6e6;
    width: 100%;
    height: 0.125rem;
    top: 1rem;
    left: 50%;
}

.steps > .step:last-child:after {
    display: none;
}

.steps > .step.is-complete {
    color: #6d6875;
}

.steps > .step.is-complete:before {
    content: "✓";
    color: #59d9d4;
    background:  #f2fdff;
    border: 2px solid #59d9d4;
}

.steps > .step.is-complete:after {
    background: #59d9d4;
}

.steps > .step.is-active {
    font-size: 1rem;
    font-weight: bold;
}

.steps > .step.is-active:before {
    color: #fff;
    border: 2px solid #59d9d4;
    background: #59d9d4;
    /* margin-bottom: -4.9rem; */
}

.step-description {
    margin-top: 50px;
}

.ui-menu{
    background-color: white;
    width: 300px !important;
}

/* Subscription Modal CSS */
.subscription--title{
    font-size: 22px;
    color: #564F50;
    font-family: "Helvetica";
}

.subscription--title2{
    font-size: 18px;
    color: #564F50;
    font-family: "Helvetica";
}

.subscription--para{
    font-size: 16px;
    color: #726969;
    font-family: "Arial Rounded MT";
    line-height: 1.5;
}

.subscription--btn {
    background-color: #59d9d4 !important;
    border-color: #59d9d4;
    font-size: 13px;
    color: #fff;
    letter-spacing: 1px;
    line-height: 15px;
    border: 0px solid #6c59b3bf;
    border-radius: 40px;
    transition: all 0.3s ease 0s;
    display: block;
    width: 100%;
    padding: 0.8rem 1.5rem;
    font-size: 16px;
    margin-bottom: 1rem;
}

.back--btn{
    background-color: transparent !important;
    font-size: 13px;
    color: #564F50;
    letter-spacing: 1px;
    line-height: 15px;
    border: 1px solid #958D8F;
    border-radius: 40px;
    transition: all 0.3s ease 0s;
    display: block;
    width: 90%;
    padding: 0.8rem 1.5rem;
    font-size: 16px;
    margin-bottom: 1rem;
    margin-right: 0.3rem;
}

.explore--btn{
    background-color: #59d9d4 !important;
    border-color: #59d9d4;
    font-size: 13px;
    color: #fff;
    letter-spacing: 1px;
    line-height: 15px;
    border: 0px solid #6c59b3bf;
    border-radius: 40px;
    transition: all 0.3s ease 0s;
    display: block;
    width: 90%;
    padding: 0.8rem 1.5rem;
    font-size: 16px;
    margin-bottom: 1rem;
    margin-left: 0.3rem;
}

.modal--padding{
    padding: 0 2rem;
}

.modal--radius{
    border-radius: 25px;
    overflow: hidden;
}

.bullet--padding{
    padding-left: 1rem !important;
}

@media (max-width: 576px) {
    .modal--padding{
        padding: 0 1rem;
    }
}

/* Product Modal CSS */
.product--title{
    font-size: 29px;
    color: #000;
    font-family: "Helvetica";
}

.image-radius {
    border-radius: 0 0 1rem 1rem;
    overflow: hidden;
}

.bodycopy-product{
    font-size: 14px !important;
    font-family: "Arial Rounded MT";
    line-height: 1.5;
    color: #000 !important;
}
.text-black {
    color: black;
}

.bg-grey {
    background: #F8F8F8;
}

.badge-custom-closed {
    background: #8B8B8B;
}

.bg-dark-grey {
    background: #D9D9D9;
}

.contest-title-h1 {
    color: black;
    font-size: 48px;
    font-weight: 900;
    line-height: 60px;
    font-family: "Helvetica";
}

.contest-title-h2 {
    color: black;
    font-size: 42px;
    font-weight: 700;
    line-height: 52px;
    font-family: "Helvetica";
}

.contest-title-h3 {
    color: black;
    font-size: 28px;
    font-weight: 600;
    font-family: "Helvetica";
}

.contest-title-h4 {
    color: black;
    font-size: 20px;
    font-weight: 400;
    font-family: "Helvetica";
}

.contest-p-title {
    font-size:17px;
}

.color-custom-blue {
    color: rgba(27, 68, 184, 1);
}

.contest-text-15 {
    font-size:15px;
}

.contest-subtext-arial-r-mt {
    color: #8B8B8B;
    font-weight: 400;
    font-family: "Arial Rounded MT";
    line-height: 20px;
}

.nda-btn-grey {
    background: rgba(229, 229, 229, 1);
    border-radius: 10px;
    height: 140px;
    width: 250px;
}

.category-btn-white {
    border: 1px solid rgba(149, 141, 143, 1);
    background: rgba(255, 255, 255, 1);
    width: 250px;
    border-radius: 15px;
    font-size: 21px;
    padding: 10px 30px;
}


.custom-btn-danger {
    background-color: #ffffff !important;
    border-color: #F24822;
    font-size: 13px;
    color: #F24822;
    letter-spacing: 1px;
    line-height: 15px;
    border: 1px solid rgba(242, 72, 34, 1);
    border-radius: 40px;
    transition: all 0.3s ease 0s;
}

.custom-btn-danger:hover {
    color: #F24822 !important;
}

.category-btn-white.active {
    border: 5px solid rgba(89, 217, 212, 1);
    background: rgba(255, 255, 255, 1);
}

.contest-breadcrumb {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    /* background-color: #e9ecef; */
    border-radius: 0.25rem;
    position: absolute;
    left: 8%;
}

@media (max-width: 992px) {
    .contest-breadcrumb {
        left: 13px;
    }
}

@media (max-width: 767px) {
    .contest-breadcrumb {
        left: 0px;
    }
}

.register-div .input-label p {

    margin-top: auto;
    margin-bottom: auto;
}

.contest-breadcrumb-item + .contest-breadcrumb-item {
    padding-left: 0.5rem;
}

.contest-breadcrumb-item + .contest-breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    color: #958D8F;
    content: ">";
}

.contest-breadcrumb-item + .contest-breadcrumb-item:hover::before {
    text-decoration: underline;
}

.contest-breadcrumb-item + .contest-breadcrumb-item:hover::before {
    text-decoration: none;
}

.contest-breadcrumb-item {
    color: #958D8F;
}

.contest-breadcrumb-item.active {
    color: #000000;
}

.custom-py {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.custom-pt {
    padding-top: 60px !important;
}

.custom-pb {
    padding-bottom: 60px !important;
}

@media (min-width: 768px) {
    .custom-py-md {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .custom-pt-md {
        padding-top: 60px !important;
    }

    .custom-pb-md {
        padding-bottom: 60px !important;
    }
}

@media (min-width: 576px) {
    .custom-py-sm {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .custom-pt-sm {
        padding-top: 60px !important;
    }

    .custom-pb-sm {
        padding-bottom: 60px !important;
    }
}

.px-inherit {
    padding-left: inherit;
    padding-right: inherit;
}

.contest-footer-bg {
    background: #14171A;
}

#testimonialSwiper .slick-dots {
    bottom: -35px !important;
}

#testimonialSwiper .slick-dots  li  button:before {
    font-size: 15px !important;
}

#testimonialSwiper .slick-dots li {
    margin: 0px;
}

#custom-price .form-control {
    border: 1px solid #ced4da;
}

.custom-border-radius-20 {
    border-radius: 20px;
}

.custom-border-radius-40 {
    border-radius: 40px;
}

.contest-holder-nav .profile-nav:first-child .profile-nav-btn {
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.contest-holder-nav .profile-nav:last-child .profile-nav-btn  {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
}

.profile-nav-btn.active {
    background: rgba(89, 217, 212, 0.31);
}

.custom-btn-white {
    border: 1px solid rgba(149, 141, 143, 1);
    background: rgba(255, 255, 255, 1);
    line-height: 15px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
}

.contest-btn {
    background: rgba(255, 255, 255, 1);
    line-height: 15px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
}

.border-black {
    border: 1.8px solid black;
}

.pointer-none {
    pointer-events: none;
}

.contest-btn-register {
    width: 150px;
    font-weight: 700;
    line-height: 20px;
    border-radius: 40px;
    font-size: 16px;
}

.shadow-top {
    box-shadow: 0px -9.514995574951172px 15.85832691192627px 0px rgba(0, 0, 0, 0.15);
}

.shadow-bottom {
    box-shadow: 0px 4.22888708114624px 10.57221794128418px 0px rgba(0, 0, 0, 0.25);
}

.shadow.contest-card {
    box-shadow: 0px 2.8860952854156494px 5.772190570831299px 0px rgba(0, 0, 0, 0.25) !important;
}

.input-append-w-br {
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    border-top: 0.6px solid !important;
    border-right: 0.6px solid !important;
    border-bottom: 0.6px solid !important;
    border-left: 0px !important;
    color: rgba(25, 37, 69, 1);
    font-size: 14px;
}

.input-prepend-w-br {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top: 0.6px solid !important;
    border-left: 0.6px solid !important;
    border-bottom: 0.6px solid !important;
    border-right: 0px !important;
    color: rgba(25, 37, 69, 1);
    font-size: 14px;
}

.custom-checkbox {
    height: 20px !important;
    width: 20px !important;
    background-color: rgba(217, 217, 217, 1);
}

.contest-custom-nav .nav-tabs {
    border-bottom: 0px solid transparent;
}

.contest-custom-nav .nav-link {
    color:#000 !important;
    font-size: 19px;
    font-weight: 400;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.contest-custom-nav .nav-link.active, .contest-job-card .nav-link.active, .contest-project-card .nav-link.active {
    background-color: transparent !important;
    border-bottom: #59D9D4 solid 5px !important;
    border-radius: 0px !important;
}

.contest-works-nav .nav-tabs {
    border-bottom: 0px solid transparent;
}

.contest-works-nav .nav-link {
    color:#000 !important;
    font-size: 19px;
    font-weight: 400;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    padding-left: 0px;
    padding-right: 5px;
}

.contest-works-nav .nav-link.active {
    background-color: transparent !important;
    color: #59D9D4 !important;
    text-decoration: underline;
}

.contest-card .package-label {
    font-family: "Helvetica";
    font-weight: 900;
    font-size: 23px;
    line-height: 28px;
}

.contest-card .package-from {
    font-family: "Helvetica";
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
}

.contest-card .package-price {
    font-family: "Helvetica";
    font-weight: 900;
    font-size: 26px;
    line-height: 31px;
}

.contest-card .text-muted {
    color: rgba(179, 179, 179, 1) !important;
}

/* .contest-card .text-grey, .contest-filter .text-grey, .contest  */
.text-grey {
    color: rgba(139, 139, 139, 1) !important;
}

.contest-card.active, .submission-card.active {
    border: 5px solid rgba(89, 217, 212, 1);
 }

.contest-package-text {
    font-weight: 400;
    font-size: 12px;
}

.contest-custom-nav ul li, .contest-custom-nav .contest-section-subtitle {
    font-size: 18px;
}

select {
    font-family: "Helvetica";
}

@media (min-width: 2150px) {
    .contest-card-title-only {
        width: 450px !important;
    }

    .contest-card-with-content {
        width: 600px !important;
    }
}

@media (min-width: 2000px) and (max-width: 2150px) {
    .contest-card-title-only {
        width: 350px !important;
    }

    .contest-card-with-content {
        width: 450px !important;
    }
}

.contest-card-title-only {
    width: 290px;
}

.contest-card-with-content {
    width: 350px !important;
}

@media (max-width: 1300px) {
    .contest-card-title-only {
        width: 250px !important;
    }

    .contest-card-with-content {
        width: 280px !important;
    }
}

@media (max-width: 1150px) {
    .contest-card-title-only {
        width: 210px !important;
    }

    .contest-card-with-content {
        width: 240px !important;
    }
}

@media (max-width: 950px) {
    .contest-card-title-only {
        width: 190px !important;
    }

    .contest-card-with-content {
        width: 230px !important;
    }

    .nda-btn-grey {
        height: 100px;
        width: 170px;
    }
}

@media (max-width: 880px) {
    .contest-card-title-only {
        width: 160px !important;
    }

    .contest-card-with-content {
        width: 200px !important;
    }

    .contest-title-h1 {
        color: black;
        font-size: 30px;;
        font-weight: 900;
        line-height: 1.2;
    }

    .contest-title-h2 {
        color: black;
        font-size: 22px;;
        font-weight: 700;
    }

    .contest-title-h3 {
        color: black;
        font-size: 18px;;
        font-weight: 600;
    }

    .contest-title-h4 {
        color: black;
        font-size: 15px;
        font-weight: 400;
    }

    .contest-p-title {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .contest-card-title-only {
        width: 250px !important;
    }

    .contest-card-with-content {
        width: 320px !important;
    }

    .contest-btn-register {
        width:120px;
    }
}

@media (max-width: 589px) {
    .contest-card-title-only {
        width: 220px !important;
    }

    .custom-py {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}

@media (max-width: 515px) {
    .contest-card-title-only {
        width: 190px !important;
    }
}

@media (max-width: 465px) {
    .contest-card-title-only {
        width: 185px !important;
    }

    .contest-card-with-content {
        width: 285px !important;
    }
}

@media (max-width: 415px) {
    .contest-card-title-only {
        width: 150px !important;
    }

    .contest-card-with-content {
        width: 230px !important;
    }
}

@media (max-width: 360px) {
    .contest-card-title-only {
        width: 130px !important;
    }
}


/* progress bar css */
.step-progress-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
}

.step-progress-list{
    width:100%;
}

.step-progress-list li{
    list-style-type: none;
    float:left;
    width:25%;
    position:relative;
    text-align:center;
}

.step-progress-list li:before{
    content:'';
    height:20px;
    width:20px;
    border:3px solid rgba(255, 255, 255, 1);
    background-color:rgba(217, 217, 217, 1);
    display:block;
    text-align:center;
    margin:0 auto 10px auto;
    border-radius:50%;
    position: relative;
    z-index: 2;
}

.step-progress-list li:after{
    content:'';
    position:absolute;
    width:100%;
    height:3px;
    background-color:rgba(217, 217, 217, 1);
    top:8px;
    left:-50%;
    z-index:1;
}

.step-progress-list li:nth-child(1):after{
    content:none;
}

.step-progress-list li.active:before{
    background-color:rgba(0, 0, 0, 1);
}

.step-progress-list li.active:after{
    background-color:rgba(0, 0, 0, 1);
}

.step-progress-list li span{
    color:rgba(0, 0, 0, 1);
    font-weight:600;
}

.step-progress-list li.active span{
    color:rgba(0, 0, 0, 1);
}

.step-progress-label {
    font-size: 11px;
    line-height: 13px;
    font-weight: 400 !important;
}

.input-round-10 {
    border-radius: 10px !important;
}

.contest-desc {
    word-wrap: break-word; /* Breaks long words */
    overflow: hidden; /* Hides overflow */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* Maximum number of lines */
}


/* input type range css */
input[type="range"] {
    -webkit-appearance: none;
    margin-right: 15px;
    width: 200px;
    height: 4px;
    background: rgba(139, 139, 139, 1);
    border-radius: 5px;
    /* background-image: linear-gradient(#ff4500, #ff4500); */
    /* background-size: 70% 100%; */
    /* background-repeat: no-repeat; */
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: rgba(86, 79, 80, 1);
    cursor: ew-resize;
    /* box-shadow: 0 0 2px 0 #555; */
    transition: background .3s ease-in-out;
  }

  input[type=range]::-webkit-slider-runnable-track  {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
  }

  .submission-card {
    height: 100%;
  }

  .submission-card-img {
    height: 150px;
    object-fit: cover;
    object-position: center;
  }

  @media (min-width: 1350px) {
    .submission-card-img {
        height: 200px;
    }
  }

  @media (max-width: 440px) {
    .submission-card-img {
        height: 100px;
    }
  }

  .winner-card-img {
    height: 150px;
    object-fit: cover;
    object-position: center;
  }

  
  .category-package-title {
    height: 50px;
    font-size: 14px;
  }

   @media (min-width: 1250px) {
    .winner-card-img {
        height: 200px;
    }

    .category-package-title {
        height: 45px;
    }
  }

  @media (max-width: 1150px) and (min-width: 767px) {
    
    .category-package-title {
        height: 70px;
    }
  }

  @media (max-width: 767px) and (min-width: 500px) {
    .winner-card-img {
        height: 250px;
        object-position: top;
    }
    
    .category-package-title {
        height: 40px;
    }
  }

  @media (max-width: 500px) {
    .winner-card-img {
        height: 250px;
    }
    
    .category-package-title {
        height: 40px;
    }
  }

    #custom-pagination nav ul.pagination{
        justify-content: center;
    }

    #custom-pagination nav ul li:first-child .page-link,
    #custom-pagination nav ul li:last-child .page-link {
        background-color: #D9D9D9;
        cursor: pointer;
        color: black;
        font-weight: bold;
        font-size: 30px;
        transition: 0.6s ease;
        margin-left: 50px;
        margin-right: 50px;
        padding: 7px 20px;
        border-radius: 50%;
        user-select: none;
        -webkit-user-select: none;
        font-family: "Arial Rounded MT";
    }
    #custom-pagination nav ul li:first-child .page-link:hover,
    #custom-pagination nav ul li:last-child .page-link:hover {
        color: white;
    }

    #custom-pagination nav ul li:not(:first-child):not(:last-child) {
        margin: auto 0;
    }

    #custom-pagination nav ul li:not(:first-child):not(:last-child) .page-link {
        background-color: transparent;
        border: 0px solid black;
        cursor: pointer;
        font-weight: bold;
        font-size: 25px;
        transition: 0.6s ease;
        user-select: none;
        -webkit-user-select: none;
        /* font-family: "Arial Rounded MT"; */
    }

    #custom-pagination nav ul li:not(:first-child):not(:last-child).active .page-link, 
    #custom-pagination nav ul li:not(:first-child):not(:last-child) .page-link:hover  {
        color: #59d9d4;
    }

    #custom-pagination nav ul li:not(:first-child):not(:last-child).active .page-link:hover,
    #custom-pagination nav ul li:not(:first-child):not(:last-child) .page-link {
        color: black;
    }


    #apod-custom-pagination nav ul.pagination{
        justify-content: center;
    }

    #apod-custom-pagination nav ul li:first-child .page-link:not(.disabled),
    #apod-custom-pagination nav ul li:last-child .page-link:not(.disabled) {
        text-align: center;
        cursor: pointer;
        color: black;
        font-weight: bold;
        font-size: 30px;
        transition: 0.6s ease;
        margin-left: 50px;
        margin-right: 50px;
        padding: 7px 20px;
        content: 'Previous';
        border:none;
        font-family: "Arial Rounded MT";
    }

    #apod-custom-pagination nav ul .page-item.disabled .page-link,
    #apod-custom-pagination nav ul .page-item.disabled .page-link {
        color: #6c757d !important;
    }
    #apod-custom-pagination nav ul li:first-child .page-link:not(.disabled):hover,
    #apod-custom-pagination nav ul li:last-child .page-link:not(.disabled):hover {
        color: white;
        background-color: #2c2c2c;
        border-radius: 5px;
    }

    #apod-custom-pagination nav ul li:not(:first-child):not(:last-child) {
        margin: auto 0;
        margin-left: 10px;
        margin-right: 10px;
    }

    #apod-custom-pagination nav ul li:not(:first-child):not(:last-child).active,
    #apod-custom-pagination nav ul li:not(:first-child):not(:last-child) .page-link:hover {
        background-color: #2c2c2c;
        border-radius: 7px;
    }

    #apod-custom-pagination nav ul li:not(:first-child):not(:last-child) .page-link {
        background-color: transparent;
        border: 0px solid black;
        cursor: pointer;
        font-weight: lighter;
        font-size: 25px;
        transition: 0.6s ease;

        /* font-family: "Arial Rounded MT"; */
    }

    #apod-custom-pagination nav ul li:not(:first-child):not(:last-child).active .page-link, 
    #apod-custom-pagination nav ul li:not(:first-child):not(:last-child) .page-link:hover  {
        color: #f5f5f5;
    }

    #apod-custom-pagination nav ul li:not(:first-child):not(:last-child).active .page-link:hover,
    #apod-custom-pagination nav ul li:not(:first-child):not(:last-child) .page-link {
        color: black;
    }