.ImageGrid {
    background-color: #fff;
    margin-top: 1.5625rem;
    margin-bottom: 2rem;
}

.ImageGrid-item {
    position: relative;
    background-color: #999;
    cursor: pointer;
}

.ImageGrid-item__hover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}

.ImageGrid-item__hover svg.icon-plus {
    fill: #999;
    width: 52px;
}

.ImageGrid-item:hover .ImageGrid-item__hover {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.ImageGrid-item__author--overlay .svg-icon {
    width: 22px;
    left: 0;
    top: 50%;
    -webkit-transform:  translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.ImageGrid-item__author--overlay .svg-icon + span {
    display: inline-flex;
    position: relative;
    left: 8px;
    top: 50%;
    -webkit-transform:  translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: 'Alegreya Sans SC', sans-serif;
    text-align: left;
}

@media (min-width: 700px) {
    .ImageGrid-item__author--overlay .svg-icon + span {
        left: 15px;
    }
}

.ImageGrid-item img {
    -webkit-animation-name: doorwayHoverOff;
    -moz-animation-name: doorwayHoverOff;
    animation-name: doorwayHoverOff;
    -webkit-animation-duration: 300ms;
    -moz-animation-duration: 300ms;
    animation-duration: 300ms;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

.ImageGrid-item:hover img {
    -webkit-animation-name: doorwayHoverOn;
    -moz-animation-name: doorwayHoverOn;
    animation-name: doorwayHoverOn;
}

.ImageGrid-item .ImageGrid-item__author {
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 14px;
    color: #fff;
    padding-left: 24px;
}
.ImageGrid-item .svg-icon {
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 100%;
}

.Button--ui .Icon--arrow {
    position: absolute;
    fill: currentColor;
    left: 50%;
    top: 50%;
}


/** Responsive */
@media (min-width: 700px) { .ImageGrid { margin-top: 2.6875rem; margin-bottom: 2.5rem; } }

@media (min-width: 1000px) { .ImageGrid { margin-bottom: 3.5rem; } }

@media (min-width: 1400px) { .ImageGrid { margin-top: 20px; margin-bottom: 5rem; } }

/*! Justified Gallery - v3.6.1 http://miromannino.github.io/Justified-Gallery/ Copyright (c) 2015 Miro Mannino Licensed under the MIT license. */
@-webkit-keyframes justified-gallery-show-caption-animation { from { opacity: 0; }
    to { opacity: 0.7; } }

@-moz-keyframes justified-gallery-show-caption-animation { from { opacity: 0; }
    to { opacity: 0.7; } }

@-o-keyframes justified-gallery-show-caption-animation { from { opacity: 0; }
    to { opacity: 0.7; } }

@keyframes justified-gallery-show-caption-animation { from { opacity: 0; }
    to { opacity: 0.7; } }

@-webkit-keyframes justified-gallery-show-entry-animation { from { opacity: 0; }
    to { opacity: 1.0; } }

@-moz-keyframes justified-gallery-show-entry-animation { from { opacity: 0; }
    to { opacity: 1.0; } }

@-o-keyframes justified-gallery-show-entry-animation { from { opacity: 0; }
    to { opacity: 1.0; } }

@keyframes justified-gallery-show-entry-animation { from { opacity: 0; }
    to { opacity: 1.0; } }

.justified-gallery { width: 100%; position: relative; overflow: hidden; }

.justified-gallery > a, .justified-gallery > div { position: absolute; display: inline-block; overflow: hidden; opacity: 0; filter: alpha(opacity=0); /* IE8 or Earlier */ }

.justified-gallery > a > img, .justified-gallery > div > img, .justified-gallery > a > a > img, .justified-gallery > div > a > img { position: absolute; top: 50%; left: 50%; margin: 0; padding: 0; border: none; }

.justified-gallery > a > .caption, .justified-gallery > div > .caption { display: none; position: absolute; bottom: 0; padding: 5px; background-color: #000000; left: 0; right: 0; margin: 0; color: white; font-size: 12px; font-weight: 300; font-family: sans-serif; }

.justified-gallery > a > .caption.caption-visible, .justified-gallery > div > .caption.caption-visible { display: initial; opacity: 0.7; filter: "alpha(opacity=70)"; /* IE8 or Earlier */ -webkit-animation: justified-gallery-show-caption-animation 500ms 0 ease; -moz-animation: justified-gallery-show-caption-animation 500ms 0 ease; -ms-animation: justified-gallery-show-caption-animation 500ms 0 ease; }

.justified-gallery > .entry-visible { opacity: 1.0; filter: alpha(opacity=100); /* IE8 or Earlier */ -webkit-animation: justified-gallery-show-entry-animation 500ms 0 ease; -moz-animation: justified-gallery-show-entry-animation 500ms 0 ease; -ms-animation: justified-gallery-show-entry-animation 500ms 0 ease; }

.justified-gallery > .jg-filtered { display: none; }

.justified-gallery > .spinner { position: absolute; bottom: 0; margin-left: -24px; padding: 10px 0 10px 0; left: 50%; opacity: initial; filter: initial; overflow: initial; }

.justified-gallery > .spinner > span { display: inline-block; opacity: 0; filter: alpha(opacity=0); /* IE8 or Earlier */ width: 8px; height: 8px; margin: 0 4px 0 4px; background-color: #000; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; }

.ImageSlider-button { background-color: rgba(0, 0, 0, 0.8); color: #fff; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }

.ImageSlider-button .Icon--arrow { -webkit-transition: -webkit-transform 100ms ease-in-out; -moz-transition: -moz-transform 100ms ease-in-out; transition: transform 100ms ease-in-out; }

.ImageSlider-button--prev { left: 0; }

.ImageSlider-button--prev .Icon--arrow { -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg); -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg); -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg); -o-transform: translateY(-50%) translateX(-50%) rotate(90deg); transform: translateY(-50%) translateX(-50%) rotate(90deg); }

.ImageSlider-button--prev:hover .Icon--arrow { -webkit-transform: translateY(-50%) translateX(-80%) rotate(90deg); -moz-transform: translateY(-50%) translateX(-80%) rotate(90deg); -ms-transform: translateY(-50%) translateX(-80%) rotate(90deg); -o-transform: translateY(-50%) translateX(-80%) rotate(90deg); transform: translateY(-50%) translateX(-80%) rotate(90deg); }

.ImageSlider-button--next { right: 0; }

.ImageSlider-button--next .Icon--arrow { -webkit-transform: translateY(-50%) translateX(-50%) rotate(-90deg); -moz-transform: translateY(-50%) translateX(-50%) rotate(-90deg); -ms-transform: translateY(-50%) translateX(-50%) rotate(-90deg); -o-transform: translateY(-50%) translateX(-50%) rotate(-90deg); transform: translateY(-50%) translateX(-50%) rotate(-90deg); }

.ImageSlider-button--next:hover .Icon--arrow { -webkit-transform: translateY(-50%) translateX(-20%) rotate(-90deg); -moz-transform: translateY(-50%) translateX(-20%) rotate(-90deg); -ms-transform: translateY(-50%) translateX(-20%) rotate(-90deg); -o-transform: translateY(-50%) translateX(-20%) rotate(-90deg); transform: translateY(-50%) translateX(-20%) rotate(-90deg); }
