@media screen and (max-width:1360px) {

	.block-1 {
		padding-left: var(--space-30);
		padding-right: var(--space-30);
	}

	#hero .block-1 {
		padding: 0;
	}

}

@media screen and (max-width:1200px) {

	:root {

		--space-150: 100px;
		--space-140: 100px;
		--space-130: 100px;
		--space-120: 100px;
		--space-100: 100px;
		--space-90: 90px;
		--space-80: 80px;
		--space-70: 70px;
		--space-60: 60px;
		--space-50: 50px;
		--space-40: 40px;
		--space-30: 30px;
		--space-25: 25px;
		--space-20: 20px;
		--space-15: 15px;
		--space-10: 10px;
		--space-5: 5px;
		--space-2: 2px;

	}

	.block-2 {
		padding-left: var(--space-30);
		padding-right: var(--space-30);
	}

}


@media screen and (max-width:970px) {

	.block-3 {
		padding-left: var(--space-30);
		padding-right: var(--space-30);
	}

}


@media screen and (max-width:767px) {

	
	:root {

		--size-900: 38px;
		--size-800: 34px;
		--size-700: 32px;
		--size-600: 28px;
		--size-500: 22px;
		--size-400: 19px;
		--size-300: 17px;
		--size-200: 15px;
		--size-100: 14px;


		--space-200:60px;
		--space-180:60px;
		--space-170:60px;
		--space-150:60px;
		--space-140:60px;
		--space-130:60px;
		--space-120:60px;
		--space-100:60px;
		--space-90:50px;
		--space-80:45px;
		--space-70:40px;
		--space-60:35px;
		--space-50:30px;
		--space-40:25px;
		--space-30:20px;
		--space-25:20px;
		--space-20:20px;
		--space-15:15px;
		--space-10:10px;
		--space-5:5px;

	}

	.w-33,
	.w-35,
	.w-40,
	.w-45,
	.w-50,
	.w-55,
	.w-65,
	.w-80,
	.w-66 {
		width: 100%;
		min-width: 100%;
	}

	#logo img {
		width: 140px;
	}


}