body {
	overflow: hidden;
	font-family: "Segoe UI Light", Arial, sans-serif;
	overflow-anchor: none;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#background{
	position:absolute;
	width:120vw;
	right:-10vw;
	height:55vh;
	bottom:55vh;
}

#breakingNews {
	font-family: "Segoe UI Bold", Arial, sans-serif;
}

.ticker:hover .ticker-track {
	animation-play-state: paused;
	cursor:pointer;
}

.ticker {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	background: transparent;
	color: #45597a;
	white-space: nowrap;
	z-index: 9999;
	font-family: "Segoe UI", Arial, sans-serif;
}

.ticker-track {
	display: inline-flex;
	animation: scroll-left-to-right 20s linear infinite;
}

	.ticker-track a {
		padding: 2vh 50px;
		font-size: 2.3vh;
		color: #45597a;
		text-decoration:none;
	}

@keyframes scroll-left-to-right {
	from {
		transform: translateX(200%);
	}

	to {
		transform: translateX(-100%);
	}
}

#CR {
	position: absolute;
	font-family: nasa !important;
	font-weight: 100 !important;
	color: white;
	z-index: 500;
	font-size: 0.8vh;
	left: 5%;
	bottom: 2%;
	transform: translateX(-50%);
}

#CR > p{
	margin-block-start: 0;
    margin-block-end: 0;
}

#CR > p > strong {
	font-family: nasa !important;
	color: #e3e6eb;
}

#socialsBottom {
	position: absolute;
	bottom: 3.7%;
	left:5%;
	transform:translateX(-50%);
	z-index: 500;
	width: 20vh;
}

.socialsBottom {
	z-index: 1;
	width: 10%;
	padding-right: 9%;
	z-index: 500
}

#fbBottom {
	margin-left: 16.5%
}

#copyright{
	position:absolute;
	z-index:20;
}

#mobileCR{
	position:absolute;
	left:70px;
	bottom:50px;
	color:white;
	z-index:5;
	font-size:14px;
	visibility:hidden;
}

.socials{
	z-index:1;
	height:19px;
}

#siteNav{
	width: 100%;
	position: relative;
	min-height: 100vh;
	right:0px;
	bottom:0px;

	/* Centers the container in the middle of the screen */
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	
}

.soundToggle{
	height: 2.5vh;
	width: 3vh;
	position: absolute;
	left: 2vh;
	transform:translateX(-50%);
	left:5%;
	bottom: 8%;
	z-index: 20;
}

	.soundToggle:hover {
		cursor: pointer;
	}

.soundImg {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	transition: opacity 0.3s ease-in-out;
}

#soundImgPlay {
	opacity: 1;
}

#soundImgMute {
	opacity: 0;
}

/* New CSS */
/* .dlbFooter {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box; 
	z-index: 500;
} */




.copywrite {
    display: flex;
    align-items: center;
    gap: 1rem; /* Equivalent to space-x-2 in Tailwind */
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Equivalent to space-x-2 in Tailwind */
}

@media (min-width: 768px) { /* Adjust the breakpoint as per your need */
    .copywrite {
        display: none;
    }
}

#optionsCircle{
	height:40vw;
	width:40vw;
	background-color:#A3ACBD;
	border-radius:5%;
	position:absolute;
	z-index:8;
	transform:scale(0);
}

@keyframes splatAnim {
    0% {transform: scale(0);}
    100% {transform: scale(18);}
}

#homeLogo{
	position:absolute;
	top:0;
	left:0;
	height: 100%;
	animation:logoLoadAnim 1.25s 1;
}

#homeLogoText{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	height: 8vw;
	animation:logoTextLoadAnim 1.25s 1;
	filter: drop-shadow(0.5rem 0.5rem .4rem rgba(0, 0, 0, .4));
	transition: filter 0.3s ease-in-out;
}

#homeLogoTextContainer{
	position:absolute;
	top:0;
	left:0;
	height: 20vw;
	width:100%;
	transition: transform 1s;
}

#homeLogoBoxContainer{
	position:absolute;
	top:0;
	left:0;
	height: 20vw;
	width:100%;
	transition: transform 0.5s, filter 0.5s;
}

#logoContainer{
	position:absolute;
	perspective: 12px;
	filter: drop-shadow(0.5rem 0.5rem .4rem rgba(0, 0, 0, .4));
	transition: filter 0.3s ease-in-out;
	z-index: 4;
	margin-top: -20.5vw;
}

