@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* --------------------------------------------- Main --------------------------------------------- */
html, body {
	height:100%;
	width: 100%;
	overflow-y:auto;
	overflow-x: hidden; 
	margin: 0px;
	padding: 0px;
	text-align: center;
	font-size: 100%;
	font-family: 'Open Sans', sans-serif;
	line-height: 1.5;
	letter-spacing: -0.02em;
	background: lightblue url("background.jpg") no-repeat fixed center; 
}

#wrapper {
	position: absolute;
	width: 100%;
	height: auto;
}

article {
	position: relative;
	width:980px;
	top: 61px;
	margin: 0 auto;
	padding: 5px;
	z-index:1;
}

p {
	font-family: 'Open Sans', sans-serif;
	color: rgba(255, 255, 255, 1); 
	font-size: 100%;
	line-height: 1.2;
	flex-wrap: wrap;
}

aside {
	text-align: center;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Open Sans', sans-serif;
	color: rgba(255, 255, 255, 1); 
	text-shadow: 2px 2px 4px #000000;
}

/* ---------- Main Media Queries ---------- */

@media all and (max-width:979px) {

	html, body {
		overflow-x: hidden;
	}
	
	body {
		text-align: left;
		position: relative;
	}
	
	article {
		width: 100%;
		margin: 0 auto;
	}
	
	ul {
		margin-left: 2%;
		margin-right: 2%;
	}
	
}
/* --------------------------------------------- Menu --------------------------------------------- */
nav {
	position:fixed;
	top:0px;
	width: 100%;
	font-family: 'Open Sans', sans-serif;
	background-color: rgba(0, 1, 60, .8);
	z-index:1000;
}

nav:after {
	content: "";
	display: table;
	clear: both;
}

nav ul {
	float: left;
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;	
}

nav ul li {
	margin: 0px;
	display: inline-block;
	float: left;
}

nav a {
	display: block;
	padding: 0 20px;
	font-size: 140%;
	line-height: 60px;

}

nav a:link { 
	color: rgba(255, 255, 255, 1); /* White #FFFFFF */
	text-decoration: none;	
	text-align: left;
}

nav a:visited { 
	color: rgba(204, 204, 204, 1); /* Grey80 #CCCCCC */
}

nav a:hover { 
	background-color: rgba(111, 56, 233, 1); /* Malibu Blue #66ccff */
}

nav ul ul {
	display: none;
	position: absolute;
	top: 60px;	
}

nav ul li:hover > ul { 
	display: inherit; 
}

nav ul ul li {
	width: 410px;
	float: none;
	display: list-item;
	position: relative;
	background-color:  rgba(38, 41, 45, 1); /* Dark Grey #26292d */ 
	border-bottom: 1px solid rgba(153, 153, 153, 1); /* Grey60 #999999 */	
}

nav ul ul ul li {
	position: relative;
	top: -60px;
	left: 410px;
	background-color: rgba(66, 72, 78, 1); /* Light Grey #42484E */
}

li > a:after { 
	content: ' +'; 
}

li > a:only-child:after { 
	content: ''; 
}

.toggle, [id^=drop] {
	display: none;
}

/* ---------- Menu Media Queries ---------- */
@media all and (max-width:979px) {

nav { 
		margin: 0; 	
	}
	
	label {
		font-size: 140%;
	}
	
	.toggle + a, .menu { 
		display: none; 
	}
	
	.toggle {
		display: block;
		padding: 10px 20px 0px 20px;
		color: rgba(255, 255, 255, 1); /* White #FFFFFF */
		line-height: 60px;
		text-decoration: none;
		border: none;
	}
	
	.togfloat {
		float: left;
	}
	
	.toggle:hover { 
		background-color: rgba(102, 204, 255, .5); /* Malibu Blue #66ccff */
	}
	
	[id^=drop]:checked + ul { 
		display: block; 
	}
	
	nav ul li {
		display: block;
		width: 100%;
		border-bottom: 1px solid rgba(153, 153, 153, 1); /* Grey60 #999999 */		
	}
	
	nav ul ul .toggle, nav ul ul a { 
		padding: 0 40px;
	}
	
	nav a:hover { 
		background-color: rgba(102, 204, 255, .5);  /* Malibu Blue #66ccff */
	}
	
	nav ul li ul li .toggle, nav ul ul a { 
		First tier drop down background: rgba(38, 41, 45, 1); /* Dark Grey #26292d */
	}
	
	nav ul ul {
		float: none;
		position: static;
		color: #ffffff;
	}
	
	nav ul ul li:hover > ul, nav ul li:hover > ul { 
		display: none; 
	}
	
	nav ul ul li {
		display: block;
		width: 100%;
	}
	
	nav ul ul ul li { 
		position: static;
	}
}
/* --------------------------------------------- Light Box --------------------------------------------- */
h2 {
	color: green;
}
 
.gallery {
	margin: 10px 40px;
}
 
.gallery img {
	width: 20%;
	height: 20%;
	transition: 1s;
	padding: 5px;
}
 
.gallery img:hover {
	filter: drop-shadow(4px 4px 6px gray);
	transform: scale(3);
}


/* --------------------------------------------- Class --------------------------------------------- */
.hangingindent {
	padding-left: 25%;
	text-indent: -25%;
}

.text-center {
	text-align: center; 
}

.img-center {
    display:block;
	margin:auto;
}

.art-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
}
	
.toptext {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	background-color: rgba(0,0,0,.5);
	margin: 5px;
}

/* --------------------------------------------- Links --------------------------------------------- */

a:link {
	color: rgba(51, 153, 51, 1); /* Forest Green #339933 */
	text-decoration: none;
}

a:hover {
	color: rgba(255, 51, 51, 1); /* Red Orange #ff3333 */
	text-decoration: underline;
}

a:visited {
	color: rgba(102, 204, 255, 1); /* Malibu Blue #66ccff */
	text-decoration: none;
}

/* Jump Menu fix for Chrome */
a.anchor {  
	display: block;
    position: relative;
    top: -61px;
    visibility: hidden;
}

/* ---------- Links Media Queries ---------- */
@media all and (max-width:979px) {

	/* Jump Menu fix for Chrome */
	a.anchor {  
		top: -81px;
	}
}
