@media screen and (max-width: 480px) {
    .header {
        background-size: auto;
    }

    .header .header-back {
        /*background-image: linear-gradient(90deg, #7f4525 10%, rgba(168,125,79,0.67) 100%)*/
    }

    .header .navbar img {
        max-width: 175px;
        max-height: 100px;
    }

    .header .row .col-md-12 {
        padding-right: 0;
        text-align: right
    }

    .header .row p {
        font-size: 1.7em;
    }

    .header .row h2 {
        margin-top: 18%;
        font-size: 1.7em;

    }

    .header .row a {
        font-size: 1.2em;
        width: 45%;
        border: 0;
        margin-top: 4%;
    }

    .header .row img:not(.drink img) {
        font-size: 1.3em;
        width: 90%;
        right: 0;
        top: 30px
    }

    .drinks {
        padding: 10px
    }

    .drinks .drinks-back {
        background-size: 100%;
        width: 100px;
        height: 100px;
        left: 0
    }

    .drinks .drink {
        width: 80%;
        margin: 5px
    }

    .drinks .drink:first-of-type {
        margin-left: 15px
    }

    .drinks .drink:last-of-type {
        margin-right: 15px
    }

    .home {
        padding: 10px;
        /*margin: 10px*/
    }

    .home .row {
        width: 98%;
        margin: auto;
        padding-bottom: 20px
    }

    .home .row .okka span {
        margin-top: 0.2em
    }

    .home .row .okka a {
        width: 60%;
        display: block;
        margin: auto;
        text-align: center
    }

    .about {
        padding: 10px;
        text-align: center !important;
    }

    .about .row div:nth-of-type(3) h5 {
        text-align: center
    }

    .about .row div:nth-of-type(3) p {
        text-align: justify;
        padding: 0 20px;
    }
}

@media screen and (max-width: 900px) {
    body {
        /*min-height: 1600px*/
    }

    .header {
        background-size: 50% 100%;
        height: 62vh;
    }

    .drinks {
        padding: 50px;
    }

    .drink {
        /*min-width: 50%;*/
        /*min-height: 250px*/
    }

    .drink h3 {
        margin-top: 0
    }

    .home {
        padding: 50px;
    }

    .home .home-back {
        /*background-size: 120% 100%*/
    }

    .home .row {
        padding: 0px;
        padding-bottom: 30px;
    }

    .home .row div:first-of-type {
        width: 30%
    }

    .home .row div:first-of-type {
        min-width: 100%
        /*min-width: 60%*/
    }

    .home .row div:first-of-type img {
        width: 50%
        /*min-width: 60%*/
    }

    .home .row div:last-of-type {
        min-width: 100%
        /*min-width: 60%*/
    }

    .home .row .okka {
        text-align: center;
        /*max-width: 60%*/
    }

    .home .row .okka h2:after {
        right: 40%
    }

    .home .row .okka span {
        margin: 0;
        text-align: center;
    }

    .about .row div {
        padding: 10px;
    }

    .about .about-back {
        left: -73px;
        bottom: 200px;

    }

    .about .row div i {
        margin: 5px
    }
}