@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,700);

* {
margin: 0;
padding: 0;
}

h1, h2, h3, h4, h5, h6 {
margin: 0px;
padding: 0px;
font-family: 'verdana';
}

form input {
border: none;
font-family: 'verdana';
}

a {
text-decoration: none;
border: none;
outline: none;
color: #555;
}


a {
color: #000;
text-decoration: none;
display: block;
font-family: 'verdana';
}

a:hover {
text-decoration: none;
}

img {
border: 0px none;
max-width: 100%;
height: auto;
}

ul, ul li, ul ul, ul ul li {
list-style: none;
padding: 0px;
margin: 0px;
font-family: 'verdana';
}

p {
color: #575757;
font: normal 12px 'verdana';
line-height: 20px;
text-align: left;
}

html {
width: 100%;
height: 100%;
}

@font-face {
font-family: 'lexia_readablebold';
src: url('../../font/LexiaReadable-Bold.ttf') format('ttf'), url('../../font/lexiareadable-bold-webfont.woff') format('woff'), url('../../font/lexiareadable-bold-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'lexia_readableregular';
src: url('../../font/LexiaReadable-regular.ttf') format('ttf'), url(../../font/lexiareadable-regular-webfont.woff2) format('woff2'), url('../../font/lexiareadable-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'opendyslexicaltaregular';
src: url('../../font/opendyslexic-regular-webfont.woff2') format('woff2'), url('../../font/OpenDyslexic-Regular.otf') format('otf'), url('../../font/opendyslexic-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'opendyslexicbold';
src: url('../../font/opendyslexic-bold-webfont.woff2') format('woff2'), url('../../font/OpenDyslexic-bold.otf') format('otf'), url('../../font/opendyslexic-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'aravisregular';
src: url('../../font/Aravis-Regular.woff2') format('woff2'), url('../../font/Aravis-Regular.otf') format('otf'), url('../../font/Aravis-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}

.gap {
height: 30px;
width: 100%;
}

.indexpart {
width: 1052px !important;
height: 650px !important;
}

body {
font-family: 'Verdana';
/*font-family: 71%/1.5   'Verdana';*/
background: #fff;
}

#contents {
margin: 0px auto;
width: 890px;
}

#container {
margin: 10px auto;
width: 830px;
}

#containers {
margin: 0px auto;
width: 90%;
}

#container-1 {
background: #fff none repeat scroll 0 0;
height: auto;
margin: 10px auto;
overflow: hidden;
padding: 14px 25px 14px 20px;
position: relative;
vertical-align: middle;
width: 830px;
}

#container-3 {
margin: 10px auto;
width: 830px;
}
/*header*/
.upper-strips {
width: 100%;
background: #fff;
margin: 0 auto;
height: 70px;
position: relative;
overflow: hidden;
}

.logo {
width: 300px;
height: 60px;
margin: 15px auto;
}

.lower-strips {
width: 100%;
height: 36px;
margin-bottom: 20px;
background: #3c6496;
/*border-bottom: 8px solid #ff9900;*/
border-bottom: 8px solid #ff990000;
}

.lower-strip-container {
margin: 0px auto;
/*overflow: hidden;*/
width: 912px;
}

.lower-strip-container .main-menu {
margin: 0 auto;
/*overflow: hidden;*/
position: relative;
z-index: 999;
}

.lower-strip-container .main-menu ul {
list-style: outside none none;
margin: 0;
}

.lower-strip-container .main-menu ul li {
float: left;
/*margin-right: 32px;*/
text-align: center;
}

.lower-strip-container .main-menu ul li a {
color: #fff;
display: block;
float: left;
font-size: 15px;
padding: 13px 9px;
text-transform: capitalize;
width: 134px;
}

/*header*/
#write {
background: #fff;
border: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 348px;
padding-left: 10px;
padding-top: 0px;
height: 201px;
margin: 4px 0 0 0;
font-size: 20px;
/*font-weight: bold;*/
color: #000;
font-family: verdana;
resize: none;
}
/*#keyboard li.active{
background-color: #00BFFF;
}*/
#write-3 {
background: #fff;
border: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 340px;
height: 198px;
resize: none;
padding-left: 10px;
margin: 4px;
font-size: 20px;
/*font-weight: bold;*/
color: #000;
font-family: verdana;
}
/*.active-tab  {
background: orange !important;
}*/
.indexcon {
width: 1052px !important;
}

.textarea-panel {
background: url(../images/typing-area-2.png) no-repeat !important;
width: 360px;
height: 208px;
margin: 0 0 5px;
padding: 14px 18px 20px;
font: 1em/1.5 Verdana, Sans-Serif;
float: left;
}

.textarea-panel-1 {
background: rgba(0, 0, 0, 0) url("../images/typing-area-3.png") no-repeat scroll 0 0 !important;
float: left;
font: 1em/1.5 Verdana,sans-serif;
height: 300px;
margin: 0 0 5px;
width: 490px;
}

.textarea-demo-panel {
background: url(../images/demo-area-2.png) no-repeat !important;
width: 360px;
height: 208px;
margin: 0 0 5px;
float: left;
padding: 15px 18px 20px;
font: 1em/1.5 Verdana, Sans-Serif;
}

.textarea-demo-panel-1 {
background: rgba(0, 0, 0, 0) url("../images/demo-area-3.png") no-repeat scroll 0 0 !important;
float: left;
font: 1em/1.5 Verdana,sans-serif;
height: 280px;
margin: 0 0 5px;
padding: 15px 5px 20px;
width: 490px;
}

#write-1 {
margin: 0 0 5px;
padding: 5px;
padding: 25px 15px 20px 15px;
font: 1.2em/1.5 Verdana, Sans-Serif;
background: #fff;
border: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
;
width: 360px;
height: 208px;
}

#write-2 {
margin: 0 0 5px;
padding: 5px;
width: 290px;
height: 140px;
padding: 25px 15px 20px 15px;
font: 1.2em/1.5 Verdana, Sans-Serif;
background: #fff;
border: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

#keyboard {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}

#keyboard li {
float: left;
margin: 0 1px 3px 0;
width: 35px;
height: 30px;
font-size: 14px;
font-weight: normal;
color: #000;
line-height: 30px;
text-align: center;
background: rgba(0, 0, 0, 0) linear-gradient(to top, #ddd, #fff) repeat scroll 0 0;
border: 1px solid #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 4px #999;
-moz-box-shadow: 0 0 4px #999;
box-shadow: 0 3px 4px #999;
}

.lftarea {
margin-left: 124px;
}

.capslock, .tab, .left-shift {
clear: right;
}

.capslock {
width: 75px !important;
font-size: 12px !important;
}

#keyboard .return {
width: 60px;
}

/*#keyboard .tab, #keyboard .delete { width: 100px; }

#keyboard .capslock { width: 80px; }*/

#keyboard .return {
width: 57px;
}

.cross {
width: 90px !important;
}

.return i {
font-size: 15px;
}

#keyboard .left-shift {
width: 55px;
}

#keyboard .right-shift {
width: 69px;
}

#keyboard .tab {
width: 59px;
}

.lastitem {
margin-right: 0;
}

.uppercase {
text-transform: uppercase;
}

.fast-area {
margin: 0 !important;
}

.another-area {
width: 534px !important;
float: left;
}

#keyboard .space {
clear: right;
width: 213px;
}

#keyboard .enter {
float: right;
width: 47px;
height: 65px;
font-size: 11px;
}

.no-gap {
margin-left: 0px !important;
margin-right: 30px !important;
}

#keyboard .alt {
width: 55px;
margin-left: 30px;
}

.xtrawid {
width: 107px !important;
}

#keyboard li:hover {
position: relative;
top: 2px;
left: 2px;
/*border-color: #e5e5e5;*/
border-color: #000000;
background: #fdfbd2;
;
cursor: pointer;
color: #000000;
}

.spcl1 {
width: 440px !important;
padding-left: 5px !important;
padding-top: 3px !important;
height: 245px !important;
margin: 20px 0 0 23px !important;
}

.spcl2 {
width: 427px !important;
padding-left: 5px !important;
padding-top: 3px !important;
height: 245px !important;
margin: 6px 0 0 23px !important;
}

.key-pad {
float: left;
width: 588px;
background-color: #ddd;
padding: 12px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border: 4px double #999;
}

.marginlft {
margin-left: 200px;
margin-top: 32px;
}

.direction-icon {
float: right;
width: 180px;
margin-top: 24px;
margin-right: 20px;
}

.buttons {
overflow: hidden;
position: relative;
margin-top: 25px;
text-align: center;
clear: both;
width: 300px;
cursor: pointer;
}

.left-shift i {
font-size: 15px;
}

.popup-modal,
.help,
.sound {
display: inline-block;
float: left;
padding-right: 10px;
cursor: pointer;
margin-left: 20px;
}

.wing-div {
margin: 83px 0 0 8%;
position: absolute;
}

.wing {
float: left;
}

.blink {
animation: blink 1s step-start 0s infinite;
-webkit-animation: blink 1s step-start 0s infinite;
}

.blinks-1 {
animation: blink 1s step-start 0s infinite;
-webkit-animation: blink 1s step-start 0s infinite;
border: 4px solid #fe8f02;
height: 231px;
position: absolute;
bottom: 108px;
width: 56%;
float: left;
left: 215px;
border-radius: 13px;
}

.blinks-2 {
animation: blink 1s step-start 0s infinite;
-webkit-animation: blink 1s step-start 0s infinite;
border: 4px solid #fe8f02;
height: 240px;
position: absolute;
bottom: 60px;
width: 56%;
float: left;
left: 219px;
border-radius: 8px;
bottom: 99px;
}

.blink {
border: 2px solid #fe8f02 !important;
}
/*.blinks {
animation: blink 1s step-start 0s infinite;
-webkit-animation: blink 1s step-start 0s infinite;
border: 2px solid #fe8f02 !important;
width: 32%;
height: 200px;
border-radius: 8px;
position: absolute;
bottom: 409px;
}*/
.blinks {
animation: blink 1s step-start 0s infinite;
-webkit-animation: blink 1s step-start 0s infinite;
border: 2px solid #fe8f02 !important;
width: 98%;
height: 200px;
border-radius: 8px;
position: relative;
bottom: 190px !important;
}

.transparent-area {
background: transparent none repeat scroll 0 0;
float: left;
height: 41px;
margin-left: 0;
margin-top: -40px;
width: 99%;
}

@keyframes blink {
50% {
opacity: 0.0;
}
}

@-webkit-keyframes blink {
50% {
opacity: 0.0;
}
}

.type-hands-punc {
background: rgba(0, 0, 0, 0) url("../images/hands.gif") no-repeat scroll 0 0;
bottom: 0;
height: 283px;
margin: 348px auto auto 300px;
position: relative;
text-align: center;
width: 443px;
z-index: 99999;
}

.type-hands-left {
background: url(../images/left-hand.gif) no-repeat;
width: 506px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 454px;
left: 299px;
}

.type-hands-right {
background: url(../images/right-hand.gif) no-repeat;
width: 220px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 454px;
left: 524px;
}

.type-hands-A {
background: url(../images/left-hand.gif) no-repeat;
width: 506px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 454px;
left: 299px;
}

.type-hands-B {
background: url(../images/B.gif) no-repeat;
width: 439px;
height: 180px;
bottom: 0px;
z-index: 99999;
position: absolute;
left: 314px;
}
/*.type-hands-B {
background: url(../images/B.gif) no-repeat;
width: 439px;
height: 217px;
bottom: 0px;
z-index: 99999;
position: absolute;
left: 320px;
}*/
.type-hands-C {
background: url(../images/C.gif) no-repeat;
width: 466px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 460px;
left: 312px;
}

.kaz-content {
position: relative;
/*overflow: hidden;*/
}

.type-hands-D {
background: url(../images/left-hand.gif) no-repeat;
width: 506px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 454px;
left: 299px;
}

.type-hands-E {
background: url(../images/E.gif) no-repeat;
width: 495px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 430px;
left: 304px;
}

.type-hands-F {
background: url(../images/left-hand.gif) no-repeat;
width: 506px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 454px;
left: 299px;
}

.type-hands-G {
background: url(../images/G.gif) no-repeat;
width: 462px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 454px;
left: 314px;
}

.type-hands-H {
background: url(../images/H.gif) no-repeat;
width: 220px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 452px;
left: 520px;
}

.type-hands-I {
background: url(../images/I.gif) no-repeat;
width: 220px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 428px;
left: 515px;
}

.type-hands-J {
background: url(../images/right-hand.gif) no-repeat;
width: 220px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 454px;
left: 524px;
}

.type-hands-K {
background: url(../images/right-hand.gif) no-repeat;
width: 220px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 454px;
left: 524px;
}

.type-hands-L {
background: url(../images/right-hand.gif) no-repeat;
width: 220px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 454px;
left: 524px;
}

.type-hands-M {
background: url(../images/M.gif) no-repeat;
width: 220px;
height: 183px;
bottom: 0px;
z-index: 99999;
position: absolute;
left: 534px;
}

.type-hands-N {
background: url(../images/N.gif) no-repeat;
width: 220px;
height: 183px;
bottom: 0px;
z-index: 99999;
position: absolute;
left: 530px;
}
/*.type-hands-N {
background: url(../images/N.gif) no-repeat;
width: 220px;
height: 212px;
bottom: 0;
z-index: 99999;
position: absolute;
left: 520px;
}
.type-hands-M {
background: url(../images/M.gif) no-repeat;
width: 220px;
height: 217px;
bottom: 0;
z-index: 99999;
position: absolute;
left: 535px;
}*/

.type-hands-O {
background: url(../images/O.gif) no-repeat;
width: 220px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 424px;
left: 528px;
}

.type-hands-P {
background: url(../images/P.gif) no-repeat;
width: 220px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 430px;
left: 516px;
}

.type-hands-Q {
background: url(../images/Q.gif) no-repeat;
width: 483px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 424px;
left: 287px;
}

.type-hands-R {
background: url(../images/R.gif) no-repeat;
width: 497px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 431px;
left: 304px;
}

.type-hands-T {
background: url(../images/T.gif) no-repeat;
width: 451px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 428px;
left: 321px;
}

.type-hands-S {
background: url(../images/left-hand.gif) no-repeat;
width: 506px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 454px;
left: 299px;
}

