/* Image Preloader */
	
@media screen {
	div#preloader {
		position: absolute;
		left: -9999px;
		top:  -9999px;
		}
	div#preloader img {
		display: block;
		}
	}
@media print {
	div#preloader, 
	div#preloader img {
		visibility: hidden;
		display: none;
		}
	}	

html,
/* button, */
/* input, */
select,
textarea {
    color: #fcc289 ;
} /* old#f1f0f0  changed menu button and all other textjd */

.thepotty {display:none;
}
form {
	height: auto;				
}
.jd-form850w { 
	max-width: 850px !important;
	margin: auto} /* This is the best centering for all articles */
.jd-wrap750w { 
	max-width: 750px !important;
	margin: auto} /* This is the best centering for all articles */

moreLink {color: teal}
lessLink {color: teal}

input[type=text]  {      
	padding: 5px 10px;
/*     margin: 8px 0; */
	border-radius: 4px;
    box-sizing: border-box;
	width: 95%;
    border: 1px solid #008080; /* Teal (web colors) */
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}
input[type=text]:hover  {       
	padding: 5px 10px;
/*     margin: 8px 0; */
	border-radius: 4px;
    box-sizing: border-box;
	width: 95%;
    border: 1px solid red; /* Teal (web colors) */
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}


input[type=email]  {   
	padding: 5px 10px;
	border-radius: 4px;
    box-sizing:  border-box;
	width: 95%;
    border: 1px solid #008080; /* Teal (web colors) */
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}
input[type=email]:hover  {
    
	padding: 5px 10px;
	border-radius: 4px;
    box-sizing:  border-box;
	width: 95%;
    border: 2px solid #008080; /* Teal (web colors) */
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

#noprint { display: none; }
 #print { display: block; }


textarea  {
	width: 100%;
	color: black;	
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid #008080;
	border-radius: 4px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

textarea:hover  {
	width: 100%;
	color: black;	
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid red;
	border-radius: 4px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

.jd-textarea  {
	width: 100% !important;
	color: black !important;	
    padding: 4px 10px !important;
    box-sizing: border-box !important;
    border: 1px solid #008080 !important;
	border-radius: 4px !important;
    -webkit-transition: 0.5s !important;
    transition: 0.5s !important;
    outline: none !important;
}

.jd-textarea:hover  {
	width: 100% !important;
	color: black !important;	
    padding: 4px 10px !important;
    box-sizing: border-box !important;
    border: 1px solid red !important;
	border-radius: 4px !important;
    -webkit-transition: 0.5s !important;
    transition: 0.5s !important;
    outline: none !important;
}

.jd-textarea3  {
	width: 45px !important;
	color: black !important;	
    padding: 4px 6px !important;
    box-sizing: border-box !important;
    border: 1px solid #008080 !important;
	border-radius: 4px !important;
    -webkit-transition: 0.5s !important;
    transition: 0.5s !important;
    outline: none !important;
}

.jd-textarea3:hover  {
	width: 45px !important;
	color: black !important;	
    padding: 4px 6px !important;
    box-sizing: border-box !important;
    border: 1px solid red !important;
	border-radius: 4px !important;
    -webkit-transition: 0.5s !important;
    transition: 0.5s !important;
    outline: none !important;
}
jd-textarea1{width: 200px;}
jd-textarea50{width: 50px !important;}
.jd-input1 {
	padding: 8px;
	display: block;
	border: 1px solid black;
	border-bottom: 1px solid #ccc;
	width: 100%
}
.jd-input1:hover {
	padding: 8px;
	display: block;
	border: 1px solid red;
	border-bottom: 1px solid #ccc;
	width: 100%
}

.jd-input2 {
	padding: 2px 0px !important;
/*
	display: block !important;
	border: none !important;
	width: 100% !important;
*/
}
/*
.jd-input2:hover {
	padding: 2px 0px;
	display: block;
	border: none;
	width: 100%
}
*/

#input-text {
	  height: 28px;
	  resize: none;
	  white-space: pre;
	  overflow-wrap: normal;
	  overflow: hidden;
	  padding: 5px;
}

input[type="submit"] { 

    margin: 8px 0;
	border-radius: 4px;
    box-sizing:  border-box;
	width: 50%;
	background-color: teal;
	color: white;
    border: 1px solid #008080; /* Teal (web colors) */
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;	
}
input[type="submit"]:hover { 

    margin: 8px 0;
	border-radius: 4px;
    box-sizing:  border-box;
	width: 50%;
	background-color: red;
	color: white;
    border: 1px solid #008080; /* Teal (web colors) */
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;	
} 

input[type=file]  {   
    
	padding: 5px 10px;
    margin: 8px 0;
	border-radius: 4px;
    box-sizing: border-box;
	width: 95%;
    border: 1px solid #008080; /* Teal (web colors) */
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
	font-size:x-small;
}

input[type=file]:hover  {   
    
	padding: 5px 10px;
    margin: 8px 0;
	border-radius: 4px;
    box-sizing: border-box;
	width: 95%;
    border: 2px solid #008080; /* Teal (web colors) */
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
	font-size: smaller;
}

/* Read More or Read Less */
#more {display: none;}
.jd-btn {
  border: none;
  background-color: white;
  padding: none;
  color: grey;
  font-size: small;
  font-style: italic;
  cursor: pointer;
  display: inline-block;
}
.jd-btn:hover {color: green;
}



/* TABLE */
jd-table{
	border: none
}
/* This table will need <table id="jdt1"> as the start of the table to link it to this css*/
table#jdt1{
	width:100%;
	border: 1px solid black !important;
	font-size: small !important;
}
table#jdt1 tr td{
	border: 1px solid black !important;
}

/*END table */



jd-caption1 { 
  display: table-caption;
  caption-side: bottom;
  text-align: center;
}

