/* GLOBAL */

* {
	padding: 0;
	margin: 0;
}

html, body {
	height: 100%;
}

body {
	-webkit-text-size-adjust: 100%
}

img {
	display: block;
}

.hide {
	display: none;
}

a:link, a:visited, a:hover {
	color: black;
	text-decoration: none;
	word-wrap: break-word;
}

p a:hover, .page-nav a:hover, .about a:hover, .info a:hover {
	color: rgb(99,204,94);
}

#grid-container {
	min-height: 100%;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto auto;
	grid-gap: 96px 28px;
}

.content {
	grid-area: c;
}

.footer {
	grid-area: f;
}

#grid-container.index {
	grid-template-areas: 
	"c c c c c c c c c c c c"
	"f f f f f f f f f f f f"
}

.fixed-header {
	position: fixed;
	width: 100%;
	z-index: 103;
}

	.access-wrap {
		display: flex;
		justify-content: space-between;
	}

	.nav {
		padding: 23px 0 18px 28px;
		display: flex;
		flex-flow: row wrap;
	}
	
	.nav > div {
		padding-right: 8px;
	}
	
	.nav .page-num {
		width: 30px;
	}
	
	.nav .page-num.active a {
		border-bottom: 2px solid black;
		padding-bottom: 2px;
	}
	
	.nav .temp-active {
		border-bottom: 2px solid black;
		padding-bottom: 2px;
	}
	
	.nav .page-num a:hover {
		border-bottom: 2px solid black;
		padding-bottom: 2px;
	}
	
	.nav .page-num a:active {
		border-bottom: 2px solid rgb(99,204,94);
		color: rgb(99,204,94);
	}
	
	.nav .cart {
		width: 108px;
		padding-bottom: 14px;
		padding-right: 28px;
	}
	
	.nav .cart a:hover {
		color: rgb(99,204,94);
	}
		
	.menu {
		margin: 0 28px;
		padding-bottom: 20px;	
		background-color: white;
		border-bottom: 2px solid black;
	}
		
		.menu a:hover {
			color: rgb(99,204,94);
		}
		
		.menu .items-wrap {
			padding-bottom: 18px;
		}
		
		.menu .items-wrap .item {
			width: 100%;
		}
		
		.menu .item {
			display: flex;
		}
		
		.menu .item .date {
			width: 108px;
			padding-right: 28px;
		}
	
	.switch {
/* 		background-color: yellow; */
		padding: 14px 28px 0 0;
		display: flex;
	}
	
	.switch .button {
		height: 28px;
		width: 60px;
		border: 1px solid black;
		padding: 8px 9px 5px 9px;
		background-color: white;
		z-index: 102;
	}
	
	.switch .button.active {
		border: 2px solid black;
		margin-top: -1px;
	}
	
	.switch a.left {
		
	}
	
	.switch a:hover {
		border: 2px solid black;
		margin-top: -1px;
	} 

	.switch a.left:hover {
		margin-right: -2px;
		z-index: 103;
	}
	
	.switch a.right:hover {
		margin-right: -1px;
		margin-left: -1px;
	}
	
.hidden-header {
/* 	background-color: olive; */
	color: white;
	pointer-events: none;
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.hidden-header .switch .button {
	border: 1px solid white;
}

.hidden-header .switch .button.active {
	border: 2px solid white;
}

.hidden-header a {
	color: white;
}
	
.logo {
/* 	background-color: lime; */
	margin: 56px 28px;
}

.post {
	padding-bottom: 112px;
}

	.slides-indicator {
		text-align: right;
		padding-right: 28px;
		padding-bottom: 56px;
	}
	
	/* :: SLIDESHOW :: */
	.slides-wrap {
/* 		background-color: lime; */
		overflow: hidden;
		position: relative;
		padding-bottom: 56px;
	}
	
	.slides-container {
		display: flex;
		position: relative;
		left: -100%;
		transform: translateX(100%);
	}
	
	.slides-container.is-reversing {
	  transform: translateX(-100%);
	}
	
	.slides-container.is-set {
	  transform: none;
	  transition: transform .5s cubic-bezier(0.5, 1, 0.25, 1);
	}
	
	.slide {
		flex: 1 0 100%;
/* 		background-color: khaki; */
		order: 2;
		display: flex;
		justify-content: center;
	}
	
	.slide.is-ref {
		order: 1;
	}
	
	.slides-wrap .image-container {
		flex: 1 6 auto;
		max-width: 560px;
		max-height: 560px;
/* 		border: 1px solid red; */
		margin: 0 66px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.slides-wrap .image-container img {
		max-width: 100%;
		max-height: 560px;
	}
		
	.toggle.button {
		position: absolute;
		top: 50%;
		margin-top: -44px;
		cursor: pointer;
		user-select: none;
		padding: 0px 13px;
		z-index: 2;
	}
	
	.toggle.button:hover {
		color: rgb(99,204,94);
	}
	
	.toggle.button:active {
		padding-top: 1px;
	}
	
	.toggle.button.left {
		left: 13px;
	}
	
	.toggle.button.right {
		right: 13px;
	}

		
.text-wrap {
	padding: 0 28px;
	display: flex;
	flex-flow: row wrap;
/* 	background-color: orange; */
}

	.text-wrap .header {
		width: 100%;
/* 		background-color: brown; */
		display: flex;
		padding-bottom: 28px;
	}
	
	@media screen and (max-width: 768px) {
		.text-wrap .header {
			display: block;
		}
	}

		.text-wrap .header .date {
			flex: 3;
			padding-top: 7px;
			padding-right: 28px;
			padding-bottom: 7px;
		}
		
		.text-wrap .header .title {
			flex: 9;
		}
		
	.text-wrap .null {
		flex: 3;
		padding-right: 28px;
	}
	
	@media screen and (max-width: 768px) {
		.text-wrap .null {
			display: none;
		}
	}
	
	.text-wrap .text {
		flex: 9;
	}

		.text-wrap .text p {
			padding-bottom: 28px;
		}

.footer {
	padding-left: 28px;
	padding-right: 28px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
	
	.footer .info {
		padding-bottom: 20px;
		padding-right: 28px;
		flex: 1;
	}
	
	.footer .nav-wrap {
		padding-bottom: 20px;
		flex: 1;
		display: flex;
		justify-content: space-between;
	}
	
		@media screen and (max-width: 768px) {
		.footer {
			flex-direction: column;
			justify-content: flex-end;
			align-content: flex-end;
			align-items: stretch;
		}
			
		.footer .info {
			order: 2;
			flex: none;
		}
		
				
		.footer .nav-wrap { 
			order: 1;
			flex: none;
		}
		
	}
