* {
    box-sizing: border-box;
}
hr {margin-top:2px;margin-bottom:2px;}
html {overflow: hidden;}
#startingDiv {
position: absolute;
bottom: 50%;
width: 100%;
font-size: 3em;
opacity:0;
display:none;
}
#logoDiv{
    border: 1px solid grey;
    padding: 5px;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: black;
	}
.hoverBoldStyle:hover{font-weight:bold;cursor:pointer;}
.loginDivBtnStyle:hover{font-weight:bold;cursor:pointer;}
.infoStyle{
    border: 1px solid grey;
    padding: 5px;
	position:absolute;
	top:10%;
	left:21%;
	width:78%;
	height:69%;
	overflow:auto;
	z-index:2;
	font-family : arial;
	font-size : 1.5em;
	background:rgb(255,140,0);
}
.fadeIO {
    -webkit-animation:fadeIO 8s ease-in-out;
    -moz-animation:fadeIO 8s ease-in-out ;
    animation:fadeIO 8s ease-in-out ;
}
@-moz-keyframes fadeIO { 
	  0% { opacity:0;}
	 50% { opacity:1;}
	100% { opacity:0;} 
	}
@-webkit-keyframes fadeIO { 
	  0% { opacity:0;}
	 50% { opacity:1;}
	100% { opacity:0;} 
	}
@keyframes fadeIO {
	  0% { opacity:0;}
	 50% { opacity:1;}
	100% { opacity:0;}	
 }
.op1to0 {
    -webkit-animation:fadeOut 0.5s ease-in-out;
    -moz-animation:fadeOut 0.5s ease-in-out ;
    animation:fadeOut 0.5s ease-in-out ;
	opacity:0;
}
@-moz-keyframes fadeOut { 
	0% { opacity:1;}
	100% { opacity:0;} 
	}
@-webkit-keyframes fadeOut { 
	  0% { opacity:1;}
	100% {opacity:0;} 
	}
@keyframes fadeOut {
	  0% { opacity:1;}
	100% { opacity:0;}	
 }
 .loginDivBtnStyle {
 width:100%;padding:5px;margin-top:2px;border-radius:2px;border:0;background:rgb(255,140,0);
 }
 .loginDivStyle {
 position: absolute;
    top: 10%;
    left: 21%;
	width:58%;
	height:auto;
}
.op0to1 {
    -webkit-animation:fadeIn 2s ease-in-out;
    -moz-animation:fadeIn 2s ease-in-out ;
    animation:fadeIn 2s ease-in-out ;
}
@-moz-keyframes fadeIn { 
	  0% { opacity:0; } 
	 49% { opacity:0; }
	 50% { opacity:0.1; } 
	100% { opacity:1;} 
	}
@-webkit-keyframes fadeIn { 
	  0% {opacity:0; } 
	 49% {opacity:0; } 
	 50% { opacity:0.1; } 
	100% { opacity:1;}  
	}
@keyframes fadeIn {
	  0% {opacity:0; } 
     49% { opacity:0; } 
	 50% { opacity:0.1; } 
	100% { opacity:1;}  
 }
.op0to1f {
    -webkit-animation:fadeInf 0.5s ease-in-out;
    -moz-animation:fadeInf 0.5s ease-in-out ;
    animation:fadeInf 0.5s ease-in-out ;
}
@-moz-keyframes fadeInf { 
	  0% { opacity:0; } 
	100% { opacity:1;} 
	}
@-webkit-keyframes fadeInf { 
	  0% {opacity:0; } 
	100% { opacity:1;}  
	}
@keyframes fadeInf {
	  0% {opacity:0; } 
	100% { opacity:1;}  
 }
.from0to90 {
    position: absolute;
	margin:0px;
    bottom: 10%;
    left: 0;
	width:100%;
	height:auto;
    -webkit-animation:aspin 1s ease-in-out;
    -moz-animation:aspin 1s ease-in-out ;
    animation:aspin 1s ease-in-out ;
	transform-origin: center center;
}
@-moz-keyframes aspin { 
	  0% { -moz-transform: rotate(90deg) scale(0.1,1); } 
	100% { -moz-transform: rotate(0deg) scale(1,1); } 
	}
@-webkit-keyframes aspin { 
	  0% { -webkit-transform: rotate(90deg) scale(0.1,1);} 
	100% { -webkit-transform: rotate(0deg) scale(1,1);} 
	}
@keyframes aspin {
   0% { -webkit-transform: rotate(-90deg) scale(0.1,1); transform: rotate(-90deg) scale(0.1,1);}
 100% { -webkit-transform: rotate(0deg) scale(1,1); transform: rotate(0deg) scale(1,1);}
 }
