@media only screen and (max-width: 1200px) {
    .home-head-left{
        padding: 180px 15px 100px;
    }
    #story{
        padding: 20px 15px;
    }

    .navbar-light .navbar-nav .nav-link{
        margin-left: 0;
    }

    .pad-zero{
        padding: 0;
    }

    #editor{
        margin-bottom: 50px;
    }

    #editor-header{
        padding-left: 15px;
        color: #101010;
    }

    #editor-header .maize-btn{
        border-radius: 0;
        padding: 6px 19px 8px;
    }

    #editor-header .link-undo{
        color: #101010;
    }

    #editor-header img{
        margin-top: -4px;
    }

    .sidebar-1{
        background-color: #330F82;
    }

    .sidebar-1 a{
        border-bottom: 4px solid #330F82;
        font-weight: bold;
        font-size: 14px;
        line-height: 21px;
    }

    .sidebar-2{
        background-color: #F7F7F7;
        display: flex;
    }

    div.scrollmenu {
        overflow: auto;
        white-space: nowrap;
    }

    div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    }

    div.scrollmenu a:hover {
        border-bottom: 4px solid #FFC952;
    }

    #editor .editor-body{
        padding: 25px 15px;
        border-radius: 0;
        margin: 0;
    }

    #editor .editor-body .editor-main{
       /* height: 500px;*/
    }

    #premium-res{
        background-color: #330F82;
        padding:  15px 15px 5px;
        color: #FFFFFF;
    }

    #premium-res img{
        margin-bottom: -5px;
    }

    #premium-res .maize-btn{
        padding: 3px 10px 5px;
        font-size: 14px;
    }
}


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

    h1{
        font-weight: 600;
        font-size: 32px;
        line-height: 40px;
    }

    h2{
        font-weight: 600;
        font-size: 24px;
        line-height: 34px;
    }

    /* Navbar */

    .navbar{
        padding: 0 15px;
        transition: all ease 0.4s;
    }

    .active-navbar {
        background-color: #330F82;
        color: #FFFFFF;
    }

    .navbar-light .navbar-toggler{
        border: none;
    }


    .navbar-light .navbar-nav .nav-link{
        font-weight: bold;
        font-size: 18px;
        line-height: 68px;
        color: #FFFFFF;
        margin-left: 0;
        margin-top: 0;
    }


    .navbar-light .navbar-nav{
        margin-bottom: 40px;
    }

    .navbar-light .navbar-nav .btn{
        background-color: transparent;
        color: #FFC952;
        border-color: #FFC952;
        margin: 10px;
    }

    /* FOOTER */

    footer{
        padding: 30px 20px;
    }

    footer .card-header{
        background-color: #101010;
    }

    footer .card-header{
        padding: 0;
    }

    footer .card{
        background-color: #101010;
        border-radius: 8px;
        border: none;
        margin-bottom: 24px;
    }

    footer .card-body{
        background-color: #101010;
        border: none;
        font-weight: normal;
        font-size: 18px;
        line-height: 28px;
        padding: 16px;
    }

    footer button{
        color: #FFFFFF;
        padding: 0;
        font-weight: 600;
        font-size: 18px;
        line-height: 25px;
    }

    footer .btn{
        font-weight: 600;
        font-size: 18px;
        line-height: 25px;
        padding: 0;
        padding: 11px 16px 12px;
    }

    footer .btn-link:hover{
        color: #FFFFFF;
        text-decoration: none;
    }

    footer .btn.collapsed{
        background-color: #101010;
        color:#ffffff;
    }

    footer .btn-link{
        color: #101010;
        background: #FFC952;
        text-decoration: none;
    }

    /*Home-head*/

    #home-header .home-head-left{
        padding: 30px 20px ;
    }

    #home-header .home-head-right{
        height: 60vh;
    }

    #home-header .head-buttons {
        margin-bottom: 0;
    }

    #home-header .home-head-vector, .vector-2, .vector-3, .vector-4{
        display: none;
    }

    .only-on-small{
        padding: 30px 15px;
    }


    .only-on-small p{
        font-size: 24px;
        line-height: 34px;
    }

    .only-on-small img{
        margin-bottom: 20px;
    }


    /* Story */

    #story{
        margin: 0 15px 40px;
        padding: 20px;
    }

    #story .story-img{
        margin-bottom: 20px;
    }

    #story .story-pic{
        position: static !important;
        margin: 0;
    }

    /* Easy to make */

    #easy-to-make{
        padding: 30px 20px;
    }

    #easy-to-make a{
        margin-bottom: 24px;
        margin-right: 0;
        padding: 15px 20px 16px;
        width: 100%;
    }

    /* Create book */
    #create-book{
        margin: 50px 20px;
    }

    #create-book .tab-pane .free-book, #create-book .tab-pane .premium-book{
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    #create-book .tab-pane .fa-ul{
        margin: 0;
    }
    #create-book .nav-pills .nav-link{
        border-radius: 0;
        padding: 12px 0 10px;
        background-color: #F7F7F7;
    }

    #create-book .nav-pills a{
        color: #101010;
    }

    #create-book .nav-pills .active{
        color: #FFFFFF;
    }

    #create-book .nav-pills .nav-link.active{
        background-color: #871C73;
        border-bottom: 1px solid #FFFFFF;
    }

    /* FAQs */

    #FAQs{
        padding: 50px 0;
    }

    #others, #others-2{
        margin: 50px 10px;
    }

    /*Slider*/
    #other-creations{
        margin: 30px 15px;
    }

    #slider{
        margin: 50px 0 285px;
        height: 375px;
    }

    #slider .carousel-control-prev{
        position: relative;
        margin: 0;
        margin-top: 20px !important;
        margin-left: 20px;
    }

    #slider .carousel-control-next{
        position: relative;
        margin: 0;
        margin-top: 20px !important;
        margin-right: 20px;
    }

    /* New Users */
    #new-user-header{
        margin: 0;
        padding: 20px 15px;
        border-radius: 0;
    }
    #editor .editor-pagination .page-link{
        padding: 12px 21px 13px;
    }

    /* Add-photo */

    #add-photo .modal-dialog{
        max-width: 1000px;
        padding: 15px;
    }

    #add-photo .modal-header{
        margin-left: 0;
        margin-right: 0;
    }

    #add-photo .modal-con{
        margin-left: 0;
        margin-right: 0;
    }

    #add-photo .modal-footer{
        margin-left: 0;
        margin-right: 0;
    }

}


@media only screen and (max-width: 768px) {
    #slider{
        margin: 50px 0 240px;
        height: 300px;
    }

    #others .maize-btn{
        width: 100%;
    }
}

@media only screen and (max-width: 1100px) {
    #editor .a-left{
        bottom: 10px;
        left: 20px;
    }

    #editor .a-right{
        bottom: 10px;
        right: 20px;
    }
}
@media only screen and (max-width: 576px) {
    #home-header .head-buttons a{
        margin-bottom: 24px;
        width: 100%;
        margin-right: 0;
        padding: 15px 20px 16px;
    }

    footer img{
        margin-top: -10px;
    }

    #editor .editor-pagination .page-link{
        padding: 10px 18px 11px;
        font-size: 10px;
    }



}