@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 1600px){
body {    
	padding:0px 0px 0px 0px ;
	margin:0px 0px 0px 0px ;
	background:url(../img/home/BG01homefinal-03.png);		
}

	 #main_layer
{

    position: relative;
    width: 64%;
    margin-right:10%;
	margin-left: 18%;
	z-index:0;

}
.containner {
	position:relative;
	z-index:5;
	height:100%;
	width:128%;}
#animation_container{
	z-index:5;
   margin-top:-110%;
	right:1%;
	position:relative;
	}
#canvas{
	z-index:5;
    margin-top:-110%;
	right:1%;
	position:relarive;
	}
	
	
#fun {
	z-index:5;
	position:absolute;
	top:70%;
	left:19%;

	}

	 #arabic {
	z-index:5;
	position:absolute;
	top:145%;
	left:0%;
	
	}
	#math {
	z-index:4;
	position:absolute;
	top:140%;
	left:8%;
	}
	

	#science {
	z-index:4;
	position:absolute;
	top:125%;
	right:23%;
	}
	   #friends {
	z-index:5;
	position:absolute;
	top:145%;
	right:18.6%;

	}
	  .eyes {
	z-index:5;
	position:absolute;
	top:325%;
	right:25%;

	}
		  .arabic_avatar {
	z-index:5;
	position:absolute;
	top:312%;
	left:18%;

	}
	.math_avatar {
	z-index:5;
	position:absolute;
	top:170%;
	left:27%;

	}
		  .bot_2 {
	z-index:5;
	position:absolute;
	bottom:-610%;
	right:25%;

	}
		  .bot_3{
	z-index:5;
	position:absolute;
	bottom:-550%;
	right:55%;

	}
		  .bot_4 {
	z-index:5;
	position:absolute;
	bottom:-590%;
	right:42%;

	}
			  .bot_5 {
	z-index:5;
	position:absolute;
	bottom:-600%;
	right:75%;

	}
	
audio{
	display:none;
	}
.footer{
	z-index:5;
	position:absolute;
	text-align:right;
	top:1440px;
	right:25%;
}
.footer img{
width:80%;
height:1%;
}

}
@media screen and (max-width: 1380px){
body {    
	padding:0px 0px 0px 0px ;
	margin:0px 0px 0px 0px ;
	background:url(../img/home/BG01homefinal-03.png);		
}

	 #main_layer
{

    position: relative;
    width: 64%;
    margin-right:10%;
	margin-left: 12%;
	z-index:0;

}
.containner {
	position:relative;
	z-index:5;
	height:100%;
	width:128%;}
#animation_container{
	z-index:5;
   margin-top:-131%;
	right:1%;
	position:relative;
	}
#canvas{
	z-index:5;
    margin-top:-100%;
	right:1%;
	position:relarive;
	}
	
	
#fun {
	z-index:5;
	position:absolute;
	top:79%;
	left:22%;

	}

	 #arabic {
	z-index:5;
	position:absolute;
	top:155%;
	left:0%;
	
	}
	#math {
	z-index:4;
	position:absolute;
	top:147%;
	left:9%;
	}

	#science {
	z-index:4;
	position:absolute;
	top:142%;
	right:14%;
	}
	    #friends {
	z-index:5;
	position:absolute;
	top:154%;
	right:6.5%;

	}
	 .eyes {
	z-index:5;
	position:absolute;
	top:325%;
	right:25%;

	}
		  .arabic_avatar {
	z-index:5;
	position:absolute;
	top:320%;
	left:18%;

	}
	.math_avatar {
	z-index:5;
	position:absolute;
	top:180%;
	left:32%;

	}
		  .bot_2 {
	z-index:5;
	position:absolute;
	bottom:-610%;
	right:10%;

	}
		  .bot_3{
	z-index:5;
	position:absolute;
	bottom:-550%;
	right:50%;

	}
		  .bot_4 {
	z-index:5;
	position:absolute;
	bottom:-600%;
	right:32%;

	}
			  .bot_5 {
	z-index:5;
	position:absolute;
	bottom:-610%;
	right:70%;

	}
audio{
	display:none;
	}
.footer{
	z-index:5;
	position:absolute;
	text-align:right;
	top:1440px;
	width:75%;
	margin-right:-10%;
	
	
	
}
.footer img{
width:75%;
height:1%;
}

}
@media screen and (max-width: 1280px){
body {    
	padding:0px 0px 0px 0px ;
	margin:0px 0px 0px 0px ;
	background:url(../img/home/BG01homefinal-03.png);		
}

	 #main_layer
{

    position: relative;
    width: 64%;
    margin-right:10%;
	margin-left: 10%;
	z-index:0;

}
.containner {
	position:relative;
	z-index:5;
	height:100%;
	width:128%;}
#animation_container{
	z-index:5;
   margin-top:-140%;
	right:1%;
	position:relative;
	}
#canvas{
	z-index:5;
    margin-top:-140%;
	right:1%;
	position:relarive;
	}
	
	
#fun {
	z-index:5;
	position:absolute;
	top:102%;
	left:28%;

	}

	 #arabic {
	z-index:5;
	position:absolute;
	top:175%;
	left:0%;
	
	}
	#math {
	z-index:4;
	position:absolute;
	top:167%;
	left:11%;
	}
	 #math img{

	}

	#science {
	z-index:4;
	position:absolute;
	top:161%;
	right:8%;
	}
	    #friends {
	z-index:5;
	position:absolute;
	top:174%;
	right:1%;

	}
	  .eyes {
	z-index:5;
	position:absolute;
	top:340%;
	right:5%;

	}
audio{
	display:none;
	}
.footer{
	z-index:5;
	position:absolute;
	text-align:right;
	top:1430px;
	
}
.footer img{
width:64%;
height:1%;
}

}

@media screen and (max-width: 800px){
body {    
	padding:0px 0px 0px 0px ;
	margin:0px 0px 0px 0px ;
	background:url(../img/home/BG01homefinal-03.png);		
}

	 #main_layer
{

    position: relative;
    width: 100%;
    margin-right:10%;
	margin-left: 10%;
	z-index:0;

}
 #main_layer img
{

    position: relative;
    width: 100%;
    margin-right:10%;
	margin-left: 10%;
	z-index:0;

}
.containner {
	position:relative;
	z-index:5;
	height:100%;
	width:100%;}
.containner img {
	width:10%;}
#animation_container{
	z-index:5;
   margin-top:-140%;
	right:1%;
	position:relative;
	width:50%;
	}
#canvas{
	z-index:5;
    margin-top:-140%;
	right:1%;
	position:relarive;
	width:50%;
	}
	
	
#fun {
	z-index:5;
	position:absolute;
	top:102%;
	left:28%;

	}
	 #fun img{

	width:80%;
	height:20%;
	}
	 #arabic {
	z-index:5;
	position:absolute;
	top:175%;
	left:0%;
		width:40%;
		height:10;
	
	}
	#math {
	z-index:4;
	position:absolute;
	top:167%;
	left:11%;
	}
	#math img{

	}

	#science {
	z-index:4;
	position:absolute;
	top:161%;
	right:8%;
	}
	    #friends {
	z-index:5;
	position:absolute;
	top:174%;
	right:1%;

	}
	  .eyes {
	z-index:5;
	position:absolute;
	top:340%;
	right:5%;

	}
audio{
	display:none;
	}
.footer{
	z-index:5;
	position:absolute;
	text-align:right;
	top:1430px;
	
}
.footer img{
width:64%;
height:1%;
}

}