ul, ol, dl {padding:0; margin:0;}
h1, h2, h3, h4, h5, h6, p {padding-right:15px; padding-left:15px;}
a img {border: none;}
a:link {color:#000;	text-decoration:none;}
a:hover, a:active, a:focus {text-decoration:underline; color:#F00;}
body {background:url(images/zobg1.png) #fff no-repeat fixed center; background-size:cover}
.container {width:100%; margin:auto;}
.header {list-style-type:none; padding:0px 0px; border-bottom:solid; background-color:#fff;border-color:#CCC; position:fixed; left:0;top:0; width:100%;}
.content{padding:0px 0px 0px 0px; margin-top:70px ;}
.content ul, .content ol {padding: 0 15px 15px 40px; }
.footer {list-style-type:none; text-align:center; margin:0; padding:0; border-top:solid; background-color:#fff; border-color:#CCC; position:fixed; left:0;	bottom:0; width:100%;}
.fltrt 	{float:right; margin-left:8px;}
.fltlft {float:left; margin-right:8px;}
.clearfloat {clear:both; height:0;	font-size:1px;	line-height:0px;}
.nav li {display: inline-block;	font-size:15px;	padding: 10px;}
.icon {padding:10px 10px 10px 10px;}
.icon:hover {}
.panel {height:700px; margin-top: 50px;	opacity:0.5; transition:0.3s;}
.panel:hover {transition:0.3s; opacity:1; margin-top:-10px ;}
.cover {width: 200px; height: 284px; padding: 0px; 	background-color: #fff;	box-shadow: 10px 10px 15px #999;transition: 0.3s;}
.cover:hover {transition:0.3s; margin-top:-20px;}
.titles {font-family: Arial, Helvetica, sans-serif; font-weight:bold; font-size:14px}
.select {opacity:0.8;transition: width 2s, height 2s, transform 2s;&:hover {transform:rotate(360deg); opacity:1;}}
.ch_bg {position:fixed; right:100px; top:80px;}
.box {animation: fadeIn 0.8s;
  -webkit-animation: fadeIn 0.8s;
  -moz-animation: fadeIn 0.8s;
  -o-animation: fadeIn 0.8s;
  -ms-animation: fadeIn 0.8s;
}
.center {margin-left:18px;}
.bio {vertical-align:text-top; font-family:"Courier New", Courier, monospace; font-size:24px; font-weight:bold}
.characterbox {width:auto; height:900px;}

.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container { background-image: url(images/zobg1.png);
  max-width: 1000px;
  position: relative;
  margin: auto;
}
/* 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;
}
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #FFF;
  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;
}

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

@keyframes fadeIn {
  0% { transform: scalex(0)  }
  100% { transform: scalex(1)   }
}

@-moz-keyframes fadeIn {
  0% { transform: scalex(0)  }
  100% { transform: scalex(1)   }
}

@-webkit-keyframes fadeIn {
  0% { transform: scalex(0)  }
  100% { transform: scalex(1)   }
}

@-o-keyframes fadeIn {
  0% { transform: scalex(0)  }
  100% { transform: scalex(1)   }
}


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