#logoContainer:hover{
	cursor:pointer;
	filter: drop-shadow(0 0 3rem rgba(219, 255, 53, .7));
}

#logoContainer:hover ~ #logoTextContainer{
	animation: teaser 0.5s 1;
}

#logoInner{
	perspective: 12px;
	height: 20vw;
	width:20vw;
	transition: transform 0.5s, filter 0.5s;
}

@keyframes logoLoadAnim {
    0% {margin-top: 100vh; z-index: 1; transform: scaley(1);}
	10% {margin-top: -10vh; z-index: 1; transform: scaley(.75); transform-origin:top center;}
	20% {margin-top: -10vh; z-index: 3; transform: scaley(.875); transform-origin:top center;}
	30% {margin-top: 7vh; z-index: 3; transform: scaley(1); transform-origin:top center;}
	50% {margin-top: -7vh; z-index: 3; transform: scaley(1);}
	65% {margin-top: 4vh; z-index: 3; transform: scaley(1);}
	75% {margin-top: -4vh; z-index: 3; transform: scaley(1);}
	80% {margin-top: 1vh; z-index: 3; transform: scaley(1);}
	82.5% {margin-top: 0vh; z-index: 3; transform: scaley(1);}
}

@keyframes logoTextLoadAnim {
    0% {margin-top: 100vh; z-index: 1; transform: scaley(1) translate(-50%, -50%);}
	10% {margin-top: -10vh; z-index: 1; transform: translate(-50%, -50%) scaley(.75); transform-origin:top center;}
	20% {margin-top: -10vh; z-index: 3; transform: translate(-50%, -50%) scaley(.875); transform-origin:top center;}
	30% {margin-top: 7vh; z-index: 3; transform: scaley(1) translate(-50%, -50%); transform-origin:top center;}
	50% {margin-top: -7vh; z-index: 3; transform: scaley(1) translate(-50%, -50%);}
	65% {margin-top: 4vh; z-index: 3; transform: scaley(1) translate(-50%, -50%);}
	75% {margin-top: -4vh; z-index: 3; transform: scaley(1) translate(-50%, -50%);}
	80% {margin-top: 1vh; z-index: 3; transform: scaley(1) translate(-50%, -50%);}
	82.5% {margin-top: 0vh; z-index: 3; transform: scaley(1) translate(-50%, -50%);}
}

#logoContainerLeft{
	height: 10vw;
	position: absolute;
	width: 10vw;
	z-index: 3;
	bottom: 6vw;
}

#logoContainerLeft:hover{
	cursor:pointer;
}

#logoContainerRight{
	height: 10vw;
	position: absolute;
	width: 10vw;
	right:0;
	bottom: 6vw;
}

#logoContainerRight:hover{
	cursor:pointer;
}

#logoContainerTop{
	height: 6vw;
	position: absolute;
	width: 100%;
	top: 0;
}

#logoContainerTop:hover{
	cursor:pointer;
}

#logoContainerBottom{
	height: 6vw;
	position: absolute;
	width: 100%;
	bottom: 0;
}

#logoContainerBottom:hover{
	cursor:pointer;
}

.hints { /* Adjusted the width and height from 10px to 14px and changed blur from 2x to 1.7x */
	width: 14px;
	height: 14px;
	position: absolute;
	border-radius: 10px;
	z-index: 5;
	opacity: 0;
	background-color: white;
	/* filter: drop-shadow(0 0 0.5rem white); */
	box-shadow: 0 0 10px white;
	background: radial-gradient(ellipse at center, white 0%,rgba(255,255,255,1) 50%, rgba(0,0,0,0.5) 100%);
	filter: blur(1.7px);
}

#topHint{
	margin: auto;
	top:0.95vw;
	left:50%;
	transform:translateX(-50%);
}

#rightHint{ /* 0.95vw shifted more to the right*/
	right: 0.5vw;
	bottom: calc(8.5vw - 5px);
}

#bottomHint{
	left:50%;
	transform:translateX(-50%);
	bottom: 0.95vw;
}

#leftHint{ /* 0.95vw shifted more to the left*/
	left: 0.5vw;
	bottom: calc(8.5vw - 5px);
}

@keyframes hintAnim {
    0% {opacity: 0;}
    50% {opacity: 0.9;}
	100% {opacity: 0;}
}

