@font-face {
   font-family: myFirstFont;
   src: url(punjabi.woff);
}
body {color: black; background-color: #dce0e3; margin: 0px}
.big	{
	
	text-align: justify;
	font-size: 1.4em; 
	height: 180px; 
	width: 792px; 
	border: 6px solid #6e6f70; 
	margin: 6px auto 0;
	margin-bottom: -5px;
	border-radius: 5px;
	float: left;
	margin-left: 40px;
	}
.keyword
{
  font-size:18px; 
  font-family: myFirstFont;
}	
.score
{
	margin-top: 10px;
	float: left;
	margin-left: 40px;
}
.done	{color: #478fc9; background-color:#dce0e3;font-family:myFirstFont; padding-bottom:5px;}
.wrongdone	{color: black; background-color:red;font-family:myFirstFont; padding-bottom:5px;}
.todo	{color: red; background-color:green; font-weight: normal; text-decoration: blink;font-family:myFirstFont; padding-bottom:5px;}
.future	{color: black; font-weight: normal; font-family:myFirstFont; padding-bottom:5px;}

.prompt {margin: 1ex 1ex 1ex 1ex}

.board	{color: #308040; background-color: #101020; font-family: monospace;
	font-size: large; letter-spacing: 1ex; width: 28ex;
	margin: 1ex 1ex 1ex 1ex; padding: 1ex 1ex 1ex 1ex;}
.row1	{padding: 0 0 0 0;}
.row2	{padding: 0 0 0 0.3ex;}
.row3	{padding: 0 0 0 0.9ex;}


/*.pressed {color: red; text-decoration: line-through}*/
.pressed
{
	display: block;
	color: #aaa;
	font: bold 9pt arial;
	text-decoration: none;
	text-align: center;
	width: 44px;
	height: 41px;
	margin: 5px;
	background: #ff2d2d;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border-top: 1px solid #f5f5f5;
	-webkit-box-shadow: 
		inset 0 0 25px #e8e8e8,
		0 1px 0 #969696,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	-moz-box-shadow: 
		inset 0 0 25px #e8e8e8,
		0 1px 0 #c3c3c3,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	box-shadow: 
		inset 0 0 25px #e8e8e8,
		0 1px 0 #c3c3c3,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	text-shadow: 0px 1px 0px #f5f5f5;
	
}
.silent	{color: #308040;}
.target	{color: #ffff30;}

.echo {color: gray; margin-top: -30px; margin-bottom: 10px}

.count {color:black; margin: 1ex 1ex 0ex 1ex}
.accuracy {color: black; margin: 0ex 1ex 0ex 1ex}
.speed {color: black; margin: 0ex 1ex 1ex 1ex}

.button	{
	width: 100%;
	height: 50px;
	}

.instructions {padding: 0 0 0 0; font-size: small}
.legal {padding: 3ex 0 0 0; font-size: x-small; font-style:italic}

/*]]>*/
 
.btn {
  background: green;
  border-radius: 3px;
  font-family: Georgia;
  color: #ffffff;
  font-size: 20px;
 width: 100%;
 height: 50px;
  border: solid #38668f 2px;
  text-decoration: none;
}

.btn:hover {
  background: black;
  background-image: -webkit-linear-gradient(top, #ffd500, #35b54e);
  background-image: -moz-linear-gradient(top, #ffd500, #35b54e);
  background-image: -ms-linear-gradient(top, #ffd500, #35b54e);
  background-image: -o-linear-gradient(top, #ffd500, #35b54e);
  background-image: linear-gradient(to bottom, #ffd500, #35b54e);
  text-decoration: none;
}

.btn1
{
	margin-top: 210px;
	text-decoration: none;
	border: 1px solid red;
	width: 45px;
	background-color: red;
	text-align: center;
}

.hide-show-button
{
background: #ffd500;
  background-image: -webkit-linear-gradient(top, #91ceff, #2980b9);
  background-image: -moz-linear-gradient(top, #91ceff, #2980b9);
  background-image: -ms-linear-gradient(top, #91ceff, #2980b9);
  background-image: -o-linear-gradient(top, #91ceff, #2980b9);
  background-image: linear-gradient(to bottom, #91ceff, #2980b9);
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 4px 15px 6px 12px;
  text-decoration: none;
}
.hide-show-button:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, green, #3498db);
  background-image: -moz-linear-gradient(top, green, #3498db);
  background-image: -ms-linear-gradient(top, green, #3498db);
  background-image: -o-linear-gradient(top, green, #3498db);
  background-image: linear-gradient(to bottom, green, #3498db);
  text-decoration: none;
}
/*----------------------------------Table -------------------------------------------------*/
table
{
	margin-bottom: 0px;
	border-collapse: collapse;
	 border: 2px solid #ffd500;
  background: white;
  table-layout: fixed;
}

th {
  background: #a88732;
  font-weight: bold;
  text-shadow: 0 2px 0 #38678f;
  color: white;
  border: 2px;
  /*box-shadow: inset 0px 1px 2px #568ebd;*/
 
}

td{
text-align: center;
 
}
#circle1{
text-align: center;
}
table#special 
{
	 height: 35px;
	 width: 35px;
	 margin-bottom: 4px;
	 margin-top: -40px;
	 margin-left: 125px;
	 table-layout: fixed;
	 border: 0px solid #38678f;
	 background: inherit;
	 border-radius: 10px;
	 color: white;
	 }
#circle
{
    font-size:20px;
    padding-top:4px;
	background: green;
	height: 100%;
	width: 200%;
	border-radius: 80px;
	font-family: myFirstFont;
}
#circle2
{   
    font-size:20px;
    padding-top:4px;
	background: red;
	height: 100%;
	width: 200%;
	border-radius: 80px;
	font-family: myFirstFont;
}
#circle3
{   
    font-size:13px;
    padding-top:8px;
	background: green;
	height: 100%;
	width: 200%;
	border-radius: 80px;
}
#circle4
{   
    font-size:13px;
    padding-top:8px;
	background: red;
	height: 100%;
	width: 200%;
	border-radius: 80px;
}
.final_result
{
	margin-top: 100px;
	
}
.pp
{
	text-align: center;
	font-size: 1em; 
	color:black; 
	width: 790px; 
	border: 1px solid #CCCFD1; 
	margin: 15px auto 0;
	margin-left: 120px;
	border-radius: 10px;
}
/*-----------------------------------Laptop Keyboard css code-----------------------------------------------*/
.hide-keyboard
{
	
	text-align: center;
	font-size: 2em; 
	height: 250px; 
	width: 792px; 
	background: #c2ddf2;
	border: 1px solid #CCCFD1; 
	margin: 10px auto 0;
	margin-bottom: -9px;
	border-radius: 10px;
	float: left;
	margin-left: 40px;
	-webkit-box-shadow:  
		inset 0 0 8px #bbb,
		0 1px 0 #aaa,
		0 4px 0 #bbb,
		0 10px 30px #ddd;
	-moz-box-shadow:  
		inset 0 0 8px #bbb,
		0 1px 0 #aaa,
		0 4px 0 #bbb,
		0 10px 30px #ddd;
	box-shadow:  
		inset 0 0 8px #bbb,
		0 1px 0 #aaa,
		0 4px 0 #bbb,
		0 10px 30px #ddd;
		 
}
#keyboard{
	
	margin: 250px auto 0;
	width: 792px;
	height: 300px;
	position: absolute;
	background:	#206875  url('keyboard-background.jpg') repeat-x; 
	-moz-border-radius-topleft: 7px 21px;
	-moz-border-radius-topright: 7px 21px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-left-radius: 7px 21px;
	border-top-right-radius: 7px 21px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	padding: 50px 0 0 10px;
	-webkit-box-shadow:  
		inset 0 0 5px #bbb,
		0 1px 0 #aaa,
		0 4px 0 #bbb,
		0 10px 30px #ddd;
	-moz-box-shadow:  
		inset 0 0 5px #bbb,
		0 1px 0 #aaa,
		0 4px 0 #bbb,
		0 10px 30px #ddd;
	box-shadow:  
		inset 0 0 5px #bbb,
		0 1px 0 #aaa,
		0 4px 0 #bbb,
		0 10px 30px #ddd;
		float: left;
	margin-left: 40px;
		}

#infoi {
	
	margin: 250px auto 0;
	width: 792px;
	height: 200px;
	position: absolute;
	
	padding: 50px 0 0 10px;
		float: left;
	margin-left: 40px;
	
		}

 #infoi {
    z-index: 1;
    background-color: transparent;
    padding-bottom: 50px;
  
}
#rr {
    
    position: relative; 
}

.key{
	display: block;
	color: #aaa;
	font: bold 10pt arial;
	text-decoration: none;
	text-align: center;
	width: 44px;
	height: 40px;
	margin: 5px;
	background: #d3d4d2;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border-top: 1px solid #f5f5f5;
	-webkit-box-shadow: 
		inset 0 0 25px #e8e8e8,
		0 1px 0 #c3c3c3,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	-moz-box-shadow: 
		inset 0 0 25px #e8e8e8,
		0 1px 0 #c3c3c3,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	box-shadow: 
		inset 0 0 25px #e8e8e8,
		0 1px 0 #c3c3c3,
		0 2px 0 #c9c9c9,
		0 2px 3px #333;
	text-shadow: 0px 1px 0px #f5f5f5;}

.key:active, .keydown {
	color: #888;
	background: #ebeced;
	margin: 7px 5px 3px;
	-webkit-box-shadow:
		inset 0 0 25px #ddd,
		0 0 3px #333;
	-moz-box-shadow: 
		inset 0 0 25px #ddd,
		0 0 3px #333;
	box-shadow: 
		inset 0 0 25px #ddd,
		0 0 3px #333;
	border-top: 1px solid #eee;}
	
.active
	{
	display: block;
	color: #888;
	font: bold 9pt arial;
	text-decoration: none;
	text-align: center;
	width: 44px;
	height: 41px;
	margin: 7px 5px 3px;
	background: #43f739;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border-top: 1px solid #f5f5f5;
	-webkit-box-shadow:
		inset 0 0 25px #ddd,
		0 0 3px #333;
	-moz-box-shadow: 
		inset 0 0 25px #ddd,
		0 0 3px #333;
	box-shadow: 
		inset 0 0 25px #ddd,
		0 0 3px #333;
	border-top: 1px solid #eee;
	text-shadow: 0px 1px 0px #f5f5f5;
	
	}
	
span,b
	{
		color: black;
		
	}
.fn span {
	display: block;
	margin: 14px 5px 0 0;
	text-align: right;
	font: bold 6pt arial;
	text-transform: uppercase;}
#esc {
	margin: 6px 15px 0 0;
	font-size: 10pt;
	text-transform: uppercase;}


#numbers li a span {
	display: block;}
	
#numbers li a b {
	margin: 1px 0 1px;
	display: block;}

#numbers li .alt b {display: block;margin: 0 0 3px;}

#numbers li #delete span {
	text-align: right;
	margin: 23px 10px 0 0;
	font-size: 10pt;
	text-transform: uppercase;}
	
#qwerty li a span {
	display: block;
	margin: 12px 0 0;
	text-transform: uppercase;}
	
#qwerty li #tab span {
	text-align: left;
	margin: 23px 0 0 8px;
	font-size: 10pt;
	text-transform: uppercase;}	

#qwerty li .alt b {display: block; margin: 3px 0 0;}
#qwerty li .alt span {margin: 2px 0 0;}


#asdfg li a span {
	display: block;
	margin: 13px 0 0;
	font-size: 16px;}

#asdfg li .alt span {margin: 0; text-transform: lowercase;}
#asdfg li .alt b {display: block; margin: 3px 0 0;}
#asdfg li #caps b {
	display: block;
	background: #999;
	width: 4px;
	height: 4px;
	border-radius: 10px;
	margin: 9px 0 0 10px;
	-webkit-box-shadow: inset 0 1px 0 #666;
	-moz-box-shadow:inset 0 1px 0 #666;
	box-shadow:inset 0 1px 0 #666;}
#asdfg li #caps span {
	text-align: left;
	margin: 10px 0 0 10px;
	font-size: 10pt
	text-transform: uppercase;}
#asdfg li #enter span {
	text-align: right;
	margin: 23px 10px 0 0;
	font-size: 10pt
	text-transform: uppercase;}


#zxcvb li a span {
	display: block;
	margin: 13px 0 0;
	text-transform: uppercase;}
#zxcvb li .shiftleft span {
	text-align: left;
	margin: 23px 0 0 8px;
	font-size: 10pt;
	text-transform: uppercase;}
#zxcvb li .shiftright span {
	text-align: right;
	margin: 23px 10px 0 0;
	font-size: 10pt;
	text-transform: uppercase;
	
	
	}
#zxcvb li .alt b {display: block;margin: 4px 0 0;}
#zxcvb li .alt span {margin: 0;}

	
#bottomrow li #fn span, #bottomrow li #control span, #bottomrow li #optionleft span, #bottomrow li #commandleft span {
	display: block;
	text-align: left;
	margin: 31px 0 0 8px;
	font-size: 7.5pt;
	text-transform: uppercase;}

#bottomrow li #optionright span, #bottomrow li #commandright span {
	display: block;
	text-align: right;
	margin: 31px 8px 0 0;
	font-size: 7.5pt;
	text-transform: uppercase;}

