p
{
   margin: 10px;
}

/* Susie likes Arial, Calibri, and Candara for the heading. */
.hdr1, .hdr2
{
   font-family: Arial, Calibri, Candara;
   text-align: center;
   padding: 0px;
   margin: 0px;
   background-image: url("images/BackgroundTexture.jpg");
}

.hdr2
{
   vertical-align: 20px;
}

.style1
{
   text-decoration: underline;
}


/* Style the top navigation bar */
.navbar
{
   overflow: hidden;
   background-color: #333;
}

/* Style the navigation bar links */
.navbar a
{
   float: left;
   display: block;
   color: white;
   text-align: center;
   padding: 0px;
   margin: 0px;
   text-decoration: none;
}

/* Right-aligned link */
.navbar a.right
{
   float: right;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky
{
   position: fixed;
   top: 0;
   width: 100%;
}

/* Main column */
.main
{
   background-color: white;
}
/* Fake image.  ToDo: replace with images */
.fakeimg
{
   background-color: #aaa;
   width: 100%;
   padding: 20px;
}

/* Footer */
.footer
{
   padding: 20px;
   text-align: center;
   background: #ddd;
}

/* Responsive layout - when the screen is less than 400px wide, 
   make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px)
{
   .navbar a
   {
      float: none;
      width: 80vw;
   }
}

/* Container height moves menu bar down
   mySlides height hides scrolling stuff if container height is not adequate.*/
.slideshow-container
{
   width: 100%;
}

.mySlides
{
   position: absolute;
   width: 100%;
   background-attachment: inherit;
   background-position: top center; 
   background-size: 100%;
   background-repeat: no-repeat;
}


/* Next & previous buttons */
.prev, .next
{
   cursor: pointer;
   position: absolute;
   top: 20vw;
   width: auto;
   padding: 10px;
   color: white;
   font-weight: bold;
   font-size: 18px; 
   transition: 0.9s ease-in-out, transform 2s; 	
   border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next
{
   right: 0vw; 
   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: 15px;
   padding: 8px 12px;
   position: absolute;
   bottom: 8px;
   width: 80vw;
   text-align: center;
}

/* The dots/bullets/indicators */
.dot
{
   cursor: pointer;
   height: 13px;
   width: 13px;
   margin: 0px 10px;
   background-color: #bbb; 
   border-radius: 50%; 	
   display: inline-block; 	
   transition: background-color 0.6s ease;
}
.active, .dot:hover
{
   background-color: #717171;
}
/* Fading animation */
.fade
{
   -webkit-animation-name: fade;
   -webkit-animation-duration: 1s; 
   animation-name: fade; 	
   animation-duration: 1s; 
}

@-webkit-keyframes fade    
{
   from {opacity: 0.8}    
   to {opacity: 1.0} 
} 

@keyframes fade    
{
   from {opacity: 0.6}    
   to {opacity: 1.0} 
}

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

.scrolling
{
	height:80px;
}