@keyframes dropanimation {
	0%   {transform: skew(0deg, 5deg);}
	10% {transform: skew(0deg, -5deg);}
	20% {transform: scaley(0.85); transform-origin:center center;}
	30% {transform: skew(0deg, 5deg);}
	40% {transform: scalex(0.9); transform-origin:center center;}
	50% {transform: skew(0deg, 10deg);}
	60% {transform: scalex(0.9); transform-origin:center center;}
	70% {transform: skew(0deg, -5deg);}
	80% {transform: scaley(0.85); transform-origin:center center;}
	90% {transform: skew(0deg, -5deg);}
	100% {transform: skew(0deg, 5deg);}
}

.drops{
	width:100%;
	transition-timing-function: ease-in;
	transition: 0.3s;
}

.icons{
	position: absolute;
}

#aboutContainer{
	perspective: 12px;
	position: absolute;
	height:12vw;
	width:12vw;
	left: 3vw;
	top:33vh;
	z-index:4;
}

#aboutInner{
	perspective: 12px;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.aboutInner{
	filter: drop-shadow(0.5rem 0.5rem .4rem rgba(0, 0, 0, .4));
}

#servicesInner{
	perspective: 12px;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.servicesInner{
	filter: drop-shadow(0.5rem 0.5rem .4rem rgba(0, 0, 0, .4));
}

#careersInner{
	perspective: 12px;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.careersInner{
	filter: drop-shadow(0.5rem 0.5rem .4rem rgba(0, 0, 0, .4));
}

#contactInner{
	perspective: 12px;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.contactInner{
	filter: drop-shadow(0.5rem 0.5rem .4rem rgba(0, 0, 0, .4));
}

#aboutDrop:hover{
	cursor:pointer;
}

#servicesContainer {
	perspective: 12px;
	position: absolute;
	height: 12vw;
	width: 12vw;
	left: 19vw;
	top: 35vh;
	z-index: 4;
}

#servicesDrop:hover{
	cursor:pointer;
}

#careersContainer {
	perspective: 12px;
	position: absolute;
	height: 12vw;
	width: 12vw;
	left: 67vw;
	top: 32vh;
	z-index: 4;
}

#careersDrop:hover{
	cursor:pointer;
}

#contactContainer {
	perspective: 12px;
	position: absolute;
	height: 12vw;
	width: 12vw;
	left: 85vw;
	top: 34vh;
	z-index: 4;
}

#contactDrop:hover{
	cursor:pointer;
}


#logoTextContainer{
	position: absolute;
	bottom:25vh;
	z-index: 4;
	transform:scale(0);
}

@keyframes logoTextAppearAnim {
    0% {opacity: 0;}
	50% {opacity: 0;}
    100% {opacity: 1;}
}

@font-face{
	font-family: 'nasa';
	font-style: normal;
	font-weight: normal;
	src: url("fonts/NASALIZATION-RG.OTF") format("opentype");
}

.headerText{
	font-family:'nasa', serif;
	font-size: 2.5vh;
	text-align: center;
}

.text{
	font-size: 1.5vh;
}

.bolded{
	font-family: "Segoe UI", Arial, sans-serif;
}

#s1{
	width:100%;
	position:absolute;
	margin-top: -1vh;
}

#textBlock{
	position:absolute;
	left: 10vw;
	width:34vw;
	margin-right:7vw;
	margin-top:-2vh;
	
}

#imgSidebar{
	position:absolute;
	width:7vw;
	height:35vh;
	margin-left: 3vw;
	height:100vh;
	top:0vh;
}

.icons{
	margin-left:6vw;
}

#leaderIcon{
	position: absolute;
	width:2.25vw;
	margin-top:-0.25vh;
}

#buildingIcon{
	position: absolute;
	width:1.875vw;
	margin-left:6.25vw;
	margin-top: 10.5vh;
}

#globalIcon{
	position: absolute;
	width:2.25vw;
	margin-top: 22.5vh;
}

#s2{
	width:100%;
	position:absolute;
	margin-top: 40vh;
}

.headerText1{
	font-family:'nasa', serif;
	font-size: 3vh;
	text-align: center;
	margin-left:-1.1vw;
}

.bodytext1{
	font-size: 1.7vh;
	font-family: "Segoe UI Light", Arial, sans-serif;
	text-align: justify;
}

#textBlock1{
	position:absolute;
	left: 10vw;
	width:34vw;
	margin-right:7vw;
	margin-top:-2vh;
	
}

#leadershipIcon{
	position: absolute;
	width:1.875vw;
	margin-top:-0.25vh;
}

#customerIcon{
	position: absolute;
	width:2.25vw;
	margin-left:5.875vw;
	margin-top: 8vh;
}

