body,html 
{
	height: 100%;
	margin: 0;
}

#homeDiv
{
	display:none;
}

#background
{	
	background-size: 100% 100%;	
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;	
	user-select:none;
}

#palyBtnDiv
{
	bottom:0;
	position:fixed;
}

#gamePage
{
	display:none;
}
#howToPlayButtonDiv
{
	visibility:hidden;
}
#howToPlayInfoDiv
{
	display:none;
	background-color:rgba(1, 129, 192, 0.8);
	border-radius: 1vw;
}
.noPadding
{
	padding:0 !important;
}
.instuctuionClass
{
	text-align:center;
	font-size:2vw;
	font-weight:700;
	color:white;
}
#selectPlayerForCenturyDiv
{
	display:none;
	margin-top:5vh;
}
#scoreBoardDiv
{
	bottom:0;
	position:fixed;
	display:none;
	background-color: #1e90ff;
	
}
.scoreBoardClass
{
	font-size:1.8vw;
	font-weight:600;
	color:white;
}
.scoreBoardTextClass
{
	font-size:1.8vw;
	font-weight:600;
	color:black;
}
.marginClass
{
	margin-bottom:1vh;
}
.redClass
{
	color:red;
}

.ballClass
{
	background-size: 100% 100%;	
	border-radius: 50%;
	height:16vh;
	opacity: 1.7;
	animation-name: rotate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


#nextBallDiv
{
	margin-top:10vh;
}

.optionsClass
{
	height:10vh;
	background-color: #1e90ff;
	margin-top:1.5vh;
	font-size:3vw;
	font-weight:700;
	color:white;
	text-align:center;
	border: none;
	border-radius: 1vw;
	box-shadow: 0.6vh 0.6vh #01010A;
}
.optionsClass:active 
{
  background-color: #1C468B;
  box-shadow: 0.4vh 0.4vh #666;
  transform: translateY(4px);
}


#questionBoard
{
	display:none;
}
.queClass
{
	font-size:3vw;
	color:white;
	font-weight:700;
	text-align:center;
	margin-top:2vh;
}

#resultText
{
	background-color: white;
	color:black;
	font-size:3vw;
	font-weight:900;
	text-align:center;
	margin-top:1.5vh;
	border-radius: 1vw;
	
}
#lastPage
{
	display:none;
	background-color:rgba(46, 133, 177, 0.8);
	border-radius: 1vw;
}
.playerInfoClass2
{
	font-size:2vw;
	color:white;
	font-weight:700;
	text-align:center;
}
.playerInfoClass1
{
	border: 1px solid #29f54c;
	margin-top:1vh;
	border-radius: 1vw;
}
.boldScore
{
	color:#FFA500;
	font-weight:900;
}
.boldCountry
{
	font-size:2vw;
	font-weight:900;
}
#equationDiv
{
	display:none;
	font-size: 5vw;
	color: black;
	font-weight: 900;
	margin-top: 28vh;
}

#showMsgDiv
{
	display:none;
}

#message
{
	font-size: 4vw;
	color: white;
	font-weight: 900;
	margin-top: 28vh;
	text-align:center;
}
#CanvasId
{
	border: 5px solid #616A6B;
	border-radius: 50%;
	
}
#timerDiv
{
	display:none;
	margin-top: 8vh;
}

#smalldiv
{
    margin-top:0px;
    justify-content: center;
    align-items: center; 
}

#stage1,#stage2
{
	display:block;
	margin-top:1vh;
	
	-webkit-perspective:1200;
	-ms-perspective:1200;
	-moz-perspective:1200;
	-webkit-transform-style: preserve-3d; 
	-ms-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
}
#rotate1, #rotate2
{
	 margin:0 auto;
        /*width:150px;*/
     height:4vh;
	-webkit-transform-style: preserve-3d; 
	-ms-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
}

.poster1,.poster2 
{
	background-image: url('../images/ball2.jpg');
	position:fixed;
	left:0vw;
	width:6vw;
	height:10vh;
	opacity: 1.7;
	-webkit-border-radius: 50%;
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	animation-name: rotate;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	background-size: 100% 100%;	
}
#divshowingCricketBall
{
	display:none;
	
}
@keyframes rotate {
  from { background-position-y: 0vh; }
  to { background-position-y: 50vh; }
}

.slowring
{
	-webkit-animation-name: x-spin;
	-webkit-animation-duration:3s;
	-ms-animation-name: x-spin;
	-ms-animation-duration:3s;
	-moz-animation-name: x-spin;
	-moz-animation-duration:3s;
	animation-duration:3s;
}
.fastring
{

	-webkit-animation-name: x-spin;
	-webkit-animation-duration:1s;
	-ms-animation-name: x-spin;
	-ms-animation-duration:1s;
	-moz-animation-name: x-spin;
	-moz-animation-duration:3s;
	animation-duration:3s;

}

.ring1
{
	
	height: 10vh;
	margin-top:20vh;
	/*width:150px;*/
	-webkit-transform-style: preserve-3d;
	-webkit-animation-iteration-count:1;
	-webkit-animation-timing-function: linear;
	-ms-transform-style: preserve-3d;
	-ms-animation-iteration-count: 1;
	-ms-animation-timing-function: linear;
	-moz-transform-style: preserve-3d;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: linear;
}
.ring2 
{
	
	height: 10vh;
	margin-top:20vh;
	/*width:150px;*/
	-webkit-transform-style: preserve-3d;
	-webkit-animation-iteration-count:1;
	-webkit-animation-timing-function: linear;
	-ms-transform-style: preserve-3d;
	-ms-animation-iteration-count:1;
	-ms-animation-timing-function: linear;
	-moz-transform-style: preserve-3d;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: linear;
}
@-webkit-keyframes x-spin {
        0%    { -webkit-transform: rotateX(0deg); 
                -ms-transform: rotateX(0deg);
                -moz-transform: rotateX(0deg);}
        50%   { -webkit-transform: rotateX(180deg); 
                -ms-transform: rotateX(180deg);
                -moz-transform: rotateX(180deg);}
        100%  { -webkit-transform: rotateX(360deg); 
                -ms-transform: rotateX(360deg);
                -moz-transform: rotateX(360deg);}
      }

      @-webkit-keyframes y-spin {
        0%    { -webkit-transform: rotateY(0deg);
                  -ms-transform: rotateY(0deg);
                -moz-transform: rotateY(0deg); }
        50%   { -webkit-transform: rotateY(180deg);
                -ms-transform: rotateY(180deg);
                -moz-transform: rotateY(180deg); }
        100%  { -webkit-transform: rotateY(360deg);
                -ms-transform: rotateY(360deg);
                -moz-transform: rotateY(360deg);}
      }

@-webkit-keyframes back-y-spin
 {
        0%    { -webkit-transform: rotateY(360deg); 
                -ms-transform: rotateY(360deg);
                -moz-transform: rotateY(360deg);}
        50%   { -webkit-transform: rotateY(180deg);
                -ms-transform: rotateY(180deg);
                -moz-transform: rotateY(180deg); }
        100%  { -webkit-transform: rotateY(0deg); 
                -ms-transform: rotateY(0deg); 
                -moz-transform: rotateY(0deg); }
}


p
{
	font-size: 2vw;
	color: white;
	font-weight: 900;	
	text-align:center;
	margin-top:2vh;
}