h1, h2, h3{
	font-family: 'Roboto Slab', serif;
}

h2{
	margin: 5px 0px;
}

hr{
	width:50%;
	border:1px solid black;
}

.container{
	padding-left:0;
	padding-right:0;
	margin-left:0;
	margin-right:0;
	width:100%;
}

.navContainer{
	width:90%;
	margin:0px auto;
	padding:0px;
}

.navbar-collapse li{
	display: inline-block;
}

.contactText{
	width:82%;
	margin:0px auto;
}

.contactBlurb{
		text-align: center;
		margin-left:15px;
}
.navbar-header{
	margin:0px;
}

.col-lg-12{
	padding:0px;
}

#contactForm{
	width:95%;
}

.control-label{
	width: 15%;
}

.contactBtn{
	margin-left:9%;
	padding-left: 25px;
	padding-right: 25px;
}

.form-horizontal .form-group{
	margin-right:0px; 
}

.form-group{
	margin-right:0px;
	margin-left:0px;
}

.col-sm-12{
	padding:0px;
}
.row{
	margin:0px auto;
}

img {
     max-width: 100%;
}

hr{
	margin-top:15px;
	margin-bottom: 15px;
}

#nameError, #emailError, #commentsError{
	float:left;
	font-size:.7em;
}

/*Formatting of the 'about' section*/

#aboutRow{
	margin:50px 0 0 0;
	font-size:95%;
}

#aboutImg{
	padding:0px;
}

#aboutImg img{
	max-height:196px;
	max-width:196px;
	border-radius:50%;
}

#aboutLeft{
	background-color: #E6E7F0;
	padding-bottom:20px;
}

#aboutRight{
	background-color: #D5D6DE;
}

.inside{
	vertical-align: middle;
}

.skillsList li{
	margin:0px auto;
	padding:0;
}
	
.skillsList{
	list-style-type: none;
	margin:0px auto;
	padding:5px;
}

.sectionText h3{
	margin-top: 0px;
}

.skillsDiv{
	padding: 0;
	margin: 0px auto;
}

.footer-section{
	text-align: center;
	font-size: .9em;
	background-color: #C6C7CC;
}

.footerText{
	margin: 0px auto;
}

.socMedia{
	margin: 0px auto;
	margin-top: 15px;
}

.socMedia img{
	width:20px;
	height: 20px;
}

.formButtons{
	margin-right:10%;
}

.inside-full-height {
  /*
  // if you want to give content full height give him height: 100%;
  // with content full height you can't apply margins to the content
  // content full height does not work in ie http://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100
  */
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

#aboutMid{
	background-color:#c6c7cc;
}

.testimonial{
	text-align: center;
	display: block;
	display: inline-block;
	padding: 8px 5px 5px 5px;
	font-style: italic;
}

/* columns of same height styles */

.row-height {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}
.col-height {
  display: table-cell;
  float: none;
  height: 100%;
}

@media (max-width:992px) {
	.col-xs-12{
		width:100%;
		padding:20px 0 20px 0;
		margin:0;
		display:block;
	}
	.sectionText{
		width:95%;
		margin:0 auto;
	}
	
	#contactForm{
		width:90%;
		margin:0px auto;
		margin-bottom:20px;
	}
	
	.form-group{
		width:100%;
		margin:0px auto;
		margin-left:0 !important;
		padding:5px 0 5px 0;
	}

	.control-label{
		width:100%;
		text-align:center;
	}
	
	.col-sm-10{
		width:100%;
		margin:0px auto;
		padding-left:0px;
		padding-right:0px;
		display:block;
	}
	
	.form-control{
		width:100%;
	}
	
	.row-height{
		width:100%;
		height:auto;
		display: block;
	}
	
	.about-section{
		padding-bottom:0px;
	}
	
	#aboutRow{
		margin-bottom:0px;
		padding-bottom:0px;
	}
	
	.portfolio-section{
		background-color: #E6E7F0;
	}
	
	.contact-section{
		background-color: #EDEEF7;
	}
	
	.contactText{
		padding:0px;
	}
	
	.spacerHr{
		visibility: visible;
	}
	
	.skillsDiv h3{
		font-size:1.5em;
	}
	
	.skillsDiv{
		padding: 5px;
	}
	
	.skillsList li{
		font-size:1.2em;
	}

}

@media(min-width:993px){
	.sectionText{
		width:90%;
		margin: 0px auto;
	}	
	
	.spacerHr{
		visibility: hidden;
	}
	.listSection{
		width:100%;
	}
}



/*Formatting the Services list*/
.services{
	display:block;
	padding:0;
	margin-left:1px;
}