#excellenceIcon{
	position: absolute;
	width:1.875vw;
	margin-top: 16.5vh;
}

#s3{
	width:100%;
	position:absolute;
	margin-top: 40vh;
}

#textBlock2{
	position:absolute;
	left: 10vw;
	width:34vw;
	margin-right:8vw;
	margin-top:-2vh;
	
}

.headerText2{
	font-family:'nasa', serif;
	font-size: 3vh;
	text-align: center;
}

.bodytext2{
	font-size: 1.7vh;
	font-family: "Segoe UI Light", Arial, sans-serif;
}

#puzzleIcon{
	position: absolute;
	width:2.25vw;
	margin-left:5.75vw;
	margin-top:-0.5vh;
}

#certificateIcon{
	position: absolute;
	width:1.875vw;
	margin-top: 9.5vh;
}

#thumbIcon{
	position: absolute;
	width:1.875vw;
	margin-top: 19vh;
}

#s4{
	position:absolute;
	width: 3vh;
	height:100%;
	float:right;
	right:6vw;
}

.circ{
	width:1.6vh;
	height:1.6vh;
	border-radius:1vh;
	background-color:#E3E6EB;
	opacity:0.1;
}

.circ:hover{
	cursor: pointer;
}

#circ1{
	margin-top:13.5vh;
	background-color:white;
	box-shadow:0 0 18px white;
	opacity:1;
}

#circ2{
	margin-top:1.6vh;
}

#circ3{
	margin-top:1.6vh;
}

#logoText{
	height: 13vh;
	filter: drop-shadow(0.5rem 0.5rem .4rem rgba(0, 0, 0, .4));
	animation: logoTextAppearAnim 2.5s 1;
}

#coreText {
	visibility: visible;
	position: absolute;
	color: white;
	width:54vw;
	height:40vh;
	z-index:5;
	overflow-x: hidden;
	overflow-y: hidden;
	scrollbar-width: none;
	padding: 10px;
	bottom:5vh;
}

#coreText::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

.bodytext{
	font-size: 1.3vh;
	font-family: "Segoe UI", Arial, sans-serif;
}


#iframeText{
	width: 100%;
	height: 100%;
}

.ocean {
  height: 80vh;
  margin-left: -5vw;
  width: 109.5vw;
  position: absolute;
  bottom: -5vh;
  left: 0;
  right: 0;
  overflow: hidden;
}

#waveA{
	background: url(images/wave-AA.svg);
	bottom: 0;
	height:65vh;
	opacity: 1;
	z-index: 3;
	transform:translateX(-3251.25rem);
}
#waveB{
	background: url(images/wave-BB.svg);
	bottom: 0;
	margin-right:0;
	z-index: 2;
	opacity: 1;
	height:73vh;
}

#waveC {
	background: url(images/wave-CC.svg);
	height: 80vh;
	z-index: 0;
	transform: translateX(-3202rem);
}

