.ring-fx::before{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    transform-origin: center center;
    border-radius: 10000px;
    box-shadow: 0px 0px 20px lightskyblue;
    animation: spinCasePseudo 8s 2.5s ease-in-out infinite forwards;
    background-image:url(imgs/advancedBorder.png);
    transform: scale(1.2) rotateY(100deg) rotateX(100deg);
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    outline: solid 1px white;
}
.ring-fx::after{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    transform-origin: center center;
    border-radius: 10000px;
    box-shadow: 0px 0px 20px lightskyblue;
    transform: scale(1.2) rotateY(100deg) rotateX(100deg);
    animation: spinCasePseudo 8s ease-in-out infinite forwards;
    background-image:url(imgs/advancedBorder.png);
    background-repeat: no-repeat;
    background-size: cover;
    outline: solid 1px white;
    pointer-events: none;
}
@keyframes bankPop{100%{transform: scale(1)}}

@keyframes rotateCardBg1{100%{transform: rotate(45deg) scale(0.8);}}
@keyframes rotateCardBg3{100%{transform: rotate(22.75deg) scale(0.8);}}
@keyframes rotateCardBg2{100%{transform: rotate(-22.75deg) scale(0.8);}}
@keyframes rotateCardBg4{100%{transform: rotate(-45deg) scale(0.8);}}
@keyframes flatSpinChip{
    0%{transform: scaleY(0.3) rotate(45deg)}
    35%{transform: rotate(180deg)}
    65%{transform: rotate(-180deg)}
    100%{transform: scaleY(0.3) rotate(45deg)}
}
@keyframes flatBackSpin{
    0%{transform: rotate(0deg)}
    35%{transform: rotate(-180deg)}
    65%{transform: rotate(180deg)}
    100%{transform: rotate(00deg)}
}
@keyframes hoverChip{
    0%{transform: translateY(-5%);}
    50%{transform: translateY(5%);}
    100%{transform: translateY(-5%);}
}
@keyframes spinColor{
    0%{visibility: visible;}
    14%{visibility: hidden;} 
    26%{visibility: hidden;} 
    50%{visibility: visible;} 
    60%{visibility: hidden;} 
    80%{visibility: hidden;} 
    100%{visibility: visible}
}
@keyframes redColor{
    0%{color: rgb(47, 255, 47)}
    50%{color: red}
    100%{color: red}
}
@keyframes cashPop1{0%{transform: scale(1);} 50%{transform: scale(1.1);} 100%{transform: scale(1);}}
@keyframes cashPop2{0%{transform: scale(1);} 50%{transform: scale(1.2);} 100%{transform: scale(1);}}
@keyframes cashPop3{0%{transform: scale(1);} 50%{transform: scale(1.4);} 100%{transform: scale(1);}}
@keyframes uiPop{0%{transform: scale(1);} 100%{transform: scale(1.2);}}

