/************** INDEX ONLY  ********************/
main.homepagebg {background: url(/static/images/van-wrap-small.avif) no-repeat;background-size:cover; background-position: center; display: flex; flex-direction: column; justify-content: space-between;}
.homepagebg .container {padding:20px 0px 20px 0px; width: 90vw;}
.index-anim {display: flex; flex-direction: column; height: max-content; grid-gap:23px;align-items: center;  align-content: center; justify-content: center; height: 100%; grid-template-rows: auto; padding-bottom:5px;}
.flippylogo{width: 100%; text-align: center;}
.webuildengines {display:grid;  grid-template-columns: 1fr auto; background-color:black;text-align: center; z-index: 2 !important; border-radius: 10px; padding:1em 2em; width: max-content; align-items: center;  align-content: center;  max-height: min-content;}
.webuildengines p, .webuildengines h1 {font-family: 'Roboto Mono', sans-serif; font-size: 1.9em; color: azure; text-transform: uppercase; font-weight: 500;}
.bottom{justify-content: flex-end; display: flex; flex-direction: column; height: 100%; padding-bottom: 12px;}
.cursor{width: 24em; margin: 0 auto; text-align: center; white-space: nowrap;overflow: hidden;}
img.fullstop {min-width: 10px;}
/* Animation */
.flip-horizontal-bck {width:100vw; position: relative;-webkit-animation: flip-horizontal-bck 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both ;z-index: 12;	animation: flip-horizontal-bck 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both ;}
.webuildengines {animation-delay: 2s !important; animation: backgroundfadein 3s normal both;}
.fullstop {animation-delay: 6s !important;-webkit-animation: fullstop 0.4s ease-in 7s both;	animation: fullstop 0.4s ease-in 7s both;}
.typewriter-animation1 {animation-delay: 3s !important; animation: typewriter 2s steps(50) 1s 1 normal both, blinkingCursor 500ms steps(50) infinite normal;}
.typewriter-animation2 {padding-right:10px; animation-delay: 4s !important; animation: typewriter 1s steps(50) 1s 1 normal both, blinkingCursor 500ms steps(50) infinite normal;}
.spinIt {cursor: pointer; transition: all 0.3s ease;}
.spinMe {animation: clickspin 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both ;z-index: 12;}
@keyframes flip-horizontal-bck {
0% {-webkit-transform: translateZ(0) rotateX(0);-webkit-transform: translateY(-100vh);transform: translateZ(0) rotateX(0);transform: translateY(-100vh);}
15% {-webkit-transform: translateZ(-260px) rotateX(360deg);transform: translateZ(-260px) rotateX(360deg);}
18% {-webkit-transform: translateZ(0) rotateX(0);transform: translateZ(0) rotateX(0);}
22% {-webkit-transform: translateZ(-260px) rotateX(180deg);transform: translateZ(-260px) rotateX(180deg);}
30% {-webkit-transform: translateZ(0) rotateX(0);transform: translateZ(0) rotateX(0);}
40% {-webkit-transform: translateZ(-260px) rotateX(180deg);transform: translateZ(-260px) rotateX(180deg);}
60% {-webkit-transform: translateZ(0) rotateX(0);transform: translateZ(0) rotateX(0);}
80% {-webkit-transform: translateZ(-260px) rotateX(180deg);transform: translateZ(-260px) rotateX(180deg);}
100% {-webkit-transform: translateZ(0) rotateX(0); -webkit-transform: translateY(0);transform: translateZ(0) rotateX(0); transform: translateY(0);}}
@-webkit-keyframes flip-horizontal-bck {
0% {-webkit-transform: translateZ(0) rotateX(0);-webkit-transform: translateY(-100vh);transform: translateZ(0) rotateX(0);transform: translateY(-100vh);}
15% {-webkit-transform: translateZ(-260px) rotateX(360deg);transform: translateZ(-260px) rotateX(360deg);}
18% {-webkit-transform: translateZ(0) rotateX(0);transform: translateZ(0) rotateX(0);}
22% {-webkit-transform: translateZ(-260px) rotateX(180deg);transform: translateZ(-260px) rotateX(180deg);}
30% {-webkit-transform: translateZ(0) rotateX(0);transform: translateZ(0) rotateX(0);}
40% {-webkit-transform: translateZ(-260px) rotateX(180deg);transform: translateZ(-260px) rotateX(180deg);}
60% {-webkit-transform: translateZ(0) rotateX(0);transform: translateZ(0) rotateX(0);}
80% {-webkit-transform: translateZ(-260px) rotateX(180deg);transform: translateZ(-260px) rotateX(180deg);}
100% {-webkit-transform: translateZ(0) rotateX(0); -webkit-transform: translateY(0);transform: translateZ(0) rotateX(0); transform: translateY(0);}}
@keyframes typewriter {
  from { width: 0; color:transparent; } to { width: 100%; color: azure;}}
