#gallery {
    line-height:0;
    -webkit-column-count:5; /* split it into 5 columns */
    -webkit-column-gap:5px; /* give it a 5px gap between columns */
    -moz-column-count:5;
    -moz-column-gap:5px;
    column-count:5;
    column-gap:5px;
}

#gallery img {
    transition: filter 2s;
    filter: grayscale(100%);
    width: 100% !important;
    height: auto !important;
    margin-bottom:5px; /* to match column gap */
}

@media (max-width: 1200px) {
    #gallery {
        -moz-column-count:    4;
        -webkit-column-count: 4;
        column-count:         4;
    }
}

@media (max-width: 1000px) {
    #gallery {
        -moz-column-count:    3;
        -webkit-column-count: 3;
        column-count:         3;
    }
}

@media (max-width: 800px) {
    #gallery {
        -moz-column-count:    2;
        -webkit-column-count: 2;
        column-count:         2;
    }
}

@media (max-width: 400px) {
    #gallery {
        -moz-column-count:    1;
        -webkit-column-count: 1;
        column-count:         1;
    }
}

#gallery img:hover {
    filter:none;
}

#darkbox {
    width:1280px;
    height:720px;
    position:absolute;
    top:0;
    left:0;
    background-color:#333;
    overflow: hidden;
    text-align:center;
}
.darkboximg {
    padding:5%;
    max-width: 1216px;
    max-height: 684px;
}

.topnav a:hover {
    border-bottom: 3px solid red;
}
html,body {
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
}