/*////////////////////////////////
/////    RESPONSIVE STYLES   ///// 
////////////////////////////////*/



/*@media only screen and (device-width: 768px) {
	#overview-pane, #testimonial-pane, #services-pane, #community-pane, #contact-pane {background-size: auto;} 
}
*/


/* | MAJOR | <480px Rule for 1st Gen Smartphones | */
@media screen and (max-width: 480px) {


}


/* | MAJOR | <768px Rule for High-End Smartphones | */
@media screen and (max-width: 320px) {


.wrapper {width:80%;}

}



/* | MAJOR | >768px Rule for Big Tablets and Desktop | */
@media screen and (max-width: 480px) {
	

.wrapper {width:325px;}

}

@media screen and (max-width: 600px) {

#info-callout.scrolled {
  /*font-size: 1em !important;*/
}	

#global-nav li:nth-child(5) {display:none;}
.mobile #community-pane {display:none;}

#overview-pane #overview-pattern #overview-gradient #global-bar.scrolled #global-nav li {
  font-size: 0.85em;
}

#community-pane .wrapper {
  width: 100%;
}

#contact-pane #facebook-wrapper {width:325px !important; overflow: hidden;}

}


@media screen and (max-width: 650px) {
#overview-pane #overview-pattern #overview-gradient #global-bar.scrolled #global-nav li {
  /*font-size: 1.00em;*/
}
}




/* | MAJOR | >768px Rule for Big Tablets and Desktop | */
@media screen and (max-width: 720px) {
	

	/** {background:navy;}*/
	.wrapper {width:480px;}

	/* /////////////////////////////////////////////////////////// */
	#overview-pane #overview-pattern #overview-gradient #global-bar #logo {width: 150px;}

	#info-callout.scrolled {
		z-index:800;
		top: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height:80px !important;
		padding-top:30px !important;
		background-color: #141414 !important;
		text-align: right;
		/*font-size: 1.5em;*/
		font-weight: 300;
		padding-right: 20px;
}

	#overview-pane #overview-pattern #overview-gradient #global-bar.scrolled {top:80px;	height:40px;}

	#overview-pane #overview-pattern #overview-gradient #global-bar.scrolled #logo {z-index: 9900; top: 15px; left: 25px;}
	#overview-pane #overview-pattern #overview-gradient #global-bar.scrolled #global-nav {left: 10px; width: 100%;}
	/* /////////////////////////////////////////////////////////// */

	#services-pane #services-pattern #service-card-wrapper .service-card:nth-child(1n) {float:left; width:100%; margin:10px 0;}
	/*#community-pane .wrapper {width: 510px;}*/
	#community-pane .community-card {}
	#community-pane a:nth-child(1n) .community-card {float:left; margin: 8px 5px;} 
	#community-pane a:nth-child(2n) .community-card {float:right; } 

	#overview-pane, #testimonial-pane, #services-pane, #community-pane, #contact-pane {background-size: cover;} 

	#gallery-pane {
		float: left;
		width: 100%;
		padding-bottom: 120px;
	}

} /*///////////////////////////////////////////////////////////*/

/* | MAJOR | >768px Rule for Big Tablets and Desktop | */
@media screen and (max-width: 800px) {
	

	/** {background:blue;}*/

	.wrapper {width:720px;}
	#overview-pane, #testimonial-pane, #services-pane, #community-pane, #contact-pane {background-size: cover;} 

	/* /////////////////////////////////////////////////////////// */
	#overview-pane #overview-pattern #overview-gradient #global-bar #logo {width: 150px;}

	#info-callout.scrolled {
		z-index:800;
		top: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height:80px !important;
		padding-top:30px !important;
		background-color: #141414 !important;
		text-align: right;
		/*font-size: 1.5em;*/
		font-weight: 300;
		padding-right: 20px;
	}

	#overview-pane #overview-pattern #overview-gradient #global-bar.scrolled {top:80px;	height:40px;}

	#overview-pane #overview-pattern #overview-gradient #global-bar.scrolled #logo {z-index: 9900; top: 15px; left: 25px;}
	#overview-pane #overview-pattern #overview-gradient #global-bar.scrolled #global-nav {left: 10px; width: 100%;}
	/* /////////////////////////////////////////////////////////// */

	#services-pane #services-pattern #service-card-wrapper .service-card:nth-child(1n) {float:left; width:47%; margin-right: 10px; margin-left:0;}
	#services-pane #services-pattern #service-card-wrapper .service-card:nth-child(2n) {float:right;}

	#community-pane .community-card {width: 32%; margin: 8px 5px; }
	#community-pane a:nth-child(1n) .community-card {float:left; margin: 8px 5px;} 
	#community-pane a:nth-child(2n) .community-card {float:right;} 

} /*///////////////////////////////////////////////////////////*/

