@charset "utf-8";
/* CSS Document */
a{
	font-family: 'Raleway', 'sans-serif';
	font-weight: 900;
	font-display: swap;
}
.video {
	position: fixed;
	height: 163vh;
	width: auto;
	left: 0;
	right: 0;
	top: 0;
	z-index: -1;
}
.video video{
	position: absolute;
	overflow: hidden;
}
.YTvideo {
	position: fixed;
	height: 100vh;
	width: 100%;
	left: 0;
	right: 0;
	top: 0;
	z-index: -1;
}
.YTvideo iframe{
	position: absolute;
  	width: 100vw;
  	height: 100vh;
	overflow: hidden;
}
@media (min-aspect-ratio: 16/9) {
  .YTvideo iframe {
    /* height = 100 * (9 / 16) = 56.25 */
    height: 56.25vw;
  }
}   
@media (max-aspect-ratio: 16/9) {
  .YTvideo iframe {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 177.78vh;
  }
}
.overlay {
  	position: fixed;
	overflow: hidden;
  	top: 0;
  	left: 0;
	height: 110vh;
  	width: 100%;
  	background-color: black;
  	opacity: 0.45;
  	z-index: 0;
}
.content{
	z-index: 1;
}
hr {
	border: 1pt solid;
	opacity: 100% !important;
}
.elite-logo {
	max-width: 6rem;
	margin-top: 10px;
	filter: drop-shadow(3px 3px 10px #000);
    -webkit-filter: drop-shadow(3px 3px 10px #000);
}
.ua-logo {
	width: 100%;
	filter:invert(100%);
	margin: 0;
	padding: 0;
}
.ball {
	margin-top: 10px;
	 filter: drop-shadow(3px 3px 10px #000);
    -webkit-filter: drop-shadow(3px 3px 10px #000);
}
.ballbutton{
	display: inline-block;
	position: relative;
}
.ballbutton a{
	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	-ms-transform: translate(-50%, -50%);
}
.ballbutton button{
	font-size: 1.95rem;
	font-weight: 800;
	color: white;
	border: none;
	border-radius: 12px;
	background-color: rgb(49,34,243);
	box-shadow: 3px 3px 10px black;
	transition: 0.15s ease-in
}	
.ballbutton button:hover {
	font-size: 2.05rem;
	border: 3px solid black;
}
.contact{
	position: relative;
	display: inline-block;
	margin-bottom: 2.2rem;
	margin-top: .25rem;
}
.contact a{
	position: absolute;
  	left: 50%;
  	transform: translateX(-50%);
  	-ms-transform: translateX(-50%);
}
.contact button{
	border: 0;
	background-color: rgb(49,34,243);
	border-radius: 8px;
	color: white;
	margin: 2px;
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 2rem;
	box-shadow: 3px 3px 10px black;
	width: 160%;
	margin-left: -30% !important;
	transition: 0.15s ease-in;
}

.contact button:hover {
	font-size: 1.3rem;
	border: 3px solid black;
	margin: 0px;
	
}
.contact button:active{
	background-color: black;
}
.adult-league{
	
	
}
.iconimg{
	position: relative;
	display: inline-block;
}
.iconimg a {
	position: absolute;
	left: 50%;
  	transform: translateX(-50%);
  	-ms-transform: translateX(-50%);
}
.iconimg img{
	max-width: 85%;
	filter: drop-shadow(3px 3px 10px #000);
    -webkit-filter: drop-shadow(3px 3px 10px #000);
}
.insta{
	left: 27%;
	right: -27%;
}
.facebook {
	left: -27%;
	right: 27%;
}


.ball1{
	animation-name: ball-1-roll;
	animation-timing-function: ease-out;
	animation-duration: 1.9s;
	animation-delay: 200ms;
	animation-direction: forwards;
}
@keyframes ball-1-roll{
	from {margin-left: -100%; margin-right: 100%; transform: rotate(-600deg);}
	to {margin-left: 0; margin-right: 0; transform: rotate(0deg);}
}
.ball2{
	animation-name: ball-2-roll;
	animation-timing-function: ease-out;
	animation-duration: 1.9s;
	animation-delay: 200ms;
	animation-direction: forwards;
}
@keyframes ball-2-roll{
	from {margin-left: 100%; margin-right: -100%; transform: rotate(600deg);}
	to {margin-left: 0; margin-right: 0; transform: rotate(0deg);}
}
.menu-button {
	animation-name: button-fade;
	animation-duration: 2.6s;
	animation-direction: forwards;
	animation-timing-function: linear;
}
@keyframes button-fade {
	0% {opacity: 0%;}
	80% {opacity: 0%;}
	100% {opacity: 100%;}
}

@keyframes ball-1-roll-1200{
	from {margin-left: -100%; margin-right: 100%; transform: rotate(-600deg);}
	to {margin-left: 15%; margin-right: 0; transform: rotate(0deg);}
}
@keyframes ball-2-roll-1200{
	from {margin-left: 100%; margin-right: -100%; transform: rotate(600deg);}
	to {margin-left: -27%; margin-right: 0%; transform: rotate(0deg);}
}

@keyframes ball-1-roll-1400{
	from {margin-left: -100%; margin-right: 100%; transform: rotate(-600deg);}
	to {margin-left: 15%; margin-right: 0; transform: rotate(0deg);}
}
@keyframes ball-2-roll-1400{
	from {margin-left: 100%; margin-right: -100%; transform: rotate(600deg);}
	to {margin-left: -25%; margin-right: 0%; transform: rotate(0deg);}
}

@media screen and (min-width: 576px) {
	.ballbutton button{
		font-size: 2.2rem;
	}
	.ballbutton button:hover{
		font-size: 2.3rem;
	}
	.contact button{
		font-size: 1.8rem;
		width: 100%;
		margin-left: auto !important;
	}
	.contact button:hover{
		font-size: 1.9rem;
	}
	.ball {
		max-width: 19rem;
	}
	.iconimg img{
		max-width: 50%;
	}
	.insta{
		left: 35%;
	}
	.facebook{
		left: -35%;
	}
	.ua-logo {
		max-width: 44rem;
	}
	.elite-logo{
		max-width: 8rem;
	}
}
@media screen and (min-width: 768px) {
	.elite-logo{
		max-width: 9rem;
	}
	.ua-logo{
		max-width: 50rem;
	}
	.iconimg img{
		max-width: 35%;
	}
	.insta {
		left: 40%;
		top: 50%;
	}
	.facebook {
		top: 50%;
		left: -40%;
	}
}
@media screen and (min-width: 992px) {
	.ball {
		max-width: 20rem;
	}
	.iconimg img{
		max-width: 30%;
	}
	.insta {
		left: 40%;
	}
	.facebook{
		left: -40%;
	}
}
@media screen and (min-width: 1200px) {
	.video{
		width: 120%;
		height: auto;
	}
	.iconimg img{
		max-width: 30%;
	}
	.ball1 {
		margin-left: 15%;
		animation-name: ball-1-roll-1200;
	}
	.ball2 {
		margin-left: -27%;
		animation-name: ball-2-roll-1200;
	}
	.ball{
		margin-top: -25px;
		margin-bottom: -5px;
	}
	.ballbutton button{
		font-size: 2.5rem;
	}
	.ballbutton button:hover{
		font-size: 2.55rem;
	}
	.contact button{
		font-size: 2.8rem;
	}
	.contact button:hover{
		font-size: 2.9rem;
	}
}
@media only screen 
and (min-width : 1200px) 
and (max-height : 800px) {
	.video {
		width: 100%;
		height: auto;
	}
}
@media screen and (min-width: 1450px) {
	.ball1 {
		margin-left: 15%;
		animation-name: ball-1-roll-1400;
	}
	.ball2 {
		margin-left: -25%;
		animation-name: ball-2-roll-1400;
	}
	.insta {
		left: 40%;
	}
	.facebook {
		left: -40%;
	}
	.video{
		height: auto;
		width: 110%
	}
	.overlay {
		height: 100%;
		width: 100%;
	}
	.ball {
		max-width: 23rem;
	}
}
@media screen and (min-width: 1600px) {
	.iconimg img{
		max-width: 6.75rem;
	}
	.insta {
		left: 45%;
	}
	.facebook {
		left: -45%;
	}
}
@media screen and (min-width: 1900px) {
	.iconimg img{
		max-width: 5.75rem;
	}
	.insta {
		left: 45%;
	}
	.facebook {
		left: -45%;
	}
}