/* Format the images to be to the left/right of the centralised text */
.image_div_right {
    width: 45%;
    float: right;
    margin-right: -47%;
    word-wrap: break-word;
}

.image_div_right img {
    width: 100%;
}

.image_div_left {
    width: 45%;
    float: left;
    margin-left: -47%;
    word-wrap: break-word;
}

.image_div_left img {
    width: 100%;
}

.caption {
    
}

/* Align side by side using display: inline-block, from: https://codepen.io/raddevon/pen/zlrhf */
.image_div_central{
    width: 49%;
    margin: auto;
    display: inline-block;
    vertical-align: top;
    word-wrap: break-word;
}

.image_div_central img{
    width: 100%;
}

/* Centralised and designed to align with the image_left below it */
.index_banner {
    width: 97%;
    margin: auto;
    display: block;
}

/* Gallery thumbnails */
.image_thumbnail {
    width: 150px;
}

/* Format the hovered on image to be the whole size */
/* Current this is the size of the central div, so needs to be 200% (as the central div is 50% of the screen
 * Also it doesn't cover the map, but that might not be possible this way as the map should always stay on top
 */
/*
.image_left:hover {
    width: 100%;
    margin-left: -45%;
    margin-right: 0%;
    z-index: 500;
    padding-top:-400px;
    float: left;
}

.image_right:hover {
    width: 100%;
    margin-right: -45%;
    z-index: 500;
    padding-top:-400px;
    float: right;
}
*/

/* When on small screens, don't set the images off to the sides, inline them with the text
See: http://www.peachpit.com/articles/article.aspx?p=1681040&seqNum=3
*/
@media screen and (max-width: 500px) {
    .image_div_right {
        width: 100%;
        margin-right: -0%;
    }

    .image_div_left {
        width: 100%;
        margin-left: -0%;
    }
}