html,
body {
	height: 100%;
}
#container {
	min-height: 100%;
}
#main {
	width: 100%;
}
#top {
	height: 100%;
}
#center_piece {
	margin: auto;
	width: 631px;
	padding-bottom: 20px;
}
#logo {
	margin-top: -49px;
	float: left;
}
#nav {
	margin-top: -20px;
	float: right;
}
#nav-list {
	display: inline;
	width: 100%;
}
#nav-list dt {
	display: inline;
	padding: 5px;
}
#footer-list {
	display: inline;
	width: 100%;
}
#footer-list dt {
	display: inline;
	padding: 5px;
}
#header {
	height: 49px;
	width: 100%;
}
#header-image {
	float: left;
	width: 631px;
	margin-top: -63px;
}
#header2-image {
	float: left;
	width: 631px;
	margin-top: -270px;
}
#header3-image {
	float: left;
	width: 631px;
	margin-top: -270px;
}
.image-header-1 {
	float: left;
	width: 201px;
}
.image-header-3 {
	float: right;
	width: 430px;
	margin: 0;
}
.image-header-2 {
	float: right;
	width: 430px;
}
#footer {
	clear: both;
	width: 100%;
	height: 35px;
	margin-top: -35px;
}
#footer-menu {
	margin: auto;
	width: 400px;
	text-align: center;
}
#left-side-content {
	width: 190px;
	float: left;
	clear: left;
}
#right-side-content {
	width: 430px;
	float: right;	
}

.notification {
	background-color: #CCCCCC;
	border-radius: 5px;
	padding: 10px;
	margin-top: 10px;
}

.media {
	display: grid;
	grid-template-areas: "media-image media-body media-body";
	grid-gap: 10px;
}

.media .media-image {
	grid-area: media-image;
}

.media .media-image img {
	width: 100%;
}

.media .media-body {
	grid-area: media-body;
}

.media .media-body h1,
.media .media-body h2,
.media .media-body h3,
.media .media-body h4,
.media .media-body h5,
.media .media-body h6 {
	margin-top: 0;
	text-align: center;
}