.container1{display:flex;justify-content:center;padding:2%;position:relative;width:320px;justify-self:center}.triangle-wrapper{position:relative;width:200px;height:158px}.triangle{position:absolute;display:grid;top:0;left:0;width:100%;height:100%;align-self:end;transition:opacity .3s ease}.triangle1{opacity:1;z-index:2;align-self:end}.triangle2{opacity:0;z-index:1}.triangle1-image,.triangle2,.triangle2-image{align-self:end}.ball1{position:absolute;align-self:center;transform:translate(350%,230%);transition:opacity .2s ease}.container1:hover .triangle1{opacity:0}.container1:hover .triangle2{opacity:1}.stairs{position:relative;display:flex;padding:0}.stairs-ball{align-self:center;transform:translate(-40px,20px);transition:transform .5s ease}.container1:hover .stairs-ball{transform:translate(-120px,-55px) scale(1.4)}.container1:hover .ball1{opacity:1}@media (max-width:500px){.container1{transform:translateX(8%) scale(.85);justify-self:center;width:360px}}@media(max-width:400px){.container1{transform:scale(.8);justify-self:center;width:320px}}.container2{max-width:-moz-fit-content;max-width:fit-content;display:flex;max-height:-moz-fit-content;max-height:fit-content;align-self:end}.right-container2{display:flex;margin-left:-2px}.big-triangle1{position:relative;justify-self:end}.outlined-shadow2{position:absolute;justify-self:start;align-self:end}.plus-container{position:absolute;align-self:center;transform:translate(40%,-20%)}.horizontal{transform:translate(100%)}.horizontal,.vertical{transition:transform .4s ease}.left-container2{display:grid;width:150px}.left-triangle-before{position:relative;justify-self:start;align-self:end;max-width:200px;max-height:70px;margin-left:1.5px}.left-triangle-after{opacity:0;position:absolute;align-self:end;justify-self:start;max-width:210px;max-height:170px;margin-top:8px}.left-triangle-ball{margin-top:20%;margin-bottom:20%;opacity:0;align-self:center;justify-self:center;position:absolute;width:150px;height:20px}.container2:hover .left-triangle-after,.container2:hover .left-triangle-ball{opacity:1;transition:opacity .4s ease}.container2:hover .left-triangle-before{opacity:0;transition:opacity .4s ease}.container2:not(:hover) .left-triangle-before{transition:opacity .6s ease}.container2:hover .horizontal{transform:translate(100%) rotate(90deg)}.container2:hover .vertical{transform:rotate(90deg)}@media (max-width:800px){.container2{transform:scale(.85)}}@media (max-width:400px){.container2{transform:scale(.8)}}.container3{max-width:350px;max-height:-moz-fit-content;max-height:fit-content;display:grid;transform:translateX(-10%);grid-template-columns:repeat(2,1fr);gap:8%}.circles-container{display:flex;position:relative}.bottom-circle{position:relative;transform:translate(15%,30%)}.bottom-circle,.green-circle{transition:transform .4s ease}.green-circle{position:absolute;transform:translate(40%)}.top-circle{position:absolute;transform:translate(27%,15%)}.triangle-container{position:relative;display:grid}.triangle3{position:relative}.triangle-ball3{position:absolute;justify-self:center;align-self:center;transition:transform .4s ease}.container3:hover .green-circle{transform:translate(15%,30%)}.container3:hover .bottom-circle{transform:translate(40%)}.container3:hover .triangle3{animation:fadeOut3 .45s ease forwards}.container3:hover .triangle-ball3{transform:scale(1.4)}.container3:not(:hover) .triangle3{animation:fadeIn3 .45s ease forwards}@keyframes fadeOut3{0%{opacity:1}50%{opacity:.5}to{opacity:1;transform:scaleX(-1)}}@keyframes fadeIn3{0%{opacity:1;transform:scaleX(-1)}50%{opacity:.5}to{opacity:1}}@media (max-width:800px){.container3{transform:scale(.8)}}@media (max-width:400px){.container3{transform:scale(.75)}}.container4{width:300px;height:150px;display:grid;grid-template-columns:repeat(2,1fr)}.left-container4{display:grid;align-self:start}.bottom-half{transition:transform .5s ease}.right-container4{display:grid;transform:translate(-10%)}.triangle4{position:relative;justify-self:start;align-self:end}.ball4{position:absolute;justify-self:center;align-self:center;transform:translate(20%,150%);transition:transform .5s ease}.container4:hover .bottom-half{transform:translateX(50%)}.container4:hover .ball4{transform:translate(355%,-10%)}@media (max-width:800px){.container4{transform:scale(.9)}}@media (max-width:400px){.container4{transform:scale(.8)}}.container5{width:320px;height:174px;grid-template-columns:repeat(2,1fr)}.container5,.left-container5{display:grid}.bottom-half5,.top-half5{transition:transform .5s ease}.bottom-half5{position:absolute;transform:scaleY(-1);align-self:start;opacity:0}.right-container5{display:grid}.ball5{position:absolute;z-index:10;transform:translate(780%,360%);transition:transform .4s ease}.triangle-before5{height:-moz-fit-content;height:fit-content;align-self:end}.triangle1-after{margin-left:.2%;margin-top:0}.triangle1-after,.triangle2-after{position:absolute;justify-self:end;opacity:0;transition:opacity .3s ease}.container5:hover .ball5{transform:translate(600%,450%);z-index:10}.container5:hover .triangle1-after,.container5:hover .triangle2-after{opacity:1}.container5:hover .top-half5{opacity:0}.container5:hover .bottom-half5{animation:fadeIn5 .4s ease .1s forwards}.container5:not(:hover) .bottom-half5{animation:fadeOut5 .4s ease forwards}.container5:not(:hover) .top-half5{transition:opacity .7s ease .1s}@keyframes fadeOut5{0%{opacity:1;transform:translate(-20%,20%) rotate(-270deg)}50%{opacity:0;transform:rotate(-190deg) scale(.85)}}@keyframes fadeIn5{0%{opacity:0;transform:rotate(-170deg) scale(.9)}to{opacity:1;transform:translate(-20%,20%) rotate(-270deg)}}@media (max-width:800px){.container5{transform:scale(.85)}}@media (max-width:767px){.container5{transform:scale(.9)}}@media (max-width:400px){.container5{transform:scale(.8)}}
/*# sourceMappingURL=39877fbca559b0d7.css.map*/