.content {
    margin: 50px 150px 0px 150px;
}

@media screen and (max-width: 1600px) {
    .content {
        margin: 50px 50px 0px 50px;
    }
}

@media screen and (max-width: 620px) {
    .content {
        margin: 50px 25px 0px 25px;
    }
}

.header
{
    text-transform: uppercase;
    text-align: center;
    color: #686868;
}

.mansory
{
    margin-top: 50px;
    -webkit-column-count: 4;
            column-count: 4;
    -webkit-column-gap: 1em;
            column-gap: 1em;
}

@media screen and (max-width: 1200px) {
    .mansory
    {
        -webkit-column-count: 3;
                column-count: 3;
    }
}

@media screen and (max-width: 900px) {
    .mansory
    {
        -webkit-column-count: 2;
                column-count: 2;
    }
}

@media screen and (max-width: 480px) {
    .mansory
    {
        -webkit-column-count: 1;
                column-count: 1;
    }
}

.mansory__item
{
    margin-bottom: 1em;
}

.mansory__image
{
    width: 100%;
    margin: 0;
    vertical-align: bottom;
    cursor: pointer;
    -webkit-transition: 0.3s opacity ease-in-out;
    transition: 0.3s opacity ease-in-out;
}

.mansory__image:hover {
    opacity: 0.8;
}

.images__modal
{
    position: fixed;
    top: 0; left: 0;
    background-color: rgba(0,0,0,0.8);
    width: 100vw;
    height: 100vh;
    display: none;
}

.images__modal--visible
{
    display: block;

}

.modal__times
{
    font-size: 56px;
    color: white;
    text-align: right;
    padding-right: 40px;
}

.modal__img__container
{
    width: 100%;
    height: calc(100% - 140px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.modal__img
{
    max-width: calc(100% - 100px);
    max-height: 100%;
}

.close__button
{
    cursor: pointer;
}


.modal__back, .modal__forward
{
    width: 0; 
    height: 0; 
    border-top: 25px solid transparent; 
    border-bottom: 25px solid transparent;
    margin: 25px;
    cursor: pointer;
    -webkit-transition: 0.3s opacity ease-in-out;
    transition: 0.3s opacity ease-in-out;
}

.modal__back:hover, .modal__forward:hover
{
    opacity: 0.8;
}

.modal__back
{
    border-right: 50px solid white; 
    margin-right: 5px;
}

.modal__forward
{
    border-left: 50px solid white; 
    margin-left: 5px;
}