/*
Author: Sayeem Mohammad Shahria
Version: 1.0
*/
/* Base CSS */
.alignleft {
    float: left;
    margin-right: 15px;
}
.alignright {
    float: right;
    margin-left: 15px;
}
.aligncenter {
    display: block;
    margin: 0 auto 15px;
}
a:focus {
  outline: 0 transparent;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
img {
    max-width: 100%;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    font-weight: 700;
}
html, body { height: 100%; }

a:hover { text-decoration: none; }

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

/* css starts here */
/*fonts*/
@import url('https://fonts.googleapis.com/css?family=Roboto');
@font-face{
    font-family:"sutonnymj";
    src: url('../fonts/SUTOM___.ttf'),
}
body,h1,h2,h3,h4,h5,h6,p,a,span {
    font-family: 'Roboto', sans-serif;
}
/*ADDED BY MANIK*/
@font-face {
  font-family: 'SolaimanLipi';
  src: url('../fonts/SolaimanLipi.eot');
  src: url('../fonts/SolaimanLipi.woff') format('woff'),
       url('../fonts/SolaimanLipi.ttf') format('truetype'),
       url('../fonts/SolaimanLipi.svg#SolaimanLipiNormal') format('svg'),
       url('../fonts/SolaimanLipi.eot?#iefix') format('embedded-opentype');
      font-weight: normal;
      font-style: normal;
}
/*
-webkit-font-smoothing:antialiased; 
font-smoothing:antialiased; 
text-rendering:optimizeLegibility;
*/

/*
body {
    background: url("images/body-bg-big.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
*/
/*animations*/
@keyframes topToBottom {
    0% {
        opacity: 0;
        transform: translate(0px,-200px)
    }

    60% {
        opacity: 1;
        transform: translate(0px,30px)
    }

    80% {
        transform: translate(0px,-10px)
    }

    100% {
        opacity: 1;
        transform: translate(0px,0px)
    }
}
@-webkit-keyframes topToBottom {
    0% {
        opacity: 0;
        -webkit-transform: translate(0px,-200px)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate(0px,30px)
    }

    80% {
        -webkit-transform: translate(0px,-10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translate(0px,0px)
    }
}
@-ms-keyframes topToBottom {
    0% {
        opacity: 0;
        -ms-transform: translate(0px,-200px)
    }

    60% {
        opacity: 1;
        -ms-transform: translate(0px,30px)
    }

    80% {
        -ms-transform: translate(0px,-10px)
    }

    100% {
        opacity: 1;
        -ms-transform: translate(0px,0px)
    }
}
@keyframes leftToRight {
    0% {
        opacity: 0;
        transform: translate(-1500px,0px)
    }

    60% {
        opacity: 1;
        transform: translate(30px,0px)
    }

    80% {
        transform: translate(-10px,0px)
    }

    100% {
        opacity: 1;
        transform: translate(0px,0px)
    }
}

@-webkit-keyframes leftToRight {
    0% {
        opacity: 0;
        -webkit-transform: translate(-1500px,0px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate(30px,0px)
    }

    80% {
        -webkit-transform: translate(-10px,0px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translate(0px,0px)
    }
}

@-ms-keyframes leftToRight {
    0% {
        opacity: 0;
        -ms-transform: translate(-1500px,0px)
    }

    60% {
        opacity: 1;
        -ms-transform: translate(30px,0px)
    }
    80% {
        -ms-transform: translate(-10px,0px)
    }

    100% {
        opacity: 1;
        -ms-transform: translate(0px,0px)
    }
}
/*end of animations*/
body {
    background: url("../images/pat3.png");
    background-repeat: repeat;
}
.top-menu li {
    list-style: none outside none;
}
.header {
    background-color: #114e0b;
}
.top-menu {
    float: right;
}

ul.top-menu li {
    display: inline-block;
    padding: 0 8px;
    margin-top: 8px;
    position: relative;
}
ul.top-menu li a {
    color: #fff;
    font-size: 16px;
}
ul.top-menu li a:hover, ul.top-menu li a:active, ul.top-menu li a:visited, ul.top-menu li a:focus  {
    text-decoration:none;
}
.header {
    padding: 10px 0;
}
.language {
  margin-top: 9px;
    position: relative;
    z-index: 1;
}
.language > a {
    background: none repeat scroll 0 0 #d4e7d3;
    font-size: 14px;
    font-weight: 400;
    padding: 4px 7px;
    color: #193417;
}
ul.nav.navbar-nav {
  background: rgba(6, 120, 4, 0.85);
}
.mainmenu .nav.navbar-nav a {
  color: #fff;
  font-size: 12px;
  position: relative;
  text-align: left;
}
.nav.navbar-nav > li {
    width: 100%;
    max-width: 100%;
}
.nav.navbar-nav > li:after {
  background: none repeat scroll 0 0 #fff;
  content: "";
  height: 1px;
  left: 5%;
  position: absolute;
  width: 90%;
  z-index: 1;
}
.nav.navbar-nav > li:before {
  background: transparent;
  content: "\f0a8";
  left: 90%;
  top: 30%;
  position: absolute;
  z-index: 1;
    font-family: fontawesome;
    color: #fff;
    transition: .4s;
}
.nav.navbar-nav > li:hover:before, .nav.navbar-nav > li:active:before, .nav.navbar-nav > li:focus:before, .nav.navbar-nav > li.active:before {
  content: "\f0a9";
    transition: .4s;
}
.mainmenu .nav.navbar-nav > li:hover, .mainmenu .nav.navbar-nav > li.active, .mainmenu .nav.navbar-nav > li:focus, .mainmenu .nav.navbar-nav > li:active {
	background: #ffb50a;
}
.nav.navbar-nav a:hover, .nav.navbar-nav a:focus, .nav.navbar-nav a:active {
/*  background-color: #11500C;*/
    background: transparent;
  color: #fff;
}
.mainmenu ul.nav.navbar-nav li a {
  width: 80%;
  max-width: 80%;
}

.breadcrumb ul {
    list-style: none outside none;
}
.breadcrumb ul li {
    display: inline-block;
    padding: 0 8px;
}
.breadcrumb {
  background-color: #fff;
  font-size: 12px;
  margin-top: 8px;
  margin-bottom: 5px;
}
.breadcrumb ul li:after {
    background: none repeat scroll 0 0 transparent;
    content: ">";
    padding-left: 5px;
    position: absolute;
}
.bradcrumb-area > li:last-child:after {
    display: none;
}

ul.bradcrumb-area > li i.fa-home {
    padding-right: 4px;
}

.main-content-box-top-portion h2 {
    color: #f5ab00;
    position: relative;
    text-transform: uppercase;
    padding-left: 25px;
}
.main-content-box-top-portion h2::after {
	content: "\f1c0";
	font-family: fontawesome;
	left: -10px;
	position: absolute;
	top: 0;
}
/*
.dnld-button {
  background-color: #ffb50a;
  border: 1px solid #ffb50a;
  border-radius: 8px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
  color: #000;
  display: block;
  float: left;
  font-size: 14px;
  font-weight: bold;
  margin-right: 1%;
  max-width: 48%;
  padding: 6px 20px;
  width: 50%;
    text-align: center;
}
*/
.dnld-button {
	background-color: #ffb50a;
	border: 1px solid #ffb50a;
	border-radius: 8px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
	color: #000;
	display: block;
	float: left;
	font-size: 10px;
	font-weight: bold;
	margin-right: 1%;
	max-width: 48%;
	padding: 6px 8px;
	width: 50%;
	text-align: center;
}
.dnld-button i.fa-download{
    float: right;
    text-align: right;
    margin-top: 4px;
}

.large-button {
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #27a84d;
  border-radius: 12px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  color: #27a84d;
  float: left;
  margin: 6px 3px;
  max-width: 19.2%;
  padding: 4px 3px;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 19.2%;
}
/*heading with icon*/
.withiconheading1 {
  border: 2px solid orange;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 7px 7px 3px 35px;
  cursor: default;
    perspective: 1000px;
}
.withiconheading1 p {
  margin-bottom: 0;
}
.withiconheading1::after {
  content: url("../images/icon2.png");
  left: -25px;
  position: absolute;
  top: 3px;
  transition: 1s;
}
.withiconheading1:hover::after{
    transition: 1s;
    transform: rotateY(180deg);
    transform-origin: bottom left;
    left: 25px;
    transform-style: preserve-3d;
    
}
.grayscaled{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}
/*be-ni-a-so-ho-ko-la*/
.bg-gray{
    background-color: #e8e8e8;
}
.text-white{
    color: #f5f5f5;
}
.text-be{
    color: #BA4AD0;
}
.bg-be{
    background-color: #BA4AD0;
}
.text-ni{
    color: #3773A9;
}
.bg-ni{
    background-color: #3773A9;
}
.text-a{
    color: #4C9FE1;
}
.bg-a{
    background-color: #4C9FE1;
}
.text-green{
    color: #27A84D;
}
.bg-green{
    background-color: #27A84D;
}
.text-yellow{
   color: #F7B61C; 
}
.bg-yellow{
    background-color: #F7B61C;
}
.text-ko{
    color: #FF9000;
}
.bg-ko{
    background-color: #FF9000;
}
.text-la{
    color: #DC5276;
}
.bg-la{
    background-color: #DC5276;
}
.text-ly{
    color: #B9AD00;
}
.bg-ly{
    background-color: #B9AD00;
}
.text-sc{
    color: #7C8123;
}
.bg-sc{
    background-color: #7C8123;
}
.text-sc2{
    color: #B57C2B;
}
.bg-sc2{
    background-color: #B57C2B;
}
.showhover, .reveal-wrapper-shuni object, .reveal-wrapper-shuni.revealed img {
    display: none;
}
.reveal-wrapper-shuni.revealed object {
    display: block;
}
.large-button:hover, .large-button:active, .large-button:focus, .large-button.active {
  background: none repeat scroll 0 0 #27a84d;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5) inset;
  color: #fff;
    transition: .3s;
    text-decoration: none;
}
.large-button:hover .large-button-text, .large-button:active .large-button-text, .large-button:focus .large-button-text, .large-button.active .large-button-text {
    color: #fff;
}
.large-button:hover .hidehover, .large-button:active .hidehover, .large-button:focus .hidehover, .large-button.active .hidehover {
    display: none;
}
.large-button:hover .showhover, .large-button:active .showhover, .large-button:focus .showhover, .large-button.active .showhover {
    display: inline-block;
    margin: 0 auto;
}
.large-button-text {
  font-size: 12px;
    color: #000;
    font-weight: bold;
}
.large-button:hover > .large-button-text {
    color: #fff;
}

.status-container {
    background: #27A84D;
    color: #fff;
    margin: 10px 0;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.33);
}
.dropshadowtext{
    text-shadow: 0px 4px 2px rgba(0,0,0,.2);
}
.status-container h2 {
  font-size: 18px;
  padding: 5px 0 5px 20px;
  text-shadow: 0px 4px 2px rgba(0,0,0,.2);
}
.special-container {
    width: 100%;
    margin: 0 -15px;
    padding-left: -15px;
    padding-right: -15px;
}
/*
.navbar-collapse.collapse {
  background-color: rgba(6, 120, 4, 0.85);
}
*/
.navbar-collapse.special-nav {
  padding: 0px;
}

.main-content-box {
    background: none repeat scroll 0 0 #fff;
    padding: 10px 0 100px;
}

.main-content-box {
    background: none repeat scroll 0 0 #fff;
    padding: 10px 0 100px;
}
.read-more-button {
    margin-top: 10px;
    padding-bottom: 40px;
}
.read-more-button .dnld-button {
  font-size: 12px;
  padding: 5px 8px;
  width: 100%;
  display: block;
  max-width: 100%;
}

.progress-section {
    background: none repeat scroll 0 0 #fff;
    margin-top: 10px;
    padding: 10px 8px;
}
.paragraph-accordion h5.mb-0 {
    background: none repeat scroll 0 0 #27a84d;
    text-align: center;
    margin-bottom: 0px;
    padding: 12px 0px;
    border-bottom: 1px solid #eee;
    transition: .2s
}
h4.progress-text {
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid #000000;
    padding-bottom: 3px;
    text-transform: uppercase;
}
.special-accordion-button {
    color: #fff;
    font-size: 13px;
    transition: .2s
}
.paragraph-accordion h5.mb-0:hover, .paragraph-accordion h5.mb-0:active, .paragraph-accordion h5.mb-0:focus {
    background: #FFB50A;
    transition: .2s
}
.paragraph-accordion h5.mb-0:hover a.special-accordion-button {
    color: #000;
    transition: .2s;
    position: relative;
      
}
a.special-accordion-button:hover, a.special-accordion-button:active, a.special-accordion-button:focus {
    text-decoration: none;
    color: #000;
    transition: .2s
}
.paragraph-accordion h5.mb-0:hover a.special-accordion-button:after, .paragraph-accordion h5.mb-0:active a.special-accordion-button:after, .paragraph-accordion h5.mb-0:focus a.special-accordion-button:after, a.special-accordion-button.collapsed:after {
    content: "\f01a";
    position: absolute;
    background: transparent;
    z-index: 1;
    font-family: fontawesome;
    left: 100%;
    top: 0;
    
}

.card-block {
    background: none repeat scroll 0 0 #fff;
    padding: 10px 7px;
    text-align: center;
    border-left: 2px solid #27a84d;
    border-right: 2px solid #27a84d;
    margin-top: -1px;
}

ul.bradcrumb-area {
    margin-bottom: 0;
    margin-left: 0;
    padding-left: 0;
}
.main-content-tabs .nav.nav-tabs {
    margin: 0 15px;
}
.main-content-tabs ul.nav li a {
    font-size: 14px;
    padding: 5px 20px;
    margin: 0px;
    transition: .3s;
}

.main-content-tabs ul.nav li a:hover {
     background: #FFB50A;
    margin: 0px;
    transition: .3s;
}

/* old, dated 13-8-17
.tab-content .tab-pane {
    background: none repeat scroll 0 0 #f5f5f5;
    margin: 0 15px;
    padding: 30px 10px;
}
*/
.tab-content .tab-pane {
  background: #fff none repeat scroll 0 0;
  margin: 0 5px;
  padding: 30px 5px;
}
.main-content-tabs ul.nav li {
    border: 1px solid #49B566;
    margin-right: 1px;
}
.main-content-tabs ul.nav li a {
    color: #000;
}
.main-content-tabs ul.nav li.active {
    border-bottom: none;
}
.main-content-tabs ul.nav li.active a {
  background: #ffb50a none repeat scroll 0 0;
  border-bottom: 2px solid #FFB50A;
  border-radius: 0;
  margin: 0;
  color: #fff;
}

.progress-percent {
    padding: 18px 0;
}
.progress-percent img {
    display: block;
    margin: 0 auto;
    text-align: center;
}
a.dnld-button:hover, a.dnld-button:focus, a.dnld-button:active {
    text-decoration: none;
    color: #fff;
    transition: .2s;
}
.main-content-box-top-portion h2 {
    font-size: 20px;
}
.main-content-box-top-portion {
  padding-bottom: 55px;
}
.mainmenu .special-nav .navbar-nav > li > a {
  padding-bottom: 5px;
  padding-top: 5px;
}
.mainmenu .special-nav .navbar-nav > li > a {
  line-height: 14px;
  padding-bottom: 10px;
  padding-top: 10px;
}
.top-menu, .gol-kori, .gol-kori2, .matchNumber {
    cursor: pointer;
}
.gol-kori {
    position: relative;
    z-index: 2;
}
.gol-kori > svg, .gol-kori2 > svg {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.header-menu {
    position: relative;
    z-index: 2;
}
#progress {
  width: 150px;
  height: 150px;
  position: relative;
  background: #EBE200;
  border-radius: 50%;
    display: block;
    margin: 0 auto;
}
html{
    height: auto;
}
body{
    min-height: 100%;
}
.book-content {
    border-bottom: 1px solid #27a84d;
    border-left: 1px solid #27a84d;
    border-right: 1px solid #27a84d;
    margin-top: -15px;
}
.content-bangla {
  font-family: sutonnymj;
  font-size: 16px;
}
.content-bangla-sutonny {
  font-family: sutonnymj;
  font-size: 16px;
}
.book-content {
  padding: 10px;
}
.book-content > img.cover-photo {
  margin-bottom: 20px;
}
.tick-ques {
  padding-left: 15px;
  margin-top: 10px;
  color: #000;
}
.form-check.for-tic {
    padding-left: 25px;
    font-size: 13px;
}
@-webkit-keyframes sayeems {
    0% {left: 40%; opacity: 0;}
    100% {left: 2px; opacity: 1;}
}
@keyframes sayeems {
    0% {left: 40%; opacity: 0;}
    100% {left: 2px; opacity: 1;}
}
.answered .hideme {
    z-index: 111;
    animation: sayeems .3s normal forwards ease-in-out;
}
.hideme {
    position: relative;
    z-index: -111;
    opacity: 0;
}
.main-content-box-top-portion {
  padding-bottom: 15px;
}
.jumble-input-group {
    padding-left: 25px;
}
.jumble-input-group .input-group-addon{
    font-size: 12px;
}
.input-group .form-control.jumble-input{
    width: 70%;
    height: 26px;
}
.correct-answer.ques-wrapper, .fill-blanks {
    margin-top: 5px;
    padding-left: 25px;
}
.btn-to-reveal-ans {
    border-radius: 4px 0 0 4px;
    font-size: 12px;
    line-height: 12px;
    padding: 6px 12px;
}
.reveal-wrapper {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: #fff none repeat scroll 0 0;
  border-color: #ccc #ccc #ccc -moz-use-text-color;
  border-image: none;
  border-style: solid solid solid none;
  border-width: 1px 1px 1px medium;
  font-size: 12px;
  height: 26px;
  line-height: 12px;
  margin-left: -4px;
  overflow: hidden;
  padding: 5px 12px;
  position: relative;
  border-radius: 0px 4px 4px 0px;
    opacity: 0;
    left: 30%;
}
.revealed .reveal-wrapper{
    opacity: 1;
    left: 0;
    top: 1px;
    transition: .3s;
    font-weight: bold;
}
body.math_en .revealed .reveal-wrapper {
    opacity: 1;
    left: 0;
    top: 4px;
    transition: .3s;
    font-weight: bold;
    font-size: 20px;
}
.revealed .reveal-wrapper-small {
  opacity: 1;
  left: 5%;
  top: 20%;
    transition: .5s;
}
.reveal-wrapper-small{
    position: relative;
    opacity: 0;
    top: -10%;
    transition: .5s;
}

#blanks input {
  border: none;
  border-bottom: 1px solid #000;
  background: #f5f5f5;
}
.blank-underline {
    text-decoration: underline;
}
.text-bold {
    font-weight: bold;
}
.special-nav ul li:first-child {
  border-top: 1px solid #fff;
}

.for-border {
  border-color: transparent #27a84d #27a84d #27a84d;
  border-image: none;
  border-style: none solid solid;
  border-width: medium 1px 1px;
  margin-top: -15px;
  padding-top: 15px;
}
 /* code for animated blinking cursor */
.typed-cursor{
    opacity: 1;
    font-weight: 100;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    -ms-animation: blink 0.7s infinite;
    -o-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-ms-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-o-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
/*end of cursor blinking*/
.read-button {
  margin-bottom: 25px;
}
.with-line-bg {
  background-image: url(../images/line-2.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
/*  padding: 110px 0px;*/
    min-height: 400px;
}
.read-button.in-paragraph {
  left: 4px;
  position: absolute;
  top: 44%;
}
.in-paragraph .btn.btn-primary {
  border-radius: 50%;
    padding: 8px 20px;
}
.stay-put-paragraph {
    padding: 75px 60px 20px 115px;
}
.large-alphabet {
  font-size: 90px;
  vertical-align: middle;
}
.btn-xs.play-button {
  display: block;
  margin: 0 auto;
}
.lns-image {
  max-width: 70px;
  vertical-align: middle;
  display: block;
  margin: 0 auto;
  transition: .5s;
}
.lns-image-container {
  height: auto;
  min-height: 108px;
  transition: .5s;
}
.lns-grow:hover .lns-image-container, .growme:hover img{
  transform: scale(1.2);
    transition: .5s;
}
.l-n-s span {
    color: #cb0100;
}
.l-n-s {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}
.fancybox-slider .fancybox-content {
    max-width: 1920px;
    max-height: 1080px !important;
    width: 80% !important;
    height: 80% !important;
}
.cl1-srtw .large-alphabet {
  font-size: 50px;
    float: left;
    width: 75%;
}
.book-content.listen-an-say {
  padding: 60px 0px;
}
.listen-an-say .play-button {
    background: #8c120f none repeat scroll 0 0;
    border: 1px solid #8c120f;
}
.listen-an-say {
     /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+49,feecdd+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 49%, #feecdd 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 49%,#feecdd 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 49%,#feecdd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#feecdd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.cl1-srtw, .parts {
  overflow: hidden;
}
.cl1-srtw .btn-to-reveal-ans {
  margin-top: 10%;
  border-radius: 4px;
}
.srtw-revealme {
  height: 0;
  left: 10%;
  position: relative;
  top: -80%;
  width: 0;
    transition: .5s;
    opacity: 0;
}
.revealed .srtw-revealme {
    top: 10px;
    opacity: 1;
    transition: .5s;
}
.bangla-font {
    font-family: SolaimanLipi;
}
.c1swf{
    width: 100%;
    height: 400px;
}

.btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary, .btn-primary.focus, .btn-primary:focus, .btn-primary:hover, .btn-primary {
  background-color: #27A84D;
  border-color: #27A84D;
}
.btn-primary{
    box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.4);
    text-shadow: 0 3px 1px rgba(0, 0, 0, 0.3);
    -webkit-transition: all 200ms;
    transition: all 200ms;
}
.btn-primary:hover{
    box-shadow: 0 13px 8px -7px rgba(0, 0, 0, 0.4)
  -webkit-transform: scale(1.03);
    transform: scale(1.03);
}
.reveal-wrapper-shuni img, .reveal-wrapper-shuni object {
    margin: 20px auto;
}

.conv-subject {
    display: inline-block;
    max-width: 30%;
    vertical-align: top;
}
.conv-comment {
    display: inline-block;
    max-width: 70%;
    padding-left: 20px;
}
.poem, .caption {
  text-align: center;
  margin: 20px auto;
}
.caption .title {
    color: #008837;
}
.parts{
    position: relative;
}
.main-frame-container{
    width: 100%;
    transition: .3s;
}

.revealed .main-frame-container {
    width: 70%;
}
.sidenote-container {
  background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
  width: 0;
    height: 100%;
  overflow-x: hidden;
    overflow-y: hidden;
  position: absolute;
  right: 0;
  top: 5%;
    transition: .3s;
    z-index: -100;
}
.revealed .sidenote-container {
    width: 30%;
    height: 100%;
    opacity: 1;
    transition: .3s;
    overflow-y: visible;
    z-index: 100;
}
.sidenote-content {
    padding: 15px 8px;
}
.chapter-cover {
  display: block;
  margin: 5px auto;
}
.topic-link {
  display: block;
  margin-left: 8%;
  padding: 2px 0px;
  border-top: 1px solid #fff;
  padding-left: 5px;
}
.sidenote-container {
  background: rgba(39, 168, 77, 0.2) none repeat scroll 0 0;
  border-left: 1px solid #27a84d;
  border-radius: 20px 0 0;
  border-top: 1px solid #27a84d;
  height: 100%;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 5%;
  transition: all 0.3s ease 0s;
  width: 0;
  z-index: -100;
}

.okkhor {
  border: 1px solid #bbb;
  float: left;
  margin: 0 auto;
  max-width: 25%;
  min-height: 100px;
  min-width: 25%;
  text-align: center;
}
.okkhor > img {
  cursor: move;
  max-width: 90px;
  max-height: 90px;
}
.place-okkhor {
  border: 1px dashed #27a84d;
  max-height: 100px;
  max-width: 14.2%;
  min-height: 100px;
  min-width: 14%;
  float: left;
    margin: 0 auto;
  overflow: hidden;
}
.w-border-d {
  border: 1px dashed #bbb;
}
.w-border {
  border: 1px solid #27A84D;
}
.one,.two {
  width: 100%;
  overflow: hidden;
  margin: 0px auto;
}
.min-h-w {
  min-height: 103px;
  min-width: 24%;
}
.draghere.w-border > img, .w-border-d > img {
  max-width: 90px;
  margin: 0 auto;
  display: block;
}
.dragme {
  cursor: move;
}
.growme img{
    transition: .5s;
}
.growthis{
    transition: .5s;
}
.growchild:hover .growthis{
    transform: scale(1.3);
    transition: .5s;
}
.mybox {
  border: 2px dashed #27a84d;
  max-width: 100px;
  min-height: 100px;
  transition: all 1s ease 0s;
  margin: 0 auto;
}
.mybox.myborder {
    border: 2px solid #27A84D;
    transition: 3s;
}
.mybox2 {
  border: 2px dashed #27a84d;
  min-width: 100px;
  min-height: 100px;
  transition: all 1s ease 0s;
  margin: 0 auto;
}
.mybox2.myborder {
    border: 2px solid #27A84D;
    transition: 3s;
}
.hidden-content {
  text-align: center;
  font-size: 0px;
  opacity: 0;
    transition: .5s;
}
.revealed h2{
    opacity: 1;
  font-size: 74px;
    transition: .5s;
}
#correct, #incorrect {
  background-color: rgba(255, 181, 10, 0.9);
  border: 2px solid #ffb50a;
  border-radius: 50%;
  height: 200px;
  left: 42%;
  position: fixed;
  top: 20%;
  width: 200px;
  z-index: 1000;
}
.top-sign .fa {
  border-bottom: 4px solid #27a84d;
  color: #27a84d;
  display: block;
  font-size: 70px;
  margin: 0 auto;
  padding-bottom: 8px;
  text-align: center;
  text-shadow: 0 4px 2px rgba(0, 0, 0, 0.2);
}
.bottom-text p {
  color: #fff;
  font-size: 30px;
  margin-top: 20px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 4px 2px rgba(0, 0, 0, 0.2);
}
#incorrect > .top-sign .fa{
    color: red;
    border-bottom: 2px solid red;
}
span.large-button-text {
  padding-top: 5px;
  display: block;
}
.parthokko-image img {
  display: block;
  margin: 0 auto;
  max-height: 135px;
  max-width: 200px;
  text-align: center;
}
.rabbit, .turtle {
  min-width: 97px;
}
.rabbit:hover, .turtle:hover {
  cursor: pointer;
}
.round-pointer-left, .round-pointer-right {
  border: 1px solid #bbb;
  border-radius: 50%;
  height: 10px;
  position: absolute;
  top: 40%;
  width: 10px;
}
.round-pointer-right {
  left: 100%;
}
.round-pointer-left {
  right: 100%;
}
.answer-container {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
}
.answer-container:hover {
  background-color: #fff;
  transition: .4s;
}
.fullformobile {
  margin-top: 15px;
}
/*
.add-bg {
  background-color: rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
}
*/
.add-bg::after {
    animation: topToBottom .2s;
	position: absolute;
	background: transparent;
	content: "";
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	border-radius: 5px;
	border: 2px solid #00bdfb;
	transition: border-color 0s ease-out .5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
.answer-container img {
  display: block;
  margin: 0 auto;
  max-width: 25%;
}
.answer-container.flimg img{
  max-width: 100%;
    max-height: 70px;
}
.rabbit, .turtle {
  margin-top: 340%;
}
.daag {
  font-size: 60px;
  font-weight: bold;
  color: #27A84D;
}
.sonkha-bangla{
  font-size: 70px;
  margin-top: 10px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}
.sonkha-bangla:hover {
  transform: scale(1.2);
  transition: all 0.3s ease 0s;
}
.image-button {
  border: 1px dotted #27a84d;
  cursor: pointer;
}
.gonona-daag{
    font-size:40px;
    font-weight:bold;
    color:#27A84D;
  cursor: pointer;
}
.gonona-number {
  font-size: 70px;
  transition: .3s;
    margin-bottom: 0px;
}
.gonona-number:hover {
  cursor: pointer;
  transform: scale(1.2);
    color:#27A84D;
  transition: .3s;
}
.hasaudio{
    cursor: pointer;
}
.ticsigngreenonhover:hover {
    cursor: url(../images/green_tic.png), auto;
}
.ticsignwhiteonhover:hover {
    cursor: url(../images/white_tic.png), auto;
}
h2.hidden-content {
  margin-bottom: 0px;
}
.dag-container {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #27a84d;
  border-radius: 10px;
  color: #27a84d;
  letter-spacing: 10px;
  padding: 20px 10px;
}
.dag-container span {
  font-size: 40px;
  cursor: pointer;
}
.hidden-button {
  min-height: 50%;
    min-width: 10%;
  position: absolute;
  top: 0;
  cursor: pointer;
}
#stickme.scrollfix {
  max-width: 18%;
  position: fixed;
  right: 23%;
  top: 10px;
  z-index: 100000;
  transition: .3s;
}
/*
#stickme.scrollfix {
  position: absolute;
  right: 3%;
  z-index: 1000;
  transition: .3s;
}*/
.spcl-6 {
  margin: 0 1%;
  width: 48%;
}
/*
.mainmenu{
    overflow-y: scroll;
}
*/
.ticsign::after {
  color: #F5F5F5;
  content: "\f00c";
  font-family: fontawesome;
  font-size: 30px;
  text-shadow: 0px 4px 2px rgba(0,0,0,.2);
  height: 100%;
  left: 35%;
  position: absolute;
  top: 0;
  transition: all 0.3s ease 0s;
  width: 100%;
  z-index: 111;
}
.crosssign::after {
  color: #FFB50A;
  content: "\f00d";
  font-family: fontawesome;
  font-size: 30px;
  text-shadow: 0px 4px 2px rgba(0,0,0,.2);
  height: 100%;
  left: 35%;
  position: absolute;
  top: 0;
  transition: all 0.3s ease 0s;
  width: 100%;
  z-index: 111;
}

.khuji-button {
  background: #27a84d none repeat scroll 0 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2);
  color: #f5f5f5;
  cursor: pointer;
  font-size: 40px;
  font-weight: bold;
  padding: 18px;
  text-shadow: 0 4px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease 0s;
}
.khuji-button:hover{
  transform: scale(1.05);
  transition: all 0.2s ease 0s;
}
.clicked {
  box-shadow: 0px 0px 20px 10px rgba(235,226,0,1) inset;
  border: 1px solid rgba(235,226,1);
  transition: .3s;
}
.orange-shadow{
  box-shadow: 0px 0px 20px 10px rgba(255,181,10,1) inset;
  border: 1px solid rgba(255,181,10,1);
  transition: .3s;
}
.khuji-button.orange-shadow:hover{
    transform: none;
}
.plus-sign::after {
  color: #27a84d;
  content: "\f067";
  font-family: fontAwesome;
  font-size: 20px;
  left: 50%;
  position: absolute;
  top: 37%;
  width: 100%;
  z-index: 111;
}
.plus-sign-card::after {
  color: #27a84d;
  content: "\f067";
  font-family: fontAwesome;
  font-size: 30px;
  left: 90%;
  position: absolute;
  top: 37%;
  width: 100%;
  z-index: 111;
}
.minus-sign-card::after {
  color: #27a84d;
  content: "\f068";
  font-family: fontAwesome;
  font-size: 30px;
  left: 90%;
  position: absolute;
  top: 37%;
  width: 100%;
  z-index: 111;
}
.equal-sign-card::after {
  color: #27a84d;
  content: "=";
  font-size: 30px;
  left: 92%;
  position: absolute;
  top: 37%;
  width: 100%;
  z-index: 111;
  font-weight: bold;
}
.charbox {
    cursor: pointer;
    text-align: center; 
    outline: none;
    display: inline-block;
    vertical-align: top;
    border: 2px dashed #27a84d;
    min-width: 100px;
    min-height: 100px;
    transition: all 1s ease 0s;
    margin: 0 auto;
  }
.decayEmptybox {
    cursor: pointer;
    text-align: center; 
    outline: none;
    display: inline-block;
    vertical-align: top;
    border: 2px solid #27a84d;
    min-width: 100px;
    min-height: 100px;
    transition: all 1s ease 0s;
    margin: 0 auto;
  }
.charbox.charbox-selected{
    border: 2px solid #27a84d;
}
.decayEmptybox.bootsize{
    min-width: 60px;
    min-height: 60px;
    width: 100%;
    height: 100%;
    transition: all 1s ease 0s;
}
.charbox.bootsize{
    min-width: 60px;
    min-height: 60px;
    width: 100%;
    height: 100%;
    transition: all 1s ease 0s;
}
  .charbox > * {
    display: none;
    font-size: 40px;
    line-height: 1.2;
  }
.curr_con{
    display: block;
}
  .decayEmptybox > * {
    font-size: 40px;
    line-height: 1.2;
  }
.font_80{
    font-size: 80px;
    line-height: 1.2;
}
.font_40{
    font-size: 40px;
    line-height: 1.4;
}
.font_35{
    font-size: 35px;
    line-height: 1.6;
}
.font_30{
    font-size: 30px;
}
.font_20{
    font-size: 20px;
}
.font_23{
    font-size: 23px;
    line-height: 2.2;
}
.font_28{
    font-size: 28px;
    line-height: 2.2;
}
.font_18{
    font-size: 18px;
}
.numrevcontainer{
    margin-bottom: 15px;
    padding: 0px 10px;
}
.rightarrow::after {
  background: transparent none repeat scroll 0 0;
  color: #27a84d;
  content: "\f061";
  font-family: fontawesome;
  font-weight: bold;
  left: 94%;
  position: absolute;
  top: 35%;
  z-index: 111;
}
.downarrow::after {
  background: transparent none repeat scroll 0 0;
  color: #27a84d;
  content: "\f063";
  font-family: fontawesome;
  font-weight: bold;
  left: 50%;
  position: absolute;
  top: 100%;
  z-index: 111;
}
.leftarrow::after {
  background: transparent none repeat scroll 0 0;
  color: #27a84d;
  content: "\f060";
  font-family: fontawesome;
  font-weight: bold;
  left: -5%;
  position: absolute;
  top: 35%;
  z-index: 111;
}
.count-ico {
  border: 1px solid green;
  color: red;
  font-size: 20px;
  margin: 10px 2px;
  padding: 3px;
}
.gol-done{
    border-radius: 50%;
    background: #fff;
    display: block;
    overflow: hidden;
    box-shadow: 0px 1px 7px -1px rgba(0,0,0,.3);
}
.sonkha-khuji2, .click-to-shape {
  cursor: pointer;
}
.sonkha-khuji2:hover {
  border-bottom: 2px solid green;
  transition: .3s;
}
ul.count-number-block{
    padding-left: 0px;
}
.count-number-block li{
    font-size: 20px;
    line-height: 0;
}
.dan-bam {
  background: #FFB50A;
  border-radius: 5px;
  color: white;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 0;
  padding: 4px;
  text-align: center;
    cursor: pointer;
}
.round-shape-image-clicked {
  border-radius: 50%;
  box-shadow: 0px 1px 24px -5px rgba(225, 181, 10, 0.80);
  cursor: pointer;
  transition: .3s;
}
.sam-20 {
  float: left;
  margin-left: 0.5%;
  margin-right: 0.5%;
  max-width: 19%;
}
.margin-top-20{
    margin-top: 20px;
}
.margin-bottom-10{
    margin-bottom: 10px;
}
.margin-top-10{
    margin-top: 10px;
}
.disabled_button img {
  filter: grayscale(1);
  opacity: 0.3;
}
.disabled_button {
  background: rgba(100, 100, 255, 0.2) none repeat scroll 0 0;
  border: 1px solid #bbb;
  color: #bbb;
  pointer-events: none;
}
.disabled_button span.large-button-text {
  color: #bbb;
}
  /*.charbox:last-of-type {
    margin-right: 10px;
  }*/
.pulseBoxShadow {
  background-color: #27a84d;
  border-radius: 50%;
  height: 10px;
  margin-left: 30px;
  position: absolute;
  top: 30%;
  width: 10px;
/*
  -webkit-animation : pulseBoxShadow .8s infinite;
  -o-animation : pulseBoxShadow .8s infinite;
  -moz-animation : pulseBoxShadow .8s infinite;
  animation : pulseBoxShadow .8s infinite;
*/
}
.bg_color_beep{
      background: linear-gradient(90deg, #730aff, #079200);
    background-size: 400% 400%;
    -webkit-animation: bg_color_beep 2s ease infinite;
    -moz-animation: bg_color_beep 2s ease infinite;
    -o-animation: bg_color_beep 2s ease infinite;
    animation: bg_color_beep 2s ease infinite;
}
 @-webkit-keyframes bg_color_beep {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@-moz-keyframes bg_color_beep {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@-o-keyframes bg_color_beep {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@keyframes bg_color_beep {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
.pulseBoxShadow::before, .pulseBoxShadow::after{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    content: "";
    border-radius: 50%;
    background-color: #27a84d;
    opacity: .95;
    animation: pulse2 3s cubic-bezier(0.07, 0.93, 1, 1) infinite;
}
.pulseBoxShadow::after{
    animation-delay: 2s;
    animation: pulse2 3s ease-in infinite;
}
/*stroke animation*/

.topToBottom{
    -webkit-animation : topToBottom 0.5s;
    -o-animation : topToBottom 0.5s;
    -moz-animation : topToBottom 0.5s;
    animation : topToBottom 0.5s;
}
.leftToright{
    -webkit-animation : leftToright 0.5s;
    -o-animation : leftToright 0.5s;
    -moz-animation : leftToright 0.5s;
    animation : leftToright 0.5s;
}
.pulseInfinite {
    -webkit-animation : pulse 0.1s infinite;
    -o-animation : pulse 0.1s infinite;
    -moz-animation : pulse 0.1s infinite;
    animation : pulse 0.1s infinite;
}
.pulseInfiniteLong {
    -webkit-animation : pulseLong 0.5s infinite;
    -o-animation : pulseLong 0.5s infinite;
    -moz-animation : pulseLong 0.5s infinite;
    animation : pulseLong 0.5s infinite;
}
.animatemeGreen {
    stroke-width:4;
    stroke-dasharray : 1200;
    stroke-dashoffset: 0;
    -webkit-animation : drawline 3s linear forwards;
    -o-animation : drawline 3s linear forwards;
    -moz-animation : drawline 3s linear forwards;
    animation : drawline 3s linear forwards;
    stroke: green;
}
.animatemeOrange {
    stroke-width:4;
    stroke-dasharray : 1200;
    stroke-dashoffset: 0;
    -webkit-animation : drawline 3s linear forwards;
    -o-animation : drawline 3s linear forwards;
    -moz-animation : drawline 3s linear forwards;
    animation : drawline 3s linear forwards;
    stroke: #F7B61C;
}
.animatemePink {
    stroke-width:2;
    stroke-dasharray : 1200;
    stroke-dashoffset: 0;
    -webkit-animation : drawline 3s linear forwards;
    -o-animation : drawline 3s linear forwards;
    -moz-animation : drawline 3s linear forwards;
    animation : drawline 3s linear forwards;
    stroke: #DC5276;
}
.animatemeRed {
    stroke-width:4;
    stroke-dasharray : 1200;
    stroke-dashoffset: 0;
    -webkit-animation : drawline 3s linear forwards;
    -o-animation : drawline 3s linear forwards;
    -moz-animation : drawline 3s linear forwards;
    animation : drawline 3s linear forwards;
    stroke: red;
}
@keyframes pulse2{
   from {
       transform:scale(1);
       opacity:.95;
   }
   to{
       transform:scale(3);
       opacity:0;
   }
}
@-webkit-keyframes drawline {
    from{
    stroke-dashoffset: 1200;
    }
    to{
    stroke-dashoffset: 0;
    }
}
    /*drawline animation*/
@keyframes drawline {
    from{
    stroke-dashoffset: 1200;
    }
    to{
    stroke-dashoffset: 0;
    }
}
@-moz-keyframes drawline{
     from{
    stroke-dashoffset: 1200;
    }
    to{
    stroke-dashoffset: 0;
    }
}
@-ms-keyframes drawline{
     from{
    stroke-dashoffset: 1200;
    }
    to{
    stroke-dashoffset: 0;
    }
}
@-o-keyframes drawline{
     from{
    stroke-dashoffset: 1200;
    }
    to{
    stroke-dashoffset: 0;
    }
}
    /*pulse animation*/
@keyframes pulse {
    0% {
        transform: scale(1,1);
       -ms-transform: scale(1,1);
       -webkit-transform: scale(1,1);
    }

    100% {
        transform: scale(1,1.01);
        -webkit-transform: scale(1,1.01);
        -ms-transform: scale(1,1.01);
    }
}
@-ms-keyframes pulse {
    0% {
        transform: scale(1,1);
       -ms-transform: scale(1,1);
       -webkit-transform: scale(1,1);
    }

    100% {
        transform: scale(1,1.01);
        -webkit-transform: scale(1,1.01);
        -ms-transform: scale(1,1.01);
    }
}
@-o-keyframes pulse {
    0% {
        transform: scale(1,1);
       -ms-transform: scale(1,1);
       -webkit-transform: scale(1,1);
    }

    100% {
        transform: scale(1,1.01);
        -webkit-transform: scale(1,1.01);
        -ms-transform: scale(1,1.01);
    }
}
@keyframes pulseLong {
    0% {
        transform: scale(1.0);
       -ms-transform: scale(1.0);
       -webkit-transform: scale(1.0);
    }

    100% {
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
    }
}
@-webkit-keyframes pulse {
    0% {
        transform: scale(1,1);
       -ms-transform: scale(1,1);
       -webkit-transform: scale(1,1);
    }

    100% {
        transform: scale(1,1.01);
        -webkit-transform: scale(1,1.01);
        -ms-transform: scale(1,1.01);
    }
}
@-moz-keyframes pulse {
    0% {
        transform: scale(1,1);
       -ms-transform: scale(1,1);
       -webkit-transform: scale(1,1);
    }

    100% {
        transform: scale(1,1.01);
        -webkit-transform: scale(1,1.01);
        -ms-transform: scale(1,1.01);
    }
}
@keyframes pulseBoxShadow {
    0% {
        box-shadow: 0px 0px 0px 0px rgba(39,168,77,.5);
    }

    100% {
        box-shadow: 0px 0px 1px 7px rgba(39,168,77,.3);
    }
}
@-webkit-keyframes pulseBoxShadow {
    0% {
        -webkit-box-shadow: 0px 0px 0px 0px rgba(39,168,77,.5);
    }

    100% {
        -webkit-box-shadow: 0px 0px 1px 7px rgba(39,168,77,.3);
    }
}
@-moz-keyframes pulseBoxShadow {
    0% {
        -moz-box-shadow: 0px 0px 0px 0px rgba(39,168,77,.5);
        box-shadow: 0px 0px 0px 0px rgba(39,168,77,.5);
    }

    100% {
        -moz-box-shadow: 0px 0px 1px 7px rgba(39,168,77,.3);
        box-shadow: 0px 0px 1px 7px rgba(39,168,77,.3);
    }
}
/*Game button on/off*/
.game-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.game-switch input {display:none;}

.slider-button {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider-button:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider-button {
  background-color: #27a84d;
}

input:focus + .slider-button {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider-button:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider-button.round-controller {
  border-radius: 34px;
}

.slider-button.round-controller:before {
  border-radius: 50%;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus {
  outline: thin dotted transparent;
  outline-offset: -2px;
}
/*score area*/
#score {
  background: white none repeat scroll 0 0;
  border: 1px solid green;
  padding: 10px;
  position: fixed;
  right: -50%;
  top: 55%;
  z-index: 999;
  transition: .3s;
}
#score.slideinScore {
  background: white none repeat scroll 0 0;
  border: 1px solid green;
  padding: 10px;
  position: fixed;
  right: 5%;
  top: 55%;
  z-index: 999;
  transition: .3s;
}
/*chicken counting svg*/
.chickenSingle {
  cursor: pointer;
}
.pendingMarker {
  color: #bbb;
  filter: blur(1px);
  transition: all 0.3s ease 0s;
}
.squareMatch {
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 -4px 10px 0 rgba(0, 0, 0, 0.1) inset;
  color: #fff;
  display: block;
  margin-bottom: 5px;
  text-decoration: none;
  transition: all .5s ease 0s;
}
.roundMatch {
  border: 1px solid #eee;
  border-radius: 50%;
  color: #fff;
  padding: 15px 18px;
}
.squareMatch:hover, .roundMatch:hover, .squareMatch:visited, .roundMatch:visited, .squareMatch:focus, .roundMatch:focus {
  color: #fff;
    text-shadow: 0px 4px 2px rgba(0,0,0,.2);
  transition: all .5s ease 0s;
}
.width100{
    width: 100%;
}
.btn-con {
    max-width: 70%;
    width: 70%;
}
.txt-con {
  background-color: #f5f5f5;
  border-bottom: 1px solid #aaa;
  border-right: 2px solid #aaa;
  border-top: 1px solid #aaa;
  float: left;
  margin-left: -1px;
  max-width: 30%;
  width: 30%;
   color: #27a84d; 
}
.btn-con, .txt-con {
    float: left;
}
.txt-con{
    display: none;
}
.btn-con .btn {
    border-radius: 4px 0 0 4px;
}
.namta-cube {
  float: left;
  list-style: outside none none;
  padding: 3px 5px;
}
.namta-cube li {
  font-size: 30px;
  padding: 2px 3px;
    transition: .3s;
}
.namta-block-container{
    margin-top: 120px;
}
.namta-title {
  border: 1px solid #eee;
  border-radius: 5px;
  color: #fff;
  margin-bottom: 20px;
}
.namta-title p{
    margin-bottom: 0px;
}
.btn.namta-btn {
  padding: 2px 12px;
}
.txt-con .font_35 {
  line-height: 1.35em;
}
.rsd-top{
    top: 0;
}
.rsd-bottom{
    bottom: 0;
}
.rsd-middle{
    top: 46%;
}
.rsd-0{
    left: 0;
}
.rsd-1{
    left: 10%;
}
.rsd-2{
    left: 20%;
}
.rsd-3{
    left: 30%;
}
.rsd-4{
    left: 40%;
}
.rsd-5{
    left: 50%;
}
.rsd-6{
    left: 60%;
}
.rsd-7{
    left: 70%;
}
.rsd-8{
    left: 80%;
}
.rsd-9{
    left: 90%;
}
.rsd-10{
    left: 98%;
}
.round-shapeDrawlines{
    cursor: pointer;
    position: absolute;
    z-index: 2;
}
.border-right-gray{
    border-right: 1px solid #bbb;
}
.frac{
    position: relative;
    padding: 0 2%;
}
.rotate {
  display: inline-block;
  position: relative;
  transform: rotate(75deg);
}
.frac_sup {
    position: absolute;
    top: 0;
}
.frac_sub {
  position: absolute;
  bottom: 10%;
  right: 25%;
}
.judgeRes {
  bottom: 80%;
  left: 10%;
  position: absolute;
}
.free_pos {
  position: absolute;
  left: 0;
  top: 0;
  width: 7%;
}
.pos_1 {
  left: 30%;
  top: 6%;
}
.pos_2 {
  top: 30%;
  left: 9%;
}
.pos_3 {
  left: 10%;
  top: 57%;
}
.pos_4 {
  left: 30%;
  top: 78%;
}
.pos_5 {
  left: 56%;
  top: 78%;
}
.pos_6 {
  left: 76%;
  top: 56%;
}
.pos_7 {
  left: 77%;
  top: 30%;
}
.pos_8 {
  left: 57%;
  top: 6%;
}
/*division*/
ul.division {
  list-style: outside none none;
  overflow: hidden;
  padding: 0 0px 30px 0px;
}
ul.division li ul {
  list-style: outside none none;
  padding: 0;
}
ul.division li:not(.lineUnder) {
  display: inline;
   float: left;
}
.divisor::after {
  content: ")";
  font-size: 85px;
  font-weight: bold;
}
.diviResult::before {
  content: "(";
  font-size: 85px;
  font-weight: bold;
}
li.dividend {
  padding: 4px 7px 0;
}
li.dividend ul li {
  line-height: 55px;
}
li.dividend ul li span {
  line-height: 55px;
}
body.math_en li.dividend ul li span {
  line-height: 80px;
}
li.dividend ul:first-child {
  margin-top: -20px;
}
li.dividend ul:last-child {
  border-bottom: none !important;
}
.charbox.divis {
   border: none;
  border-bottom: 2px dashed #27a84d;
  cursor: pointer;
  display: inline-block;
  margin-left: 0px;
  min-height: 80px;
   height: 80px;
  min-width: 40px;
  outline: medium none;
  text-align: center;
  transition: all 1s ease 0s;
  vertical-align: top;
}
.diviResult div:first-child {
  margin-left: -10px;
}
.correctState, .incorrectState {
  background: #27a84d none repeat scroll 0 0;
  border-radius: 10px;
  color: white;
  left: 50%;
  padding: 0 10px;
  position: absolute;
  top: 40%;
   min-width: 146px;
}
.incorrectState {
  background: red;
}
.correctState p, .incorrectState p {
    line-height: 35px;
    margin-bottom: 0;
}
.correctState::after{
  color: #27a84d;
  content: "";
  font-family: fontawesome;
  font-size: 14px;
  left: -25px;
  position: absolute;
  top: 12px;
  transform: scaleX(3);
  z-index: 999;
}
/*addition table style*/
table.table-row-striped tr td:nth-of-type(odd){
   background-color: rgba(3,3,3,.1);
}
table.table-row-striped tr td:nth-of-type(even){
   background-color: rgba(3,3,3,.05);
}
.btn.btn-primary.btn-to-reveal-ans {
	font-size: 22px;
	padding: 10px 12px;
}
.reveal-wrapper.content-bangla {
	font-size: 17px;
}
/*added by manik */
.tk {
  font-size: 28px;
  text-align: center;
  margin: 0;
  padding: 0;
}
.manikbox {
    min-width: 50px;
    width: 50px;
    min-height: 50px;
    height: 50px;
    display: inline-block !important;
    padding-top: 5px !important;
}
.main-content-box-top-portion h2 {
	font-size: 27px;
}