.services li{
	display: inline-block;
	padding: 10px 15px 10px 15px;
	list-style-type: none;
	border-left:1px solid #666666;
	border-right:1px solid #666666;
	border-collapse:collapse;
	
}


@media(min-width:767px){
	li{
		font-size: 1.2em;
	}
	.navbar-brand{
		font-size: 1.2em;
	}
}

@media (max-width:767px) {
	.services li{
		padding: 2px 5px 2px 5px;
		list-style-type: none;
		border-left:1px solid #666666;
		border-right:1px solid #666666;

	}	
	.services {
		display: block;
		padding:0;
	}
}

@media (max-width: 400px){
		.services li{
			padding: 2px 5px 2px 5px;
			list-style-type: none;
			border-left:1px solid #666666;
			border-right:1px solid #666666;
			display:block;
		}	
}



/* Dealing with the Carousel */

.carousel .item {
 width: 100%; /*slider width*/
 max-height: 600px; /*slider height*/
 vertical-align:middle;
}

.carousel .item img {
 width: 100%; /*img width*/
 margin:0px auto;
 vertical-align:middle;
}



@media(max-width: 320px) and (max-height:568px){
		.carousel{
		margin-bottom:0px;
	}
	.carousel .item {
		 width: 100%; /*slider width*/
		 max-height: 250px; /*slider height*/
		 vertical-align:middle;
	}
	
	h1{
		margin:2px 0px 2px 0px;
		font-size:1.5em;
		font-weight:500;
	}
	
	li{
		font-size:95%;
	}
	
	.btn-circle{
		width: 30px;
    	height: 30px;
		margin-top:0px;
		font-size:1.5em;
		line-height:0px;
	}

}

@media(min-width: 321px) and (max-width: 324px){
		.carousel{
		margin-bottom:0px;
	}
	.carousel .item {
		 width: 100%; /*slider width*/
		 max-height: 300px; /*slider height*/
		 vertical-align:middle;
	}
	
	h1{
		margin:2px 0px 2px 0px;
		font-size:1.5em;
		font-weight:500;
	}
	
	.btn-circle{
		margin-top:0px;
	}
}


@media(min-width: 325px) and (max-width: 359px){
		.carousel{
		margin-bottom:20px;
	}
	.carousel .item {
		 width: 100%; /*slider width*/
		 max-height: 300px; /*slider height*/
		 vertical-align:middle;
	}
	
	h1{
		margin:2px 0px 2px 0px;
		font-size:1.5em;
		font-weight:500;
	}

}

@media(min-width: 360px) and (max-width: 375px){
		.carousel{
		margin-bottom:20px;
	}
	.carousel .item {
		 width: 100%; /*slider width*/
		 max-height: 250px; /*slider height*/
		 vertical-align:middle;
	}
	
	h1{
		margin:2px 0px 2px 0px;
		font-size:1.75em;
		line-height:1.5em;
		font-weight:500;
	}
}

@media(min-width: 376px) and (max-width: 400px){
	.carousel{
		margin-bottom:0px;
	}
	.carousel .item {
		 width: 100%; /*slider width*/
		 max-height: 400px; /*slider height*/
		 vertical-align:middle;
	}
	
	h1{
		margin:2px 0px 2px 0px;
		font-size:1.75em;
		line-height:1.5em;
		font-weight:500;
	}
}

@media(min-width: 384px) and (max-height: 640px){
	.carousel{
		margin-bottom:0px;
	}
	.carousel .item {
		 width: 100%; /*slider width*/
		 max-height: 300px; /*slider height*/
		 vertical-align:middle;
	}
	
	h1{
		margin:2px 0px 2px 0px;
	}
}

@media(min-width: 401px){
	.carousel{
		margin-bottom:80px;
	}
}

@media(max-width:568px) and (orientation: landscape) {
	.carousel{
		margin-bottom:0px;
	}
	.carousel .item {
		 width: 100%; /*slider width*/
		 max-height: 150px; /*slider height*/
		 vertical-align:middle;
	}
	
	h1{
		margin:2px 0px 2px 0px;
	}
	
	.btn-circle{
		margin-top:0px;
	}
	
	.navbar{
		min-height:35px;
		margin-bottom:5px;
	}
	
	.navbar-toggle{
		padding:5px;
		margin-top:5px;
		margin-bottom:0px;
	}
	
	.navbar-brand{
		padding:5px;
		line-height:1.5em;
		height:auto;
		margin-bottom:0px;
	}
	
	.home-section{
		padding-top: 37px;
	}
}

