/* =======layout =============*/

.main-content {
	position: relative;
	overflow: hidden;
	box-sizing: content-box;
	max-width: 1466px;
	background:whitesmoke;
	outline: 9px white solid;
	min-height:100px;
}

	.main-grid {
		display:grid;
		grid-template-columns: calc(100% - 500px) 500px;
		grid-template-rows: auto;
		grid-template-areas:
		"logo sidebar"
		"cell1 sidebar"
		"cell2 sidebar"
		"cell3 sidebar"
		"cell4 sidebar"
		"cell5 sidebar"
		"footer sidebar";
		place-items: stretch;
	}

.logo {
	grid-area: logo;
	margin-top:-13px;
}
	.cell.logo::before {
		background-color: #514442;
	}
	.logo .cell-ribbon {
		background-color: transparent;
		background-clip:initial;
	}
	.logo .cell-content {
		transform: rotate(1.64deg) skewX(1.6deg);
	}

.cell1 {
	grid-area: cell1;
}
	.cell.cell1::before {
		background-color: #4F4C44;
	}
	.cell1 .cell-ribbon {
		background-color: #F4AD4C;
	}
	.cell1 .cell-ribbon {
		background-clip:initial;
	}

.cell2 {
	grid-area: cell2;
}
	.cell.cell2::before {
		background-color: #485343;
	}
	.cell2 .cell-ribbon {
		background-color: #67B16A;
	}
	.cell2 .cell-ribbon {
		background-clip:initial;
	}

.cell3 {
	grid-area: cell3;
}
	.cell.cell3::before {
		background-color: #424D51;
	}
	.cell3 .cell-ribbon {
		background-color: #56B2DC;
	}
	.cell3 .cell-ribbon {
		background-clip:initial;
	}

.cell4 {
	grid-area: cell4;
}
	.cell.cell4::before {
		background-color: #514943;
	}
	.cell4 .cell-ribbon {
		background-color: #CA966E;
	}
	.cell4 .cell-ribbon {
		background-clip:initial;
	}
	.cell4 .cell-content {
		width:calc(100% - 20px);
		margin:20px 10px 40px 10px;
		transform: skewY(1.6deg);
	}

.cell5 {
	position: relative;
	grid-area: cell5;
}
	.cell5 .cell-false::before {
		background-color: #514F43;
	}
	.cell5 .cell-ribbon {
		border-top: 16px #FCE066 solid;
		border-bottom: 16px #FCE066 solid;
		background-color: #FFFDE6;
		padding:30px;
		transform: none;
	}
	.cell5 .cell-content {
		transform: none;
	}
	.cell5 h2 {
		margin:0px 0px 0.3em 0px;
	}

.sidebar {
	grid-area: sidebar;
	height: 100px;
	min-height: 100%;
	overflow: hidden;
	border-left: 13px white solid;
	background-color: #FFFDE6;
	z-index:2;
}

	.sidebar .cell-ribbon {
		background-color: transparent;
		margin:0px;
		transform: none;
	}

	.sidebar .cell-content {
		transform:none;
		border:none;
		text-align:center;
		padding:20px;
	}


.footer .cell-false::before {
	background-color: #514343;
}

/* ===== content ====*/

.logo-slider {
	position: relative;
	display:flex;
	width: calc(100% + 4px);
	margin: -15px -2px;
	transition: transform 600ms ease-in-out;
}
	.logo-slide {
			position: relative;
			flex-shrink:0;
			width:100%;
			overflow: hidden;
	}
		.logo-image {
				display:block;
				width: 100%;
		}
		.logo-text {
				position:absolute;
				top:0px;
				left: 0px;
				display:block;
				width: 100%;
		}
		.logoSlide {
			transform-origin: center center;
			transform: scale(1.24);
			transition: transform 200ms ease-out;
		}

		.logoSlide:hover {
			transform: scale(1.44);
		}

		.more {
			position: absolute;
			bottom: 30px;
			right: 20px;
			color: white;
			font-weight: 650;
			letter-spacing: 1px;
		}

			.more a {
				color: white;
				text-decoration-color: white;
			}
			.more a:focus {
				background: #AB223C;
				padding: 12px;
				outline: 3px white solid;
				border-radius: 3px;
				text-decoration: none;
				color:white;
			}
			.more a:hover {
				background: transparent;
				padding: 0px;
				outline: none;
				border-radius: 5px;
				text-decoration: none;
				color:white;
			}

		.hide {
			display: inline-block;
			width: 0px;
			height: 0px;
			overflow: hidden;
		}

