@import url('https://fonts.cdnfonts.com/css/origin-tech-demo');

:root {
	--gradient: linear-gradient(90deg,
			transparent,
			transparent 40%,
			#Ee283b,
			#00bfff,
			#00bfff);

	--loader-gradient: linear-gradient(270deg, #101010, #181818);
}

.loader-wrapper {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background: var(--loader-gradient);
	background-size: 100% 100%;
	z-index: 100000000;
	padding-left: -50px;

	-webkit-animation: rotate-bg 3s ease infinite;
	-moz-animation: rotate-bg 3s ease infinite;
	animation: rotate-bg 3s ease infinite;

	display: flex;
	align-items: center;
	justify-content: center;
	animation: loader .1s ease-in-out;
}

@keyframes loader {
	0% {

		margin-left: 2000px;
	}

	25% {

		margin-left: 1500px;
	}


	50% {

		margin-left: 1000px;
	}


	75% {

		margin-left: 500px;
	}


	100% {

		margin-left: 0px;
	}
}

.loadtext {
	background: linear-gradient(270deg, #Ee283b, #00bfff, #Ee283b);
	background-size: 100%, 100%;
	font-size: 20px;
	margin-top: -1370px;
	margin-left: -120px;
	padding-right: 350px;

	font-family: 'Origin Tech Demo', sans-serif;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: textanim 5s infinite;
}


@keyframes textanim {
	0% {
		opacity: 1;
		background-position: 0% 50%;
	}

	25% {
		opacity: 1;
		background-position: 50% 100%;
	}


	50% {
		opacity: 1;
		background-position: 100% 50%;
	}


	75% {
		opacity: 1;
		background-position: 50% 0%;
	}


	100% {
		opacity: 1;
		background-position: 0% 50%;
	}
}

/* CARREGAMENTO */
.loader {
	position: absolute;
	width: 50px;
	height: 50px;
	transition: 0.5s;
	margin-top: -20px;
}

.circle-loader {
	animation: rotate-circle 1s linear infinite;
	border-radius: 50%;
}

.box-loader {
	animation: rotate-box 3s ease infinite;
}

.loader span {
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--gradient);
	background-size: 200% 200%;
	transition: 0.5s;

	-webkit-animation: rotate-gradient 3s ease infinite;
	-moz-animation: rotate-gradient 3s ease infinite;
	animation: rotate-gradient 3s ease infinite;
}

.loader span img {
	width: 100%;
	height: 100%;
	z-index: 20000;
}

.circle-loader span {
	border-radius: 50%;
}

.loader:after {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 10px;
	right: 10px;

	background: var(--loader-gradient);
	background-size: 400% 400%;

	-webkit-animation: rotate-bg 3s ease infinite;
	-moz-animation: rotate-bg 3s ease infinite;
	animation: rotate-bg 3s ease infinite;

	transition: 0.5s;
}

.circle-loader:after {
	border-radius: 50%;
}

.loader span:nth-child(1) {
	filter: blur(5px);
}

.loader span:nth-child(2) {
	filter: blur(10px);
}

.loader span:nth-child(3) {
	filter: blur(25px);
}

.loader span:nth-child(4) {
	filter: blur(50px);
}

.pausado {
	width: 150px;
	height: 150px;
}

.pausado:after {
	top: 5px;
	bottom: 5px;
	left: 5px;
	right: 5px;
}

.pausado span:nth-child(1),
.pausado span:nth-child(2),
.pausado span:nth-child(3),
.pausado span:nth-child(4) {
	filter: blur(0px);
}

.sumir {
	animation: vanish 0.5s forwards;
}

@keyframes vanish {
	100% {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes rotate-circle {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(220deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes rotate-box {
	0% {
		transform: rotate(0deg);
	}

	10% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(90deg);
	}

	35% {
		transform: rotate(90deg);
	}

	50% {
		transform: rotate(180deg);
	}

	60% {
		transform: rotate(180deg);
	}

	75% {
		transform: rotate(270deg);
	}

	85% {
		transform: rotate(270deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes rotate-bg {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@-moz-keyframes rotate-bg {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@keyframes rotate-bg {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@-webkit-keyframes rotate-gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 200% 50%;
	}
}

@-moz-keyframes rotate-gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 200% 50%;
	}
}

@keyframes rotate-gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 200% 50%;
	}
}




.svg-frame {
	/* position: relative;
	 width: 300px;
	 height: 300px;*/
	/*transform-style: preserve-3d;*/
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin-left: -400px;
	padding-left: 0px;
	margin-top: -1640px;
}

.svg-frame svg {
	position: absolute;
	transition: .5s;
	z-index: calc(1 - (0.2 * var(--j)));
	transform-origin: center;
	width: 344px;
	height: 344px;
	fill: none;
}

.svg-frame:hover svg {
	transform: rotate(-80deg) skew(30deg) translateX(calc(45px * var(--i))) translateY(calc(-35px * var(--i)));
}

.svg-frame svg #center {
	transition: .5s;
	transform-origin: center;
}

.svg-frame:hover svg #center {
	transform: rotate(-30deg) translateX(45px) translateY(-3px);
}

#out2 {
	animation: rotate16 7s ease-in-out infinite alternate;
	transform-origin: center;
	fill: #00bfff;
}

#out3 {
	animation: rotate16 3s ease-in-out infinite alternate;
	transform-origin: center;
	stroke: #Ee283b;
}

#inner3,
#inner1 {
	animation: rotate16 4s ease-in-out infinite alternate;
	transform-origin: center;
	fill: #00bfff;
}

