.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("http://gituploads.olenepal.org/epaath_media/activity/science/animals_with_horns_and_tails/playtime/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("http://gituploads.olenepal.org/epaath_media/activity/science/animals_with_horns_and_tails/playtime/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; */
}

.jump_rhino {
	-webkit-animation: jump_rhino 0.5s cubic-bezier(0,.5,1,.5);
	animation: jump_rhino 0.5s cubic-bezier(.5,1,1,.75);
}
@keyframes
jump_rhino{
	50% {transform: translateY(-150%);}
}
@-webkit-keyframes
jump_rhino{
	50% {transform: translateY(-150%);}
}

.zoom_rhino {
	-webkit-animation: zoom_rhino 1s linear forwards;
	animation: zoom_rhino 1s linear forwards;
	animation-delay:0.75s;
	transform-origin: bottom right;
}
.zoom_marks_rhino {
	-webkit-animation: zoom_marks_rhino 1s linear forwards;
	animation: zoom_marks_rhino 1s linear forwards;
	animation-delay:0.75s;
}
@keyframes
zoom_marks_rhino{
	100% {transform: scale(2);right: 35%;  top: 15%;}
}
@-webkit-keyframes
zoom_marks_rhino{
	100% {transform: scale(2); right: 35%; top: 15%;}
}

@keyframes
zoom_rhino{
	100% {transform: scale(2.5);right: 0%;  bottom: 30%;}
}
@-webkit-keyframes
zoom_rhino{
	100% {transform: scale(2.5); right: 0%; bottom: 30%;}
}

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

}
/*------------------ specific blocks ------------------*/
.textblock{
	position: absolute;
}
.greybg{
  background: #B6A79E;
}
.main_question_image, .questionimage_overlap {
    position: absolute;
    height: 70%;
    top: 22%;
    left: 4%;
}
.option1 {
    position: absolute;
    height: 20%;
    background: #FCE5CD;
    left: 80%;
    top: 22%;
    cursor: pointer;
    border-radius: 2vmin;
}
.option2 {
    position: absolute;
    height: 20%;
    background: #FCE5CD;
    left: 80%;
    top: 47%;
    cursor: pointer;
    border-radius: 2vmin;
}
.option3 {
    position: absolute;
    height: 20%;
    background: #FCE5CD;
    left: 80%;
    cursor: pointer;
    top: 72%;
    border-radius: 2vmin;
}
.option1:hover,.option2:hover,.option3:hover{
  transform: scale(1.1);
  transition: .2s;
}
.instruction {
    position: absolute;
    font-family: comfortaa;
    font-size: 2.8vw;
    background: #66ADDC;
    color: white;
    width: 100%;
    padding: 2%;
}
@media (min-aspect-ratio: 4/3){

    .instruction{
        font-size: 5.5vmin;
    }

}

.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;
}
.slider-div-1{
  left:0;
}
.slider-div-2{
  left:33.333333%;
  top: -100%;
}
.slider-div-3 {
    left: 66.6666666%;
    top: -200%;
}
.slide-image3,.slide-image1,.slide-image2{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.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;
}
.playagain, .mainmenu, .learnagain {
    width: 33.333333333%;
    height: 20%;
    top: 80%;
    position: absolute;
    font-family: comfortaa;
    font-size: 2vw;
    padding-top: 4%;
    cursor: pointer;
    color: black;
}
.playagain{
  background: #FAB455;
}
.playagain:hover{
  background: #F8901F;
  color: white;

}
 .mainmenu{
   left: 33.333333333%;
   background: #6BC399;
 }
 .mainmenu:hover{
   background: #67BC43;
   color: white;

 }
 .learnagain{
   left: 66.6666666666%;
   background: #42A4D5;
 }
 .learnagain:hover{
   background: #1475BA;
   color: white;

 }