/* global vars (here you can easily modify how the loader looks) 
 ** And if the style you're looking for is not listed here,
** or, if you require a completely different custom loader,
** you can always contact us at support@awe.media
*/
:root{
    --loader_custom_color_background: #D8D7D8;  /* <-- page background color */
    --loader_3dcube_color1: #0c4b90;  /* <-- first cube color */
    --loader_3dcube_color2: #488ed9;  /* <-- second cube color */
    --loader_3dcube_color3: #5e82a9  /* <-- third cube color */
  }
  
  
  .visible_loader.square_loader{
    display: flex;
    box-sizing: border-box;
  }
  
  .square_loader{
    background-color: var( --loader_custom_color_background); 
    display: none;
    margin:0;
    min-height:105vh;
    min-width: 105vw;
    justify-content:center;
    align-items:center;
    padding:0; 
    box-sizing: border-box; 
    margin-top: -5vh;
    margin-left: -5vw;
  }
  
  .loader_holder > div {
      width: 30%;
      height: 100%;
      transform-style: preserve-3d;
  }
  .loader_holder > div > div {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.8;
  }
  
  .square_front_side, .back {
      width: 100%;
      height: 100%;
  }
  .square_front_side {
      transform: translateZ(-0.15em);
  }
  .square_back_side {
      transform: translateZ(0.15em);
  }
  .square_left_side {
      width: 100%;
      height: 100%;
      transform-origin: left center;
      transform: rotate3d(0, -1, 0, 90deg) translateX(-0.15em);
  }
  .square_right_side {
      width: 100%;
      height: 100%;
      transform-origin: right center;
      transform: rotate3d(0, 1, 0, 90deg) translateX(0.15em);
  }
  
  .square_top_side {
      width: 100%;
      height: 30%;
      transform-origin: center top;
      transform: rotate3d(1, 0, 0, 90deg)
                 translateY(-0.15em);
  }
  .square_bottom_side {
      width: 100%;
      height: 30%;
      transform-origin: center top;
      transform: rotate3d(1, 0, 0, 90deg)
                 translateZ(-1em)
                 translateY(-0.15em);
  }
  
  .square_color1 > div {
      background: var( --loader_3dcube_color1); 
  }
  .square_color2 > div {
      background: var( --loader_3dcube_color2);
  }
  .square_color3 > div {
      background: var( --loader_3dcube_color3); 
  }
  
  .loader_holder {
  width: 100px;
      height: 100px;
      font-size: 100px;
      display: flex;
      justify-content: space-between;
      transform: perspective(100px);
      transform-style: preserve-3d;
      -webkit-animation: 3s flip_loader infinite;
      animation: 3s flip_loader infinite;
      animation-delay: 1s;
  -webkit-animation-delay: 1s;
  }
  .loader_holder .square_color3 {
      animation: 3s flip_color1 infinite;
      animation-delay: 1s;
  }
  .loader_holder .square_color2 {
      animation: 3s flip_color2 infinite;
      animation-delay: 1s;
  }
  .loader_holder .square_color1 {
      animation: 3s flip_color1 infinite;
      animation-delay: 1s;
  }
  
  @-webkit-keyframes flip_loader {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
      100% {
          transform: perspective(100px) 
                     rotate3d(1, 1, 1, 360deg);
      }
  }
  
  @keyframes flip_loader {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
      100% {
          transform: perspective(100px) 
                     rotate3d(1, 1, 1, 360deg);
      }
  }
  @keyframes flip_color2 {
      100% {
          transform: rotateX(180deg);
      }
  }
  @keyframes flip_color1 {
      100% {
          transform: rotateX(-180deg);
      }
  }
  
  