.card-ce-overflowhidden {
      overflow: hidden;
      }


    .card-ce-overlay-fadeeffect:hover {
        opacity: 1;
        transition: all 2s ease-in-out;
     }

    /* fading effect */
    .card-ce-overlay-fadeeffect {        
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .5s ease;
         transition-duration: 3s;
      }
      
    /* sliding effect  */
    .card-ce-overlay-slideeffect {
      transform:   translateX(-300%);
      transition: all 0.3s ease-in-out;
    }

    .card-ce-overlay-slideeffect-hover {
        transform: translateX(0%);
        transition-delay: 500ms;
        background-color: $cecardBGHoverColor;
        color: $componentFontColor;
      }

.maincontainer {
  position: relative;
  /* width: 250px;
  height: 320px; */
  background: none;
  /* top: 50%;
  left: 50%; */
  /* transform: translate(-50%, -50%); */
}

.card-container-ce-main {
  /* position: relative; */
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
}


.card-container-ce-main-flip:hover {

  .card-container-ce-flip{
    transform: rotateY(180deg);
  }
  .ce-flip-card-back {
    overflow: auto;
  }
  
}

.card-container-ce-flip {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.ce-flip-card-front, .ce-flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
}
 
.ce-flip-card-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
}





.card-container-ce-main-zoom:hover {

  .ce-zoom-card-front{
    display: block;
  }

  .ce-zoom-card-back {
    overflow: auto;
    display: block;
    display: flex;
    flex-direction: column;
    // color: $cardCeColor;
    background: $cardCeBGColor;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
  } 
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2);
  z-index: 300 !important;
  // filter: grayscale(50%);
}

.card-container-ce-main-zoom{
  transition: transform .2s; /* Animation */
}

.ce-zoom-card-front, .ce-zoom-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  
}
 
.ce-zoom-card-back {
  display: none;
}