/* Images */
.jd-transparent {
	zoom: 1;
	filter: alpha(opacity=90);
	opacity: .2;
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.jd-column4 {
  float: left;
  width: 25%;
  padding: 5px;
}
.jd-column4 img{
  opacity: 0.8; 
  cursor: pointer;
}
.jd-column4 img:hover{
  opacity: 1;
}
.jd-column5 {
  float: left;
  width: 20%;
  padding: 5px;
}
.jd-column5 img{
  opacity: 0.8; 
  cursor: pointer;
}
.jd-column5 img:hover{
  opacity: 1;
}
.jd-column6 {
  float: left;
  width: 16.66%;
  padding: 5px;
}
.jd-column6 img{
  opacity: 0.8; 
  cursor: pointer;
}
.jd-column6 img:hover{
  opacity: 1;
}

/* Clear floats after image containers */
.jd-row::after {
  content: " ";
  clear: both;
  display: table;
}
.jd-centerPIC {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.jd-PicSizeMax500 {width: 500px !important; height:auto}
.jd-PicSizeVVsml {width: 10% !important; height:auto}
.jd-PicSizeVsml {width: 30% !important; height:auto}
.jd-PicSizeSml {width: 80% !important; height:auto}
.jd-PicSizeMed {width: 120% !important; height:auto}
.jd-PicSize {width: 100% !important; height:auto}
.jd-PicSizeBig {width: 200% !important; height:auto}

.jd-PicSize182 {width: 182px !important; height:auto} /* used on colors page DON'T CHANGE*/
.jd-PicSize50 {width: 50% !important; height:auto}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 414px) {
  .jd.column4 {
    width: 100%;
  }
}
/*
@media screen and (max-width: 1084px) {
  .jd.column4 {
    width: 50%;
  }
}
*/
.jd-textAlignJst{
	text-align: justify !important;
	font:.85em Arial,sans-serif;
}
.jd-textAlignRt{
	text-align: right:
	font:1 .5em Arial,sans-serif;
}
/*
body {
    font-size: 1em;
    line-height: 1;			
    background-color: white;
}
*/

::-moz-selection {
    background: #b3d4fd;
    text-shadow: none;
}

::selection {
    background: #b3d4fd;
    text-shadow: none;
}



hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid;
	border-color: grey !important;
    margin: 1em 0;
    padding: 0;
}							/* horizontal rule line jd  modified 8-18*/



img {
    vertical-align: middle;
	max-width: 100%;              /* added jd————12/15/17 */
	height:auto;
	margin: 0;
}

fieldXset {
    border: 0;
    margin: 0;
    padding: 0;
}



.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ---------------------------------------------------------- */


html,  body {height: 100%}   /*gets rid of white space around body  margin:0;*//* WARNING removed for PDF */
body {font: 16px/26px  Arial, Verdana, Helvetica, Helvetica;}
#wrap {min-height: 100%}
#main {overflow: auto; padding-bottom: 100px;}
#footer {position: relative; margin-top: -100px; height: 100px; clear: both;}


.jd-footer {background:#008080; /* Teal (name colors) */   color:white;
  font-weight:300;
  font-size:small;
  text-align:center;
  padding: 5px;}








/* ----------------------------------------------------------DEPRECTATED */
.wrapper {
    width: 90%;
    margin: 0 5%;
}

#sticky {
  width:100%;
  height:100px;
  margin: 10px;
  padding-top:0px;
  background:#008080; /* Teal (name colors) */
  color:white;
  font-weight:300;
  font-size:small;
  text-align:center;
  position:absolute; /*Here's what sticks it*/
  bottom:0;          /*to the bottom of the body/page*/
  left:0;            /*and to the left of the body/page.*/
}

/* ---------------------------------------------------------- */



.header-container2 {   
	background-color: black;
}

.footer-container .main {
    border-top: 20px solid black;
    background: black;
}
.main aside {
    border-top: 20px solid black;
    background: black;
}


/* ---------------------------------------------------------- */


/*
.clearfix {
    overflow: auto;
 }  jd added then removed later */
 
.title {
    color: white;
    font-weight: 400;
}	

.fntLigt{
	font-style: italic;
	font-weight: 100;
	text-align: center;
}/* addedfor footer jd */

/* ---------------------------------------------------------- */


@media only screen and (min-width: 768px) {

/* ====================
    WIDE: CSS3 Effects
   ==================== */


/* ============
    WIDE: Main
   ============ */

    .main article {
        float: left;
        width: 57%;
    }

    .main aside {
        float: right;
        width: 28%;
    }
}
/*.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
} added by me jd */

/*   padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50; jd————12/21/17############################### */


/* ---------------------------------------------------------- */
/* font-family: 'Barlow Condensed', sans-serif;
font-family: 'Pathway Gothic One', sans-serif;
font-family: 'Satisfy', cursive;
font-family: 'Cabin Condensed', sans-serif;
font-family: 'Neucha', cursive;
font-family: 'IM Fell English', serif;

font-family: 'Roboto', sans-serif;
font-family: 'Cabin Condensed', sans-serif;
font-family: 'Hammersmith One', sans-serif; jd————12/16/17

font-family: 'Cinzel Decorative', cursive;
font-family: 'Fredericka the Great', cursive;
font-family: 'Great Vibes', cursive;
font-family: 'Henny Penny', cursive;
font-family: 'Irish Grover', cursive;
font-family: 'Libre Barcode 128 Text', cursive;
font-family: 'Libre Barcode 39', cursive;
font-family: 'Marck Script', cursive;
font-family: 'Medula One', cursive;
font-family: 'Overlock SC', cursive;
font-family: 'Patrick Hand SC', cursive;
font-family: 'Rancho', cursive; */

