body {
    background-color: lightsteelblue;
    background-image: url(mayerbackground.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 150% 100%;

}

#outercontainer {
    width: 900px;
    margin: auto;
    background-color: white;
    position: relative;
}

header,
footer {
    clear: both;
    padding: 10px;
    background-color: #003366;
}

header {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: white;
    height: 30px;
    background-image: url(nmenav.jpg);
    background-repeat: no-repeat;
    background-position: left, center;
    background-size: 100% 100%;
    background-color: black;
    border-top-color: black;
    border-top-width: 3px;
    border-top-style: solid;
}

footer {
    text-align: right;
    font-style: italic;
    color: white;
}

#main {
    clear: both;
    padding: 25px;
}

#photos {
    width: 840px;
    margin: auto;
}

h1 {
    font-family: 'Unbounded';
    font-size: 24pt;
}

h1:hover {
    font-size: 36pt;
    color: rgba(0, 115, 255, 0.5);
    font-weight: bold;

}

h2:hover {
    font-size: 24pt;
    color: rgba(0, 115, 255, 0.5);
    font-weight: bold;
}

body {
    font-family: 'Unbounded';
}

.photobox {
    display:none;
    float: left;
    width: 200px;
    padding: 25px;
    background-color: rgba(0, 115, 255, 0.5);
    margin: 15px;
    color: white;
    transition: 2s;

}

.photobox:hover {
    background-color: rgba (255, 0, 0, 100%);
}

.photobox img {
    opacity: 0.5;
    transition: 2s;
}

.photobox:hover img {
    opacity: 1;
    width: 100%;
}

.newsphoto {
    width: 200px;
    height: 120px;
}

.sidebar {
    display:none;
    width: 300px;
    margin-left: 20px;
    padding: 10px;
    float: right;
    background-color: lightgray;
}

.sidebar img {
    width: 100%;
}

#caption4 {
    text-align: center;
}

#story {
    columns: 2;
}

#intropicture {
    width: 200px;
    margin: 10px;

}

#intropicture img {

    width: 100%;

}

#intropicture:hover img {
    width: 800px;
    transition: 3s;

}

.sidenav {
    display:none;
    height: 100%;
    width: 120px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(208, 115, 115, .5);
    overflow-x: hidden;
    padding-top: 20px;
    opacity: 50%;

}

.sidenav:hover {
    opacity: 100%;
    transition: 2s;


}

.sidetext {
    text-align: center;
    color: black;
    font-size: 10pt;

}

.sidetext:hover {
    color: white;
    font-size: 14pt;

}