.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 -------
 * ---------------------------------------------*/
.grassbg {
    background: url("../images/7ae2e7d4cc3bda7c6a61ea10144f3240.jpg");
    background-size: 26% 20%;
}

.instruction{
	position: relative;
	text-align: center;
	font-size: 2.8vw;
	width: 100%;
}

.question{
	position: relative;
	margin-top: 1%;
	text-align: left;
	font-size: 2.8vw;
	width: 90%;
	left: 5%;
}

.option-block{
	position: absolute;
	margin-top: 3%;
	height: 60%;
	width: 100%;
	display: flex;
	left: 0%;
	align-items: center;
	justify-content: space-around;
}

.main-container{
	position: relative;
	width: 22%;
	height: 100%;
}
.option-container{
	cursor: pointer;
	border-radius: 3vmin;
	border: 0.5vmin solid green;
	overflow: hidden;
	height: 95%;
}
.option-container:hover{
	border-color: red;
}
.option-image{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
}

.option-label{
	position: absolute;
	bottom: 0%;
	left: 0%;
	height: 20%;
	width: 100%;
	font-size: 2vw;
	color: white;
	background-color: black;
}

.option-label ~ .option-image{
	height: 80%;
	max-width: 100%;
	width: auto;
}

.correct-icon, .incorrect-icon{
	display: none;
	position: absolute;
	height: 16%;
	left: 50%;
	transform: translateX(-50%);
	top: 100%;
}

.correct-ans{
	background-color: green;
}
.incorrect-ans{
	background-color: red;
}

@media (min-aspect-ratio: 4/3){
	.instruction{
		font-size: 4vmin;
	}
	.question{
		font-size: 4vmin;
	}
	.option-label{
		font-size: 3vmin;
	}
}

/*for roads*/
.road_horizontal {
    background-color: #434343;
    width: 100%;
    left: 0%;
    height: 8%;
    top: 55%;
    position: absolute;
}
.road_vertical {
    background-color: #434343;
    width: 5%;
    left: 50%;
    height: 66%;
    bottom: 0%;
    position: absolute;
    transform: translate(-50%);
}
.road_horizontal_rt {
    background-color: #434343;
    width: 80%;
    left: 0%;
    height: 8%;
    top: 55%;
    position: absolute;
}
.road_vertical_rt {
    background-color: #434343;
    width: 5%;
    left: 67%;
    height: 76%;
    bottom: 0%;
    position: absolute;
    transform: translate(-50%);
}
.road_horizontal_lt {
    background-color: #434343;
    width: 80%;
    right: 0%;
    height: 8%;
    top: 55%;
    position: absolute;
}
.road_vertical_lt {
    background-color: #434343;
    width: 5%;
    left: 32%;
    height: 76%;
    bottom: 0%;
    position: absolute;
    transform: translate(-50%);
}
.road_horizontal_td {
    background-color: #434343;
    width: 100%;
    right: 0%;
    height: 8%;
    top: 48%;
    position: absolute;
}
.road_vertical_td {
    background-color: #434343;
    width: 5%;
    left: 50%;
    height: 76%;
    top: 0%;
    position: absolute;
    transform: translate(-50%);
}
.label_dir {
    color: #FFF2CC;
    font-family: Sniglet;
    z-index: 10;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 13%;
    background: rgba(0,0,0,0.5);
    width: 100%;
    padding: 2%;
}

.label_up{
	position: absolute;
	bottom: 55%;
	left: 57%;
	transform: translateX(-50%);
}

.label_left{
	position: absolute;
	right: 54%;
	top: 60%;
	transform: translateY(-50%);
}
.label_right{
	position: absolute;
	left: 68%;
	top: 60%;
	transform: translateY(-50%);
}

.label_down{
	position: absolute;
	top: 75%;
	left: 57%;
	transform: translateX(-50%);
}

.arrows{
	position: absolute;
	z-index: 2;
	left: 57%;
	top: 60%;
	transform: translate(-50%, -50%);
	height: 20%;
}
.arrows_2{
	transform: translate(-50%, -50%) rotate(180deg);
}
.arrows_3{
	transform: translate(-50%, -50%) rotate(90deg);
}
.arrows_4{
	transform: translate(-50%, -50%) rotate(270deg);
}


/*for cars*/
.car{
	position: absolute;
	z-index: 5;
	width: 3%;
}

.car_up {
    top: 70%;
    left: 50%;
    transform: translateX(-50%);
}
.car_down {
    bottom: 57%;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
}
.car_right {
    bottom: 58%;
    right: 44%;
    top: 59%;
    transform: translateY(-50%) rotate(90deg);
}
.car_left {
    bottom: 58%;
    left: 43%;
    top: 59%;
    transform: translateY(-50%) rotate(270deg);
}
.bottom_arrows {
    position: absolute;
    width: 5.5%;
    bottom: 5%;
    z-index: 6;
}

.central_arrow {
    left: 47.2%;
}
.central_arrow_left {
    left: 40%;
}
.central_arrow_right {
    left: 54.3%;
}
.forhover:hover{
    cursor: pointer;
	transform: scale(1.1);
}

.forhoverimg:hover{
    cursor: pointer;
    filter: drop-shadow(0px 0px 3px yellow);
}

.correctimg{
    filter: drop-shadow(0px 0px 3px green);
}

.wrongimg{
    filter: drop-shadow(0px 0px 3px red);
}

.bottom_ins {
    z-index: 2;
    position: absolute;
    bottom: 0%;
    left: 50%;
    width: 30%;
    height: 16%;
    background-color: #76CEDB;
    opacity: 0.6;
    transform: translateX(-50%);
    border-radius: 1em 1em 0em 0em;
}

.help_mom{
	position: absolute;
	bottom: 0%;
	width: 100%;
	left: 50%;
	z-index: 25;
	transform: translateX(-50%);
	color: white;
}

.restaurant{
	position: absolute;
	width: 14%; 
	left: 10%;
	bottom: 47.5%;
	z-index: 5;
}

.school {
    position: absolute;
    width: 25%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 58%;
    z-index: 5;
}


.cinema {
    position: absolute;
    width: 18%;
    left: 70%;
    bottom: 47.5%;
    z-index: 5;
}

.restaurant_rt {
    position: absolute;
    width: 11%;
    left: 71%;
    bottom: 54.5%;
    z-index: 5;
}

.school_rt {
    position: absolute;
    width: 22%;
    left: 88%;
    transform: translateX(-50%);
    bottom: 35%;
    z-index: 5;
}

.cinema_rt {
    position: absolute;
    width: 18%;
    left: 70%;
    bottom: 1.5%;
    z-index: 5;
}

.restaurant_lt {
    position: absolute;
    width: 11%;
    left: 18%;
    bottom: 54.5%;
    z-index: 5;
}

.school_lt {
    position: absolute;
    width: 22%;
    left: 12%;
    transform: translateX(-50%);
    bottom: 35%;
    z-index: 5;
}

.cinema_lt {
    position: absolute;
    width: 18%;
    left: 11%;
    bottom: 1.5%;
    z-index: 5;
}

.restaurant_td {
    position: absolute;
    width: 14%;
    left: 10%;
    bottom: 16.5%;
    z-index: 5;
}

.school_td {
    position: absolute;
    width: 25%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 17%;
    z-index: 5;
}

.cinema_td {
    position: absolute;
    width: 18%;
    left: 70%;
    bottom: 20.5%;
    z-index: 5;
}