.wave {
  position: absolute;
  width: 13000rem;
  height: 100%;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

@keyframes textReveal {
    0% {margin-top: 40vh; transform: scale(0.75);}
    100% {margin-top: -1vh; transform: scale(1);}
}

@keyframes textHide {
    0% {margin-top: -1vh; transform: scale(1); opacity:1;}
    50% {margin-top: -1vh; opacity:0.5; transform: scale(0.5); transform-origin:center center;}
	100% {margin-top: 40vh; opacity:0.5; transform: scale(0.5);}
}

@keyframes textReveal1 {
    0% {margin-top: 40vh; transform: scale(1);}
    100% {margin-top: -40vh; transform: scale(1);}
}

@keyframes textHide1 {
    0% {margin-top: -40vh; transform: scale(1); opacity:1;}
    50% {margin-top: -40vh; opacity:0.05; transform: scale(0.5); transform-origin:center center;}
	100% {margin-top: 40vh; transform: scale(0.5);}
}

@keyframes waveRider {
    0% {top:35vh;}
    50% {top:32vh;}
	100% {top:35vh;}
}

@keyframes waveTeaser {
    0% {top:70vh;}
	5% {top:32vh;}
	10% {top:40vh;}
	15% {top:32vh;}
	20% {top:40vh;}
	25% {top:32vh;}
	30% {top:40vh;}
	35% {top:32vh;}
	40% {top:40vh;}
	45% {top:32vh;}
	50% {top:40vh;}
	55% {top:32vh;}
	60% {top:40vh;}
	65% {top:32vh;}
	70% {top:40vh;}
	75% {top:32vh;}
	80% {top:40vh;}
	85% {top:32vh;}
	90% {top:40vh;}
	95% {top:32vh;}
	100% {top:40vh;}
}

@keyframes waveTeaserRev {
    0% {top:32vh;}
    100% {top:70vh;}
}

@keyframes waveRevealAbout {
    0% {top:70vh;}
    50% {top:3vh; z-index: 2;}
	100% {top:33vh; z-index: 4;}
}

@keyframes waveRevealServices {
    0% {top:70vh;}
    50% {top:17vh; z-index: 2;}
	100% {top:35vh; z-index: 4;}
}

@keyframes waveRevealCareers {
    0% {top:70vh;}
    50% {top:21vh; z-index: 2;}
	100% {top:32vh; z-index: 4;}
}

@keyframes waveRevealContact {
    0% {top:70vh;}
    50% {top:9vh; z-index: 2;}
	100% {top:34vh; z-index: 4;}
}

@keyframes waveHideAbout {
	0% {top:35vh; z-index: 4;}
    50% {top:3vh; z-index: 2;}
	100% {top:70vh; z-index: 2;}
}

@keyframes waveHideServices {
	0% {top:34.75vh; z-index: 4;}
    50% {top:17vh; z-index: 2;}
	100% {top:7-; z-index: 2;}
}

@keyframes waveHideCareers {
	0% {top:34.5vh; z-index: 4;}
    50% {top:21vh; z-index: 2;}
	100% {top:70vh; z-index: 2;}
}

@keyframes waveHideContact {
	0% {top:39vh; z-index: 4;}
    50% {top:9vh; z-index: 2;}
	100% {top:70vh; z-index: 2;}
}

@keyframes teaserLeft {
	0%   {transform: scalex(1);}
	25%	{margin-left:-10vw; }
	50% {margin-left:-10vw; transform: scalex(0.85); transform-origin:left center;}
	75% {margin-left:0vw;transform: scalex(1.1); transform-origin:left center; }
	100% {margin-left:0vw; transform: scalex(1); transform-origin:left center; }
}

@keyframes teaserLeftRev {
	0%   {margin-left:0vw;}
	100% {margin-left:0vw;}
}

@keyframes teaserRight {
	0%   {transform: scalex(1);}
	25%	{margin-left:10vw;}
	50% {margin-left:10vw; transform: scalex(0.85); transform-origin:right center;}
	75% {margin-left:0vw; transform: scalex(1.1); transform-origin:right center; }
	100% {margin-left:0vw; transform: scalex(1); transform-origin:right center; }
}

@keyframes logoTextLeftAnim {
  0%   {margin-left:0vw }
  100% {margin-left:-200vw; }
}

@keyframes logoTextLeftRevAnim {
  0%   {margin-left:200vw; transform: scalex(1);}
  40% {margin-left:0vw; transform: scalex(0.75); transform-origin:left center;}
  60% {margin-left:0vw; transform: scalex(1); transform-origin:left center;}
  80% {margin-left:0vw; transform: scalex(0.9); transform-origin:left center;}
  100% {margin-left:0vw; transform: scalex(1); transform-origin:left center;}
}

@keyframes logoTextRightAnim {
  0%   {margin-left:0vw }
  100% {margin-left:200vw; }
}

@keyframes logoTextRightRevAnim {
  0%   {margin-left:-200vw; transform: scalex(1);}
  40% {margin-left:0vw; transform: scalex(0.75); transform-origin:right center;}
  60% {margin-left:0vw; transform: scalex(1); transform-origin:right center;}
  80% {margin-left:0vw; transform: scalex(0.9); transform-origin:right center;}
  100% {margin-left:0vw; transform: scalex(1); transform-origin:right center;}
}

@keyframes logoTextBottomOut {
  0%   {transform: scale(1);}
  100% {transform: scale(0); }
}

@keyframes logoTextBottomIn {
  0%   {transform: scale(0);}
  33%   {transform: scale(1.1);}
  100% {transform: scale(1); }
}

@keyframes logoTextScaleTease {
  0%   {transform: scale(1);}
  33%   {transform: scale(1.4);}
  100% {transform: scale(1); }
}

@keyframes sendForward {
  0%   {transform: scale(1); opacity: 1; filter: blur(0px);}
  100% {transform: scale(10); opacity: 0; filter: blur(8px);}
}

@keyframes kickLeft {
    0% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
    25% {transform:rotateX(-3deg) rotateY(-60deg);filter: drop-shadow(10rem -0.25rem 1.2rem rgba(0, 0, 0, .4));}
	50% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
	100% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
}

@keyframes kickLeft1 {
    0% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
    25% {transform:rotateX(-3deg) rotateY(-60deg);filter: drop-shadow(10rem -0.25rem 1.2rem rgba(0, 0, 0, .4));}
	50% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
	100% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
}

@keyframes kickRight {
    0% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
    25% {transform:rotateX(3deg) rotateY(60deg);filter: drop-shadow(-10rem 0.25rem 1.2rem rgba(0, 0, 0, .4));}
	50% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
	100% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
}

@keyframes kickRight1 {
    0% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
    25% {transform:rotateX(3deg) rotateY(60deg);filter: drop-shadow(-10rem 0.25rem 1.2rem rgba(0, 0, 0, .4));}
	50% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
	100% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
}

@keyframes kickUp {
    0% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
    25% {transform:rotateX(70deg) rotateY(3deg);filter: drop-shadow(0.25rem 15rem 1.2rem rgba(0, 0, 0, .4));}
	50% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
	100% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
}

@keyframes kickUp1 {
    0% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
    25% {transform:rotateX(70deg) rotateY(3deg);filter: drop-shadow(0.25rem 15rem 1.2rem rgba(0, 0, 0, .4));}
	50% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
	100% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
}

@keyframes kickDown {
    0% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
    25% {transform:rotateX(-70deg) rotateY(-3deg);filter: drop-shadow(0.25rem -15rem 1.2rem rgba(0, 0, 0, .4));}
	50% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
	100% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
}

@keyframes kickDown1 {
    0% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
    25% {transform:rotateX(-70deg) rotateY(-3deg);filter: drop-shadow(0.25rem -15rem 1.2rem rgba(0, 0, 0, .4));}
	50% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
	100% {transform:rotateX(0deg) rotateY(0deg);filter: none;}
}

@keyframes textAnim {
  0%   {bottom: -40vh; transform: scaleY(1);}
  50% {bottom: 5vh; transform: scaleY(0.75); transform-origin:top center;}
  62.5% {bottom: 5vh; transform: scaleY(1); transform-origin:top center;}
  75% {bottom: 5vh; transform: scaleY(0.9); transform-origin:top center;}
  100% {bottom: 5vh; transform: scaleY(1); transform-origin:top center;}
}

@keyframes textRevAnim {
  0%   {bottom: 5vh; }
  100% {bottom: -60vh; }
}

.stars{
	position: absolute; 
	width:2px;
	height:2px;
	border-radius:2px;
	background-color:yellow;
	visibility: hidden;
}


#star3{
	right:7vw;
	top:8vh;
	animation: star 2.5s -1.5s ease-in-out infinite;
}

