/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================


/*--------------- Rounded Circle SVG ---------------*/
.roundedCircle1, .roundedCircle2 {
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	animation: myOrbit 16s linear infinite;
	-webkit-animation: myOrbit 16s linear infinite;
	z-index: 999;	
}
@keyframes myOrbit {
	0%   {
		-webkit-transform: rotate(0deg) translateX(150px) rotate(0deg);
		transform: rotate(0deg) translateX(150px) rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(1turn) translateX(150px) rotate(-1turn);
		transform: rotate(1turn) translateX(150px) rotate(-1turn);
	}
}
.roundedCircle1 {
	background-image: linear-gradient(90deg,#F6AC01 0,#F9C13F);
	bottom: 150px;
    left: 150px;
    opacity: .7;
}
.roundedCircle2 {
	background: linear-gradient(-225deg,#ac32e4,#7918f2 48%,#4801ff);
    top: 150px;
    right: 150px;
    opacity: .5;
}
.roundedCircle3, .roundedCircle4 {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 999;
}
@keyframes ripple {
	0% {
		box-shadow: 0 0 0 1rem hsl(0deg 0% 100% / 20%), 
		0 0 0 2.5rem hsl(0deg 0% 100% / 20%), 
		0 0 0 2rem hsl(0deg 0% 100% / 20%);
	}
	100% {
		box-shadow: 0 0 0 2.5rem hsl(0deg 0% 100% / 20%), 
		0 0 0 8rem hsl(0deg 0% 100% / 20%), 
		0 0 0 16rem hsl(0deg 0% 100% / 0%);
	}
}
.roundedCircle3 {
    width: 20px;
    height: 20px;
    top: 50%;
    left: 0;
    opacity: .3;
    -webkit-animation: ripple 15s linear infinite;
    animation: ripple 15s linear infinite;
}
.roundedCircle4 {
    width: 20px;
    height: 20px;
    top: 50%;
    right: 0;
    opacity: .4;
    -webkit-animation: ripple 8s linear infinite;
    animation: ripple 8s linear infinite;
}
@media (max-width: 500px) {
	.roundedCircle3, .roundedCircle4 {
		display: none;
	}
}
/*--------------- Rounded Circle Zigzag ---------------*/
.roundedCircle-zigzag {
	width: 1rem;
    height: 1rem;
    background: #005552;
    border-radius: 50%;
    position: absolute;
    top: 35%;
    left: 15%;
	opacity: .8;
    border: none;
    z-index: 1;
    -webkit-animation: zigZag 15s linear infinite alternate;
    animation: zigZag 15s linear infinite alternate;
}
@keyframes zigZag {
	0% {
		-webkit-transform: translate(0) rotate(0deg);
		transform: translate(0) rotate(0deg);
	}
	20% {
		-webkit-transform: translate(73px,-1px) rotate(36deg);
		transform: translate(73px,-1px) rotate(36deg);
	}
	40% {
		-webkit-transform: translate(141px,72px) rotate(72deg);
		transform: translate(141px,72px) rotate(72deg);
	}
	60% {
		-webkit-transform: translate(83px,122px) rotate(108deg);
		transform: translate(83px,122px) rotate(108deg);
	}
	80% {
		-webkit-transform: translate(-40px,72px) rotate(144deg);
		transform: translate(-40px,72px) rotate(144deg);
	}
	100% {
		-webkit-transform: translate(0) rotate(0deg);
		transform: translate(0) rotate(0deg);
	}
}
/*--------------- Star-Shape ---------------*/
.star1 {
	position: absolute;
    top: 25%;
    right: 15%;
    bottom: auto;
    left: auto;
    z-index: 1;
    -webkit-animation: rotateStar 10s linear infinite;
    animation: rotateStar 10s linear infinite;
}
@keyframes rotateStar {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}

/*--------------- Triangle-Shape ---------------*/
.triangle1 {
	position: absolute;
    top: 65%;
    right: 13%;
    bottom: auto;
    left: auto;
    z-index: 1;
    -webkit-animation: rotateTriangle 5s linear infinite;
    animation: rotateTriangle 5s linear infinite;
}
@keyframes rotateTriangle {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}