#bottomrow ol li #left span, #bottomrow ol li #right span, #bottomrow ol li #up span, #bottomrow ol li #down span {
	display: block;
	margin: 9px 0 0;}

.fn {height: 26px; width: 46px;}
#delete {width: 72px;}
#tab {width: 72px;}
#caps {width: 85px;}
#enter {width: 85px;}
.shiftleft, .shiftright {width: 112px;}
#fn, #control, .option, .command, #code32 {height: 49px;}

#control {width: 56px;}
.option {width: 46px;}
.command {width: 67px;}
#code32 {width: 226px;}

#left img, #up img, #down img, #right img {border: none;}
ul ol {list-style-type: none;}
#down {height: 23px;}
#up, #left, #right {height: 24px;}
#left, #right {margin: 30px 5px 5px;}
#left:active, #right:active {margin: 32px 5px 3px;}
#up {margin: 5px 5px 1px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
#up:active {margin: 8px 5px -2px;}
#down {margin: 0 5px 5px; border-top-left-radius: 0px; border-top-right-radius: 0px;}
#down:Active {margin: 3px 5px 4px;}
#main {
	width: 700px;
	padding: 20px 50px;
	margin: 0 auto 50px;
	background: #fff;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 2px #aaa;}
		
h1 {
	color: #888;
	text-align: center;
	font: bold 25pt/25pt arial;
	margin: 30px 0 60px;}
	
