@media (max-width:1024px) {
	.w-50 {
		width: 75% !important;
	}
}

@media (max-width:768px) {
	.w-50 {
		width: 90% !important;
	}
}

/*header responsivity*/
@media (max-width:1500px) {
	header {
		font-size: 0.9em;
	}

	nav {
		padding: 0.70em 1.25em !important;
		gap: 0.9em;
	}
}

@media (max-width:1350px) {
	header {
		font-size: 0.8em;
	}

	.nav {
		padding: 0.60em 1.0em !important;
		gap: 0.8em;
	}
}

@media (max-width:1200px) {
	header {
		font-size: 0.8em;
	}

	.nav {
		padding: 0.60em 1.0em !important;
		gap: 0.5em;
	}
}

@media (max-width:1100px) {
	header {
		font-size: 0.8em;
	}

	.nav {
		padding: 0.60em 1.0em !important;
		gap: 0.5em;
		max-width: 50%;
	}
}


@media (max-width:800px) {
	header {
		font-size: 0.8em;
		display: flex;
		flex-direction: column;
	}

	.nav {
		padding: 0.60em 1.0em !important;
		gap: 0.5em;
		max-width: 80%;
		flex-direction: column;
	}

	.header > .header-title {
		/*position: relative;*/
	}

	header > .header-title > span:nth-child(1) {
		font-size: 3em;
	}

	header > .header-title > span:nth-child(2) {
		font-size: 2em;
		margin-top: -0.8em;
	}

	main,
	footer {
		font-size: 0.9em;
	}
}

@media (max-width:576px) {

	.header-title {
		position: relative !important;
		justify-content: center !important;
		align-items: center !important;
		left: 0 !important;
	}

	.nav {
		padding: 0.50em 0.75em !important;
		gap: 0.5em;
		max-width: 100%;
		flex-direction: column;
		border-bottom: 1px solid rgba(0,0,0,0.2);
		border-top: 1px solid rgba(0,0,0,0.2);
		margin-top: 0.25em;
		margin-bottom: 0.25em !important;
	}

	.h2 {
		text-align: center;
		margin-top: 1em;
	}

	footer {
		flex-direction: column;
	}
}