.box {
    position: absolute;
    width: 27%;
    height: 40%;
}
.middel_text {
    position: absolute;
    font-size: 5vw;
    color: white;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.prev_button {
    position: absolute;
    left: 1%;
    height: 30%;
    /*transform: translateY(-50%);*/
    top: 35%;
    cursor: pointer;
}
.next_button {
    position: absolute;
    right: 1%;
    height: 30%;
    /*transform: translateY(-50%);*/
    top: 35%;
    cursor: pointer;
}
.zoom_in_out{
  animation: zoom_in_out 1s ease-in-out infinite;
  -webkit-animation: zoom_in_out 1s ease-in-out infinite;
}
@keyframes zoom_in_out {
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.2);
  }
  100%{
    transform: scale(1);
  }
}
@-webkit-keyframes zoom_in_out {
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.2);
  }
  100%{
    transform: scale(1);
  }
}
.insidebox {
    position: absolute;
    top: 0%;
    width: 70%;
    left: 15%;
    height: 100%;
    background: white;
    border-radius: 2vmin;
}
.image_inside {
    width: 45%;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 60%;
    /*cursor: pointer;*/
}
.text_inside {
    position: absolute;
    width: 100%;
    background: #B8F3F9;
    font-size: 2vw;
    top: auto;
    transform: translateX(-50%);
    left: 50%;
    border-top-left-radius: 2vmin;
    border-top-right-radius: 2vmin;
}


.patuki-box {
    top: 13%;
    left: 5%;
}
.ribon-box {
    right: 5%;
    top: 13%;
}
.jama-box {
    top: 57%;
    left: 5%;
}
.choli-box {
    position: absolute;
    right: 5%;
    top: 57%;
}
.brown_bg {
    background: #B3A871;
}
.middoll {
    position: absolute;
    width: 20%;
    left: 40%;
    top: 13%;

}
.displaynone{
  display: none;
}
.top_instruction {
    position: absolute;
    background: #80DEEA;
    padding: 1%;
    font-size: 2vw;
    transform: translateX(-50%);
    left: 50%;
    top: 0;
    border-bottom-left-radius: 1vmin;
    border-bottom-right-radius: 1vmin;
    width: 70%;
}
.don_button {
    position: absolute;
    font-size: 2vw;
    background: #9EE948;
    padding: 1%;
    border-radius: 1vmin;
    box-shadow: .1vmin .1vmin .5vmin black;
    top: 88%;
    width: 10%;
    left: 45%;
    cursor: pointer;
}
.don_button:hover{
  transform: scale(1.1);
  transition:.3s;
}
.blackandwhite{
  animation:blackandwhite .5s ease-out forwards;
  -webkit-animation:blackandwhite .5s ease-out forwards;
}
@keyframes blackandwhite {
  to{
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
  }
}
@-webkit-keyframes blackandwhite {
  to{
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
  }
}
.middoll1 {
    position: absolute;
    width: 20%;
    left: 78%;
    top: 13%;
}
.purple_bg{
  background: #8E7CC3;
}
.ribon-dolla, .jama-dolla, .patuki-dolla, .choli-dolla {
    display: block;
    position: absolute;
    height: 15%;
    left: 8%;
    top: 10%;
    transform: translateX(-50%);
}
.choli-dolla{
  top: 30%;
}
.patuki-dolla {
    top: 50%;
    width: 7%;
    height: auto;
}
.jama-dolla {
    top: 60%;
    width: 7%;
    height: auto;
}
.btnNavigationSong {
    width: 100%;
    height: 22%;
    top: 84.5%;
    z-index: 9999;
}
.totalsequence{
  display: none;
}

/*for poem*/
.ghadi {
    width      : 100%;
    height     : 100%;
    position   : relative;
    overflow   : hidden;
    font-size  : 2vmin;
    background : #fff;
    box-shadow : inset 0 0 30px #f2f2f2;
}

.ghadi, .ghadi * {
    position : relative;
    margin   : 0;
    padding  : 0;
}

.ghadi .nextBtn{
    display : none;
    position  : absolute;
    bottom    : 0%;
    right     : 0%;
    width     : 7%;
    height    : 10%;
}

.ghadi .prevBtn{
    display : none;
    position  : absolute;
    bottom    : 0%;
    left      : 0%;
    width     : 7%;
    height    : 10%;
}

