body {
	font-family: 'Source Serif Pro', serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 21px;
	letter-spacing: -0.11px;
	color: #4A4A4A;
}



/* FONT STYLES 
======================================================== */

h1, h2, h3, h4, h5 {
	font-family: 'Source Serif Pro', serif;
	font-weight: 600;
	letter-spacing: -0.23px;	
	color: #212121;
}

h1, h2 { font-size: 28px; line-height: 30px; }
h3 { font-size: 21px; line-height: 21px; }
h4 { font-size: 16px; line-height: 16px; }

h1 small, h2 small, h3 small, h4 small { font-weight: 400; color: #E84910; display: block; letter-spacing: -0.30px; margin-top: 4px; }
h1 small, h2 small { font-size: 18px; line-height: 21px; padding-bottom: 8px; }
h3 small { font-size: 16px; line-height: 16px;  }
h4 small { font-size: 13px; line-height: 14px;  }

p {
	font-family: 'Source Serif Pro', serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -0.11;
	color: #4A4A4A;	
}

/* font-family: 'Source Sans Pro', sans-serif; */




/* COLORS STYLES 
======================================================== */

.bgBrand { background-color: #E84910 !important; }
.bgDark{ background-color: #4A4A4A !important; }
.brand { color: #E84910 !important; }
.dark { color: #212121 !important; }
.grey { color: #4A4A4A !important;}
.white { color: #FFFFFF !important; }



/* SMALL ELEMENTS 
======================================================== */
.graveBagde {
	width: 32px;
	height: 32px;
	padding: 8px;
	padding-bottom: 8px;
	
	border-radius: 32px;
	background-color: #E84910;
	color: #FFFFFF;
	
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	font-size: 14px; line-height: 14px;
	text-align: center;
	
}



/* BUTTON STYLES 
======================================================== */
a.btn:hover,
a.btn:visited,
a.btn:link,
a.btn,
.btn {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	font-size: 16px;
	letter-spacing: -0.1px;
	color: #4A4A4A;
	text-decoration: none; 

	padding: 8px 25px; 
	padding-bottom: 10px;

	background-color: #FFFFFF;
	border-radius: 8px;
	border: none; 
	box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.25);
	
	cursor: pointer; 
}


.btnImg,
a.btnImg,
a.btnImg:link,
a.btnImg:visited,
a.btnImg:hover {
	background-repeat: no-repeat;
	padding-right: 64px;
	padding-left: 24px;
	background-position: calc(100% - 16px) 18px;
}

.downArr { background-image: url('../images/arrowDown.png'); }
.rightArr { background-image: url('../images/arrowRight.png'); }
a.downChev, .downChev { background-image: url('../images/chevronDown.png');  }
.rightChev { background-image: url('../images/chevronRight.png'); }

a.btn.btnImg.phoneCall, 
a.btn.btnImg.phoneCall:link, 
a.btn.btnImg.phoneCall:hover, 
a.btn.btnImg.phoneCall:visited { background-image: url('../images/iconCall.png'); background-position: calc(100% - 16px) 13px; }

a.btn.btnImg.webSite,
a.btn.btnImg.webSite:link,
a.btn.btnImg.webSite:visited,
a.btn.btnImg.webSite:hover
 { background-image: url('../images/iconGlobe.png'); background-position: calc(100% - 16px) 13px; }


.btn.btnImg.info,
a.btn.btnImg.info,
a.btn.btnImg.info:link,
a.btn.btnImg.info:visited,
a.btn.btnImg.info:hover
 { background-image: url('../images/iconInfo.png'); background-position: calc(100% - 16px) 10px; }


a.btnBrand:hover,
a.btnBrand:visited,
a.btnBrand:link,
a.btnBrand,
.btnBrand {
	color: #FFFFFF;
	background-color: #E84910 !important; 
}


a.btnBlack:hover,
a.btnBlack:visited,
a.btnBlack:link,
a.btnBlack,
.btnBlack {
	color: #FFFFFF;
	background-color: #212121 !important; 
}

.btnClose,
.graveYardMapOpener {
	background-image: url('../images/city_pin_icon.png'); background-position: calc(100% - 12px) 16px;
	padding-top: 32px;
	padding-bottom: 32px;
	padding-right: 72px;
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 64px; 
	box-shadow: none;
	border: none; 
}

.btnClose { min-height: 32px; background-image: url('../images/iconClose.png'); background-size: 32px; padding-top: 4px; padding-bottom: 4px; }

button.navbar-toggler { border: none; background-color: #FFFFFF; }


/* GENERAL GAP STYLES 
======================================================== */

.ugp8 { margin-top: 8px; }
.ugp12 { margin-top: 12px; }
.ugp16 { margin-top: 16px; }
.ugp24 { margin-top: 24px; }
.ugp32 { margin-top: 32px; }
.ugp56 { margin-top: 56px; }
.ugp88 { margin-top: 88px; }
.ugp128 { margin-top: 128px; }




/* GENERAL GRID STYLES 
======================================================== */
.text-right { text-align: right; }
.contentPanel { margin: 0px 16px;}

.col-33 { position: relative; display: inline; float: left; width: 34%; }
.col-6 { position: relative; display: inline; float: left; width: 50%; }
.col-66 { position: relative; display: inline; float: left; width: 66%; }



/* INTERACTION ELEMENTS 
======================================================== */


.startOpener,
.menuOpener {
	cursor: pointer;
}

.mapOpener {
	cursor: pointer;
}

.graveTabChanger {
	cursor: pointer; 
}

.graveyardOpener,
.graveOpener {
	cursor: pointer; 
}

.contentOpener, .contentCloser {
	cursor: pointer; 
}




/* GENERAL ELEMENTS ////## CITY OVERVIEW & START PAGE
======================================================== */

#cityOverView {
	display: block;
	position: absolute;
	width: 100%;
	min-height: 6500px;
	padding-bottom: 64px; 
	
	background-color: #FFFFFF;
	z-index: 1000;
}


/* GENERAL ELEMENTS ////## GRAVEYARD PANELS
======================================================== */

.graveyardIntroTextPreview {
	display: block;
	width: 100%;
	height: 180px; 
	overflow: hidden;
	z-index: 100;
}
.graveyardIntroTextPreview.open { height: auto; padding-bottom: 12px; }

.graveyardIntroTextPreviewOverlay {
	display: block;
	position: relative;
	width: 100%;
	height: 56px; 
	overflow: hidden;
	margin-top: -56px;
	background-image: url('../images/readmoreOverlay.png');
	background-position: center bottom;
	background-repeat: repeat-x;
	z-index: 101;
}

/* GENERAL ELEMENTS ////## IMAGES & CONTAINER
======================================================== */

.teaserImage,
#graveLeadContainer,
#graveyardLeadContainer {
	position: relative;
	display: block;
	width: 100%;
	height: 320px;
	background-color: #F2F2F2;
	
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}




/* GENERAL ELEMENTS ////## FOOTER NAVIGATION
======================================================== */

#footerNav {
	display: block;
	position: fixed;
	width: 100%;
	height: 88px;
	
	bottom: 0px;
	margin: 0px;
	padding: 0px;
	padding-top: 16px;
	z-index: 3001;	

	background-image: url('../images/BottomNavbar.png');
	background-position: right bottom;
	background-repeat: no-repeat;

}

#fooverMenu {
	position: relative;
	display: inline;
	float: left;
	width: 90%;
	top: 48px; 
	height: 32px;
	overflow: hidden;
}

#fooverMenu ul { margin: 0px; padding: 0px; list-style: none; margin-left: 16px; }
#fooverMenu ul li {	display: inline; float: left; margin: 0px; padding: 0px; margin-right: 24px; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; font-size: 14px; color: #999999; }
#fooverMenu ul li.active { color: #212121;  border-bottom: 2px solid #E84910; }

#footerButtonContentIcon,
#footerButtonIcon {
	position: absolute;
	top: 32px; 
	right: 0px; 

	width: 92px;
	height: 36px;	

	background-image: url('../images/iconMap.png');
	background-repeat: no-repeat;
	background-position: center center;
}

#footerButtonContentIcon,
#footerButtonIcon.mapOpen { background-image: url('../images/iconClose.png'); }

#footerButtonContentIcon { display: none; }


#footerButtonContentText,
#footerButtonText {
	position: absolute;
	display: none;
	width: 92px;
	top: 64px; 
	right: 0px; 
	height: 16px;
	overflow: hidden;
	text-align: center;

	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	font-size: 14px;
}


/* GENERAL ELEMENTS ////## NAVBAR
======================================================== */

#navBar {
	display: block;
	top: 0px;
	height: 56px;
	margin: 0px;
	padding: 0px;
	padding-top: 16px;
	position: fixed;
	z-index: 3000;

	width: 100%;	
	background-color: #FFFFFF;
	border-bottom-right-radius: 24px;
	border-bottom-left-radius: 24px;
	
	box-shadow: 0px 4px 12px 1px rgba(0,0,0,0.5);
	background-image: url('../images/wsr_icon_grey.png');
	background-repeat: no-repeat;
	background-position: calc(100% - 16px) 24px;
	transition: all 0.4s;
}

