@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@300;400;600;800&display=swap');




body {
  font-family: "Montserrat", sans-serif;
   text-align: left;
   font-size: 20px;
  background-color: black;
  color: white;
  font-weight:600;
  overflow-x:hidden;

  background-image: url(/images/fullbg.jpg);
background-size:  cover;
background-position: right;
background-repeat: no-repeat;

  min-height: 100vh;
 min-height: 100dvh;
  background-attachment: fixed;

}

.ext {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

.fixedmiddle {

  position: relative;
  width: 85%;
  text-align: center;
  padding-top: 20px;
  max-width: 440px; 
  margin-top: 20px;

}

.center {
text-align: center;
}

.shadedarea {
  background-repeat: repeat-x;
  text-align: center;
  color: #ffffff;
  background-color: #003970;
  background-size: cover;
  background-position: bottom;
  padding: 5px 20px 20px 20px;
    padding-top: 5px;
  margin-bottom: 30px;
  box-shadow: 10px 11px rgba(0,0,0,1);
  border: 3px solid rgba(206,168,85,1);
  z-index: 99;
  border-radius: 0px;
}


.logo {
	
width: auto;
  max-width: 90%;
	margin-left:auto;
	margin-right:auto;
	display: block;
  z-index: 999;
  position: relative;
  max-height: 25vh;
}

.logoimg {
  position: relative !IMPORTANT;
  margin-left: auto;
  margin-right: auto;
  max-width: 90%;
  display: block;
  padding-right: 0px !important;
max-height: 25vh;
}
.checkarea2 {

  text-align: left;
  width: 100%;
}

input[type="submit"],
input[type="reset"] {
  background-color: #7cbc03;
  border-radius: 10px;


}





.btn {
  background-color: #94d40b;
}



@property --_w {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw; 
}
@property --_h {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh; 
}

:root {
  --w: tan(atan2(var(--_w),1px)); /* screen width */
  --h: tan(atan2(var(--_h),1px)); /* screen height*/
  /* The result is an integer without unit  */

  --p0x: 0;
  --p0y: 0;
  --p1x: calc(var(--w) / 2) ;
  --p1y: calc(0 - (var(--h) - 1));
  --p2x: calc((var(--w) * 0.7) - 20);
  --p2y: calc(0 - (var(--h) - 450));
    --p2y: calc(0 - (var(--h) - (var(--h)*0.55)));
  --q1x: calc(2 * var(--p1x) - var(--p2x));
  --q1y: calc(1.3 * var(--p1y) - var(--p2y));
  --q1x2: calc(2 * var(--p1x) - var(--p2x));
  --q1y2: calc(3 * var(--p1y) - var(--p2y));
}


@keyframes fadein2 {
  0% {  opacity:0 ;
  transform: scale(0);}

    90% {  opacity:0; 
    transform: scale(0);}


  100% {    opacity:1;
    transform: scale(1);
    } 
}

.fadein {

  transform: scale(1);
  overflow: hidden;
	animation: fadein2 6000ms;
}

.stand {
	position: absolute;
		left:20%;
		bottom: 0;
		
		width:10%;

}
.leg{
	position: absolute;
		left:-10%;
		bottom: -10%;
		
		width:50%;
		opacity:0;

}

.spinballouter {
			position: absolute;
		left:20%;
		bottom: 2.2%;
		width:10%;
	
}



.leg{
left: -24%;
    bottom: -2%;
    width: 86%;

}
.kick {
	
    animation: kick 4s;
	animation-timing-function: ease-in-out;
	
}

@keyframes kick {
    0% {
transform: translate(-50%, 100%) scale(20);
opacity:1;
  }
  
  68% {
transform: translate(-70%, 100%) scale(20);
opacity:1;
  }
74% {
transform: translate(-10%, -10%) scale(1);
opacity:1;

/* 		left:-10%;
		bottom: -10%;
		
		width:50%; */

  }
  77% {
transform: translate(-70%, -150%) scale(0.5);
opacity:1;
  }
  100% {
transform: translate(-70%, -150%) scale(0.5);
opacity:1;
  }
}


.flyball {
  animation-name: move1, move2;
  animation-duration: 3s, 3s;
  animation-timing-function: ease-out, ease-out;
  animation-iteration-count: once, once;
  animation-delay:2.9s, 2.9s;

}
.spinball {
		width:100%;
		z-index:999;

			opacity: 0;
      position: relative;
}
.outer {

  width: 100vw;
  height:100vh;
 height: 100dvh;
  overflow: hidden;
  position: absolute;
  top: 0;
}

.staticball {
		bottom:0%;
		width:25%;
		position: absolute;
		left:20%;
		width:10%;
		animation: showBall .1s forwards;
		
}
.hide {
  visibility: hidden;
}
.text-danger {
font-size: 14px;
}


@keyframes showBall {
  0% {
    opacity: 0;
    display: none;
  }
  1% {
    opacity: 0.01;
    display: block;
  }
  100% {
    opacity: 1;
    display: block;
  }
}

.hideit {

  animation:hideball 4s forwards;
  
}

@keyframes hideball {
      0% {
opacity:1;
  }
  
  74% {
opacity:1; 
  }
75% {
opacity:0; 
  }

  100% {
opacity:0; 
visibility:hidden;
  } 
}


@keyframes move1 {
  from { transform: translate3d(calc(1px * var(--p0x)), calc(1px * var(--p0y)), 0px) ; }
  to { transform: translate3d(calc(1px * var(--q1x)), calc(1px * var(--q1y)), 0px) ;   }
}
@keyframes move2 {
  to { transform: translate3d(calc(1px * var(--p2x)), calc(1px * var(--p2y)), 0px); }
}

.fadeball {

  animation-name: fade2,shrink;
  animation-duration: 6s, 6s;
  animation-timing-function: linear,  ease-out;
  animation-iteration-count: once, once;


}


@keyframes fade2 {
      0% { 
opacity:0;

  }
        49% {
opacity:0;

  }
        50% {  
opacity:1;

  }
  90% { 
 
opacity: 1;

  }
91% { 

opacity: 1;
  }

  100% { 

opacity: 1;

  } 
}
@keyframes shrink {
      0% { 
transform: scale(1);
  }
        49% {
transform: scale(1);

  }
        50% {  
transform: scale(1);

  }
  90% { 
 
transform: scale(0.2);

  }
91% { 

transform: scale(0.2);
  }

  100% { 

transform: scale(0);

  } 
}


input[type=button], input[type=submit], input[type=reset] {

  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-style: normal;

 width:auto;
 text-align:center;

font-size: 19px;
margin-top: 5px;
max-width: 100%;
margin-left: auto;	
margin-right: auto;	
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
  border-radius: 0;

  padding: 10px 20px 10px 20px;

  margin-bottom: 15px;
  background-color:#ffffff;

  border: 3px solid rgba(206,168,85,1);
  
  box-shadow: 5px 6px rgba(0,0,0,1) ;
cursor: pointer;
color:#000000;
font-weight: 600;

}


 @media only screen and (max-width: 650px) {
	 
	 
  
:root {

  --p0x: 0;
  --p0y: 0;
  --p1x: calc(var(--w) / 2) ;
  --p1y: calc(0 - (var(--h) - (var(--h)*0.35)));
  --p2x: calc((var(--w) * 0.7) - 80);
/*   --p2y: calc(0 - (var(--h) - 360)); 
  --p2y: calc(0 - (var(--h) - (var(--h)*0.5)));*/
  --p2y: calc(0 - (var(--h) - (var(--h)*0.5)));
  --q1x: calc(2 * var(--p1x) - var(--p2x));
  --q1y: calc(2 * var(--p1y) - var(--p2y));
    --q1x2: calc(0.5 * var(--p1x) - var(--p2x));
}
	 body{
background-size:  cover;
background-position: right;
background-repeat: no-repeat;
    min-height: 100vh;
    min-height: 100dvh;
	 }
	 .text1 {
	 top: 25%; 
	 
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
	 }
		 .text2 {
	 top: 40%; 
	 
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
	 } 

.spinballouter {

		width:25%;
	
}

.staticball {
		bottom:0%;
		width:25%;
}
.leg{
left: -24%;
    bottom: -2%;
    width: 86%;

}

.box {
font-size: 2rem;
top: 15%;

    }
}
.Detailsbox {
border: 1px solid #05054b !important;
  width: 100% !important;
  height: 30px !important;
  background-color: rgba (255,255,255,0.75);
  display: inline-block;
  font-size: 15px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #222222;
  margin-top: 0.1em;
  margin-bottom: 0.3em;
  transform: translateZ(0);
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 22px;
}
::placeholder {

  font-size: 15px;
}
form {
  margin-top: 0.9em;
  margin-bottom: 0px;
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
  text-transform: none;
}


.sign {

  border: 20px black solid;

  background-color: #0f0f0f;
  color:yellow;
}

      .nums {

font-size: 64px;
  line-height: 69px;
  padding: 5px 0px;
  width: 40px;
  color: yellow;
    background-color: #2c2929;
      
    }
    .titles {
      width: 23%;
    }


    ul {
      overflow: hidden;
      white-space: nowrap;
      padding: 0;

    }
    li {
      display: inline-block;
      font-size: 0.9rem;
      list-style-type: none;
      padding: 0.2em;

      font-weight: 600;
  margin: 0px 3px;

    }

    
    li span {
      display: inline-block;
      font-size: 1.5rem;
    }
    
 
 


    @media all and (max-width: 768px) {
   
      
      li {
        
padding: 0px;
    width: 18%;
    margin: 0px 5px;
      }
      

.titles {
  width: 18%;
  font-size: 13px;
}
.nums {
  font-size: 38px;
  line-height: 38px;
  padding: 5px 0px;
  width: 25px;
  color: yellow;
  background-color: #2c2929;
}

.sign {
  border: 10px black solid;

    
    }

  }