body {
background-color: #c7efc4;
}


header {
    background-color: #9cb59b;
    text-align: center;
    padding: 20px;
    border: 1px solid black;
    margin: 1px;
} 

h1 {
font-family: georgia;
text-shadow: 1px 1px grey;

}

h3 {
font-family: georgia;
font-size: 20px;
}

.topnav{
    border:1px solid #ccc;
    border-width:1px 1px;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}

.topnav li{
    display:inline;
    border-left: 1px solid black;
   }
   
.topnav li:last-child{
    border-right: 1px solid black;
   }
   
   
   
.topnav a{
    display:inline-block;
    padding:10px;
}

a:hover
{ color: #FA057E;
  background: #fff;}


.center {
 display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 50%;
}

.center-nospread {
 display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    width: ;
}

.horizontal_icons {

display: block;
padding: 10px;
text-align: center;
float: center;

}


descriptor {

font-family: timesnewroman;
font-size: 15px;
text-align: center;
padding: 10px;
border: ;
margin: 0px;

}

/* The bottom navbar container */
.bottomnav {
    float: center;
    overflow: hidden;
    background-color: ;
    
}

/* Navbar links */
.bottomnav a {
    float: left;
    display: inline;
    background-color: #b59bb5;
    color: black;
    text-align: center;
    font-family:  timesnewroman;
    font-size: 12px;
    padding: 5px 5px;
    text-decoration: none;
    border: 1px solid black;
    margin: 1px;
    width: 17.5%;
    
}

/* Links - change color on hover */
.bottomnav a:hover {
    background-color: #ddd;
    color: black;
} 

/* Slideshow css */

.bss-slides{
  background: #000;
  position: relative;
  display: block;    
}
.bss-slides:focus{
 outline: 0;
}
.bss-slides figure{
  position: absolute;
  top: 0;
  width: 100%;
}
.bss-slides figure:first-child{
  position: relative;
}
.bss-slides figure img{
  opacity: 0;
  -webkit-transition: opacity 1.2s;
  transition: opacity 1.2s;
  position: relative;
/*-webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  */
}
.bss-slides .bss-show {
  z-index: 3;
}
.bss-slides .bss-show img{
  opacity: 1;
 /* -webkit-backface-visibility: hidden;
  backface-visibility: hidden;*/
}

.bss-slides figcaption{
  position: absolute;
  font-family: sans-serif;
  font-size: .8em;
  bottom: .75em;
  right: .35em;
  padding: .25em;
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .25);
  border-radius: 2px;
  opacity: 0;
  -webkit-transition: opacity 1.2s;
  transition: opacity 1.2s;
}
.bss-slides .bss-show figcaption{
  z-index: 2;
  opacity: 1;
}
.bss-slides figcaption a{
  color: #fff;    
}
.bss-next, .bss-prev{
  color: #fff;
  position: absolute;
  background: #000;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 4;
  font-size: 2em;
  margin-top: -1.2em;
  opacity: .5;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.bss-next:hover, .bss-prev:hover{
  cursor: pointer;
  opacity: 1;
}
.bss-next{
  right: 0;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.bss-prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.bss-fullscreen{
  display: block;
  width: 24px;
  height: 24px;    
  background: rgba(0,0,0,.3) url(https://leemark.github.io/better-simple-slideshow/img/arrows-alt_ffffff_64.png); 
  -webkit-background-size: contain; 
  background-size: contain;
  position: absolute;
  top: 5px;
  left: 5px;   
  cursor: pointer;    
  opacity: .3;
} 
.bss-fullscreen:hover{
  opacity: .8;   
}
:-webkit-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/arrows-alt_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}
:-moz-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/arrows-alt_ffffff_64.png) ;
    background-size: contain;
}
:-ms-fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/arrows-alt_ffffff_64.png) ;
    background-size: contain;
}
:full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/arrows-alt_ffffff_64.png) ;
    -webkit-background-size: contain;
    background-size: contain;
}
:-webkit-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/arrows-alt_ffffff_64.png) ;
    -webkit-background-size: contain;
    background-size: contain;
}
:-moz-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/arrows-alt_ffffff_64.png) ;
    background-size: contain;
}
:-ms-fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/arrows-alt_ffffff_64.png) ;
    background-size: contain;
}
:fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/arrows-alt_ffffff_64.png) ;
    -webkit-background-size: contain;
    background-size: contain;
}