body {
	font-family: Futura, "Trebuchet MS", Arial, sans-serif;
	font-weight: 100;
	background: url('../images/still-background.png');
	background-color: gray;
}

video#bgvid {
	position: absolute;
 	 top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	z-index: -100;
}

#bg-video-div {
	position: fixed;
  	top: 0; right: 0; bottom: 0; left: 0;
  	overflow: hidden;
  	z-index: -100;
}

header {
	color: white;
	padding: 10px 0 0 17px;
}

h2#homepage-title {
	font-size: 1.2em;
	padding-bottom: 12px;
	padding-left: 5px;
}

h2.page-title {
	text-align: center;
	padding-top: 10px;
	text-transform: uppercase;
}

span, #resume-button, #contact-button, #web-button {
	cursor: pointer;
	text-transform: uppercase;
}
a:hover, span:hover, #resume-button:hover, #contact-button:hover, #web-button:hover {
	color: gray;
}

#web-button, #contact-button {
	padding-bottom: 3px;
	font-size: .9em;
	width: 110px;
}

span#close-web, span#close-contact {
	padding-top: 10px;
	left: 92%;
	position: fixed;
	font-size: 1.5em;
}

.contact-div, .web-div {
	position: fixed;
	z-index: 10;
	background: rgba(0,0,0,.5);
	height: 100%;
	width: 100%;
	color: whitesmoke;
	top: 0;
	left: 0;
	overflow: scroll;
}

#contact-wrapper {
	text-align: center;
}

#description {
	text-align: left;
	padding-bottom: 25px;
	line-height: 20px;
}

.info {
	color: white;
	text-align: center;
	line-height: 25px;
	letter-spacing: 0.5px;
}

a {
	color: #8B8B99;
	text-decoration: none;

}

#resume-button {
	color: #8B8B99;
}

#resume {
	margin-left: 20%;
	width: 60%;
}

#site-div {
	overflow: scroll;
	width: 60%;
	margin: 10px auto;
	border: white solid 1px;
	padding: 10px;
}

p#site-description {
	float: right;
	width: 55%;
	line-height: 10px;
	line-height: 19px;
	letter-spacing: 0.5px;
}

img#commerce-screenshot, #spctrl-screenshot, #resonant-screenshot {
	width: 300px;
}

img#commerce-screenshot:hover, #spctrl-screenshot:hover, #resonant-screenshot:hover {
	opacity: .8;
}

@media (max-width: 1111px) {
  p#site-description {
  	width: 100%;
  }
  img#commerce-screenshot, #spctrl-screenshot, #resonant-screenshot {
	margin-left: 20%;
	}
}

@media (max-width: 740px) {

p#site-description {
  	width: 100%;
  }
  img#commerce-screenshot, #spctrl-screenshot, #resonant-screenshot {
	margin-left: 11%;
	}

}

@media (min-aspect-ratio: 16/9) {
  video#bgvid { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  video#bgvid { width: 300%; left: -100%; }
}
/* 2. If supporting object-fit, overriding (1): */
/*@supports (object-fit: cover) {
  video#bgvid {
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
}*/