.type-hands-U {
background: url(../images/U.gif) no-repeat;
width: 220px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
left: 524px;
top: 428px;
}

.type-hands-V {
background: url(../images/V.gif) no-repeat;
width: 520px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 455px;
left: 286px;
}

.type-hands-W {
background: url(../images/W.gif) no-repeat;
width: 491px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 425px;
left: 300px;
}

.type-hands-X {
background: url(../images/X.gif) no-repeat;
width: 423px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 457px;
left: 328px;
}

.type-hands-Y {
background: url(../images/Y.gif) no-repeat;
width: 220px;
height: 320px;
bottom: 0;
z-index: 9999999;
position: absolute;
left: 497px;
top: 427px;
}

.type-hands-Z {
background: url(../images/Z.gif) no-repeat;
width: 444px;
height: 320px;
bottom: 0;
z-index: 99999;
position: absolute;
top: 454px;
left: 322px;
}

/*---------------kaz inner pages css-------------*/

.light {
float: right !important;
overflow: hidden;
clear: both;
}

.kaz-content h2 {
/*color:#009c69;*/
color: #3c6496;
font-size: 30px;
}

.kaz-content h3 {
color: #3c6496;
text-align: center;
margin-top: 3px;
}

.content-left {
width: 55%;
float: left;
}

.content-right {
width: 45%;
float: right;
text-align: left;
}

.kaz-content center {
padding-bottom: 10px;
}

.fcap {
padding-bottom: 3px !important;
}

