.gal-box { font-size:0;}
.gal-box img {
    width: 100%;
    height:auto;
}
.gal-pic:hover {opacity:0.9;}

.gal-fade { display: none;}
.gal-fade:before {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: #0b0b0b;
    opacity: .4;
}

.gal-popup {
    position: fixed;
    display:inline;

    top:50%;
    transform: translateY(-50%);

    max-width:860px;
    min-width:260px;

    left:0;
    right:0;

    margin: auto;
    text-align: center;
    color:#fff;
    background:#000;

    padding: 30px 30px 60px 30px;
    z-index: 150;
    opacity: 1;
    overflow:hidden;
}

.gal-popup img { min-width:200px; max-width:800px;}

.gal-nav {
    width:30px;
    height:30px;
    font-size:25px;
    line-height:1;
    font-weight:900;
    text-decoration:none;
    text-align:center;
    color:#fff;
    background:#151515;
    border-radius:50%;
    opacity: 0.7;
    cursor:pointer;
}

.gal-nav.close:before{content:"×";}
.gal-nav.close {
    position: absolute;
    top:5px;
    right:5px;
    padding:0;
}
.gal-nav.prev:before{content:"←";}
.gal-nav.prev {
    position: absolute;
    top:42%;
    left:5px;
}
.gal-nav.next:before{content:"→";}
.gal-nav.next {
    position: absolute;
    top:42%;
    right:5px;
}

.gal-title {
    position: absolute;
    left:0;
    bottom:0;
    width:100%;
    height:auto;

    padding: 10px 45px 10px 10px;
    text-align:left;
    font-size:95%;
    line-height:1.2;
    word-wrap: break-word;

    color:#fff;
    background-color: #0000a0;
}
.gal-counter {
    position:absolute;
    bottom:0;
    right:0;

    padding: 10px;
    font-size:95%;
    line-height:1.2;
    white-space:nowrap;

    color:#ccc;
}

@media all and (orientation: landscape){
 .gal-popup img {width:90vh; height:auto;}
 .gal-popup {width:100vh; height:auto;}
}

@media all and (orientation: portrait){
 .gal-popup img {max-width:90vw; height:auto;}
 .gal-popup {max-width:100vw; height:auto;}
}

@media (max-height:512px) and (min-width:768px){
 .gal-popup {top:10px; transform:none;}
}

@media (max-height:512px) and (max-width:767px){
 .gal-popup {top:60px; transform:none;}
}