* {box-sizing:border-box}

.slideshow-container {
  width: 98vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -49vw;
  margin-right: -50vw;
}

.mySlides { 
	display: none; 
}
.prev, .next {
	color: #fff; 
	font-weight: bold; 
	font-size: 16px;
	font-size: 2.5vw;
	cursor: pointer; 

	position: absolute; 
	bottom:   35%; 
	width:    auto; 
	height:   5.75vw;
	padding:  1vw 20px; 

	transition: 0.6s ease; 
	border-radius: 0 7px 7px 0; 
	user-select: none; 
}
.next { 
	right: 0; 
	border-radius: 7px 0 0 7px; 
}
.prev:hover, .next:hover { 
	background-color: rgba(0,0,0,0.2);
}
.mySlides .text { 
	color: #f2f2f2; 
	font-size: 16px;
	font-size: 2.5vw;
	padding: 0.75vw 12px 0 12px; 
	position: absolute; 
	width: 100%; 
	height:5.75vw;
	bottom: 35%; 
	text-align: center; 
}

.mySlides .red    { background-color: rgba(128, 32, 32, 0.8); }
.mySlides .orange { background-color: rgba( 96, 64, 32, 0.8); }
.mySlides .yellow { background-color: rgba( 80, 80, 32, 0.8); }
.mySlides .green  { background-color: rgba(32, 128, 32, 0.8); }
.mySlides .blue   { background-color: rgba(32, 32, 128, 0.8); }

.mySlides .numbertext { 
	color: #f2f2f2; 
	font-size: 12px; 
	padding: 8px 12px; 
	position: absolute; 
	top: 0; 
}
.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; 
}

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

.fade { 
	-webkit-animation-name: fade; 
	-webkit-animation-duration: 16s; 
	animation-name: fade; 
	animation-duration: 16s; 
}
@-webkit-keyframes fade {
  from {opacity: 0.0} 
  25%  {opacity: 1.0}
  75%  {opacity: 1.0}
  to   {opacity: 0.0}
}
@keyframes fade {
  from {opacity: 0.0} 
  25%  {opacity: 1.0}
  75%  {opacity: 1.0}
  to   {opacity: 0.0}
}