@media screen and (max-width: 599px) {
    html {
        scroll-behavior: smooth;
    }
    
    .body_container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 170px min-content min-content max-content max-content;
    }
    
    /*HEADER START*/
    header {
        grid-column: 1/4;
        grid-row: 1;
        justify-self: center;
        display: flex;
        border-bottom: 1px solid red;
        width: 100%;
        height: 150px; 
        padding-bottom: 20px;
        margin-bottom: 30px;
    }
    
    .header--logo {
        height: auto;
        max-width: 300px;
        width: 100%;
        margin: auto;
        border-radius: 100%;
    }
    
    .header--photo {
        grid-column: 1/4;
        grid-row: 3;
        justify-self: end;
        width: 100%;
        height: auto;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        margin-top: 0;
    }
    /*HEADER END*/
    
    /*NAV START*/
    nav {
        grid-column: 1/4;
        grid-row: 2;
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        gap: 5px;
        justify-content: center;
        margin: 0;
        padding-right: 5px;
        padding-left: 5px;
    }
    
    nav > a {
        padding: 1px 2px;
        margin-right: -1px;
        background-color: rgb(195, 195, 195);
        border-radius: 20px;
        color: white;
        font-weight: bold;
        margin: 10px 0;
        width: 20%;
        text-align: center;
        font-size: 15px;
    }

    @media screen and (max-width: 440px) {
        nav>a {
            font-size: 12px;
        }
    }

    @media screen and (max-width: 330px) {
        nav>a {
            font-size: 10px;
        }
    }
    
    nav > a:hover {
        text-decoration: underline;
        color: black;
    }
    
    /*NAV END*/
    /*MAIN START*/
    main {
        margin-top: 0;
        grid-column: 1/4;
        grid-row: 4;
        display: flex;
        flex-direction: column;
    }

    #uvod {
        margin-bottom: 0;
        margin-top: 5px;
        backdrop-filter: blur(4px);
        background-color: rgba(255, 255, 255, 0.308);
        border-radius: 10px 10px 0 0;
    }
    
    main > h2 {
        margin: 0 0 0 5%;
        padding: 5px 25px 0 25px;
        border-bottom: 1px solid red;
        width: min-content;
    }
    section > h3 {
        margin-left: 5%;
        margin-right: 0;
        width: fit-content;
        padding: 0 0;
        border-radius: 10px 10px 0 0;
        margin-top: 10px;
        backdrop-filter: blur(4px);
        background-color: rgba(255, 255, 255, 0.308);
    }
    
    section > div {
        padding: 0 !important;
        margin: 0 5%;
    }
    
    .gallery--section {
        background-color: rgb(249, 249, 249);
        padding-bottom: 10px;
    }
    
    .gallery--article {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 10px;
        margin: 30px 5% 0 5%;
    }
    
    .gallery--img {
        display: none;
        flex-grow: 1;
        max-width: 32%;
        border-radius: 10px;
        box-shadow: 1px 2px 5px rgb(154, 77, 77);
    }

    .certificates__container {
        margin: 30px 5% 20px 5%;
    }

    .certificates {
        max-width: 32%;
    }
    /*MAIN END*/
    /*FOOTER START*/
    footer {
        grid-column: 1/4;
        grid-row: 5;
        display: flex;
        flex-direction: column;
        background-color: rgb(195, 195, 195);
        box-shadow: inset 0px 4px 5px rgb(249, 249, 249);
        padding-bottom: 40px;
    }
    
    .footer_zdena {
        margin-top: 10px !important;
    }
    footer > h2 {
        grid-row: 1;
        grid-column: 1/7;
        margin: 10px 0 0 5%;
        padding: 5px 25px 0 25px;
        border-bottom: 1px solid red;
        width: min-content;
    }
    
    footer > div {
        margin: 0 0 0 5% !important;
    }
    footer > address {
        margin-left: 5%;
    }

    .footer_map {
        width: 90%;
        margin-right: 5%;
        margin-left: 5%;
    }
    
    /*FOOTER END*/

    .container {
        
        display: none;
        grid-template-columns: 8% 84% 8%;
        grid-template-rows: repeat(2, min-content);
        opacity: 0;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }
    
    .images {
        grid-column: 1/4;
        grid-row: 2;
        width: fit-content;
    }
    
    .img__window {
        display: none;
        
        border-radius: 10px;
        animation-duration: 0.2s;
        animation-fill-mode: forwards;
    }
    .container button {
        display: none;
        background-color: rgba(0, 0, 0, 0.15);
        color: white;
        font-size: 30px;
        border: none;
        cursor: pointer;
        transition: 0.5s;
    }

    .languageBtn {
        font-size: 10px;
        line-height: 20px;
        width: 25px;
        height: 25px;
        top: 15px;
        left: 15px;
    }
}