@charset "UTF-8";

/* Layout (global rules for all sizes) I need to seperate my pages due to being a rookie */

body {
	margin:0;
	padding:0;
			
	}
/*Header*/
header a.logo {
	display: block;
	position: absolute;
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

header a.starLogo {
	display:block;
	position:absolute;
	
}



/*Index page Header End*/

nav {
	width: 100%;
	display: block;
	position: absolute;
	background-color: #a6430a;  
}

/* Layout Large Screens (default for older browsers) */

/*This is the header for the index page*/
header {
	height:275px;
	background: url(../images/bannerLargeAbout.jpg) no-repeat right 0px;
	background-size: 980px 275px;
}
.botCaps {
	float:right;
	padding:20 0 35 40;
	
}
.serviceList {
color:#a6430a;
	font-size:1.3em;
	list-style-type:none;
	text-align:left;
	font-style:bold;
	padding-left:0px;
	margin-left:0;
	
	 	
	
}
.serviceList p {
	font-size: .9em;
	color:#575c7a;
	list-style-type:none;	
}
a .serviceList :hover {
    list-style-type:none;
    color:#908989;

	
}
rightSide {
	float:right;
	
	
}
aside {
	
	margin-left:20px;
	margin-bottom:20px;
	width:40%;
}

#firstAside {
		margin-right:0;
		margin-bottom:20px;
		width:60%;
		float:right;
		background-image:url(images/circleLogo120px.png)no-repeat;
		
	}



/*header .aboutImg {
	height:275px;
	background-image: url(../images/bannerLargeAbout.jpg) no-repeat right 0px;*/

	

/*This Ends the header for the index page*/

/* I want this to be the header for the About page



.aboutImg {
	width:100%;
	height:275px;
	background-image: url(../images/bannerLargeAbout.jpg) no-repeat;
}


/* end of my I want this to be the header for the About page*/


header a.logo {
	width: 136px;
	height:165px;
	top: 60px;
	right: 40px;
	background-image: url(../images/logoLarge.png);
}
header a.starLogo {
	width: 400px;
	height: 164px;
	top: 45px;
	left: 20px;
	background-image: url(../images/starLogoLarge.png);		
	}
	/*This Ends the header for the index page*/
	
	
article {
	padding:60px 20px 10px 20px;
	} 
.rightSide{
	float:right;
	padding:0px 20px 20px 50px;
	
}

.photos {
				-webkit-column-count:4;
				-webkit-column-gap:2em;
				-moz-column-count:4;
				-moz-column-gap:2em;
				column-count:4;
				column-gap:2em;
				margin-bottom:4em;
				padding-left:40px;
				padding-right:20px;				
			}


.promoContainer {
	padding:0px 0px 15px 20px;
}

.promoContainer .promo {
	width: 33%;
	float:left;
	background-position: 0px 3px;
	
}

.promoContainer .promo .content {
	padding: 0px 30px 0px 120px;/*this was changed from 70 to 120*/	
}
	nav {
		top:275px;
	
}
nav a {
	margin: 12px 0px 10px 20px;
}


/*.col2 .col3 {
				clear: both;
			}
			
			.photos ul {
				display:table;
			}
			.photos ul, .photos li {
				list-style-type:none;
				margin: 0;
				padding:0;
			}
			.photos {
				-webkit-column-count:3;
				-webkit-column-gap:1em;
				-moz-column-count:3;
				-moz-column-gap:1em;
				column-count:3;
				column-gap:1em;
				margin-bottom:4em;
				padding-left:20px;
				padding-right:20px;
			}/*
			.photos img {
				width:70%;
				margin-bottom:.5em;
			}
			.photos li {
				position: relative;
			}
			.photos a:hover:after {
				content: attr(title);
				display: block;
				width:70%;
				position: absolute;
				z-index: 100;
				bottom:.9em;
				left:10px;
				color:white;
				text-align: center;
				font-size: 75%;
				font-family: Arial, sans-serif;
				background-color:#575c7a;			}*/


@media screen and (max-width:990px) {
	footer { padding-left: 20px;
		
	}


/* self - ended HERE for the night -Take a rest!!!/*