div.pg_thumb {
height: 9em;
width: 30%;
padding: 0.1em;
padding-bottom: 1em;
margin-right: 1%;
margin-bottom: 1%;
float: left;
text-align: center;
line-height: 10em;
vertical-align: middle;
}
div.pg_thumb:hover {
transition: 0.5s;
}
div.pg_thumb img {
max-width: 100%;
max-height: 100%;
box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;
transition: 0.5s;
}
div.pg_thumb img:hover {
box-shadow: 0px 8px 8px #333;
-moz-box-shadow: 0px 8px 8px #333;
-webkit-box-shadow: 0px 8px 8px #333;
transition: 0.5s;
}
div.pg_lightbox {
opacity:0;
width: 0%;
height: 0%;
top: 50%;
left: 50%;
filter: blur(0em);
background-color:rgba(55, 55, 55, 0.95);
background-repeat: no-repeat;
position: fixed;
z-index: 100000;
}
div.pg_lightbox_nav {
float: right;
margin-right: 1em;
margin-top: 1em;
}
div.pg_lightbox_description {
font-size: 1em;
background-color:rgba(255, 255, 255, 0.9);
text-align: center;
padding: 1%;
opacity: 1;
margin-top:1em;
width: 60%;
margin-left: auto;
margin-right: auto;
color: #444444;
}
div.pg_lightbox_description:hover {
opacity: 0;
transition: 1s;
}
div.pg_lightbox_copyright {
position: fixed;
bottom: 0.5em;
right: 0.5em;
font-size: 0.9em;
}
div.pg_close_picture,
div.pg_prev_next_picture {
font-size: 1.5em;
transition: 0.5s;
color: #444444;
border: 1px solid #444444;
border-radius: 0.2em;
background-color: #ffffff;
width: 3em;
margin-bottom: 0.2em;
text-align: center;
}
div.pg_close_picture:hover,
div.pg_prev_next_picture:hover {
color: #ffffff;
background-color: #444444;
transition: 0.5s;
}
div.pg_thumb:hover,
div.pg_close_picture:hover,
div.pg_prev_next_picture:hover{
cursor: pointer;
}
div.pg_page {
margin-bottom: 3em;
overflow: hidden;
max-height: 2000px;
}
div.pg_page_nav {
clear:both;
font-size: 1.5em;
font-weight: 900;
text-align: center;
margin-top: 0.1em;
margin-bottom: 1em;
margin-left: -6%;
}
div.pg_page_nav:hover {}
div.pg_page_nav span {
text-align: center;
border: 1px solid #444444;
border-radius: 0.2em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 0.2em;
background-color: #ffffff;
color: #444444;
transition: 1s;
}
div.pg_page_nav span:hover {
background-color: #444444;
color: #ffffff;
transition: 0.5s;
cursor: pointer;
}
@media only screen and (max-width: 39em) {
div.pg_thumb {
width: 44%;
}
}