.containingThing
{
  margin: 0px auto;
}





/*Eliminates padding, centers the thumbnail */

body, html {
padding: 0;
margin: 0;
text-align: center;
}

/* Styles the thumbnail */

a.lightbox img {
width: 300px;
max-width: 90%;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);

  -webkit-transition-duration: 0.6s; /*Webkit: animation duration*/
  -moz-transition-duration: 0.6s; /*Mozilla: animation duration*/
  -o-transition-duration: 0.6s; /*Opera: animation duration*/
  opacity: 1.0; /*initial opacity of the image*/
  z-index: 1; /*place non-hover images behind the hover image*/
  margin: 0; /*remove default margin for images*/
  position: relative; /*solve the problem with z-index in Chrome*/
}


a.lightbox img:hover { 
  -webkit-transform: scale( 1.2 ); /*Webkit: increase size to 1.2x*/
  -moz-transform: scale( 1.2 ); /*Mozilla: scaling*/
  -o-transform: scale( 1.2 ); /*Opera: scaling*/
  box-shadow: 0px 0px 25px gray /*CSS3 shadows: 25px fuzzy shadow around the entire image*/

  -webkit-box-shadow: 0px 0px 25px gray /*Webkit: shadows*/
  -moz-box-shadow: 0px 0px 25px gray; /*Mozilla: shadows*/
  opacity: 1; /*default opacity*/
  z-index: 10; /*place hover image in front the non-hover images*/
}


/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,0,0,.7);
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
z-index: 100;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}

.lightbox-target:target img {
max-height: 90%;
max-width: 90%;
}

.lightbox-target:target a.lightbox-close {
top: 0px;
}