/* Devices CSS */

/* Desktop */

@media (max-width: 1600px) {

    .intro {
        height: 784px;
    }

    .intro h2 {
        margin: 90px 0 26px 0;
    }

    .video-preview {
        margin: 50px 0 0 0;
    }

    .who-we-serve {
        padding: 24px 0 0 100px;
    }

    .what-we-do {
        padding: 60px 100px 0 0;
    }

    .how-we-work {
        padding: 60px 0 0 100px;
    }

}

@media (max-width: 1440px) {

    .intro {
        height: 715px;
    }

    .intro h2 {
        margin: 80px 0 26px 0;
    }

    .who-we-serve {
        padding: 16px 0 0 100px;
    }

    .what-we-do {
        padding: 30px 100px 0 0;
    }

    .how-we-work {
        padding: 30px 0 0 100px;
    }

    .our-mission,
    .our-blog {
        width: 90%;
    }

}

@media (max-width: 1366px) {

    .intro {
        height: 983px;
        background:none;
    }

    .who-we-serve {
        padding: 8px 0 0 100px;
    }

    .what-we-do {
        padding: 16px 100px 0 0;
    }

    .how-we-work {
        padding: 12px 0 0 100px;
    }

}

@media (max-width: 1280px) {

    .intro {
        height: 1000px;
        background:none;
    }

    .our-mission,
    .our-blog {
        width: 100%;
    }

    .purchase-tokens .modal-dialog {
        left: 60px;
    }

}

/* End Desktop */

/* Tablets */

@media (max-width: 991.98px) {

    .col-12 {
        padding: 60px 22px;
    }

    .top-panel {
        padding: 13px 22px 14px 22px;
    }

    .logo {
        background-size: contain;
        display: block;
        height: 25.86px;
        margin: 9px 0;
        width: 127px;
    }

    .website-nav,
    .top-panel > .login-reg,
    .dashboard-left-gradient.faq-left-gradient {
        display: none;
    }

    .bottom-menu {
        padding: 60px 22px;
    }

    .bottom-menu .logo {
        float: none;
        margin: 9px auto;
        z-index: 10;
    }

    .bottom-menu .website-nav {
        display: block;
        float: none;
        margin: 0 auto;
        width: fit-content;
    }

    .bottom-menu .website-nav ul {
        margin: 0;
    }

    .bottom-menu .website-nav li {
        padding: 0 0 0 28px;
    }

    .bottom-menu .website-nav li:first-child {
        padding: 0;
    }

    .blog-mobile-menu {
        display: block;
        float: right;
    }

    .blog-mobile-menu .btn-user-menu {
        background: rgba(255, 255, 255, 0.12) url("https://www.fanraizd.com/img/menu.svg") no-repeat center;
        border-radius: 50%;
        display: block;
        height: 40px;
        margin: 3px 0 0 0;
        text-indent: -9999px;
        width: 40px;
    }

    .btn-user-menu:hover {
        background: rgba(255, 255, 255, 0.16) url("https://www.fanraizd.com/img/menu.svg") no-repeat center right 8px;
    }

    .blog-mobile-menu .btn-user-menu.show {
        background: rgba(255, 255, 255, 0.16) url("https://www.fanraizd.com/img/menu-close.svg") no-repeat center;
    }

    .user-menu-list a {
        color: rgba(255, 255, 255, 0.66);
        font-size: 100%;
        padding: 4px 0 0 0;
    }

    .user-menu-list a:hover,
    .user-menu-list a.active {
        color: #fff;
        opacity: 1;
    }

    .user-menu-list a.active:hover {
        color: rgba(255, 255, 255, 0.8);
    }

    .dropdown-menu.show .login-reg {
        float: left;
        margin: 28px 0 0 22px;
    }

    .faq-search {
        margin: 71px 0 0 0;
    }

    .general-info-categories {
        padding: 44px 22px 0 22px;
    }

    .fan-blog h2 {
        margin: 0 0 26px 0;
    }

    .fan-info {
        margin: 50px auto 0 auto;
        padding: 0;
    }

    .pagination {
        margin: 24px auto 0 auto;
    }

    .blog-full-article {
        margin: 71px 0 0 0;
        padding: 0;
    }

    .blog-full-article .blog-short-news {
        padding: 32px 22px 0 22px;
    }

    .blog-full-article .streamed-tracks {
        padding: 0 0 0 10px;
    }

    section.plan-pricing {
        padding: 161px 22px 20px 22px;
    }

    .row.artists-table.plan-pricing {
        padding: 0 22px;
    }

    .row.user-dashboard.commission {
        padding: 32px 22px 0 22px;
    }

    .pricing-left-gradient-bottom {
        width: 100%;
    }

    .intro {
        background: none;
        background-size: contain;
        height: 800px;
        margin: 71px 0 0 0;
        padding: 24px 22px;
    }

    .intro h2,
    .intro > p {
        width: 100%;
    }

    .lp-left-gradient-1,
    .lp-left-gradient-2,
    .lp-right-gradient-1,
    .lp-right-gradient-2,
    .lp-right-gradient-3,
    .lp-right-gradient-4 {
        width: 100%;
    }

    .lp-right-gradient-1,
    .lp-right-gradient-3 {
        background-position: right;
    }

    .platforms-list {
        border-radius: 12px;
        width: 502px;
    }

    .platforms-list li:last-child {
        display: inline-block;
        float: none;
        margin: 0 auto;
        padding: 26px 0 16px 0;
    }

    .col-12.without-lp,
    .col-12.without-rp {
        padding: 60px 22px;
    }

    .who-we-serve,
    .who-we-serve-img,
    .what-we-do-img,
    .what-we-do,
    .how-we-work,
    .how-we-work-img {
        float: none;
        padding: 0;
        width: 100%;
    }

    .who-we-serve-img,
    .what-we-do-img,
    .how-we-work-img {
        margin: 44px 0 0 0;
    }

    .what-we-do-img img {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }

    .release-music .row {
        width: 100%;
    }

    .lp-banner {
        padding: 22px;
    }

    .lp-banner h2 {
        margin: 0 0 26px 0;
    }

    .col-12.lp-mission,
    .col-12.lp-blog {
        padding: 60px 17px;
    }

    .our-mission,
    .our-blog {
        margin: 0;
        width: 100%;
    }

    .our-mission .row,
    .our-blog .row {
        margin: 32px 0 0 0;
    }

    .mission-card {
        margin: 5px;
        width: calc(50% - 10px);
    }

    .lp-blog-card {
        margin: 5px;
        width: calc(33.33333333% - 10px);
    }

    .our-blog .btn.btn-primary {
        margin: 25px auto 12px auto;
    }

    .purchase-tokens .modal-dialog {
        left: auto;
    }

    footer.col-12 {
        padding: 32px 22px;
    }

    footer.col-12 .row .col {
        flex-basis: 100%;
        height: fit-content;
        margin: 0 0 16px 0;
    }

    footer.col-12 .row .col:last-child {
        margin: 0 0 8px 0;
    }

    footer p {
        font-size: 87.5%;
    }

}

