html, body {
font-family: arial;
padding: 0 2em;
font-size: 18px;
background: #111;
color: #aaa;
text-align:center;
}
h1 {
font-size: 3em;
font-weight: 100;
}
p {
font-weight: 100;
color: #888;
margin-bottom: 45px;
}
.footer {
font-style: italic;
margin-top: 80px;
}
a {
text-decoration: none;
}
/* ------------------------------------------------------------------------------*/
.thumb {
max-height: 171px;
border: solid 6px rgba(5, 5, 5, 0.8);
}
.lightbox {
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;
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
opacity: 0;
}
.lightbox:target {
/** Remove default browser outline */
outline: none;
width: 100%;
height: 100%;
opacity: 1 !important;
}
.lightbox:target img {
border: solid 17px rgba(77, 77, 77, 0.8);
opacity: 1;
webkit-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.light-btn {
color: #fafafa;
background-color: #333;
border: solid 3px #777;
padding: 5px 15px;
border-radius: 1px;
text-decoration: none;
cursor: pointer;
vertical-align: middle;
position: absolute;
top: 45%;
z-index: 99;
}
.light-btn:hover {
background-color: #111;
}
.btn-prev {
left: 7%;
}
.btn-next {
right: 7%;
}
.btn-close {
position: absolute;
right: 2%;
top: 2%;
color: #fafafa;
background-color: #92001d;
border: solid 5px #ef4036;
padding: 10px 15px;
border-radius: 1px;
text-decoration: none;
}
.btn-close:hover {
background-color: #740404;
}