/* Slide image with button and indicator - end line 44 */
.imgborder { max-height: 550px;
	padding: 2px; border: 1px solid #666; }
.mySlides { display: none; margin: 10%;
	text-align: center; }
/* Slideshow container */
.slideshow-container {
	position: relative; margin: auto;
	width: 100%; max-width: 720px; }
/* Next & previous buttons */
.prev, .next { position: absolute;
	background-color: #404144;
	border-radius: 0 4px 4px 0; color: Gainsboro;
	padding: 10px 10px; font-weight: bold;
	font-size: 18px; top: 40%; transition: 0.8s ease;
	user-select: none; width: auto; }
.next { right: 0; border-radius: 4px 0 0 4px; }
.prev:hover, .next:hover {
  background-color: #606164; }
/* The dots/bullets/indicators */
.dot { cursor: pointer; height: 5px; width: 5px;
  margin: 0 5px; background-color: #ccc;
  border-radius: 50%; display: inline-block;
  transition: width 0.8s ease, height 0.8s ease; }
.active-dot, .dot:hover { margin-bottom: -1px;
  height: 7px; width: 7px; }
/* Fading animation */
.fade { -webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 1s; }
@-webkit-keyframes fade {
  from {opacity: .5} 
  to {opacity: 1}  }
@keyframes fade {
  from {opacity: .5} 
  to {opacity: 1}  }
@media only screen and (max-width: 500px) {
  .imgborder { max-height: 360px}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
/* Go button background - end line 58 */
#container { height: 50px; display: flex;
	align-items: center; justify-content: center;
    overflow: hidden; position: relative; }
.item { z-index: 100; padding: 5px; }
.circle { background-color: #40c040;
	border-radius: 50%; position: absolute;
	opacity: 0; height: 150px; width: 150px;
	animation: scaleIn 2s infinite cubic-bezier(.36, .11, .89, .32); }
@keyframes scaleIn {
  from {
    transform: scale(.2, .2); opacity: .7; }
  to {
    transform: scale(.4, .4); opacity: 0; }  }