/*	Developers: Austin Farrand, David Blacksher
	Date: 4/25/17
	Project: 417 Lawn Salon
	File: styles.css
	*/




/*Reset Styles*/
header, p, nav, img, li, a, ul, div, body, button, span{
	padding: 0;
	margin: 0;
	border: 0;
}
/* Page Styles */
/*Create grass background, and white background content on all but the home page */
.site {
	background-image: url('images/grassbg.png'); background-size:cover;
}
.mainServices {
	background-color:white;margin-top:0px; padding:25px;
	width: 65%;
	margin: auto;
	padding-bottom: 3%;
}

/*--ELEMENT STYLES--*/

/*Header and header image*/
header{
    position: relative;
	padding: 1em;
}

/*carousel settings*/
#slider .item{
	height: 400px;
}


header img{
	margin-left: 22%;
	padding-left: 5em;
}

/* nav elements */
.glyphicon {
	padding-right: 5px;
}
.nav img {
	height: 1.5em;
	padding-right: 5px;
}

/*Footer*/
footer{
	color: #b3b3b3;
	text-align: center;
	padding: 1em;
	background-color: #1a1a1a;
	font-family: 'Roboto Condensed', sans-serif;
	
}

/*--CLASS STYLES--*/

/*Styles for nav menu once fixed*/
.affix{
	top: 0;
	width:100%;
	z-index: 1;
}
.forAffix{
	min-height: 50px;
}

/*Nav menu*/
.navbar-brand{
	padding-left: 3em;
}

.navbar-inverse{
	margin-bottom: 0;
	border-radius: 0;
}

/*.contactInfo contains contact info*/
.contactInfo{
	position: absolute;
	display: inline-block;
	width: 20%;
	margin-top: 2em;
	margin-left: 20%;
	text-align:center;
}

.contactInfo p{
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 120%;
}

/*.mainImage contains image of house and list beneath it*/
.mainImage{
	position: relative;
}

.mainImage img{
	width: 100%;
}

.mainImage a{
	color: #ffffff;
	position: absolute;
	bottom: 60%;
	right: 28%;
	text-decoration: none;
	font-family: 'Fjalla One', sans-serif;
	font-size: 600%;
	background: rgba(153, 153, 153, 0.7);
}

/*.checkMarkList is nested within .mainImage div*/
.checkMarkList{
	text-align: center;
	background-color: #A9A9A9;
	padding: 1em;
}

.checkMarkList li{
	padding-left: 5%;
	padding-right: 5%;
	font-family: 'Fjalla One', sans-serif;
	font-size: 150%;
	display: inline-block;
}


/*.container contains columns*/
.container{
	width: 80%;
}

/*Three columns that span 80% width*/
.col-md-4{
	text-align: center;
	margin-top: 2em;
	margin-bottom: 2em;
}

.col-md-4 h2{
	font-family: 'Roboto Condensed', sans-serif;
}

.col-md-4 img{
	width: auto;
	max-width: 100%;
	height: auto;
}

.col-md-4 p{
	/* width: 50%;
	margin: auto; */
}

/*id selectors*/
#middleColumn{
	border-right: 1px solid #A9A9A9;
	border-left: 1px solid #A9A9A9;
}

#socialMedia{
	padding-right: 4em;
}

.header{
	/* background-color:  #A9A9A9; */
	border-bottom: 2px double gray;
	box-shadow: 0px 3px 3px #cccccc;
	padding:0px 10px;
}


/*Form Required Asterisk*/
.required .control-label:after{
	content: "*";
	color: red;
}
/*Styles for response page*/
.response{
	text-align: center;
	padding-bottom: 20%;
}


#flxBox{
	display:flex;
	flex-wrap:wrap;
	justify-content: center;

}
.service {
	flex:1 1 30%;
	padding:25px;
	text-align: center;
	
}
.service img{
	width: auto;
	max-width: 100%;
	height: auto;
	box-shadow: 5px 5px 3px #cccccc;
}
.service h3{
	padding-top: 1%;
}

.service p{
	padding-top: 1%;
}



/*footer styles */
footer a:link{
	color:green;
}
footer a:visited {
	color:green;
}
footer a:hover {color:gray;}
/*Breakpoints*/
@media screen and (max-width:1515px){
	.mainImage a{font-size: 500%;}
}

@media screen and (max-width:1175px){
	.mainImage a{font-size: 300%;}
}

@media screen and (max-width:1050px){
	#middleColumn{border: 0;}
}

@media screen and (max-width:982px){
	.checkMarkList li{padding-left: 1%; padding-right: 1%;}
	header img{margin-left: 15%;}
	.contactInfo{margin-left: 15%;}
	#socialMedia{display: none;}
}

@media screen and (max-width:680px){
	.checkMarkList{display: none; padding: 0;}
	.mainImage a{display: none;}
	header img{margin-left: 5%;}
	.contactInfo{margin-left: 5%;}
    .glyphicon-earphone{display: none;}
	.glyphicon-envelope{display: none;}
	
	.service {flex:none; width: 100%}
	
}

@media screen and (max-width:500px){
	/* .testimonials{width: 95%; text-align: center;} */
	.mainServices{width: 95%; text-align: center;}
	/* .container1{width: 95%; text-align: center;} */
	header img{margin: auto;}
	.contactInfo{display: none;}

	
	
}