#media-pop-images {
    display: none;
    position: fixed;
    background-image: url(../templates/med-bg.svg);
    z-index: 9999;
    width: 100%;
    height: 0;
    top: 0;
}

.med-arrow-wrap::after, #media-pop-images::after, .med-inner::after, .med-close-wrap::after {
    content: '';
    display: table;
    clear: both;
}

.med-inner {
    margin: 10px;
    border: 1px solid #ffffff;
    padding: 5px;
}

.med-close {
    width: 40px;
    height: 40px;
    background-image: url(../templates/med-close.svg);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    float: right;
}

.med-close:hover, .med-arrow-right:hover, .med-arrow-left:hover {
    cursor: pointer;
}


.med-image {
    margin: auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    margin-bottom: 30px;
}

.med-arrow-wrap {
    position: absolute;
    z-index: +1;
    bottom: 10%;
    width: calc( 100% - 30px );
    box-sizing: border-box;
}

.med-arrow-left {
    float: left;
    width: 40px;
    height: 40px;
    background-image: url(../templates/prev.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.med-arrow-right {
    float: right;
    width: 40px;
    height: 40px;
    background-image: url(../templates/next.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}