.loading-page {
    background: #141414;
    width: 100%;
    height: 100%;
    z-index: 9999999999;
    position: fixed;
	top: 0;
    left: 0;
}
	
.loading-page .main-square{
	position: absolute;
	top: 45%;
	left: 45%;
	transform: translate(-50%,-50%);
	text-align: center;
	transform: rotate(45deg);
}

.loader-box .main-square{
	position: relative;
	text-align: center;
	transform: rotate(45deg);
	width: 100%;
	height: 100%;
}

.loading-page .square,
.loader-box .square{
	width: calc(100% * 0.25);
	height: calc(100% * 0.25);
	background-color: rgba(255,255,255,0);
	margin-right: auto;
	margin-left: auto;
	border-style: solid;
	border-width: 2px;
	left: calc(100% * 0.36);
    top: calc(100% * 0.36);
	position: absolute;
}

.loader-box .square {border-color: rgb(129,130, 134);}

.loading-page .first_square,
.loader-box .first_square{
  animation: first_square_animate 1s infinite ease-in-out;
}
.loading-page .second_square,
.loader-box .second_square {
	animation: second_square 1s forwards, second_square_animate 1s infinite ease-in-out;
}	
.loading-page .third_square,
.loader-box .third_square{
	animation: third_square 1s forwards, third_square_animate 1s infinite ease-in-out;
}	

.loading-page[data-size="small"] .main-square{width: 100px; height: 100px;}
.loading-page[data-size="medium"] .main-square{width: 150px; height: 150px;}
.loading-page[data-size="large"] .main-square{width: 200px; height: 200px;}

@keyframes second_square {
  100% { width: calc(100% * 0.5); height:calc(100% * 0.5); left: calc(100% * 0.24); top: calc(100% * 0.24); }
}

@keyframes third_square {
  100% { width: calc(100% * 0.75); height:calc(100% * 0.75); left: calc(100% * 0.12); top: calc(100% * 0.12);}
}

@keyframes first_square_animate {
  0%   { transform: perspective(100px) rotateX(0deg) rotateY(0deg);} 
  50%  { transform: perspective(100px) rotateX(-180deg) rotateY(0deg); }
  100% { transform: perspective(100px) rotateX(-180deg) rotateY(-180deg); }
}

@keyframes second_square_animate {
  0%   { transform: perspective(200px) rotateX(0deg) rotateY(0deg); } 
  50%  { transform: perspective(200px) rotateX(180deg) rotateY(0deg); } 
  100% { transform: perspective(200px) rotateX(180deg) rotateY(180deg); }
}

@keyframes third_square_animate {
  0%   { transform: perspective(300px) rotateX(0deg) rotateY(0deg); } 
  50%  { transform: perspective(300px) rotateX(-180deg) rotateY(0deg); } 
  100% { transform: perspective(300px) rotateX(-180deg) rotateY(-180deg); }
 }
 
@media (max-width: 450px){
	
	.loading-page[data-size="small"] .main-square {
		top: 40%;
		left: 37%;
	}
	
	.loading-page[data-size="medium"] .main-square {
		top: 40%;
		left: 29%;
	}
	
	.loading-page[data-size="large"] .main-square {
		top: 30%;
		left: 22%;
	}
}