#navBar.hidden { top: -120px; transition: all 0.75s; }

#menuBar {
	top: 0px;
	width: 32px;
	height: 32px;
	margin: 14px 20px;
	padding: 0px;
	position: relative;
	
	background-image: url('../images/menuBar.png');
	background-repeat: no-repeat;
	background-position: left middle;
}

h3.graveyardOpener {
	border-top: 1px dotted #EFEFEF;
	padding-top: 20px;
	padding-bottom: 8px; 
	line-height: 26px;
}
ul.mainMenu {
	display: block;
	width: 100%;
	margin: 0px;
	padding: 0px;
	
	margin-top: 64px;
	list-style: none;
	text-align: center;	
}

ul.metaMenu li {
	margin-top: 12px;
	display: block;
	width: 100%; 
	list-style: none;
	color: #FFFFFF !important;
	font-size: 24px;
	text-align: center;
}

ul.metaMenu {
	display: block;
	width: 100%;
	margin: 0px;
	padding: 0px;
	
	margin-top: 240px;
	list-style: none;
	text-align: center;
}

ul.metaMenu li {
	margin-top: 12px;
	display: block;
	width: 100%; 
	list-style: none;
	color: #FFFFFF;
	font-size: 16px;
	text-align: center;
}

ul.metaMenu li a,
ul.metaMenu li a:link,
ul.metaMenu li a:visited,
ul.metaMenu li a:hover { 
	text-decoration: none;
	color: #FFFFFF;
}



