#content {
  height:4000px;
}


.short-animate {
  -webkit-transition:.5s ease-in-out;
  -moz-transition:.5s ease-in-out;
  -ms-transition:.5s ease-in-out;
  -o-transition:.5s ease-in-out;
  transition:.5s ease-in-out;
}

.long-animate {
  -webkit-transition: .5s .5s ease-in-out;
  -moz-transition: .5s .5s ease-in-out;
  -ms-transition: .5s .5s ease-in-out;
  -o-transition:.5s .5s ease-in-out;
  transition:.5s .5s ease-in-out;
}


.lightbox {
  position:fixed;
  top:-100%;
  bottom:100%;
  left:0;
  right:0;
  background:rgba(0,0,0,.7);
  z-index:501;
  opacity:0;
}

.lightbox div.conterdescript {
	position: relative;
  margin: 10% auto 0px auto;
  padding: 20px 30px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 90%;
  max-width: 700px;
  background-color: #ffffff;
  overflow: hidden;
}
.lightbox div.conterdescript2 {
  position: relative;
  margin: 7% auto 0px auto;
  padding: 20px 30px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 90%;
  max-width: 750px;
  background-color: #ffffff;
  overflow: hidden;
}

#lightbox-controls {
  position:fixed;
  height:70px;
  width:70px;
  top:-70px;
  right:0;
  z-index:502;
  background:rgba(0,0,0,.1);
}

#close-lightbox {
  display:block;
  position:absolute;
  overflow:hidden;
  height:50px;
  width:50px;
  text-indent:-5000px;
  right:10px;
  top:10px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}

#close-lightbox:before {
	content:'';
  display:block;
  position:absolute;
  height:0px;
  width:3px;
  left:24px;
  top:0;
  background:white;
  border-radius:2px;
  -webkit-transition: .5s .5s ease-in-out;
  -moz-transition: .5s .5s ease-in-out;
  -ms-transition: .5s .5s ease-in-out;
  -o-transition:.5s .5s ease-in-out;
  transition:.5s .5s ease-in-out;
}

#close-lightbox:after {
	content:'';
  display:block;
  position:absolute;
  width:0px;
  height:3px;
  top:24px;
  left:0;
  background:white;
  border-radius:2px;
  -webkit-transition: .5s 1s ease-in-out;
  -moz-transition: .5s 1s ease-in-out;
  -ms-transition: .5s 1s ease-in-out;
  -o-transition:.5s 1s ease-in-out;
  transition:.5s 1s ease-in-out;
}

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

.lightbox:target img {
  max-width: 500px;
  max-height: 500px;
}
.lightbox:target img.classimageview {
  max-width: 100%;
}

.lightbox:target ~ #lightbox-controls {
  top:0px;
}

.lightbox:target ~ #lightbox-controls #close-lightbox:after {
  width:50px;
}

.lightbox:target ~ #lightbox-controls #close-lightbox:before {
  height:50px;
}