/* MAIN STYLES
 *************************************************************************************************/


/* HEADER
 *************************************************************************************************/
#header-wrap { box-shadow: 0 0 4px 4px rgba(0,0,0,0.1); }


#header .content { padding-bottom: 0; padding-top: 0; }

#nav-top { position: relative; zoom: 1; }
#nav-top::before { content: '\0020'; display: block; height: 0; visibility: hidden; }
#nav-top::after { clear: both; content: '\0020'; display: block; height: 0; visibility: hidden; }
#nav-top > ul:first-child > li > a { font-weight: 500; }

#logo { padding: 10px 0; width: 240px; }
#logo svg { fill: #f4f3f5; max-height: 62px; max-width: 240px; }

#nav-main { float: none; text-align: center; width: 100%; }
#nav-main > ul > li > a { padding: 0.556em; text-transform: uppercase; }
#nav-main > ul > li > a.home-icon { padding-bottom: 0.8em; padding-top: 0.8em; }

#nav-main > ul > li > a::after { background: #fff; bottom: 0; content: ''; display: block; height: 0; left: 0; position: absolute; right: 0; transition: all .35s; }

#nav-main > ul > li > a:hover::after,
#nav-main > ul > li.sfHover > a::after,
#nav-main > ul > li.current-menu-item > a::after,
#nav-main > ul > li.current-menu-ancestor > a::after,
#nav-main > ul > li.current-menu-parent > a::after,
.post-type-archive-rouwberichten #nav-main > ul > li.nav-page-id-82 > a::after,
.page-template-online-condoleren #nav-main > ul > li.nav-page-id-82 > a::after { background: #787a77; height: 3px; }

#nav-main ul.sf-menu li:hover > ul { box-shadow: 0 0 4px rgba(0,0,0,0.2); padding: 2px; }
#nav-main ul.sf-menu li:hover > ul li + li { padding-top: 2px; }


/* SLIDER
 *************************************************************************************************/
.slider-wrap { border-bottom: 3px solid #2d394e; }
.slider-wrap .overlay-wrap { font-size: 20px; text-shadow: 2px 2px 2px rgba(0,0,0,0.25); }


/* CTA TELEFOON
 *************************************************************************************************/
.cta-wrap.telefoon { background: #f4f3f5; box-shadow: 0 4px 2px -2px rgba(0,0,0,0.1); text-align: center; }
.cta-wrap.telefoon .content { color: #2d394e; padding-bottom: 10px; padding-top: 10px; }
.cta-wrap.telefoon a { text-decoration: none; }


/* CONTENT 
 *************************************************************************************************/
.entry-title { font-weight: inherit; text-transform: uppercase; }

.gallery a { background-size: contain; }


/* MASONRY
 *************************************************************************************************/
.masonry .content { bottom: 15%; top: auto; }
.masonry .content h3 { margin: 0; }
.masonry .content h3::after,
.masonry .content h3 + * { display: none; }


/* CTA BEGELEIDEN
 *************************************************************************************************/
.cta-wrap.begeleiden { background-position: center 75%; border-bottom: 3px solid #2d394e; }
.cta-wrap.begeleiden .content { background: rgba(0,0,0,0.25); color: #fff; float: right; padding: 5%; width: 400px; }
.cta-wrap.begeleiden .content p { text-align: center; }


/* FOOTER 
*************************************************************************************************/
#footer-widget-area { margin-bottom: 0; }
#footer-widget-area .widget { margin-top: 0 !important; }

.om-widget-svg { padding-top: 3.75%; text-align: right; }
.om-widget-svg svg { fill: #f4f3f5; max-height: 93px; max-width: 360px; }


.om-widget-hcard > h3 { display: none; }
.om-widget-hcard h2 { font-size: inherit; font-weight: inherit; padding-bottom: 0; }
.om-widget-hcard .hcard-wrap { padding-top: 0; }
.om-widget-hcard .vcard { margin-bottom: 0; }

.om-widget-hcard .hcard-wrap .tel + .tel,
.om-widget-hcard .hcard-wrap .email-wrap { margin-top: 0; }

.om-widget-hcard .hcard-wrap .tel::before { content: 'Tel.:'; margin-right: 0.333em; }
.om-widget-hcard .hcard-wrap .tel + .tel::before { content: 'GSM:'; }


/* FRONT PAGE
 *************************************************************************************************/
.home .content-wrap > .content { padding-bottom: 7.5%; padding-top: 7.5%; text-align: center; }


/* ROUWBERICHTEN
 *************************************************************************************************/
.rouwberichten .rouwbericht aside p.bloemen-info { font-size: inherit; }


/* ROUTEBESCHRIJVING
 *************************************************************************************************/
.get-directions-wrap { box-shadow: 0 4px 2px -2px rgba(0,0,0,0.1); }


/* MEDIA QUERIES 
*************************************************************************************************/
@media only screen and ( min-width: 1000px ) {
	#header-top { height: 82px; position: static; }
	#header { position: static; }
	
	#nav-top { padding-bottom: 0; padding-top: 22px; z-index: 100; }
	#nav-top > ul { float: right; }
	
	#logo { float: none; position: absolute; top: 0; z-index: 200; }
}

@media only screen and ( max-width: 1200px ) {
	#header { padding: 0; }
}

@media only screen and ( max-width: 1000px ) {
	#nav-top { text-align: center; }
	#nav-top > ul { display: inline; }
	#nav-top > ul + ul { margin-left: 10px; }

	#logo svg { fill: #2d394e; }
	
	ul.bloemen-bestellen li { width: 50%; }
}

@media only screen and ( max-width: 768px ) {
	.masonry.resp-h .content { display: block; }
	
	#nav-footer a { font-size: 14px; }
	/*
	.rouwberichten-archive > article { float: none; margin-bottom: 1em; margin-left: 0 !important; width: 100%; }
	.rouwberichten-archive .entry-content { min-height: 0; padding: 40px 5px 20px; }
	*/
	.get-directions label { display: block; margin: 0 0 5px; }
}

@media only screen and ( max-width: 640px ) {
	.om-widget-svg { padding-top: 0; text-align: center; }
}

@media only screen and ( max-width: 520px ) {
	#header .content { padding: 0 20px; }
	#logo { width: 50%; }
	
	.get-directions { text-align: center; }
	.get-directions .om-field { display: block; margin: 0 0 5px !important; width: 100%; }
}

@media only screen and ( max-width: 480px ) {
	#nav-footer a { font-size: 12px; }
	/*
	.rouwberichten-archive .datums > span { display: block; font-size: 0; line-height: 0; width: 100%; }
	
	ul.bloemen-bestellen li { float: none; width: 100%; }
*/
}

@media only screen and ( max-width: 420px ) {
	/*.masonry.resp-h .content { display: none; }*/
}

@media only screen and ( max-width: 400px ) {
	.cta-wrap.begeleiden .content { float: none; width: 100%; }
}

@media only screen and ( max-width: 360px ) {
	#nav-top > ul:first-child { display: none; }
	#nav-top > ul + ul { margin-left: 0; }
}