.card-group {
    margin: 0;
    height: 240px!important;
    width: 240px !important;
    perspective: 1000px;
    position: relative;
    background-color: none;
    border: 0;
    margin-top: 0;
    float: none;
    position: relative;
    top: 11px;
    margin: auto;
    left: 80px;
    scale: 0.9;
    position: relative;
    top: 2px;
}
.card {
  background-color: none;
  height: 240px !important;
  width: 240px !important;
  position: absolute;
  transform-style: preserve-3d;
  /*   transition: all 300ms linear; */
  animation: animate 5000ms linear infinite;
  margin: auto;
  scale: .45;
}

.page-blog .card-group, .node-type-blog .card-group {
    margin: 0;
    height: 240px!important;
    width: 240px !important;
    perspective: 1000px;
    position: relative;
    background-color: none;
    border: 0;
    margin-top: 0;
    float: none;
    position: relative;
    top: 70px;
    display: grid;
    margin: auto;
    scale: 1.7;
    margin: auto;
    margin-bottom: 150px;
}
@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, .fronts img , .back img {
   height: 200px !important;
    width: 200px !important;;margin:auto;display:grid
}
.top, .bottom, .left, .right, .fronts, .back {
    border: solid 1px dodgerblue;
    line-height: 0;
    font-size: 0;
    text-align: center;
    position: absolute;
    display: block;
    height: 280px !important;
    width: 280px !important;
    background-color: #fff9;margin:auto;display:grid
}
.top{
  transform: rotateX(90deg) translateZ(160px);background:#3a60b7;border:6px solid #fff
}

.bottom{
  transform: rotateX(90deg) translateZ(-160px);background:#f00;border:6px solid #fff;
}

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

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

.fronts{
  transform: rotateY(180deg) translateZ(160px);background:#FFEB3B;
}

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


@media screen and (max-width: 640px) {


.card-group {
    margin: auto ;
    height: 240px !important;
    width: 240px !important;
    perspective: 1000px;
    position: relative;
    background-color: none;
    border: 0;
    margin-top: 0;
    float: none;
    position: relative;
    top: 170px;
    margin-bottom: 240px;
  
}
.card {
  background-color: none;
  height:240px  !important;
    width: 240px !important;
  position: absolute;
  transform-style: preserve-3d;
  /*   transition: all 300ms linear; */
  animation: animate 5000ms linear infinite;
}
@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, .fronts img , .back img {
   height: 240px !important;
    width: 240px !important;
}
.top, .bottom, .left, .right, .fronts, .back {
    border: solid 10px  none;
    line-height:0 ;

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




@media screen and (max-width: 640px) {


.card-group {
    margin: auto ;
    height: 240px !important;
    width: 240px !important;
    perspective: 1000px;
    position: relative;
    background-color: none;
    border: 0;
    margin-top: 0;
    float: none;
    position: relative;
    top: 170px;
    margin-bottom: 240px;
    margin: auto;
  
}
.front 
.card-group {
    margin: auto;
    height: 240px !important;
    width: 240px !important;
    perspective: 1000px;
    position: relative;
    background-color: none;
    border: 0;
    margin-top: 0;
    float: none;
    position: relative;
    top: 244px;
    margin-bottom: 240px;
    margin: auto;
    left: 70px;
    scale: 0.25;
}

.card {
  background-color: transparent;
  height:240px  !important;
    width: 240px !important;
  position: absolute;
  transform-style: preserve-3d;
  /*   transition: all 300ms linear; */
  animation: animate 5000ms linear infinite;
  scale: .7;
}


.page-blog .card-group, .node-type-blog .card-group {
    margin: auto;
    height: 240px !important;
    width: 240px !important;
    perspective: 1000px;
    position: relative;
    background-color: none;
    border: 0;
    margin-top: 0;
    float: none;
    position: relative;
    top: 50px;
    margin-bottom: 240px;
    margin: auto;
    margin-bottom: 70px;
    scale: 1;
    display: inline-block;
}
@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, .fronts img , .back img {
   height: 240px !important;
    width: 240px !important; border: solid 1px  dodgerblue;
}
.top, .bottom, .left, .right, .fronts, .back {
    border: solid 1px  dodgerblue;
    line-height:0 ;

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


.top{
  transform: rotateX(90deg) translateZ(160px);background:#3a60b7 url(src="https://brasmericapaversbayarea.com/images/upsidedown.mp4);border:6px solid #fff
}

.bottom{
  transform: rotateX(90deg) translateZ(-160px);background:#f00 url(src="https://brasmericapaversbayarea.com/images/upsidedown.mp4);border:6px solid #fff;
}

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

.right{
  transform: rotateY(-90deg) translateZ(160px);background:#f00 url(src="https://brasmericapaversbayarea.com/images/upsidedown.mp4);
}

.fronts{
  transform: rotateY(180deg) translateZ(160px);background:#FFEB3B url(src="https://brasmericapaversbayarea.com/images/upsidedown.mp4);
}

.back{
  transform:translateZ(160px);;background:#F1F8E9 url(src="https://brasmericapaversbayarea.com/images/upsidedown.mp4);
}