.litebox {
    position: fixed;
    z-index: 999;
    height: 0;
    width: 0;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;}
.litebox img {
    max-width: 90%;
    max-height: 80%;
    margin-top: 8%;
    opacity: 0;}
.litebox:target {
    outline: none;
    width: 100%;
    height: 100%;
    opacity: 1 !important;}
.litebox:target img {
    border: solid 17px white;
    opacity: 1;
    webkit-transition: opacity 0.1s;
    transition: opacity .9s;}

.xbtn-close:hover:after {content: unset!important;}

.xbtn-close {
    position: absolute!important;
    right: 12%;
    top: 15%;
    color: #fafafa;
    background-color: #001CBD;
    border: solid 5px white;
    padding: 10px 15px;
    border-radius: 1px;}

.xbtn-close:hover {
    background-color: #000000;
    text-decoration: none!important;}

.btn-dl:hover {
    background-color: #000000;}

.btn-dl {  
position: absolute!important;
    right: 12%;
    top: 90%;
height:30px;}

/* Responsive styles */


@media only screen and (min-width: 1536px) {
 .xbtn-close {
    right: 21%;
    top: 16%;}

.btn-dl {  
    right: 21%;
    top: 90%;}
}
 }


@media screen and (max-width: 834px) {


@media screen and (max-width: 834px) {

.xbtn-close {
    right: 5%;
    top: 5%;}

.btn-dl {  
    right: 8%;
    top: 45%;}
}

@media screen and (max-width: 768px) {

 .xbtn-close {right: 3%;
    top: 0%;}

.btn-dl {  
    right: 5%;
    top: 60%; }
}

@media screen and (max-width: 480px) {

 .xbtn-close {right: 3%;
    top: 0%;}

.btn-dl {  
position: absolute!important;
    right: 6%;
    top: 25%;
height:25px;
   } 
}
</style>