.cell1 .cell-content, .cell2 .cell-content, .cell3 .cell-content {
	min-height: 220px;
	display: flex;
	align-items: center;
}

	.cell1-image {
		position: absolute;
		left:-4px;
		bottom:-1px;
		width:294px;
		transition: transform 300ms ease-out;
	}

		.cell1:hover .cell1-image {
			transform: scale(1.1);
		}
		.cell3:hover .cell1-image {
			transform: scale(1.1);
		}

	.cell1-text {
		padding: 30px 30px 30px 284px;
		line-height: 1.2em;
		text-align: center;
		font-size: 53px;
		width:100%;
	}

	.cell2-image {
		position: absolute;
		right:-4px;
		bottom:-8px;
		width:320px;
		transition: transform 300ms ease-out;
	}

		.cell2:hover .cell2-image {
			transform: scale(1.1);
		}

	.cell2-text {
		padding: 30px 309px 30px 30px;
		line-height: 1.2em;
		text-align: center;
		font-size: 53px;
		width:100%;
	}

.sidebar .cell-ribbon, .sidebar .cell-content {
	height: 100%;
}

	.sidebar h2 {
		color: #AB223C;
	}

	.bottom-line-box {
		position: absolute;
		left:0px;
		right: 0px;
		bottom: 0px;
		background-color: #FFFDE6;
		z-index: 2;
		border-top: 5px white solid;
		box-shadow: 0 0 9px rgba(0,0,0,0.16);
	}

		.bottom-line-all {
			font-weight: 500;
			color: #AB223C;
			font-weight: 650;
			letter-spacing: 0.5px;
			padding: 10px 10px 15px 10px;
			line-height: 30px;
		}
		.bottom-line-all a.bottom-line-link {
			color: #AB223C;
			text-decoration-color: #AB223C;
			text-align: center;
		}
		.bottom-line-all a.bottom-line-link:focus {
			color: white;
			text-decoration: none;
			background: #AB223C;
			padding: 6px;
			outline: 2px black solid;
			border-radius: 4px;
		}
		.bottom-line-all a.bottom-line-link:hover {
			color: #AB223C;
			text-decoration: none;
			background: transparent;
			padding: 0px;
			outline: none;
			border-radius: 0px;
		}

		a.bottom-line-permanent {
			display: flex;
			background:white;
			border-top: 3px #FFF3CC solid;
			height: 76px;
			box-sizing: content-box;
			text-decoration: none;
			overflow: hidden;
		}

		a.bottom-line-permanent:hover, a.bottom-line-permanent:focus {
			background:#FFF3CC;
		}

			.bottom-line-icon-area{
				display: flex;
				align-content: center;
				justify-content: center;
				align-items: center;
				justify-items: center;
				width: 76px;
				height: 76px;
			}
			.bottom-line-icon-area.eli {
				background-color: #259B24;
			}
			.bottom-line-icon-area.vid {
				background-color: #DF3838;
			}
			.bottom-line-icon-area.vi {
				background-color: #1898D2;
			}
				.bottom-line-icon {
					height: 70px;
					width: 70px;
					transition: transform 300ms ease-out;
				}

				a.bottom-line-permanent:hover .bottom-line-icon,
				a.bottom-line-permanent:focus .bottom-line-icon {
					transform: scale(1.2);
				}

				.bottom-line-text-area {
					padding: 5px 20px;
					white-space: nowrap;
					overflow: hidden;
					text-align: left;
					text-decoration: none;
				}

					.bottom-line-header {
						font-size: 28px;
						font-weight: 650;
					}



