body	{
	background-color: #000000;
	color: #FFFFFF;
	font-family: 'Muli', sans-serif;
}
.navbar{
	margin-bottom: 0;
	background-color: #111111;
}
.navbar-brand{
	font-size: 150%;
	color: #FFFFFF;
}
footer	{
	font-size: 0.8em;
	text-align: center;
	padding: 1em;
	vertical-align: bottom;
}
h2		{
	text-align: center;
	padding: 1em;
}
.image-space{
	padding-bottom: 2em;
}
.row-pad{
	padding-right: 7.5%;
	padding-left: 7.5%;
}
.link-row-pad{
	margin-right: 6%;
	margin-left: 6%;
	margin-bottom: 5em;
	padding-bottom: 1em;
	text-align: center;
	text-decoration: none;
	background-color: #333333;
}
.par-pad{
	padding-right: 10%;
	padding-left: 10%;
	padding-bottom: 5%;
}
dl		{
	padding-right: 5%;
	padding-left: 5%;
	font-size: 1.2em;
}
dd		{
	padding-bottom: 1em;
}
.table-head{
	font-size: 1.3em;
}
.icon{
	padding-bottom: 10%;
	display: block;
	float: left;
}
.brand-text{
	font-family: 'Permanent Marker', cursive;
}
.jumbotron{
	color: #B5B5B5;
	background-color: #333333;
	padding: 1em;
}
.jumbotron-photo{
	float: left;
	max-width: 125px;
	margin-left: 1%;
	margin-right: 3%;
	border: solid;
	border-color: #B5B5B5;
}
.bio{
	padding-left: 4em;
	padding-right: 4em;
}
.resume{
	color: #B5B5B5;
	padding-left: 7em;
	padding-right: 7em;
	padding-top: 2em;
}
.emphasis{
	font-style: italic;
	font-weight: bold;
}
.center{
	text-align: center;
}
.center-detail{
	text-align: center;
	margin-left: 15%;
	margin-right: 15%;
	margin-bottom: 2em;
}
.hide-link a{
	text-decoration: none;
	color: #FFFFFF;
}
.panel-heading{
	background-color: #333333;
}
.panel-body{
	background-color: #333333;
}
.panel-collapse{
	background-color: #333333;
}
.panel{
	border: 0;
}
/*Carousel*/
#portfolio-carousel{
	margin-bottom: 3em;
	background-color: #333333;
	max-height: 100%;
	max-height: 426px;
	height: auto;
}
.carousel-inner .item,
.carousel-inner .item.active,
.carousel-inner .item img {
    margin: auto;
    padding: 0px;
}

/*Carousel Fade*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-control {
  z-index: 2;
}

/*Styling images on Portfolio page*/
.row > .image-space > img,
.modal-content > .mySlides > img,
.modal-content > .myGradSlides > img,
.modal-content > .myEventSlides > img,
.modal-content > .myNatureSlides > img{
	width: 100%;
}

/*---Modal (backgrounds) on Portfolio Page---*/
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 50px;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 75%;
  max-width: 700px;
  overflow: auto;
  background-color: #333333;
}

/* The Close Button */
.close {
  color: #FFFFFF;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #cccccc;
  text-decoration: none;
  cursor: pointer;
}
.mySlides,
.myGradSlides,
.myEventSlides {
  display: none;
}
.cursor {
  cursor: pointer
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.center-img {
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: -4px;
  top: 10%;
  bottom: 10%;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
/*---End Modal stuff---*/

/*Resive embedded youtube video*/
.sizer{
	margin: auto;
	max-width: 550px;
}

/*Style form*/
.form-horizontal{
	display: block;
	margin-left: 5%;
	margin-right: 10%;
}

/*Style alert IDs for form*/
#nameAlert,
#emailAlert,
#subjectAlert,
#messageAlert{
	color: #ff7070;
}

/*Styling for mobile devices in portrait mode*/
@media only screen and (max-width: 768px)
	and (orientation: portrait){
	#home-photo{
		padding-top: 20%;
		padding-bottom: 50%;
	}
	.resume{
		color: #B5B5B5;
		padding-left: 5%;
		padding-right: 5%;
		padding-top: 2em;
	}
	.bio{
		padding-left: 2%;
		padding-right: 2%;
	}
	.modal {
		display: none;
		position: fixed;
		z-index: 1;
		padding-top: 50px;
		left: 0;
		top: 15%;
		bottom: 20%;
		width: 100%;
		max-width: 700px;
		overflow: auto;
		background-color: #333333;
	}
	.jumbotron-photo{
		display: block;
		float: left;
		max-width: 125px;
		margin-left: 1%;
		margin-right: 4%;
		margin-top: 10%;
		margin-bottom: 10%;
		border: solid;
		border-color: #B5B5B5;
	}
	
}

/*Styling for mobile devices in landscape mode*/
@media only screen and (max-width: 768px)
	and (orientation: landscape){
	#home-photo{
		padding-top: 20%;
		padding-bottom: 50%;
	}
	.resume{
		color: #B5B5B5;
		padding-left: 5%;
		padding-right: 5%;
		padding-top: 2em;
	}
	.bio{
		padding-left: 2%;
		padding-right: 2%;
	}
	.modal {
		display: none;
		position: fixed;
		z-index: 1;
		padding-top: 50px;
		left: 0;
		top: 2.5%;
		bottom: 2.5%;
		width: 100%;
		max-width: 425px;
		max-height: 425px;
		overflow: auto;
		background-color: #333333;
	}
	.jumbotron-photo{
		display: block;
		float: left;
		max-width: 125px;
		margin-left: 1%;
		margin-right: 4%;
		margin-top: 10%;
		margin-bottom: 10%;
		border: solid;
		border-color: #B5B5B5;
	}
	
}