.fly-bar {
height: 68px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 8px;
border-radius: 8px;
background: #7fcdcd; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(-90deg, #fff, #7fcdcd); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg, #fff, #7fcdcd); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, #fff, #7fcdcd); /* For Firefox 3.6 to 15 */
background: linear-gradient(-90deg, #fff, #7fcdcd); /* Standard syntax (must be last) */
box-shadow: 1px 11px 7px #ccc;
text-align: center;
cursor: pointer;
}
/*.fly-bar:hover{
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #1ccece) repeat scroll 0 0;
}*/

.fly-bar h2 {
color: #000;
font-size: 26px !important;
font-weight: 600 !important;
line-height: 32px;
padding-top: 4px;
text-align: center;
}

.fly-bar p {
color: #000;
font-size: 22px !important;
line-height: 24px;
text-align: center;
}

.fly-bar-1 {
height: 68px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 8px;
border-radius: 8px;
background: #cccccc;
background: -webkit-linear-gradient(-90deg, #fff, #bbb);
background: -o-linear-gradient(-90deg, #fff, #bbb);
background: -moz-linear-gradient(-90deg, #fff, #bbb);
background: linear-gradient(-90deg, #fff, #bbb);
box-shadow: 1px 11px 7px #ccc;
text-align: center;
}

.fly-bar-1 h2 {
color: #000;
font-size: 26px !important;
font-weight: 600 !important;
line-height: 32px;
padding-top: 4px;
text-align: center;
}

.fly-bar-1 p {
color: #000;
font-size: 22px !important;
line-height: 24px;
text-align: center;
}

.nt-height {
margin-top: 40px !important;
}

.kaz-content span {
display: block;
color: #333;
font-size: 13px;
font-weight: normal;
display: inline;
}

.kaz {
position: absolute;
right: 5px;
top: -12px;
}

.flying {
right: 41px !important;
top: 140px !important;
z-index: 99999;
}

.virtual-keyboard {
margin: 0 auto;
width: 76%;
margin-top: 90px;
z-index: 999999;
overflow: hidden;
}

.kaz-builder {
z-index: -99999;
right: -8px;
top: 8px;
}

.category-link ul li {
text-align: center;
}

.category-link ul li:hover {
}

.sound-alert {
float: right;
margin-right: 16px;
margin-bottom: 45px;
/* margin-top: 59px;*/
}

.nt-right {
margin-right: 0px !important;
}

.ntmrgin {
margin-top: -250px !important;
position: relative;
z-index: 99;
}

.sound-alert-1 {
float: right;
margin-right: 45px;
}

.sound-alert-top {
width: 100%;
height: 42px;
}

.sound-alert-bottom {
width: 100%;
height: 42px;
}

.using-step {
overflow: hidden;
position: relative;
z-index: 999;
}

.using-steps {
overflow: hidden;
position: relative;
/*z-index:999;*/
top: -28px;
left: 33px;
}

.using-step ul {
list-style: none;
margin: 0;
padding: 0;
}

.using-steps ul {
list-style: none;
margin: 0;
padding: 0;
}

.using-step ul li {
background-color: #fff;
text-align: center;
border: 10px solid #d1d1d1;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 9px 4px 29px -8px #999;
-webkit-box-shadow: 9px 4px 29px -8px #999;
-moz-box-shadow: 9px 4px 29px -8px #999;
margin-bottom: 15px;
margin-top: 10px;
}

.using-steps ul li {
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #7fcdcd) repeat scroll 0 0;
border-radius: 8px;
box-shadow: 1px 6px 7px #ccc;
margin: 28px auto 8px;
text-align: center;
width: 666px;
margin-left: 164px;
}

.using-steps ul li:hover {
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #1ccece) repeat scroll 0 0;
}

.flying-Start:hover {
background: url(../images/slap-now.png) no-repeat;
position: absolute;
right: 5px;
top: 30px;
z-index: 99999;
}

.reset {
text-align: right;
margin-top: -25px;
margin-right: 17px;
font-size: 12px;
text-transform: uppercase;
color: #888;
cursor: pointer;
}

.basic-padd {
padding-top: 10px;
padding-bottom: 10px;
}

.using-steps ul li a {
color: #000;
font-size: 20px;
line-height: 23px;
text-align: center;
font-family: "verdana";
font-weight: normal;
}

.using-steps ul li a span {
font-size: 14px;
line-height: 12px;
padding-top: 10px;
text-align: center;
color: #000;
font-family: "verdana";
}

.basics {
font-size: 32px !important;
margin-top: 15px;
margin-bottom: 15px;
line-height: 28px !important;
}

.basics-1 {
font-size: 24px !important;
line-height: 30px;
}

.touchs {
font-size: 20px !important;
font-weight: bold;
color: #009c69 !important;
/*text-transform:capitalize!important;*/
}

.touchs-1 {
font-size: 14px !important;
font-weight: normal;
color: #000;
}

.using-step ul li:hover {
background-color: #ff9800;
}

.using-step ul li.active {
background-color: #ff9800;
}

.using-step ul li a {
color: #309b6b;
font-size: 20px;
font-weight: bold;
text-align: center;
display: block;
}

.using-step ul li a span {
font-size: 16px;
color: #333;
display: block;
font-weight: bold;
}

.learn-caption-label {
left: 104px;
background: url(../images/learn-caption-1.png) no-repeat;
width: 286px;
height: 206px;
position: absolute;
top: 73px;
z-index: 9999;
}

.learn-caption-label-1 {
left: 93px;
background: url(/images/learn.png) no-repeat;
width: 230px;
height: 176px;
position: absolute;
top: 260px;
z-index: 9999;
}

.learn-caption-label-2 {
left: 93px;
/*background:url(/images/learn.png) no-repeat;*/
width: 230px;
height: 176px;
position: absolute;
top: 260px;
z-index: 9999;
}

.kaz-keyboard {
z-index: 99999;
right: 5px;
top: 147px;
position: absolute;
}

.inner-div {
padding: 7px 0 7px 0;
}

.inners-div {
padding: 7px 0 7px 0;
border: 3px solid #7f7f7f;
border-radius: 3px;
}

.middle {
text-align: center;
padding-bottom: 10px;
}

.basic-stage {
overflow: hidden;
position: relative;
text-align: center;
width: 74%;
margin: 0 auto;
}

.basic-stage ul {
list-style: none;
margin: 0;
padding: 0;
}

.basic-stage ul li {
float: left;
margin-right: 15px;
margin-left: 20px;
margin-bottom: 6px;
height: 240px;
}

.basic-stage ul li .kaz-bg {
background-color: #c7c7c7;
width: 200px;
height: 200px;
border-radius: 50%;
display: inline-block;
box-shadow: 8px 6px 15px #aaa inset;
margin: 10px;
}

.basic-stage ul li .kaz-bg:hover {
background-color: #ffcc00;
box-shadow: 8px 6px 15px #aaa inset;
}

.wrap-content {
width: 1000px !important;
margin: auto !important;
}

.wrap-content h2 {
text-align: center;
}

.slide-lft {
margin-left: 36px;
}
/*select keyboard*/
.key {
font-size: 30px !important;
font-weight: bold;
margin-top: 25px;
margin-bottom: 10px;
}

.uk-img {
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #81cdcd) repeat scroll 0 0;
border-radius: 28px;
box-shadow: 1px 4px 7px #ccc;
margin: 25px auto 8px;
text-align: center;
font-size: 26px;
line-height: 20px;
color: #000;
margin-bottom: 50px;
height: 82px;
line-height: 80px;
cursor: pointer;
}

.uk-img:hover {
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #1ccece) repeat scroll 0 0;
}
/*.us-flag{
width:146px;
height: 77px;
position: absolute;
right: 150px;
top: 170px;
}*/
/*.uk-flag{
width:146px;
height: 77px;
position: absolute;
right: 150px;
top: 36px;
}*/
.canadian-flag {
width: 50%;
height: 77px;
float: right;
margin-top: 12px;
}

.us-flag {
width: 50%;
height: 77px;
float: left;
margin-top: 12px;
}

.uk-flag {
width: 146px;
height: 77px;
margin: 0 auto;
padding-top: 12px;
}

.center {
margin: 10px auto;
text-align: center;
width: 45%;
}

.log-eye {
width: 35% !important;
margin-top: 0px !important;
}

.rm {
color: #000 !important;
font-size: 18px;
font-weight: bold;
margin-top: 15px !important;
width: 68%;
margin-bottom: 20px !important;
height: 55px;
line-height: 55px;
cursor: pointer;
}
/*.rm {
color: #000!important;
font-size: 14px;
font-weight: bold;
margin-top: 15px !important;
width: 30%;
margin-bottom: 20px!important;
height: 55px;
line-height: 25px;
cursor: pointer;
float: left;
margin-left: 12px;
}*/
.rm:hover {
box-shadow: 12px 8px 49px -18px #000;
}

.signin {
font-size: 12px;
font-weight: normal;
}

.sign-area {
width: 60%;
margin: 0 auto;
/*margin-top: 50px;*/
}

.sign {
background: rgba(0, 0, 0, 0) url("../images/signin.png") no-repeat scroll 0 0;
float: left;
height: 40px;
margin-top: 25px;
width: 7%;
}

.writting {
text-align: left;
float: right;
font-size: 12px !important;
color: #000;
line-height: 22px;
width: 92%;
padding-top: 22px;
padding-bottom: 20px;
}
/*select keyboard*/
/*logon*/
.email {
font-size: 24px;
font-weight: normal;
color: #000;
text-align: center;
}

.control-email {
border: none;
box-shadow: 9px 4px 29px -8px #999;
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #81cdcd) repeat scroll 0 0;
border-radius: 10px;
color: #000;
height: 40px;
padding-left: 7px;
width: 100%;
margin-top: 10px;
text-align: center;
font-weight: bold;
box-shadow: box-shadow: 9px 12px 30px -8px #ccc;
}

.kaz-log {
color: #309b6b;
font-weight: bold;
}

.logon:hover {
box-shadow: 12px 8px 49px -18px #000;
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #1ccece) repeat scroll 0 0;
}

.logon {
font-size: 24px !important;
height: 71px !important;
line-height: 68px !important;
margin-bottom: 20px !important;
}

.forget {
color: #0600ff;
display: block;
font-size: 14px;
font-weight: bold;
padding-top: 15px;
text-align: center;
text-decoration: none;
}

.kazlogon {
border: 5px solid #bebebe;
background: #ffffff;
border-radius: 10px;
color: #309b6b;
height: 60px;
padding-left: 7px;
padding-top: 5px;
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
font-weight: bold;
font-size: 28px;
cursor: pointer;
}

.kazlog {
width: 290px;
margin: 0 auto;
height: 78px;
cursor: pointer;
background: url(../images/Rm-unify.png) no-repeat;
}

.cntredv {
width: 56% !important;
margin-top: 0px !important;
}

.logtext {
display: inline !important;
float: left;
margin: 0;
padding-right: 10px;
width: 100%;
text-align: center;
}

.pic-time {
color: #000;
font-size: 16px !important;
display: inline !important;
margin: 0;
padding: 0;
}

.nmb {
color: #0600ff !important;
display: inline;
line-height: 53px;
}

.bigl {
font-weight: bold !important;
}

.notes {
color: #000 !important;
display: inline;
font-size: 12px !important;
}

.logtextblue {
font-size: 18px;
line-height: 30px;
color: #0600ff !important;
}

span {
display: inline;
font-size: 14px;
font-weight: normal;
}

.off-top {
float: left;
font-size: 12px !important;
margin-left: 9px;
font-weight: normal;
line-height: 17px;
}

.off-bottom {
display: block !important;
line-height: 44px !important;
float: left;
font-size: 12px !important;
font-weight: normal;
margin-left: 5px;
}

.off-bottom-lft {
float: left;
width: 50%;
}

.off-bottom-rgt {
float: right;
width: 50%;
line-height: 10px;
}

.key-five {
line-height: 9px !important;
float: right;
}

.mrgnrght {
margin-right: -206px;
margin-top: 0px !important;
}

.ear {
background: rgba(0, 0, 0, 0) url("../images/ear.png") no-repeat scroll 0 0;
float: left;
height: 140px;
margin-left: 75px;
width: 23%;
}

.eye {
background: rgba(0, 0, 0, 0) url("../images/eye.png") no-repeat scroll 0 0;
float: left;
height: 140px;
width: 50%;
}
/*logon*/
/*how works*/
.clock {
width: 305px;
height: 346px;
background: url(../images/clock.png) no-repeat;
margin: 0 auto;
margin-top: 50px;
}
/*how works*/
/*speedbuilder-home*/
.category-links {
/*left: 462px;*/
overflow: hidden;
position: absolute;
top: 355px;
right: 211px;
}

.category-links ul li {
margin: 0 auto;
text-align: center;
}
/*speedbuilder-home*/
/*just do it*/
.category-left {
background: rgba(0, 0, 0, 0) url("../images/do-it-1.png") no-repeat scroll 0 0;
float: left;
height: 440px;
width: 418px;
}

.space {
background: #fff none repeat scroll 0 0;
border: 8px solid #7FCDCD;
padding-left: 6px;
border-radius: 7px;
box-shadow: 0 0 10px #000000 inset;
font: 1.2em/1.5 Verdana,sans-serif;
height: 57px;
margin-left: 17px;
margin-top: 37px;
width: 278px;
margin-bottom: 2px;
}

.space-1 {
background: #fff none repeat scroll 0 0;
border: 8px solid #7FCDCD;
padding-left: 6px;
border-radius: 7px;
box-shadow: 0 0 10px #000000 inset;
font: 1.2em/1.5 Verdana,sans-serif;
height: 57px;
margin-left: 17px;
width: 278px;
margin-top: 1px;
margin-bottom: 2px;
}

.space-2 {
background: #d1d1d1 none repeat scroll 0 0;
border: 8px solid #7FCDCD;
padding-left: 6px;
border-radius: 7px;
box-shadow: 0 0 10px #000000 inset;
font: 1.2em/1.5 Verdana,sans-serif;
height: 57px;
margin-left: 17px;
width: 278px;
margin-bottom: 2px;
}
/*.typing-area {
background: rgba(0, 0, 0, 0) url("../images/doit-1.png") no-repeat scroll 0 0 !important;
}*/
.category-right {
width: 49%;
float: right;
height: 350px;
margin-top: 45px;
}

.category-right ul {
display: block;
height: 410px;
padding: 0;
margin: 0;
}

.category-right ul li {
animation-name: slideright;
animation-duration: 2s;
display: block;
width: 100%;
line-height: 22px;
font-size: 17px;
color: #000;
font-weight: bold;
padding-top: 22px;
margin-left: 21px;
}
/*#tooltip{
font-family: Arial, sans-serif;
font-size: 14px;
text-align: center;
line-height: 16px;
padding: 8px 10px;
border-radius: 5px; 
color: #000; 
width:185px;
height:55px;
line-height: 1em;
display: block;
}*/
#demos span {
background: #ff5e3c none repeat scroll 0 0;
border: 3px solid #ff5e3c;
border-radius: 100%;
box-sizing: border-box;
color: #fff;
display: block;
float: left;
font-size: 0.6em;
font-weight: 700;
height: 5em;
line-height: 1em;
margin: -1.4em 1em 0 0;
padding: 1.8em 0 0;
text-align: center;
text-transform: uppercase;
width: 5em;
}
/*just do it*/
/*Kaz-version*/
.midd {
width: 88% !important;
}

.category-link h2 {
font-size: 22px;
color: #000;
font-weight: normal !important;
}

.category-link p {
font-size: 16px !important;
color: #000;
font-weight: normal;
}

.space {
margin-top: 39px;
}

.btn-sound {
width: 432px;
height: 121px;
background: url(../images/kaz-sound-btn.png) no-repeat;
cursor: pointer;
margin: 0 auto;
}

.btn-text {
width: 432px;
height: 121px;
background: url(../images/kaz-text-btn.png) no-repeat;
cursor: pointer;
margin: 0 auto;
}

.btn-audio {
width: 432px;
height: 121px;
background: url(../images/audio-dscrptn-btn.png) no-repeat;
cursor: pointer;
margin: 0 auto;
}

.showkeybord {
width: 100px;
height: 40px;
position: absolute;
overflow: hidden;
top: 300px;
right: 134px;
cursor: pointer;
}

.btn-showhide {
width: 100px;
height: 40px;
line-height: 20px;
cursor: pointer;
margin: 0 auto;
border-radius: 5px;
background: #0066ff;
color: #fff;
font-size: 12px;
text-align: center;
text-transform: uppercase;
font-family: Verdana;
}
/*Kaz-version*/
/*basics*/
.kaz-dancing {
font-size: 42px;
font-weight: bold;
color: #011993;
line-height: 55px;
padding-top: 9px;
text-align: center;
text-transform: lowercase;
}

.Rude-dance {
font-size: 42px;
font-weight: bold;
color: #011993;
line-height: 55px;
padding-top: 38px;
text-align: center;
text-transform: lowercase;
}

.slap-now {
font-size: 42px;
font-weight: bold;
color: #011993;
line-height: 55px;
padding-top: 38px;
text-align: center;
text-transform: lowercase;
}

.big-test {
font-size: 42px;
font-weight: bold;
color: #011993;
line-height: 55px;
padding-top: 38px;
text-align: center;
text-transform: lowercase;
}

.quiz {
font-size: 42px;
font-weight: bold;
color: #011993;
line-height: 55px;
padding-top: 38px;
text-align: center;
text-transform: lowercase;
}

.baggy-hat {
font-size: 42px;
font-weight: bold;
color: #011993;
line-height: 55px;
padding-top: 38px;
text-align: center;
text-transform: lowercase;
}

.kaz-dancing:hover,
.Rude-dance:hover,
.slap-now:hover,
.big-test:hover,
.quiz:hover,
.baggy-hat:hover {
transform: scale(1.4);
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
transition: all 0.2s ease-out 0s;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
}

.selection_area:focus .kaz-dancing,
.selection_area:focus .Rude-dance,
.selection_area:focus .slap-now,
.selection_area:focus .big-test,
.selection_area:focus .quiz,
.selection_area:focus .baggy-hat {
transform: scale(1.4);
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
transition: all 0.2s ease-out 0s;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
}

.arrow-1 {
height: 73px;
margin-left: 146px;
margin-top: 107px;
width: 161px;
z-index: 999999;
position: absolute;
}

.arrow-2 {
height: 73px;
margin-left: 134px;
margin-top: 55px;
position: absolute;
width: 161px;
z-index: 999999;
}

.arrow-down {
height: 73px;
margin-left: 68px;
margin-top: 167px;
width: 161px;
z-index: 999999;
position: absolute;
}

.big-text {
color: #009c69 !important;
font-size: 28px !important;
font-weight: normal;
text-transform: capitalize !important;
}

.sound-text {
float: left;
font-size: 12px;
margin-top: 16px;
text-align: right;
width: 78%;
}
/*basics*/
/*speedbuilder*/

@keyframes slideright {
from {
margin-left: 70%;
width: 100%;
}

to {
margin-left: 4%;
width: 100%;
}
}

.understyle {
background-color: #000;
display: block !important;
height: 2px;
margin: 0 auto;
width: 10px;
}

.understyle:hover {
background-color: red;
}

.linehgt {
line-height: 25px !important;
}

.head-select {
background: red none repeat scroll 0 0;
cursor: pointer;
height: 135px;
left: 439px;
overflow: hidden;
position: absolute;
top:20px;
width: 133px;
}

.foot-select {
background: red none repeat scroll 0 0;
cursor: pointer;
height: 135px;
left: 426px;
overflow: hidden;
position: absolute;
top: 429px;
width: 162px;
}

.lefthand-select {
background: red none repeat scroll 0 0;
cursor: pointer;
height: 60px;
left: 308px;
overflow: hidden;
position: absolute;
top: 292px;
width: 133px;
}

.righthand-select {
background: red none repeat scroll 0 0;
cursor: pointer;
height: 68px;
left: 598px;
overflow: hidden;
position: absolute;
top: 333px;
width: 133px;
}

.downleg {
background: transparent none repeat scroll 0 0;
height: 60px;
overflow: hidden;
position: absolute;
right: 61px;
top: 475px;
width: 83px;
cursor: pointer;
margin-top: 25px;
font-size: 10px;
}

.tophead {
background: transparent none repeat scroll 0 0;
height: 77px;
overflow: hidden;
position: absolute;
right: 84px;
top: 358px;
width: 69px;
cursor: pointer;
margin-top: 25px;
font-size: 10px;
}

.lefthand {
background: transparent none repeat scroll 0 0;
height: 35px;
overflow: hidden;
position: absolute;
right: 142px;
top: 418px;
width: 64px;
cursor: pointer;
margin-top: 25px;
font-size: 10px;
}

.righthand {
background: transparent none repeat scroll 0 0;
    height: 31px;
    overflow: hidden;
    position: absolute;
    right: 47px;
    top: 418px;
    width: 55px;
    cursor: pointer;
    margin-top: 25px;
    font-size: 10px;
}

.ln-1 {
color: #0066ff !important;
}

.ln-2 {
padding-top: 51px !important;
color: #0066ff !important;
}

.ln-3 {
padding-top: 58px !important;
color: #0066ff !important;
}

.ln-4 {
padding-top: 57px !important;
color: #0066ff !important;
}

.ln-5 {
padding-top: 39px !important;
color: #0066ff !important;
}
/*speedbuilder*/

.ui-btn {
margin: 30px auto;
width: 400px;
}

.yellow_bttn {
background-color: #3c6496;
border-radius: 12px;
color: #fff;
display: block;
float: left;
font-size: 16px;
font-weight: bold;
height: 35px;
line-height: 35px;
text-align: center;
text-transform: uppercase;
width: 130px;
margin-top: 4px;
cursor: pointer;
}

.yellow_bttn:hover, .exit_bttn:hover {
background: #999;
}

.yellow_bttns {
background-color: #3c6496;
border-radius: 12px;
color: #fff;
display: block;
float: left;
font-size: 16px;
font-weight: bold;
height: 35px;
line-height: 35px;
text-align: center;
text-transform: uppercase;
width: 110px;
margin-top: 8px;
cursor: pointer;
}

.exit_bttn {
background-color: #3c6496;
border-radius: 12px;
color: #fff;
display: block;
font-size: 16px;
font-weight: bold;
height: 35px;
line-height: 35px;
text-align: center;
text-transform: uppercase;
width: 130px;
margin-top: 8px;
cursor: pointer;
}

.exit_bttn:hover {
background-color: #999 !important;
color: #fff;
}

.sounds-back {
width: 40px;
height: 45px;
float: left;
padding-left: 5px;
cursor: pointer;
/*background: #7fcdcd;*/
border-radius: 50px;
}

.sounds {
width: 35px;
height: 40px;
float: left;
padding-top: 5px;
cursor: pointer;
display: none;
}

.sounds-1 {
width: 41px;
height: 40px;
float: left;
padding-left: 5px;
margin-top: 4px;
cursor: pointer;
}

.exit-alert {
float: right;
width: 100%;
}

.mike {
color: #ff9a00;
font-size: 20px;
text-align: center;
}

.endcol {
color: #0066ff !important;
margin-left: 28%;
}

.gap {
height: 30px;
width: 100%;
}

.end-punc-area {
width: 100%;
margin: 0 auto;
margin-top: 50px;
margin-bottom: 60px;
}

.end-punc {
margin: 0 0 5px;
padding: 5px;
width: 400px;
height: 301px;
padding: 25px 15px 20px 15px;
font: 1.2em/1.5 'Verdana';
border: 0;
margin-top: 40px;
float: left;
}

.punc-right p {
font-size: 14px;
color: #000;
line-height: 22px;
}

.learn-key {
float: left;
color: #009872;
text-align: left;
font-size: 20px;
width: 100%;
margin-bottom: 10px;
}

.track-1 {
width: 100%;
height: 140px;
}

.lftrgt {
width: 100%;
}

.mhead {
color: #009c69;
font-size: 16px;
font-weight: bold;
padding-top: 10px;
}

.nrmlp {
color: #000;
font-size: 14px;
font-weight: normal;
padding-top: 20px;
}

.nrmlps {
color: #000;
font-size: 14px;
font-weight: normal;
padding-top: 2px;
}

.version-bar {
width: 300px;
line-height: 65px;
font-size: 18px;
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #7fcdcd) repeat scroll 0 0;
border-radius: 8px;
box-shadow: 1px 4px 7px #ccc;
margin: 25px auto 8px;
text-align: center;
float: left;
font-family: 'verdana';
cursor: pointer;
}

.version-bar:hover {
box-shadow: 12px 8px 49px -18px #000;
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #1ccece) repeat scroll 0 0;
}

.version-bar-1 {
width: 340px;
line-height: 65px;
font-size: 18px;
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #7fcdcd) repeat scroll 0 0;
border-radius: 8px;
box-shadow: 1px 4px 7px #ccc;
margin: 25px auto 8px;
text-align: center;
float: left;
font-family: 'verdana';
cursor: pointer;
}

.version-bar-1:hover {
box-shadow: 12px 8px 49px -18px #000;
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #1ccece) repeat scroll 0 0;
}

.version-bar-2 {
width: 340px;
line-height: 65px;
font-size: 18px;
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #7fcdcd) repeat scroll 0 0;
border-radius: 8px;
box-shadow: 1px 4px 7px #ccc;
margin: 25px auto 8px;
text-align: center;
float: left;
font-family: 'verdana';
cursor: pointer;
}

.version-bar-2:hover {
box-shadow: 12px 8px 49px -18px #000;
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #1ccece) repeat scroll 0 0;
}

.dm-1 {
width: 90px;
height: 110px;
position: absolute;
overflow: hidden;
right: 684px;
top: 62px;
}

.dm-2 {
width: 90px;
height: 110px;
position: absolute;
overflow: hidden;
right: 691px;
top: 206px;
}

.dm-3 {
width: 90px;
height: 110px;
position: absolute;
overflow: hidden;
right: 595px;
top: 230px;
}

.dm-4 {
width: 90px;
height: 110px;
position: absolute;
overflow: hidden;
right: 681px;
top: 373px;
}

.dm-5 {
width: 90px;
height: 110px;
position: absolute;
overflow: hidden;
right: 595px;
top: 373px;
}

.keysky {
width: 97%;
margin-top: 22px;
}

#wraps {
width: 1250px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
/*footer*/
.foot {
width: 100%;
background: rgba(60, 100, 150, 0.34);
margin: 0 auto;
height: 100px;
position: relative;
overflow: hidden;
bottom: 0;
}

.foot-container {
margin: 12px auto;
overflow: hidden;
width: 512px;
}

.foot-container .foot-menu {
/*margin:0 auto;*/
margin-left: 38px;
overflow: hidden;
position: relative;
z-index: 999;
width: 520px;
}

.foot-container .foot-menu ul {
list-style: outside none none;
margin: 0;
}

.foot-container .foot-menu ul li {
float: left;
text-align: center;
}

.foot-container .foot-menu ul li a {
color: #0300ff;
display: block;
float: left;
font-size: 14px;
font-weight: bold;
padding: 15px 20px;
padding-bottom: 10px;
}

.foot-para {
text-align: center;
color: #000;
font-size: 14px;
line-height: 15px;
}
/*footer*/
.tooltip-example {
position: relative;
display: inline-block;
cursor: pointer;
border: 1px solid #red;
}

.tooltip-example > span {
text-align: center;
color: #000;
font-size: 12px;
line-height: 1.5;
background: #F66867;
background-clip: padding-box;
box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
border: 5px solid #111;
border-radius: 3px;
position: absolute;
width: 350px;
left: 50%;
margin-left: -175px;
padding: 10px 0px;
bottom: 100%;
margin-bottom: 10px;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}

.tooltip-example > span:before, a > span:after {
content: "";
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: 100%;
left: 50%;
margin-left: -10px;
}

.tooltip-example > span:before {
border-top: 10px solid #111;
margin-top: 5px;
}

.tooltip-example > span:after {
border-top: 10px solid #F66867;
margin-top: -2px;
z-index: 1;
}

.tooltip-example:hover > span {
visibility: visible;
opacity: 1;
}
/*HOVER*/
.mh-menu {
width: 830px;
margin: 0 auto !important;
position: relative;
}

.mh-menu li {
width: 830px;
}

.mh-menu li a {
display: block;
width: 830px;
padding: 0px 10px;
text-align: right;
position: relative;
z-index: 10;
/*border-right: 1px solid #ddd;*/
/*background: rgba(255,255,255, 0.8);*/
}
/*.mh-menu li:hover a{
background: rgba(225,239,240, 0.4);
}*/
.mh-menu li a span {
display: block;
}

.mh-menu li a span:first-child {
font-weight: 700;
font-size: 16px;
color: #ddd;
padding-top: 10px;
}

.mh-menu li a span:nth-child(2) {
font-weight: 400;
font-size: 28px;
/*-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
-ms-transition: color 0.2s linear;
transition: color 0.2s linear;*/
}
/*.mh-menu li:nth-child(1):hover span:nth-child(2){
color: #ae3637;
}
.mh-menu li:nth-child(2):hover span:nth-child(2){
color: #c3d243;
}
.mh-menu li:nth-child(3):hover span:nth-child(2){
color: #d38439;
}
.mh-menu li:nth-child(4):hover span:nth-child(2){
color: #8e7463;
}*/
.mh-menu li img {
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
opacity: 0;
/*-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;*/
}

.mh-menu li:hover img {
left: 650px;
opacity: 1;
position: absolute;
overflow: hidden;
}
/*HOVER*/
/*kaz HELP*/
.hd-pg {
font-size: 22px !important;
color: #990000 !important;
text-align: left;
float: left;
}

.drctn-path {
width: 653px;
height: 357px;
margin: 0 auto;
margin-top: 30px;
}

.text-area {
width: 830px;
margin: 0 auto;
margin-top: 16px;
}

.text-area p {
text-align: left;
color: #000;
line-height: 21px;
font-size: 14px;
}

.resume_bttn {
background-color: #ccc;
border-radius: 12px;
color: #0066ff;
display: block;
float: left;
font-size: 16px;
font-weight: bold;
height: 35px;
line-height: 35px;
margin-top: 4px;
text-align: center;
text-transform: uppercase;
width: 150px;
cursor: pointer;
}

.btn-area {
float: right;
width: 150px;
}

.reminder {
color: #000;
font-size: 16px;
font-weight: bold;
text-align: left;
margin-top: 48px;
}

.normal {
font-weight: normal !important;
}

.drctn-icon {
width: 389px;
height: 427px;
margin: 0 auto;
margin-top: 30px;
}

.top-arrow {
margin-top: 56px;
position: absolute;
margin-left: 360px;
width: 110px;
height: 73px;
}

.left-arrow {
margin-top: 198px;
position: absolute;
margin-left: 203px;
width: 120px;
height: 48px;
}

.right-arrow {
margin-top: 297px;
position: absolute;
right: 277px;
width: 71px;
height: 78px;
}

.bottom-arrow {
margin-top: 488px;
position: absolute;
margin-left: 425px;
width: 78px;
height: 65px;
}
/*kaz HELP*/
.write-punc {
margin: 0 0 5px;
padding: 5px;
width: 246px;
height: 165px;
padding: 25px 15px 20px 15px;
font: 1.2em/1.5 Verdana, Sans-Serif;
background: url(../images/punctuation.png) no-repeat;
border: 0;
margin-top: 25px;
float: left;
}

.punc-area {
width: 830px;
height: 205px;
float: left;
}

.punc-right {
width: 48%;
float: right;
padding: 25px 0px 25px 0px;
font-size: 14px;
color: #000;
line-height: 18px;
}

.bold-p {
font-size: 14px !important;
font-weight: bold !important;
}


/*-----------tooltip works---------------*/


#mcTooltipWrapper {
left: 0px !important;
top: 284px !important;
}

#tip3 h3 {
font-size: 14px;
text-transform: uppercase;
text-align: center;
}

#tip4 {
background: rgba(0, 0, 0, 0) linear-gradient(to top, #ffad33, #e68a00) repeat scroll 0 0 !important;
background-color: #ff6600;
color: #fff;
padding: 19px;
font-size: 12px;
border: 0;
border-radius: 10px 10px 0 0;
width: 230px;
height: 0px;
top: 290px;
position: absolute;
}

#tip3 {
background-color: #990000;
color: #fff;
padding: 8px;
font-size: 12px;
border: 0;
border-radius: 10px 10px 0 0;
width: 230px;
/*margin-top:11px;*/
}

#tip2 {
background-color: #009900;
color: #fff;
padding: 19px;
width: 230px;
height: 0px;
border: 0;
top: 290px;
position: absolute;
font-size: 12px;
border-radius: 10px 10px 0 0;
}