/*=====================================
=            common styles            =
=====================================*/
    .board{
        position   : relative;
        top        : 0%;
        left       : 0%;
        width      : 100%;
        height     : 100%;
        text-align : center;
    }

    .vertical-horizontal-center{
        position          : relative;
        top               : 45%;
        left              : 50%;
        transform         : translate(-50%, -50%);
        -moz-transform    : translate(-50%, -50%);
        -webkit-transform : translate(-50%, -50%);
        text-align        : center;
    }

    .vertical-center{
        position          : relative;
        top               : 50%;
        transform         : translateY(-50%);
        -moz-transform    : translateY(-50%);
        -webkit-transform : translateY(-50%);
        text-align        : center;
    }

    .coverboardfull{
        position : absolute;
        top      : 0;
        left     : 0;
        width    : 100%;
        height   : 100%;
    }

    /*================================================
    =            Notification Pulse Style            =
    ================================================*/
        /**
            How to use:
            - To enable notification pulse add 'data-usernotification="notifyuser"'
              attribute to the html element inside board div
         */

        @keyframes pulse {
         0% { transform   : scale(0); opacity: 0.0; }
         25% { transform  : scale(0); opacity: 0.6; }
         50% { transform  : scale(0.1); opacity: 0.8; }
         75% { transform  : scale(0.5); opacity: 1; }
         100% { transform : scale(1); opacity: 0.0; }
        }

        @-moz-keyframes pulse {
         0% { -moz-transform   : scale(0); opacity: 0.0; }
         25% { -moz-transform  : scale(0); opacity: 0.6; }
         50% { -moz-transform  : scale(0.1); opacity: 0.8; }
         75% { -moz-transform  : scale(0.5); opacity: 1; }
         100% { -moz-transform : scale(1); opacity: 0.0; }
        }

        @-webkit-keyframes pulse {
         0% { -webkit-transform   : scale(0); opacity: 0.0; }
         25% { -webkit-transform  : scale(0); opacity: 0.6; }
         50% { -webkit-transform  : scale(0.1); opacity: 0.8; }
         75% { -webkit-transform  : scale(0.5); opacity: 1; }
         100% { -webkit-transform : scale(1); opacity: 0.0; }
        }


        /*for all element inside board*/
        .board *[data-usernotification*="notifyuser"]{
            cursor : pointer;
        }

        .board *[data-usernotification*="notifyuser"]::after{
            content          : "";
            position         : absolute;
            top              : 0;
            left             : 0;
            width            : 2em;
            height           : 2em;
            background-color : white;
            border           : 2px solid black;
            border-radius    : 50%;

            -webkit-animation : pulse 1.2s ease-out infinite;
            -moz-animation    : pulse 1.2s ease-out infinite;
            animation         : pulse 1.2s ease-out infinite;
        }

    /*=====  End of Notification Pulse Style  ======*/

/*=====  End of common styles  ======*/


/*===============================================
=            general template layout            =
===============================================*/

    div.generalTemplateblock{
        position : absolute;
        top      : 0%;
        left     : 0%;
        width    : 100%;
        height   : 100%;
        /*border   : 1px solid red; */
    }


/*=====  End of general template layout  ======*/

/*=========================================================
=            general templated specific styles            =
=========================================================*/

/*=====  End of general templated specific styles  ======*/

.contentblock{
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
}

.description_title{
	font-size: 5vmin;
	position: absolute;
	width: 100%;
	text-align: center;
	z-index: 10;
	background-color: #8E7CC3;
	color: #fff;
	/*background-color: #A4F2FC;
	color: #F84A7D;*/
	border-bottom: 0.1em solid #D9D2E9;
	/*border-bottom: 0.1em solid #BAF7FA;*/
}

.description {
    font-size: 2vw;
    border-radius: 0.5em;
    margin: 0.2em;
}

.writer {
    position: absolute;
    left: 61%;
    top: 3vmin;
    z-index: 10;
    color: #fff;
    /*color: #169384;*/
}

.left_50 {
    width: 30%;
    height: auto;
    left: 15%;
    top: 42%;
    position: absolute;
    padding: 1em;
    transform: translateY(-50%);
    z-index: 5;
    background: #f6ca72;
    border-radius: 1vmin;
}
.right_50 {
    width: 30%;
    height: auto;
    top: 60%;
    transform: translateY(-50%);
    position: absolute;
    padding: 1em;
    z-index: 5;
    right: 24%;
    background: #f6ca72;
    border-radius: 1vmin;
}