h2 {
	color: #666;
	font: 13pt/0pt arial;}
	
p {
	color: #999;
	font: 9pt/17pt arial;
	margin: 0 0 50px;}
	
small {
	font: italic 8pt/12pt arial;
	color: #aaa;
	padding: 0 130px 0 0;
	display: block;}
	
cite {
	display: block;
	padding: 0 0 30px;
	margin: 0 auto;
	text-align: center;
	color: #999;
	font: italic bold 8pt arial;}

ul, ol {padding: 0px; margin: 0;}
	
/* Micro Clearfix by Nicolas Gallagher - http://nicolasgallagher.com/micro-clearfix-hack */
        /* For modern browsers */
        .cf:before, .cf:after {content:""; display:table;}
        .cf:after {clear:both;}

        /* For IE 6/7 (trigger hasLayout) */
        .cf {zoom:1;}
        
        .cf > ul {list-style-type: none; width: 784px; margin: 0 auto;}
		.cf > li {list-style-type: none; float: left;}
/*----------------------------------------------main Page------------------------------------*/
.top
{
	width: 100%; height:10%; background-color: #2bb0ed; clear:both; text-align: center;
}
.left
{
	width: 18%; height:105%; float:left; background-color: #dce0e3; display: block; overflow-y: auto;
}

