/* BEGIN MOBILE OPTIMIZATION >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* BEGIN MOBILE OPTIMIZATION >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* BEGIN MOBILE OPTIMIZATION >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

@media screen and (min-width: 321px) and (max-width: 700px){
    nav{
        top: 10px;
        z-index: 150;
    }
    .logo-icon{
        margin: 0px 5px !important;
        position: relative;
        top: -3px;
    }
    .menu-icon{
        margin: 0px 5px !important;
    
    }
    .nav-cart{
        display: inline;
        color: #000000;
        background-color: #e7e7e7;
        padding: 4px 10px;
        border-radius: 7px;
        position: relative;
        top: -5px;
        left: -5px;
        text-decoration: none;
    }
    main{
        padding: 0px; 
        margin: 0px;
    }
    .content{
        display: block;
        box-sizing: border-box;
        width: 100%;
        margin: 0 auto;
        padding: 0px 5px;
        overflow: hidden;
    }
    .content h1{
        margin: 0 0;
    }
    .content.first{
        margin-top: 0px;
    }
    #studio-desc{
        font-size: 15px;
        padding: 10px 25px;

    }
    .btn-cont{
        width: 100%;
        text-align: center;
    }
    #home-content-music{
        display: inline;
        float: unset;
        margin-right: 10px;
    }
    #home-content-book{
        float: unset;
    }
    .menu{
        position: relative;
        top: 15px;
    }
    .menu a{
        font-size: 25px;
    }
    footer{
        width: 100%;
        font-size: 17px;
        line-height: 35px;
    }
    .footer-col{
        text-align: center;
        display: block;
        width: 100%;
    }
    .footer-col.left{
        text-align: center;
    }

    /** studio **/
    .content.studio h1{
        margin-bottom: 15px;
    }
    .studio{
        margin: 0;
    }
    .studio h1{
        margin: 30px;
    }
    .studio-text-cont{
        padding: 5px;
        border: 0;
    }
    .studio-text-cont h2{
        margin: 15px;
        margin-bottom: 0px;
        padding: 0;
    }
    .studio-text-cont p{
        font-size: 17px;
        border: 0;
        padding: 0
    }
    .studio-text-cont img{
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .studio-cont form .form-group{
        width: 100%;
    }
    .studio-cont form .form-group.third{
        width: 100%;
    }
    /** border: 1px solid #000000; **/ 
    /** CART STUFF **/
    .cart.category{
        padding: 10px 5px;
    }
    .third{
        display: block;
        width: 100%;
    }
    /** CHECKOUT STUFF **/
    .checkout-half{
        width: 50%;
        padding: 5px;
        overflow: hidden;
        box-sizing: border-box;
    }
    .checkout-half .form-group{
        display: block;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }
    .checkout-half .form-control{
        display: block;
        width: 95%;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    /** SHOP STUFF **/
    .shop{
        width: 80%;
    }
    .card.fourth{
        display: block;
        width: 100%;
    }
    /** APPAREL STUFF **/
    .container.apparel{
        width: 98%;
    }
    .half{
        display: block;
        width: 100%;
    }
    .container.quantity{
        margin-bottom: 25px;
    }
    .container.quantity button, input[type="text"]{
        display: inline;
        float: left;
        width: 33%;
    }

    
    /***** LOGIN STUFF ******/

    .container.login{
        margin: 10px 0px;
    }
    .btnLogin{
        width: 100% !important;

    }
    /***** PAYMENT PAGE ****/
    .paymentMethod button[type=submit]{
        width: 100%;
    }
    .social-media{
        box-sizing: border-box;
        width: 90%;
    }
    .smi{
        width: 30px;
    }

    

@media screen and (min-width: 150px) and (max-width: 700px){

    .textBox{
        width: 100% !important;
        position: relative;
        top: 0px;
    }
    .bookFeatureTable td{
        font-size: 15px;
    }
    .blogPost{
        padding: 15px;
    }
    .blogInlineImg{
        width: 45%;
    }
}
}