/* | NICE TO HAVE | >768px AND <1024px Rule for Landscape iPads and Big Tablets | */
@media screen and (max-width: 960px) {


	/** {background:teal;}*/

	.wrapper {width:800px;}
	#overview-pane, #testimonial-pane, #services-pane, #community-pane, #contact-pane {background-size: cover;} 

	/* /////////////////////////////////////////////////////////// */
	#overview-pane #overview-pattern #overview-gradient #global-bar #logo {width: 150px;}

	#info-callout.scrolled {
		z-index:800;
		top: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height:80px !important;
		padding-top:30px !important;
		background-color: #141414 !important;
		text-align: right;
		/*font-size: 1.5em;*/
		font-weight: 300;
		padding-right: 20px;
	}

	#overview-pane #overview-pattern #overview-gradient #global-bar.scrolled {top:80px;	height:40px;}

	#overview-pane #overview-pattern #overview-gradient #global-bar.scrolled #logo {z-index: 9900; top: 15px; left: 25px;}
	#overview-pane #overview-pattern #overview-gradient #global-bar.scrolled #global-nav {left: 10px; width: 100%;}
	/* /////////////////////////////////////////////////////////// */


	#services-pane #services-pattern #service-card-wrapper .service-card:nth-child(3n + 2) { margin-left:inherit;}

	#community-pane .community-card {width: 47%; margin: 8px 5px; }
	#community-pane a:nth-child(1n) .community-card {float:left; margin: 8px 5px;} 
	#community-pane a:nth-child(2n) .community-card {float:right;} 

	#contact-pane .wrapper {text-align: center;}
	#contact-pane input, #contact-pane textarea {width:92%;}

} /*///////////////////////////////////////////////////////////*/


/* | NICE TO HAVE | >768px AND <1024px Rule for Landscape iPads and Big Tablets | */
@media screen and (max-width: 1070px) {


	/** {background:orange;}*/

	.wrapper {width:90%;}
	#overview-pane, #testimonial-pane, #services-pane, #community-pane, #contact-pane {background-size:cover; -webkit-background-size: length_x length_y;} 

	/* /////////////////////////////////////////////////////////// */
	#overview-pane #overview-pattern #overview-gradient #global-bar #logo {width: 150px;}

	#info-callout.scrolled {
		z-index:800;
		top: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height:80px !important;
		padding-top:30px !important;
		background-color: #141414 !important;
		text-align: right;
		/*font-size: 1.5em;*/
		font-weight: 300;
		padding-right: 20px;
	}

	#overview-pane #overview-pattern #overview-gradient #global-bar.scrolled {top:80px;	height:40px;}

	#overview-pane #overview-pattern #overview-gradient #global-bar.scrolled #logo {z-index: 9900; top: 15px; left: 25px;}
	#overview-pane #overview-pattern #overview-gradient #global-bar.scrolled #global-nav {left: 10px; width: 100%;}
	/* /////////////////////////////////////////////////////////// */

	#community-pane .community-card {width: 31%; }
	#community-pane a:nth-child(3n) .community-card {margin-left:10px;} 
	#community-pane a:nth-child(3n+1) .community-card {float:left;} 


} /*///////////////////////////////////////////////////////////*/






/* | NICE TO HAVE | >1024px Rule for Wide-Design Desktops | */
@media screen and (min-width: 1024px) {


/** {background:green;}*/


} /*///////////////////////////////////////////////////////////*/

/* /////  MOBILE CLASSES ///// */

.mobile {}

.mobile #about-block {width:auto;}
.mobile #about-block h1 {
	line-height: 1em;
	font-size:1.25em !important;
	padding: 0 10px 20px;

}

.mobile #testimonial-indicator {font-size:3em !important;}

.mobile #testimonial-indicator span {
	margin:0 5px;
	background-color:#a94f52;
	height:35px;
	width:35px;
	text-indent:-99999px;
	border-radius: 17.5px;
}

.mobile #testimonial-indicator span.selected {background-color:#EEE;}

.mobile #services-pane #services-pattern {padding-bottom: 50px;}


@media screen and (max-width: 630px) {


.mobile #services-pane #services-pattern #service-card-wrapper .service-card.small,
.mobile #services-pane #services-pattern #service-card-wrapper .service-card {
	height: auto; 
	width:auto; 
	clear:both; 
	float:none; 
	margin:10px; 
	padding-bottom:20px;
}



} /*///////////////////////////////////////////////////////////*/