@-webkit-keyframes typewriter {
  from { width: 0; color:transparent; } to { width: 100%; color: azure;}}
@keyframes backgroundfadein{from { opacity:0;} to { opacity:0.8; }}
@-webkit-keyframes backgroundfadein{from { opacity:0;} to { opacity:0.8; }}
@keyframes fullstop {
    0% {-webkit-transform: scale(8);transform: scale(8); -webkit-filter: blur(4px);filter: blur(4px); opacity: 0;}
  100% {-webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px);filter: blur(0px); opacity: 1;}}
@-webkit-keyframes fullstop {
    0% {-webkit-transform: scale(8);transform: scale(8); -webkit-filter: blur(4px);filter: blur(4px); opacity: 0;}
  100% {-webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px);filter: blur(0px); opacity: 1;}}
@keyframes clickspin {
0% {-webkit-transform: translateZ(0) rotateX(0);transform: translateZ(0) rotateX(0);}
15% {-webkit-transform: translateZ(-260px) rotateX(360deg);transform: translateZ(-260px) rotateX(360deg);}
18% {-webkit-transform: translateZ(0) rotateX(0);transform: translateZ(0) rotateX(0);}
22% {-webkit-transform: translateZ(-260px) rotateX(180deg);transform: translateZ(-260px) rotateX(180deg);}
30% {-webkit-transform: translateZ(0) rotateX(0);transform: translateZ(0) rotateX(0);}
40% {-webkit-transform: translateZ(-260px) rotateX(180deg);transform: translateZ(-260px) rotateX(180deg);}
60% {-webkit-transform: translateZ(0) rotateX(0);transform: translateZ(0) rotateX(0);}
80% {-webkit-transform: translateZ(-260px) rotateX(180deg);transform: translateZ(-260px) rotateX(180deg);}
100% {-webkit-transform: translateZ(0) rotateX(0);transform: translateZ(0) rotateX(0); }}
@-webkit-keyframes clickspin {
0% {-webkit-transform: translateZ(0) rotateX(0);transform: translateZ(0) rotateX(0);}
15% {-webkit-transform: translateZ(-260px) rotateX(360deg);transform: translateZ(-260px) rotateX(360deg);}
18% {-webkit-transform: translateZ(0) rotateX(0);transform: translateZ(0) rotateX(0);}
22% {-webkit-transform: translateZ(-260px) rotateX(180deg);transform: translateZ(-260px) rotateX(180deg);}
30% {-webkit-transform: translateZ(0) rotateX(0);transform: translateZ(0) rotateX(0);}
40% {-webkit-transform: translateZ(-260px) rotateX(180deg);transform: translateZ(-260px) rotateX(180deg);}
60% {-webkit-transform: translateZ(0) rotateX(0);transform: translateZ(0) rotateX(0);}
80% {-webkit-transform: translateZ(-260px) rotateX(180deg);transform: translateZ(-260px) rotateX(180deg);}
100% {-webkit-transform: translateZ(0) rotateX(0);transform: translateZ(0) rotateX(0); }}
    /************** INDEX ONLY END ********************/