* {

  margin: 0px;

  box-sizing: border-box;

}



.thumb_gallery {

  width: 100%;

  height: auto;

  cursor: pointer;

  transition: all ease-in-out 0.5s;

}



.thumb_gallery:hover { 

  opacity: 0.3;

}



#background_overlay {

  display: none;

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0,0,0, 0.9);

  z-index: 999;

  overflow: auto;

}



.container_img {

  position: relative;

  max-width: 1000px;

  max-height: 600px;

  margin: 3% auto;

  animation-name: zoom_image;

  animation-duration: 0.4s;

}



.con-ac-ar {

    width: 800px;

    height: auto;

    position: relative;

    margin: 0 auto;

    text-align: center;

}



.closebtn {

  text-align: right;

  font-size: 2.5em;

  color: rgb(255, 255, 255);

  cursor: pointer;

}



.activePopUpImg {  

    padding: 5px;

    background-color: rgb(255, 255, 255);

    border-radius: 5px;

    margin: 0 auto;

    width: 100%;

}



.previousImage, .nextImage {

  color: #fff;

  font-size: 2.5em;

  cursor: pointer;

  opacity: 0;

  width: 80px;

  text-align: center;

}



.previousImage {

  position: absolute;

  line-height: 600px;

  top: 0;

  left: 0;

  bottom: 0;

}



.nextImage {

  position: absolute;

  line-height: 600px;

  top: 0;

  right: 0;

  bottom: 0;

}



.previousImage:hover {

  opacity: 1;

  transition: 0.4s;

}



.nextImage:hover {

  opacity: 1;

  transition: 0.4s;

}

 @keyframes 

zoom_image {  from {

transform: scale(0.5)

}



to { transform: scale(1) }

}

 @media screen and (min-width: 650px) and (max-width: 1100px) {



.container_img {

  width: 100%;

  height: 500px;

}



.con-ac-ar {

  width: 100%;

  height: 500px;

}



.activePopUpImg {

  width: 100%;

  height: 500px;

}



.previousImage, .nextImage { line-height: 500px; }

}

@media screen and (min-width: 351px) and (max-width: 649px) {



.container_img {

  width: 100%;

  height: 400px;

}



.con-ac-ar {

  width: 100%;

  height: 400px;

}



.activePopUpImg {

  width: 100%;

  height: 400px;

}



.previousImage, .nextImage { line-height: 400px; }

}

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



.container_img {

  width: 100%;

  height: 300px;

}



.con-ac-ar {

  width: 100%;

  height: 300px;

}



.activePopUpImg {

  width: 100%;

  height: 300px;

}



.previousImage, .nextImage { line-height: 300px; }

}