/* GENERAL ELEMENTS ////## GRAVE & CONTENT OVERLAYS
======================================================== */
.contentOverlayBackground {
	display: block;
	display: none;
	position: fixed;
	top: 0px;
	width: 100%;	
	height: 100%;

	margin: 0px;
	padding: 0px;
	z-index: 2500;

	background-color: #F2f2F2;
	background-image: url('../images/wsr_icon_brand.png');
	background-repeat: no-repeat;
	background-position: calc(100% - 32px) 32px;	
}

#articleContentPanel {
	position: fixed;
	bottom: -500px;
	display: block;
	width: 100%;
	height: 0px;
	
	z-index: 2501;
	transition: all 0.1s;
	opacity: 0;
	overflow: scroll;	
}
#articleContentPanel.visiblePanel { height: calc(100% - 72px); bottom: 0px; opacity: 1; transition: all 0.3s; }


#contentPanel,
#gravePanel {
	position: fixed;
	bottom: -500px;
	display: block;
	width: 100%;
	height: 0px;

	background-color: #FFFFFF;
	border-top-right-radius: 32px;
	border-top-left-radius: 32px;
	box-shadow: 0px -4px 16px 12px rgba(0,0,0,0.3);

	z-index: 2501;
	transition: all 0.1s;
	opacity: 0;
	overflow: scroll;	
}

#gravePanel.visiblePanel,
#contentPanel.visiblePanel { height: calc(100% - 96px); bottom: 0px; opacity: 1; transition: all 0.3s; }

#graveLeadContainer {border-top-left-radius: 0px; border-top-right-radius: 0px; }
h3#graveTitle small { margin-bottom: 4px; }
#gravePersonalImage { 
	width: 105px;
	height: 130px;
	margin-right: 16px;

	background-color: #F2F2F2;
	border-radius: 7px;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;	
	
	box-shadow: 0px 2px 12px 2px rgba(0,0,0,0.15);	
}
#secondGravePerson { padding-bottom: 32px; }
.contentText {
	padding-bottom: 96px;
}

/* GENERAL ELEMENTS ////## MENU
======================================================== */

#menuBackground {
	display: block;
	display: none;
	position: fixed;
	top: 0px;
	width: 100%;	
	height: 100%;

	margin: 0px;
	padding: 0px;
	z-index: 3000;

	background-color: #F2f2F2;
	background-image: url('../images/wsr_icon_brand.png');
	background-repeat: no-repeat;
	background-position: center 32px;
}

#menuPanel {
	position: fixed;
	bottom: -500px;
	display: block;
	width: 100%;
	height: 0px;

	background-color: #4A4A4A;
	border-top-right-radius: 32px;
	border-top-left-radius: 32px;
	box-shadow: 0px -4px 16px 12px rgba(0,0,0,0.3);

	z-index: 3001;
	transition: all 0.1s;
	opacity: 0;
	overflow: scroll;
}

#menuPanel.visibleMenu { height: calc(100% - 96px); bottom: 0px; opacity: 1; transition: all 0.3s; }




