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

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

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

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

.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;
}

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

div.generalTemplateblock {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	/*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%;
}
.contentblock{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
}

.exerciseblock{
	position: relative;
	width: 100%;
	height: 85%;
	left: 0%;
	top: 0%;
	margin-top: 9%;
}
.scoreboard_rhino~.board>.generalTemplateblock>.contentblock>.exerciseblock{
	margin-top: 5%;
}

/*----------------------------------------------
 * ------ css specific for this exercise -------
 * ---------------------------------------------*/
/*top to bottom dragdiv*/
@font-face {
    font-family: acme;
    src: url('../../../../../fonts/Acme-Regular.ttf');
}
.creambg{
  background:#EED8C9;
}
.greenbg{
  background: #67BACA;
}
.uppertxt{
position: absolute;
width: 100%;
height: 14%;
background-color: #9878d9;
color: white;
z-index: 10;
}
.exefin{
  z-index: 5;
}

.question {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 85%;
  color: #fff;
  text-align: left;
  padding: 2%;
  font-family: sniglet;
  transform: translateY(-50%);
}

.sentence {
    position: absolute;
    top: 12%;
    width: 100%;
    font-size: 5vmin;
    text-align: center;
    font-family: sniglet;
    background: #78909C;
    padding: 1%;
    color: white;
}

.optionsdiv {
  top: 31%;
  display: flex;
  left: 50%;
  flex-direction: row;
  text-align: left;
  position: absolute;
  height: 45%;
  width: 75%;
  flex-wrap: wrap;
  transform: translate(-50%);
}

.optionscontainer {
  width: 50%;
}

.imagestartpos {
  position: absolute;
  width: 16%;
  margin-left: 1%;
  display: none;
  margin-top: 12%;
  left: 43%;
  top: 46%;
  transform: translateY(-7%);
}
.top57{
  top: 57%;
}

.optionsdiv p {
  padding: 2%;
  background: #926EED;
  border-radius: 15px;
  margin: 1%;
  font-size: 2vw;
  border: 5px solid #926EED;
  font-family: Abeezee;
  width: 75%;
  text-align: center;
  color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.optimg {
    display: inline;
    border-radius: 15px;
    color: white;
    margin: 0% 1%;
    font-size: 4vmin;
    border: 5px solid #ADAEDB;
    cursor: pointer;
    width: 21%;
}

.forhover:hover {
    border: 5px solid #999999;
    cursor: pointer;
}

.forhoverimg:hover{
	color: #F66E20;
	border: 5px solid #FFD966;
}
.Container{
  position: absolute;
  width: 35%;
  height: 79%;
  background: #926eed;
  top: 19%;
  border-radius: 2em;
}
.leftCont{
  left: 10%;
}
.rightCont{
  right: 10%;
}
.correctopt, .incoropt{
  bottom: 90%;
  left: 91%;
  /*width: 18%;*/
}
.boxImg{
  position: absolute;
  top: 0%;
  left: 12%;
  width: 80%;
  padding: 1%;
}
.question {
    font-size: 3.5vmin;
}
.Container:hover{
  cursor: pointer;
  transform: scale(1.1);
}
.toptxt{
  position: absolute;
  bottom: 100%;
  width: 100%;
  color: #fff;
  font-family: sniglet;
}
.short{
  height: 60%;
}
.containerclassforimage{
  position: absolute;
  top: 25%;
  left: 0%;
  width: 100%;
  height: 75%;
}
.qndiv{
  position: absolute;
  background: #727077;
  left: 0%;
  width: 100%;
  top: 0%;
  height: 22%;
}
.oneLiner{
  font-size: 4vh;
}
.shortCont{
  height: 40%;
}
 @media screen and (min-aspect-ratio: 4/3) {
 	/*vh*/
  .question, .toptxt{
    font-size: 4vh;
  }
  .oneLiner{
    font-size: 5vh;
  }
 }
  @media screen and (max-aspect-ratio: 4/3) {
  	/*vh*/
   .question, .toptxt{
     font-size: 2vw;
   }
   .oneLiner{
     font-size: 2.3vw;
   }
  }