.CondnsdFont1 {
	/* font-family: 'IM Fell English', serif; jd————12/18/17 */	
	font:20px/30px 'Barlow Condensed', sans-serif;
	line-height: 115%;
}
.CondnsdFont2 {
	/* font-family: 'Cabin Condensed', sans-serif; jd————12/18/17 */	
	font:18px/25px 'Barlow Condensed', sans-serif;
	line-height: 105%;
}
.CondnsdFont3 {
	/* font-family: 'Cabin Condensed', sans-serif; jd */	
	font:14px/16px 'Barlow Condensed', sans-serif;
	line-height: 100%;
}
.oldFont1 {
	/* font-family: 'Barlow Condensed', serif; jd————12/18/17 */	
	font:20px/30px 'IM Fell English', sans-serif;
	line-height: 125%;
}
.jd-oldFont1 {
	/* font-family: 'Barlow Condensed', serif; jd————12/18/17 */	
	font:40px/50px 'IM Fell English', sans-serif;
	line-height: 125%;
}
.oldFont2 {
	font:20px/30px 'IM Fell English', sans-serif, bold;
	line-height: 120%;
}
.cursvFont1 {
	font:20px/30px 'Satisfy', cursive;
	line-height: 115%;
}
.cursvFont2 {
	font:20px/30px 'Neucha', cursive;
	line-height: 115%;
}
.jd-cursvFont2 {
	font:15px/25px 'Neucha', cursive; 
	line-height: 115%;
}
/* 	font-family: 'Hammersmith One', sans-serif; */
.jd-robotoFont {font-family: 'Roboto', sans-serif;	}	/*font:16px/30px 'Catamaran', sans-serif;   Roboto */
.jd-hammerFont {font-family: 'Hammersmith One', sans-serif;	}
.jd-FrederickaFont {font-family:  'Fredericka the Great', cursive;}
.jd-GreatVibesFont {font-family: 'Great Vibes', cursive !important}
.jd-fntXsml {font-size: 13px !important}
.jd-fntSml {font-size: smaller !important}
.jd-fntSmlMed {font-size: 2em !important}
.jd-fntMed {font-size:50pt   !important}
.jd-fntMedPlus {font-size:70pt   !important}
.jd-fntBig {
	font-size: 100pt !important;
	line-height: 0;
	text-shadow: 3px 3px 5px grey  !important;
}
.jd-txtShadow{text-shadow: 3px 3px 5px grey  !important;}
.jd-strike{text-decoration: line-through;}

.jd-animate-zoom {
	animation: animatezoom 8s;
	animation-iteration-count: animatezoom 5;	
}
.jd-animate-zoomSml {
	animation: animatezoom 8s;
	animation-iteration-count: animatezoom 5;	
}  /* not used */
.jd-animate-fading-slo {
	animation: fading 5s 3
}
.jd-animate-fading {
	animation: fading 3s infinite
}
.jd-animate-sideToside {
	animation: 8s infinite alternate slidein;
}
	@keyframes slidein {
		  from {
		    margin-left:200%;
		    width:600%
		  }
		  
		  to {
		    margin-left:0%;
		    width:100%;
		  }
		}

@keyframes animatezoom {
	from {		transform: scale(0)	}
	to {		transform: scale(1)	}
rotate { transform: rotate(360deg)}
	}


/*
#BreathfntBig {
	font-size: 70pt !important;
	line-height: 0;
	text-shadow: 3px 3px 5px grey  !important;
	-webkit-animation: breath 5s infinite;
	animation: breath 5s infinite;
} 
@-webkit-keyframes breath {
	50% {font-size: 70pt;}}
@keyframes breath {50% {font-size: 70pt;}}
*/

.txtwht {
	color: white;
}					
.txtblk {
	color: black;
}
.txtaq {
	color: aqua;
}
.jd-texttag{
	color: blue;
	cursor: pointer
}
.jd-texttagDarkGreen{
	color: darkgreen
}
.jd-teal,
.jd-hover-teal:hover {
	color: #fff!important;
	background-color: #009688!important
}
.jd-texttagGrey{
	color: #666464;
/* 	font-style: italic; */
	text-decoration: underline;
	font-weight: 500;
	cursor: pointer
}
.jd-textUnderLn{
	text-decoration: underline
 }
.jd-texttagGrey:hover{
	color: red;
	cursor: pointer
}

.jd-texttag:hover{
	color: red !important; 
	cursor: pointer
}
.jd-texttag3{
	font-weight: 800;
	color: #FF1493; /* DeepPink (web colors) */
	cursor: pointer
}
.jd-texttag3:hover{
	color: red;
	cursor: pointer
}
.jd-texttag2{
	color: inherit;
	border-bottom:1px dotted blue;
	cursor: pointer
}
.jd-texttag2:hover{
	color: red;
	cursor: pointer
}
.jd-texttagHotPink{
	font-weight: 800;
	color: #FF1493; /* DeepPink (web colors) */
}
.jd-texttagLtBlu{
	color: deepskyblue !important;
	text-decoration: underline;
}
.jd-texttagLtBlu:hover{
	color: #aa231f !important; /* red 60 (ibm design colors) */
	font-style:italic !important;
}
.jd-texttagDrkBlu{
	color: #1d3458	 /* blue 80 (ibm design colors) */
}
.jd-texttagRed{
	color: red
}
.jd-textBrightGreen{
	color:#66FF00  !important
} /* #66FF00 Bright green (name colors) */

