/* 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{
  --loading_graphics_background: #000000; /*<-- you can change here the page background color */
  --loading_graphics_cube1: #fff; /*<-- you can change here color of the first cube*/
  --loading_graphics_cube2: #fff;  /*<-- you can change here color of the 2nd cube*/
  --loading_graphics_cube3: #fff;  /*<-- you can change here color of the 3rd cube*/
  --loader_graphics_duration: 3s;  /*<-- you can change here the speed of the loader (less seconds make it faster)*/
  --loader_graphics_square2_delay: 0.33s;  /*<-- seconds to start animating of 2nd square (delay) */
  --loader_graphics_square3_delay: 0.66s;  /*<-- seconds to start animating of 3rd square (delay)*/
}
.loading-container_graphics.visible_loader{
	display: block;
}
.loading-container_graphics {
	height: 100vh;
	width: 100vw;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	background: var(--loading_graphics_background);
	display: none;
}

.loading-container_graphics .loader_graphics {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

span.loader-row {
	display: block;
	float: left;
	height: 30vmin;
	width: 10vmin;
	-webkit-animation: loader 3s ease-in-out infinite;
	-moz-animation: loader 3s ease-in-out infinite;
	animation: loader 3s ease-in-out infinite;
	transform-style: preserve-3d;
	-webkit-transform: rotateX(30deg) rotateY(30deg);
	-moz-transform: rotateX(30deg) rotateY(30deg);
	transform: rotateX(30deg) rotateY(30deg);
        animation-duration: var(--loader_graphics_duration);
}
span.loader-row.square1 {
  background: var(--loading_graphics_cube1);
}
span.loader-row.square2 {
  background: var(--loading_graphics_cube2);
}
span.loader-row.square3 {
  background: var(--loading_graphics_cube3);
}

span.loader-row:before {
	content: "";
	display: block;
	position: absolute;
	height: 10vmin;
	width: 10vmin;
	background: rgb(240, 240, 240);
	top: -10vmin;
	-webkit-transform: rotateX(90deg) translateY(-2.5vmin) translateX(4.5vmin);
	-moz-transform: rotateX(90deg) translateY(-2.5vmin) translateX(4.5vmin);
	transform: rotateX(90deg) translateY(-2.5vmin) translateX(4.5vmin);
}
span.loader-row.square1:before {
  background: var(--loading_graphics_cube1);
}
span.loader-row.square2:before {
  background: var(--loading_graphics_cube2);
}
span.loader-row.square3:before {
  background: var(--loading_graphics_cube3);
}


span.loader-row:after {
	content: "";
	display: block;
	position: absolute;
	height: 100%;
	width: 10vmin;
	background: rgb(240, 240, 240);
	left: 100%;
	-webkit-transform: rotateY(-270deg) translateY(-5.5vmin) translateX(3.5vmin);
	-moz-transform: rotateY(-270deg) translateY(-5.5vmin) translateX(3.5vmin);
	transform: rotateY(-270deg) translateY(-5.5vmin) translateX(3.5vmin);
}

span.loader-row.square1:after {
  background: var(--loading_graphics_cube1);
}
span.loader-row.square2:after {
  background: var(--loading_graphics_cube2);
}
span.loader-row.square3:after {
  background: var(--loading_graphics_cube3);
}


span.loader-row:nth-child(even) {
	margin: 0 10vmin;
}

span.loader-row:nth-child(2) {
	-webkit-animation-delay: var(--loader_graphics_square2_delay);
	-moz-animation-delay: var(--loader_graphics_square2_delay);
	animation-delay: var(--loader_graphics_square2_delay);
}

span.loader-row:nth-child(3) {
	-webkit-animation-delay: var(--loader_graphics_square3_delay);
	-moz-animation-delay: var(--loader_graphics_square3_delay);
	animation-delay: var(--loader_graphics_square3_delay);
}

@-webkit-keyframes loader {
	50% {
		margin-top: 20vmin;
		height: 10vmin;
	}
}

@-moz-keyframes loader {
	50% {
		margin-top: 20vmin;
		height: 10vmin;
	}
}

@keyframes loader {
	50% {
		margin-top: 20vmin;
		height: 10vmin;
	}
}