@media (min-width: 576px) {
	.container {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.container {
		max-width: 1040px;
	}
}

@media (max-width: 992px) {
	nav,
	header .call2action {
		display: none;
	}

	#nav-toggle,
	#contactInNav {
		display: block;
	}

	body:has(#nav-toggle-box:checked) {
		nav {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: var(--padd);
			padding: var(--padd);
			position: absolute;
			z-index: 99;
			background-color: white;
			top: 80px;
			right: 0;
			width: 100%;
			box-shadow: 0 1.5rem 4rem rgba(22, 28, 45, .15);
		}

		#burger-icon {
			background-color: whitesmoke;
			background-size: 70%;
			box-shadow: inset 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
		}
	}

	section {
		padding: calc(var(--padd) * 2) 0;
	}

	.row > * {
		flex: 0 0 auto;
		width: 100%;
	}

	.row.no-gap-when-narrow {
		gap: 0;
	}

	.shape {
		display: none;
		/*height: 52%;
		bottom:0;
		left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: unset;*/
	}

	.hero {
		padding-top: calc(var(--padd) * 2);
		padding-bottom: calc(var(--padd) * 4);

		.screenshot img {
			transform: unset;
			animation: none;
			opacity: 1;
			max-width: 100%;
			box-shadow: none;
		}

		.row {
			gap: calc(var(--padd) * 6);
		}
	}
}

@media (max-width: 991.98px) {

	.screenshot {
		order: 2;

		text-align: center;

		img, video {
			max-width: 90% !important;
			transform: none !important;
			box-shadow: none !important;
		}

		&.with-shadow {
			padding-bottom: calc(var(--padd) * 4);
		}
	}

	nav a {
		padding: 10px;
	}

	.hero {
		h1 {
			font-size: 2.25rem;
		}

		.lead {
			font-size: 1.1875rem;
		}
	}
}