div#qn-svg {
	height: 96%;
    width: 100%;
    top: -11%;
}

svg{
	height:100%;
	width:100%;
}

.blink_animate{
	animation: blink_anim 0.5s infinite;
}

@keyframes blink_anim{
	0%{
		fill:#000000;
		stroke:#000000;
	}
	100%{
		fill:#9FD9FF;
		stroke:#9FD9FF;
	}
}
.topbar{
	height:15%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:5vmin;
	background-color: #F17B31;
	color: white;
	font-family: laila;
}
.blink_animate2{
	animation: blink_anim2 0.5s infinite;
}
@keyframes blink_anim2{
	0%{
		
		stroke:#000000;
	}
	100%{
		
		stroke:#9FD9FF;
	}
}

.handclick{
	position:absolute;
	z-index:1000;
	height:10%;
	width: 5%;
}

#path01, #path02, #path03, #path04{
	cursor:pointer;
	-webkit-cursor:pointer ;
}
.handclick:hover{
	cursor:pointer;
	-webkit-cursor:pointer ;
}
.taclick01,.thaclick01{
	top: 53%;
    left: 24.5%;
}
.taclick02{
	top: 33%;
    left: 16%;
	opacity:0;
}
.taclick03, .thaclick03{
	top:88%;
	left: 24.5%;
	opacity: 0;
}

.thaclick02{
	top: 33%;
	left:25%;
	opacity:0;		
}
.raclick01{
	top: 36%;
    left: 35%;

}
.raclick02{
	top: 45%;
    left: 32%;
	opacity: 0;
	
}
.raclick03{
	top: 71%;
    left: 25%;
	opacity: 0;
	
}
.saclick01{
	top: 36%;
    left: 35%;	
}
.saclick02{
	top: 45%;
    left: 32%;
	opacity: 0;	
}
.saclick03{   
	top: 30%;
    left: 20%;
	opacity: 0;
	
}
.saclick04{   
	top: 52%;
    left: 13%;
	opacity: 0;
	
}
.saclick05{
	top: 70%;
    left: 27%;
	opacity: 0;
	
}

.taanimate01{
	animation:taanimate01 5s linear forwards; 
}

@keyframes taanimate01{
	
	100%{
		transform: translate(50%,-8%);
		
	}
}

.taanimate02{
	animation:taanimate02 5s linear forwards; 
}

@keyframes taanimate02{
	
	100%{
		transform: translate(54%, 28%);
		
	}
}
.taanimate03{
	animation:taanimate03 5s linear forwards; 
}

@keyframes taanimate03{
	
	100%{
		transform:translate(45%,-55%);
		
	}
}


.thaanimate01{
	animation:thaanimate01 5s linear forwards; 
}

@keyframes thaanimate01{
	
	100%{
	 transform: translate(47%,-5%);
		
	}
}

.thaanimate02{
	animation:thaanimate02 5s linear forwards; 
}

@keyframes thaanimate02{
	
	100%{
		transform: translate(47.5%, 28%);
		
	}
}
.thaanimate03{
	animation:thaanimate03 5s linear forwards; 
}

@keyframes thaanimate03{
	
	100%{
		transform:translate(45%,-55%);
		
	}
}

.raanimate01{
	animation:raanimate01 5s linear forwards; 
}

@keyframes raanimate01{
	
	100%{
		transform:translate(40%,5%);
		
	}
}

.raanimate02{
	animation:raanimate02 5s linear forwards; 
}

@keyframes raanimate02{
	
	100%{
		transform: translate(34%,15%);

		
	}
}

.raanimate03{
	animation:raanimate03 5s linear forwards; 
}

@keyframes raanimate03{
	
	100%{
		transform:translate(45%,-45%);
		
	}
}

.saanimate01{
	animation:saanimate01 5s linear forwards; 
}

@keyframes saanimate01{
	
	100%{
		transform:translate(34%, 14%);
		
	}
}

.saanimate02{
	animation:saanimate02 5s linear forwards; 
}

@keyframes saanimate02{
	
	100%{
		transform: translate(28%, 14%);
		
	}
}
.saanimate03{
	animation:saanimate03 5s linear forwards; 
}

@keyframes saanimate03{
	
	100%{
		transform: translate(56%, 23%);
		
	}
}

.saanimate04{
	animation:saanimate04 5s linear forwards; 
}

@keyframes saanimate04{
	
	100%{
		transform: translate(73.5%, 18%) scale(.8, .7);
		
	}
}

.saanimate05{
	animation:saanimate05 5s linear forwards; 
}

@keyframes saanimate05{
	
	100%{
		transform: translate(47%, -44%);
		
	}
}

.fadeIn{
	animation:fadeIn ease 2s forwards;
}
@keyframes fadeIn{
	0%{
		opacity:0;

	}
	100%{
		opacity: 1;
	}
}

div#center_img{
	height: 69%;
	top: 9%;
}