#tip2 h3,
#tip4 h3 {
font-size: 14px;
text-transform: uppercase;
text-align: center;
}

.lesson-guide {
/*overflow: hidden;
clear: both;
position: absolute;
top: 262px;
margin-left: 578px;
z-index: 999999;
border-radius: 5px 5px 0 0;
padding: 17px 0 5px 0;*/
/* overflow: hidden; */
clear: both;
position: absolute;
top: 293px;
margin-left: 594px;
/* z-index: 999999; */
border-radius: 5px 5px 0 0;
padding: 17px 0 5px 0;
}

.lsn-guide-btn {
/*text-transform:uppercase;
display:block;
cursor:pointer;
color:#fff;
font-size:12px !important;*/
text-transform: uppercase;
display: block;
cursor: pointer;
color: #fff;
font-size: 12px !important;
}

.click-hide-txt {
display: block;
color: #fff;
font-size: 13px;
font-style: italic;
}

.hide-panel {
/*width:322px;
height:auto;
border:3px solid #ccc;
overflow:hidden;
padding:6px;
background-color:#fff;*/
width: 522px;
height: 125px;
border: 3px solid #ccc;
padding: 6px;
background-color: #fff;
left: -355px;
top: -124px;
position: absolute;
border: 2px solid #000;
border-radius: 5px;
}

.hide-panel p {
color: #333;
font-size: 12px;
overflow-y: scroll;
height: 118px;
}

.btn-lesson-guide {
/*background-color:#0066ff;
padding:1px;
width:180px;
color:#fff !important;
text-align:center;
border-radius:5px 5px 0 0;*/
background-color: #0066ff;
padding: 1px;
width: 180px;
color: #fff !important;
/* height: 13px; */
text-align: center;
border-radius: 5px 5px 0 0;
}

.home-left-2 {
width: 100%;
float: left;
}

.home-left {
width: 90%;
float: left;
}

.well {
padding-top: 5px !important;
padding-bottom: 0px !important;
margin-bottom: 20px !important;
margin-bottom: 20px !important;
}

.home-left ul {
margin: 0;
padding: 0;
}

.home-left p {
font-size: 15px;
margin-top: 0px;
color: #333;
font-weight: normal;
line-height: 28px;
}

.home-left ul li {
font-size: 16px !important;
line-height: 22px;
/*margin-top:40px;*/
color: #555;
}

.bullet {
list-style: none;
padding-left: .8em;
position: relative;
text-align: left;
}

.bullet:before {
background: #3c6496;
content: "";
height: .5em;
left: 0;
position: absolute;
top: .5em;
width: .5em;
border-radius: 50%;
}

.left {
width: 66%;
float: left;
}

.right {
width: 28%;
float: right;
}

.middlearea {
width: 65%;
margin: 0 auto;
}

.home-right {
float: right;
width: 17%;
margin-top: 0px;
}

.home-right-2 {
float: right;
width: 100%;
margin-top: -56px;
text-align: center;
}

.home-right-2 .sound-alert {
float: none !important;
margin: 0 auto !important;
display: inline-block !important;
}

.nrmlps {
color: #000;
font-size: 14px;
padding-top: 2px;
font-weight: normal;
}

.homeonly {
font-weight: normal !important;
/* text-transform:capitalize!important;*/
}

.wrap-container {
position: relative;
overflow: hidden;
width: 850px;
margin: 0 auto;
}
/*bare essentials*/

.works-top {
width: 100%;
height: 178px;
margin-bottom: 45px;
}

.works-top-img {
background: #cccc99 none repeat scroll 0 0;
border-radius: 10px;
float: right;
height: 178px;
padding-top: 15px;
padding-bottom: 15px;
width: 225px;
}

.works-top-txt {
float: left;
margin-bottom: 15px;
text-align: left;
width: 271px;
}

.works-top-txt p {
color: #000;
font-size: 14px;
line-height: 25px;
text-transform: capitalize;
}

.works-bottom {
width: 100%;
margin-top: 65px;
}

.botm {
height: 200px;
}

.works-bottom-img {
float: left;
padding: 15px;
/*background:#ff9999;*/
background: rgba(255, 158, 153, 0.51) none repeat scroll 0 0;
border-radius: 10px;
}

.works-bottom-txt {
float: right;
margin-bottom: 15px;
text-align: left;
width: 271px;
padding: 30px 25px 0px 25px;
}

.nots {
font-size: 13px !important;
line-height: 23px !important;
}
/*.works-bottom-txt p{
color: #000;
font-size: 14px;
line-height: 25px;
text-transform: capitalize;
    
}*/
.clear {
clear: both;
}

.key-pad-1 {
background-color: #ddd;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
float: left;
padding: 12px;
width: 588px;
margin-left: 200px;
}

.bare-chair {
/*text-transform: capitalize;*/
text-align: center;
font-size: 24px;
color: #000;
line-height: 28px;
margin: 0 auto;
font-family: 'verdana';
font-weight: bold;
margin-bottom: 20px;
}

.bare-chair span {
color: #ff9200;
font-size: 24px !important;
}

.blue-strip-last {
padding: 8px;
background: #d6edee;
width: 100%;
}

.blue-strip-last p {
font-size: 13px;
line-height: 16px;
text-align: center;
font-weight: bold;
color: #000;
}

.fast-strp {
margin-top: 25px;
float: right;
padding: 7px;
text-align: center;
background: #d6edee;
margin-right: 220px;
}

.scnd-strp {
margin-top: 55px;
float: left;
padding: 7px;
text-align: center;
background: #d6edee;
margin-left: 25px;
}

.last-strp {
margin-top: 25px;
margin-bottom: 20px;
float: left;
padding: 7px;
text-align: center;
background: #d6edee;
margin-left: 250px;
height: 35px;
}

.blue-area-1 {
top: 178px;
left: 95px;
width: 20%;
float: left;
position: absolute;
background: #d6edee;
padding: 7px;
height: 57px;
}

.blue-area-1 p {
font-size: 12px;
line-height: 14px;
text-align: center;
font-weight: normal;
color: #000;
}

.blue-area-2 {
top: 280px;
left: 95px;
width: 20%;
float: left;
position: absolute;
background: #d6edee;
padding: 7px;
height: 107px;
}

.blue-area-2 p {
font-size: 12px;
line-height: 14px;
text-align: center;
font-weight: normal;
color: #000;
}

.blue-area-3 {
background: #d6edee none repeat scroll 0 0;
float: right;
height: 42px;
padding: 7px;
position: absolute;
right: 95px;
top: 169px;
width: 22%;
}

.blue-area-3 p {
font-size: 13px;
font-weight: normal;
line-height: 14px;
text-align: center;
color: #000;
}

.blue-area-4 {
background: #d6edee none repeat scroll 0 0;
float: left;
height: 54px;
padding: 7px;
position: absolute;
left: 95px;
top: 425px;
width: 24%;
}

.blue-area-4 p {
font-size: 13px;
font-weight: normal;
line-height: 14px;
text-align: center;
color: #000;
}

.blue-area-5 {
background: #d6edee none repeat scroll 0 0;
float: right;
height: 42px;
padding: 7px;
position: absolute;
right: 70px;
top: 300px;
width: 24%;
}

.blue-area-5 p {
font-size: 12px;
line-height: 14px;
text-align: center;
font-weight: normal;
color: #000;
padding: 0px 10px 0px 10px;
}

.blue-area-6 {
background: #d6edee none repeat scroll 0 0;
float: right;
height: 30px;
padding: 7px;
position: absolute;
right: 70px;
top: 424px;
width: 24%;
}

.blue-area-6 p {
font-size: 12px;
line-height: 14px;
text-align: center;
font-weight: normal;
color: #000;
padding: 0px 10px 0px 10px;
}

.btm-bluearea {
width: 100%;
height: 55px;
margin: 49px 0px 10px 0px;
}


.btm-bluearea-left {
background: #d6edee none repeat scroll 0 0;
float: left;
height: 55px;
margin-left: 245px;
width: 31%;
}

.btm-bluearea-left p {
font-size: 12px;
line-height: 17px;
text-align: center;
font-weight: normal;
color: #000;
padding: 0px 10px 0px 10px;
}

.btm-bluearea-right {
background: #d6edee none repeat scroll 0 0;
float: left;
height: 44px;
margin-left: 83px;
width: 22%;
margin-top: 6px;
}

.btm-bluearea-right p {
color: #000;
font-size: 11px;
font-weight: bold;
line-height: 19px;
padding: 0 10px;
text-align: center;
}

.normal-font {
font-size: 12px !important;
font-weight: normal !important;
color: #000;
}

.arrow1 {
left: 332px;
overflow: hidden;
position: absolute;
top: 186px;
transform: rotate(156deg);
-webkit-transform: rotate(337deg);
-moz-transform: rotate(156deg);
-o-transform: rotate(156deg);
-ms-transform: rotate(156deg);
}

