/*
 ________  __       __       __    __  _____      __
|   __   ||  |     /  \     |  |  |  ||  __ \    |  |
|  |__|  ||  |    /    \    |  |\ |  || |__) |   |  |
|   _____||  |   /  /\  \   |  | \|  ||      /   |  |____ ___      ___
|  |      |  |  /  /__\  \  |  |\ |  ||  __  \   |  ___  |\  \    /  /
|  |      |  | /  /    \  \ |  | \|  || |__)  |_ | |___| | \  \__/  /
|__|      |__|/__/      \__\|__|  |__||_______(_)|_______|  \      /
                                                            _|    /
                                                           |     /
                                                           |____/
*/
.em-fadeDown, .em-fadeBackground, .em-fadeTop, .em-fadeLeft, .em-fadeRight, .em-fadeOverlay, .em-fadeOverlayCircle, .em-fadeOverlay2 {position: relative;}

.em-fadeInRight {transition: 1s;transform: translateX(150%);}
.em-fadeInRight[data-emergence=visible] {transform: translateX(0);}

.em-fadeInLeft {transition: 1s;transform: translateX(-150%);}
.em-fadeInLeft[data-emergence=visible] {transform: translateX(0);}

.em-fadeIn {transition: 1s;opacity: 0;}
.em-fadeIn[data-emergence=visible] {opacity: 1;}

.em-fadeOut {transition: 1s;height: 0;}
.em-fadeOut[data-emergence=visible] {height: 100%;}

.em-fadeBackground:after {content: '';position: absolute;top: 0;left: 0;height: 100%;width: 0;background-color: var(--grey);z-index: -1;transition: width 1s ease-in-out;}
.em-fadeBackground[data-emergence=visible]:after {width: 100%;}

.em-fadeDown:after {content: '';display: block;height: 100%;position: absolute;bottom: 0;right: 0;left: 0;background-color: #fff;z-index: 1;transition: width 1s ease-in-out;}
.em-fadeDown[data-emergence=visible]:after {height: 0;transition: all .6s ease-in-out;}

.em-fadeTop:after {content: '';display: block;height: 100%;position: absolute;top: 0;right: 0;left: 0;background-color: #fff;z-index: 1;transition: width 1s ease-in-out;}
.em-fadeTop[data-emergence=visible]:after {height: 0;transition: all .6s ease-in-out;}

.em-fadeLeft:after {content: '';position: absolute;top: 0;left: 0;height: 100%;width: 100%;background-color: #fff;z-index: 1;transition: width 1s ease-in-out;}
.em-fadeLeft[data-emergence=visible]:after {width: 0;}

.em-fadeRight:after {content: '';position: absolute;top: 0;right: 0;height: 100%;width: 100%;background-color: #fff;z-index: 1;transition: width 1s ease-in-out;}
.em-fadeRight[data-emergence=visible]:after {width: 0;}

.em-fadeOverlay[data-emergence=visible]:after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: white;z-index: 10;animation: overlay-animation 2s forwards;}
.em-fadeOverlay[data-emergence=visible] {opacity: 1;}

.em-Rotate360 {transform: rotate(0deg);transition: 1s;}
.em-Rotate360[data-emergence=visible] {transform: rotateY(360deg);}

.em-svgDraw[data-emergence=hidden] > * > * > *, .em-svgDraw > * > * > * {stroke-dasharray: 30000;stroke-dashoffset: 30000;}
.em-svgDraw[data-emergence=visible] > * > * > * {animation: animated-svg 2.6s ease-out forwards;}
.em-svgDraw  > * > * > * {stroke: blue;transition: all .6s ease-in-out;}
.em-svgDraw:hover  > * > * > *:nth-child(even) {stroke: green;transition: all .6s ease-in-out;}

@keyframes overlay-animation {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes animated-svg {
	to {
		stroke-dashoffset: 0;
	}
}