.cell4 .cell-content {
	display: grid;
	grid-template-columns: auto auto auto auto;
	grid-template-rows: auto auto;
	place-items: center;
	justify-content: space-around;
	align-content: center;
	grid-auto-flow: column;
}

	.cell4 .above {
		width:0px;
		height:0px;
		overflow: hidden;
	}

	.stat-num {
		position: relative;
		color: white;
		font-size: 53px;
		font-weight: 400;
		text-align: center;
	}
	 .animated-num {
		 display: block;
		 white-space: nowrap;
		 padding: 0px 7px;
	 }

	a.stat-link {
		font-size: 24px;
		font-weight: 650;
		color:white;
		text-decoration-color: white;
	}
	.stat-map {
		display: block;
		margin:8px 6px 12px 6px;
		width:116px;
		height:67px;
	}
	.asterix {
		font-size:30px;
		font-weight: 750;
		color:#AB6E3F;
		position: absolute;
		top:6px;
		right:-10px;
	}

	.asterix-text {
		position: absolute;
		bottom: 10px;
		left:10px;
		color:#AB6E3F;
		font-weight: 750;
		font-size: 16px;
		transform: skewY(1.6deg);
	}


.cell5 h2 {
	display: inline-block;
	color: #F49E04;
}

	.cell5 h2.inactive-header {
		color: #FAD399;
	}
	.cell5 h2.inactive-header a {
		text-decoration-color: #FCE6C5;
		color: #FAD399;
	}
	.cell5 h2.inactive-header a:hover {
		text-decoration: none;
		color: #F49E04;
	}

	.scrollable-list-area {
		margin-top:10px;
		margin-bottom:30px;
		overflow: hidden;
		width: calc(100% - 30px);
		margin-left:-5px;
		padding:4px 0px;
	}

	.scrollable-box {
		position: relative;
	}

	.slider-next {
		width: 27px;
		height: 124px;
		position:absolute;
		top: calc(50% - 62px);
		right: 0px;
		cursor:pointer;
		-webkit-tap-highlight-color: transparent;
		-ms-tap-highlight-color: transparent;
	}

	.scrollable-list {
		position: relative;
		width: 100%;
		overflow: visible;
		display: flex;
		flex-flow: row nowrap;
		align-items: stretch;
		gap: 20px;
		transition: transform 600ms ease-out;
	}
		.material-box {
				flex-shrink: 0;
				position: relative;
				display: flex;
				width:calc(50% - 20px);
				min-height: 50px;
				max-height: 250px;
				background-color: white;
				border: 5px #FFF3CC solid;
				text-decoration: none;
		}

			.material-box:hover {
				border-color:#FCE066;
			}

			.material-image-box {
				position: relative;
				flex-shrink: 0;
				width:170px;
				max-width: 45%;
				height: 100%;
				max-height: 214px;
				min-height: 200px;
				overflow: hidden;
				display: block;
			}

			.material-image {
				display: block;
				width:100%;
				height: 100%;
				background-repeat: no-repeat;
				background-position: top center;
				background-size: cover;
				transition: transform 300ms ease-out;
				object-fit: cover;
			}

				.material-box:hover .material-image, .material-box:focus .material-image {
					transform: scale(1.1);
				}

			.material-description {
				margin: 13px 20px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 7;
				overflow: hidden;
				height: min-content;
			}

				.material-title {
					font-weight: 650;
					line-height: 1.2;
					padding-bottom: 0.8em;
				}
				.material-text {
					font-size:0.85em;
				}

	.cell5 .more {
		color:#AB223C;
		bottom: 40px;
	}
	.cell5 .more a {
		color:#AB223C;
		text-decoration-color: #AB223C;
	}
	.cell5 .more a:focus {
		color:white;
		text-decoration: none;
	}
	.cell5 .more a:hover {
		color:#AB223C;
		text-decoration: none;
	}