body { background-position: 0px 0px; margin-left : 0; margin-top : 0;}
.sans01 { font-family: "Almendra-Bold", "Arial CE", "Helvetica CE"; font-size: 9px; line-height: 15px}
.sans02 { font-family: "Almendra-Bold", "Arial CE", "Helvetica CE"; font-size: 10px; line-height: 15px}
.sans03 { font-family: "Almendra-Bold", "Arial CE", "Helvetica CE"; font-size: 12px; line-height: 18px}
.sans04 { font-family: "Verdana", "Arial CE", "Helvetica CE"; font-size: 13px; line-height: 19px}
.sans05 { font-family: "Almendra-Bold", "Arial CE", "Helvetica CE"; font-size: 14px; line-height: 20px}
.sans06 { font-family: "Almendra-Bold", "Arial CE", "Helvetica CE"; font-size: 15px; line-height: 18px}

.info:hover{color:#0000CC}

body {font-family: Arial, Helvetica, sans-serif;}

.mySlides1, .mySlides2, .mySlides3, .mySlides4, 
.mySlides5, .mySlides6, .mySlides7, .mySlides8, .mySlides9   {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: grey;
  font-weight: bold;
  font-size: 50px;
  transition: 0.45s 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: #f2f2f2;
  font-size: 20px;
  padding: 18px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  text-shadow: 2px 2px rgb(0, 0, 0);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size:20px;
  padding: 18px 12px;
  position: absolute;
  text-shadow: 2px 2px rgb(99, 99, 99);
  top: 0;
}

/* The dots/bullets/indicators */
.dot1, .dot2, .dot3, .dot4, .dot5, .dot6, .dot7, .dot8, .dot9 {
  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, .dot1:hover, .dot2:hover,.dot3:hover,.dot4:hover,
.dot5:hover,.dot6:hover,.dot7:hover,.dot8:hover,.dot9:hover {
  background-color: #717171;
}
#myImg1:hover,
#myImg2:hover,
#myImg3:hover,
#myImg4:hover,
#myImg5:hover,
#myImg6:hover,
#myImg7:hover,
#myImg8:hover,
#myImg9:hover
 {
  cursor: pointer;
}
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 0.5s;
  animation-name: fade;
  animation-duration: 0.5s;
}

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

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

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close1, .close2, .close3, .close4, .close5
,.close6 ,.close7 ,.close8 ,.close9   {
  color: #aaaaaa;
  float: right;
  font-size: 60px;
  font-weight: bold;
}

.close1:hover,
.close1:focus,
.close2:focus,
.close2:hover,
.close3:focus,
.close3:hover,
.close4:focus,
.close4:hover,
.close5:focus,
.close5:hover,
.close6:focus,
.close6:hover,
.close7:focus,
.close7:hover,
.close8:focus,
.close8:hover,
.close9:focus,
.close9:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}