/*================== About ==================*/

#shape .circle{
	width: 8em;
	height: 8em;
	border-radius: 8em;
	background-color: #D7F205;
	opacity: 0.7;
	position: relative;
	z-index: -99;

	animation-name: shapeCircle;
    animation-duration:10s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count:infinite;
}

@keyframes shapeCircle{
    0%{
        bottom: 0;
        left: -2em;
        width: 8em;
		height: 8em;
		border-radius: 8em;
    }

    30%{
        bottom: -8em;
        left: 6em;
        width: 12em;
		height: 12em;
		border-radius: 12em;
    }

	60%{
		bottom: -2em;
		left: 12em;
		width: 10em;
		height: 10em;
		border-radius: 10em;
	}

	100%{
        bottom: 0;
        left: -2em;
        width: 8em;
		height: 8em;
		border-radius: 8em;
    }
}

#shape .borderSquare{
	width: 2.5em;
	height: 2.5em;
	border: 0.3em solid #63488f;
	background-color: transparent;
	opacity: 0.85;
	position: relative;
	z-index: 99;
	transform:rotate(45deg);

	animation-name: shapeBorderSquare;
    animation-duration:8s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes shapeBorderSquare{
    0%{
    	position: relative;
        bottom: 2vh;
        left: 30vw;
        width: 2.5em;
		height: 2.5em;
		transform:rotate(45deg);
    }

    30%{
    	position: relative;
        bottom: 4vh;
        left: 27vw;
        width: 2.5em;
		height: 2.5em;
		transform:rotate(15deg);
    }

	70%{
		position: relative;
        bottom: 5vh;
        left: 33vw;
        width: 2.5em;
		height: 2.5em;
		transform:rotate(-15deg);
	}

	100%{
		position: relative;
        bottom: 2vh;
        left: 30vw;
        width: 2.5em;
		height: 2.5em;
		transform:rotate(-45deg);
    }
}

#shape .triangle{
	position: relative;
	float: right;
	right: 20vw;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 3em 5em 3em;
	border-color: transparent transparent #AB05F2 transparent;
	opacity: 0.7;
	transform:rotate(15deg);

	animation-name: shapeTriangle;
    animation-duration:12s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes shapeTriangle{
    0%{
        right: 20vw;
        bottom: 0;
       	transform:rotate(15deg);
    }

    25%{
        right: 22vw;
        bottom: -5vh;
       	transform:rotate(-45deg);
    }

	50%{
        right: 18vw;
        bottom: 1vh;
       	transform:rotate(95deg);
    }

	75%{
        right: 22vw;
        bottom: -2vh;
       	transform:rotate(-45deg);
    }

    100%{
        right: 20vw;
        bottom: 0;
       	transform:rotate(15deg);
    }
}

#shape .borderCircle{
	width: 12em;
	height: 12em;
	border-radius: 12em;
	background-color: transparent;
	opacity: 0.7;
	position: relative;
	right: 0;
	float: right;
	border: 0.7em solid #23D987;
	z-index: 99;

	animation-name: borderCircle;
    animation-duration:10s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count:infinite;
}

@keyframes borderCircle{
    0%{
        right: 0;
        bottom: 0;
        width: 12em;
		height: 12em;
		border-radius: 12em;
    }

    33%{
        right: 7em;
        bottom: 5em;
        width: 12em;
		height: 12em;
		border-radius: 12em;
    }

	67%{
		position: relative;
		right: -7em;
        bottom: 8em;
        width: 12em;
		height: 12em;
		border-radius: 12em;
	}

	100%{
        right: 0;
        bottom: 0;
        width: 12em;
		height: 12em;
		border-radius: 12em;
    }
}

@media (max-width: 991px) {
	#shape{
		display: none;
	}
}

@media (max-width: 767px) {
	#shape{
		display: none;
	}
}



/*================== Contact ==================*/

#shapeContact{
	position: relative;
	float: right;
	right: 0;
	top: -15vh;
	z-index: 9999!important;
}


