/*
##################################################
# Project ID    : 20150217-114
# Reference     : Roskam
# Latest update : February 23, 2015
##################################################
*/

/* #Site Styles
================================================== */

@import url(//fonts.googleapis.com/css?family=Roboto:400,500,700);
/* ### general ### */
* { margin: 0px; padding: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html, body { font-family: 'Roboto', sans-serif; font-size: 12px; color: #000; }
input, select, textarea { font-family: 'Roboto', sans-serif; font-size: 12px; color: #000; }
body { background: #fff;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}
img { border: 0px; display: block; }
ul, li { list-style: none; }
:focus { outline: none; }

/* ### global classes ### */
.clear { clear: both; visibility: hidden; line-height: 0; height: 0; }
.center { margin: 0 auto; max-width: 940px; position: relative; }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; }

/* ### main container ### */
#mainCntr { width: 100%; }
	
	/* ### header container ### */
	#headerCntr { position: relative; width: 100%; height: 111px; background: url(/images/header_bg.png) repeat-x 0 bottom; z-index: 100; }
	#headerCntr .logo { position: absolute; top: 52px; left: -1px; }
	#headerCntr .logo img { max-width: 100%; }

		/* ### menu box ### */
		#headerCntr .menuBox { position: absolute; top: 54px; right: 0; }
		#headerCntr .menuBox li { float: left; font-size: 14px; font-weight: 500; position: relative; }
		#headerCntr .menuBox li a { display: block; text-decoration: none; padding: 0 16px; line-height: 40px; color: #347789; }
		#headerCntr .menuBox li a:hover, #headerCntr .menuBox li:hover > a { background: #347789; color: #fff; }
		#headerCntr .menuBox li a span { display: block; background: url(/images/arrow1.png) no-repeat center bottom;  }
		#headerCntr .menuBox li ul { display: none; position: absolute; top: 40px; left: 0; width: 206px; background: #347789; padding: 0 0 0 16px; } 
		#headerCntr .menuBox li li { float: none; }
		#headerCntr .menuBox li li a { line-height: 35px; color: #fff; padding: 0; }
		#headerCntr .menuBox li li a:hover { text-decoration: underline; }
		#headerCntr .menuBox li:hover ul { display: block; }
		.mobileMenu { display: none; }
	
	/* ### banner container ### */
	#bannerCntr { width: 100%; position: relative; overflow: hidden; height: 426px; z-index: 99; }
	#bannerCntr img { min-height: 100%; height: auto!important; height: 100%; min-width: 100%; width: auto!important; width: 100%;  position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; }
	#bannerCntr .inner { position: absolute; top: 0; left: 50%; width: 940px; margin-left: -470px; }
	#bannerCntr .center { height: 426px; }
	#bannerCntr .text { position: absolute; bottom: 42px; left: 0; width: 49%; padding: 18px 22px; background: rgba(0,0,0,0.65); z-index: 1000; }
	#bannerCntr .text p { color: #fff; font-size: 14px; line-height: 30px; }
	
	/* ### content container ### */
	#contentCntr { width: 100%; }
	
		/* ### memorials container ### */
		#memorialsCntr { width: 100%; overflow: hidden; padding: 48px 0; }
		
			/* ### memorials box ### */
			.memorialsBox { width: 64%; float: left; }
			.memorialsBox h1 { color: #347789; font-size: 18px; font-weight: 500; margin-bottom: 8px; }
			.memorialsBox h2 { color: #347789; font-size: 24px; font-weight: 500; margin-bottom: 24px; }
			.memorialsBox p { color: #404043; font-size: 14px; line-height: 30px; margin-bottom: 22px; }
			.memorialsBox ul { overflow: hidden; margin-right: -21px; }
			.memorialsBox li { float: left; padding-right: 21px; width: 50%; margin-bottom: 22px; }
			.memorialsBox .photo { width: 100%; position: relative; }
			.memorialsBox .photo img { width: 100%; } 
			.memorialsBox .photo a { display: block; text-decoration: none; }
			.memorialsBox .photo span { width: 100%; display: block; bottom: 0; left: 0; position: absolute; background: rgba(0,0,0,0.6); line-height: 40px; padding-left: 14px; color: #fff; font-size: 14px; z-index: 100; }
			
			/* ### person box ### */
			.personBox { float: right; width: 34%; margin-top: 28px; background: #d6e4e7; padding: 13px 16px 50px 15px; min-height: 732px; position: relative; }
			.personBox h2 { color: #347789; font-size: 18px; margin-bottom: 7px; }
			.personBox p { color: #3e3d40; font-size: 14px; line-height: 30px; }
			.personBox a, a:visited { text-decoration: none; color: #3e3d40; }
			
			/* ### gravestones box ### */
			.gravestonesBox { width: 25%; float: right; margin-top: 8px; }
			.gravestonesBox h3 { color: #347789; font-size: 18px; margin-bottom: 22px; }
			.gravestonesBox li { font-size: 14px; line-height: 30px; background: url(/images/arrow2.png) no-repeat left; padding-left: 16px; }
			.gravestonesBox li a { color: #404043; text-decoration: none; }
			.gravestonesBox li a:hover { text-decoration: underline; }
			.gravestonesBox a.back { margin-top: 19px; display: inline-block; padding: 0 12px 0 10px; background: #347789; line-height: 33px; text-decoration: none; font-size: 14px; font-weight: bold; color: #fff; cursor: pointer; }
			.gravestonesBox a.back img { display: inline; vertical-align: middle; margin-right: 8px; }
			.gravestonesBox a.back:hover { text-decoration: underline; }
	
	/* ### bottom container ### */
	#bottomCntr { width: 100%; background: #347789; padding: 22px 0 70px 0; }
	#bottomCntr .col1 { width: 25%; float: left; }
	#bottomCntr .col2 { width: 35%; float: left; padding-right: 60px; }
	#bottomCntr .col3 { width: 15%; float: left; }
	#bottomCntr .col4 { width: 25%; float: left; }
	#bottomCntr h3 { color: #fff; font-size: 14px; margin-bottom: 14px; }
	#bottomCntr ul.links li { line-height: 25px; font-size: 14px; }
	#bottomCntr ul.links li a { color: #fff; }
	#bottomCntr ul.links li a:hover { text-decoration: none; }
	#bottomCntr fieldset { border: 0; margin-top: 5px; }
	#bottomCntr input.field { border: 0; background: #fff; width: 100%; height: 38px; line-height: 38px; padding: 0 11px; color: #3e3d40; font-size: 14px; margin-bottom: 12px; }
	#bottomCntr input.button { border: 1px solid #fff; background: none; width: 86px; height: 33px; cursor: pointer; color: #fff; font-size: 14px; font-weight: bold; }
	#bottomCntr ul.social { margin-top: 5px; overflow: hidden; }
	#bottomCntr ul.social li { float: left; margin-right: 12px; }
	#bottomCntr address { color: #fff; font-size: 14px; line-height: 25px; font-style: normal; }
	#bottomCntr address a { color: #fff; }
	#bottomCntr address a:hover { text-decoration: none; }
	
	/* ### footer container ### */
	#footerCntr { overflow: hidden; padding: 20px 0 40px 0; width: 100%; }
	#footerCntr p { float: left; color: #3e3d40; font-size: 13px; }
	#footerCntr p a { color: #3e3d40; text-decoration: none; }
	#footerCntr p.right { float: right; }

/* #Media Queries
================================================== */
@media only screen and (max-width: 939px) {
	
	#headerCntr .logo { left: 8px; }
	
	#headerCntr .menuBox { right: 8px; top: 51px; }
	#headerCntr .menuBox li a { padding: 0 12px; }
	
	#bannerCntr .inner { left: 8px; width: 100%; margin-left: 0; }
	
	.center { padding: 0 8px; }
	
	.memorialsBox { width: 63.5%; }
	.memorialsBox li { padding-right: 16px; }
	.memorialsBox ul { margin-right: -16px; }
	
	.personBox img { width: 243px; }
	
	#bottomCntr .col2 { width: 32%; padding-right: 35px; }
	#bottomCntr .col4 { width: 28%; }
	
	.gravestonesBox { float: none; margin-top: 12px; width: 100%; }
	
}

@media only screen and (max-width: 767px) {
	
	#headerCntr .menuBox { display: none; }
	.mobileMenu { display: block; position: absolute; top: 0; right: 0; }
	
	#bannerCntr .text { width: 80%; }
	#bannerCntr .center { height: 320px; }
	#bannerCntr { height: 320px; }
	
	.memorialsBox { float: none; width: 100%; }
	
	.personBox { float: none; width: 100%; min-height: 570px; }
	.personBox img { width: 243px; }
	
	#bottomCntr .col1 { width: 50%; float: left; margin-bottom: 30px; }
	#bottomCntr .col2 { width: 50%; float: left; margin-bottom: 30px; }
	#bottomCntr .col3 { width: 50%; float: left; }
	#bottomCntr .col4 { width: 50%; float: left; }
	
	#headerCntr { height: 90px; }
	#headerCntr .logo  { top: 26px; }
	
}

@media only screen and (max-width: 499px) {
	
	
	#bannerCntr .text { width: 95%; bottom: 20px; }
	#bannerCntr .text p span { display: none; }
	#bannerCntr .center { height: 356px; }
	#bannerCntr { height: 370px; }
	
	.memorialsBox li { padding-right: 0; width: 100%; float: none; }
	.memorialsBox ul { margin-right: 0; }
	
	.personBox { min-height: 600px; }
	.personBox img { width: 243px; }
	
	#bottomCntr .col1 { width: 100%; float: none; margin-bottom: 30px; }
	#bottomCntr .col2 { width: 100%; float: none; margin-bottom: 30px; }
	#bottomCntr .col3 { width: 100%; float: none; margin-bottom: 30px; }
	#bottomCntr .col4 { width: 100%; float: none; }
	
	#footerCntr p { font-size: 12px; }
	
	
}