/*#span_speec_text{
	color: #55f;
}

.nextbtnpoem, .prevbtnpoem, .pausebtnpoem, .poempbtn, .replaybtnpoem{
	position: absolute;
	width: 6%;
	bottom: 2%;
	margin-bottom: 0.2em;
	display: none;
}

.nextbtnpoem{
	left: 55%;
}

.prevbtnpoem{
	right: 55%;
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.pausebtnpoem, .poempbtn, .replaybtnpoem{
	left: 47%;
}

.nextbtnpoem:hover{
	filter: drop-shadow(0 0.2em 0.1em #5a5a5a);
}

.prevbtnpoem:hover{
	filter: drop-shadow(0 0.2em 0.1em #5a5a5a);
}

.pausebtnpoem:hover{
	filter: drop-shadow(0 0.2em 0.1em #5a5a5a);
}

.poempbtn:hover{
	filter: drop-shadow(0 0.2em 0.1em #5a5a5a);
}

.replaybtnpoem:hover{
	filter: drop-shadow(0 0.2em 0.1em #5a5a5a);
}

.nextbtnpoem:active{
	margin-bottom: 0.1em;
	filter: drop-shadow(0 0.1em 0.05em #5a5a5a);
	outline: none;
}

.prevbtnpoem:active{
	margin-bottom: 0.1em;
	filter: drop-shadow(0 0.1em 0.05em #5a5a5a);
	outline: none;
}

.pausebtnpoem:active{
	margin-bottom: 0.1em;
	filter: drop-shadow(0 0.1em 0.05em #5a5a5a);
	outline: none;
}

.poempbtn:active{
	margin-bottom: 0.1em;
	filter: drop-shadow(0 0.1em 0.05em #5a5a5a);
	outline: none;
}

.replaybtnpoem:active{
	margin-bottom: 0.1em;
	filter: drop-shadow(0 0.1em 0.05em #5a5a5a);
	outline: none;
}*/
/*.poempbtn{
	left: 47%;
}

.replaybtnpoem{
	left: 47%;
}*/
.bg1{
    background: url("http://gituploads.olenepal.org/epaath_media/activity/grade1/nepali/purnabiram_ko_prayog/images/bg_play-time.png");
    background-size: 100% 100%;
}
.rhinoimgdiv {
    position: absolute;
    width: 15%;
    top: 60%;
    left: 21%;
}
.squirrelisteningimg {
    position: absolute;
    width: 16%;
    top: 61%;
    left: 70%;
}
.playtime {
    position: absolute;
    font-family: sniglet;
    color: white;
    margin-top: 33%;
    transform: translateX(-50%);
    left: 53%;
    z-index: 999;
    font-size: 4vw;
}
@media (min-aspect-ratio: 4/3){
  .top_instruction,.text_inside,.don_button{
    font-size: 4.5vmin;
  }
  .description{
    font-size: 4.2vmin;
  }
  .playtime{
    font-size: 10vmin;
  }
}


.pink_bg{
  background: #fee9d7;
}

.left_bg {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    background: #f9bf8f;
    z-index: 1;
}

.question_top {
    z-index: 2;
    position: absolute;
    width: 50%;
    background: #e2434b;
    padding: 1%;
    color: white;
    font-size: 2.3vw;
    top: 0;
    left: 0;
}
@media (min-aspect-ratio: 4/3){
  .question_top{
    font-size: 5vmin;
  }
}

.option1, .option2 {
    position: absolute;
    z-index: 2;
    font-size: 1.8vw;
    background: #626eef;
    color: white;
    padding: 1%;
    border: .8vmin solid #626eef;
    border-radius: .5vmin;
    width: 40%;
    left: 5%;
    cursor: pointer;
    top: 35%;
}
.option2{
  top: 60%;
}
.option1:hover, .option2:hover {
  background: #ffab40;
  border-color: #e69138;
  transition: .3s;
  transform: scale(1.1);
}
@media (min-aspect-ratio: 4/3){
  .option1, .option2{
    font-size: 4.5vmin;
  }
}

.track {
    position: absolute;
    width: 100%;
    left: 0;
    top: 81%;
}

.train {
    position: absolute;
    width: 60%;
    top: 42%;
    z-index: 2;
    left: 100%;
    animation: train_anim 6s ease-in-out forwards;
    -webkit-animation: train_anim 6s ease-in-out forwards;
}
/*animation keyframes of train*/
@keyframes train_anim {
  0%{
    left: 100%;
  }
  100%{
    left: 0%;
  }
}
@-webkit-keyframes train_anim {
  0%{
    left: 100%;
  }
  100%{
    left: 0%;
  }
}
/*animation keyframes of train ends*/


.right_image {
    position: absolute;
    width: 50%;
    left: 50%;
    z-index: 10;
    top: -2%;
}