.tetrominos {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-112px, -96px);
      -ms-transform: translate(-112px, -96px);
          transform: translate(-112px, -96px);
}

.tetromino {
  width: 96px;
  height: 112px;
  position: absolute;
  -webkit-transition: all ease .3s;
          transition: all ease .3s;
  background: url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 684"%3E%3Cpath fill="%23010101" d="M305.7 0L0 170.9v342.3L305.7 684 612 513.2V170.9L305.7 0z"/%3E%3Cpath fill="%23fff" d="M305.7 80.1l-233.6 131 233.6 131 234.2-131-234.2-131"/%3E%3C/svg%3E') no-repeat top center;
}

.box1 {
  -webkit-animation: tetromino1 1.5s ease-out infinite;
          animation: tetromino1 1.5s ease-out infinite;
}

.box2 {
  -webkit-animation: tetromino2 1.5s ease-out infinite;
          animation: tetromino2 1.5s ease-out infinite;
}

.box3 {
  -webkit-animation: tetromino3 1.5s ease-out infinite;
          animation: tetromino3 1.5s ease-out infinite;
  z-index: 2;
}

.box4 {
  -webkit-animation: tetromino4 1.5s ease-out infinite;
          animation: tetromino4 1.5s ease-out infinite;
}

@-webkit-keyframes tetromino1 {
  0%, 40% {
    /* compose logo */
    /* 1 on 3 */
    /* L-shape */
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    /* pre-box */
    -webkit-transform: translate(48px, -27px);
            transform: translate(48px, -27px);
  }
  60%,
  100% {
    /* box */
    /* compose logo */
    -webkit-transform: translate(96px, 0);
            transform: translate(96px, 0);
  }
}

@keyframes tetromino1 {
  0%, 40% {
    /* compose logo */
    /* 1 on 3 */
    /* L-shape */
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    /* pre-box */
    -webkit-transform: translate(48px, -27px);
            transform: translate(48px, -27px);
  }
  60%,
  100% {
    /* box */
    /* compose logo */
    -webkit-transform: translate(96px, 0);
            transform: translate(96px, 0);
  }
}
@-webkit-keyframes tetromino2 {
  0%, 20% {
    /* compose logo */
    /* 1 on 3 */
    -webkit-transform: translate(96px, 0px);
            transform: translate(96px, 0px);
  }
  40%,
  100% {
    /* L-shape */
    /* box */
    /* compose logo */
    -webkit-transform: translate(144px, 27px);
            transform: translate(144px, 27px);
  }
}
@keyframes tetromino2 {
  0%, 20% {
    /* compose logo */
    /* 1 on 3 */
    -webkit-transform: translate(96px, 0px);
            transform: translate(96px, 0px);
  }
  40%,
  100% {
    /* L-shape */
    /* box */
    /* compose logo */
    -webkit-transform: translate(144px, 27px);
            transform: translate(144px, 27px);
  }
}
@-webkit-keyframes tetromino3 {
  0% {
    /* compose logo */
    -webkit-transform: translate(144px, 27px);
            transform: translate(144px, 27px);
  }
  20%,
  60% {
    /* 1 on 3 */
    /* L-shape */
    /* box */
    -webkit-transform: translate(96px, 54px);
            transform: translate(96px, 54px);
  }
  90%,
  100% {
    /* compose logo */
    -webkit-transform: translate(48px, 27px);
            transform: translate(48px, 27px);
  }
}
@keyframes tetromino3 {
  0% {
    /* compose logo */
    -webkit-transform: translate(144px, 27px);
            transform: translate(144px, 27px);
  }
  20%,
  60% {
    /* 1 on 3 */
    /* L-shape */
    /* box */
    -webkit-transform: translate(96px, 54px);
            transform: translate(96px, 54px);
  }
  90%,
  100% {
    /* compose logo */
    -webkit-transform: translate(48px, 27px);
            transform: translate(48px, 27px);
  }
}
@-webkit-keyframes tetromino4 {
  0%, 60% {
    /* compose logo */
    /* 1 on 3 */
    /* L-shape */
    /* box */
    -webkit-transform: translate(48px, 27px);
            transform: translate(48px, 27px);
  }
  90%,
  100% {
    /* compose logo */
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes tetromino4 {
  0%, 60% {
    /* compose logo */
    /* 1 on 3 */
    /* L-shape */
    /* box */
    -webkit-transform: translate(48px, 27px);
            transform: translate(48px, 27px);
  }
  90%,
  100% {
    /* compose logo */
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}



/* Loading PAGE CATA */

#warningGradientOuterBarG{
height:20px;
margin:auto;
width:160px;
border:1px solid #000000;
overflow:hidden;
background-color:#FFFFFF;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#000000));
background: -moz-linear-gradient(top, #FFFFFF, #000000);
background: -webkit-linear-gradient(top, #FFFFFF, #000000);
background: -ms-linear-gradient(top, #FFFFFF, #000000);
background: -o-linear-gradient(top, #FFFFFF, #000000);
background: linear-gradient(top, #FFFFFF, #000000);
}

.warningGradientBarLineG{
background-color:#FFFFFF;
float:left;
width:14px;
height:120px;
margin-right:24px;
margin-top:-28px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

.warningGradientAnimationG{
width:236px;
-moz-animation-name:warningGradientAnimationG;
-moz-animation-duration:1.3s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-webkit-animation-name:warningGradientAnimationG;
-webkit-animation-duration:1.3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-ms-animation-name:warningGradientAnimationG;
-ms-animation-duration:1.3s;
-ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear;
-o-animation-name:warningGradientAnimationG;
-o-animation-duration:1.3s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
animation-name:warningGradientAnimationG;
animation-duration:1.3s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}

#warningGradientFrontBarG{
}

@-moz-keyframes warningGradientAnimationG{
0%{
margin-left:0px;
}

100%{
margin-left:-38px;
}

}

@-webkit-keyframes warningGradientAnimationG{
0%{
margin-left:0px;
}

100%{
margin-left:-38px;
}

}

@-ms-keyframes warningGradientAnimationG{
0%{
margin-left:0px;
}

100%{
margin-left:-38px;
}

}

@-o-keyframes warningGradientAnimationG{
0%{
margin-left:0px;
}

100%{
margin-left:-38px;
}

}

@keyframes warningGradientAnimationG{
0%{
margin-left:0px;
}

100%{
margin-left:-38px;
}

}