.loaderwrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100vh;
  -webkit-perspective: 400px;
          perspective: 400px;
}

.loaderwrapper .cube {
  position: relative;
  height: 60px;
  width: 60px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: rotatescale 5s infinite linear;
          animation: rotatescale 5s infinite linear;
}

.loaderwrapper .cube div {
  position: absolute;
  padding: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  width: 100%;
  border: 1px solid #fff;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 89.83 89.83'%3e%3cdefs%3e%3cstyle%3e .cls-1 %7b fill: %23f18700; animation: fillcolor 5s infinite linear;%7d .cls-2 %7b fill: %23fff;%7d %40keyframes fillcolor %7b 0%25 %7bfill:%23f18700%7d 25%25 %7bfill:%23b4425a%7d 50%25 %7bfill:%23382458%7d 75%25 %7bfill:%23b4425a%7d 100%25 %7bfill:%23f18700%7d %7d %3c/style%3e%3c/defs%3e%3ctitle%3eAsset 3%3c/title%3e%3cg id='Layer_2' data-name='Layer 2'%3e%3cg id='SmartHOTEL_logo_CMYK' data-name='SmartHOTEL logo CMYK'%3e%3crect class='cls-1' x='0' y='0' width='100' height='100'/%3e%3cpath class='cls-2' d='M58.08,51.14,55.32,70.35a1.44,1.44,0,0,0,1.46,1.7h8.36a2,2,0,0,0,2-1.7l3.77-26.78a42.58,42.58,0,0,0-12.46,5.24C58.3,49.61,58.17,50.51,58.08,51.14ZM15.31,70.35a1.45,1.45,0,0,0,1.47,1.7h8.36a2.05,2.05,0,0,0,2-1.7l2.69-19.21c.13-.94.34-2.46.48-3.4l1.06-7.5a1.6,1.6,0,0,0,0-.23,43.59,43.59,0,0,0-9.64-15.2ZM45.66,38.09c2.35,2,6.56.92,9.39-2.41S58.28,28,55.93,26s-6.56-.93-9.4,2.4S43.3,36.08,45.66,38.09Zm25.71,2,3.06-21.77A1.45,1.45,0,0,0,73,16.59H64.59a2,2,0,0,0-2,1.7L60,36.85c-.1.69-.24,1.7-.35,2.56a34.13,34.13,0,0,0-3.84.58l-1.44.34a31.31,31.31,0,0,0-11.54,5.59c-.54-7.16-4.06-13.72-9.64-19l1.2-8.59A1.45,1.45,0,0,0,33,16.59H24.58a2,2,0,0,0-1.95,1.7l-.16,1.16A53.46,53.46,0,0,0,14,16.11c13.3,7.05,23,26.08,23.8,48.79a45.52,45.52,0,0,1,27.11-22,35.94,35.94,0,0,1,11.91-1.35A43.66,43.66,0,0,0,71.37,40.06Z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
  background-position: center center;
  background-color: #FFF;
}

.loaderwrapper .cube div.front {
  -webkit-transform: translateZ(30px) scale(1);
          transform: translateZ(30px) scale(1);
}

.loaderwrapper .cube div.back {
  -webkit-transform: translateZ(-30px) rotateY(180deg) scale(1);
          transform: translateZ(-30px) rotateY(180deg) scale(1);
}

.loaderwrapper .cube div.right {
  -webkit-transform: rotateY(-270deg) translateX(30px) scale(1);
          transform: rotateY(-270deg) translateX(30px) scale(1);
  -webkit-transform-origin: top right;
          transform-origin: top right;
}

.loaderwrapper .cube div.left {
  -webkit-transform: rotateY(270deg) translateX(-30px) scale(1);
          transform: rotateY(270deg) translateX(-30px) scale(1);
  -webkit-transform-origin: center left;
          transform-origin: center left;
}

.loaderwrapper .cube div.top {
  -webkit-transform: rotateX(-270deg) translateY(-30px) scale(1);
          transform: rotateX(-270deg) translateY(-30px) scale(1);
  -webkit-transform-origin: top center;
          transform-origin: top center;
}

.loaderwrapper .cube div.bottom {
  -webkit-transform: rotateX(270deg) translateY(30px) scale(1);
          transform: rotateX(270deg) translateY(30px) scale(1);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}

@-webkit-keyframes rotatescale {
  0% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
            transform: rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: rotateX(360deg) rotateY(540deg) scale3d(0.5, 0.5, 0.5);
            transform: rotateX(360deg) rotateY(540deg) scale3d(0.5, 0.5, 0.5);
  }
  100% {
    -webkit-transform: rotateX(720deg) rotateY(1080deg) scale3d(1, 1, 1);
            transform: rotateX(720deg) rotateY(1080deg) scale3d(1, 1, 1);
  }
}

@keyframes rotatescale {
  0% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
            transform: rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: rotateX(360deg) rotateY(540deg) scale3d(0.5, 0.5, 0.5);
            transform: rotateX(360deg) rotateY(540deg) scale3d(0.5, 0.5, 0.5);
  }
  100% {
    -webkit-transform: rotateX(720deg) rotateY(1080deg) scale3d(1, 1, 1);
            transform: rotateX(720deg) rotateY(1080deg) scale3d(1, 1, 1);
  }
}

@-webkit-keyframes rotatescaleIe {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(360deg) scale(0.5);
            transform: rotate(360deg) scale(0.5);
  }
  100% {
    -webkit-transform: rotate(720deg) scale(1);
            transform: rotate(720deg) scale(1);
  }
}

@keyframes rotatescaleIe {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(360deg) scale(0.5);
            transform: rotate(360deg) scale(0.5);
  }
  100% {
    -webkit-transform: rotate(720deg) scale(1);
            transform: rotate(720deg) scale(1);
  }
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .loaderwrapper .cube {
    height: 100px;
    width: 100px;
    -webkit-animation: rotatescaleIe 3s infinite ease-in-out;
            animation: rotatescaleIe 3s infinite ease-in-out;
  }
  .loaderwrapper .cube div {
    -webkit-animation: none;
            animation: none;
  }
  .summary-panel,
  .show-summary-trigger {
    display: none !important;
  }
}