@media (min-width: 320px) and (max-width: 480px) {
    .no-mobile {
        display: none;
    }

    .no-ds {
        display: block;
    }

    .slide-content {
        position: absolute;
        bottom: 120px;
        max-width: 100%;
    }

    .menu-items {
        display: none;
    }

    .navigation {
        z-index: 60;
        padding-left: 15px;
        padding-top:3px;
    }

    .slide-content h2 {
        color: #fff;
        line-height: 1.4em;
        font-size: 1.2em;
        max-width: 85%;
        font-family: 'Vanilla';
    }

    .slide-content p {
        color: #fff;
        font-size: 1.2em;
        max-width: 90%;
    }

    .header {
        background: rgb(248, 188, 144);
        background: linear-gradient(
    180deg, rgba(248, 188, 144, 0.9780287114845938) 0%, rgba(255, 155, 123, 1) 100%);
        display: flex;
        height: 100vh;
        padding: 20px;
        background-image: url(../images/slide-1-mob.jpg);
        background-size: cover;
        background-position: top center;
        overflow: hidden;
    }

    .head-library {
        background: rgb(248, 188, 144);
        background: linear-gradient(180deg, rgba(248, 188, 144, 0.9780287114845938) 0%, rgba(255, 155, 123, 1) 100%);
        display: flex;
        height: 50vh !important;
        padding: 30px;
        background-image: url(../images/library-cover.png);
        background-size: cover;
        background-position: center center;
        overflow: hidden;
        position: relative;
    }

    .navigation img {
        width: 50px;
        height: 50px;
    }
    .logotext {
     font-size:1.3em;
     margin-top:6px;
    }

    .bt {
        font-weight: normal;
        color: #fff;
        font-weight: bold;
        border-radius: 6px;
        font-size: .8em;
        padding: 12px !important;
        text-decoration: none;
    }

    .sec-right-hold h2 {
        color: #007fff;
        text-align: center;
        font-size: 2em;
    }

    .sec-right-hold p {
        width: 100%;
        text-align: center;
    }

    .sec-right-hold .bt {
        color:#007fff !important;
        font-weight: bold;
        border-radius: 6px;
        font-size: 1em;
        text-decoration: none;
        padding: 12px !important;
        margin: 0 auto;
        position: relative;
        display: block; 
        width: fit-content;
    }

    .moving-clouds {
        display: none;
    }

    .bg-gray {
        background: #fff;
        border: 1px solid #007fff;
        color: #007fff !important;
        transition: .2s ease-in-out all;
        position: relative;
        background-size: 0%;
        font-size:1em !important;
    }

    .p-5 {
        padding: 1rem!important;
    }

    .box .icon-left {
        position: absolute;
        width: 25%;
        right: 0px;
        top: -50px;
    }

    .box .icon-right {
        position: absolute;
        width: 45%;
        right: 10px;
        bottom: -20px;
    }

    .section-title h5 {
        width: 100%;
        text-align: center;
        display: block;
        margin: 0 auto;
        font-size: 1em;
        position: relative;
    }

    .section-title p {
        width: 100%;
        margin: 0 auto;
        position: relative;
        text-align: center;
        font-size: 1em;
        padding-bottom:35px;
    }

    .gray .divide {
        width: 75%;
        margin: 0 auto;
        position: relative;
        display: block;
        margin-top: -70px;
    }

    .gray .divide-alt {
        margin-top:-30px !important;
    }

    .b-cover {
        margin: 0px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        height: 290px;
        position: relative;
        padding: 20px 0px;
    }

    .b-cover img {
        height: auto;
        margin-top: 10px;
        float: none !important;
        margin-left: auto;
        margin-right: auto;
    }

    .book-content {
        /* width: 65%;*/
        display: inline-block;
        padding: 10px 0px 20px 10px;
        position: relative;
        z-index: 60;
        text-align: center;
    }

    .book-content p {
        color: #555;
        font-weight: 300;
        overflow: hidden;
        font-size: .9em;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
    }
    .custombook {
        border-bottom: 1px #d7d7d7 solid !important;
    }
    .book-content h3 {
        display: block !important;
    }

    .book-display {
      width:unset !important;
    }

    .book-content .author {
        display: block;
        color: #999;
        font-weight: 300;
        font-size: .85em;
        letter-spacing: -1px;
    }

    .macbook-right h4 {
        padding-top:15px;
    }

    .macbook-right h5 {
        padding-bottom:15px;
    }

    .macbook-right h5, .macbook-right h4 {
        text-align: center !important;
        width: 100%;
        text-align: center;
        padding-left: 0px !important;
    }

    .macbook {
        padding: 4% 6%;
        margin: 0 auto;
        max-width: 100%;
        position: relative;
        z-index: 6;
        margin-top: 50px;
    }

    .nuts {
        display: block;
        font-weight: 500;
        font-size: 1.2em;
        color: #555;
        padding: 0px 30px;
        text-align: center;
        z-index: 90;
        line-height: 1.8em;
        padding-bottom: 23px;
        width: 90%;
        margin: 0 auto;
    }

    .nuts span {
        color:#fff;
        background:#007fff;
        padding:6px
    }

    .invite-link {
        margin-left: 30px;
        margin-top: 10px;
        display: inline-block;
        font-size: 1.1em;
        margin: 0 auto;
        position: relative;
        display: -webkit-box;
        width: fit-content;
        margin-bottom: 15px;
    }

    .box {
        padding: 40px;
        border-radius: 7px;
        background: #fff;
        box-shadow: 0px 0px 40px rgb(153 153 153 / 35%);
        position: relative;
        margin-bottom: 15px;
        height: auto !important;
    }

    .p-2 {
        padding: 2rem!important;
    }

    .footer img {
        width:80%;
        margin:0 auto;
        position: relative;
        display: block;
        margin-bottom:15px;
    }

    .footer .footer-left {
        border-top:1px solid rgb(121, 201, 255);
        padding:15px 0px;
        text-align: center;
    }

    .footer .social-box {
        text-align: center;
    }

    .footer .social-box span {
        display: none;
    }

    .gray {
        padding:inherit;
    }

    .mb-nav-open {
        float: right;
        color: #fff;
        font-weight: bold;
        font-size: 1.7em;
        position: fixed;
        right: 27px;
        top: 15px;
        z-index: 99996;
    }

    .mb-nav-open:focus {
        color:#ff6701;
    }

    .mb-nav-open:visited {
        color:#ff6701;
    }

    .nav-left {
        left: 0px;
    }

    .mob-box {
        width: 90%;
        background: #007fff !important;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        position: fixed;
        height: 100vw;
        height: 95%;
        left: -100%;
        transition: .6s ease-in-out all;
        display: block;
        top: 5%;
        z-index: 99997;
        border-top:1px solid #fff;
        border-right:1px solid #fff;
    }

    .mob-box .holder {
        padding: 25px 25px 25px 25px;
    }

    .m-search {
        margin-top: 15px;
    }

    .m-search .inpi {
        position: absolute;
        top: 50%;
        left: 5%;
        padding-left: 14px;
        transform: translate(0,-50%);
        color: #161616;
    }

    .m-search input {
        width: 100%;
        background: #fff;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: .9em;
        padding-left: 2.3rem;
        border: 1px solid #dadada;
    }

    .m-social-holder {
        display: none !important;
        width: 100%;
        background: #fff;
        padding: 6px 12px;
        border-radius: 4px;
        font-size: 1em;
        border: 1px solid #dadada;
        margin-top: 15px;
        text-align: center;
    }

    .m-social-holder a {
        display: inline-block;
        text-align: center;
        padding: 0px 14px;
        color: #ff6701;
        font-size:1.4em;
    }

    .accordion {
        width: 100%;
        max-width: 360px;
        margin: 10px auto 0px;
        background: #007fff;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        list-style-type: none;
        padding-left: 0px;
    }

    .accordion .link {
        cursor: pointer;
        display: block;
        padding: 11px 15px 11px 10px;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        border-bottom: 1px solid #efefef;
        position: relative;
        -webkit-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }

    .mb-nav-open {
        float: right;
        color: #fff;
        font-weight: bold;
        font-size: 1.7em;
        position: fixed;
        right: 27px;
        top: 15px;
        z-index: 99996;
    }

    .mb-nav-open:hover {
      color:#fff !important;
    }


    .mob-box .m-logo {
        width: 75%;
        padding-bottom: 35px;
        padding-top: 10px;
    }


    .accordion .link {
        cursor: pointer;
        display: block;
        padding: 11px 15px 11px 0px;
        color: #161616;
        font-size: 1.2em;
        font-weight: 700;
        border-bottom: 1px solid #efefef;
        position: relative;
        -webkit-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }

    .root-link a {
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
    }

    .accordion li:last-child .link {
        border-bottom: 0;
    }

    .accordion li i {
        display: none;
    }

    .accordion li i.fa-chevron-down {
        right: 12px;
        left: auto;
        font-size: 16px;
    }

    .accordion li.open .link {
        color: #ff3364;
    }

    .accordion li.open i {
        color: #ff3364;
    }
    .accordion li.open i.fa-chevron-down {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .accordion li.default .submenu {display: block;}
    /**
     * Submenu
     -----------------------------*/
    .submenu {
        display: none;
        background: #efefef;
        font-size: 14px;
    }

    .submenu li {
        border-bottom: 1px solid #efefef;
    }

    .submenu a {
        display: block;
        text-decoration: none !important;
        color: #fff;
        padding: 8px;
        padding-left: 20px;
        -webkit-transition: all 0.25s ease;
        -o-transition: all 0.25s ease;
        transition: all 0.25s ease;
    }

    .submenu a:hover {
        background: #b63b4d;
        color: #FFF;
    }

    .c-nav {
        color:#fff;
        font-size:1.1em;
        font-weight: bold;
        float:right;
        margin-top:50px;
        text-decoration: none;
    }

    .c-nav i {
        color:#fff;
        font-weight: bold;
        padding-right:5px;
    }

    .c-nav span {
        display: inline-block;
        font-size: .9em;
        font-weight: bold;
        margin-left: 3px;
        margin-top: 1px;
    }

    .nav-left {
        left: 0px;
    }

    .multiselect-container {
        background: #363636;
        padding: 15px 0px !important;
        width: 110%;
    }

    .btn-group {
        margin-bottom:5px;
    }

    .head-library .slide-content h2 {
        text-shadow: 3px 3px rgb(34 34 34 / 63%);
        padding-bottom: 15px;
        font-size: 1.5em;
    }

    .head-library .slide-content {
        width: 75% !important;
        max-width: 90% !important;
    }

    .library-categories .col {
        /*     width: 50%;
        flex: auto;*/
        margin-bottom: 5px;
        flex: 0 0 100%;
    }

    .avatar-list a {
        height: 67px;
        float: left;
        border: 2px solid #fff;
        margin-top: 5px;
    }

    .avatar-list a:hover {
        border: 2px solid #007fff;
    }

    .avatar-list a img {
        display: block;
        height: 67px;
    }
    .price-col .m-box {
        height: auto !important;
    }
    .library-categories .btn-group {
        margin-bottom: 5px;
        width: auto !important;
        display: contents !important;
    }
    .bg-payment {
        background-image: url(../images/library-cover.png);
        background: transparent !important;
        background-size: cover;
        background-position: center center;
        height: auto !important;
        margin-top: 25px;
        box-shadow: none;
        margin-bottom: -15px;
    }
    .bg-payment h4 {
        color: #ff6701;
        font-family: 'Vanilla';
        bottom: 50px;
        width: 90%;
        position: absolute;
        left: 0px;
        margin-top: 0px;
        left: 5%;
        text-align: center;
        padding-top: 0px;
        font-size: 1.2rem;
    }
    .box .icon-left img {
        width: 100%;
        top: 0px;
        position: absolute;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {

    .register-container {
        width: 90% !important;
    }

    .moving-clouds {
        display: none;
    }

    .footer-left a {
        font-size: .75em;
    }

    .icon-list a {
        font-size: .75em;
    }

    .nuts {
        font-size: .7em;
        line-height: 2.7em;
    }

    .box .icon-left img {
        width: 100%;
        top: 50px;
        position: absolute;
    }
}

@media (min-width: 801px) and (max-width: 1024px) {
        .slide-content h2 {
            color: #fff;
            line-height: 1.6em;
            font-size: 1.2em !important;
            max-width: 85%;
            font-family: 'Vanilla';
        }

        .slide-content p {
            color: #fff;
            font-size: 1em;
        }

    .box .icon-left img {
        width: 100%;
        top: 50px;
        position: absolute;
    }
   
    }



@media (min-width: 481px) and (max-width: 1024px) {
    .slide-content h2 {
        color: #fff;
        line-height: 1.6em;
        font-size: 1.2em !important;
        max-width: 85%;
        font-family: 'Vanilla';
    }

    .slide-content p {
        color: #fff;
        font-size: 1em;
    }

    .box .icon-left img {
        width: 100%;
        top: 50px;
        position: absolute;
    }

    .slide-content p {
        color: #fff;
        font-size: 1.2em;
        max-width: 100%;
    }

    .menu-items {
        display: none;
    }

    .navigation img {
        width: 50px;
        height: 50px;
    }

    .logotext {
        font-size: 1.3em;
        margin-top: 6px;
    }

    .no-ds {
        display: block;
    }

    .mb-nav-open {
        float: right;
        color: #fff;
        font-weight: bold;
        font-size: 1.7em;
        position: fixed;
        right: 27px;
        top: 15px;
        z-index: 99996;
    }


    .mob-box {
        width: 90%;
        background: #007fff !important;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        position: fixed;
        height: 100vw;
        height: 95%;
        left: -100%;
        transition: .6s ease-in-out all;
        display: block;
        top: 5%;
        z-index: 99997;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
    }

        .mob-box .holder {
            padding: 25px 25px 25px 25px;
        }

    .m-search {
        margin-top: 15px;
    }

        .m-search .inpi {
            position: absolute;
            top: 50%;
            left: 5%;
            padding-left: 14px;
            transform: translate(0,-50%);
            color: #161616;
        }

        .m-search input {
            width: 100%;
            background: #fff;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: .9em;
            padding-left: 2.3rem;
            border: 1px solid #dadada;
        }

    .m-social-holder {
        display: none !important;
        width: 100%;
        background: #fff;
        padding: 6px 12px;
        border-radius: 4px;
        font-size: 1em;
        border: 1px solid #dadada;
        margin-top: 15px;
        text-align: center;
    }

        .m-social-holder a {
            display: inline-block;
            text-align: center;
            padding: 0px 14px;
            color: #ff6701;
            font-size: 1.4em;
        }

    .accordion {
        width: 100%;
        max-width: 360px;
        margin: 3px auto 0px;
        background: #007fff;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        list-style-type: none;
        padding-left: 0px;
  
    }

        .accordion .link {
            cursor: pointer;
            display: block;
            padding: 11px 15px 11px 10px;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            border-bottom: 1px solid #efefef;
            position: relative;
            -webkit-transition: all 0.4s ease;
            -o-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }

    .mb-nav-open {
        float: right;
        color: #fff;
        font-weight: bold;
        font-size: 1.7em;
        position: fixed;
        right: 27px;
        top: 15px;
        z-index: 99996;
    }

        .mb-nav-open:hover {
            color: #fff !important;
        }


    .mob-box .m-logo {
        width: 75%;
        padding-bottom: 35px;
        padding-top: 10px;
    }


    .accordion .link {
        cursor: pointer;
        display: block;
        padding: 11px 15px 11px 0px;
        color: #161616;
        font-size: 1.2em;
        font-weight: 700;
        border-bottom: 1px solid #efefef;
        position: relative;
        -webkit-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }

    .root-link a {
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
    }

    .accordion li:last-child .link {
        border-bottom: 0;
    }

    .accordion li i {
        display:none;
    }

        .accordion li i.fa-chevron-down {
            right: 12px;
            left: auto;
            font-size: 16px;
        }

    .accordion li.open .link {
        color: #ff3364;
    }

    .accordion li.open i {
        color: #ff3364;
    }

        .accordion li.open i.fa-chevron-down {
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transform: rotate(180deg);
        }

    .accordion li.default .submenu {
        display: block;
    }
    /**
     * Submenu
     -----------------------------*/


    .c-nav {
        color: #fff;
        font-size: 1.1em;
        font-weight: bold;
        float: right;
        margin-top: 50px;
        text-decoration: none;
    }

        .c-nav i {
            color: #fff;
            font-weight: bold;
            padding-right: 5px;
        }

        .c-nav span {
            display: inline-block;
            font-size: .9em;
            font-weight: bold;
            margin-left: 3px;
            margin-top: 1px;
        }

    .mob-box .m-logo {
        width: 75%;
        padding-bottom: 35px;
        padding-top: 10px;
    }


    .accordion .link {
        cursor: pointer;
        display: block;
        padding: 11px 15px 11px 0px;
        color: #161616;
        font-size: 1.2em;
        font-weight: 700;
        border-bottom: 1px solid #efefef;
        position: relative;
        -webkit-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }

    .root-link a {
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
    }


    .submenu {
        display: none;
        background: #efefef;
        font-size: 14px;
    }

        .submenu li {
            border-bottom: 1px solid #efefef;
        }

        .submenu a {
            display: block;
            text-decoration: none !important;
            color: #fff;
            padding: 8px;
            padding-left: 20px;
            -webkit-transition: all 0.25s ease;
            -o-transition: all 0.25s ease;
            transition: all 0.25s ease;
        }

            .submenu a:hover {
                background: #b63b4d;
                color: #FFF;
            }

    .c-nav {
        color: #fff;
        font-size: 1.1em;
        font-weight: bold;
        float: right;
        margin-top: 50px;
        text-decoration: none;
    }

        .c-nav i {
            color: #fff;
            font-weight: bold;
            padding-right: 5px;
        }

        .c-nav span {
            display: inline-block;
            font-size: .9em;
            font-weight: bold;
            margin-left: 3px;
            margin-top: 1px;
        }

    .nav-left {
        left: 0px !important;
    }

    .multiselect-container {
        background: #363636;
        padding: 15px 0px !important;
        width: 110%;
    }

    .btn-group {
        margin-bottom: 5px;
    }

    .head-library .slide-content h2 {
        text-shadow: 3px 3px rgb(34 34 34 / 63%);
        padding-bottom: 15px;
        font-size: 1.5em;
    }

    .head-library .slide-content {
        width: 75% !important;
        max-width: 90% !important;
    }

    .library-categories .col {
        /*    width: 50%;
        flex: auto;*/
        margin-bottom: 5px;
        flex: 1 0 20%;
    }

    .avatar-list a {
        height: 67px;
        float: left;
        border: 2px solid #fff;
        margin-top: 5px;
    }

        .avatar-list a:hover {
            border: 2px solid #007fff;
        }

        .avatar-list a img {
            display: block;
            height: 67px;
        }

    .slide-content {
        position: absolute;
        bottom: 120px;
        max-width: 100%;
    }

    .box {
        margin-bottom: 15px !important;
        height: auto !important;
    }
}