/* BODY OVERLAY */
.body_before_1::before {
	background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 200px, transparent 100%);
}
.body_before_2::before {
	background-image: linear-gradient(45deg, transparent 25%, rgba(0,0,0,0.1) 25%, rgba(0,0,0,0.1) 50%, transparent 50%, transparent 75%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0.1) 100%);
	background-size: 200px 200px;
}
.body_before_3::before {
	background-image: linear-gradient(135deg, transparent 25%, rgba(0,0,0,0.1) 25%, rgba(0,0,0,0.1) 50%, transparent 50%, transparent 75%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0.1) 100%);
	background-size: 200px 200px;
}
.body_before_4::before {

  --s: 32px; /* control the size*/
  --c1: var(--theme_background_1);
  --c2: var(--body_background);
  
  --_c1: var(--c1) 99%,#0000 101%;
  --_c2: var(--c2) 99%,#0000 101%;
  
  --r:calc(var(--s)*.866); 
  --g0:radial-gradient(var(--s),var(--_c1));
  --g1:radial-gradient(var(--s),var(--_c2));
  --f:radial-gradient(var(--s) at calc(100% + var(--r)) 50%,var(--_c1));
  --p:radial-gradient(var(--s) at 100% 50%,var(--_c2));
  background:
    var(--f) 0 calc(-5*var(--s)/2),
    var(--f) calc(-2*var(--r)) calc(var(--s)/2),
    var(--p) 0 calc(-2*var(--s)),
    var(--g0) var(--r) calc(-5*var(--s)/2),
    var(--g1) var(--r) calc( 5*var(--s)/2),
    radial-gradient(var(--s) at 100% 100%,var(--_c1)) 0 calc(-1*var(--s)),   
    radial-gradient(var(--s) at 0%   50% ,var(--_c1)) 0 calc(-4*var(--s)),
    var(--g1) calc(-1*var(--r)) calc(-7*var(--s)/2),
    var(--g0) calc(-1*var(--r)) calc(-5*var(--s)/2),
    var(--p) calc(-2*var(--r)) var(--s),
    var(--g0) calc(-1*var(--r)) calc(var(--s)/ 2),
    var(--g1) calc(-1*var(--r)) calc(var(--s)/-2),
    var(--g0) 0 calc(-1*var(--s)),
    var(--g1) var(--r) calc(var(--s)/-2),
    var(--g0) var(--r) calc(var(--s)/ 2) 
    var(--c2);
  background-size: calc(4*var(--r)) calc(6*var(--s));

}

