/* Automatic Slide Show*/
/* FCM 20230213*/
/*  #f2eddf  Tan  */


* {box-sizing: border-box;}

.body-type {font-family: "Copperplate Gothic", Tahoma, Arial; background-color:#f2eddf;}
.slide-state {display: none;}
.slide-img {vertical-align: middle;  width:100%}


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

@keyframes fade {from {opacity: .4} to {opacity: 1}}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) { .text {font-size: 11px}}



/* Slideshow container */


.slide-show-container {
font-family: copper-low,"Copperplate Gothic", Tahoma, Arial;
  max-width: 800px;
  position: relative;
  margin: auto;
  background-color: black;  /*  FM  */
}


 /* Caption text - SMALL SCREENS   */
   /*  yellow on smaller screens  */
		@media (max-width: 600px) 
		{
		.slide-text {
		  color: #f2f2f2;
		  font-size:20px;
		  padding: 8px 12px;
		  position: absolute;
		  bottom: -32px;
		  width: 100%;
		  text-align: center;
		  background: rgb(0, 0, 0);
		  background: rgba(0, 0, 0, 0.5);   /* Black see-through */
		  color: #cccc00;  
		}}


/* Caption text - LARGER SCREENS   */
		@media (min-width: 601px) 
		{
		.slide-text {
		  color: #f2f2f2;
		  font-size:32px;
		  padding: 8px 12px;
		  position: absolute;
		  bottom: 8px;
		  width: 100%;
		  text-align: center;
		  background: rgb(0, 0, 0);
		  background: rgba(0, 0, 0, 0.5);   /* Black see-through */
		  color: #f1f1f1;  
		}}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators  original*/
.xslide-dot {
  height: 10px;
  width: 25px;
  margin: 0 2px;
  background-color: #bbb; /* meduim gray */
  border-radius: 0%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* slide the planes indicators*/
.slide-dot {
  height: 24px;
  width: 40px;
  margin: 0 2px;
  background-image: url('../img/index-slide-show/dot-ab9678.png');      
  display: inline-block;
  transition: background-image 0.6s ease;
}
.active { background-image: url('../img/index-slide-show/dot.png'); }/*  dark gray  */
.xactive {background-color: #717171;}  /*  dark gray  */


/* Slideshow Dots  Large */
@media (min-width: 601px) 
{
.dots-container
{
text-align:center;
padding-top:10px;
padding-bottom:10px;
}}

/* Slideshow Dots  Small */
@media (max-width: 600px) 
{
.dots-container
{
text-align:center;
padding-top:44px;
padding-bottom:10px;
}}