@media (max-width: 768px) {

    body {
        font-size: 12pt;
        line-height: 20pt;
    }
    
    header {
        flex-direction: row;
        padding: 0 0 0 20px;
        position: fixed;
        background: black;
        width: 100vw;
        display: flex;
        z-index: 1;
        justify-content: flex-end;
        align-items: center;
    }
    
    .header-fixed header {
        margin-bottom: 0;
    }
    

    header .logo svg{
        height: 58px;
        margin-left: -63px;
        margin-top: -34px;
        position: absolute;
        /* left: 0; */
        /* top: 0; */
    }
    
    .header-moving .logo, .header-start .logo, .header-fixed .logo {
        position: relative;
        top: 0;
        width: 100%;
        text-align: left;
        transition: none;
        transform: none;
        margin-top: 10px;
    }    
    
    .header-fixed .logo #type {
        display: block;
    }
    
    .burger, .mobile-donate {
        display: block;
        padding: 0 20px;
        text-align: center;
    }
    
    .mobile-donate {
        background-color: var(--red-color);
        height: 77px;
        width: 77px;
        padding: 0;
    }

    .mobile-donate svg {
        width: 77px;
        height: auto;
    }
    
    .nav {
        display: none;
        flex-direction: column;
        width: 100%;
        background: white;
        padding: 10px 0;
        position: absolute;
        top: 70px;
        left: 0;
        z-index: 999;
    }
    
    .nav.show {
        display: flex;
    }
    
    .hero, .three-columns, .beige-section {
        padding: 20px;
    }
    
    .step {
        flex-direction: column;
        align-items: flex-start;
    }

    .step-title {
        min-width: 100%;
        width: 100%
    }
        
    .sidebar {
        display: none;
    }
    
    .footer-columns {
        flex-direction: column;
        gap: 20px;
    }

    .menu-block {
        display: none;
    }

    main {
        margin-top: 70px;
    }

    main .top-image {
        display: block;
    }

    section {
        padding: 20px;
    }

    .beige-section svg {
        display: none;
        /* max-width: 100%; */
    }

    .beige-section svg+p {
        padding-top: 0px;
    }

    .step img {
        width: 100%;
    }
    
    .step-text {
        padding-left: 0px;
    }
    footer h3 {
        font-size: 20pt;
        line-height: 28pt;
        margin: 0px;
    }
    
    footer {
        padding: 20px
    }

    footer .footer-columns, footer .footer-bottom {
        display: none;
        margin: 0;
    }

    .three-columns {
        gap: 30px;
    }    

    .mobile-main-menu.show {
        display: flex;
        position: absolute;
        top: 77px;
        border-bottom: none;
        background-color: var(--red-color);
        left: 0;
        min-height: calc(100vh - 77px);
        height: calc(100vh - 77px);
        z-index: 1000;
        padding: 19px;
        flex-direction: column;
        gap: 10px;
        padding-bottom: 0px;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    .mobile-main-menu>div:first-child {
        display: flex;
        height: calc(100vh - 246px);
    }
    
    .mobile-main-menu>div{
        border-bottom: 1px solid white
    }
    
    .left-menu {
        display: flex;
        flex-direction: column;
        align-content: space-between;
        justify-content: space-around;
        font-family: "Geologica", sans-serif;
        font-size: 15pt;
    }
    
    .right-menu {
        overflow: scroll;
        scrollbar-color: #ffb0b0 var(--red-color);
    }

    .right-menu li {
        list-style-type: circle;
    }    

    .right-menu li:first-child {
        font-weight: bold;
        list-style: none;
        font-weight: 400;
    }

    .right-menu li:first-child a {
        font-weight: 600;
        font-style: italic
    }
    
    .right-menu a {
        font-weight: 400;
    }
    
    .mobile-main-menu .lang, .mobile-main-menu .social, .mobile-main-menu .policy {
        gap: 20px;
        display: flex;
        padding-bottom: 10px;
    }
    
    .mobile-main-menu .lang {
        font-size: 11pt;
        letter-spacing: 0.1em;
    }
    
    .mobile-main-menu .social {
        font-size: 15pt;
    }
    
    .mobile-main-menu .policy {
        font-size: 10pt;
        font-style: italic;
        border-bottom: none;
        margin-bottom: 0;
        line-height: 13pt;
        margin-top: -10px;
    }
    
    .mobile-main-menu .lang a.selected {
        font-weight: 800;
    }
    
}