html {
    /* background: linear-gradient(to bottom, rgba(0,0,0, 0.9), rgba(0,0,0, 0.8)), url(../images/background.jpg) no-repeat center center fixed; */
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
    background-size: cover;
}
header {
	height: 200px; /* Is this actually doing anything...? The answer is... Not at all! Whooooo */
	background: linear-gradient(to bottom, rgba(0,0,0, 0.9), rgba(0,0,0, 0.8));
	/*background-color: white;*/
}
body {
    background: /*linear-gradient(to bottom, rgba(0,0,0, 0.7), rgba(0,0,0, 0.6)), */
        url(../images/background.jpg);
	background-color: darkslateblue;
    background-size: cover;
    min-height: 100vh;
	width: 100vw;
    background-repeat: no-repeat;
	background-position: center;
    /* overflow: hidden; */
	min-width: 480px; /* Temp fix for social media icons moving below logo at smaller width */
}
#logo {
	padding-top: 30px;
	padding-left: 30px;
	padding-bottom: 30px;
}
#wrap {
	min-height: 100%;
}
#maincontent {
	background-color: rgba(255,255,255, 0.9);
	width: 90%;
	margin: 0 auto -50px;
	margin-top: -50px;
	/* overflow-y: scroll; ADD WHEN FOOTER PROBLEM IS FIXED */
	overflow: hidden; /* SWITCH TO OVERFLOW-X WHEN FIXED */
}
#secondcontainer {
	background-color: rgba(255,255,255, 0.9);
}

#ContactForm {
	padding:0 0 0 7px;
	margin-top:28px
}
#ContactForm span {
	width:110px;
	float:left;
	font-weight:bold;
	line-height:28px
}
#ContactForm .wrapper {
	min-height:40px
}
#ContactForm .textarea_box {
	width:100%;
	overflow:hidden;
	min-height:274px
}
#ContactForm a {
	margin-right:10px;
	float:left;
	margin-top:5px
}
#ContactForm .input {
	width:767px;
	height:20px;
	border:1px solid #d7d7d7;
	background:#fff;
	padding:5px;
	color:#000;
	font:14px Arial, Helvetica, sans-serif
}
#ContactForm textarea {
	overflow:auto;
	margin:0;
	width:767px;
	height:200px;
	border:1px solid #d7d7d7;
	background:#fff;
	padding:5px;
	color:#000;
	font:14px Arial, Helvetica, sans-serif
}

.navbar-inverse {
	background-color: rgba(0,0,0, 0.6);
	font-family: Cambria;
	font-size: 15px;
}
.navbar-nav > li > a, .navbar-brand {
	padding-top: 10px;
	/* height: 15px; */
}
.row {
	text-align: center;
}
.footer {
	height: 50px;
	padding-top: 15px;
	padding-left: 15px; /* For mobile screens; alternative is columns? */
	padding-right: 15px;
	position: fixed;
	color: #404040;
	right: 0;
	left: 0;
	bottom: 0;
	text-align: center;
	text-shadow: 1px 1px rgba(0,0,0,0.3);
}

/* Social Media */
.socials li {
	list-style-type: none;
	float: left;
	margin-top: -20px;
}
.socials li a i { /* Logos */
	width: 40px;
	height: 35px;
	border-radius: 20px;
	text-align: center;
	padding-top: 20px;
	margin-top: 20px;
	font-size: 28px;
}

.youtube {
	color: #cc181e;
}