.arrow2 {
left: 519px;
overflow: hidden;
position: absolute;
top: 140px;
transform: rotate(156deg);
-webkit-transform: rotate(172deg);
-moz-transform: rotate(156deg);
-o-transform: rotate(156deg);
-ms-transform: rotate(156deg);
}

.arrow3 {
left: 333px;
overflow: hidden;
position: absolute;
top: 300px;
-webkit-transform: rotate(292deg);
-moz-transform: rotate(156deg);
-o-transform: rotate(156deg);
-ms-transform: rotate(156deg);
}

.arrow4 {
left: 358px;
overflow: hidden;
position: absolute;
top: 319px;
-webkit-transform: rotate(361deg);
-moz-transform: rotate(356deg);
-o-transform: rotate(356deg);
-ms-transform: rotate(356deg);
}

.arrow5 {
left: 425px;
overflow: hidden;
position: absolute;
top: 414px;
}

.arrow6 {
left: 449px;
overflow: hidden;
position: absolute;
top: 458px;
transform: rotate(156deg);
-webkit-transform: rotate(8deg);
-moz-transform: rotate(156deg);
-o-transform: rotate(156deg);
-ms-transform: rotate(156deg);
}

.arrow7 {
overflow: hidden;
position: absolute;
right: 331px;
top: 229px;
transform: rotate(156deg);
-webkit-transform: rotate(121deg);
-moz-transform: rotate(156deg);
-o-transform: rotate(156deg);
-ms-transform: rotate(156deg);
/* background-color: white; */
}

.arrow8 {
overflow: hidden;
position: absolute;
right: 293px;
top: 281px;
}

.arrow9 {
overflow: hidden;
position: absolute;
right: 343px;
top: 281px;
transform: rotate(156deg);
-webkit-transform: rotate(150deg);
-moz-transform: rotate(156deg);
-o-transform: rotate(156deg);
-ms-transform: rotate(156deg);
}

.arrow10 {
overflow: hidden;
position: absolute;
right: 338px;
top: 385px;
transform: rotate(156deg);
-webkit-transform: rotate(170deg);
-moz-transform: rotate(156deg);
-o-transform: rotate(156deg);
-ms-transform: rotate(156deg);
}

.bigeyesgt {
overflow: hidden;
position: absolute;
right: 402px;
top: 215px;
}

/*.smalleyesgt {
overflow: hidden;
position: absolute;
right: 576px;
top: 275px;
}*/
.smalleyesgt {
overflow: hidden;
position: absolute;
right: 505px;
top: 200px;
}

.total-area {
width: 100%;
height: 427px;
background: yellow;
}

.fast-area {
/* width:15%;
float:left;
height:427px;
background: red;*/
}

.mdl-area {
width: 30%;
margin: 0 auto;
height: 373px;
}

/*speedbuilder*/
.prgsborder-inner {
border-radius: 50px;
width: 610px;
height: 322px;
box-shadow: 2px 6px 4px #999;
}

.prgsborders-inner {
border-radius: 50px;
width: 610px;
height: 322px;
box-shadow: 2px 6px 4px #999;
}

.progress-form {
width: 610px;
height: 341px;
background: #7fcdcd;
border-radius: 60px;
/*float: left;*/
float: right;
margin-top: 50px;
border: 20px solid #dfdfdf;
box-shadow: inset 1px 6px 7px #999;
/*border-right-top-radius: 0px!important;*/
}

.progress-forms {
width: 610px;
height: 341px;
background: #7fcdcd;
border-radius: 60px;
float: left;
margin-top: 20px;
border: 20px solid #dfdfdf;
box-shadow: inset 1px 6px 7px #999;
/*border-right-top-radius: 0px!important;*/
}

.progrs-bar {
width: 571px;
height: 133px;
float: left;
margin-top: 39px;
background: #e3e3e3;
border-radius: 10px;
margin-left: 35px;
padding-bottom: 10px;
}

.progrs-bar p {
font-size: 12px;
color: #606060;
margin-top: 5px;
margin-left: 20px;
}

.handle {
width: 95px;
height: 33px;
float: left;
margin-top: 118px;
background: url(../images/speed-handle.png) no-repeat;
}

.kaz-online {
right: 105px !important;
top: 54px !important;
z-index: 999999 !important;
background: url(../images/speedrst.png) no-repeat;
width: 262px;
height: 450px;
}

.rstmrgn {
margin-top: 47px;
margin-right: 0px !important;
}

.kaz-speed {
/*right: 105px !important;
top: 54px !important;
z-index: 999999 !important;
height: 316px;*/
right: 148px;
width: 200px;
top: 150px;
}

.online {
width: 38%;
}

.bottoms {
font-size: 14px;
color: #74b7d1 !important;
text-transform: uppercase;
text-align: center;
}

.area-1-txt {
color: #fff !important;
font-size: 16px;
font-weight: bold !important;
margin-top: 10px !important;
padding-left: 20px;
}


.ln-2 {
padding-top: 51px !important;
}

.ln-3 {
padding-top: 58px !important;
}

.ln-4 {
padding-top: 57px !important;
}

.ln-5 {
padding-top: 39px !important;
}

.progress {
width: 100%;
height: 23px;
box-shadow: inset 1px -3px 9px #666;
/*border-radius: 10px;*/
}

.progress-wrap {
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #a7e200, #f4d448) repeat scroll 0 0;
margin: 5px 0;
overflow: hidden;
position: relative;
width: 59%;
margin-left: 15px;
}

.colors {
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #cfcfcf, #ff4f75) repeat scroll 0 0;
}

.progress-bar {
background: #ccc;
left: 0;
position: absolute;
top: 0;
}

.scale {
width: 100%;
position: relative;
overflow: hidden;
text-align: left;
color: #333;
font-size: 0.68em;
font-weight: bold;
/*letter-spacing: 1px;*/
line-height: 12px;
padding-left: 9px;
padding-top: 5px;
z-index: 999999;
font-family: 'Verdana';
}

.twenty {
color: #ee4776;
font-size: 32px;
overflow: hidden;
position: absolute;
/* right: 513px; */
left: 28px;
top: 16px;
}

.pcrcl {
background: url(../images/pcrcl.png) no-repeat;
overflow: hidden;
position: absolute;
right: 549px;
width: 96px;
height: 96px;
}

.colorfont {
margin-top: 10px;
border: 1px solid #aaa;
/* width: 100px; */
padding: 5px;
border-radius: 7px;
background: none;
}

.progrs-bar p {
font-size: 12px;
color: #606060;
margin-top: 5px;
margin-left: 20px;
}

.handle {
width: 95px;
height: 33px;
float: left;
margin-top: 118px;
background: url(../images/speed-handle.png) no-repeat;
}

.kaz-online {
right: 105px !important;
top: 54px !important;
z-index: 999999 !important;
}

.online {
width: 38%;
}

.bottoms {
font-size: 14px;
color: #7fcdcd;
text-transform: uppercase;
text-align: center;
margin-top: 4px;
}

.stop {
margin-top: 69px;
}

.area-1-txt {
color: #fff !important;
font-size: 16px;
font-weight: bold !important;
margin-top: 9px !important;
padding-left: 20px;
/* padding-top: 18px; */
}

.area-2-txt {
color: #000;
font-size: 10.6px !important;
font-weight: normal;
margin-top: 0px;
text-align: center;
line-height: 62px !important;
}

#area-1 {
border: none;
background: #ddd none repeat scroll 0 0;
/* box-shadow: inset 9px -8px 4px #ccc; */
font-family: 'Verdana';
font-size: 15px;
line-height: 18px;
height: 130px;
resize: none;
margin-left: 15px;
width: 565px;
padding-left: 10px;
padding-top: 23px;
color: #333;
}

#area-2 {
background: #fff none repeat scroll 0 0;
border: none;
font-family: 'Verdana';
font-size: 15px;
line-height: 18px;
height: 120px;
resize: none;
margin-left: 15px;
width: 565px;
color: #333;
padding-left: 10px;
padding-top: 10px;
}



/*speedbuilder*/
/*speedbuilder-home*/
.category-links {
/*left: 462px;*/
overflow: hidden;
position: absolute;
top: 365px;
right: 211px;
}

.category-links ul li {
margin: 0 auto;
text-align: center;
}

.category-link ul li a {
margin: 0 auto;
text-align: center;
margin-top: 6px;
margin-bottom: 6px;
color: #000;
line-height: 20px;
font-size: 24px;
}

.nolinehgt {
line-height: 20px !important;
}

.speed-extra {
width: 1030px !important;
background: #fff;
}

.speed-left {
width: 83%;
float: left;
}

.speed-right {
float: right;
width: 17%;
margin-top: 440px;
}

.speed-circle {
background: #ccc none repeat scroll 0 0;
border: 2px solid #999;
border-radius: 50%;
height: 500px;
margin: 80px auto 0;
width: 500px;
}

.big {
width: 500px !important;
height: 500px !important;
}

.noborder {
border: none !important;
}

.speed-img {
height: 423px;
margin-left: 187px;
margin-top: 38px;
width: 522px;
}

.speed-txt {
animation: 2s ease 0s normal none 1 running movingTopToBottom;
color: #ff9d00;
font-family: verdana;
font-size: 90px;
font-weight: bold;
left: 248px;
letter-spacing: 1mm;
line-height: 95px;
margin-top: 158px;
overflow: hidden;
position: absolute;
text-align: left;
text-transform: uppercase;
}

.speed-txt-1 {
animation-duration: 2s;
animation-name: slidein;
color: #000;
font-family: verdana;
font-size: 40px;
font-weight: bold;
left: 305px;
line-height: 50px;
margin-top: 270px;
overflow: hidden;
position: absolute;
text-align: left;
text-transform: capitalize;
}

.speeds-txt-1 {
animation-duration: 2s;
animation-name: slidein;
color: #3c6496;
font-family: verdana;
font-size: 51px;
font-weight: bold;
left: 248px;
line-height: 50px;
margin-top: 254px;
overflow: hidden;
position: absolute;
text-align: left;
text-transform: capitalize;
}

.reset-btn {
text-align: right;
margin-top: -90px;
margin-right: 17px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
cursor: pointer;
background: red;
padding: 11px;
text-align: center;
width: 54px;
/* float: right; */
z-index: 99999;
position: absolute;
left: 511px;
border-radius: 50%;
height: 73px;
/* padding-top: 50px; */
line-height: 69px;
}

@keyframes movingTopToBottom {
0% {
top: -115px;
}

100% {
top: 80px;
}
}

@keyframes slidein {
from {
margin-left: -35%;
width: 5%;
}

to {
margin-left: 0%;
width: 50%;
}
}

.keypad-pose {
margin-left: 121px !important;
margin-top: 167px !important;
}

.large-btn {
background: #ffffff none repeat scroll 0 0;
border: 2px solid #888;
border-radius: 8px;
box-shadow: 1px 7px 6px #ccc;
color: #009d69;
font-family: verdana;
font-size: 15px;
font-weight: bold;
height: 38px;
left: 174px;
line-height: 38px;
margin: 0 auto;
position: absolute;
text-align: center;
top: 436px;
width: 550px;
cursor: pointer;
}

.home-btn {
background: #ffffff none repeat scroll 0 0;
border: 2px solid #888;
border-radius: 8px;
box-shadow: 1px 7px 6px #ccc;
color: #009d69;
font-family: verdana;
font-size: 15px;
font-weight: bold;
height: 38px;
left: 350px;
line-height: 38px;
margin: 15px auto 0;
position: absolute;
text-align: center;
top: 474px;
width: 200px;
cursor: pointer;
}

.home-btn:hover {
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #41f3f3);
}

.adults-btn {
background: #ffffff none repeat scroll 0 0;
border: 2px solid #888;
border-radius: 8px;
box-shadow: 1px 7px 6px #ccc;
color: #009d69;
font-family: verdana;
font-size: 15px;
font-weight: bold;
height: 38px;
left: 350px;
line-height: 38px;
margin: 15px auto 0;
position: absolute;
text-align: center;
top: 525px;
width: 200px;
cursor: pointer;
}

.adults-btn:hover {
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #41f3f3);
}

#keyboard li.active {
background: #FF9800;
}
/*speedbuilder-home*/
/*justdoit*/

.doit-1 {
height: 72px;
left: 435px;
overflow: hidden;
position: absolute;
top: 105px;
width: 74px;
}

.doit-2 {
height: 72px;
left: 435px;
overflow: hidden;
position: absolute;
top: 182px;
width: 74px;
}

.doit-3 {
height: 75px;
left: 435px;
overflow: hidden;
position: absolute;
top: 261px;
width: 76px;
}

.doit-4 {
height: 75px;
left: 435px;
overflow: hidden;
position: absolute;
top: 337px;
width: 76px;
}

.doit-5 {
height: 75px;
left: 435px;
overflow: hidden;
position: absolute;
top: 410px;
width: 76px;
}

.newpart {
font-size: 16px;
color: #000;
line-height: 26px;
text-align: center;
font-weight: bold;
}

.exit-form {
background: #fff none repeat scroll 0 0;
border: 3px solid #000;
float: left;
height: 205px;
margin-left: 173px;
margin-top: 188px;
margin-bottom: 150px;
width: 606px;
z-index: 999999 !important;
}

.exit-form .highlights {
font-size: 14px;
text-align: center;
font-weight: bold;
color: #3c6496;
}

.exit-form-inner {
padding-top: 0px;
/*padding-bottom: 20px;*/
padding-left: 20px;
padding-right: 20px;
text-align: center;
}

.exit-form-inner p {
text-align: center;
font-size: 14px;
margin-bottom: 60px;
color: #000;
margin-top: 18px;
line-height: 20px;
}

.exit-form-inner span {
text-align: center;
font-size: 14px !important;
color: #000;
text-align: center !important;
margin: 0 auto !important;
margin-bottom: 10px;
font-family: verdana;
font-weight: normal !important;
}

.exity {
line-height: 22px !important;
}

#multiplechoice_page .exit-form,
#typingtestexit_page .exit-form {
border: 3px solid #000;
float: left;
height: 340px;
margin-left: 173px;
margin-top: 122px;
margin-bottom: 150px;
width: 606px;
z-index: 999999 !important;
}

