.bg-gradient {
    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);
}

.bg-gradient--light {
    background: rgb(76, 178, 201);
    background: -moz-linear-gradient(90deg, rgba(76, 178, 201, 1) 0%, rgba(130, 220, 216, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(76, 178, 201, 1) 0%, rgba(130, 220, 216, 1) 100%);
    background: linear-gradient(90deg, rgba(76, 178, 201, 1) 0%, rgba(130, 220, 216, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4cb2c9", endColorstr="#82dcd8", GradientType=1);
}

/* https://github.com/kenwheeler/slick/issues/982#issuecomment-73517458 */
* {
    min-height: 0;
    min-width: 0;
}


.modal-backdrop.show {
    opacity: .8;
}

.text-ellipsis {
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

footer li a {
    font-size: .9rem;
    font-family: 'Arial Rounded MT';
}

.blog .thumbnail {
    /* height: auto;
    padding-top: 100%; */
    background-position: center;
    /* background-color: #5a5a5a; */
}

.blog a:active,
.blog a:focus {
    outline: 0;
    border: none;
    -moz-outline-style: none;
}

#artist-content,
#editor-content {
    max-width: 282px;
}

.sm-sidebar {
    display: none;
}

.lg-sidebar .nav-link {
    min-width: 5rem;
}

.musicModal .round-btn.custom-add,
.musicModal .round-btn.custom-save {
    font-size: 1.5rem;
    text-align: center;
}

.custom-add i,
.custom-save i {
    transform: none;
    position: relative;
}

.musicModal .music-container .btn:hover {
    color: rgba(255, 255, 255, .6);
}

.template-container {
    border-radius: .5rem;
    border: none;
    /* background-color: #7d7d7d; */
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
    margin: .5rem 1rem;
}

.template-slick .icon .top-right-icon {
    top: 1rem;
    right: 1rem;
}

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

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

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

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


.template-container::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    /* background: rgb(193, 193, 193);
    background: -moz-linear-gradient(180deg, rgba(193, 193, 193, 0.10547969187675066) 75%, rgba(0, 0, 0, 0.8729866946778712) 100%);
    background: -webkit-linear-gradient(180deg, rgba(193, 193, 193, 0.10547969187675066) 75%, rgba(0, 0, 0, 0.8729866946778712) 100%);
    background: linear-gradient(180deg, rgba(193, 193, 193, 0.10547969187675066) 75%, rgba(0, 0, 0, 0.8729866946778712) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c1c1c1", endColorstr="#000000", GradientType=1); */
    transition: .3s;
}

.template-container:hover::before {
    /* top: -800%; */
    background-color: rgba(66, 65, 65, 0.5);
}


.template-caption {
    padding: 0 1rem;
    background-color: transparent;
    display: none;
}

.template-caption--story {
    height: 0;
    opacity: 0;
    transition: .3s;
}

.template-container:hover .template-caption--story {
    height: 3rem;
    opacity: 1;
}

.artist-artwork-design {
    border: none;
}

.success-img {
    margin: auto;
    height: 30rem;
}

.artist-artwork-design {
    background-size: cover;
}

/* .editor-phone {
    overflow: hidden;
}*/

@media (min-width: 768px) {

    /* .editor-phone {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .artist-phone-content {
        transform: none;
        top: 0;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

    .artist-artwork-design {
        margin: auto;
    } */
    .bg-gradient #mainNav li a,
    .bg-gradient #mainNav button,
    .bg-gradient li a,
    .bg-gradient button {
        color: white;
    }
}

@media (max-width:768px) {
    #menu-button:focus {
        outline: none;
    }
    .checkout-editor-pricing {
        border: unset;
    }

    .checkout-editor-pricing .card-body {
        padding: 1rem;

    }

    .checkout-editor-pricing h5 {
        font-size: 0.8rem;
    }

    .slick-slider {
        width: 100%;
        max-width: 720px;
        /* The widest it will go on a responsive website */
    }

    .success-img {
        height: 50rem;
    }

    .latest-design {
        /* height: auto; */
        width: 100% !important;
        max-width: 100vw;
        max-height: 150px;
    }

    .navbar {
        padding: 0;
    }

    #mainNav .navbar-toggler {
        top: 0rem !important;
        border: none;
        font-size: 22px;
        background-color: transparent;
        color: #564f4f;
        position: relative;
    }

    #mainNav.navbar-shrink .navbar-toggler {
        color: white;
    }

    #navbarResponsive {
        position: fixed;
        top: 0;
        left: 100vw;
        height: calc(100vh - 2rem);
        width: calc(100vw - 3rem);
        background-color: white;
        margin: 1rem 0 1rem 3rem;
        border-radius: 1rem 0 0 1rem;
        -webkit-box-shadow: 0px 0px 5px 0px rgba(119, 119, 119, 0.75);
        -moz-box-shadow: 0px 0px 5px 0px rgba(119, 119, 119, 0.75);
        box-shadow: 0px 0px 5px 0px rgba(119, 119, 119, 0.75);
        padding: 1rem .5rem;
    }

    #mainNav a.close-nav {
        font-size: 2rem;
        padding: 0 0.5em !important;
    }

    #mainNav.navbar-shrink .btn-default {
        border-color: #59d9d4;
    }

    #mainNav li.button-nav a {
        margin: 0.5em 1em !important;
        padding: 15px 30px !important;
        margin-top: 5px;
        width: calc(100vw - 3rem - 30px - 1em);
    }

    #mainNav li.button-nav a.click-signup {
        color: white!important;
    }

    .mobile-nav-bottom {
        position: initial;
        bottom: auto;
        left: auto;
    }

    .mobile-nav-bottom a {
        text-decoration: none;
    }

    .mobile-user-header {
        padding: 0.5em 1em;
        display: block;
    }

    .stive-try {
        left: 65px;
    }

    #navbarResponsive .dropdown-menu .dropdown-item {
        text-align: left !important;
        padding: 0.5em 1em !important;
        letter-spacing: 1px;
        font-weight: 400;
        font-size: 1.1rem;
    }

    #navbarResponsive .navbar-nav li.nav-item.dropdown ul.dropdown-menu {
        margin-left: 15px;
        margin-right: 15px;
    }

    #navbarResponsive li {
        list-style-type: none;
    }

    .navbar-collapse {
        width: 100%;
        height: calc(100vh - 80px);
        transition: all 0.3s ease;
        display: block !important;
    }

    .navbar-collapse.collapsing {
        margin-left: 50%;
        height: calc(100vh - 80px) !important;
        transition: all 0.3s ease;
        display: block;
    }

    .navbar-collapse.show {
        height: calc(100vh - 80px);
        left: 0 !important;
    }

    #mainNav li a {
        color: #564F4F;
        font-size: 1.1rem;
    }

    #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link {
        color: #564F4F;
        background-color: transparent;
        font-size: 1.1rem;
    }

    .side-tab {
        height: auto;
    }

    .editor-top-nav {
        z-index: 99;
        position: relative;
        min-height: 4rem;
    }

    .back-btn {
        color: white;
        margin-top: .5rem;
        font-size: 1rem;
        background-color: transparent;
        border: none;
    }

    hr.--white {
        border-color: white;
    }

    .lg-sidebar {
        display: none;
    }

    .sm-sidebar {
        display: flex;
        /* flex-direction: row !important; */
        /* justify-content: space-around; */
        transition: .2s;
        height: 5rem;
        overflow-y: hidden;
        overflow-x: scroll;
    }

    .sm-sidebar.--hide {
        height: 0;
    }

    .mobile-sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }

    /* .editor-phone {
        position: relative;
    } */

    #artist-content,
    #editor-content {
        max-width: initial;
        position: fixed;
        height: 0;
        display: none;
        bottom: 0;
        z-index: 100;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        transition: .35s;
        max-height: calc(100vh - 130px);
    }

    .mobile-sidebar .sm-sidebar.nav-tabs .nav-link,
    .mobile-sidebar .sm-sidebar.nav-tabs .nav-link:hover {
        max-height: 5rem;
        background-color: transparent !important;
    }

    .side-page-summary {
        position: fixed;
        bottom: 0;
        height: 0vh;
        transition: .35s;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        display: none;
    }

    .side-page-summary.--show {
        z-index: 105;
        height: calc(100vh - 75px);
        display: block;
    }


    #editor-content.--show,
    #artist-content.--show {
        height: auto !important;
        display: block;
    }

    .editor-side-item:first-child {
        border-radius: 1rem;
    }

    .editor-side-item:hover {
        background-color: transparent;
    }

    #publishConfirmation .modal-content {
        width: 100%;
    }

    .musicModal .modal-content {
        max-width: calc(100vw - 100px);
        margin-left: 50px;
        background-color: transparent;
        border: none;
        height: auto;
    }

    .musicModal .custom-close {
        position: relative;
        transform: none;
        width: 35px;
        flex: none;
        height: 35px;
        line-height: 1.3;
        font-size: 1.2rem;
        color: white;
        background-color: black;
        margin-bottom: 1rem;
        text-align: center;
        left: 0;
        right: 0;
        top: 0;
    }

    .musicModal .second-content {
        background: white;
    }

    .musicModal .modal-body {
        background-color: white;
        border-radius: 1.25rem;
    }

    .musicModal .editor-default-blue {
        height: auto;
    }

    .music-container {
        height: 10rem;
    }

    .musicModal .music-container .btn {
        transform: translate(-50%);
        top: 3rem;
        /* left: 50%; */
    }

    .musicModal .round-btn {
        right: .5rem;
        height: 2rem;
        width: 2rem;
        line-height: 1.2;
    }

    .custom-add i,
    .custom-save i {
        font-size: 1.2rem;
    }

    #checkout-modal .modal-dialog {
        top: 50%;
        transform: translateY(-50%);
    }

}