#star8{
	left:43vw;
	top:4vh;
}

#star9{
	right:20vw;
	top:15vh;
}

#star10{
	left:16vw;
	top:13vh;
}

#star11{
	left:6vw;
	top:4vh;
	animation: star 2.5s -0.5s ease-in-out infinite;
}

#star13{
	right:36vw;
	top:3vh;
	animation: star 2.5s -2.5s ease-in-out infinite;
}

#star15{
	left:28vw;
	top:5vh;
	animation: star 2.5s -1s ease-in-out infinite;
}

@keyframes star {
  0% { opacity: 1; }
  50% { opacity: 0; }
  0% { opacity: 1; }
}

@media only screen and (max-device-width:480px), screen and (max-device-width: 850px) {
	@keyframes textAnim {
		0% {
			bottom: -40vh;
			transform: scaleY(1);
		}

		50% {
			bottom: 15vh;
			transform: scaleY(0.75);
			transform-origin: top center;
		}

		62.5% {
			bottom: 15vh;
			transform: scaleY(1);
			transform-origin: top center;
		}

		75% {
			bottom: 15vh;
			transform: scaleY(0.9);
			transform-origin: top center;
		}

		100% {
			bottom: 15vh;
			transform: scaleY(1);
			transform-origin: top center;
		}
	}

	@keyframes textRevAnim {
		0% {
			bottom: 15vh;
		}

		100% {
			bottom: -60vh;
		}
	}
}

@media only screen and (min-device-width: 851px) and (max-device-width: 1200px) and (max-device-height: 850px) and (any-pointer: coarse) {
	html {
		height: 100vh;
		width: 100vw;
	}

	body {
		position: fixed;
		height: 100vh;
		width: 100vw;
	}
	.bodytext1{
		font-size:1.53vh;
	}
}