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;

}

/* FOR THE RESPONSIVE PHOTO GRID */

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
} 

/* 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;
} 

/* FOR THE IMAGE GALLERY WITH ZOOM */

body {
  padding: 30px 0;
  position: relative;
}

.gallery {
  width: 600px;
  margin: auto;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.img-c {
  width: 200px;
  height: 200px;
  float: left;
  position: relative;
  overflow: hidden;
}

.img-w {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform ease-in-out 300ms;
}

.img-w img {
  display: none;
}

.img-c {
    transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}

.img-c:hover .img-w {
  transform: scale(1.08);
  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}

.img-c.active {
  width: 100% ;
  height: 100% ;
  position: absolute;
  z-index: 2;
  transform: translateX(-50%);
}

.img-c.postactive {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.img-c.active.positioned {
  left: 0 ;
  top: 0 ;
  transition-delay: 50ms;
}