@media(min-width:569px) and (max-width:640px) and (orientation: landscape) {
	.carousel{
		margin-bottom:0px;
	}
	.carousel .item {
		 width: 100%; /*slider width*/
		 max-height: 180px; /*slider height*/
		 vertical-align:middle;
	}
	
	h1{
		margin:2px 0px 2px 0px;
	}
	
	.btn-circle{
		margin-top:0px;
	}
	
	.navbar{
		min-height:35px;
		margin-bottom:5px;
	}
	
	.navbar-toggle{
		padding:5px;
		margin-top:5px;
		margin-bottom:0px;
	}
	
	.navbar-brand{
		padding:5px;
		line-height:1.5em;
		height:auto;
		margin-bottom:0px;
	}
	
	.home-section{
		padding-top: 37px;
	}
}

@media(min-width:641px) and (max-width:736px) and (orientation: landscape) {
	.carousel{
		margin-bottom:10px;
	}
	.carousel .item {
		 width: 100%; /*slider width*/
		 max-height: 200px; /*slider height*/
		 vertical-align:middle;
	}
	
	h1{
		margin:2px 0px 2px 0px;
	}
	
	.btn-circle{
		margin-top:0px;
	}
	
	.navbar{
		min-height:35px;
		margin-bottom:5px;
	}
	
	.navbar-toggle{
		padding:5px;
		margin-top:5px;
		margin-bottom:0px;
	}
	
	.navbar-brand{
		padding:5px;
		line-height:1.5em;
		height:auto;
		margin-bottom:0px;
	}
	
	.home-section{
		padding-top: 37px;
	}
}

@media(min-width:737px) and (max-width:769px) and (orientation: landscape) {
	.carousel{
		margin-bottom:0px;
	}
	.carousel .item {
		 width: 100%; /*slider width*/
		 max-height: 150px; /*slider height*/
		 vertical-align:middle;
	}
	
	h1{
		margin:2px 0px 2px 0px;
	}
	
	.btn-circle{
		margin-top:0px;
	}
	
	.navbar{
		min-height:35px;
		margin-bottom:5px;
	}
	
	.navbar-toggle{
		padding:5px;
		margin-top:5px;
		margin-bottom:0px;
	}
	
	.navbar-brand{
		padding:5px;
		line-height:1.5em;
		height:auto;
		margin-bottom:0px;
	}
	
	.home-section{
		padding-top: 37px;
	}
}

@media(min-width:770px) and (max-width:1023px) and (orientation: landscape) and (max-height: 700px){
	.carousel{
		margin-bottom:15px;
	}
	.carousel .item {
		 width: 100%; /*slider width*/
		 max-height: 200px; /*slider height*/
		 vertical-align:middle;
	}
	
	h1{
		margin:2px 0px 2px 0px;
	}
	
	.btn-circle{
		margin-top:0px;
	}

}

@media(min-width:1000px) and (max-height:768px) and (orientation: landscape) {
	.carousel{
		margin-bottom:20px;
	}
	.carousel .item {
		 width: 100%; /*slider width*/
		 max-height: 400px; /*slider height*/
		 vertical-align:middle;
	}
	
	h1{
		margin:2px 0px 20px 0px;
	}
	
	.btn-circle{
		margin-top:0px;
	}

}

@media(min-width:1025px) and (max-height:768px) and (orientation: landscape) {
	.carousel{
		margin-bottom:35px;
	}
	.carousel .item {
		 width: 100%; /*slider width*/
		 max-height: 400px; /*slider height*/
		 vertical-align:middle;
	}
	
	h1{
		margin:2px 0px 20px 0px;
	}
	
	.btn-circle{
		margin-top:0px;
	}

}

.carousel-control.left{
	background:none;
}

.carousel-control.right{
	background:none;
}

/* Plusify Grid CSS */
.Collage{

    /*This is where you set the padding you want between the images*/
    padding:0px;
	text-align:left;

}
.Collage img{
    margin:0;
    padding:0px;
    display:inline-block;
    vertical-align:bottom;
    opacity:1;
	border-radius:0px;

    /*This is where you set the border you want for the image*/
    /*border:6px solid #FFF; */
}

.popup-gallery{
	margin-top: 10px;
}
	
/* In this example, this is the main item being resized */
.Image_Wrapper{
    /* to get the fade in effect, set opacity to 0 on the first element within the gallery area */
    opacity:0;
    -moz-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
    box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

.Caption{
    font-size:14px;
    font-weight:normal;
    font-family:arial;
}

.Caption_Content{
    /* padding:10px; */
    color:#FFF;
    padding:20px;
}

.form-control:focus{
	border: 1px solid #888888;
	-webkit-box-shadow: none;
	box-shadow: none;
}

/*Filter and such*/
.inline{
	display: inline-block;
}


.active{
	background-color:#D5D6DE !important;
}

.portfolio-section p, .portfolio-section button{
	font-size: 1em;
	line-height:1.25em;
	margin:3px;
}