#center1 {
	fill: #Ee283b;
	animation: rotate16 2s ease-in-out infinite alternate;
	transform-origin: center;
}

@keyframes rotate16 {
	to {
		transform: rotate(360deg);
	}
}









/* loader for pc screens */


@media screen and (min-width: 950px) {

	:root {
		--gradient: linear-gradient(90deg,
				transparent,
				transparent 40%,
				#Ee283b,
				#00bfff,
				#00bfff);

		--loader-gradient: linear-gradient(270deg, #101010, #181818);
	}

	.loader-wrapper {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background: var(--loader-gradient);
		background-size: 100% 100%;
		z-index: 100000000;
		padding-left: 100px;

		-webkit-animation: rotate-bg 3s ease infinite;
		-moz-animation: rotate-bg 3s ease infinite;
		animation: rotate-bg 3s ease infinite;

		display: flex;
		align-items: center;
		justify-content: center;
		animation: loader .1s ease-in-out;
	}

	@keyframes loader {
		0% {

			margin-left: 2000px;
		}

		25% {

			margin-left: 1500px;
		}


		50% {

			margin-left: 1000px;
		}


		75% {

			margin-left: 500px;
		}


		100% {

			margin-left: 0px;
		}
	}

	.loadtext {
		background: linear-gradient(270deg, #Ee283b, #00bfff, #Ee283b);
		background-size: 200%, 200%;
		font-size: 30px;
		margin-top: 220px;
		margin-left: -150px;
		padding-right: 350px;

		font-family: 'Origin Tech Demo', sans-serif;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: textanim 5s infinite;
	}


	@keyframes textanim {
		0% {
			opacity: 1;
			background-position: 0% 50%;
		}

		25% {
			opacity: 1;
			background-position: 50% 100%;
		}


		50% {
			opacity: 1;
			background-position: 100% 50%;
		}


		75% {
			opacity: 1;
			background-position: 50% 0%;
		}


		100% {
			opacity: 1;
			background-position: 0% 50%;
		}
	}

	/* CARREGAMENTO */
	.loader {
		position: absolute;
		width: 75px;
		height: 75px;
		transition: 0.5s;
		margin-top: -140px;
	}

	.circle-loader {
		animation: rotate-circle 1s linear infinite;
		border-radius: 50%;
	}

	.box-loader {
		animation: rotate-box 3s ease infinite;
	}

	.loader span {
		position: absolute;
		width: 100%;
		height: 100%;
		background: var(--gradient);
		background-size: 200% 200%;
		transition: 0.5s;

		-webkit-animation: rotate-gradient 3s ease infinite;
		-moz-animation: rotate-gradient 3s ease infinite;
		animation: rotate-gradient 3s ease infinite;
	}

	.loader span img {
		width: 100%;
		height: 100%;
		z-index: 20000;
	}

	.circle-loader span {
		border-radius: 50%;
	}

	.loader:after {
		content: "";
		position: absolute;
		top: 10px;
		bottom: 10px;
		left: 10px;
		right: 10px;

		background: var(--loader-gradient);
		background-size: 400% 400%;

		-webkit-animation: rotate-bg 3s ease infinite;
		-moz-animation: rotate-bg 3s ease infinite;
		animation: rotate-bg 3s ease infinite;

		transition: 0.5s;
	}

	.circle-loader:after {
		border-radius: 50%;
	}

	.loader span:nth-child(1) {
		filter: blur(5px);
	}

	.loader span:nth-child(2) {
		filter: blur(10px);
	}

	.loader span:nth-child(3) {
		filter: blur(25px);
	}

	.loader span:nth-child(4) {
		filter: blur(50px);
	}

	.pausado {
		width: 150px;
		height: 150px;
	}

	.pausado:after {
		top: 5px;
		bottom: 5px;
		left: 5px;
		right: 5px;
	}

	.pausado span:nth-child(1),
	.pausado span:nth-child(2),
	.pausado span:nth-child(3),
	.pausado span:nth-child(4) {
		filter: blur(0px);
	}

	.sumir {
		animation: vanish 0.5s forwards;
	}

	@keyframes vanish {
		100% {
			opacity: 0;
			visibility: hidden;
		}
	}

	@keyframes rotate-circle {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(220deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes rotate-box {
		0% {
			transform: rotate(0deg);
		}

		10% {
			transform: rotate(0deg);
		}

		25% {
			transform: rotate(90deg);
		}

		35% {
			transform: rotate(90deg);
		}

		50% {
			transform: rotate(180deg);
		}

		60% {
			transform: rotate(180deg);
		}

		75% {
			transform: rotate(270deg);
		}

		85% {
			transform: rotate(270deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@-webkit-keyframes rotate-bg {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	@-moz-keyframes rotate-bg {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	@keyframes rotate-bg {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	@-webkit-keyframes rotate-gradient {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 200% 50%;
		}
	}

	@-moz-keyframes rotate-gradient {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 200% 50%;
		}
	}

	@keyframes rotate-gradient {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 200% 50%;
		}
	}




	.svg-frame {
		/* position: relative;
	 width: 300px;
	 height: 300px;*/
		/*transform-style: preserve-3d;*/
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		margin-left: 225px;
		padding-left: 200px;
		margin-top: -100px;
	}

	.svg-frame svg {
		position: absolute;
		transition: .5s;
		z-index: calc(1 - (0.2 * var(--j)));
		transform-origin: center;
		width: 344px;
		height: 344px;
		fill: none;
	}

	.svg-frame:hover svg {
		transform: rotate(-80deg) skew(30deg) translateX(calc(45px * var(--i))) translateY(calc(-35px * var(--i)));
	}

	.svg-frame svg #center {
		transition: .5s;
		transform-origin: center;
	}

	.svg-frame:hover svg #center {
		transform: rotate(-30deg) translateX(45px) translateY(-3px);
	}

	#out2 {
		animation: rotate16 7s ease-in-out infinite alternate;
		transform-origin: center;
		fill: #00bfff;
	}

	#out3 {
		animation: rotate16 3s ease-in-out infinite alternate;
		transform-origin: center;
		stroke: #Ee283b;
	}

	#inner3,
	#inner1 {
		animation: rotate16 4s ease-in-out infinite alternate;
		transform-origin: center;
		fill: #00bfff;
	}

	#center1 {
		fill: #Ee283b;
		animation: rotate16 2s ease-in-out infinite alternate;
		transform-origin: center;
	}

	@keyframes rotate16 {
		to {
			transform: rotate(360deg);
		}
	}

}