#multiplechoice_page .exit-form-inner,
#typingtestexit_page .exit-form-inner {
padding-left: 20px;
padding-right: 20px;
text-align: center;
}

#multiplechoice_page .exit-form-inner p,
#typingtestexit_page .exit-form-inner p {
text-align: center;
font-size: 14px;
margin-bottom: 60px;
color: #000;
margin-top: 18px;
line-height: 14px;
}

#multiplechoice_page .exit-form-inner span,
#typingtestexit_page .exit-form-inner span {
text-align: center;
font-size: 14px !important;
color: #000;
text-align: center !important;
margin: 0 auto !important;
margin-bottom: 10px;
font-family: verdana;
font-weight: normal !important;
}

.btn-portn {
width: 50%;
margin: 0 auto;
/*padding: 8px 0px 8px 0px;*/
}

.save-btn {
background-color: #ccc;
border-radius: 12px;
color: #2e78f7;
display: block;
float: left;
font-size: 16px;
font-weight: normal;
height: 35px;
line-height: 35px;
text-align: center;
text-transform: uppercase;
width: 130px;
margin-top: 4px;
cursor: pointer;
}

.exit-btn {
background-color: #ccc;
border-radius: 12px;
color: #2e78f7;
display: block;
float: right;
font-size: 16px;
font-weight: normal;
height: 35px;
line-height: 35px;
text-align: center;
text-transform: uppercase;
width: 130px;
margin-top: 4px;
cursor: pointer;
}
/*justdoit*/
.grey {
background: #ccc;
}
/*bare-essentials*/
.enter-img {
padding-top: 10px;
}

.hd-area {
font-size: 16px;
height: 34px;
}

.hd1 {
float: left;
text-align: left;
color: #ab0000;
}

.hd2 {
color: #0300ff;
float: right;
text-align: right;
}

.pc1 {
color: #000;
font-size: 16px;
line-height: 20px;
margin-top: 90px;
text-align: left;
}

.pc2 {
color: #000;
font-size: 16px;
line-height: 20px;
margin-top: 25px;
text-align: left;
}

.pcbtnarea {
margin-top: 30px;
padding: 8px 0;
width: 100%;
}

.pcbtnarea1 {
background-color: #ccc;
border-radius: 20px;
color: #2e78f7;
cursor: pointer;
display: block;
float: left;
font-size: 16px;
font-weight: normal;
height: 35px;
line-height: 35px;
margin-right: 10px;
margin-top: 46px;
text-align: center;
text-transform: uppercase;
width: 290px;
}

.pcbtnarea2 {
background-color: #ccc;
border-radius: 20px;
color: #2e78f7;
cursor: pointer;
display: block;
float: left;
font-size: 16px;
font-weight: normal;
height: 35px;
line-height: 35px;
margin-right: 10px;
margin-top: 4px;
text-align: center;
text-transform: uppercase;
width: 220px;
}

.pcbtnarea3 {
background-color: #ccc;
border-radius: 20px;
color: #2e78f7;
cursor: pointer;
display: block;
float: left;
font-size: 16px;
font-weight: normal;
height: 35px;
line-height: 35px;
margin-top: 46px;
text-align: center;
text-transform: uppercase;
width: 290px;
}

.midl {
background-color: #ccc;
border-radius: 20px;
color: #2e78f7;
cursor: pointer;
display: block;
font-size: 16px;
font-weight: normal;
height: 35px;
line-height: 35px;
margin: 25px auto 0;
text-align: center;
text-transform: uppercase;
width: 220px;
}

.works-top {
width: 100%;
height: 96px;
margin-bottom: 45px;
}

.clear {
clear: both;
}

.works-bottom {
width: 100%;
margin-top: 65px;
}

.works-bottom-txt {
float: right;
margin-bottom: 15px;
text-align: left;
width: 310px;
padding: 0px 25px 0px 25px;
height: 150px;
overflow-y: scroll;
}

.works-bottom-txt p {
color: #000;
font-size: 14px;
line-height: 25px;
/*text-transform: capitalize;*/
}

.nots {
font-size: 13px !important;
line-height: 23px !important;
}

.no-1 {
left: 422px;
margin-top: 107px;
overflow: hidden;
position: absolute;
z-index: 999999;
}

.no-2 {
left: 382px;
margin-top: 103px;
overflow: hidden;
position: absolute;
z-index: 999999;
}

.no-3 {
left: 347px;
margin-top: 103px;
overflow: hidden;
position: absolute;
z-index: 999999;
}

.no-4 {
left: 313px;
margin-top: 105px;
overflow: hidden;
position: absolute;
z-index: 999999;
}

.scndno-1 {
left: 553px;
margin-top: 110px;
overflow: hidden;
position: absolute;
z-index: 999999;
}

.scndno-2 {
left: 592px;
margin-top: 105px;
overflow: hidden;
position: absolute;
z-index: 999999;
}

.scndno-3 {
left: 628px;
margin-top: 102px;
overflow: hidden;
position: absolute;
z-index: 999999;
}

.scndno-4 {
left: 660px;
margin-top: 104px;
overflow: hidden;
position: absolute;
z-index: 999999;
}

.bare {
width: 484px;
margin-top: 440px;
}

/*bare-essentials*/
.left-footer {
width: 48%;
float: left;
font-size: 12px;
color: #000;
text-align: left;
line-height: 16px;
height: 1px;
line-height: 85px;
}

.footer-inner {
width: 100%;
height: 52px;
margin-top: 20px;
}

.progress-site {
width: 20.5% !important;
top: 45px;
float: right;
height: 7px !important;
border-radius: 0 !important;
background: #00DEA2;
left: 210px;
}

.bold-xtra {
text-align: center;
font-size: 32px !important;
font-weight: bold;
color: #0066ff !important;
text-transform: lowercase;
}

.bold-normal {
text-align: center;
font-size: 20px !important;
font-weight: bold;
color: #0066ff !important;
}

.uparrow {
position: absolute;
top: 299px;
right: 187px;
color: #0066ff;
font-weight: bold;
font-size: 16px;
}

.uparrow-p {
font-size: 10px;
color: #000;
padding-bottom: 10px;
line-height: 12px;
width: 15%;
position: absolute;
right: 52px;
top: 316px;
text-align: center;
}

.fa-arrow-up {
font-size: 16px;
}
/*---added on 28.04.2016---*/
.rude-bottom-txt {
float: right;
line-height: 35px;
margin-bottom: 15px;
padding: 30px 40px 0;
text-align: left;
width: 363px;
}

.rude-bottom-txt p {
color: #000;
font-size: 14px;
line-height: 40px;
}

.baggyhat-top {
width: 100%;
margin-top: 15px;
}

.baggyhat-top {
width: 100%;
margin-top: 15px;
}

.baggyhat-top-left {
width: 50%;
float: left;
}

.baggyhat-top-txt {
color: #000;
float: right;
width: 40%;
font-size: 14px;
line-height: 25px;
/*text-transform: capitalize;*/
}

.baggyhat-top-txt p {
color: #000;
font-size: 12px;
line-height: 25px;
font-family: 'verdana';
}

.bold-xtra {
text-align: center;
font-size: 32px !important;
font-weight: bold;
color: #0066ff !important;
text-transform: lowercase;
margin-top: 30px;
}

.baggyhat-bottom {
width: 100%;
margin-top: 15px;
}

.bagyhat-bottom-img {
float: left;
width: 67%;
}

.big-top {
width: 100%;
margin-bottom: 15px;
}

.bigtxt {
height: 100px;
}

.tops {
height: 120px;
}

.tops2 {
height: 220px;
}

.big-top-text {
float: left;
text-align: left;
width: 316px;
}

.big-top-text p {
color: #000;
font-size: 13px;
line-height: 33px;
/* text-transform: capitalize;*/
}

.middlefont {
text-align: center;
font-size: 32px !important;
font-weight: bold;
color: #0066ff !important;
margin-top: 25px;
text-transform: lowercase !important;
}

.big-bottom {
width: 100%;
margin-top: 15px;
}

.big-bottom-img {
float: right;
text-align: left;
width: 25%;
padding: 30px 25px 0px 25px !important;
}

.ifmike {
float: right;
width: 50%;
text-align: right;
color: #0066ff;
}

.transcript-highlight {
color: blue !important;
font-weight: bold !important;
}

.transcript-bold {
font-weight: bold;
}

.rude-header-top {
height: 205px;
margin: 0 auto 35px;
width: 70%;
}

.rude-header-top-left {
/*background: rgba(0, 0, 0, 0) url("../images/kaj.png") no-repeat scroll 0 0;*/
border: 0 none;
float: left;
font: 1.2em/1.5 "Verdana";
height: 181px;
margin: 25px 0 5px;
padding: 25px 15px 11px;
width: 25%;
}

.rude-header-top-right {
float: right;
padding: 25px 0;
width: 66%;
/*margin-top: 22px;*/
}

.rude-header-top-right p {
font-size: 14px;
line-height: 18px;
color: #000;
}

.rude-header-top-rights {
float: right;
padding: 25px 0;
width: 66%;
/*margin-top: 22px;*/
}

.rude-header-top-rights p {
font-size: 14px;
line-height: 18px;
color: #000;
}

.bold-p {
font-size: 14px !important;
font-weight: bold !important;
}

.abcd {
width: 100%;
float: right;
}

.abcd p {
text-align: left;
font-size: 14px !important;
line-height: 16px;
margin-left: 65px;
width: 90%;
}

.abcd span {
text-align: left;
font-size: 14px !important;
line-height: 20px;
margin-left: 65px;
display: inline;
}

.abcd-flyingStart {
width: 82%;
float: left;
}

.end {
background: url(../../images/works-chair.png) no-repeat;
height: 416px !important;
margin-top: 0px !important;
}

.end-1 {
background: url(../../images/works-chair.png) no-repeat;
height: 416px !important;
margin-top: 0px !important;
}

.soundofpunc {
height: 250px !important;
}

.middle-area {
width: 100%;
height: 380px;
position: relative;
overflow: hidden;
}

.newhover:hover {
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #1ccece) repeat scroll 0 0;
}

.works-radiant {
position: absolute;
overflow: hidden;
top: 263px;
left: 151px;
}

.radient-direction {
position: absolute;
overflow: hidden;
right: 38px;
bottom: 65px;
}

.newtext {
width: 60%;
clear: both;
margin: 0 auto;
position: absolute;
margin-top: 50px;
left: 220px;
}

.second-space {
height: auto;
}

.first-space {
height: 10px;
}

.tooltips {
width: 140px;
height: 100px;
position: absolute;
top: 409px;
float: right;
z-index: 99999;
left: 206px;
/* transform: rotate(23deg); */
}

.toolTip_cityGuild1 {
width: 140px;
height: 100px;
position: absolute;
top: 150px;
float: right;
z-index: 99999;
left: 102px;
/*transform: rotate(23deg);*/
}

.toolTip_cityGuild2 {
width: 140px;
height: 100px;
position: absolute;
top: 262px;
float: right;
z-index: 99999;
left: 102px;
/*transform: rotate(23deg);*/
}

.tooltipss {
width: 140px;
height: 100px;
position: absolute;
top: 378px;
float: right;
z-index: 99999;
left: 150px;
}

.tooltipss-1 {
position: absolute;
top: 272px;
left: 152px;
z-index: 99999;
}

.tooltipss-2 {
width: 140px;
height: 100px;
position: absolute;
top: 159px;
float: right;
z-index: 99999;
left: 160px;
}

.tooltips1 {
width: 140px;
height: 100px;
position: absolute;
top: 316px;
float: right;
z-index: 99999;
left: 319px;
/* transform: rotate(-31deg); */
}

.tooltips2 {
width: 140px;
height: 100px;
position: absolute;
top: 207px;
float: right;
z-index: 99999;
left: 312px;
}

.tooltips-2 {
width: 140px;
height: 100px;
position: absolute;
top: 72px;
float: right;
z-index: 99999;
right: 265px;
}

.tooltips3 {
width: 140px;
height: 100px;
position: absolute;
top: 108px;
float: left;
z-index: 99999;
left: 312px;
/* transform: rotate(-29deg); */
}

.tooltips4 {
width: 140px;
height: 100px;
position: absolute;
top: 39px;
float: right;
z-index: 99999;
left: 134px;
transform: rotate(-31deg);
}

.tooltips5 {
width: 140px;
height: 100px;
position: absolute;
top: 505px;
float: right;
z-index: 99999;
left: 178px;
transform: rotate(-31deg);
}

.user_guide_align {
text-align: left;
color: #666;
}

.user_guide_align:hover {
color: #009c69;
}

.fa-book {
font-size: 18px !important;
padding-right: 5px;
color: #009c69;
}

.category-link-lft {
width: 20%;
margin: 0 auto;
}

.fa-video-camera {
font-size: 18px !important;
padding-right: 5px;
color: #009c69;
}

.control-pass {
border: none;
box-shadow: 9px 4px 29px -8px #999;
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #81cdcd) repeat scroll 0 0;
border-radius: 10px;
color: #000;
height: 30px;
width: 40%;
padding: 5px 15px 5px 15px;
margin-top: 10px;
text-align: left;
box-shadow: box-shadow: 9px 12px 30px -8px #ccc;
}

.pass-label {
width: 45%;
padding-left: 35px;
float: left;
text-align: left;
line-height: 40px;
}
/*.rmm {
color: #fff!important;
background:#3c6496;
font-size: 12px;
font-weight: bold;
margin-top: 15px !important;
width: 35%;
margin-bottom: 20px!important;
height: 40px;
line-height: 40px;
cursor: pointer;
text-transform: uppercase;
}
.rmm:hover{
background:#999;
border-radius: 8px;
}*/

.lbl-set {
text-align: center;
width: 50%;
margin: 0 auto;
display: block !important;
}

thead {
background-color: #009c69;
}

td {
background-color: #c8dfdf;
border: 1px solid #fff;
}

.sorting_1 {
background-color: #c8dfdf !important;
color: #0300ff;
width: 200px;
}

.compare-table {
/*width:900px;*/
position: relative;
/*overflow: hidden;*/
border: 1px solid #ddd;
margin-bottom: 30px;
margin: 0 auto;
}

.compare-table tr th {
width: 210px !important;
padding: 10px 0 10px 0;
font-size: 14px;
/*border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;*/
background-color: #009c69;
color: #fff;
text-align: center;
}

