.card-group {
    margin: 0;
    height: 275px!important;
    width: 275px !important;
    perspective: 1000px;
    position: relative;
    background-color: none;
    border: 0;
    margin-top: 0;
    float: none;
    position: relative;
    scale: .3;
    display: grid;
    margin: 40px;

}
.page-blog .card-group {
    margin: 0;
    height: 250px!important;
    width: 250px !important;
    perspective: 1000px;
    position: relative;
    background-color: none;
    border: 0;
    margin-top: 0;
    float: none;
    position: relative;
    top: 0;
    display: grid;
    margin: auto;
    margin-bottom: -30px;
}
.card {
    height: 275px !important;
    width: 275px !important;
    position: absolute;
    transform-style: preserve-3d;
    /* transition: all 300ms linear; */
    animation: animate 5000ms linear infinite;
    margin: auto;
    display: grid;
    scale: .5;
    background: #fff url(/images/Boss.webp);
    border-radius: 50%;
}












@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: 275px !important;
   width: 275px !important;
   border-radius: 28px;
   padding: 30px;
   background: #fff;
}
.top, .bottom, .left, .right, .front, .back {
    
    line-height: 0;
    font-size: 0;
    text-align: center;
    position: absolute;
    display: block;
    height: 275px !important;
    width: 275px !important;
    background: #fff url(/images/Boss.webp);
}
.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: 275px !important;
    width: 275px !important;
    perspective: 1000px;
    position: relative;
    background-color: none;
    border: 0;
    margin-top: 0;
    float: none;
    position: relative;
    top: 170px;
    margin-bottom: 240px;
  
}
.card {
    height: 275px !important;
    width: 275px !important;
    position: absolute;
    transform-style: preserve-3d;
    /* transition: all 300ms linear; */
    animation: animate 5000ms linear infinite;
    margin: auto;
    display: grid;
    scale: .5;
    background: #fff url(/images/Boss.webp);
    border-radius: 50%;
}
@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: 275px !important;
    width: 275px !important;
}
.top, .bottom, .left, .right, .front, .back {
    border: 0;
    line-height:0 ;

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




@media screen and (max-width: 640px) {
.card-group {
    margin: auto;
    height: 275px !important;
    width: 275px !important;
    perspective: 1000px;
    position: relative;
    background-color: none;
    border: 0;
    margin-top: 0;
    float: none;
    position: relative;
    top: -17px;
    margin-bottom: 240px;
    display: grid;
    margin: auto;
    scale: 1;
    margin-bottom: -30px;
}

.card {
    height: 275px !important;
    width: 275px !important;
    position: absolute;
    transform-style: preserve-3d;
    /* transition: all 300ms linear; */
    animation: animate 5000ms linear infinite;
    margin: auto;
    display: grid;
    scale: .5;
    background: #fff url(/images/Boss.webp);
    border-radius: 50%;
}



@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: 275px !important;
    width: 275px !important;border: solid 10px  #000;
}
.top, .bottom, .left, .right, .front, .back {
    border: solid 10px  ;
    line-height:0;
    text-align: center;
    position: absolute;
    display: block;
    height: 275px !important;
    width: 275px !important;
    background-color:none ;
}