#panels > * { width: 24%; }
#panels *,
#panels .reflect:before,
#panels .reflect:after {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
#panels {
  min-width: 940px; width: 100%; max-width: 1400px;
  margin: 21px auto;
  -webkit-perspective-origin: 50% 50%;
  -webkit-perspective: 1300px;
  perspective-origin: 50% 50%;
  perspective: 1500px;
}
#panels > * {
  display: inline-block;
  height: 500px; overflow: hidden;
  border-color:#922B9A!important;
  border: 2px solid;
  border-radius: 20px!important;
  

  background-size: contain; background-position: bottom; background-repeat: no-repeat;
  outline: 1px solid rgba(141, 72, 72, 0); /* fixes aliasing on Firefox */
}
#panels > *:nth-child(1),
#panels > *:nth-child(2) {
  -webkit-transform: rotateY(30deg) scale(0.9) translateX(5%);
  transform: rotateY(30deg) scale(0.9) translateX(5%);
}
#panels > *:nth-child(3),
#panels > *:nth-child(4) {
  -webkit-transform: rotateY(-30deg) scale(0.9)  translateX(-5%);
  transform: rotateY(-30deg) scale(0.9) translateX(-5%);
}
#panels > *:hover {
  border: 2px solid transparent;
  /* border-image: linear-gradient(315deg, #922B9A 0%, #46EACF 100%)!important; 
  border-image-slice: 1;  */
  border-color:#46eacf71!important;
  -webkit-transform: scale(1);
  transform: scale(1);
  border-radius: 20px!important;
}
#panels .icon { top: 0; left: 0; display: block; width: 100%; }
#panels .legend { font-size: 1.2em; text-transform: uppercase; font-weight: 100; opacity: 0.5; }
#panels .reflect {
  z-index: 2; position: relative;
  display: block;
  height: 286px; /* 500px - padding-top - padding-bottom */
  padding: 200px 28px 14px 14px;
  text-align: left; text-decoration: none; 
  color: white;
}
#panels .ref-title { display: block; margin-bottom: 21px;  font-size: 2em; font-weight: 600; }
#panels .reflect:hover {
  height: 416px;
  margin-top: -40px; /* 500px - padding-top - padding-bottom */
  padding: 70px 28px 14px 14px;
}
#panels .icon {
  z-index: 1;
  position: absolute;
  height: 100%;
  background-size: 400px; background-position: 50% 50%; background-repeat: no-repeat;
  opacity: 0.1;
}
#panels > *:nth-child(1) .icon { background-image: url("https://i.postimg.cc/cJBtJxNQ/Inventory.png"); }
#panels > *:nth-child(2) .icon { background-image: url("https://i.postimg.cc/0Q5MMT8h/Warehouse-Mg.png"); }
#panels > *:nth-child(3) .icon { background-image: url("https://i.postimg.cc/rmhdSfss/Ecom-Store.png"); }
#panels > *:nth-child(4) .icon { background-image: url("https://i.postimg.cc/rsKDg5RJ/Offline-sale.png"); }
#panels > *:hover .icon {opacity: 1; background-size: 100%; background-position: 50% 66.6666%; }
#panels .reflect:before {
  content: "";
  display: block;
  width: 350px; height: 520px;
  position: absolute; top: 0; left: 0;
}
#panels > *:nth-child(1) .reflect:before {
  background: linear-gradient(-45deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.125) 33.3333%, rgba(0,0,0,.05) 50%, rgba(255,255,255,0.5) 100%);
}
#panels > *:nth-child(2) .reflect:before {
  background: linear-gradient(-45deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 20%, rgba(0,0,0,0.125) 45%, rgba(0,0,0,.05) 65%, rgba(255,255,255,0.5) 100%);
}
#panels > *:nth-child(3) .reflect:before {
  background: linear-gradient(-45deg, rgba(255,255,255,0) 5%, rgba(255,255,255,.15) 30%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 60%,  rgba(255,255,255,0) 80%, rgba(255,255,255,.4) 100%);
}
#panels > *:nth-child(4) .reflect:before {
  background: linear-gradient(-45deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 50%,  rgba(255,255,255,0) 70%, rgba(255,255,255,.8) 100%);
}

#panels .reflect:hover:before { opacity: 0; }
#panels .reflect:after {
  content: "";
  display: block;
  width: 100%; height: 100%;
  position: absolute; top: 0; left: 0;
  /* background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/950358/YQGZvW_background_openspace-reflect.png"); */
  background-size: cover;
  opacity: 0.05;
}
#panels > *:nth-child(1) .reflect:after { background-position: 100%; }
#panels > *:nth-child(2) .reflect:after { background-position: 70%; }
#panels > *:nth-child(3) .reflect:after { background-position: 30%; }
#panels > *:nth-child(4) .reflect:after { background-position: 0; }
#panels > *:nth-child(1) .reflect:hover:after { background-position: 80%; }
#panels > *:nth-child(2) .reflect:hover:after { background-position: 50%; }
#panels > *:nth-child(3) .reflect:hover:after { background-position: 50%; }
#panels > *:nth-child(4) .reflect:hover:after { background-position: 20%; }
#panels .reflect:hover:after { opacity: 0.5; }

#panels > *:nth-child(1) .reflect:hover,
#panels > *:nth-child(3) .reflect:hover,
#panels > *:nth-child(4) .reflect:hover { background-color: rgba(46, 177, 229, 0); }

#panels > *:nth-child(1) .reflect:hover .ref-title { background: linear-gradient(315deg, #922B9A 0%, #46EACF 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; }

#panels > *:nth-child(2) .reflect:hover .ref-title { background: linear-gradient(315deg, #922B9A 0%, #46EACF 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; }

/* #panels > *:nth-child(2) .reflect:hover { background: linear-gradient(315deg, #922B9A 0%, #46EACF 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } */

#panels > *:nth-child(3) .reflect:hover .ref-title { background: linear-gradient(315deg, #922B9A 0%, #46EACF 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; }

#panels > *:nth-child(4) .reflect:hover .ref-title { background: linear-gradient(315deg, #922B9A 0%, #46EACF 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; }
#panels .reflect:hover .legend { opacity: 1; }