* 
{box-sizing: border-box;}

.mySlides 
{display: none;}

.fade img 
{vertical-align:middle; width:100%; object-fit:cover; min-height:200px;}

/* Slideshow container */
.slideshow-container 
{width:100%; position:relative; margin:auto; margin-top:4px; height:auto; min-height:200px; border:0px;}

/* Caption text div */
.text 
{color:#ffffff; font-size:12px; text-shadow:2px 2px 2px #969799; padding:6px 8px; text-align:center;
position:absolute; bottom:0px; width:100%; background-color:#969799; opacity:0.75;}

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

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

.active 
{background-color:#416285;}

/* Fading animation */
.fade
{animation:fade 8s;}

@-webkit-keyframes fade 
{0%{opacity:0.2}30%{opacity:1}70%{opacity:1}100%{opacity:0.2}}

@keyframes fade 
{0%{opacity:0.2}25%{opacity:1}75%{opacity:1}100%{opacity:0.2}}

/* On smaller screens, decrease text size */
@media only screen and (min-width:550px) and (max-width: 699px) 
{
	.text 
	{font-size: 14px; text-shadow:1px 1px 1px #787878; padding: 6px 8px; }
	
	.fade img 
	{}
}
/* Mid screens, mid sized */
@media only screen and (min-width:700px) and (max-width: 999px) 
{
	.text 
	{font-size: 16px; text-shadow:1px 1px 1px #787878; padding: 8px 10px; }
	
	.fade img 
	{min-height:250px;}

	.slideshow-container 
	{min-height:250px;}
}
/* On larger screens */
@media only screen and (min-width:1000px)
{
	.text 
	{font-size: 18px; text-shadow:1px 1px 1px #787878; padding: 10px 12px; }
	
	.fade img 
	{min-height:275px;}

	.slideshow-container 
	{min-height:275px;}
}