.right
{
	width: 82%; height:105%; float:right; background-color:#dce0e3;overflow-y: auto;
}
.bottom
{
	width: 100%; height:5%; background-color: #dce0e3; clear:both; text-align: center;
}
.bottom2
{
	width: 18%; height:50%; background-color: #dce0e3; clear:both;padding-left: 700px;
}

/*----------------------------------------------Drop down menu --------------------------------*/

.text-center {
  text-align: center;
}

*, *:before, *:after {
  -webkit-border-sizing: border-box;
  -moz-border-sizing: border-box;
  border-sizing: border-box;
}

.container {
  width: 100%;
 
}
.container > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}



.title {
  font-family: 'Pacifico';
  font-weight: norma;
  font-size: 40px;
  text-align: center;
  line-height: 1.4;
  color: #788a1d;
}

.dropdown a {
  text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
  position: relative;
  display: block;
  color: white;
  background: #d1b23d;
  -moz-box-shadow: 0 1px 0 #78651c inset, 0 -1px #d1b23d inset;
  -webkit-box-shadow: 0 1px 0 #ffd500 inset, 0 -1px 0 #ffd500 inset;
  box-shadow: 0 1px 0 #478f17 inset, 0 -1px 0 #478f17 inset;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
  background: #2cc66c;
}
.dropdown .icon-arrow {
  position: absolute;
  display: block;
  font-size: 0.7em;
  color: #fff;
  top: 14px;
  right: 10px;
}
.dropdown .icon-arrow.open {
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
.dropdown .icon-arrow:before {
  content: '\25BC';
}
.dropdown .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dropdown .dropdown-menu li {
  padding: 0;
   
}
.dropdown .dropdown-menu li a {
  display: block;
  color: #6e6e6e;
  background: #EEE;
  -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
  -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
  box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
  padding: 10px 10px;
 
}
.dropdown .dropdown-menu li a:hover {
  background: #f6f6f6;
  
}
.dropdown .show, .dropdown .hide {
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
.dropdown .show {
  display: block;
  max-height: 9999px;
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  animation: showAnimation 0.5s ease-in-out;
  -moz-animation: showAnimation 0.5s ease-in-out;
  -webkit-animation: showAnimation 0.5s ease-in-out;
  -moz-transition: max-height 1s ease-in-out;
  -o-transition: max-height 1s ease-in-out;
  -webkit-transition: max-height 1s ease-in-out;
  transition: max-height 1s ease-in-out;
}
.dropdown .hide {
  max-height: 0;
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  animation: hideAnimation 0.4s ease-out;
  -moz-animation: hideAnimation 0.4s ease-out;
  -webkit-animation: hideAnimation 0.4s ease-out;
  -moz-transition: max-height 0.6s ease-out;
  -o-transition: max-height 0.6s ease-out;
  -webkit-transition: max-height 0.6s ease-out;
  transition: max-height 0.6s ease-out;
}

@keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-moz-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-webkit-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-moz-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-webkit-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}

P.blocktext {
    margin-left: 5px;
    margin-right: 5px;
    width: 20em
}