h1,
h3 {
    font-family: helvetica, arial, sans-serif;
    text-align: center;
}

body {
    width: 650px;
    margin: 0 auto;
}

#gallery {
    width: 650px;
    height: 480px;
}

#filter {
    position: relative;
    float: left;
    margin-bottom: 5px;
    padding-left: 5px;
}

button {
    margin-right: 4px;
    border-radius: 5px;
    background: rgb(0, 0, 0);
    color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
}

.full-img {
    position: relative;
    display: block;
    float: right;
    width: 650px;
    height: 480px;
    margin-bottom: 10px;
}

img {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#displayed-img {
    border-radius: 12px;
    width: 640px;
    height: 480px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 650px;
    height: 480px;
    background-color: rgba(0, 0, 0, 0);
}

.thumb-bar img {
    display: block;
    width: 20%;
    height: 140px;
    float: left;
    cursor: pointer;
    border-radius: 50%;
}


/* 
 image filters
*/

.reset {
    filter: none;
}

.blur {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

.brightness {
    -webkit-filter: brightness(250%);
    filter: brightness(250%);
}

.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);
}

.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.huerotate {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}

.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.opacity {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}

.saturate {
    -webkit-filter: saturate(7);
    filter: saturate(7);
}

.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}

.shadow {
    -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green);
}