@media (width < 600px) {
    body{
        width: 100%;
        
        -webkit-backface-visibility: hidden;
        margin: 0;
        padding: 0;
    }
    .nav{
        display: none;
    }
    header{
        width: 100%;
    }
    phone-header{
        position: fixed;
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
	    font-size: 2.5rem;
    }
    phone-header a{
        display: flex;
        padding: 5px;
        height: 3rem;
        align-items: center;
        justify-content: center;
        width: 100%;
        color: rgb(77, 167, 209);
        margin-bottom: 5px;
        border-right: 0;
        border-radius: 5px 0 0 5px;
        box-shadow: 0 0px 10px 5px rgba(77, 167, 209, 0.6);;
        padding: 2px;
        
        text-decoration: none;
    }
    .sticky{
        position: absolute;
        
        height: 20vh;
        top: 15vh;
    }
    catalog{
        max-width: 100%;
        left: 50%;
        transform: translate(-50%,0);
    }
    personal-product{
        max-width: 100%;
        
        left: 50%;
        transform: translate(-50%,0);
    }
    personal-wrapper{
        flex-direction: column;
        max-width: 80%;
        align-items: center;
    }
    personal-wrapper input{
        width: 300px;
    }

    .basket{
        width: 99%;
        height: 50%;
        top: auto;
        bottom: 0;
    }
    .basket::after{
        bottom: 0 auto;
    }
    .basket-heading{
        margin-top: 5%;
    }
    .basket-content-wrapper{
        padding-top: 15%;
        height: 40%;
    }
    .basket-footer{
        padding-top: 50%;
    }

    product-more-wrapper, buyprocess-wrapper, agreement-fill-wrapper{
        max-width: 599px !important;
        height: 100%;
    }
    product-more{
        position: absolute;
        width: 80%;
        min-height: 80%;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    agreement-fill{
        position: absolute;
        width: 80%;
        min-height: 80%;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        border-radius: 2rem;
    }
    .contract::-webkit-scrollbar{
	    display: none;
    }
    .contract{
        padding: 5%;
    }
    buyprocess{
        position: absolute;
        width: 80%;
        height: 70%;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    buyprocess h1{
        position: absolute;
        padding-top: 10%;
        text-align: center;
    }
    #closePayment{
        position: absolute;
        left: 85%;
        font-size: 2.5rem;
    }
    product-more img{
        top: 0;
        max-width: 90%;
        max-height: 70%;
    }
    more-info{
        width: 90%;
        height: 90%;
    }

    selling-wrapper{
        position: absolute;
        top: 25%;
        flex-direction: column;
        justify-content: center;
        width: 90%;
        height: 70%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    bill-wrapper{
        position: absolute;
        top: 0;
        height: 25%;
        width: 100%;
        z-index: 6;
        border: 0;
        border-radius: 1rem;
        box-shadow: 0 5px 10px  rgba(77, 167, 209, 0.6);
    }
    bill-wrapper .basket-content{
        padding-top: 10px;
        padding-left: 5px;
        padding-right: 5px;
        width: 95%;
        left: 2.5%;
        height: 95%;
        border-radius: 0;
        overflow: auto;
        scroll-behavior: smooth;
    }
    bill-wrapper .basket-content h4{
        font-size: 0.8rem;
    }
    bill-wrapper .basket-content img{
        max-height: 65%;
    }
    personal-info{
        position: absolute; 
        top: 20%;
        height: 50%;
        width: 90%;
        
    }
    #purchaseForm{
        position: absolute;
        top: 200px;
        display: flex;
        width: 100%;
        justify-content: center;                
        
    }
    #purchaseForm button{
        text-align: center;
        display: flex;
        width: 35%;
        min-height: 30px;
        align-content: center;
        transform: translate(-25%,0);
        justify-content: center;
    }


    product{
        width:130px;
        height: 160px;
        font-size: 11px;
    }

    products-wrapper{
        width: 120%;
        margin-left: -10%;
        justify-content: center;
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        row-gap: 50px;
        column-gap: 10px;
    }

    product bottom-layer, product price button{
        display: none;
    } 
    product product-info{
        display: flex;
        max-height: 70%;
    }
    product top-layer, product top-layer img{
        max-height: 80%;
    }
    product h4{
        width: 110%;
        text-align: center;
        font-size: 12px;
        font-weight: 400;
    }





















}