* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

<!-- top nav bar -->
.topnav 
{
  overflow: hidden;
  background-color: white;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
  } 

}

.topnav a 
{
  float: left;
  color: #f2f2f2;
  background-color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover 
{
  background-color: white;
  color: black;
}

.topnav a.active 
{
  background-color: #ff0000;
  color: white;
}

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

/* Caption text */
.text 
  {
  color: black ;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  }

/* Caption text */
.textwhite 
  {
  color: white;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  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 
  {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  }

.active 
  {
  background-color: #717171;
  }

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

/* button box */

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

/* On smaller screens, decrease text size */
@media only screen and (max-width: 1000px) 
  {
  .text {font-size: 8px}
  }

div.scrollmenu 
  {
  background-color: white;
  overflow: auto;
  white-space: nowrap;
  }

div.scrollmenu a 
  {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 6px;
  text-decoration: none;
  }

div.scrollmenu a:hover 
  {
  background-color: #FF0000;
  }

.heading
   {
   margin:10px auto 10px;
   padding-top: 10px;
   width: 950px;
   }
.indented
   {
   padding-left: 50px;
   padding-right: 20px;
   }
.indented2
   {
   padding-left: 25px;
   padding-right: 15px;
   }
.indented3
   {
   padding-left: 25px;
   padding-right: 15px;
   }
.blogbox
   {
   width: 800px;
   height: 20px;
   margin-left: 50px;
   background-color: #d8d8d8;
   }
.blogbutton
   {
   padding-left: 14px;
   padding-right: 14px;
   float: left;
   }
.wrap
   {
   font-family: arial;
   background: #ffffff;
   color: black;
   border: 5px solid black;
   /* auto in following line floats element in page */
   margin: 10px auto 10px;
   width: 950px;
   height: 1300px;
   }
.wrap1
   {
   /* auto in following line floats element in page */
   margin: 100px auto 10px;   
   }
.rednote
   { 
   text-align: center;
   color: red;
   font-size: 25px;   
   }
/* pseudo-classes */
.wrap a:link{color:green}
.wrap a:visited{color:green}
.wrap a:hover{color:red}
.wrap a:active{color:red}