#shapeContact .triangle{
	position: relative;
	float: right;
	right: 28vw;
	bottom: -10vh;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 2em 3.4em 2em;
	border-color: transparent transparent #AB05F2 transparent;
	opacity: 0.7;
	transform:rotate(15deg);

	animation-name: shapeContactTriangle;
    animation-duration:12s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes shapeContactTriangle{
	0%{
		right: 28vw;
		bottom: -12vh;
		transform:rotate(15deg);
		border-width: 0 2em 3.4em 2em;
	}

	25%{
		right: 25vw;
		bottom: -20vh;
		transform:rotate(105deg);
		border-width: 0 2.5em 4.2em 2em;
	}

	50%{
		right: 30vw;
		bottom: -30vh;
		transform:rotate(195deg);
		border-width: 0 3em 5em 3em;
	}

	75%{
		right: 34vw;
		bottom: -17vh;
		transform:rotate(285deg);
		border-width: 0 2.5em 4.2em 2em;
	}

	100%{
		right: 28vw;
		bottom: -12vh;
		transform:rotate(375deg);
		border-width: 0 2em 3.4em 2em;
	}
}

#shapeContact .circle{
	width: 8em;
	height: 8em;
	border-radius: 8em;
	background-color: #D7F205;
	opacity: 0.7;
	position: relative;
	z-index: -99;

	animation-name: shapeContactCircle;
    animation-duration:10s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count:infinite;
}

@keyframes shapeContactCircle{
    0%{
        bottom: 0;
        right: -10vw;
        width: 8em;
		height: 8em;
		border-radius: 8em;
    }

    30%{
        bottom: -8em;
        right: -15vw;
        width: 12em;
		height: 12em;
		border-radius: 12em;
    }

	60%{
		bottom: -2em;
		right: -20vw;
		width: 10em;
		height: 10em;
		border-radius: 10em;
	}

	100%{
        bottom: 0;
        right: -10vw;
        width: 8em;
		height: 8em;
		border-radius: 8em;
    }
}

#shapeContact .borderSquare{
	width: 2.5em;
	height: 2.5em;
	border: 0.3em solid #63488f;
	background-color: transparent;
	opacity: 0.85;
	position: relative;
	z-index: 99;
	transform:rotate(45deg);

	animation-name: shapeContactBorderSquare;
    animation-duration:5s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes shapeContactBorderSquare{
    0%{
    	position: absolute;
        top: 0vw;
        right: -15vw;
        width: 2.5em;
		height: 2.5em;
		transform:rotate(45deg);
    }

    35%{
    	position: absolute;
        top: -3vh;
        right: -18vw;
        width: 2.5em;
		height: 2.5em;
		transform:rotate(15deg);
    }

	60%{
		position: absolute;
        top: -9vh;
        right: -17vw;
        width: 2.5em;
		height: 2.5em;
		transform:rotate(-15deg);
	}

	100%{
		position: absolute;
        top: 0vw;
        right: -15vw;
        width: 2.5em;
		height: 2.5em;
		transform:rotate(-45deg);
    }
}

#shapeContact .borderCircle{
	width: 12em;
	height: 12em;
	border-radius: 12em;
	background-color: transparent;
	opacity: 0.7;
	position: relative;
	right: 0;
	float: right;
	border: 0.7em solid #23D987;
	z-index: 99;

	animation-name: shapeContactBorderCircle;
    animation-duration:8s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count:infinite;
}

@keyframes shapeContactBorderCircle{
    0%{
        right: 0vw;
        bottom: 4vh;
        width: 12em;
		height: 12em;
		border-radius: 12em;
		border: 0.7em solid #23D987;
    }

    33%{
        right: 6vw;
        bottom: 0vh;
        width: 8em;
		height: 8em;
		border-radius: 8em;
		border: 0.6em solid #23D987;
    }

	67%{
		right: 8vw;
        bottom: 10vh;
        width: 6em;
		height: 6em;
		border-radius: 6em;
		border: 0.5em solid #23D987;
	}

	100%{
        right: 0vw;
        bottom: 4vh;
        width: 12em;
		height: 12em;
		border-radius: 12em;
		border: 0.7em solid #23D987;
    }
}

@media (max-width: 991px) {
	#shapeContact{
		display: none;
	}
}

@media (max-width: 767px) {
	#shapeContact{
		display: none;
	}
}