.card-group {
    margin: 0;
    height: 270px!important;
    width: 270px !important;
    perspective: 1000px;
    position: relative;
    background-color: none;
    border: 0;
    margin-top: 0;
    float: none;
    position: relative;
   
    display: grid;
    margin: auto;
}

.card {
   background: URL(/images/left.png);
  height: 240px !important;
  width: 240px !important;
  position: absolute;
  transform-style: preserve-3d;
  /*   transition: all 300ms linear; */
  animation: animate 5000ms linear infinite;
  margin: auto;
  display: grid;
  scale: .5;
}







@keyframes animate {
  to {
    transform: rotateY(360deg) rotateX(360deg);
  }
}

/*3D CUBE Styles*/
.left {
    transform: rotateY(90deg) translateZ(160px);
}

.top img, .bottom img, .left img, .right img, .front img , .back img {
     height: 300px !important;
    width: 300px !important;border-radiu:10px
}
.top, .bottom, .left, .right, .front, .back {
    border: 1px solid #000
    line-height: 1;
    font-size: 0;
    text-align: center;
    position: absolute;
    display: block;
    height: 300px !important;
    width: 300px !important;
    background-color: #fff;border-radius:30px!important;box-shadow:0 0 10px #31cde3;
}
.top{
  transform: rotateX(90deg) translateZ(160px);
}

.bottom{
  transform: rotateX(90deg) translateZ(-160px);
}

.left{
  transform: rotateY(90deg) translateZ(160px);
}

.right{
  transform: rotateY(-90deg) translateZ(160px);
}

.front{
  transform: rotateY(180deg) translateZ(160px)
}

.back{
  transform:translateZ(160px);
}


@media screen and (max-width: 640px) {
.card-group {
    margin: auto;
    height: 250px !important;
    width: 250px !important;
    perspective: 1000px;
    position: relative;
    background-color: none;
    border: 0;
    margin-top: 0;
    float: none;
    position: relative;
    top: 350px;
    margin-bottom: 0px;
    left: 0;
    display: grid;
}
.card {
    background: URL(/images/left.png);
    height: 250px  !important;
    width: 250px !important;
    position: absolute;
    transform-style: preserve-3d;
    /* transition: all 300ms linear; */
    animation: animate 5000ms linear infinite;
    right:0;
}
@keyframes animate {
  to {
    transform: rotateY(360deg) rotateX(360deg);
  }
}

/*3D CUBE Styles*/
.left {
    transform: rotateY(90deg) translateZ(160px);
}

.top img, .bottom img, .left img, .right img, .front img , .back img {
   height: 240px !important;
   width: 2740px !important;box-shadow:0 -10 px10px gold inset;border-radius:10px;padding:1px
}
.top, .bottom, .left, .right, .front, .back {
    border:1px solid dodgerblue;
    line-height:0 ;

    text-align: center;
    position: absolute;
    display: block;
    height: 270px !important;
    width: 270px !important;
    background-color: #a5ccf1bf;
}