body {
	font: 100%/1.4 Andale Mono, Verdana, Arial, 	Helvetica, sans-serif;
	background: #505050;
	margin: 0;
	padding: 0;
	color: #000;
}

ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15%;
	padding-left: 12%; 
}

a img {
	border: none;
}

a:link {
	color:#3333FF;
	text-decoration: none; 
}

a:visited {
	color: #4E5869;
	text-decoration: none;
}

a:hover, a:active, a:focus { 
	text-decoration: bold;
}

.container {
	width: 100%;
	max-width: 2000px;
	min-width: 780px;
	background: #D2D2D2;
	margin: 0 auto;
}

.header {
	background: #505050;
}

.content {
	padding: 10px 0;
}

.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}

.footer {
	padding: 0px;
	background: #505050;
	font: 100%/1.4 Andale Mono, Verdana, Arial, 	Helvetica, sans-serif;
	color: #FFF;
	
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.container .content h1 {           
	font-family: Lucida Sans Unicode, Lucida Grande, sans-serif; color: #333333
}

.container .content h2 {
	font-family: Lucida Sans Unicode, Lucida Grande, sans-serif; color: #333333
}

/*
* {box-sizing:border-box}
*/


/* Slideshow container */
.slideshow-container {
  width: 50%;
  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: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  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: black;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-color: #D2D2D2;
  text-align: center;
}

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

/* 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 {
  animation-name: fade;
  animation-duration: 1.5s;
}

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