html, body {padding:0; margin:0; background:#3e3e3e; color:#fff; width:100%; height:100%; overflow:hidden;}
div {position:absolute; width:98%; height:98%; max-width:682px; max-height:682px; left:50%; top:50%; transform:translate(-50%, -50%); z-index:20;}
div a {display:block; background-size:contain; background-repeat:no-repeat; background-position:center center; position:absolute; left:5px; top:5px; right:5px; bottom:5px; margin:auto; display:none; z-index:20; width:calc(100% - 10px); height:0; padding-top: 80%;} 
div a img {display:block; width:100%; border:0;}
h1 {font:700 17px/20px 'Lato', arial, sans-serif; color:#95b0b9; margin:0; text-align:center; position:absolute; left:0; top:5px; width:100%; z-index:10;}
h1 span {color:#ebebeb;}
h1 b {display:inline-block; padding:12px;}
h3 {font:normal 16px/30px arial, sans-serif; padding:0; margin:0; text-align:center; position:absolute; left:0; bottom:5px; width:100%; display:none; z-index:200;}
h3 span {display:inline-block; width:41px; height:32px; cursor:pointer; text-align:center;}
h3 span.toggle {display:inline-block; width:41px; height:32px; background: url(/galleries_pages/new-pause.png);}
h3 span.toggle.pause {background:url(/galleries_pages/new-play.png);}

h4 {padding:0; margin:0; width:100%; height:100%; border:1px solid #ccc; z-index:20;}
h4 span.close {float:right; cursor:pointer; display:block; width:30px; height:30px; border-left:1px solid #ccc; border-bottom:1px solid #ccc; background:url(/galleries_pages/close.png) no-repeat center center; position: relative; z-index: 30;}

@media only screen and (max-width:682px) {
html, body {overflow:hidden;}
h4 {border:0; right:10px; z-index:100;}
h4 span.close {width:20px; height:20px; background: rgba(0,0,0,0.5) url(/galleries_pages/close.png) no-repeat center center; border:1px solid #ccc; position:relative; z-index:100;}
h1 {top:-1000px; height:0; overflow:hidden;}
div {width:98%; height:98%;}
div a { width:calc(100% - 10px); height:calc(100% - 10px); padding-top: 0;}
h3 {text-align:center;}
h3 span {background-color:rgba(0,0,0,0.5);} 
h3 span.toggle {background-color:rgba(0,0,0,0.5);}
h3 span.toggle.pause {background-color:rgba(0,0,0,0.5);}
}

@media only screen and (max-height:682px) {
html, body {overflow:hidden;}
h4 {border:0; right:10px; z-index:100;}
h4 span.close {width:20px; height:20px; background: rgba(0,0,0,0.5) url(/galleries_pages/close.png) no-repeat center center; border:1px solid #ccc; position:relative; z-index:100;}
h1 {top:-1000px; height:0; overflow:hidden;}
div {width:98%; height:98%;}
div a { width:calc(100% - 10px); height:calc(100% - 10px); padding-top: 0;} 
h3 {bottom:-5px; text-align:right;}
h3 span {background-color:rgba(0,0,0,0.5);} 
h3 span.toggle {background-color:rgba(0,0,0,0.5);}
h3 span.toggle.pause {background-color:rgba(0,0,0,0.5);}
}

@media (max-height: 682px) and (max-width: 682px) {
h3 {text-align:center;}
}