@-webkit-keyframes fadein{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes fadein{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/* Special fade in for pupil SVG to force firefox to render it consistently*/
@-webkit-keyframes pupil{
    0%{
        opacity: 0;
        transform: translateY(1px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}
@keyframes pupil{
    0%{
        opacity: 0;
        transform: translateY(1px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}
@-webkit-keyframes lowereye{
    0%{
        opacity: 0;
        transform: translateY(-10px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}
@keyframes lowereye{
    0%{
        opacity: 0;
        transform: translateY(-10px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}

@-webkit-keyframes uppereye{
    0%{
        opacity: 0;
        transform: scaleY(-100%);
    }
    100%{
        opacity: 1;
        transform: scaleY(100%);
    }
}
@keyframes uppereye{
    0%{
        opacity: 0;
        transform: scaleY(-100%);
    }
    100%{
        opacity: 1;
        transform: scaleY(100%);
    }
}

@-webkit-keyframes beams{
    0%{
        opacity: 0;
        transform: rotate(10deg) scale(90%);
    }
    100%{
        opacity: 1;
        transform: rotate(0deg) scale(100%);
    }
}
@keyframes beams{
    0%{
        opacity: 0;
        transform: rotate(10deg) scale(90%);
    }
    100%{
        opacity: 1;
        transform: rotate(0deg) scale(100%);
    }
}

@-webkit-keyframes breathe{
    0%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(10px);
    }
    100%{
        transform: translateY(0px);
    }
}
@keyframes breathe{
    0%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(10px);
    }
    100%{
        transform: translateY(0px);
    }
}

@-webkit-keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(-90deg);
    }
    50%{
        transform: rotate(-180deg);
    }
    75%{
        transform: rotate(-270deg);
    }
    100%{
        transform: rotate(-360deg);
    }
}
@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(-90deg);
    }
    50%{
        transform: rotate(-180deg);
    }
    75%{
        transform: rotate(-270deg);
    }
    100%{
        transform: rotate(-360deg);
    }
}

@-webkit-keyframes navWhy{
    0%{
        left: calc(50% - 327px);
        top: calc(50% - 366px);
    }
    50%{
        left: calc(50% - 327px);
        top: -60px;
    }
    100%{
        left: -31px;
        top: -60px;
    }
}
@keyframes navWhy{
    0%{
        left: calc(50% - 327px);
        top: calc(50% - 366px);
    }
    50%{
        left: calc(50% - 327px);
        top: -60px;
    }
    100%{
        left: -31px;
        top: -60px;
    }
}
@media (max-width: 1450px){
    @-webkit-keyframes navWhy{
		0%{
			left: calc(50% - 297px);
			top: calc(50% - 306px);
		}
		50%{
			left: calc(50% - 297px);
			top: -40px;
		}
		100%{
			left: -18px;
			top: -40px;
		}
    }
    @keyframes navWhy{
		0%{
			left: calc(50% - 297px);
			top: calc(50% - 306px);
		}
		50%{
			left: calc(50% - 297px);
			top: -40px;
		}
		100%{
			left: -18px;
			top: -40px;
		}
    }
}
@media (max-width: 991px){
    @-webkit-keyframes navWhy{
        0%{
            left: calc(50% - 149px);
			top: calc(50% - 141px);
        }
        50%{
            left: calc(50% - 149px);
            top: -20px;
        }
        100%{
            top: -20px;
            left: -10px;
        }
    }
    @keyframes navWhy{
        0%{
            left: calc(50% - 149px);
			top: calc(50% - 141px);
        }
        50%{
            left: calc(50% - 149px);
            top: -20px;
        }
        100%{
            top: -20px;
            left: -10px;
        }
    }
}

@-webkit-keyframes navWhat{
    0%{
		right: calc(50% - 366px);
		top: calc(50% - -124px);
    }
    50%{
        right: -30px;
		top: calc(50% - -124px);
    }
    100%{
        right: -30px;
        top: 429px;
    }
}
@keyframes navWhat{
    0%{
		right: calc(50% - 366px);
		top: calc(50% - -124px);
    }
    50%{
        right: -49px;
		top: calc(50% - -124px);
    }
    100%{
        right: -49px;
        top: 429px;
    }
}
@media (max-width: 1450px){
    @-webkit-keyframes navWhat{
		0%{
			right: calc(50% - 276px);
			top: calc(50% - -110px);
		}
		50%{
			right: -16px;
			top: calc(50% - -110px);
		}
		100%{
			right: -16px;
			top: 376px;
		}
    }
    @keyframes navWhat{
		0%{
			right: calc(50% - 276px);
			top: calc(50% - -110px);
		}
		50%{
			right: -13px;
			top: calc(50% - -110px);
		}
		100%{
			right: -13px;
			top: 376px;
		}
    }
}
@media (max-width: 991px){
    @-webkit-keyframes navWhat{
        0%{
            right: calc(50% - 131px);
			top: calc(50% - -56px);
        }
        50%{
            right: -13px;
			top: calc(50% - -56px);
        }
        100%{
			right: -13px;
			top: 173px;
        }
    }
    @keyframes navWhat{
        0%{
            right: calc(50% - 131px);
			top: calc(50% - -56px);
        }
        50%{
            right: -13px;
			top: calc(50% - -56px);
        }
        100%{
            right: -13px;
			top: 173px;
        }
    }
}

@-webkit-keyframes navWho{
    0%{
        bottom: calc(50% - 376px);
        right: calc(50% - 340px);
    }
    50%{
        right: calc(50% - 340px);
        bottom: -72px;
    }
    100%{
        bottom: -72px;
        right: -3px;
    }
}
@keyframes navWho{
    0%{
        bottom: calc(50% - 376px);
        right: calc(50% - 340px);
    }
    50%{
        right: calc(50% - 340px);
        bottom: -72px;
    }
    100%{
        bottom: -72px;
        right: -3px;
    }
}
@media (max-width: 1450px){
    @-webkit-keyframes navWho{
		0%{
			bottom: calc(50% - 326px);
			right: calc(50% - 256px);
		}
		50%{
			right: calc(50% - 256px);
			bottom: -45px;
		}
		100%{
			bottom: -45px;
			right: 6px;
		}
    }
    @keyframes navWho{
		0%{
			bottom: calc(50% - 326px);
			right: calc(50% - 256px);
		}
		50%{
			right: calc(50% - 256px);
			bottom: -45px;
		}
		100%{
			bottom: -45px;
			right: 6px;
		}
    }
}
@media (max-width: 991px){
    @-webkit-keyframes navWho{
        0%{
            bottom: calc(50% - 160px);
			right: calc(50% - 120px);
        }
        50%{
			right: calc(50% - 120px);
            bottom: -35px;
        }
        100%{
            bottom: -35px;
            right: -10px;
        }
    }
    @keyframes navWho{
        0%{
            bottom: calc(50% - 160px);
			right: calc(50% - 120px);
        }
        50%{
			right: calc(50% - 120px);
            bottom: -35px;
        }
        100%{
            bottom: -35px;
            right: -10px;
        }
    }
}

@-webkit-keyframes navWork{
    0%{
		right: calc(50% - -152px);
		bottom: calc(50% - 551px);
    }
    50%{
        right: calc(100% - 166px);
		bottom: calc(50% - 551px);
    }
    100%{
		right: calc(100% - 166px);
		bottom: -242px;
    }
}
@keyframes navWork{
    0%{
		right: calc(50% - -152px);
		bottom: calc(50% - 551px);
    }
    50%{
        right: calc(100% - 166px);
		bottom: calc(50% - 551px);
    }
    100%{
		right: calc(100% - 166px);
		bottom: -242px;
    }
}
@media (max-width: 1450px){
    @-webkit-keyframes navWork{
		0%{
			right: calc(50% - -148px);
			bottom: calc(50% - 474px);
		}
		50%{
			right: calc(100% - 146px);
			bottom: calc(50% - 474px);
		}
		100%{
			right: calc(100% - 146px);
			bottom: -202px;
		}
    }
    @keyframes navWork{
		0%{
			right: calc(50% - -148px);
			bottom: calc(50% - 474px);
		}
		50%{
			right: calc(100% - 146px);
			bottom: calc(50% - 474px);
		}
		100%{
			right: calc(100% - 146px);
			bottom: -202px;
		}
    }
}
@media (max-width: 991px){
    @-webkit-keyframes navWork{
        0%{
            left: calc(50% - 221px);
			bottom: calc(50% - 230px);
        }
        50%{
            left: -80px;
            bottom: calc(50% - 230px);
        }
        100%{
			left: -80px;
			bottom: -105px;
        }
    }
    @keyframes navWork{
        0%{
            left: calc(50% - 221px);
			bottom: calc(50% - 230px);
        }
        50%{
            left: -80px;
            bottom: calc(50% - 230px);
        }
        100%{
			left: -80px;
			bottom: -105px;
        }
    }
}

@-webkit-keyframes navSlidein{
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(0%);
    }
}
@keyframes navSlidein{
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(0%);
    }
}

@-webkit-keyframes beamsWiggle {
    0%{
        transform: rotate(0);
    }
    25%{
        transform: rotate( -1deg);
    }
    75%{
        transform: rotate( 1deg) scaleY(98%);
    }
    100%{
        transform: rotate(0deg);
    }
}
@keyframes beamsWiggle {
    0%{
        transform: rotate(0);
    }
    25%{
        transform: rotate( -1deg);
    }
    75%{
        transform: rotate( 1deg) scaleY(98%);
    }
    100%{
        transform: rotate(0deg);
    }
}


@-webkit-keyframes WhyNamesIn {
    0%{
		opacity:0;
        transform:translatey(-300%);
    }
	40% {
		opacity:1;
	}
    100%{
        transform:translatey(0%);
    }
}
@keyframes WhyNamesIn {
    0%{
		opacity:0;
        transform:translatey(-300%);
    }
	40% {
		opacity:1;
	}
    100%{
        transform:translatey(0%);
    }
}

@-webkit-keyframes WhyImagesIn {
    0%{
		opacity:0;
        transform:translatey(300%);
    }
	40% {
		opacity:1;
	}
    100%{
        transform:translatey(0%);
    }
}
@keyframes WhyImagesIn {
    0%{
		opacity:0;
        transform:translatey(200%);
    }
	40% {
		opacity:1;
	}
    100%{
        transform:translatey(0%);
    }
}




@-webkit-keyframes colorLoop {
    0%{
        background-color: #f2f2f2;
    }
    10%{
        background-color: #ff7d7d;
    }
    20%{
        background-color: #feb981;
    }
    30%{
        background-color: #fee581;
    }
    40%{
        background-color: #e8fe7f;
    }
    50%{
        background-color: #b1fd7f;
    }
    60%{
        background-color: #7dfe99;
    }
    70%{
        background-color: #7efde3;
    }
    80%{
        background-color: #7fbefd;
    }
    90%{
        background-color: #857efd;
    }
    100%{
        background-color: #f2f2f2;
    }
}
@keyframes colorLoop {
    0%{
        background-color: #f2f2f2;
    }
    10%{
        background-color: #ff7d7d;
    }
    20%{
        background-color: #feb981;
    }
    30%{
        background-color: #fee581;
    }
    40%{
        background-color: #e8fe7f;
    }
    50%{
        background-color: #b1fd7f;
    }
    60%{
        background-color: #7dfe99;
    }
    70%{
        background-color: #7efde3;
    }
    80%{
        background-color: #7fbefd;
    }
    90%{
        background-color: #857efd;
    }
    100%{
        background-color: #f2f2f2;
    }
}
@-webkit-keyframes colorLoops {
    0%{
        background-color: #f2f2f2;
    }
    10%{
        background-color: #ff7d7d;
    }
    20%{
        background-color: #feb981;
    }
    30%{
        background-color: #fee581;
    }
    40%{
        background-color: #e8fe7f;
    }
    50%{
        background-color: #b1fd7f;
    }
    60%{
        background-color: #7dfe99;
    }
    70%{
        background-color: #7efde3;
    }
    80%{
        background-color: #7fbefd;
    }
    90%{
        background-color: #857efd;
    }
    100%{
        background-color: #f2f2f2;
    }
}
@keyframes colorLoops {
    0%{
        background-color: #f2f2f2;
    }
    10%{
        background-color: #ff7d7d;
    }
    20%{
        background-color: #feb981;
    }
    30%{
        background-color: #fee581;
    }
    40%{
        background-color: #e8fe7f;
    }
    50%{
        background-color: #b1fd7f;
    }
    60%{
        background-color: #7dfe99;
    }
    70%{
        background-color: #7efde3;
    }
    80%{
        background-color: #7fbefd;
    }
    90%{
        background-color: #857efd;
    }
    100%{
        background-color: #f2f2f2;
    }
}