/* End Tablets */

/* Smartphones */

@media (max-width: 767.98px) {

    h2 {
        font-size: 187.5%;
        line-height: 36px;
    }

    p {
        font-size: 87.5%;
    }

    .col-12.lp-p,
    .col-12.lp-who,
    .col-12.without-lp,
    .col-12.release-music,
    .col-12.without-rp,
    .col-12.lp-b {
        padding: 32px 22px;
    }

    .col-12.lp-mission,
    .col-12.lp-blog {
        padding: 32px 17px;
    }


    .fan-blog h2 {
        margin: 0 0 26px 0;
    }

    .also-like h2 {
        font-size: 125%;
        line-height: 27px;
    }

    .row.user-dashboard.commission {
        padding: 0 22px 0 22px;
    }

    .intro {
        height: 780px;
    }

    .intro h2 {
        font-size: 237.5%;
        line-height: 44px;
        margin: 32px 0 26px 0;
    }

    .platforms {
        padding: 32px 22px 32px 22px;
    }

    .platforms p {
        font-size: 125%;
        line-height: 30px;
    }

    .platforms-list {
        width: auto;
    }

    .platforms-list li {
        float: none;
    }

    .release-music .row {
        display: block;
    }

    .release-music .col-sm-5,
    .release-music .row > .col > .col {
        margin: 0;
    }

    .release-music .col-sm-5 {
        width: 100%;
    }

    .release-music .row > .col > .col:first-child {
        margin: 10px 0;
    }

    .lp-banner h2 {
        margin: 30px 0 0 0;
    }

    .our-mission .row,
    .our-blog .row {
        display: block;
        margin: 40px 0 0 0;
    }

    .mission-card,
    .lp-blog-card {
        margin: 10px auto;
        width: calc(100% - 10px);
    }

    .mission-card .card-title,
    .lp-blog-card .card-title {
        font-size: 100%;
        line-height: 24px;
    }

    .our-blog .btn.btn-primary {
        margin: 29px auto 12px auto;
    }

}

@media (max-width: 658.98px) {

    .intro {
        height: 780px;
    }

}

@media (max-width: 574.98px) {

    .dropdown-menu.show .login-reg {
        float: none;
        margin: 28px 22px 0 22px;
    }

    .login-reg .btn.btn-secondary {
        width: 100%;
    }

    .btn.btn-secondary.login {
        margin: 0 0 26px 0;
        padding: 12px 20px 12px 32px;
    }

    .intro {
        height: 860px;
    }

    .level img {
        display: block;
        float: none;
        margin: 0 auto 18px auto;
    }

    .level h3,
    .level p {
        text-align: center;
    }

    .level p {
        margin: 0;
    }

    .fan-blog h2 {
        margin: 0 0 26px 0;
    }

    .col-12 .btn.btn-primary {
        width: 100%;
    }

    .video-preview {
        width: 265px;
    }

    .video-preview a,
    .video-preview a:hover {
        background-size: contain;
        height: 58px;
        width: 58px;
    }

    .video-preview p {
        padding: 0;
    }

    .lp-left-gradient-1 {
        display: none;
    }

    .our-blog .btn.btn-primary {
        width: calc(100% - 10px);
    }

}

@media (max-width: 458.98px) {
    
    .lp-banner h2 {
        margin: 12px 0 0 0;
    }

}

@media (max-width: 374.98px) {

    .intro {
        height: 930px;
    }

}

@media (max-width: 359.98px) {
    
    .lp-banner h2 {
        margin: 0;
    }

}

/* End Smartphones */