.body_before_5::before {
  --s: 220px; /* control the size*/
  --c1: rgba(0,0,0,.05);
  --c2: var(--body_background);
  
  --_g:radial-gradient(#0000 60%,var(--c1) 61% 63%,#0000 64% 77%,var(--c1) 78% 80%,#0000 81%);
  --_c:,#0000 75%,var(--c2) 0;
  background:
    conic-gradient(at 12% 20% var(--_c)) calc(var(--s)* .44) calc(.9*var(--s)),
    conic-gradient(at 12% 20% var(--_c)) calc(var(--s)*-.06) calc(.4*var(--s)),
    conic-gradient(at 20% 12% var(--_c)) calc(.9*var(--s)) calc(var(--s)* .44),
    conic-gradient(at 20% 12% var(--_c)) calc(.4*var(--s)) calc(var(--s)*-.06),
    var(--_g),var(--_g) calc(var(--s)/2) calc(var(--s)/2) var(--c2);
  background-size: var(--s) var(--s);
}


/* HORIZONTAL RULES */

.hr_1 hr {
	background: var(--theme_background_1);
	border: 0;
	height: .4rem;
	border-radius: 3px;
}
.hr_2 hr {
	background: var(--theme_background_2);
	border: 0;
	height: .4rem;
	border-radius: 3px;
}
.hr_3 hr {
	background: var(--theme_background_3);
	border: 0;
	height: .4rem;
	border-radius: 3px;
}
.hr_4 hr {
	border:0;
	border-top:dashed 1px;
}
.hr_5 hr {
	border:0;
	border-top:dashed 3px;
}
.hr_6 hr {
	background: var(--theme_background_1);
	border: 0;
	height: .4rem;
	border-radius: 3px;
	position:relative;
	overflow:visible;
}
	.hr_6 hr::before {
		content: '';
		background: var(--theme_background_1);
		position:absolute;
		left:-1px;
		top:-0.25rem;
		width:1rem;
		height:1rem;
		border-radius:50%;
	}
	.hr_6 hr::after {
		content: '';
		background: var(--theme_background_1);
		position:absolute;
		right:-1px;
		top:-0.25rem;
		width:1rem;
		height:1rem;
		border-radius:50%;
	}
.hr_7 hr {
	background: var(--theme_background_2);
	border: 0;
	height: .4rem;
	border-radius: 3px;
	position:relative;
	overflow:visible;
}
	.hr_7 hr::before {
		content: '';
		background: var(--theme_background_2);
		position:absolute;
		left:-1px;
		top:-0.25rem;
		width:1rem;
		height:1rem;
		border-radius:50%;
	}
	.hr_7 hr::after {
		content: '';
		background: var(--theme_background_2);
		position:absolute;
		right:-1px;
		top:-0.25rem;
		width:1rem;
		height:1rem;
		border-radius:50%;
	}
.hr_8 hr {
	background: var(--theme_background_3);
	border: 0;
	height: .4rem;
	border-radius: 3px;
	position:relative;
	overflow:visible;
}
	.hr_8 hr::before {
		content: '';
		background: var(--theme_background_3);
		position:absolute;
		left:-1px;
		top:-0.25rem;
		width:1rem;
		height:1rem;
		border-radius:50%;
	}
	.hr_8 hr::after {
		content: '';
		background: var(--theme_background_3);
		position:absolute;
		right:-1px;
		top:-0.25rem;
		width:1rem;
		height:1rem;
		border-radius:50%;
	}

.hr_9 hr {
	overflow: visible;
	border: 3px double var(--theme_background_1);
	text-align: center;
	border-radius:3px;
}	

.hr_10 hr {
	position:relative;
	border: 0;
	height: 1px;
	background: var(--theme_background_1);
	overflow:visible;
}
	.hr_10 hr::before {
		content: "";
		width: 12px;
		height: 12px;
		background: var(--theme_background_1);
		display: inline-block;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		position: absolute;
		top: -5px;
		left: 50%;
		margin: 0 0 0 -3px;
	}

.hr_11 hr {
	border: 0;
	text-align: center;
 }
	.hr_11 hr::before {
		content: "\2022 \2022 \2022 \2022 \2022";
		font-size: 50px;
		color: var(--theme_background_1);
	}


	
.hr_width_110 hr {
	margin-left:-5%;
	margin-right:-5%;
}	
.hr_width_80 hr {
	margin-left:10%;
	margin-right:10%;
}
.hr_width_60 hr {
	margin-left:20%;
	margin-right:20%;
}
.hr_width_40 hr {
	margin-left:30%;
	margin-right:30%;
}
.hr_width_20 hr {
	margin-left:40%;
	margin-right:40%;
}



/* IMAGE BORDERS 
   applied to both img and figure elements with image_border class
*/

.ib_transparent_inset_dark .image_border,
.ib_transparent_inset_dark article section:not(.openstreetmap):not(.directory-map) img:not(.imgnoeffects) {
	outline: rgba(0,0,0,.5) solid 20px;
	outline-offset: -20px;
}
.ib_transparent_inset_light .image_border,
.ib_transparent_inset_light article section:not(.openstreetmap):not(.directory-map) img:not(.imgnoeffects) {
	outline: rgba(255,255,255,.5) solid 20px;
	outline-offset: -20px;
}
.ib_tl_br .image_border,
.ib_tl_br article section:not(.openstreetmap):not(.directory-map) img:not(.imgnoeffects) {
	border-radius: 20% 0% 20% !important;
}
.ib_tr_bl .image_border,
.ib_tr_bl article section:not(.openstreetmap):not(.directory-map) img:not(.imgnoeffects) {
	border-radius: 0% 20% 0% !important;
}
.ib_ellipse .image_border,
.ib_ellipse article section:not(.openstreetmap):not(.directory-map) img:not(.imgnoeffects) {
	border-radius:50%;
}
.ib_sawtooth_big .image_border,
.ib_sawtooth_big article section:not(.openstreetmap):not(.directory-map) img:not(.imgnoeffects) {
	--mask: linear-gradient(#000 0 0) center/calc(100% - 60px) calc(100% - 60px)
		  no-repeat,
		conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 0 0/60px
		  30px space no-repeat,
		conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 0
		  100%/60px 30px space no-repeat,
		conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) 0 0/30px
		  60px no-repeat space,
		conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
		  100% 0/30px 60px no-repeat space;

	  -webkit-mask: var(--mask);
	  mask: var(--mask);
}
.ib_sawtooth_med .image_border,
.ib_sawtooth_med article section:not(.openstreetmap):not(.directory-map) img:not(.imgnoeffects) {
--mask: linear-gradient(#000 0 0) center/calc(100% - 30px) calc(100% - 30px)
	  no-repeat,
	conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 0 0/30px
	  15px space no-repeat,
	conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 0
	  100%/30px 15px space no-repeat,
	conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) 0 0/15px
	  30px no-repeat space,
	conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
	  100% 0/15px 30px no-repeat space;

  -webkit-mask: var(--mask);
  mask: var(--mask);
}
.ib_sawtooth_small .image_border,
.ib_sawtooth_small article section:not(.openstreetmap):not(.directory-map) img:not(.imgnoeffects) {
--mask: linear-gradient(#000 0 0) center/calc(100% - 20px) calc(100% - 20px)
	  no-repeat,
	conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 0 0/20px
	  10px space no-repeat,
	conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 0
	  100%/20px 10px space no-repeat,
	conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) 0 0/10px
	  20px no-repeat space,
	conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
	  100% 0/10px 20px no-repeat space;

  -webkit-mask: var(--mask);
  mask: var(--mask);
}
.ib_sawtooth_xs .image_border,
.ib_sawtooth_xs article section:not(.openstreetmap):not(.directory-map) img:not(.imgnoeffects) {
--mask: linear-gradient(#000 0 0) center/calc(100% - 10px) calc(100% - 10px)
	  no-repeat,
	conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 0 0/10px
	  5px space no-repeat,
	conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 0
	  100%/10px 5px space no-repeat,
	conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) 0 0/5px
	  10px no-repeat space,
	conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
	  100% 0/5px 10px no-repeat space;

  -webkit-mask: var(--mask);
  mask: var(--mask);
}
/* a nice effect, but doesn't work on background images */
.ib_perforations .image_border,
.ib_perforations article section:not(.openstreetmap):not(.directory-map) img:not(.imgnoeffects) {
  --r: 4px; /* control the radius of the circles */
  padding: calc(2*var(--r));
  filter: grayscale(.4) drop-shadow(0 0 1px #0005) drop-shadow(0 0 1px #0005);
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5*var(--r)) calc(-1.5*var(--r)) /calc(3*var(--r)) calc(3*var(--r)),
    linear-gradient(#fff 0 0)  no-repeat
      50%/calc(100% - 3*var(--r)) calc(100% - 3*var(--r));
}
.ib_shadow .image_border,
.ib_shadow article section:not(.openstreetmap):not(.directory-map) img:not(.imgnoeffects) {
	/* box-shadow:0 0 9px 0 rgba(0,0,0,.9); */
	filter: drop-shadow(0 0 4px rgba(0,0,0,.6));
	margin-bottom:5px;
}
.ib_photo_shadow .image_border,
.ib_photo_shadow article section:not(.openstreetmap):not(.directory-map) img:not(.imgnoeffects) {
	box-shadow: 0 0 0 4px #fff,0 0 9px 4px rgba(0,0,0,.9);
	margin-bottom:5px;
}
.ib_cut_embed .gallery_holder>*,
.ib_cut_embed article section:not(.openstreetmap):not(.directory-map) img:not(.imgnoeffects) {
	padding: 6px;
	box-shadow: 1px 1px 6px 0 rgba(0,0,0,.4) inset;
}


/* headings */
.h1_slantcenter article h1,
.h2_slantcenter article h2 {
  --b: 5px;   /* control the border thickness */
  --w: 100px; /* control the width of the line*/
  --h: 1.6em; /* control the height of the element */
  --c: --var(theme_foreground_1);
 
  width: fit-content;
  padding: 0 calc(2*var(--h)/3);
  line-height: var(--h);
  color: --var(theme_foreground_1);
  clip-path: 
    polygon(
     calc(var(--h)/2) 0,100vw 0,
     100vw var(--b),100%  var(--b),
     calc(100% - var(--h)/2) 100%,-100vw 100%,
    -100vw calc(100% - var(--b)),0 calc(100% - var(--b))
    );
  border-image: var(--_g,linear-gradient(var(--c) 0 0)) fill 0//0 var(--w);
  margin-inline: auto;
}



/* reset streetmap tiles */
#directory_map img,
img.noborder {
	outline: 0 !important;
	outline-offset: 0;
	border-radius: 0;
	-webkit-mask: none;
	mask: none;
}