.activity_container {
    width      : 100%;
    height     : 100%;
    position   : relative;
    overflow   : hidden;
    font-size  : 1.3em;
    background : #fff;
    box-shadow : inset 0 0 30px #f2f2f2;
}

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

.activity_container .nextBtn{
    display  : none;
    position : absolute;
    bottom   : 0%;
    right    : 0%;
    width    : 7%;
    height   : 10%;
    z-index  : 10;
}

.activity_container .prevBtn{
    display  : none;
    position : absolute;
    bottom   : 0%;
    left     : 0%;
    width    : 7%;
    height   : 10%;
    z-index  : 10;
}

@font-face {
    font-family: amaranth;
    src: url("../fonts/amaranath/amaranth-regular.ttf");
}

html, body {
	margin: 0;
	height: 100%;
	width: 100%;
}

p{
	margin: 0;
}
.contentwithbg {
	width: 100%;
	height: 100%;
	background: url("../images/introduction-slide.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.nextBtn {
	display: none;
	position: absolute;
	bottom: 0%;
	right: 0%;
	width: 7%;
	height: 10%;
	z-index: 1000!important;
}

.prevBtn {
	display: none;
	position: absolute;
	bottom: 0%;
	left: 0%;
	width: 7%;
	height: 10%;
	z-index: 1000!important;
}

.myNextStyle {
	cursor: pointer;
	background-image: url("../../../../../../images/arrows/arrow.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.myNextStyle:hover {
	background-image: url("../../../../../../images/arrows/arrow_hover.png");
}

.myNextStyle:active {
	background-image: url("../../../../../../images/arrows/arrow_active.png");
}

.myPrevStyle {
	cursor: pointer;
	background-image: url("../../../../../../images/arrows/arrow_prev.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.myPrevStyle:hover {
	background-image: url("../../../../../../images/arrows/arrow_hover_prev.png");
}

.myPrevStyle:active {
	background-image: url("../../../../../../images/arrows/arrow_active_prev.png");
}

.board {
	position: absolute;
	top: 0%;
	left: 0%;
	text-align: center;
	height: 100%;
	width: 100%;
    font-family: amaranth;
}

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

.vertical-center {
	position: relative;
	top: 45%;
	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%;
}

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

div.headerblock {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 20%;
	background-color: #E3D0DA;
	color: #CE00A7;

	/*border   : 1px solid red;*/
}

div.generalTemplateblock[data-templatecontains='hasheaderblock'] div.contentblock {
	top: 20%;
	height: 80%;
	position: absolute;
	width: 100%;
}

div.generalTemplateblock[data-templatecontains='hasonlycontent'] div.contentblock {
	top: 0%;
	height: 100%;
}

/*============ exercise template ===================
==================================================== */



.exefin {
	display: none;
    width: 100%;
    height: 20%;
    position: absolute;
    padding-bottom: 1%;
    top: 25%;
    animation: fade-in 1s linear forwards;
    text-align: center;
}

.exefin{
}

@keyframes fade-in{
	from{opacity: 0;}
	to{opacity: 1;}
}

.circleimg{
    background-image: url(../images/11.jpg) !important;
}

.backtrue{
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    padding: 6% 10% !important;
    margin: 1% !important;
}

div.imageblock {
	position: absolute;
	width: 100%;
	height: 100%;
	/*border     : 1px solid green; */
}

/*--------- for exercise -------------*/
.main_bg{
	background: linear-gradient(#0066A4, #FBFCFF);

}
.light_bg {
  background: #ddeff7;
}
.green_bg {
  background: #7CC44D;
}
.option1.addopt{
  animation: swing-top-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      background: none !important;
    border: none !important;
}
.option2.addopt{
  animation: swing-top-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      background: none !important;
    border: none !important;
}
.option3.addopt{
  animation: swing-top-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  background: none !important;
  border: none !important;
}
.option4.addopt{
  animation: swing-top-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  /* animation: shake-horizontal 0.8s linear reverse backwards; */
  background: none !important;
  border: none !important;
  /* top: 44%;
  left: 40%;
  width: 13%; */
}
@keyframes shake-horizontal {
0%,
100% {
          transform: translateX(0);
}
10%,
30%,
50%,
70% {
          transform: translateX(-10px);
}
20%,
40%,
60% {
          transform: translateX(10px);
}
80% {
          transform: translateX(8px);
}
90% {
          transform: translateX(-8px);
}
}
@keyframes swing-top-fwd {
  0% {
            transform: rotate(0);
            transform-origin: top;
  }
  100% {
            transform: rotate(5deg);
            transform-origin: top;
  }
}
.lake1 {
  position: absolute;
  top: 35%;
  left: 30.7%;
  width: 51%;
}
.lake2 {
  position: absolute;
  width: 5.9%;
  top: 29%;
  left: 37.5%;
}
.lake3 {
  position: absolute;
  width: 7.5%;
  top: 24.5%;
  left: 31.5%;
}
/*------------------ specific blocks ------------------*/
.textblock{
	position: absolute;
}
.greybg{
  background: #B6A79E;
}
.play-bg{
  position: absolute;
  top: 12%;
  width: 100%;
  left: 0%;
  height: 88%;
}
.main_question_image {
  position: absolute;
   height: 50%;
  width: 52%;
  border: 2px solid #0B5394;
  background: #7B74D4;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -60%);
  object-fit: cover;
}
.clean-room {
  position: absolute;
  height: 50%;
  width: 52%;
  border: 2px solid #0B5394;
  background: #7B74D4;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -60%);
  object-fit: cover;
  display: none;
}
.bathing, .bathing-gif,.img-second {
  position: absolute;
  width: 19%;
    height: 56%;
    top: 74%;
    left: 40%;
    transform: translate(-50%, -60%);
    object-fit: contain;
}
.bathing-gif,.bathing-gif1{
  display: none;
  width: 19%;
  height: 68%;
  top: 75%;
  left: 44%;
}
.bathing-gif1{
display: block;
}
.img-second{
  width: 20%;
  left: 62%;
  top: 78%;
}
[class*='option']{
  width: 20%;
  height: 20%;
  cursor: pointer;
  position: absolute;
  top: 75%;
  object-fit: contain;
  /* background: #FCE5CD; */
  /* border: 2px solid #F99A7B; */
}
.option1 {
  left: 1%;
  top: 47.5%;
  width: 11%;
}
.option2 {
  left: 17%;
  top: 15%;
  width: 14%;
  height: 40%;
}
.option3 {
  left: 55%;
  top: 31%;
  width: 12%;
}
.option4 {
  left: 72%;
  top: 42%;
  width: 16%;
}
.option5{
  top: 76%;
    left: 74%;
    width: 6%;
}
.option1-1{
  width: 28%;
  left: 4%;
  top: 30%;
  height: 58%;
}
.option2-1{
  width: 10%;
  left: 35%;
  top: 74%;
  height: 15%;
}
.option3-1{
  width: 24%;
  height: 44%;
  top: 48%;
  left: 70%;
}
.option1-2{
  width: 12%;
  left: 10%;
  top: 70%;
  height: 22%;
}
.option2-2{
  width: 12%;
  left: 55.5%;
  top: 60%;
  height: 16%;
}
.option3-2{
  width: 30%;
  height: 48%;
  top: 52%;
  left: 68.5%;
}
.option1-3{
  width: 10%;
  left: 0%;
  top: 24%;
  height: 18%;
}
.option2-3{
  width: 8%;
  left: 44%;
  top: 35.5%;
  height: 12%;
}

.option3-3{
  left: 60%;
  top: 34%;
  width: 14%;
  height: 16%;
}


[class*='option']:hover{
  transform: scale(1.1);
  transition: .2s;
}
.instruction {
    position: absolute;
    font-family: comfortaa;
    font-size: 2.8vw;
    background: #7bd0ff;
    color: #434344;
    width: 100%;
    padding: 0.5%;
    z-index: 999;
}
@media (min-aspect-ratio: 4/3){

    .instruction{
        font-size: 4vmin;
    }

}
.boy-broom {
  position: absolute;
  top: 32%;
  right: 30%;
  width: 44%;
}
.cleaning-room-gif {
  position: absolute;
  top: 32%;
  right: 30%;
  width: 44%;
}
[class*='bg-gif']{
  position: absolute;
  top: 0;
  width: 50%;
  height: 83%;

}
.bg-gif1 {
    left: 0;
  transform: scaleX(-1);
}
.bg-gif2 {
    right: 0;
}
.jhallar {
  position: absolute;
  width: 50%;
  top: 26%;
  left: 50%;
  transform: translate(-50%, 0);
}
.ferris-wheel {
  position: absolute;
  width: 15%;
  top: 28%;
  left: 35%;
  transform: translate(-50%, 0);
}
/* .patches {
  position: absolute;
  top: 48%;
  width: 11%;
  left: 39%;
} */
.bathing {
  position: absolute;
  /* top: 31.5%;
  width: 20%;
  left: 34%; */
  /* z-index: 9999; */
}
.girl-cycle {
  transform: scaleX(-1);
  width: 33%;
  top: 70%;
  left: -40%;
  animation: slide-right 10s cubic-bezier(0.250, 0.460, 0.450, 0.940) normal forwards;
}
@keyframes slide-right {
  0% {
  
  }
   100% {
            left: 80%;
  }
}
.main-div {
    position: absolute;
    width: 240%;
    left: -70%;
    height: 80%;
    top: 0%;
}
.slider-div-1,.slider-div-2,.slider-div-3{
  width: 33.3333333%;
  height: 100%;
  position: relative;
  top:0;
}
.green{
  background: #DDB67D;
}

.prev-button {
    position: absolute;
    z-index: 10;
    top: 37%;
    width: 5%;
    left: 29%;
    cursor: pointer;
}
.next-button {
    position: absolute;
    z-index: 10;
    top: 37%;
    width: 5%;
    left: 66%;
    cursor: pointer;
}
.left,.right{
  opacity: 0.3;
}
.mid{
  opacity: 1;
}
[class*='actionbtn']{
  width: 25%;
  height: 12%;
  position: absolute;
  top: 55%;
  font-family: comfortaa;
  font-size: 2vw;
  padding-top: 2%;
  border-radius: 10px;
  cursor: pointer;
  color: black;
  z-index: 99;
  background: #FAB455;
}
[class*='actionbtn']:hover{
 background: #F8901F;
}
.playagain{
  left: 4%;
  top: 25%;
}
 .mainmenu{
  left: 4%;
  top: 42%;
 }
 .learnagain{
  left: 4%;
  top: 60%;
 }
.spkr-icon{
  width: 11%;
  margin-left: 8%;
  margin-bottom: 6%;
}

 .img-gif{
   display:none;
   z-index: 9999;
 }
 .img-gif.bathing-gif{
  /* position: absolute;
  top: 31.5%;
  width: 20%;
  left: 34%; */
 }
 .bathing-clean{
  position: absolute;
  top: 31.5%;
  width: 20%;
  left: 34%;
  display:none;
 }
 .broom-dirt{
  position: absolute;
  width: 25%;
  top: 40.3%;
  left: 23%;
}
 .broom-gif{
  position: absolute;
  width: 25%;
  top: 40.3%;
  left: 23%;
}
.growing-plant-gif {
  position: absolute;
  width: 37.05%;
  top: 38%;
  left: 24.86%;
  z-index: 999;
}
.tree {
  position: absolute;
  width: 37.05%;
  top: 38%;
  left: 24.86%;
  display:none;
  z-index: 999;
}
.tree-cut {
  position: absolute;
  width: 37.05%;
  top: 38%;
  left: 24.86%;
}
.flipped {
  transform: scaleX(-1);
}