h1 { font-size: 24px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
h4 { font-size: 18px; }

body {
	margin: 0 15px;
	width: calc(100% - 30px);
    grid-row-gap: 75px;
}

.popup > .window { position: absolute; padding: 15px; top: 50%; width: calc(100% - 30px); grid-gap: 10px 0; transform: translate(-50%, -50%); }
.popup > .window button.close { top: -14px; right: -10px; width: 36px; height: 36px; background-size: 12px; }
.popup > .window > .header > * + * { margin-top: 7px; }
.popup > .window > .header > p { font-weight: 300; text-align: justify; }
.popup > .window > .content { grid-auto-flow: row; grid-template-columns: unset; justify-items: center; }
.popup > .window > .content > .img { display: none; /*width: 200px; height: 200px;*/ }
.popup > .window > .content > .form-group { width: 100%; grid-gap: 7px 0; }
.popup > .window > .content > .form-group input { height: 30px; }
.popup > .window > .content > .form-group input,
.popup > .window > .content > .form-group textarea { border-radius: 4px; }
.popup > .window > .content > .form-group textarea { height: 68px; }
.popup > .window > .content > .form-group button {
	justify-self: end;
	padding: 8px 30px;
    min-width: 140px;
    font-size: 14px;
    font-weight: 400;
}


/* mobileMenu */
#mobileMenu[data-show='0'] { z-index: -10; }

#mobileMenu:not([data-show='1']) > .popupBG,
#mobileMenu:not([data-show='1']) > button { opacity: 0; }

#mobileMenu:not([data-show='1']) .block,
#mobileMenu:not([data-show='1']) button { transform: translateY(-700px); }

#mobileMenu { display: block; }
#mobileMenu > * { transition: 0.5s ease-out; }

#mobileMenu .block {
	position: fixed;
    top: 0;
    left: 0;

    padding: 30px 0;
    width: 100%;

    display: grid;
    grid-gap: 20px 0;
    background-color: #dfe8f4;
}

#mobileMenu .menu > li { margin: 0 auto; padding: 12px 0; width: 70%; display: grid; justify-items: center; }
#mobileMenu .menu > li a { color: #000; font-size: 18px; font-weight: 300; text-align: center; text-decoration: none; }

/* open */
.open-mobile-menu {
	justify-self: end;
	padding: unset;
	display: block;
	width: 30px;
	height: 30px;
	min-width: unset;

	background-position: center;
	background-size: 28px;
	background-repeat: no-repeat;
	background-color: unset;
	background-image: url(../img/menu-000.svg);
}

.open-mobile-menu:hover,
.open-mobile-menu:active { background-color: unset; }

/* close */
.close-mobile-menu {
	position: fixed;
	top: 20px;
	right: 20px;

	justify-self: end;
	padding: unset;
	display: block;
	width: 20px;
	height: 20px;
	min-width: unset;

	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: unset;
	background-image: url(../img/cross-577bf4.svg);
}

.close-mobile-menu:hover,
.close-mobile-menu:active { background-color: unset; }



nav.top { padding: 0 15px; }
nav.top > div { margin-top: 0; grid-template-columns: 1fr max-content; }
nav.top > div > ul.menu,
nav.top > div > .search { display: none; }

#about .about { width: 100%; }
#about .about > p { font-size: 18px; }
#about .dynamic-images { display: none; }

#description { grid-row-gap: 30px; }
#description > h2 { width: 100%; }
#description > ul.aboutThings { grid-row-gap: 30px; }
#description > ul.aboutThings .icon { height: 100px; }
#description > ul.aboutThings > li { padding: 15px; width: 100%; max-width: unset; background-color: rgba(223,232,244,0.5); box-shadow: unset; }
#description > ul.aboutThings > li > .icon.no-fat::after { bottom: calc(50% - 30px - 60px); }

#description > ul.aboutThings > li > h4,
#description > ul.aboutThings > li > p,
#description > ul.aboutThings > li button { grid-column: 1; }

#demo {
	grid-row-gap: 30px;
}

	#demo > h2 {
		width: 100%;
	}

	#demo > ul.aboutThings {
		grid-row-gap: 30px;
	}

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

		#demo > ul.aboutThings > li {
			padding: 15px;
			width: 100%;
			max-width: unset;
			background-color: rgba(223,232,244,0.5);
			box-shadow: unset;
		}

			#demo > ul.aboutThings > li > .icon.no-fat::after {
				bottom: calc(50% - 30px - 60px);
			}

			#demo > ul.aboutThings > li > h4,
			#demo > ul.aboutThings > li > p,
			#demo > ul.aboutThings > li button {
				grid-column: 1;
			}

#services { padding: 30px 15px; margin-left: -15px; width: calc(100% + 30px); grid-row-gap: 30px; border-radius: unset; }
#services > ul.services > li { width: 100%; max-width: 500px; }
#services > ul.services > li .header { grid-column-gap: 20px; }
#services > ul.services > li .header .icon { width: 70px; height: 70px; }

#advantages { grid-row-gap: 30px; }
#advantages > ul.advantages > li { width: 100%; }

#docs {
	grid-row-gap: 30px;
}

	#docs > ul.docs > li {
		width: 100%;
	}

#FAQ { margin-left: -15px; width: calc(100% + 30px); padding: 30px 15px; grid-gap: 30px 0; border-radius: unset; }

#contacts { padding: 30px 0; grid-column-gap: 30px; grid-template-columns: unset; }
#contacts::after { right: -15px; width: calc(100% + 30px); border-radius: 0; }
#contacts > .icon { display: none; }
#contacts > .info { grid-row-gap: 30px; }
#contacts > .info > h2 { text-align: center; }

footer { padding: 0 0 50px 0; grid-row-gap: 30px; }
footer::before { top: 30px; right: -20px; }
footer > .extra { grid-auto-flow: row; grid-row-gap: 30px; }
footer > .extra > nav.bottom > a { display: none; }


#about::after { top: -70px; left: calc(50% + 40px); }
#description::before { display: none; }
#description > ul.aboutThings > li:nth-child(1)::after { left: -60px; }
#description > ul.aboutThings > li:nth-child(2)::before { right: -30px; }
#description > ul.aboutThings > li:nth-child(3)::before { left: -85px; }
#description > ul.aboutThings > li:nth-child(4)::after { right: -30px; }
#description > ul.aboutThings > li:nth-child(5)::before { right: unset; left: 20px; }
#description > ul.aboutThings > li:nth-child(7)::before { right: unset; top: 20px; left: 0; }
#description > ul.aboutThings > li:nth-child(6)::after { display: none; }
#demo::before {
	display: none;
}

#demo > ul.aboutThings > li:nth-child(1)::after {
	left: -60px;
}
#services > ul.services > li:nth-child(1)::after { display: none;  }
#services > ul.services > li:nth-child(2)::before { top: 0; right: -20px; }



#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,
#contacts > .info > h2::after {
	transform: scale(0.7);
}