.jd-textVeryGrey{
	color: #253529} /* Black leather jacket (name colors) */
.jd-textDecorStrike{
	text-decoration: line-through
}
.jd-textDecorUnder{
	text-decoration:underline
}
.jd-textSmlItalic{
	font-size: small !important;
	font-style: italic !important
}
.jd-textSmlItalicSuper{
	font-size: small !important;
	font-style: italic !important;
	vertical-align: super !important
}
.jd-text11{font-size: 11px!important}
.jd-text12{font-size: 12px!important}
.jd-text13{font-size: 13px!important}
.jd-text14{font-size: 14px!important}
.jd-text16{font-size: 16px!important}
.jd-text18{font-size: 18px!important}
.jd-text20{font-size: 20px!important}


.jd-select {
	padding: 9px 0;
	width: 100%;
	border: none;
	border-bottom: 1px solid #ccc;
	color: black
}
.jd-select2 {
	padding: 9px 5px;
	width: 90%;
	border: none;
	border-bottom: 1px solid #ccc;
	color: black
}

.jd-backLtRed{background-color: #ffe3e3} /* oc-red-1 (open color) */
.jd-backWhite{background-color: white}
.jd-back1{background-color: cornsilk}
.jd-back2{background-color: whitesmoke}
.jd-back3{background-color: lightcyan}
.jd-back4{background-color: honeydew}
.jd-back5{background-color: lightgoldenrodyellow}
.jd-back6{background-color: seashell}
.jd-back7{background-color: linen}
.jd-back8{background-color: mediumspringgreen}
.jd-back9{background-color: BurlyWood}
.jd-back10{background-color: LightYellow}
.jd-back11{background-color: PaleGoldenRod}
.jd-back12{background-color: NavajoWhite}

.jd-backLocomotive{
	background-image:  url("/img/LocomotiveWorked.jpg");
	 background-repeat: no-repeat; }
.jd-backFlag{
	background-image:  url("/img/AmericanFlagBackground.jpg");
	 background-repeat: no-repeat; }
.jd-backXmas{
	background-image:  url("/img/Xmas-Back.jpg");
	 background-repeat: no-repeat;
	 background-size: cover;}
.jd-backFlag2{
	background-image:  url("/img/AmericanFlagBackground2.jpg");
	 background-repeat: no-repeat; }
.jd-backFlag2sml{
	background-image:  url("/img/AmericanFlagBackgroundSmalr.jpg");
	 background-repeat: no-repeat;
	 background-size: cover}
.jd-backFireworks{
	background-image:  url("/img/firework64.gif");
	 background-repeat: no-repeat;
	 background-size: cover}
.jd-backPig2{
	background-image:  url("/img/Wild_Boar.png");
	 background-repeat: no-repeat;
	 background-size: 25%}
.jd-backSHLogo15{
	background-image:  url("/img/SH-Logo1opac15.png");
	 background-repeat: no-repeat;
	 background-size: contain;
	background-position: center center;	
}
.jd-backSHLogo30{
	background-image:  url("/img/SH-Logo1opac30.png");
	 background-repeat: no-repeat;
	 background-size: contain;
	background-position: center center;	
}
.jd-backSHLogo50{
	background-image:  url("/img/SH-Logo1opac50.png");
	 background-repeat: no-repeat;
	 background-size: contain;
	background-position: center center;	
}
.jd-backSHLogo100{
	background-image:  url("/img/SH-Logo1.png");
	 background-repeat: no-repeat;
	 background-size: contain;
	background-position: center center;	
}

.jd-ontop {
  position: relative;
  top: 4.7em;
text-fill-color: black
}

.jd-backOctbr{
	background-image: url("/img/halloween-jack-o-lantern2.jpg");
	color: #000000;
	font-weight:600 
}
.jd-backGatekeeper{
	background-image: url("/img/keeper.gif");
	background-repeat: no-repeat;
/* 	background-position-x: 50% */ 

}
.jd-ItalicGreenTxt{
	color:green;
	font-style: italic }
.whtBack{
	background-color: white;
}
.offwhtBack{
	background-color: #fff1d3;
}
.AntiqueWhiteBack{
	background-color: #faebd7;
}
.blkBack{
	background-color: black;
}
.jd-lemon{
	background-color: #ffff6d
}

.pad2em{
	padding: 2em;
}
.pad2emL{
	padding-left: 2em;
}
.pad1em{
	padding: 1em;
}
.jd-BoxShadow1{box-shadow: 10px 10px 5px grey !important}

.jd-container{padding:  0.01em 16px}
.jd-marg1emTop{margin-top: 1em}
.jd-marg2emTop{margin-top: 2em}
.jd-marg3emTop{margin-top: 3em}

.jd-padding1em {padding: 1em!important}
.jd-padding8 {padding: 8px!important}
.jd-padding2 {padding: 2px!important}
.jd-padding14 {padding: 14px!important}
.jd-padding2em {padding: 2em !important}
.jd-padding1emTB {padding: 1em 0!important}
.jd-padding2emTB {padding: 2em 0!important}
.jd-padding3emLR {padding: 0em 3em!important}
.jd-padding16pxTB {padding: 16px 0 !important}
.jd-pad3pxB{padding-bottom: 3px !important;}
.jd-pad6pxB{padding-bottom: 6px !important;}
.jd-pad12pxB{padding-bottom: 12px !important;}
.jd-pad25pxB{padding-bottom: 25px !important;}
.jd-pad1emR{padding-right: 1em;}
.jd-pad1emL{padding-left: 1em;}
.jd-pad2pxR{padding-right: 2px;}
.jd-pad2pxL{padding-left: 2px;}
.jd-pad2pxT{padding-top: 2px;}
.jd-pad2pxRL{
	padding-right: 2px;
	padding-left: 2px;}
.jd-padZpxALL{padding: 0px !important;}
.jd-pad5pxALL{padding: 5px !important;}
.jd-pad8pxR{padding-right: 8px;}
.jd-pad8pxL{padding-left: 8px;}
.jd-pad8prcntR{padding-right: 8% !important;}
.jd-pad8prcntL{padding-left: 8% !important;}
.jd-pad8pxRL{
	padding-right: 8px;
	padding-left: 8px;}
.jd-pad16pxRL{
	padding-right: 16px;
	padding-left: 16px;}
.jd-pad80pxRL{
	padding-right: 80px;
	padding-left: 80px;}
.jd-pad10emB{padding-bottom: 10em;}
.jd-pad16pxTop{padding-top: 16px}
.jd-pad10pxTop{padding-top: 10px}
.jd-padbot0{padding-bottom: 0 !important}
.jd-padtopNeg{padding-top: 0 !important}
.jd-padTB4Neg{
	padding-top: -8px !important;
	padding-bottom:-8px !important}
.jd-padbotNeg{padding-bottom:-1em !important}

.colCnt2{
	column-count: 2;
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
}
.colCnt3{
	column-count: 3;
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
}

/* Creates 2 column text class and converts it to 1 with larger text for phone */
.jd-columnX2{
	column-count: 2;
	column-gap: 20px;
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
	-moz-column-count: 2; /* Firefox */		}
	@media screen and (max-width: 414px) {
	.jd-columnX2{
		column-count: 1;
		font-size: larger;
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-moz-column-count: 1; /* Firefox */	}	}

.jd-columnX3{
	column-count: 2;
	column-gap: 30px;
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
	-moz-column-count: 2; /* Firefox */		}
	@media screen and (max-width: 414px) {
	.jd-columnX3{
		column-count: 1;
		font-size: larger;
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-moz-column-count: 1; /* Firefox */	}	}

@media screen and (max-width: 320px) {
	.jd-textRmvSmlPhn{display: none}	}/* Used in refresh-update button */

.jd-cell-row {display: table; width: 100%}
	@media screen and (max-width: 414px) {.jd-cell-row{display: block; font-size:medium;}	}

.jd-cell {display: table-cell}
	@media screen and (max-width: 414px) {.jd-cell{display: block; font-size: medium;}}





.cenTxt{
	align-content: center;
}
.NoPad{
	padding: 0;
}

.NoPanel {
	margin-top: 0;
	margin-bottom: 0;
}
.footer1 {
	border-top: 20px #fff1d3
}

.clearUl {
	list-style-type: none;
}

/*
.p1 {
    text-indent: 10px;
}
*/
.jd-p1 {
    text-indent: 10px !important;
}
.jd-p0 {
    text-indent: 0px !important;
}
p0 {
	display: block;
	margin: none;
	text-indent: 10px !important;
}
.jd-BorderTop4px{
	border-top-left-radius: 4px;
	border-top-right-radius: 4px
}
.jd-BorderBot4px{
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px
}
.jd-boxAllLine{
	border-color:gray;
	border-width: thin;
	border-style: solid;
	border-radius: 16px	
}
.jd-boxAllLine2{
	border-color:#FF4500; /* OrangeRed (web colors) */
	border-width: 8px;
	border-style: ridge;
	border-radius: 66px	
}
.jd-boxAllLine3{
	border-color:turquoise;
	border-width: 8px;
	border-style: ridge;
	border-radius: 66px	
}
.jd-boxAllLineSLOW{
	border-color:orange;
	border-width: .5em;
	border-style:groove;
	border-radius: 2em;
	background-color: yellow		
}
.jd-biggerFont{
	font-size: 2em;
	font-weight: bolder;
	line-height: 1
}
.jd-hugeFont{
	font-size: 3em;
	font-weight: bolder;
	line-height: 1
}
.jd-monsterFont{
	font-size: 5em;
	font-weight: bolder;
	
}
.jd-boxAllLineSq{
	border-color:gray;
	border-width: thin;
	border-style: solid;	
}
.jd-boxAllLineSqRED{
	border-color:red;
	border-width: medium;
	border-style: solid;	
}
.jd-boxBottomLine {
	border-bottom:dashed;
	border-bottom-color: gray;
	border-bottom-width: thin;
}
.jd-boxRightLine {
	border-right: solid;
	border-right-color: grey;
	border-right-width: thin;
}
.jd-textAlignLft{ 
	text-align: left
	}
.jd-displayLeftCentr {
	position:fixed;
	top: 50%;
	left: 0%;
	transform: translate(0%, -50%);
	-ms-transform: translate(-0%, -50%) 
}
.jd-displayMiniPageLinkBox30 {
	position:fixed;
	top: 30%;
	right: 0%;
	writing-mode: vertical-lr;
	border-radius: 8px 0px 0px 8px ;
	margin: none;
	padding: 4px;
	color: #fff!important;
	background-color: #009688!important;
}
.jd-displayMiniPageLinkBox30 {
	position:fixed;
	top: 30%;
	right: 0%;
	writing-mode: vertical-lr;
	border-radius: 8px 0px 0px 8px ;
	margin: none;
	padding: 4px;
	color: yellow !important;
	background-color: #009688!important;
}
.jd-displayMiniPageLinkBox50 {
	position:fixed;
	top: 50%;
	right: 0%;
	writing-mode: vertical-lr;
	border-radius: 8px 0px 0px 8px ;
	margin: none;
	padding: 4px;
	color: #fff!important;
	background-color: #009688!important;
}
.jd-displayMiniPageLinkBox50:hover{
	background-color: red!important;
}
.jd-displayMiniPageLinkBox60 {
	position:fixed;
	top: 60%;
	right: 0%;
	writing-mode: vertical-lr;
	border-radius: 8px 0px 0px 8px ;
	margin: none;
	padding: 4px;
	color: #fff!important;
	background-color: #009688!important;
}
.jd-displayMiniPageLinkBox60:hover{
	background-color: red!important;
}
.jd-displayMiniPageLinkBox70 {
	position:fixed;
	top: 70%;
	right: 0%;
	writing-mode: vertical-lr;
	border-radius: 8px 0px 0px 8px ;
	margin: none;
	padding: 4px;
	color: #fff!important;
	background-color: #009688!important;
}
.jd-displayMiniPageLinkBox70:hover{
	background-color: red!important;
}
@media screen and (max-width: 600px) {
  div.jd-mediaScreenHide {display: none;}
}

.jd-displayLeftCentr2 {
	position:fixed;
	top: 50%;
	left: 0%;
	transform: translate(0%, -50%);
	-ms-transform: translate(-0%, -50%);
  -ms-transform: rotate(-90deg); /* IE 9 */
  -webkit-transform: rotate(-90deg); /* Safari prior 9.0 */
  transform: rotate(-90deg); /* Standard syntax */
}
.jd-displayLeft{
	position:absolute;
	left: 0%;
	transform: translate(0%, -5);
	-ms-transform: translate(-0%, -5%) 
}

.jd-boxRtTopBot6px{
border: black;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px
	
} /* rounds left-only box corners*/


@media print {
  #printPageButton {
    display: none;
  }
}

.jd-text-red,
.jd-hover-text-red:hover {
	color: #f44336!important;
	cursor: hand!important
}
.jd-fontStyl-SmlGryItal{
	color: rgba(0, 0, 0, 0.5);
	font-style: italic;
	font-size: small
}
.jd-button1:hover {
	color:teal;
	background-color: inherit !important; /* PapayaWhip (web colors)#FFEFD5 */
	border-color: red;
	font-style:italic;
	cursor: pointer
}
.jd-button1:active {
	color:red;
	background-color: inherit ; /* PapayaWhip (web colors)#FFEFD5 */
	font-style:italic;
}

.jd-button0:hover {
	color:red;
}

.jd-button {
	border: none;
	display: inline-block;
	outline: 0;
	padding: 8px 16px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background-color: white;
	text-align: center;
	cursor: pointer;
	white-space: nowrap
}
.jd-button:hover {
	border: none;
	display: inline-block;
	outline: 0;
	padding: 8px 16px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background-color: #fbf17d;
	text-align: center;
	cursor: pointer;
	white-space: nowrap
}
.jd-button4: {
	color: #ffffff!important;
/* 	background-color: teal!important; */
	width: 100%;
	padding: 8px 16px;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
}
.jd-button4:hover {
	color: #000!important;
	background-color: #ccc!important;
	width: 100%;
	padding: 8px 16px;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;

}
.jd-display-bottommiddle {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	background-color: teal!important;
	width: 100%;
	padding: 8px 16px;
	vertical-align: middle;
	text-align: center;
}

.jd-CursrPt{cursor: pointer}



.jd-button2{ 
	background-color:  #009688;
	font-style:normal;
	color:white
}
.jd-button2:hover {
	background-color: red;
	font-style: italic;
	cursor: pointer
}
.jd-button3{ 
	background-color:  LightYellow !important;
	font-style:normal;
	color:white;
	box-shadow: 7px 7px 5px grey !important
}
.jd-button3:hover {
	background-color: Yellow !important;
	font-styl: italic;
	cursor: pointer;
	box-shadow: 10px 10px 15px grey !important;
	  -webkit-transition-duration: 0.8s; /* Safari */
	  transition-duration: 0.8s;
}
.jd-button6{ 
	background-color:  dodgerblue !important;
	font-style:normal;
	color: white !important
}
.jd-button6:hover {
	background-color: red !important;
	font-style: italic;
	cursor: pointer;
	color: white !important
}
.jd-button7{ 
	background-color:  DarkGreen !important;
	font-style:normal;
	color: white !important
}
.jd-button7:hover {
	background-color: red !important;
	font-style: italic;
	cursor: pointer;
	color: white !important
}
.jd-button3{ 
	background-color:  white;
	font-style:normal;
	color:black;
	border-color:grey;
	border-width:thin;
	border-style: solid;
	border-radius: 18px	
	
}
.jd-button3:hover {
	border-color: #c80000 ;
	font-style: bold;
	cursor: pointer;
	color:red !important
}
.jd-button5: {
	color: white !important;
	background-color: teal !important; 
	cursor: pointer;

}
.jd-button5:hover {
	color: red !important;
	background-color: white !important;
	font-style: italic;
	cursor: pointer;
	border: 1px solid teal;

}
.jd-button5:active {
	color:red;
	background-color: red; 
	font-style:italic;
}
.jd-round-large {
	border-radius: 8px
}

/*
.jd-button2:active {
	color:red;
	background-color: #FFF000;
	font-style:italic;
}
*/
/*
.jd-button2:visited {
	color:white;
	background-color: white;
	display: none
}
*/

.jd-red{
	background-color: #f44336!important
}
.jd-text-redDrk{
	color: #c31a0d!important
}

.jd-back-color1{background-color: #FFFFCC}/* #FFFFCC (very pale yellow-jd) */
.jd-back-color2{background-color: #AFEEEE} /* PaleTurquoise (web colors) */
.jd-back-color3{background-color: #FFFF66} /* #FFFF66 (hot yellow) */
.jd-back-color6{background-color: #FFF600} /* Cadmium yellow (name colors) */
.jd-back-color4{background-color: #FF496C} /* Infra Red (name colors) */
.jd-back-color5{background-color: #22b8cf} /* oc-cyan-5 (open color) */
.jd-back-color6{background-color: teal;color:white} 
.jd-back-color7{background-color: green;color:white} 
.jd-back-color8{background-color: Linen}
.jd-back-color9{background-color: #F0E68C} /* Khaki (web colors) */
.jd-back-color10{background-color: #ADFF2F} /* GreenYellow (web colors) */
.jd-back-color11{background-color: #EEE8AA}  /* PaleGoldenrod (web colors) */
.jd-back-color12{background-color: #FFF8DC}  /* Cornsilk (web colors) */
.jd-back-color13{background-color: #FFFFF0}  /* Ivory (web colors) */
.jd-back-color14{background-color: #FAF0BE} /* Blond (name colors) */
.jd-back-color15{background-color: #F5FFFA}  /* Mint cream (name colors) */
.jd-back-color16{background-color: #ADFF2F}  /* GreenYellow (web colors) */
.jd-back-color17{background-color: #FFDAB9}  /* PeachPuff (web colors) */
.jd-back-color18{background-color: LightGreen}
.jd-back-color19{background-color: PaleGreen}
.jd-back-color20{background-color: #96ceb4}  /*no name - */

.jd-back-grad1{background: linear-gradient(to bottom, #96ceb4 0%, #66ff99 100%);}  /*no name - */}

.w3-teal,
.w3-hover-teal:hover {
	color: #fff!important;
	background-color: #009688!important
}

.jd-fontArtical{
	font-weight: 300;
	line-height: 1.2 !important
}
.jd-fontArtical2{
	font-weight: 200;
	line-height: 1.1 !important
}
.jd-font-LnHt1{
	line-height: 1 !important
}
.jd-font-LnHt1o5{
	line-height: 1.5
}
.jd-font-LnHt75{
	line-height: .75 !important
}
.jd-font-wt400{
	font-weight: 400;
	line-height: 1.3;
}
.jd-font-wt600{
	font-weight: 500;
	line-height: 1.3;
}
.jd-font-wt700{
	font-weight: 700;
	line-height: 1.3;
}
.jd-font-wtSmal{
	font-weight: small;
	line-height: 1.3;
}
.jd-text-dark-green{ color: #006400} /* DarkGreen (web colors) */
.jd-text-gold{color: #fcc289} /* gold text */

.jd-lineHtsml{line-height: 0.8  !important}
.jd-lineHt1{line-height: 1.2  !important}
.jd-lineH{line-height: 1.7}
.jd-lineH1{line-height: 1.4 !important}
.jd-BiLineName{padding: 0; text-align: center; font-family: Barlow Condensed; font-size: small}
.jd-boldNo{font-weight: 100}
.jd-bold{
	font-weight: 900;
	font-size: large;
	background-color: #66CCCC /* #66CCCC (web safe colors) */
}
.jd-bold1{
	font-weight: 800;
}

}
.jd-bold900{
	font-size: x-large;
	font-weight: 900
}
.jd-keepAll {
  word-break: keep-all !important;
}
.jd-bar .jd-bar-item {
	padding: 5px 8px;
	float: left;
	width: auto;
	display: block
}
.jd-bar1 .jd-bar-item1 {
	padding: 1px 8px !important;
	float: left;
	width: auto;
	display: block;
 	border-radius: 15px	; /*must be here */
/* 	border-color: teal; */
	color: teal !important;
	border: 1px solid teal !important;
	background-color: white !important; 
 	margin: 3px !important;
	font-size: small;
	font-weight: 800
}
.jd-bar1 .jd-bar-item1:hover {
	padding: 1px 8px !important;
	float: left;
	width: auto;
	display: block;
 	border-radius: 15px	; /*must be here */
	color: red !important;
	border: 1px solid teal !important;
	background-color: white !important; 
 	margin: 3px !important;
	font-size: small;
	font-weight: 800;
	font-style:italic;
}
/*
.jd-bar1 .jd-bar-item1:visited {
	padding: 1px 8px !important;
	float: left;
	width: auto;
	display: block;
 	border-radius: 15px	;
	color: red !important;
	border: 1px solid teal !important;
	background-color: LightYellow !important; 
 	margin: 3px !important;
	font-size: small;
	font-weight: 800;
	font-style:italic;
} Didn't work?
*/
.bottombar1 {
	border-bottom: 6px solid #008080!important /* Teal (name colors) */
}
.jd-bottombar2 {
	border-top: 2px solid black!important;
	border-bottom: 2px solid black!important
	}
.jd-margin8 {margin: 8px!important}
.jd-margin1 {margin: 1px!important}
.jd-margin1em {margin: 1em!important}
.jd-marginTB {margin-top:  18px!important}
.jd-margin-LR30px{margin-left: 30px!important;margin-right: 30px!important}
.jd-margin-LR8px{margin-left: 8px!important;margin-right: 8px!important}
.jd-margin-bot8 {margin-bottom: 1em!important}
.jd-margin-bot4px {margin-bottom: 4px!important}
.jd-TopBotMargin{
	margin-top: 1em !important;
	margin-bottom: 1em !important
}
.jd-margin-left {margin-left: 1em !important}
.jd-margin-right {margin-right: 1em !important}
.jd-margin-left {
	margin-left: 30px!important
}

.jd-margin-right {
	margin-right: 30px!important
}
.jd-margin-right60 {
	margin-right: 60px!important
}

.jd-textShadow0 {text-shadow: none!important /* removes text shadow in children */}
.jd-textShadow1 {text-shadow: 3px 1px 2px lightgray !important}
.jd-textShadow2 {text-shadow: 1px 2px 3px black!important /* Aqua (web colors) */}
.jd-textShadow3 {text-shadow: 1px 1px 1px #00FFFF!important /* Aqua (web colors) */}
.jd-textShadow4 {text-shadow: 2px 2px 3px #00FFFF!important /* Aqua (web colors) */}
.jd-textShadow5 {text-shadow: 2px 2px 3px grey !important }
.jd-textShadow6 {text-shadow: 2px 2px 3px #b07843 !important }
.jd-textShadow7 {text-shadow: 2px 2px 3px #553d26 !important }
.jd-textShadow8 {text-shadow: 1px 1px 1px rgba(245, 56, 56, 0.75) !important }
.jd-textShadow9 {text-shadow: 2px 2px 9px #FF7E00 !important  /* Amber (SAE/ECE) (name colors) */}
.jd-textShadow10 {text-shadow: 1px 1px 14px #AF002A !important  /* Alabama crimson (name colors) */}


.jd-undConstBkgrnd1 {background-image: url("/img/Baustelle.svg.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right center;
}

.jd-beachBackgnd {/* SHCH original */
	background-image: url("/img/beach-horizon-cropped2-60o.jpg");
    background-repeat: no-repeat;
	background-size: cover;
	margin-top: -1em;	
}
.jd-beachBackgnd1 {
	background-image: url("/img/SunriseBeachOptmz.jpg");
    background-repeat: no-repeat;
	background-size: cover;
	margin-top: -1em;	
}
.jd-sunsetBackgnd1 {
	background-image: url("/img/SugarhillSunset1.jpg");
    background-repeat: no-repeat;
	background-size: cover;
	margin-top: -1em;	
}
.jd-sunsetBackgnd2 {
	background-image:opacity: 0.4url("/img/SugarhillSunset1.jpg");
    background-repeat: no-repeat;
	background-size: cover;
	margin-top: -1em;
	
}
.jd-sunRiseBackgnd1 {
	background-image: url("/img/SunriseBeachOptmz.jpg");
    background-repeat: no-repeat;
	background-size: cover;
	margin-top: -1em;	
}
.jd-diagBackgnd3 {
	background-image: url("/img/DiagonalBack.jpg");
    background-repeat: repeat;
	background-size:auto;
}
.jd-diagBackgnd4 {
	background-image: url("/img/DiagonalBack3.jpg");
    background-repeat: repeat;
	background-size:auto;
}

.jd-tealBackgnd {
	background-color: #009688;
}
.jd-sandBackgnd {
	background-color: #F6EABE; /* Lemon meringue (name colors) */
}
/*
.jd-tealBackgnd {
	background-color: #00968;
	background-size: cover;
	text: teal;
}
*/
.jd-ulSpacing {
	padding-bottom: 18px
}
.jd-ulSpacing4px {
	padding-bottom: 4px
}
.jd-ulSpacingO{
	list-style: circle;
	padding-bottom: 18px
}
.jd-ulSpacing[]{
	list-style: square;
	padding-bottom: 18px
}
.jd-ulCircle{
	list-style: circle;
}
.jd-ulBulit{
	list-style: disc;
}
.jd-ulNmbr{
	list-style-type: decimal ;
	line-height: 2px
}
.jd-ulNmbr1{
	list-style-type: decimal ;
	line-height: normal
}
.jd-opacity50 {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
.jd-footer {
    position:  absolute;
    left: 0;
    bottom: 0;
    width: 100%;
	padding: 0px 15px !important;/*  jd 3-19 */ 
 	height: 200px !important;
    background-color: #009688; /*#00827F Teal green (name colors) */
    color: white;
	font-weight:100;
	font-size: small;
	font-family:sans-serif;
	line-height: 1.5
}
.jd-footerColumns {
	column-count:3;
	column-gap: 0px;
	column-width: 200px !important;
	}
.jd-2Columns {
	column-count:2;
	column-gap: 0px;
	column-width: 200px !important;}
.jd-2Columns2 {
	column-count:2;
	column-gap: 0px;
	column-width: 100% !important;}/* failed */
	
.jd-97wide{width: 97% !important}
.jd-95wide{width: 95% !important}
.jd-90wide{width: 90% !important}
.jd-85wide{width: 85% !important}
.jd-80wide{width: 80% !important}
.jd-75wide{width: 75% !important}
.jd-70wide{width: 70% !important}
.jd-65wide{width: 65% !important}
.jd-60wide{width: 60% !important}
.jd-55wide{width: 55% !important}
.jd-50wide{width: 50% !important}
.jd-48wide{width: 48% !important}
.jd-45wide{width: 45% !important}
.jd-40wide{width: 40% !important}
.jd-35wide{width: 35% !important}
.jd-30wide{width: 30% !important}
.jd-20wide{width: 20% !important}

@media (max-width: 600px){
		.jd-97wide{width: 100% !important; padding: none}
		.jd-95wide{width: 100% !important; padding: none}	
		.jd-90wide{width: 100% !important; padding: none}
		.jd-85wide{width: 100% !important; padding: none}
		.jd-80wide{width: 100% !important; padding: none}
		.jd-75wide{width: 100% !important; padding: none}
		.jd-70wide{width: 100% !important; padding: none}
		.jd-65wide{width: 100% !important; padding: none}
		.jd-60wide{width: 100% !important; padding: none}
		.jd-55wide{width: 100% !important; padding: none}
		.jd-50wide{width: 100% !important; padding: none}
		.jd-48wide{width: 100% !important; padding: none}
		.jd-45wide{width: 100% !important; padding: none}
		.jd-40wide{width: 100% !important; padding: none}
		.jd-35wide{width: 100% !important; padding: none}
		.jd-30wide{width: 100% !important; padding: none}
		.jd-20wide{width: 100% !important; padding: none}
}

.jd-modal {
	z-index: 3;
	display: none;
	padding-top: 100px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.4)
}

.jd-modal-content {
	margin: auto;
	background-color: #fff;
	position: relative;
	padding: 0;
	outline: 0;
	width: 75%
}
.jd-modal-content-N {
	margin: auto;
	background-color: #fff;
	position: relative;
	padding: 0;
	outline: 0;
	width: 250px
}/* This Breaks Modal */



/* more text   https://justmarkup.com/log/2017/01/truncating-and-revealing-text-the-show-more-and-read-more-patterns/*/

.fulltext p,
.less {
	display: none;
}

.fulltext:target p,
.fulltext:target .less {
	display: block;
}


.fulltext:target .more {
	display: none;
}

/* Collapsible Content https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol */
.collapsible {
  background-color: aquamarine;
  color: black;
  cursor: pointer;
  padding: 8px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
}

.active, .collapsible:hover {
  background-color: turquoise;
}

.collapsible:after {
  content: '...show'; /* text like more ok \002B*/
  font-style: italic;
  color: white;
  font-weight: normal;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "...close"; /* text like less ok \2212  text isn't working forces —*/
  font-style: italic;
}

.content {
  padding: 0px 18px 3px 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: cornsilk;
}

/* collapsible2 */
.collapsible2 {
  background-color: greenyellow;
  color: black;
  cursor: pointer;
  padding: 8px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible2:hover {
  background-color: lawngreen;
}

.collapsible2:after {
  content: '\002B'; /* text like more ok */
  color: black;
  font-weight: normal;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";/* text like less ok */
}

.content2 {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: cornsilk;
}

/* READ MORE READ LESS */

.dummy{
	
	padding: inherit;
	background: inherit;
	border: none;
	margin-bottom: none;
}
.dummy p{
	font-family: inherit;
	font-size: inherit;
}
.dummy span{
	padding: none}

/* SLIDESHOW */

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 140px;/* 50% */
  width: auto;
/*   margin-top: -22px; */
  padding: 12px;/* 16px */
  color: red;/* white */
  font-weight: bold;
  font-size: 16px;/* 18 */
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
caption {
    padding: 5px;
    caption-side: bottom;
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;/*  */
  font-size: 14px;
  padding: 8px 12px;
  position: absolute;
  bottom: 0;/* top */
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.jd-tooltip {
  position: relative;
  display: inline-block;
/*   border-bottom: 1px dotted black */;
}

.jd-tooltip .jd-tooltiptext {
  visibility: hidden !important;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.jd-tooltip .jd-tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.jd-tooltip:hover .jd-tooltiptext {
  visibility: visible !important;
  opacity: 1;
}

.jd-ACoff { autocomplete="false"}


/* Validation of form field 
input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: relative; content: '✖';
  padding-left: 5px;
  color: #8b0000;
}

input:valid+span:after {
  position: relative;
  content: '✓';
  padding-left: 5px;
  color: #009000;
}*/