@media screen and ( max-width: 1000px ) {

	#hero { 
		background: url( ../images/testgif.gif );
		/* text-align: center; */
		width: 100%; 
	}

	#hero-title {
		position: absolute;
		left: 50%;
		top: 35%;
		transform: translate( -50%, -50% );
	}

	#hero-h3 {
		display: none;
	}

	#hero-sponsorTag {
		text-align: left;
	}

		#hero-h1 {
			animation: hero-h1-keyframe 5s ease 0s infinite normal none running;
			font-size: 3em;
			text-shadow: var( --ts-white ); 
		}

		@keyframes hero-h1-keyframe {
			0% { color: var( --green ); }
			50% { color: var( --pink ); }
			100% { color: var( --green ); }
		}

	#hero-logo-img {
		width: 0px;
	}

	#hero-right,
	#play,
	#about,
	#sponsors,
	#faq-title,
	#faq-question {
		display: none;
	}

	#hero-menu {
		position: absolute;
		left: 25%;
		top: 75%;
		transform: translate( -50%, -50% );
		z-index: 10;
	}

	#hero-menu > h2 {
		font-size: 1.5em;
	}

		.hero-menu-btn { 
			color: var( --pink ); 
			text-shadow: 3px 3px 0px rgb(255, 255, 255); 
		} .hero-menu-btn:hover { 
			color: white; 
			text-decoration: none; 
			text-shadow: var( --ts-pink );
		}

		.hero-menu-btn-box { 
			width: 0px; 
			height: 15px; 
			background-color: white ;  
			display: inline-block; 
			padding-bottom: 5px; 
			margin-right: 15px;
			margin-bottom: 5px; 
			box-shadow: 3px 3px 0px #FF0067; 
		} .hero-menu-btn:hover > .hero-menu-btn-box { 
			width: 15px; 
		}

		::-webkit-scrollbar { width: 15px; }


}