:root { --color-red: rgba(126,0,0,1); --color-red-opac: rgba(126,0,0,0.5) }
html { font-size: 16px; }
h1, h2 { color: var(--color-red); }
h2 { font-size: 1.4rem; }
a { text-decoration: none; color: rgba(126,0,0,1); }
nav ul { list-style: none; margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--color-red); margin: 3rem 0; }
img { width: 100%; }
td { padding-right: 1rem; }

.announcement {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 1fr 1fr;
}
@media screen and (max-width: 62rem) {
	.announcement {
		grid-template-columns: 1fr;
	}
}
.btn {
	background-color: var(--color-red);
	color: white;
	padding: .2rem .4rem;
	border-radius: .3rem;
	margin: .2rem auto;
	cursor: pointer;
	transition: background-color .3s ease 0s;
	justify-self: center;
}
.btn:hover {
	background-color: var(--color-red-opac);
}

.bg-white { background-color: #fff; }
.font-sans { font-family: dincond, sans-serif; }
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-lg { max-width: 32rem; }
.max-w-full { max-width: 100%; }
.w-auto { width: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.content-center { align-content: center; }
.text-center { text-align: center; }
.text-sm { font-size: .875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.uppercase { text-transform: uppercase; }
.font-light { font-weight: 300; }
.text-black { color: #000; }
.text-red { color: var(--color-red); }
.hover\:text-red:hover { color: rgba(126,0,0,.6); }

/* margin */
.m-4 { margin: 1rem; }
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 2rem; }
.mt-16 { margin-top: 4rem; }
.mr-6 { margin-right: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mx-0 { margin-right: 0; margin-left: 0; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.my-16 { margin-top: 4rem; margin-bottom: 4rem; }

/* padding */
.p4 { padding: 1rem; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.px-4 { padding-right: 1rem; padding-left: 1rem; }
.px-6 { padding-right: 1.5rem; padding-left: 1.5rem; }

.top-border { border-top: 10px solid rgba(126,0,0,1); }
.bottom-border { border-bottom: 10px solid rgba(126,0,0,1); }

.bg-red { background-color: #dec1c1; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

/* slider */
.overflow-hidden { overflow: hidden; }
.w-4x { width: 400%; }
.w-5x { width: 500%; }
.w-1\/4 { width: 25%; }
.w-1\/5 { width: 20%; }
.float-left { float: left; }
.text-0 { font-size: 0; }
.relative { position: relative; }
.slider-animation { animation: 45s slidy infinite; }

@keyframes slidy {
	0% { left: 0%; }
	13.5% { left: 0%; }
	16.6% { left: -100%; }
	30.3% { left: -100%; }
	33.3% { left: -200%; }
	47.0% { left: -200%; }
	50.0% { left: -300%; }
	63.6% { left: -300%; }
	66.6% { left: -200%; }
	80.3% { left: -200%; }
	83.3% { left: -100%; }
	97.0% { left: -100%; }
	100% { left: 0%; }
}

@font-face {
	font-family: 'dincond';
	src: url('dincond.eot');
	src: url('dincond.woff2') format('woff2'),
	     url('dincond.woff') format('woff'),
	     url('dincond.ttf') format('truetype'),
	     url('dincond.svg') format('svg');
}