body {
    background-color: #F7F5E6;
}

.navbar{
    list-style:none;
    margin:10;
    padding:0;
    text-align:center;
}

.nav_section {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 20px;
  overflow: hidden;
  margin: .5em;
}

.navbar a:link{
    color:#333A56;
    text-decoration:none;
}


.navbar a:visited{
    color:#333A56;
    text-decoration:none;
}

.navbar a:hover{
    color:#52658f;
}


.topbanner {
    position: relative;
    height: 100px;
    width: 700px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    /*background-color: #52658f;*/
}

.nextbutton {
    position: absolute;
    top: 8px;
    right: 0px;
    text-align:center;
    border-radius: 25px;
    background-color: #52658f;
    font-size: 125%;
    height: 40px;
    line-height:35px; /*vertically centerish text. only works with single line*/
    width: 150px;
}

.prevbutton {
    position: absolute;
    top: 8px;
    right: 170px;
    text-align:center;
    border-radius: 25px;
    background-color: #52658f;
    font-size: 125%;
    height: 40px;
    line-height:35px; /*vertically centerish text. only works with single line*/
    width: 150px;
}

.prevbutton a {
    color: #E8E8E8;
    text-decoration:none;
}

.nextbutton a {
    color: #E8E8E8;
    text-decoration:none;
}

.imagetitle {
    text-align:left;
    /*color: #E8E8E8;*/
    color:#333A56;
    font-size: 200%;
}



.imagedate {
    text-align:left;
    color: #333A56;
    /*color: #E8E8E8;*/
    font-size: 125%;
}



.photogallery {
    height: 700px;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}




/*
setting max-width to 900 ensures that
we never see more than 4 wide at a time.
margin: 0 auto centers the whole div
*/
.photo_gallery {
    max-width: 900px;
    margin-top: 30px;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto;
}

/*
inline-block means they are side by side
The rest defines the div */
.photo {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin: .5em;
}