.btn-group button {
	display: block;
}
@media (max-width:320px) {
	#social-nm {
		visibility: hidden;
	}
	#social-mb {
		/* float: right; */
		visibility: visible;
		margin-top: -120px; /* Temp fix, may not work on all devices? */
	}
}
@media (max-width: 768px) {
	#social-nm {
		visibility: hidden;
	}
	#social-mb {
		/* float: right; */
		visibility: visible;
		margin-top: 0px;
		margin-right: -150px;
	}
}
@media (min-width: 769px) {
	#social-nm {
		/* float: right; */
		visibility: visible;
		font-size: 15px;
		padding-top: 15px;
	}
	#social-mb {
		visibility: hidden;
	}
	.socials li a {
		padding-right: 20px;
	}
}
.fa-twitter {color: #00aced}
.fa-deviantart {color: #05cc47}
.fa-tumblr {color: #2F527E}
/* End Social Media */

.title {text-shadow: 2px 2px rgba(0,0,0,0.5);}

h2 {
	color: mediumpurple;
	font-family: Cambria;
	text-shadow: 1px 1px rgba(0,0,0,0.5);
}

h3 {
	color: #996CE0;
	font-family: Cambria;
	text-align: left;
	padding-left: 50px;
	margin-top: 0px;
	font-size: 20px;
	text-shadow: 1px 1px rgba(0,0,0,0.5);
}

p {
	color: white;
	padding-left: 40px;
	padding-right: 40px;
	text-align: justify;
}
.abm {
	color: black;
	padding-left: 40px;
	padding-right: 40px;
	text-align: justify;
}

ul li {
	color: #2A2A2A;
	text-align: left;
}

/* Gridder, the image slider; code from LoL basic example */
.gridder { margin: 0px; padding: 0px; list-style-type: none; font-size: 0; text-align: center; }
.gridder .gridder-list { display: inline-block; vertical-align: top; cursor: pointer; position: relative; width: 350px; margin-bottom: 0.5%; margin-right: 0.5%; }
.gridder .gridder-list .image { background-color: #313131; background-size: cover; background-position: center; width: 350px; height: 250px; position: relative; }
.gridder .overlay { position: absolute; left: 10%; top: 10%; color: #FFF; line-height: 130%; text-align: left; }
.gridder .overlay .title { font-weight: 800; font-size: 16px; color: #FFF; }
.gridder .overlay .description { font-weight: 300; font-size: 14px; color: #FFF; }
.gridder .gridder-list, .gridder .gridder-show { font-size: 12px; }
.gridder .selectedItem:after { content: ' '; display: block; border-bottom: 10px solid #222; border-left: 10px solid transparent; border-right: 10px solid transparent; height: 0%; position: absolute; top: 101%; width: 0; left: 43%; margin-bottom: -4px; }
.gridder.hasSelectedItem .gridder-list:not(.selectedItem) { opacity: .2; }

.gridder-show { padding: 4%; background: #222; position: relative; display: block; float: left; width: 100%; margin-bottom: 0.5%; text-align: left; color: #CCC; }
.gridder-show img { width: 100%; box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.2); }

.gridder-content { display: none; }

.gridder-navigation .gridder-nav { height: 77px; padding: 0; position: absolute; width: 32px; z-index: 1; background-color: #454545; background-image: linear-gradient(top, #3e3e3e, #333); border: 1px solid #141414; border-radius: 2px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 1px 1px 0 rgba(255, 255, 255, 0.03), -1px -1px 0 rgba(0, 0, 0, 0.02), inset 1px 1px 0 rgba(255, 255, 255, 0.05); color: #aaa !important; cursor: pointer !important; display: inline-block; filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#303030',EndColorStr='#262626'); font-size: 11px; font-weight: bold; margin: 0 5px; outline: 0; text-align: center; text-decoration: none !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); -webkit-user-select: none; user-select: none; vertical-align: middle; white-space: normal; word-wrap: normal; top: 50%; margin-top: -40px; overflow: hidden; }

.gridder-navigation .gridder-nav span { display: block; bottom: 0; height: 23px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 14px; }

.gridder-navigation .gridder-nav.prev { left: -6px; }

.gridder-navigation .gridder-nav.prev span { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAXBAMAAADJv2OxAAAAMFBMVEX///+ZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZnHHh8xAAAAD3RSTlMAESIzRFVmd4iZqrvM3e5GKvWZAAAAdElEQVQI12NgAAH2v2CKsf83mJb8vxBEMe3/KQCitf83gLn3n4Flff8FgCjW90/A3Pw/BiBK4v0lMHf+bwUw/R/CZVj/SwBq5kaIQD1UAfv7yxCBuH8OYJrl/VWIgM3/AjDNdP45REDq/0SI+9b/gghw/AUAn68l+4HFkZUAAAAASUVORK5CYII=) center no-repeat; }

.gridder-navigation .gridder-nav.next { right: -6px; -webkit-transform: scaleX(-1); transform: scaleX(-1); }

.gridder-navigation .gridder-nav.next span { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAXBAMAAADJv2OxAAAAMFBMVEX///+ZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZnHHh8xAAAAD3RSTlMAESIzRFVmd4iZqrvM3e5GKvWZAAAAdElEQVQI12NgAAH2v2CKsf83mJb8vxBEMe3/KQCitf83gLn3n4Flff8FgCjW90/A3Pw/BiBK4v0lMHf+bwUw/R/CZVj/SwBq5kaIQD1UAfv7yxCBuH8OYJrl/VWIgM3/AjDNdP45REDq/0SI+9b/gghw/AUAn68l+4HFkZUAAAAASUVORK5CYII=) center no-repeat; }

.gridder-navigation .gridder-nav:hover { background: #3d3d3d; }

.gridder-navigation .gridder-close { background: url(data:image/gif;base64,R0lGODlhFAAUAJEAAE1NTf///////wAAACH5BAEHAAIALAAAAAAUABQAAAIzBISpK+YMm5Enpodw1HlCfnkKOIqU1VXk55goVb2hi7Y0q95lfG70uurNaqLgTviyyUoFADs=) no-repeat center center; cursor: pointer; height: 30px; padding: 7px; position: absolute; right: 10px; top: 10px; width: 30px; z-index: 2; }

.gridder-navigation .gridder-close:hover { color: #3d3d3d; }
/* End Gridder */

/* Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4); 
    box-shadow: inset 0 0 6px rgba(0,0,0,0.7); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.7); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(0,0,0,0.4); 
}
/* End Scrollbar */

/* 
To fix:
- *Find a way to make the footer "push" the main content above so that it doesn't overlap *<br> in main-content is temp fix
- Adjust font style or family for navigation
- Adjust font size of description text in image previews (refer to demo/example?)
- Add scroll-to-top button for Gallery
- Remove horizontal scrolling (due to background image?)
- Finish Alt img and descrips, include dates
*/