.lds-ring {
    display: inline-block;
    position: relative;
    width: 164px;
    height: 164px;
  }
  .lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 151px;
    height: 151px;
    margin: 6px;
    border: 6px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
  }
  .lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
  }
  .lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
  }
  .lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
  }
  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }


.rubiks-container {
	width: 100%;
	height:50vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}


/* Box model */
.rubiks-loader *, .rubiks-loader *::before, .rubiks-loader *::after {
	box-sizing: border-box;
  }

  /* Constants */
  /* Functions */
  /* Inheritance basis */
  .rubiks-loader {
	width: 130px;
	height: 130px;
	position: relative;
	-webkit-perspective: 130px;
			perspective: 130px;
  }

  /* Main */
  .rubiks-loader .cube {
	display: inline-block;
	width: 100%;
	height: 100%;
	font-size: 0;
	-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
  }
  .rubiks-loader .cube .piece {
	display: inline-block;
	width: 30px;
	height: 30px;
	position: absolute;
	-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
  }
  .rubiks-loader .cube .piece.row-top {
	top: 10px;
  }
  .rubiks-loader .cube .piece.row-center {
	top: 50px;
  }
  .rubiks-loader .cube .piece.row-bottom {
	top: 90px;
  }
  .rubiks-loader .cube .piece.col-left {
	left: 10px;
  }
  .rubiks-loader .cube .piece.col-center {
	left: 50px;
  }
  .rubiks-loader .cube .piece.col-right {
	left: 90px;
  }
  .rubiks-loader .cube .piece.col-left.row-top {
	-webkit-transform-origin: 55px 55px -55px;
			transform-origin: 55px 55px -55px;
  }
  .rubiks-loader .cube .piece.col-center.row-top {
	-webkit-transform-origin: 15px 55px -55px;
			transform-origin: 15px 55px -55px;
  }
  .rubiks-loader .cube .piece.col-right.row-top {
	-webkit-transform-origin: -25px 55px -55px;
			transform-origin: -25px 55px -55px;
  }
  .rubiks-loader .cube .piece.col-left.row-center {
	-webkit-transform-origin: 55px 15px -55px;
			transform-origin: 55px 15px -55px;
  }
  .rubiks-loader .cube .piece.col-center.row-center {
	-webkit-transform-origin: 15px 15px -55px;
			transform-origin: 15px 15px -55px;
  }
  .rubiks-loader .cube .piece.col-right.row-center {
	-webkit-transform-origin: -25px 15px -55px;
			transform-origin: -25px 15px -55px;
  }
  .rubiks-loader .cube .piece.col-left.row-bottom {
	-webkit-transform-origin: 55px -25px -55px;
			transform-origin: 55px -25px -55px;
  }
  .rubiks-loader .cube .piece.col-center.row-bottom {
	-webkit-transform-origin: 15px -25px -55px;
			transform-origin: 15px -25px -55px;
  }
  .rubiks-loader .cube .piece.col-right.row-bottom {
	-webkit-transform-origin: -25px -25px -55px;
			transform-origin: -25px -25px -55px;
  }
  .rubiks-loader .cube .piece.yellow {
	background-color: #f6c574;
  }
  .rubiks-loader .cube .piece.blue {
	background-color: #00aacf;
  }
  .rubiks-loader .cube .piece.green {
	background-color: #00b3a0;
  }
  .rubiks-loader .cube .piece.white {
	background-color: #e2e8e7;
  }
  .rubiks-loader .cube .piece.red {
	background-color: #fc5652;
  }
  .rubiks-loader .cube .piece.orange {
	background-color: #fc9f39;
  }
  .rubiks-loader .cube .face.back {
	-webkit-transform: rotateY(180deg);
			transform: rotateY(180deg);
  }
  .rubiks-loader .cube .face.right {
	-webkit-transform: rotateY(90deg);
			transform: rotateY(90deg);
  }
  .rubiks-loader .cube .face.left {
	-webkit-transform: rotateY(-90deg);
			transform: rotateY(-90deg);
  }
  .rubiks-loader .cube .face.up {
	-webkit-transform: rotateX(90deg);
			transform: rotateX(90deg);
  }
  .rubiks-loader .cube .face.down {
	-webkit-transform: rotateX(-90deg);
			transform: rotateX(-90deg);
  }

  /* Animations */
  /* This begins to become messy & dirty... */
  .rubiks-loader .piece {
	-webkit-animation-duration: 1.5s;
			animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
  }

  @-webkit-keyframes step-1-front-to-up {
	0% {
	  -webkit-transform: rotateX(0deg);
			  transform: rotateX(0deg);
	}
	25%, 100% {
	  -webkit-transform: rotateX(90deg);
			  transform: rotateX(90deg);
	}
  }

  @keyframes step-1-front-to-up {
	0% {
	  -webkit-transform: rotateX(0deg);
			  transform: rotateX(0deg);
	}
	25%, 100% {
	  -webkit-transform: rotateX(90deg);
			  transform: rotateX(90deg);
	}
  }
  .rubiks-loader .face.front.piece.col-center {
	-webkit-animation-name: step-1-front-to-up;
			animation-name: step-1-front-to-up;
  }

  @-webkit-keyframes step-1-down-to-front {
	0% {
	  -webkit-transform: rotateX(-90deg);
			  transform: rotateX(-90deg);
	}
	25%, 100% {
	  -webkit-transform: rotateX(0deg);
			  transform: rotateX(0deg);
	}
  }

  @keyframes step-1-down-to-front {
	0% {
	  -webkit-transform: rotateX(-90deg);
			  transform: rotateX(-90deg);
	}
	25%, 100% {
	  -webkit-transform: rotateX(0deg);
			  transform: rotateX(0deg);
	}
  }
  .rubiks-loader .face.down.piece.col-center {
	-webkit-animation-name: step-1-down-to-front;
			animation-name: step-1-down-to-front;
  }

  @-webkit-keyframes step-2-front-to-left {
	25% {
	  -webkit-transform: rotateY(0deg);
			  transform: rotateY(0deg);
	}
	50%, 100% {
	  -webkit-transform: rotateY(-90deg);
			  transform: rotateY(-90deg);
	}
  }

  @keyframes step-2-front-to-left {
	25% {
	  -webkit-transform: rotateY(0deg);
			  transform: rotateY(0deg);
	}
	50%, 100% {
	  -webkit-transform: rotateY(-90deg);
			  transform: rotateY(-90deg);
	}
  }
  .rubiks-loader .face.piece.front.row-center.col-left, .rubiks-loader .face.piece.down.row-center.col-center, .rubiks-loader .face.piece.front.row-center.col-right {
	-webkit-animation-name: step-2-front-to-left;
			animation-name: step-2-front-to-left;
  }

  @-webkit-keyframes step-2-right-to-front {
	25% {
	  -webkit-transform: rotateY(90deg);
			  transform: rotateY(90deg);
	}
	50%, 100% {
	  -webkit-transform: rotateY(0deg);
			  transform: rotateY(0deg);
	}
  }

  @keyframes step-2-right-to-front {
	25% {
	  -webkit-transform: rotateY(90deg);
			  transform: rotateY(90deg);
	}
	50%, 100% {
	  -webkit-transform: rotateY(0deg);
			  transform: rotateY(0deg);
	}
  }
  .rubiks-loader .face.right.piece.row-center {
	-webkit-animation-name: step-2-right-to-front;
			animation-name: step-2-right-to-front;
  }

  @-webkit-keyframes step-3-front-to-down {
	50% {
	  -webkit-transform: rotateX(0deg);
			  transform: rotateX(0deg);
	}
	75%, 100% {
	  -webkit-transform: rotateX(-90deg);
			  transform: rotateX(-90deg);
	}
  }

  @keyframes step-3-front-to-down {
	50% {
	  -webkit-transform: rotateX(0deg);
			  transform: rotateX(0deg);
	}
	75%, 100% {
	  -webkit-transform: rotateX(-90deg);
			  transform: rotateX(-90deg);
	}
  }
  @-webkit-keyframes step-2-3-right-to-front-to-down {
	25% {
	  -webkit-transform: rotateY(90deg);
			  transform: rotateY(90deg);
	}
	50% {
	  -webkit-transform: rotateX(0deg);
			  transform: rotateX(0deg);
	}
	75%, 100% {
	  -webkit-transform: rotateX(-90deg);
			  transform: rotateX(-90deg);
	}
  }
  @keyframes step-2-3-right-to-front-to-down {
	25% {
	  -webkit-transform: rotateY(90deg);
			  transform: rotateY(90deg);
	}
	50% {
	  -webkit-transform: rotateX(0deg);
			  transform: rotateX(0deg);
	}
	75%, 100% {
	  -webkit-transform: rotateX(-90deg);
			  transform: rotateX(-90deg);
	}
  }
  .rubiks-loader .face.piece.front.row-top.col-left, .rubiks-loader .face.piece.front.row-bottom.col-left {
	-webkit-animation-name: step-3-front-to-down;
			animation-name: step-3-front-to-down;
  }
  .rubiks-loader .face.piece.right.row-center.col-left {
	-webkit-animation-name: step-2-3-right-to-front-to-down;
			animation-name: step-2-3-right-to-front-to-down;
  }

  @-webkit-keyframes step-3-up-to-front {
	50% {
	  -webkit-transform: rotateX(90deg);
			  transform: rotateX(90deg);
	}
	75%, 100% {
	  -webkit-transform: rotateX(0deg);
			  transform: rotateX(0deg);
	}
  }

  @keyframes step-3-up-to-front {
	50% {
	  -webkit-transform: rotateX(90deg);
			  transform: rotateX(90deg);
	}
	75%, 100% {
	  -webkit-transform: rotateX(0deg);
			  transform: rotateX(0deg);
	}
  }
  .rubiks-loader .face.up.piece.col-left {
	-webkit-animation-name: step-3-up-to-front;
			animation-name: step-3-up-to-front;
  }

  @-webkit-keyframes step-4-front-to-right {
	75% {
	  -webkit-transform: rotateY(0deg);
			  transform: rotateY(0deg);
	}
	100% {
	  -webkit-transform: rotateY(90deg);
			  transform: rotateY(90deg);
	}
  }

  @keyframes step-4-front-to-right {
	75% {
	  -webkit-transform: rotateY(0deg);
			  transform: rotateY(0deg);
	}
	100% {
	  -webkit-transform: rotateY(90deg);
			  transform: rotateY(90deg);
	}
  }
  @-webkit-keyframes step-1-4-down-to-front-to-right {
	0% {
	  -webkit-transform: rotateX(-90deg);
			  transform: rotateX(-90deg);
	}
	25% {
	  -webkit-transform: rotateX(0deg);
			  transform: rotateX(0deg);
	}
	75% {
	  -webkit-transform: rotateY(0deg);
			  transform: rotateY(0deg);
	}
	100% {
	  -webkit-transform: rotateY(90deg);
			  transform: rotateY(90deg);
	}
  }
  @keyframes step-1-4-down-to-front-to-right {
	0% {
	  -webkit-transform: rotateX(-90deg);
			  transform: rotateX(-90deg);
	}
	25% {
	  -webkit-transform: rotateX(0deg);
			  transform: rotateX(0deg);
	}
	75% {
	  -webkit-transform: rotateY(0deg);
			  transform: rotateY(0deg);
	}
	100% {
	  -webkit-transform: rotateY(90deg);
			  transform: rotateY(90deg);
	}
  }
  @-webkit-keyframes step-3-4-up-to-front-to-right {
	50% {
	  -webkit-transform: rotateX(90deg);
			  transform: rotateX(90deg);
	}
	75% {
	  -webkit-transform: rotateY(0deg);
			  transform: rotateY(0deg);
	}
	100% {
	  -webkit-transform: rotateY(90deg);
			  transform: rotateY(90deg);
	}
  }
  @keyframes step-3-4-up-to-front-to-right {
	50% {
	  -webkit-transform: rotateX(90deg);
			  transform: rotateX(90deg);
	}
	75% {
	  -webkit-transform: rotateY(0deg);
			  transform: rotateY(0deg);
	}
	100% {
	  -webkit-transform: rotateY(90deg);
			  transform: rotateY(90deg);
	}
  }
  .rubiks-loader .face.piece.front.row-bottom.col-right {
	-webkit-animation-name: step-4-front-to-right;
			animation-name: step-4-front-to-right;
  }
  .rubiks-loader .face.piece.down.row-bottom.col-center {
	-webkit-animation-name: step-1-4-down-to-front-to-right;
			animation-name: step-1-4-down-to-front-to-right;
  }
  .rubiks-loader .face.piece.up.row-bottom.col-left {
	-webkit-animation-name: step-3-4-up-to-front-to-right;
			animation-name: step-3-4-up-to-front-to-right;
  }

  @-webkit-keyframes step-4-left-to-front {
	75% {
	  -webkit-transform: rotateY(-90deg);
			  transform: rotateY(-90deg);
	}
	100% {
	  -webkit-transform: rotateY(0deg);
			  transform: rotateY(0deg);
	}
  }

  @keyframes step-4-left-to-front {
	75% {
	  -webkit-transform: rotateY(-90deg);
			  transform: rotateY(-90deg);
	}
	100% {
	  -webkit-transform: rotateY(0deg);
			  transform: rotateY(0deg);
	}
  }
  .rubiks-loader .face.left.piece.row-bottom {
	-webkit-animation-name: step-4-left-to-front;
			animation-name: step-4-left-to-front;
  }