@import url("style.css");

div {
	box-sizing: border-box;
}

.table-container {
	display: block;
	font-size: 1.4rem;
}

.flex-table {
	display: flex;
	flex-flow: row wrap;
	line-height: 2.2rem;
}

.header .flex-row {
	font-size: 1rem;
	font-weight: 200;
	border: none;
	text-transform: uppercase;
	padding-bottom: 1rem;
	letter-spacing: 0.15rem;
}

.year  {
 	border: none;
}

.year .flex-row {
	border: none;
}

.flex-row {
	width: 25%;
	border-bottom: solid 1px #2b2b2b;
	padding: 0.5rem 1rem 0.5rem 0;
}

.flex-row:first-child {
	padding-left: 1rem;
}

.flex-row:nth-child(3) {
	width: 50%;
}

.year-23 {
	background-color: #D2326B;
 }

.year-22 {
	background-color: #ff8800;
 }

.year-21 {
	background-color: #00ff4c;
 }

.year-20 {
	background-color: #e54d20;
 }

.year-19 {
	background-color: #3c79f7;
 }

 .year-18 {
	background-color: #abe78b;
 }

 .year-17 {
	background-color: #a336f6;
 }

.year-16 {
	background-color: #f8ce0e;
 }
/*2015*/
 .year-15 {
	background-color: #D2326B;
 }

 .year-14 {
	background-color: #ff8800;
 }

 @media screen and (max-width: 750px) {
/* start of phone styles */

	div.flex-table.header {
		display: none;
	}

	div.flex-table.row {
		flex-direction: column;
	}

	div.first {
		font-size: 1.25rem;
		line-height: 2.25rem;
		display: inline-flex;
		width: auto;
		border-bottom: none;
		padding: 0.125rem 0 0 0.75rem !important;
		order: 2;
	}
	div.second {
		font-size: 1.25rem;
		line-height: 1.5rem;
		border-bottom: solid 1px #2b2b2b;
		padding: 0 0 0.75rem 0.75rem !important;
		width: 100% !important;
		order: 3;
		}

	div .last {
		border-bottom: none;
		padding: 1.25rem 0 0 0.85rem;
		letter-spacing: 0.07rem;
		word-spacing: -0.15rem;
		text-transform: uppercase;
		line-height: 0.75rem;
		font-size: 0.75rem;
		font-weight: 200;
		width: 100% !important;
		order: 1;

	}
}