@keyframes textShine{
    0%{text-shadow: none;}
    50%{text-shadow: 0px 0px 15px rgb(255, 174, 0);}
    100%{text-shadow: none;}
}
@keyframes shine {
    0% { transform: translate(-120%, -120%) rotate(25deg); }
    100% { transform: translate(120%, 120%) rotate(25deg); }
}
        @keyframes buttonPop{
    100%{transform: scale(1.3)}
}
        @keyframes intuit{
    10%{box-shadow: 0px 0px 10px 7px lightskyblue}
    100%{box-shadow: 0px 0px 20px 5px rgb(0, 46, 75)}
}
@keyframes intuitBlitz{
    10%{box-shadow: 0px 0px 10px 7px rgb(255, 73, 1)}
    100%{box-shadow: 0px 0px 20px 5px rgb(75, 21, 0)}
}
        @keyframes sectorUnlocked{
    30%{height: 25%; top: 35%;}
    100%{height: 19.25%; top: 40.37%}
}
@keyframes idPop{
    0%{transform: scale(2);}
    30%{transform: scale(3);}
    100%{transform: scale(2);}
}
@keyframes shakeId {
    0%   { transform: scale(2) translateX(0px);}
    50%  { transform: scale(2) translateX(-3px);}
    100%  { transform: scale(2) translateX(3px)}
}
@keyframes spinIdChildren{
    0%{visibility: visible;}
    25%{visibility: hidden;}
    75%{visibility: hidden;}
    100%{visibility: visible;}
}
@keyframes internShadow{
    0%{box-shadow: 0px 0px 20px 15px rgb(0, 157, 255);}
    50%{box-shadow: 0px 0px 50px 30px rgb(0, 157, 255);}
    100%{box-shadow: 0px 0px 20px 15px rgb(0, 157, 255)}
}
@keyframes associateShadow{
    0%{box-shadow: 0px 0px 20px 15px rgb(126, 255, 109);}
    50%{box-shadow: 0px 0px 50px 30px rgb(126, 255, 109);}
    100%{box-shadow: 0px 0px 20px 15px rgb(126, 255, 109)}
}
@keyframes seniorShadow{
    0%{box-shadow: 0px 0px 20px 15px rgb(255, 196, 0);}
    50%{box-shadow: 0px 0px 50px 30px rgb(255, 196, 0);}
    100%{box-shadow: 0px 0px 20px 15px rgb(255, 196, 0);}
}
@keyframes partnerShadow{
    0%{box-shadow: 0px 0px 20px 15px rgb(0, 0, 0);}
    50%{box-shadow: 0px 0px 50px 30px rgb(0, 0, 0);}
    100%{box-shadow: 0px 0px 20px 15px rgb(0, 0, 0)}
}
@keyframes floating{
    0%{transform: translateY(-5%);}
    50%{transform: translateY(5%);}
    100%{transform: translateY(-5%);}
}
@keyframes spinCard{
    0%{transform: rotateY(0deg) rotateX(0deg) translateY(0px) scale(0.5);}
    50%{transform:  rotateX(180deg) translateY(1000px) scale(0.5) ;}
    100%{transform: rotateY(-360deg)  rotateX(0deg) translateY(0px) scale(0.5);}
}
@keyframes bgRotate {
    0%   { transform: rotate(0deg) scale(2) translateY(-10%);}
    100% { transform: rotate(360deg) scale(2) translateY(10%); }   
}
@keyframes bgRotateReverse {
    0%   { transform: rotate(0deg) scale(2) translateY(-10%);}
    100% { transform: rotate(-360deg) scale(2) translateY(10%); }   
}
@keyframes infiniteRotate{100%{transform: rotate(-360deg)}}
@keyframes infiniteRotateBack{100%{transform: rotate(360deg)}}
@keyframes waveEffect{100%{transform: scale(3); opacity: 0}}
@keyframes ripple {
    0% {transform: translate(-50%, -50%) scale(0.2); opacity: 1;}
    80% {transform: translate(-50%, -50%) scale(2.7); opacity: 1;}
    100% {transform: translate(-50%, -50%) scale(4);opacity: 0;}
}
@keyframes cashRipple{
    0% {transform: scale(0); opacity: 1;}
    100% {transform: scale(10); opacity: 0;}
}
@keyframes pseudoRotate{
    0%{transform: rotateY(350deg) rotateX(50deg) scale(1.5) rotate(90deg);}
    100%{transform: rotateY(350deg) rotateX(50deg) scale(1.5);}
}
@keyframes pseudoRotateBack{
    0%{transform:  rotateY(-50deg) rotateX(-50deg) scale(1.2) rotate(-90deg);}
    100%{transform: rotateY(-50deg) rotateX(-50deg) scale(1.2);}
}
@keyframes fire {
    0% {background-position: center 0px, center 0px, 50% 100%, center center;}
    100% {background-position: center -500px, center -650px, 50% 100%, center center;}
}
@keyframes robot-shadow-anim{
    0%{box-shadow: 0px 0px 20px 10px white;}
    50%{box-shadow: 0px 0px 50px 15px white;}
    100%{box-shadow: 0px 0px 20px 10px white}
}
@keyframes float-robot{
    0%{transform: scale(2) translateY(0%);}
    50%{transform: scale(2) translateY(10%);}
    100%{transform: scale(2) translateY(0%);}
}
@keyframes continue-p{
    0%{transform: translateX(-3%);}
    50%{transform: translateX(10%);}
    100%{transform: translateX(-3%);}
}
@keyframes incorrectShadow{
    0%{box-shadow: none;}
    100%{box-shadow: inset 0px 0px 40px rgb(255, 38, 0);}
}
@keyframes correctShadow{
    0%{box-shadow: none;}
    100%{box-shadow: inset 0px 0px 40px rgb(47, 255, 47);}
}

@keyframes bot-left{100%{left: -30%;}}
@keyframes bot-far-left{100%{left: 70%; bottom: 5%;}}

@keyframes bot-right{100%{left: 120%;}}
@keyframes bot-far-right{100%{left: 10%; bottom: 15%;}}



/*portfolio.css_______________________*/


@keyframes robot-hue{
    0%{filter: hue-rotate(0deg) saturate(2);}
    100%{filter: hue-rotate(360deg) saturate(2);}
}
@keyframes textShadow{
    0%{color: rgb(0, 157 255); text-shadow: none;}
    50%{color: rgb(0, 157 255); text-shadow: 0px 0px 20px lightskyblue;}
    100%{color: rgb(0, 157 255); text-shadow: none;}
}
@keyframes menuAnimate {100%{transform: rotateX(85deg)}}

@keyframes floatRightTVs{
    0%{transform: translateY(0) rotateY(5deg);}
    25%{transform: translateY(7%) rotateY(-20deg) translateX(7%);}
    50%{transform: translateY(-4%) rotateY(20deg) translateX(13%);}
    100%{transform: translateY(0%) rotateY(5deg)}
}

@keyframes flattenRightTV{100%{transform: rotateY(0deg); right: 4%;}}
@keyframes fire {
    0% {background-position: center 0px, center 0px, 50% 100%, center center;}
    100% {background-position: center -500px, center -650px, 50% 100%, center center;}
}
@keyframes bubbleShift{
    0%{transform: scale(2)}
    50%{transform: scale(1.5)}
    100%{transform: scale(2)}
}

@keyframes panel-drift{
    0%{transform: translateY(-3%) scale(0.5);}
    30%{transform: translateY(3%) scale(0.5);}
    100%{transform: translateY(-3%) scale(0.5);}
}

@keyframes spinCasePseudo{
    0%{transform: rotateY(100deg) rotateX(100deg);}
    40%{transform: rotateY(350deg) rotateX(350deg);}  
    100%{transform: rotateY(100deg) rotateX(100deg);}
}

@keyframes flashSpecialty{
    0%{box-shadow: none;}
    50%{box-shadow: 0px 0px 20px 5px rgb(0, 191, 255);}
    100%{box-shadow: none;}
}

@keyframes openMenuX{100%{width: 20%; height: 0%;}}

@keyframes openSpecialtyY{100%{height: 40%; top: 30%;}}
@keyframes ringEffect {
    0%{transform: scale(1); opacity: 1; }
    50%{transform: scale(1.2); opacity: 0.3}
    100%{transform: scale(1.4); opacity: 0;}
}
@keyframes zoomBg{
    0%{background-size: 100% 100%;}
    100%{background-size: 200% 200%; background-position: 50% 50%;}
}