@media (max-width:375px) {
    .editor-icon-side {
        padding: 15px .5rem;
    }
}

@media only screen and (max-width: 768px) {

    .simplified-tiles {
        margin: unset;
    }

    h2 {
        font-size: 1.8rem;
    }

    .big-titles {
        height: calc(120vw - 70px);
    }

    .small-titles {
        height: calc(60vw - 40px);
        margin: unset;
    }

    .titles .row {
        margin: 0 !important;
    }


    .footer-social {
        padding: unset;
    }

    .stive-section .section-phone {
        margin-bottom: -90px;
    }

    .after-simplify-creativity {
        padding-top: 0px !important;
    }

    #mainNav .navbar-nav .nav-item .nav-link:not(.active):hover {
        color: white;
    }

    #customSize .custom-close {
        color: black;
        position: unset;
        text-align: end;
        font-size: 1.3rem;
        padding-right: 5%;
    }


    .blog .border {
        margin-bottom: 30px;
    }

    .custom-button-home .btn-xl {
        padding: 13px 8px;
    }

    /* #template.tab-pane{
        height: 500px;
    } */

    #published_artworks_container {
        max-height: calc(100vh - 70px - 235px);
        overflow-y: scroll;
    }

    .new-music-list {
        height: calc(100vh - 70px - 197px);
        overflow-y: scroll;
    }

    .page-summary-container {
        height: calc(100vh - 70px - 120px) !important;
        overflow-y: scroll;
        align-content: baseline;
    }

    .general-properties-form {
        max-height: calc(100vh - 70px - 60px);
        overflow-y: scroll;
    }

    .context-menu-list {
        top: 140px;
        left: 0;
    }

    .artwork-detail-container {
        height: calc(100vh - 70px - 70px);
        overflow-y: scroll;
    }

    .side-image-container {
        height: calc(100vh - 70px - 70px);
        overflow-y: scroll;
    }

    .sp-container {
        width: 70%;
    }

    .sp-palette-container {
        width: 100%;
    }

    /* .template-caption {
        color: #808080;
        font-size: 1rem;
        padding: unset;
    }

    .template-caption p {
        margin: unset;
        line-height: normal;
    }

    .template-container .template-description{
        font-size: 0.5rem;
    } */

    .editor-collapse_btn{
        display: none;
    }
}