/* GENERAL ELEMENTS ////## MAP STYLES SETTINGS
======================================================== */
.mapCloser {
	position: absolute;
	top: 24px;
	right: 24px;	
	z-index: 10000;
}

#mapPanel {
	display: block;
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	z-index: 2000;
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
}

#graveYardMap { width: 100%; height: 100%; position: relative; background-color: #EFEFEF; }


.mapPrevImage {
	display: block;
	width: 100%;
	height: 128px;
	
	margin-bottom: 8px;
	margin-top: 12px;
	border-radius: 0px;
	
	background-color: #EFEFEF;
	background-size: cover;
	background-position: center center;	
}


.leaflet-container a.leaflet-popup-close-button { top: 2px; right: 4px; color: #000000;}
.leaflet-popup-content-wrapper {
	border-radius: 1px;
}


.leaflet-popup-content-wrapper, .leaflet-popup-tip {
	box-shadow: none;
}
.leaflet-popup-content {width: 200px; overflow: hidden; margin: 10px; margin-top: 16px; }
.leaflet-popup-content h3 {
	display: block;
	font-size: 18px;
	margin-top: 10px;
	line-height: 19px;
}

.leaflet-popup-content h3 small {
	display: block;
	margin-top: 6px;
	font-size: 16px;
}

.leaflet-popup-content img {width: 100%; display: block; margin-bottom: 10px;}
.leaflet-container a, .leaflet-popup-content a:link, .leaflet-popup-content a:visited, .leaflet-popup-content a:hover { color: #6BFBA4; text-decoration: none; }

.leaflet-container a { color: #4a4a4a; text-decoration: none;  }

.leaflet-popup-content-wrapper { background-color: #FFFFFF; box-shadow: 0px 3px 16px 3px rgba(0,0,0,0.35);}
.leaflet-popup-tip { background-color: #FFFFFF; }

.leaflet-touch .leaflet-bar, .leaflet-bar {
	background: transparent;
	background-color: none;
	box-shadow: none;
	border-radius: 0px;	
	height: auto;
	padding-bottom: 0px;
	border: 0px; 
	margin-right: 8px;
}

.leaflet-container .leaflet-control-attribution {
	background-color: none;
	background: transparent;
	padding-right: 20px;
	opacity: 0.5;
}

.leaflet-bar a:last-child,
.leaflet-bar a:first-child,
.leaflet-touch .leaflet-bar a:last-child,
.leaflet-touch .leaflet-bar a:first-child {
	border-radius: 50%;
	box-shadow: none;
	border-bottom: 2px solid #FFFFFF;
}


a.leaflet-control-zoom-out:hover, a.leaflet-control-zoom-out:visited, a.leaflet-control-zoom-out,
a.leaflet-control-zoom-in:hover, a.leaflet-control-zoom-in:visited, a.leaflet-control-zoom-in,
.leaflet-touch a.leaflet-control-zoom-out:hover, .leaflet-touch a.leaflet-control-zoom-out:visited, .leaflet-touch a.leaflet-control-zoom-out,
.leaflet-touch a.leaflet-control-zoom-in:hover, .leaflet-touch a.leaflet-control-zoom-in:visited, .leaflet-touch a.leaflet-control-zoom-in {
	background: transparent;
	background-color: none;
	color: #E84910;
	border: 2px solid #FFFFFF;
	border-radius: 50%;
	padding: 0px;
	font-size: 27px;
	margin-bottom: 10px;
	margin-right: 11px;
	margin-left: -3px;
	background-color: #FFFFFF;
	
	width: 42px;
	height: 42px;
	padding-top: 2px;
	padding-right: 1px;
	display: block;
	box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.35) !important;
	
}






/* GENERAL ELEMENTS ////## SLICK SLIDER
======================================================== */
.graveListContainerWrapper {
	margin-top: 56px;
	width: 100%;
	overflow: hidden;
}

.graveListContainerWrapper h3 { margin-left: 0px; margin-bottom: 12px; }

.graveListContainer {
	overflow: hidden;
}

.graveList {
	width: 100%;
	overflow: hidden;
}

.slick-track { left: 0px; right: 0px;  }

.graveCard {
	width: 260px;
	height: auto; 
	margin-right: 16px;
	
}

.gravePrevImage {
	display: block;
	width: 100%;
	height: 240px;
	
	margin-bottom: 8px;
	
	border-radius: 12px;
	
	background-color: #EFEFEF;
	background-size: cover;
	background-position: center center;	
}

.gravePrevImage .graveBagde { margin: 8px; position: absolute; }


.lastSlideSpacer {
	margin-right: 16px;
	height: 20px;
	width: 240px;
}