h1 { font-size: 40px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }


.popup > .window > .header > p,
.popup > .window > .content > .form-group input,
.popup > .window > .content > .form-group textarea,
.popup > .window > .content > .form-group input::placeholder,
.popup > .window > .content > .form-group textarea::placeholder { font-size: 16px; }



nav.top > div { grid-template-columns: max-content 1fr; grid-gap: 0 40px; }
nav.top > div > ul.menu { width: 100%; }

#about { grid-auto-flow: row; grid-row-gap: 105px; margin: 0; }
#about .about { width: 80%; margin-left: auto; margin-right: auto; }
#about .about > p { font-size: 20px; }
#about .dynamic-images { top: unset; right: unset; height: 500px; }
#about .dynamic-images::after { left: 0; bottom: 0; width: 100%; height: 100%; }
#about .dynamic-images > .shield { top: 50%; transform: translateY(-50%); }
#about .dynamic-images > .points { top: 30px; height: calc(100% - 30px); }

#description { width: 100%; grid-row-gap: 60px; }
#description > h2 { margin-left: auto; margin-right: auto; width: 80%; }
#description > ul.aboutThings { height: 100%; grid-row-gap: 40px; }
#description > ul.aboutThings .icon { width: 100%; height: 150px; }
#description > ul.aboutThings > li { padding: 20px; width: 100%; max-width: unset; grid: max-content / auto; }
#description > ul.aboutThings > li > p { font-size: 16px; }

#demo {
    width: 100%;
    grid-row-gap: 60px;
}

    #demo > h2 {
        margin-left: auto;
        margin-right: auto;
        width: 80%;
    }

    #demo > ul.aboutThings {
        height: 100%;
        grid-row-gap: 40px;
    }

        #demo > ul.aboutThings .icon {
            width: 100%;
            height: 150px;
        }

        #demo > ul.aboutThings > li {
            padding: 20px;
            width: 100%;
            max-width: unset;
            grid: max-content / auto;
        }

            #demo > ul.aboutThings > li > p {
                font-size: 16px;
            }

#services { margin-left: 0; margin-right: 0; padding: 50px; width: 100%; grid-row-gap: 50px; }
#services > ul.services > li { width: 80%; }

#contacts { padding-left: 0; padding-right: 0; }
#contacts a, #contacts p { font-size: 16px; }
#contacts > .icon { width: 200px; height: 200px; }

footer > .extra > nav.bottom { grid-auto-flow: row; }
footer > .extra > nav.bottom > h4 { display: inline-block; }
footer > .extra > nav.bottom > a { grid-column: unset; }
footer > .extra > nav.bottom > ul > li:nth-child(n) { grid-column: unset; }
footer > .extra > nav.bottom > ul > li > a { font-size: 16px; }
footer > .copyright > p { font-size: 14px; }






#about::before,
#about .dynamic-images::before,
#about .about h1::before,
#description::before,
#description > ul.aboutThings > li:nth-child(2)::before,
#description > ul.aboutThings > li:nth-child(3)::before,
#description > ul.aboutThings > li:nth-child(5)::before,
#description > ul.aboutThings > li:nth-child(7)::before,
#demo::before,
#services::before,
#services > ul.services > li:nth-child(2)::before,
#advantages::before, #docs::before, footer::before, #about::after,
#description > ul.aboutThings > li:nth-child(1)::after,
#description > ul.aboutThings > li:nth-child(4)::after,
#description > ul.aboutThings > li:nth-child(6)::after,
#demo > ul.aboutThings > li:nth-child(1)::after,
#services > ul.services > li:nth-child(1)::after,
#contacts > .info > h2::after {
    transform: scale(0.85);
}