@charset "UTF-8";

#hometop { display: flex; justify-content: center; align-items: center; width: 100%; background: url("images/hometop.jpg") center center / cover no-repeat; z-index: 0;}

#layout .inner { max-width:960px; color:#333;}

.intro { padding: 20px 0;}
	.intro h2 { padding:10px 0; text-align: center; }

.art{ padding:10px 0 30px 0; text-align: left;}
	.art h3 { padding:10px 0 0; text-align: center; }
	.art p { padding:10px 0; font-size: 18px;}
	.art ul { padding:10px 0; }
		.art ul li {display: none;}
		.art ul li:first-of-type { display: block; text-align: center;}


/* 320 + settings */
@media all and (min-width:320px){
	#hometop { height: 48vw;}
		#hometop h1 img { width: 36vw; margin:5vw 0 0 40vw; }
	.intro h2 { font-size: 24px;}
	.art h3 { font-size: 16px;}
	.art p { font-size:16px; text-align: left;}
}

/* 640 + settings */
@media all and (min-width:640px){
	.intro h2 { font-size: 28px;}
	.art h3 { font-size: 20px;}
	.art p { font-size:18px; text-align: center;}
}

/* 960px+ settings */
@media all and (min-width:960px) {
}

/* 1200 + settings */
@media all and (min-width:1200px){
	#hometop { height: 33vw;}
		#hometop h1 img { width:400px; margin:4vw 0 0 25vw; }
}

/* print only settings */
@media print{

}