/*Eliminates padding, centers the thumbnail */

body, html {

  padding: 0;

  margin: 0;

  text-align: center;

}



/* Styles the thumbnail */

a.lightbox img {

  height: 150px;

  border: 3px solid white;

  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

  margin: 10px 20px 20px 20px;

}



/* 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, 0.7);

  width: 100%;

  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: 21;

}



/* 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, 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: #5f5f5f;

  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;

  border-radius: 25px;

}



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

a.lightbox-close:before {

  content: "";

  display: block;

  height: 30px;

  width: 4px;

  background: white;

  position: absolute;

  left: 24px;

  top: 9px;

  -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: 4px;

  background: white;

  position: absolute;

  left: 24px;

  top: 9px;

  -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;

  left: 0;

}



.lightbox-target:target img {

  max-height: 100%;

  max-width: 100%;

}



.lightbox-target:target a.lightbox-close {

  top: 80px;

}





/* RESPONSIVE CSS

-------------------------------------------------- */



@media (max-width: 991px) {



  

}



/* Hide AddToAny vertical share bar when screen is less than 980 pixels wide */

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

	

}

 

 /* For devices small than 750px: */

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



.lightbox { display: none; }

}    



@media (max-width: 768px) {



	a.lightbox img {

  height: 120px;

  border: 3px solid white;

  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

  margin: 94px 20px 20px 20px;

}

  

 



  @media (min-width: 768px) {



  }



  /* The navbar becomes detached from the top, so we round the corners */