.from90to0 {
    position: absolute;
	margin:0px;
    top: 0;
    left: 20%;
	width:1px;
	height:100%;
	overflow:hidden;
    -webkit-animation:spin 1s ease-in-out;
    -moz-animation:spin 1s ease-in-out ;
    animation:spin 1s ease-in-out ;
	transform-origin: center center;
}
@-moz-keyframes spin { 
	  0% { -moz-transform: rotate(90deg) scale(1,0.1); } 
	100% { -moz-transform: rotate(0deg) scale(1,1); } 
	}
@-webkit-keyframes spin { 
	  0% { -webkit-transform: rotate(90deg) scale(1,0.1);} 
	100% { -webkit-transform: rotate(0deg) scale(1,1);} 
	}
@keyframes spin {
   0% { -webkit-transform: rotate(90deg) scale(1,0.1); transform:rotate(90deg) scale(1,0.1); }
 100% { -webkit-transform: rotate(0deg) scale(1,1); transform:rotate(0deg) scale(1,1); } 
 }
 
 
.pnl{
border:1px solid grey;
border-radius:2px;
padding:2px;
margin:2px;
background-color:lightgreen;
}
.ballsStyle {
width:8%;
height:auto;
position: absolute;
cursor:none;
}
.racketStyle {
width:10%;
position: absolute;
cursor:none;
}
.containerDivStyle {
position: fixed;
background-color:black;
display:block;
width:100%;
max-width:768px;
min-height:500px;
margin-left:auto;
margin-right:auto;
}
.scoresDivStyle {
/*background-color:rgb(255,140,0);*/
display:table;
width:100%;
height:10%;
margin:auto;
padding:2px;
/*
border:1px solid grey;
border-radius:2px;
*/
font-family:monospace;
}
.terenStyle {
margin:auto;
border:1px solid grey; 
background-color:rgb(103,95,76);
/*
background-image:url(teren.png);
*/
background-repeat:round;
width:80%; 
height:70vh;
cursor:no-drop; 
}
.racketAreaStyle {
cursor:none;
height:75%;
border-top:1px dashed red;
border-bottom:1px dashed red;
}
.tdl {text-align:right;}
.controlsDivStyle {
/*background-color:rgb(255,140,0);*/
width:100%;
height:19%;
margin:auto;
padding:2px;
/*
border:1px solid grey;
border-radius:5px;
*/
}
.scoresStyle {
font-family:monospace;
font-size:200%;
color: rgb(126,255,1);
}
.speedConteinerStyle {
height:33.3%;
}
.speedStepStyle {
border-radius:1em;
border-top:1px solid grey;
border-left:1px solid grey;
border-right:1px solid grey;
margin-left:auto;
margin-right:auto;
height:10%;
width:65%;
}
.shieldConteinerStyle {
height:33.3%;
}
.ballConteinerStyle {
height:33.3%;
}
.ballButtonStyle {
width:65%;
height:auto;
}
.surpriseStyle {
width:8%;
height:auto;
position: absolute;
cursor:none;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.surpriseStyle.top {
    -webkit-transform:scale(1,0);
    -moz-transform:scale(1,0);
    -o-transform:scale(1,0);
    transform:scale(1,0);
    filter: alpha(opacity=0);
    opacity:0;
  }
.op1 {
    opacity:1;
    -webkit-transform:scale(1,1);
    -moz-transform:scale(1,1);
    -o-transform:scale(1,1);
    transform:scale(1,1);
}
.op0 {
    filter: alpha(opacity=0);
    -webkit-transform:rotate(360deg) scale(0,0);
    -moz-transform:rotate(360deg) scale(0,0);
    -o-transform:rotate(360deg) scale(0,0);
    transform:rotate(360deg) scale(0,0);
}  
.op00 {
    filter: alpha(opacity=0);
    -webkit-transform:rotate(360deg) scale(0,0);
    -moz-transform:rotate(360deg) scale(0,0);
    -o-transform:rotate(360deg) scale(0,0);
    transform:scale(0,0);
}
.op000 {
    filter: alpha(opacity=0);
    -webkit-transform:rotate(360deg) scale(0,0);
    -moz-transform:rotate(360deg) scale(0,0);
    -o-transform:rotate(360deg) scale(0,0);
    transform:scale(0,0);
	transform-origin: bottom left;
}   

.iconButtonStyle {  
width:12%;
height:auto;
border: 1px solid grey;
border-radius:5px;
margin: 1px;
vertical-align:middle;
font-weight: bold;
}
.imgButtonStyle {
width:12%;
height:auto;
background-color: rgb(255,140,0);
/*border: 1px solid grey;*/
border-radius:5px;
}
@media only screen and (min-width: 768px) {
.imgButtonStyle {width:5.67%;}
.iconButtonStyle {width:5.67%;}
.highScoresDivStyle {font-size:20px;}
}