@font-face {
    font-family: Andika-Regular;
    src: url("../../../../../fonts/Andika-Regular.ttf");
}
.lesson-title{
	position: absolute;
	left: 50%;
	bottom: 72.5%;
	color: #DF4056;
	width: 100%;
	z-index: 5;
	transform: translateX(-50%);
	font-size: 6vw;
	font-family: pangolin;
}
@media (min-aspect-ratio:4/3){
	.lesson-title{
		font-size: 8.5vh;
	}
}
.bg-full{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
}
.bg-blue{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color:#ABE0F0;
}

/*************************images*********************/
.hasta{
	position:absolute;
	top:30%;
	width:12%;
	z-index: 10;
}
.fullbg{
	position:absolute;
	top:0%;
	left:0%;
	height:100%;
	width:100%;
}
.bankdai{
	position:absolute;
	top:0%;
	left:0%;
	height:100%;
	width:100%;
}
.boardbg{
    position: absolute;
    top: 15%;
    left: 9%;
    width: 84%;
    height: 75%;
}
.bgbrd{
	background-color:#D3D1AB;
}
.squirrel{
	position: absolute;
	top: 57%;
	left: 5%;
	width: 24%;
}
.squirrel1{
	position: absolute;
	top: 41%;
	left: 38%;
	width: 32%;
}
/**************************speechbox***************************/
.sp-1{
    position: absolute;
    top: 16%;
    left: 30%;
    width: 45%;
    height: 29%;
    padding: 1% 2% 6% 2%;
}
.sp-2{
	position: absolute;
	top: 6%;
	left: 18%;
	width: 30%;
	height: 30%;
	padding: 2% 2% 7% 2%;
}
.sp-4{
	position: absolute;
	top: 12%;
	left: 39%;
	width: 40%;
	height: 40%;
	padding: 1% 2% 9% 1%;
}
.box1{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
}
.txt1{
	position: relative;
	top: 50%;
	font-size: 1.7vw;
	transform: translateY(-50%);
}
.box-brd{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;	
}
.brd{
	color:#fff;
	text-align:left;
}
.sp-board{
	position: absolute;
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
	padding: 1% 1% 2% 4%;
}
.sp-boardcen{
	position: absolute;
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
	padding: 1% 1% 2% 23%;
}
/****************************texts*******************************/

.txtb{
position: relative;
top: 50%;
font-size: 2vw;
transform: translateY(-50%);
	text-align: center;
	right: 2%;
}
.slowshow{
	opacity:0;
	animation:fadeIn 1s linear 2s forwards;
}
.red{
	color:red;
}
.title{
	position:absolute;
	top:5%;
	left:38%;
	font-family:sniglet;
	color:#674EA7;
	font-size:2em;
}
.boardtxt{
	position: absolute;
	top: 25%;
	left: 24%;
	width: 75%;
	color: #fff;
	font-size: 2vw;
	text-align: left;
	font-family: Andika-Regular;
}
.boardtxt-s3{
	position: absolute;
	top: 25%;
	left: 15%;
	width: 75%;
	color: #fff;
	font-size: 2vw;
	text-align: left;
	font-family:Andika-Regular;
}

/*************************************mediaquery**********************/
@media (min-aspect-ratio:4/3){
	.lesson-title{
		font-size: 8.5vh;
	}
	.title{
		font-size:2em;
	}
	.p1s1{
		font-size:2.1vw;
	}
	.p1s2{
		font-size:3vw;	
	}
	.txt1{
		font-size:1.7vw;	
	}
	.boardtxt,.txtb{
		font-size: 2vw;
	}
}
.underline{
	text-decoration: underline;
}