html, body      {
    font-family: opensans-semi-bold;}
* {
box-sizing: border-box;}

.row > .column {
padding: 0 8px;}
.row:after {
content: "";
display: table;
clear: both;}
.column {
float: left;
width: 25%;}

/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 50px;
padding-bottom: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);}

/* Modal Content */
.modal-content {
    position: relative;
    margin: auto;
    padding: 0;
    height: auto;
    object-fit: contain;}

/* Modal caption */
.modal-content-caption {
    transition: 1s ease;
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 450px;
    background-color: rgba(0, 0, 0, 0.2);
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    align-self: center;}
.modal-content-caption:hover {
        opacity: 1;}
.modal-content-caption h1     {
        white-space: nowrap;
        font-family: opensans-semi-bold; 
        font-weight: none; 
        text-decoration: none;
        font-size: 0.9em;
        letter-spacing: 0.15em;
        line-height: 2.2em;
        color: white;}
.modal-content-caption p      {
        white-space: nowrap;
        font-family: opensans; 
        font-weight: none; 
        text-decoration: none;
        font-size: 0.6em;
        letter-spacing: 0.125em;
        line-height: 1.7em;
        color: white;}

/* The Close Button */
.close {
color: white;
position: fixed;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;}

.mySlides {
display: none;
height: auto;
width: auto;
max-height: 90vh;
max-width: 100vw;
text-align: center;}
    .myslides img {
    width: auto;
    height: auto;
    max-width: 100vw;
    max-height: 90vh;}

.cursor {
cursor: pointer;}

/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);}

.demo {
opacity: 0.6;}
.active,
.demo:hover {
opacity: 1;}
img.hover-shadow {
transition: 0.3s;}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}

/* Style big screen! */
@media only screen and (min-width: 750px) {
    .modal-content {
        width: 90%;
        max-width: 1200px;}
}
/* End style big screen! */


/* Style small screen! */
@media only screen and (max-width: 749px) {
    .modal-content {
        width: auto;
        height: auto;
        max-width: 100vw;
        max-height: 80vh}
        .mySlides img{
            width: auto;
            height: auto;}
}
/* End style small screen! */