/* CSS RESET */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
	list-style: none;
}
body {
	background-color: #EFEFEF;
}
a {
			font-family: "Courier New";
			text-decoration: none;
			color: black;
			font-size: 5vh;
		}
		a:visited {
			color: black;
		}
		a:hover {
		color: #8EB897;
		}
h1 {
	display: block;
	font-family: "passionbold";
	font-size: 10vh;
	text-align: center;
	margin: 15px auto;
	text-shadow: 3px 3px 5px #DADADA, -3px -3px 5px #BABABA;
}
h1:hover {
	text-shadow: 3px 3px 0 #9DDBAD, -3px -3px 0 #8EB897;
	transition: text-shadow 1s ease;
}

h2 {
	display: block;
	font-family: "passionbold";
	font-size: 2em;
	text-align: center;
}
h3 {
	display: block;
	font-family: "cabinbold";
	font-size: 1.5em;
	text-align: center;
}

hr {
	margin: 20px auto;
	border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    }
    
    @media (pointer:fine) {
			p {
				padding: 5px;
				margin: 5px auto;
				text-align: left;
				width: 50%;
   		 	}
		}
		@media (pointer:coarse) {
			p {
				padding: 5px;
				margin: 5px auto;
				text-align: left;
				width: 90%;
   		 	}
		}
    
#walkcycle {
	/*background-color: #9DDBAD;*/
	width: 8em;
	padding: 5px;
	position: fixed;
	top: 0;
	width: 4em;
	height: 100vh;
	float: right;
}
article {
	padding: 20px;
	margin: 5em auto;
	z-index: -1;
	width: 100vw;
	text-align: center;
}
nav {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
nav > ul {
	display: flex;
	justify-content: center;
}
nav > ul li {
	z-index: 0;
	background-color: #D5F2E8;
	text-align: center;
	margin: 5px;
	border: double 1px transparent;
	background-image: linear-gradient(#EBEBEB, #EEE), radial-gradient(circle at top left, rgba(138,138,138,1) 15%, rgba(200,200,200,1) 65%, rgba(100,100,100,1) 98%);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	border-top-left-radius: 255px 15px;
	border-top-right-radius: 15px 225px;
	border-bottom-right-radius: 225px 15px;
	border-bottom-left-radius:15px 255px;
	transition: all .5s;
}
nav > ul li > .item {
	display: block;
	border: solid 2px black;
	background-color: white;
	filter: drop-shadow(0px 0px 5px rgba(120,120,120,.5));
	height: 7vh;
	min-width: 18vw;
	margin: 1vh;
	font-size: 3vh;
	line-height: 7vh;
	font-family: sans-serif;
	border-top-left-radius: 200px 25px;
	border-top-right-radius: 35px 225px;
	border-bottom-right-radius: 15px 225px;
	border-bottom-left-radius:255px 5px;
}
nav > ul li:hover {
	background-image: linear-gradient(#D5F2E8, #B1E5D1), radial-gradient(circle at top left, rgba(26,185,138,1) 15%, rgba(241,255,247,1) 65%, rgba(26,185,138,1) 98%);
	filter: drop-shadow(1px 1px 5px rgba(168,196,186,.5));
}
.storyboard li {
	display: inline-block;
	background: #ddd;
}

.storyboard li:first-child img {
	width: 25vw;
	padding: 0;
	box-shadow: 5px 5px 0 #DADADA, -5px -5px 0 #BABABA;
	border: none;
}
.storyboard li:first-child img:hover {
	width: 25vw;
	box-shadow: 5px 5px 0 #9DDBAD, -5px -5px 0 #8EB897;
	border: none;
	transition: box-shadow .5s;
}

.storyboard li img {
	width: 15vw;
	vertical-align: middle;
	border: none;
	box-sizing: border-box;
	border: 1px solid #DADADA;
}
.storyboard li img:hover {
	border: 1px solid #9DDBAD;
	transition: border-color .5s;
}

.sbthumb {
	display: flex;
	position: relative;
	margin: 10px;
}

.sbthumb:before {
  content: attr(data-text); /* here's the magic */
  box-sizing: border-box; 
  position:absolute;
  bottom: 0;
  overflow: hidden;
  /* basic styles */
  width: 100%;
  padding: 10px 10 5px 10;
  background:#040403;
  color: #fff;
  text-align:center;
  font-family: "cabinbold";
  font-size: 1.5em;
  text-transform: uppercase;
  
  pointer-events:none;
  display:none; /* hide by default */
}

.sbthumb:hover:before {
  display:block;
}

/* ------ GALLERY CSS LIGHTBOX ------- */

/* Entire gallery */
.lb-gallery {
	margin-left: 100px;
	max-width: 70%;
}
/* Entire gallery */
.lb-gallery li {
	float: left;
	margin: 0px;
	position: relative;
	display: inline-block;
	/* height: 270px; */
	height: 200px;
}
/* Each thumb image + link */
.lb-gallery li > a,
.lb-gallery li > a img {
	display: block;
	border-radius: 200px;
	padding: 5px;
}
/* Each thumb image */
.lb-gallery li > a img {
	background-color: #fff;
	transition: background-color .5s ease;
}
/* Each thumb image */
.lb-gallery li > a {
	width: 200px;
	height: 200px;
	position: relative;
	padding: 0px;
}
/* Each thumb image on hover */
.lb-gallery li > a:hover img {
	background-color: #8EB897;
}
/* The full sized images */
.lb-overlay {
	background-color: rgba(0,0,0,.8);
	width: 0px;
	height: 0px;
	position: fixed;
	overflow: hidden;
	left: 0px;
	top: 0px;
	padding: 0px;
	z-index: 99;
	transition: all 0.5s ease;
}
/* The full sized images sizing */
.lb-overlay img {
	max-height: 86%;
	position: relative;
	opacity: 0;
	margin-top: 10px;
	border: 10px solid #fff;
	border-radius: 10px;
	transition: opacity 0.5s ease;
}
/* Description/caption */
.lb-overlay > div {
	padding: 10px;
	color: #fff;
}
/* title */
.lb-overlay div h3 {
	font-family: sans-serif;
	font-weight: bold;
	font-size: 12px;
	text-transform: capitalize;
}
/* description */
.lb-overlay div p {
	font-family: sans-serif;
	font-size: 12px;
	font-style: italic;
}
/* Close button */
.lb-overlay a.lb-close {
	font-family:"passionbold";
	z-index: 1001;
	color: #000;
	background-color: #fff;
	border: 3px solid #000;
	position: absolute;
	top: 13px;
	width: 20px;
	height: 20px;
	padding: 5px;
	border-radius: 20px;
	overflow: hidden;
	float: right;
	opacity: 0;
}
/* Full sized images on click */
.lb-overlay:target {
	width: auto;
	height: auto;
	bottom: 0px;
	right: 0px;
	padding: 20px;
}
.lb-overlay:target img,
.lb-overlay:target a.lb-close {
	opacity: 1;
}