:root {
  --bgcolor: rgb(230, 230, 230);
  --bodybgcolor: rgb(200, 200, 200);
  --solidobject: -2px -2px 4px rgb(255, 255, 255),
    2px 2px 4px rgba(0, 0, 0, 0.15);
  --standardtrans: all 1s ease;
  --fasttrans: all 0.25s ease;
  --superfasttrans: all 0.15s ease;
}

.imgwrapper,
.imgwrapper * {
  transition: var(--standardtrans);
  outline: none !important;
}
.stack {
  width: 80%;
  margin: 30px 5px;
  position: relative;
  height: 250px;
  top:-45px;
  left: 10%; 
}

.imagewrap {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-height: 308px;
  padding: 3px;
  border-radius: 1.2em;
  background: var(--bgcolor);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
}

.stack_image_pin{
  background-image: url('../images/icon/drop.png');
  background-repeat: no-repeat;
  background-position: center; 
  clip-path: ellipse(100% 60% at 50% 40%);
  position: relative;
  left: 80%;
  top: 2%;
  z-index: 999;
  width: 50px;
  height: 50px;
}
.profile_image{
  width: 50% !important;
  height: auto;
}
.stack .imagewrap {
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: right top;
  transition: var(--fasttrans);
}
.stack .imagewrap.selected {
  right: 89% !important;
  top: -20px !important;
  transform: rotateZ(5deg) !important;
}
.stack .imagewrap:not(:nth-child(1)):hover {
  right: 30px;
  top: 20px;
  cursor: pointer;
}
.stack .imagewrap:nth-child(1) {
  z-index: 5;
  transform: rotateZ(1deg) translate(0, 0);
}
.stack .imagewrap:nth-child(2) {
  z-index: 4;
  transform: rotateZ(-4deg) translate(-10px, 0);
}
.stack .imagewrap:nth-child(3) {
  z-index: 3;
  transform: rotateZ(-6deg) translate(-5px, 20px);
}
.stack .imagewrap:nth-child(4) {
  z-index: 2;
  transform: rotateZ(-9deg) translate(-3px, 32px);
}
.stack .imagewrap:nth-child(5) {
  z-index: 1;
  transform: rotateZ(-14deg) translate(-3px, 24px);
}

.imagewrap img {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-height: 308px;
  opacity: 1;
  padding: 40px 25px;
  border-radius: 1em;
  border-top-left-radius: 0;
  box-shadow: -5px -5px 20px rgb(255, 255, 255),
    5px 5px 20px rgba(0, 0, 0, 0.15);
}
.imagewrap img.confirmed {
  border-top-left-radius: 1em;
  box-shadow: var(--solidobject);
}


@media (min-width: 575px) and (max-width: 767px) {	
	.stack {
	  width: 70%;
	  margin: 1px 25px;
	  position: relative;
	  height: 400px;
	  
	}
	
	.stack_image_pin{  
		left: 62%;
		top: 8%;	 
	}
}


@media (max-width: 575px) {	
	.stack {
	  width: 70%;
	  margin: 1px 25px;
	  position: relative;
	  height: 400px;	  
	}
	
	
	.stack_image_pin {
		left: 62%;
		top: 8%;
	}

}