@charset "utf-8";

#search-box {
	padding: 8% 0 7% 0;
	margin-bottom: 0;
}
#main-content2.chronology {
	background: #f6efe8;
	padding-top: 2.5%;
	padding-bottom: 4%;
}
section.section {
	margin: 3% 0;
}
section#chronology-index {
	margin: 0 auto;
	max-width: 1280px;
	text-align: left;
}

section.section h2.section-title {
	position: relative;
	font-size: 1.45em;
	padding: 0 0 20px 0;
	margin: 0;
	font-family: "KoddiUDOnGothic-Bold";
	color: #231815;
	border-bottom: 1px solid #f6efe8;
}
section.section h2.section-title {
	padding-left: 40px;
}
section.section h2.section-title:before {
	content: '';
	width: 228px;
	height: 2px;
	background: #0a0082;
	position: absolute;
	bottom: -1px;
	left: 0;
}
section#chronology-index h2.section-title:before {
	width: 175px;
}
section.section h2.section-title:after {
	position: absolute;
	left: 0;
	display: block;
	content: ' ';
	width: 32px;
	height: 32px;
	background-size: 32px 32px;
}
section#history-timeline h2.section-title:after {
	top: -5px;;
	background: url('../images/fa-timeline.svg') no-repeat left top;
}
section#chronology-index h2.section-title:after {
	top: -8px;;
	background: url('../images/timeline.png') no-repeat left top;
}
section.section h2.section-title a {
	color: #231815;
	text-decoration: none;
	transition: color 0.2s ease;
}
section.section h2.section-title a:hover {
	color: #0a0082;
}

#chronology-index {
	margin-top: 5%;
    margin-bottom: 5%;
}
#chronology-index ul.years {
    border: 0;
    padding: 0;
    list-style: none;
}
#chronology-index ul.years:after {
    clear: both;
    content: '';
    display: block;
}
#chronology-index ul.years li.year {
    display: inline-block;
    width: 12.5%;
	text-align: center;
    float: left;
}
#chronology-index ul.years li.year label {
    position: relative;
    display: block;
    padding: 20px 0;
    margin: 5px;
    border: 1px solid #5469b0;
    font-family: "KoddiUDOnGothic-ExtraBold";
    font-size: 1.2em;
	background: #fff;
	transition: background-color 0.2s ease;
}
#chronology-index ul.years li.year:hover label {
	background: #5469b0;
}
#chronology-index ul.years li.year label:after {
    position: absolute;
    bottom: -2px;
    left: 1%;
    height: 2px;
    width: 99%;
    content: '';
    background: #0a0082;
	transition: background-color 0.2s ease;
}
#chronology-index ul.years li.year:hover label:after {
	background: #99ddd3;
}
#chronology-index ul.years li.year label a {
	display: inline-block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #5469b0;
	transition: color 0.2s ease;
}
#chronology-index ul.years li.year:hover label a {
	color: #fff;
}

@media (max-width: 1279px) {
	section.section {
		padding-left: 2%;
		padding-right: 2%;
	}
}

@media (max-width:719px) {
	#main-content {
		margin-top: 0%;
	}
	section.section {
		padding: 0 5%;
	}
	section#history-timeline h2.section-title {
		display: none;
	}
	#chronology-index {
		padding: 5%;
		background: #f6efe8;
	}
	#chronology-index ul.years li.year {
    	width: 25%;
	}
	#chronology-index ul.years li.year label {
    	padding: 15px 0;
	}
}