.compare-table tr td {
/*border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;*/
text-align: center;
width: 210px;
padding: 5px 5px 5px 5px;
font-size: 14px;
}

.compare-table tr td:first-child {
text-align: center;
padding-left: 10px;
}

.compare-table-expire {
/*width:900px;*/
position: relative;
/*overflow: hidden;*/
border: 1px solid #ddd;
margin-bottom: 30px;
margin: 0 auto;
}

.compare-table-expire tr th {
width: 230px !important;
padding: 10px 0 10px 0;
font-size: 14px;
/*border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;*/
background-color: #FFBABA;
color: #D8000C;
text-align: center;
}

.compare-table-expire tr td {
/*border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;*/
text-align: center;
width: 210px;
padding: 5px 5px 5px 5px;
color: #D8000C;
font-size: 14px;
}

.compare-table-expire tr td:first-child {
text-align: center;
padding-left: 10px;
}

.bigger {
font-size: 24px !important;
text-align: left;
padding-left: 10px !important;
}

.wide-area {
width: 300px !important;
}

.compare-table tr {
overflow-y: scroll;
}

table.scroll {
/* width: 100%; */ /* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
/*border: 2px solid black;*/
}

table.scroll tbody,
table.scroll thead {
display: block;
}

thead tr th {
height: 30px;
line-height: 30px;
/* text-align: left; */
}

table.scroll tbody {
height: 145px;
overflow-y: auto;
overflow-x: hidden;
}

tbody { /*border-top: 2px solid black;*/
}

tbody td, thead th {
/* width: 20%; */ /* Optional */
/*border-right: 1px solid black;*/
/* white-space: nowrap; */
}

tbody td:last-child, thead th:last-child {
border-right: none;
}


.chart-area {
width: 755px;
height: 413px;
margin: 0 auto;
margin-top: 20px;
}

}

.fa-info-circle {
font-size: 17px !important;
}

.main-area {
width: 100%;
}

.gap-part {
height: 20px;
}

.keybrd-txt {
color: #000 !important;
float: right;
text-align: left;
width: 83%;
line-height: 20px;
display: inline;
font-size: 12px;
margin-top: 2px;
}

.keyboard {
color: #000;
width: 10%;
text-align: left;
display: inline;
font-size: 13px;
font-weight: bold;
margin-left: 5px;
}

.big-kaz {
/*width:100%;*/
float: left;
margin-left: 15px;
}

.mini-kaz {
/*width:100%;*/
float: left;
margin-left: 35px;
}

.content-rightmost {
float: right;
text-align: left;
margin-top: 78px;
}

.content-leftmost {
float: left;
}

.big-img {
background: rgba(129,205,205,0.5);
box-shadow: 1px 4px 7px #ccc;
margin: 0px auto 8px;
text-align: center;
line-height: 20px;
color: #000;
margin-bottom: 50px;
height: 68px;
cursor: pointer;
border-radius: 5px;
}

._small {
margin: 20px auto 8px;
}

.big-img h4 {
font-weight: bold;
font-size: 14px;
padding-top: 7px;
}

.big-img p {
font-size: 12px;
padding: 10px;
color: #000;
}

.test-button {
color: #000 !important;
background: rgba(254, 165, 0, 1);
font-size: 12px;
/*font-weight: bold;*/
margin-top: 15px !important;
width: 35%;
margin-bottom: 20px !important;
height: 40px;
line-height: 40px;
cursor: pointer;
text-transform: uppercase;
}

.test-button:hover {
color: #000 !important;
background: rgba(199, 223, 223, 0.9);
}

.uk-img1 {
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #81cdcd) repeat scroll 0 0;
border-radius: 8px;
box-shadow: 1px 4px 7px #ccc;
margin: 25px auto 8px;
text-align: center;
font-size: 26px;
line-height: 20px;
color: #000;
margin-bottom: 50px;
height: 82px;
line-height: 80px;
cursor: pointer;
}

.test-button1 {
color: #000 !important;
background: rgba(254, 165, 0, 1);
font-size: 12px;
/*font-weight: bold;*/
margin-top: 15px !important;
width: 35%;
margin-bottom: 20px !important;
height: 40px;
line-height: 40px;
cursor: pointer;
text-transform: uppercase;
}

.tt {
padding-left: 18px !important;
}

.td {
padding-left: 13px !important;
}

.ts {
padding-left: 7px !important;
}

.modhyper {
color: #fff;
position: absolute;
right: 14%;
bottom: 5px;
background-color: #fe8f02;
width: 70px;
text-align: center;
border-radius: 8px 8px 8px 8px;
}

.modhelp {
width: 75%;
height: 90vh;
}

.tooltip-5 {
width: 140px;
height: 100px;
position: absolute;
top: 289px;
float: left;
z-index: 99999;
right: 263px;
}

.tooltip-2 {
width: 140px;
height: 100px;
position: absolute;
top: 25px;
float: right;
z-index: 99999;
right: 248px;
}

.tooltip-4 {
width: 140px;
height: 100px;
position: absolute;
top: 291px;
float: right;
z-index: 99999;
right: 517px;
}

.tooltip-3 {
width: 140px;
height: 100px;
position: absolute;
top: 291px;
float: right;
z-index: 99999;
left: 148px;
}

.tooltip-1 {
width: 140px;
height: 100px;
position: absolute;
top: 39px;
float: left;
z-index: 99999;
left: 396px;
}

.tooltipe {
width: 140px;
height: 100px;
position: absolute;
top: 25px;
float: left;
z-index: 99999;
left: 155px;
}

.selectcls {
padding: 5px;
margin-top: 5px;
border-radius: 5px;
}
/******course-login******/
.courselog-left {
float: left;
width: 50%;
text-align: left;
}

.blue {
border: 2px solid #009192 !important;
background: #cce9e9 !important;
}

.bluebold {
color: #3c6496;
font-weight: bold;
}

.courselog-box {
width: 75%;
/* margin: 0 auto; */
border: 2px solid #ff9300;
background: #ffe9cb;
height: auto;
padding: 15px;
margin-top: 90px;
margin-bottom: 20px;
float: left;
margin-left: 53px;
height: 270px;
}

.courselog-box p {
font-size: 18px;
color: #000;
line-height: 24px;
text-align: center;
padding-bottom: 20px;
}

.courselog-button {
width: 250px;
border-radius: 25px;
text-align: center;
background: #ff9300;
border: 1px solid #ff9300;
color: #fff;
text-transform: uppercase;
padding: 18px;
font-size: 16px;
margin: 15px 0px 15px 0px;
cursor: pointer;
margin: 0 auto;
margin-top: 8px;
margin-bottom: 18px;
}

.courselog-btmp {
font-size: 15px;
font-style: italic;
color: #000;
line-height: 18px;
text-align: center;
padding-bottom: 5px;
}

.courselog-right {
float: right;
width: 50%;
text-align: center;
}

.course-last {
font-size: 14px;
color: #000;
line-height: 18px;
text-align: left;
margin: 0 auto;
margin-top: 60px;
/* margin: 60px 0px 40px 0px; */
padding-bottom: 20px;
width: 87%;
/* margin-bottom: 60px; */
}
/******course-login******/
.overlayer {
position: absolute;
width: 100%;
height: 100%;
background: #000;
z-index: 999999;
}

.spinner {
z-index: 9;
width: 96px;
height: 96px;
overflow: hidden;
position: fixed;
float: left;
left: 46%;
top: 40%;
}
/***overlay***/
/*.ttaccess {
background: transparent;
position: fixed;
z-index: 10000;
top: 5px;
right: 10px;
opacity: 0.7;
margin-top:5px;
}*/
.list-unstyled {
padding-left: 0;
list-style: none;
}

.img-circle {
border-radius: 50%;
}

.overlay1.red {
background: none;
}
/*.overlay1.green {
background: rgba(0, 204, 101, 0.3);
}
.overlay1.blue {
background: rgba(53, 153, 204, 0.3);
}
.overlay1.yellow {
background: rgba(186, 186, 112, 0.3);
}
.overlay1.purple {
background: rgba(238, 130, 238, 0.3);
}
.overlay1.x {
background: none;
}*/

.overlay1 {
width: 100%;
height: 100%;
pointer-events: none;
content: '';
position: fixed;
top: 0px;
left: 0;
z-index: -1;
opacity: 100;
transform: none;
}

.orange {
color: #e68a00;
}

.navwidth {
width: 82% !important;
}

.middlehdr {
text-align: center;
margin: 0 auto;
margin-bottom: 60px;
}

.middlehdr h3 {
font-size: 22px;
font-weight: bold;
margin-bottom: 15px;
color: #3c6496;
}

.middlehdr p {
color: #3c6496;
font-size: 16px;
text-align: center;
}

.boxx {
width: 194px;
padding: 6px;
text-align: left;
color: #3c6496 !important;
height: 14px;
line-height: 23px;
font-size: 14px;
/*background: #3c6496;*/
border-radius: 14px;
/*margin-left:35px;*/
margin-right: 25px;
}

.selectcls {
padding: 5px;
/*margin-top:5px;*/
border-radius: 5px;
background: #dedede;
}

.bluefont {
color: #3c6496;
font-size: 16px;
}

.leftadmin {
width: 45%;
float: left;
}

.rightadmin {
width: 55%;
float: right;
}

.topnone {
margin-top: 0px !important;
width: 410px;
height: 240px;
}

.toptop {
width: 410px;
height: 240px;
}

#area-5 {
background: #fff none repeat scroll 0 0;
border: none;
font-family: 'Verdana';
font-weight: bold;
font-size: 12px;
line-height: 18px;
height: 215px;
margin-left: 2px;
width: 375px;
color: #3c6496;
padding-left: 16px;
padding-top: 15px;
margin-top: 0px;
/* padding-right: 5px; */
border-radius: 40px;
resize: none;
text-align: left;
padding-right: 7px;
border: 5px solid #1ccece;
background-color: transparent;
}

.bottoms-ms {
font-size: 12px;
color: #7fcdcd;
text-transform: uppercase;
text-align: center;
}

.uk-save {
color: #fff !important;
background: #009193;
font-size: 12px;
/* font-weight: bold; */
margin-top: 15px !important;
margin: 0 auto;
width: 80%;
margin-bottom: 20px !important;
height: 27px;
line-height: 27px;
cursor: pointer;
text-transform: uppercase;
border-radius: 10px;
}

.rleft {
float: left;
width: 50%;
}

.rright {
float: right;
width: 50%;
}

.center-big {
margin: 10px auto;
text-align: center;
width: 80%;
}

.rmm {
color: #fff !important;
background: #3c6496;
font-size: 12px;
/*font-weight: bold;*/
margin-top: 15px !important;
width: 35%;
margin-bottom: 20px !important;
height: 40px;
line-height: 40px;
cursor: pointer;
text-transform: uppercase;
border-radius: 8px;
}

.rmm:hover {
background: #999;
border-radius: 8px;
}

.fullresult {
width: 100%;
margin: 0 auto;
margin-bottom: 40px;
}

.leftresult {
width: 50%;
float: left;
}

.rightresult {
width: 50%;
float: right;
}

.gap-big {
height: 85px;
}

.keyboard-img {
width: 32%;
height: 73px;
/* margin: 0 auto; */
margin-top: 31px;
/* background: url(../images/PastedGraphic-1.png) no-repeat !important; */
margin-right: 18px;
}
/******for scalabalaty******/
#containerr {
position: absolute;
left: 10px;
top: 10px;
right: 0px;
bottom: 10px;
font-family: Arial, sans-serif;
color: #000;
background-color: transparent;
}

.page_content {
background-color: #fff;
width: 1052px;
height: 650px;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left;
/*-webkit-transition: all 500ms ease-in-out !important;*/
/*transition: all 500ms ease-in-out !important;*/
position: absolute;
}

.padding1 {
padding: 14px 25px 14px 20px;
height: 615px !important;
}

.padding2 {
padding: 14px 25px 14px 20px;
height: 690px !important;
}

.padding3 {
margin-top: 12%;
}

.padding5 {
margin-top: 5%;
}

.dyslexicontent {
background: transparent !important;
}

.dyslexicontent h2 {
text-align: center;
}



.righthand .fa-angle-double-right, .lefthand .fa-angle-double-left {
font-size: 26px;
color: #666;
}

.tophead .fa-repeat {
color: #666;
font-size: 20px;
}

.downleg .fa-times-circle-o {
font-size: 20px;
color: #666;
}

.righthand .fa-angle-double-right:hover,
.lefthand .fa-angle-double-left:hover,
.downleg .fa-times-circle-o:hover,
.tophead .fa-repeat:hover {
color: red;
text-shadow: 0 2px 5px rgba(255, 0, 0, 0.6);
}
/***multiplechoice form****/
.registration {
margin: 0 auto;
width: 100%;
margin-top: 10px;
/*display: flex;*/
padding: 30px;
padding-bottom: 10px;
margin-bottom: 20px;
background-color: #f3f4f8;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
}

.registration form {
width: 100%;
}

.form-group {
margin-bottom: 20px;
}

.form-control {
display: block;
width: 100%;
line-height: 1.42857143;
background-color: transparent;
background-image: none;
border: none;
border-bottom: 1px solid #d0d0d0;
border-radius: 0px;
box-shadow: none;
height: 40px;
}

.btn-default {
color: #333;
background-color: #3c6496 !important;
border-color: #3c6496;
color: #fff;
}

.btn-primary {
color: #fff;
background-color: #3c6496;
border-color: #3c6496;
width: 100%;
height: 45px;
font-size: 1rem;
}

.btn-primary:hover {
background: #999;
}

.form-group {
margin-bottom: 2px !important;
}

.imageuploadify .imageuploadify-images-list button.btn-default {
color: #fff !important;
}

.dp_choice::selection, .dp_choice ol::selection, .dp_choice ol li::selection, .dp_choice span::selection {
background-color: transparent;
}

.dp_choice {
margin: 5px 0 15px;
}

.dp_years, .dp_months {
box-shadow: 0 0 1px rgba(0,0,0,.5);
}

.dp_choice li {
float: left;
text-align: center;
font-size: 20px;
background-color: #f7f7f7;
padding: 15px 0;
color: #555;
display: block;
cursor: pointer;
}

.dp_years li, .dp_months li {
width: 33.333333%;
}

.bold {
font-weight: bold !important;
}

