.cream_bg{
	background: #FAD270;
}
.textblock{
	height: 100%;
	width: 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;
}

.bg_full {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.blue_bg{
	background:#00bcd4;
}

.bg1{
    background: url("http://gituploads.olenepal.org/epaath_media/activity/grade1/math/multiplication/images/bg_play-time.png");
    background-size: 100% 100%;
}
.top_text {
    position: absolute;
    font-family: abeezee;
    font-size: 2vw;
    width: 60%;
    transform: translate(-50%,-50%);
    top: 5%;
    background: #fff9c4;
    padding: 1%;
    left: 30%;
}
.right_bg {
    height: 100%;
    position: absolute;
    width: 40%;
    background: #212121;
    top: 0;
    right: 0;
}
.pencil1 {
    width: 15%;
    z-index: 2;
    top: 18%;
    left: 10%;
    position: absolute;
}
.pencil2 {
    width: 15%;
    z-index: 2;
    top: 18%;
    left: 35%;
    position: absolute;
}
.mid_text {
    position: absolute;
    font-family: abeezee;
    color: white;
    font-size: 2vw;
    transform: translate(-50%,-50%);
    left: 30%;
    top: 64%;
    width: 60%;
}
.options1 {
    position: absolute;
    font-family: abeezee;
    font-size: 2vw;
    background: #674ea7;
    color: white;
    border: .5vmin solid #674ea7;
    padding: 1%;
    transform: translate(-50%,-50%);
    width: 15%;
    text-align: center;
    left: 15%;
    top: 85%;
    border-radius: 1vmin;
    cursor: pointer;
}
.options2 {
    position: absolute;
    font-family: abeezee;
    font-size: 2vw;
    background: #674ea7;
    color: white;
    border: .5vmin solid #674ea7;
    padding: 1%;
    transform: translate(-50%,-50%);
    width: 15%;
    text-align: center;
    left: 45%;
    top: 85%;
    border-radius: 1vmin;
    cursor: pointer;
}
.options2:hover ,.options1:hover {
	background: #f6b26b;
	border-color: #e69138;
	transition: .2s;
}

.threebox1, .threebox2 {
    position: absolute;
    z-index: 3;
    transform: translateX(-50%);
    left: 80%;
    height: 8%;
    background: #ffffff;
}
.threebox1{
	top: -8%;
}
.threebox2{
	top: 108%;
}

.movbox1_noadd{
	animation: moveboxe1_noadd 2s ease-out forwards;
}
@keyframes moveboxe1_noadd {
	to{
		top:40%;
	}
}
.movbox2_noadd{
	animation: moveboxe2_noadd 2s ease-out forwards;
}
@keyframes moveboxe2_noadd {
	to{
		top:52%;
	}
}


.movbox1{
	animation: moveboxe1 1s ease-out forwards;
}
@keyframes moveboxe1 {
	to{
		top:42%;
	}
}
.movbox2{
	animation: moveboxe2 1s ease-out forwards;
}
@keyframes moveboxe2 {
	to{
		top:50%;
	}
}




.marble1, .marble2, .marble3 {
    width: 10%;
    z-index: 2;
    top: 30%;
    left: 15%;
    transform: translate(-50%,-50%);
    position: absolute;
}
.marble2{
	left: 30%;
}
.marble3{
	left: 45%;
}

.fivebox1, .fivebox2, .fivebox3 {

    position: absolute;
    z-index: 2;
    top: -8%;
    height: 8%;
    background: white;
    transform: translate(-50%);
    left: 80%;

}
.fivebox2{
	top: 108%;
}
.fivebox3{
	top: 46%;
	left:120%;
}

.fivebox1_animation{
	animation: fivebox1_anim 1s ease-out forwards;
}
@keyframes fivebox1_anim {
	to{
		top:34%;
	}
}
.fivebox2_animation{
	animation: fivebox2_anim 1s ease-out forwards;
}
@keyframes fivebox2_anim {
	to{
		top:58%;
	}
}

.fivebox3_animation{
	animation: fivebox3_anim 1s ease-out forwards;
}
@keyframes fivebox3_anim {
	to{
		left: 80%;
	}
}
.bg_black{
	background: #212121;
}

.sixbox {
    position: absolute;
    height: 19.9%;
    z-index: 3;
    top: 80.5%;
    left: 14%;
}
.fifteenbox {
    position: absolute;
    height: 30%;
    top: 51%;
    left: 8%;
		z-index: 2;
}
.eightbox {
    position: absolute;
    height: 20%;
    top: 32%;
    left: 11%;
}
.char {
    position: absolute;
    width: 5%;
    top: 92%;
    left: 41%;
}
.text-1, .text-2, .text-3 {
    position: absolute;
    font-family: abeezee;
    color: #ffe700;
    font-size: 2vw;
    border: .4vmin solid #4b4b4b;
    padding: .5%;
    left: 58%;
    top: 32%;
    width: 30%;
}
.text-2{
	color: #00ff89;
	top:55%;
}
.text-3{
	color: #ff5244;
	top:81%;
}

.rotate1{
	animation: rotate1 .5s ease-out forwards;
}
@keyframes rotate1 {
	to{
		transform: rotate(90deg);
		left:32%;
	}
}
@-webkit-keyframes rotate1 {
	to{
		transform: rotate(90deg);
		left:32%;
	}
}
.rotate2{
	animation: rotate2 1s ease-out forwards,
							rotate3 1s 1s ease-out forwards,
							rotate4 1s 2s ease-out forwards,
							rotate5 1s 3s ease-out forwards,
							rotate6 1s 4s ease-out forwards;
}
@keyframes rotate2 {
	50%{
		transform: rotate(180deg);
		left:32%;
	}
	100%{
		transform: rotate(180deg);
		left:36%;
	}

}
@keyframes rotate3 {
	50%{
		transform: rotate(90deg);
		top:72%;
		left: 38.5%;
	}
	100%{
		transform: rotate(90deg);
		left: 38.5%;
		top:50%;
	}

}

@keyframes rotate4 {
	50%{
		transform: rotate(0deg);
		top:43%;
		left: 35%;
	}
	100%{
		transform: rotate(90deg);
		left: 35%;
		top: 43%;
	}

}
@keyframes rotate5 {
	50%{
		transform: rotate(90deg);
		left: 35%;
		top: 28%;
	}
	100%{
		transform: rotate(0deg);
		left: 30%;
		top: 24%;
	}

}
@keyframes rotate6 {
	100%{
		transform: rotate(0deg);
		top: 24%;
		left: 21%;
	}

}
@-webkit-keyframes rotate2 {
	50%{
		transform: rotate(180deg);
		top: 24%;
		left:32%;
	}
	100%{
		transform: rotate(180deg);
		top: 24%;
		left:36%;
	}

}
@-webkit-keyframes rotate3 {
	50%{
		transform: rotate(90deg);
		top:72%;
		left: 38.5%;
	}
	100%{
		transform: rotate(90deg);
		left: 38.5%;
		top:50%;
	}

}

@-webkit-keyframes rotate4 {
	50%{
		transform: rotate(0deg);
		top:43%;
		left: 35%;
	}
	100%{
		transform: rotate(90deg);
		left: 35%;
		top: 43%;
	}

}
@-webkit-keyframes rotate5 {
	50%{
		transform: rotate(90deg);
		left: 35%;
		top: 28%;
	}
	100%{
		transform: rotate(0deg);
		left: 30%;
		top: 24%;
	}

}
@-webkit-keyframes rotate6 {
	100%{
		transform: rotate(0deg);
		top: 24%;
		left: 21%;
	}

}
.messagediv {

    font-family: !patrickhand important;
    color: white;
    font-size: 3vw;
    width: 60%;
    transform: translate(-50%,-50%);
    left: 71%;
    top: 16%;

}
.playAgainDiv {

    top: -139%;
    float: left;
    left: 60%;
    width: 12%;

}
.mainMenuDiv {

    top: -26%;
    float: left;
    left: 48%;
    width: 12%;

}

.learnAgainDiv {

    top: 86%;
    float: left;
    left: 36%;
    width: 12%;

}
@media (min-aspect-ratio: 4/3){
	.playtime{
		font-size: 10vmin ;
	}
	.top_text,.messagediv{
		font-size: 5vmin;
	}
	.mid_text,.text-1, .text-2, .text-3{
		font-size: 4.5vmin;
	}

}