@charset "UTF-8";
/* CSS Document */

.loader {
	width:100%;
	height:100%;
	background:#fff;
	transition:0.5s;
	position:fixed;
	z-index:1001;
	display:block;
	transition:0.5s;
	padding-top:25%;
}

.loaded {
	display:none;
}

[class*="cmn-spinner"] {
  position: relative;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  color: rgba(0, 0, 0, 0);
  font-size: 0;
  text-indent: -99999px;
	animation-name:zoomIn;
	animation-duration:0.4s;
	animation-name:zoomOut;
	animation-duration:1s;
	animation-delay:1s;
}

.cmn-spinner__squarediamond::before, .cmn-spinner__squarediamond::after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
}
.cmn-spinner__squarediamond::before {
  width: 100%;
  height: 100%;
  border: solid 2px #ccb055;
  animation: cmn-spinner--animation__squarediamond1 2s infinite;
}
.cmn-spinner__squarediamond::after {
  width: 40%;
  height: 40%;
  border: solid 2px #ccc;
  transform: rotate(45deg);
  animation: cmn-spinner--animation__squarediamond2 2s infinite;
}

/* animation keyframes - squarediamond1 */
@keyframes cmn-spinner--animation__squarediamond1 {
  0% {
    transform: rotate(0);
    width: 100%;
    height: 100%;
  }

  50% {
    transform: rotate(360deg);
    width: 40%;
    height: 40%;
  }

  100% {
    transform: rotate(720deg);
    width: 100%;
    height: 100%;
  }
}

/* animation keyframes - squarediamond2 */
@keyframes cmn-spinner--animation__squarediamond2 {
  0% {
    transform: rotate(45deg);
    width: 40%;
    height: 40%;
  }

  50% {
    transform: rotate(405deg);
    width: 100%;
    height: 100%;
  }

  100% {
    transform: rotate(765deg);
    width: 40%;
    height: 40%;
  }
}