.startbtn {
width: 16%;
float: left;
margin-left: 35%;
background: #999;
padding: 14px 0 14px 0px;
text-align: center;
border-radius: 10px;
color: #333;
font-weight: bold;
}

.dp_years li:nth-child(2n+2), .dp_months li:nth-child(2n+2) {
background-color: #dedede;
}

.dp_yearNav {
display: block;
background-color: #666;
color: white;
text-align: center;
height: 15px;
padding: 10px 0;
text-decoration: none;
cursor: pointer;
}

.dp_days {
position: relative;
zoom: 1;
vertical-align: top;
text-align: left;
}

.dp_days table {
width: 100%;
table-layout: fixed;
text-align: center;
border-spacing: 0;
border-collapse: collapse;
font-size: 18px;
}

.dp_days th, .dp_tag:hover {
background-color: #666;
color: #fff;
}

.dp_days th, .dp_days td {
border: 1px solid #dedede;
padding: 10px;
font-weight: normal;
}

.dp_days td {
cursor: pointer;
}

td.dp_current, li.dp_current {
background: #333;
color: #fff;
}

.dp_days th {
pointer-events: none;
}

.dp_empty_day {
background-color: #dedede;
pointer-events: none;
}

.dp_years li:hover, .dp_months li:hover, .dp_days td:hover {
background-color: #999;
color: #fff;
}

.dp_tagBox {
width: 100%;
background: #fff;
border: 1px solid #d0d0d0;
color: #444;
float: left;
font-size: 1.4em;
cursor: text;
margin-bottom: 5px;
padding: 2px 10px 2px 0px;
}

.dp_tagBox input {
border: none;
width: 10%;
background-color: transparent;
font-size: .8em;
}

.dp_tagBox input:focus {
outline: none;
}

.dp_tag {
margin-right: 2%;
padding: 1% 2%;
float: left;
cursor: pointer;
background: #fff;
color: #333;
font-size: 1.1em;
}

.topbtm-margin {
margin: 30px 0px 40px 0px;
}


/**logonbarcode dropdown**/
/*Chosen style*/
.chosen-wrapper {
margin: 0 auto 25px;
/*max-width: 400px;*/
position: relative;
}

.chosen-container {
margin-top: 10px;
}

.chosen-wrapper:after {
pointer-events: none;
content: "";
position: absolute;
top: 55px;
right: 20px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid rgba(0, 0, 0, 0.5);
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 9;
}

.chosen-wrapper.is-active:after {
border-top: 8px solid black;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

.chosen-wrapper .chosen-container .chosen-single {
border-radius: 0;
height: 46px;
/* border: solid 2px #d9d9d9; */
background: #fff;
font-size: 22px;
color: rgba(0, 0, 0, 0.5);
padding: 0 30px;
line-height: 46px;
transition: all 0.3s ease;
/* box-shadow: none; */
/* background: #fff; */
border: none;
box-shadow: 9px 4px 29px -8px #999;
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #81cdcd) repeat scroll 0 0;
border-radius: 10px;
}

.chosen-wrapper .chosen-container .chosen-single b {
display: none !important;
}

.chosen-wrapper .chosen-container .chosen-single span {
letter-spacing: 0;
padding: 0;
line-height: inherit;
}

.chosen-wrapper .chosen-container.chosen-with-drop .chosen-single {
border-width: 2px 2px 1px;
border-color: #87d0d0;
color: #000;
background-image: none;
}

.chosen-wrapper .chosen-container.chosen-with-drop .chosen-drop {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.chosen-wrapper .chosen-container.chosen-container-single-nosearch .chosen-search {
display: none;
}

.chosen-wrapper .chosen-container .chosen-drop {
letter-spacing: 0;
border-radius: 0;
box-shadow: none;
border-width: 0 2px 2px;
border-color: #87d0d0;
margin-top: 0;
-webkit-transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
-o-transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
opacity: 0;
}

.chosen-wrapper .chosen-container .chosen-results {
font-size: 18px;
color: #000;
max-height: 245px;
margin: 0;
padding: 0;
font-family: Verdana;
}

.chosen-wrapper .chosen-container .chosen-results li {
padding: 16px 30px 18px;
margin: 0;
border-bottom: 1px solid #87d0d0;
-webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
-o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
line-height: 20px;
}

.chosen-wrapper .chosen-container .chosen-results li.highlighted {
background-color: #87d0d0 !important;
color: #000;
background-image: none;
}

.chosen-wrapper--style2:after {
right: 0;
}

.chosen-wrapper--style2:before {
content: '';
width: 0;
border-top: 2px solid #000;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
transition: all 0.2s cubic-bezier(0.06, 1, 0.89, 0.85);
}

.chosen-wrapper--style2.is-active:before {
width: 100%;
}

.chosen-wrapper--style2 .chosen-container .chosen-single {
border-width: 0 0 2px;
padding: 0;
}

.chosen-wrapper--style2 .chosen-container.chosen-with-drop .chosen-single {
border-width: 0 0 2px;
}

.chosen-wrapper--style2 .chosen-container.chosen-with-drop .chosen-drop {
opacity: 1;
visibility: visible;
transform: translateY(5px);
}

.chosen-wrapper--style2 .chosen-container .chosen-drop {
border-color: #d9d9d9;
border-top: 2px solid #d9d9d9;
}

.chosen-wrapper--style2 .chosen-container .chosen-results li {
padding: 16px 15px 18px;
}

/*ScrollBox style*/
.nicescroll-rails {
border-left: 1px solid #d9d9d9;
transform: translate(-2px);
top: 0 !important;
}

.nicescroll-rails .nicescroll-cursors {
width: 6px !important;
margin-right: 2px;
}

.link {
position: absolute;
left: 0;
bottom: 0;
padding: 20px;
}

.link a {
display: flex;
align-items: center;
text-decoration: none;
color: #000;
}

.link .fa {
font-size: 28px;
margin-right: 8px;
color: #000;
}
/*CLOCK TIMER*/
#clockdiv {
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}

#clockdiv > div {
padding: 10px;
border-radius: 3px;
background: #7fcdcd;
display: inline-block;
}

#clockdiv div > span {
padding: 15px;
border-radius: 3px;
background: #cadbdb;
display: inline-block;
}

.smalltext {
padding-top: 5px;
font-size: 16px;
}

.timeup {
text-align: center;
font-size: 20px;
margin-top: 0px;
margin-top: 20px;
text-transform: capitalize;
font-weight: bold;
width: 83%;
color: darkred;
}

.topmargin {
margin-top: 20px;
}
/*CLOCK TIMER*/
/***dropdown-animenu****/
.animenu__toggle {
display: none;
cursor: pointer;
/*background-color: #111;*/
border: 0;
padding: 10px;
height: 40px;
width: 40px;
}

.animenu__toggle:hover {
background-color: #3c6496;
}

.animenu__toggle__bar {
display: block;
width: 20px;
height: 2px;
background-color: #fff;
transition: 0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);
}

.animenu__toggle__bar + .animenu__toggle__bar {
margin-top: 4px;
}

.animenu__toggle--active .animenu__toggle__bar {
margin: 0;
position: absolute;
}

.animenu__toggle--active .animenu__toggle__bar:nth-child(1) {
transform: rotate(45deg);
}

.animenu__toggle--active .animenu__toggle__bar:nth-child(2) {
opacity: 0;
}

.animenu__toggle--active .animenu__toggle__bar:nth-child(3) {
transform: rotate(-45deg);
}

.animenu {
display: block;
}

.animenu ul {
padding: 0;
list-style: none;
font: 0px 'Open Sans', Arial, Helvetica;
}

.animenu li, .animenu a {
display: inline-block;
font-size: 15px;
}

.animenu a {
color: #fff;
text-decoration: none;
}

.animenu__nav {
/*background-color: #111;*/
}

.animenu__nav > li {
position: relative;
/*border-right: 1px solid #444444;*/
}

.animenu__nav > li > a {
padding: 10px 30px;
text-transform: uppercase;
}

.animenu__nav > li > a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
border: 4px solid transparent;
border-bottom: 0;
border-top-color: currentColor;
top: 50%;
margin-top: -2px;
right: 0px;
}

.animenu__nav > li > ul.visible{
opacity: 1;
visibility: visible;
margin: 0;
}

.animenu__nav > li:hover > a {
color: #fff;
}

.animenu__nav__child {
min-width: 100%;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
opacity: 0;
visibility: hidden;
margin: 20px 0 0 0;
background-color: #3c6496;
transition: margin .15s, opacity .15s;
}

.animenu__nav__child > li {
width: 100%;
border-bottom: 1px solid #ff9900;
border-top: 1px solid #ff9900;
}

.animenu__nav__child > li:first-child > a:after {
/*content: '';*/
position: absolute;
height: 0;
width: 0;
/* left: 1em; */
top: 10px;
border: 6px solid transparent;
border-top: 0;
border-bottom-color: inherit;
right: 1em;
}

.animenu__nav__child > li:last-child {
border: 0;
}

.animenu__nav__child a {
padding: 10px 10px;
width: 100%;
border-color: #ff9900;
}

.animenu__nav__child a:hover {
background-color: #ccc;
color: #3c6496;
border-color: #3c6496;
color: #fff;
width: 134px;
text-align: center;
}

@media screen and (max-width: 767px) {
.animenu__toggle {
display: inline-block;
}

.animenu__nav,
.animenu__nav__child {
display: none;
}

.animenu__nav {
margin: 10px 0;
}

.animenu__nav > li {
width: 100%;
border-right: 0;
border-bottom: 1px solid #ff9900;
}

.animenu__nav > li:last-child {
border: 0;
}

.animenu__nav > li:first-child > a:after {
content: '';
position: absolute;
height: 0;
width: 0;
left: 1em;
top: -6px;
border: 6px solid transparent;
border-top: 0;
border-bottom-color: inherit;
}

.animenu__nav > li > a {
width: 100%;
padding: 10px 20px;
border-color: #111;
position: relative;
}

.animenu__nav a:hover {
background-color: #3c6496;
border-color: #3c6496;
color: #fff;
}

.animenu__nav__child {
position: static;
background-color: #3c6496;
margin: 0;
transition: none;
visibility: visible;
opacity: 1;
}

.animenu__nav__child > li:first-child > a:after {
content: none;
}

.animenu__nav__child a {
padding-left: 20px;
width: 100%;
}
}

.animenu__nav--open {
display: block !important;
}

.animenu__nav--open .animenu__nav__child {
display: block;
}

.dropzone {
background: white;
border-radius: 5px;
border: 2px dashed rgb(0, 135, 247);
border-image: none;
max-width: 500px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}

.dropzone .dz-preview.dz-error .dz-error-message {
display: none;
}

.ErrorClass {
border: 1px solid !important;
color: red !important;
}

.gotobtn {
background: transparent;
color: #fff;
margin: 0 auto;
padding: 10px;
cursor: pointer;
}

.orange-bg {
background: #ff9900;
color: #fff !important;
font-size: 12px;
/* font-weight: bold; */
margin-top: 15px !important;
width: 35%;
margin-bottom: 20px !important;
height: 40px;
line-height: 40px;
cursor: pointer;
text-transform: uppercase;
border-radius: 8px;
}

.orange-bg:hover {
background: #999;
}

.mdl-area2{width:100%;}

.mdl-area2 .image_sec{margin:0; width:40%; display:inline-block}

.mdl-area2 .bullet_sec{margin:0; width: 50%;display: inline-block;vertical-align: top;}
.mdl-area2 .bullet_sec .bullet-area {margin-top:40px}

.mdl-area2 .bullet_sec ul li {
    margin-bottom: 10px;
}
.mdl-area2 .bullet_sec ul li p{display:flex}
.mdl-area2 .bullet_sec .normal-font span {font-size: 30px !important;line-height:1px !important;display: inline-block; vertical-align: top; margin-right:7px}


/* ---------Navigation Focus----- */
.using-steps ul li {outline: none;}   
.using-steps ul li:hover, .using-steps ul li:focus {
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #1ccece) repeat scroll 0 0; 
}

.category-link ul li {outline: none;}  
.category-link ul li:hover .fly-bar, .category-link ul li:focus .fly-bar {
background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #1ccece) repeat scroll 0 0; 
}
.basic-stage ul li {outline: none;} 
.basic-stage ul li:hover .kaz-dancing, .basic-stage ul li:focus .kaz-dancing,
.basic-stage ul li:hover .Rude-dance, .basic-stage ul li:focus .Rude-dance,
.basic-stage ul li:hover .slap-now, .basic-stage ul li:focus .slap-now,
.basic-stage ul li:hover .big-test, .basic-stage ul li:focus .big-test,
.basic-stage ul li:hover .quiz, .basic-stage ul li:focus .quiz,
.basic-stage ul li:hover .baggy-hat, .basic-stage ul li:focus .baggy-hat {
    transform: scale(1.4);
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
} 
.basic-stage ul li:hover .kaz-bg, .basic-stage ul li:focus .kaz-bg {
    background-color: #ffcc00;
    box-shadow: 8px 6px 15px #aaa inset;
}
.speed-left span:hover a,.speed-left span:focus a {
    background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #1ccece) repeat scroll 0 0; 
}

.basic-stage .selection_area_region{outline: none;} 
.basic-stage .selection_area_region:hover .uk-img,.basic-stage .selection_area_region:focus .uk-img{
    background: rgba(0, 0, 0, 0) linear-gradient(-90deg, #fff, #1ccece) repeat scroll 0 0; 
}

.category-link-lft .selection_area_guide{outline: none;} 
.category-link-lft .selection_area_guide:hover a,.category-link-lft .selection_area_guide:focus a{
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.selection_area_result {outline: none;}
.selection_area_result:focus button{
    text-decoration: underline;
    text-decoration-thickness: 2px;
}
.selection_area_result:focus .result_btn{
    background-color: #009c69;
    color: #fff;
}

.selection_area_settings {
    outline: none;
    width: 50%;
    margin: 0 10px;
}
.selection_area_settings a {
    width: 100%;
}
.selection_area_settings:focus a {
    background: #999;
}

.selection_area_speed_builder_confirm {outline: none;}
.selection_area_speed_builder_confirm:hover a div, 
.selection_area_speed_builder_confirm:focus a div{
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.selection_area_bigtest_last:hover div,.selection_area_bigtest_last:focus div{
    text-decoration: underline;
}
/* ---------Navigation Focus END----- */

*:focus {
  outline: none;
}