@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('layout.css');

@media all and (max-width: 1920px) {
	#bg1 {
		background-position: left top;
	}

}

@media all and (max-width: 1600px) {
	#bg1 {
		background-position: left top;
		background-size: 1600px auto;
	}

	.section305 {
		grid-template-columns: repeat(3, 305px);
	}

}

@media all and (max-width: 1440px) {
	#bg1 {
		background-position: left top;
		background-size: 1440px auto;
	}

	header .nav {
		justify-content: center;
		margin: 5% 0 0 0;
	}
}

@media all and (max-width: 1366px) {
	#bg1 {
		background-position: left top;
		background-size: 1366px auto;
	}

	.section461 {
		grid-template-columns: repeat(2, 461px);
	}

}

@media all and (max-width: 1280px) {
	#bg1 {
		background-position: left top;
		background-size: 1280px auto;
	}

	.section600 {
		grid-template-columns: repeat(1, 600px);
	}

}

@media all and (max-width: 1024px) {
	#bg1 {
		background-position: left top;
		background-size: 1024px auto;
	}

	.section461 {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media all and (max-width: 800px) {
	header .nav {
		flex-flow: column wrap;
		margin: 5% 0 0 0;
		padding: 0;
	}

	header .nav a {
		background: linear-gradient(0deg, rgba(212, 18, 4, 0.342) 10%, rgba(234, 134, 4, 0.342) 50%);
		padding: 1.2em;
		border-top: 1px solid rgba(255, 255, 255, 0.3);
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	header .nav li:last-of-type a {
		border-bottom: none;
	}

	.section305 {
		grid-template-columns: repeat(2, 305px);
	}
}