@charset "utf-8";
*{		margin:0;
		padding:0;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-o-box-sizing:border-box;
		-webkit-box-sizing:border-box;}
	
body{	font-size:0.625em;
		color:#000;
		font-family:"Arial";
		background:#898a8a;}

html {
	width:100%;
	height:100%;}
a{		text-decoration:none;}


li{	float:left;}


ul{	list-style:none;}

li{	line-height:1.2;}

img{	border:0;}

.clear{	clear:both;}

.container{		width:100%;
				margin:auto;
				height:auto;}
				
.container .container1{ width:960px;
						margin:auto;
						position:relative;
						box-shadow:0 0 10px black;
						background-color:#fe5d02;}				
				
/*--------------------header-------------------*/

.container .headerWrapper{	width:100%;
							margin:auto;
							height:auto;
							position:relative;
							}
				

							
.container .headerWrapper .header{		width:960px;
										margin:auto;
										position:relative;
										}							

.container .headerWrapper .header .right {width:505px;
										position:relative;
										float:right;
										height:auto;
										margin:auto;
										margin-top:10px;
										margin-right:0;
										}

.container .headerWrapper .header .right h1{	float:left;
											margin-left:5px;
											font-size:1.6em;}
											
										

.container .headerWrapper .header .right p{	font-size:1.4em;
											padding:1px;
											float:left;
											text-align:center;
											}

.container .headerWrapper .header .right p:hover{	text-decoration:underline;}


 .icons{
width:120px;
height:40px;
position:relative;
float:right;
padding-right:10px;
padding-top:10px;

}

.icons li{
float:left;
padding-left:2px;
}

.icons a{
display:block;
width:33px;
height:34px;
}

.icons .btn1{
background:url(../images/icons.png) no-repeat 0 0;
}
.icons .btn2{
background:url(../images/icons.png) no-repeat 50% 0;
}
.icons .btn3{
background:url(../images/icons.png) no-repeat 100% 0;
}

.icons .btn1:hover{
background:url(../images/icons.png) no-repeat 0 100%;
}
.icons .btn2:hover{
background:url(../images/icons.png) no-repeat 50% 100%;
}
.icons .btn3:hover{
background:url(../images/icons.png) no-repeat  100% 100%;
}							


.container .headerWrapper .header .right .icons .btn1{
background:url(../images/icons.png) no-repeat 0 0;
}
.container .headerWrapper .header .right .icons .btn2{
background:url(../images/icons.png) no-repeat 50% 0;
}
.container .headerWrapper .header .right .icons .btn3{
background:url(../images/icons.png) no-repeat 100% 0;
}

.container .headerWrapper .header .right .icons .btn1:hover{
background:url(../images/icons.png) no-repeat 0 100%;
}
.container .headerWrapper .header .right .icons .btn2:hover{
background:url(../images/icons.png) no-repeat 50% 100%;
}
.container .headerWrapper .header .right .icons .btn3:hover{
background:url(../images/icons.png) no-repeat  100% 100%;
}


.container .headerWrapper .header .left {	width:290px;
										position:relative;
										margin:auto;
										float:left;
										margin:10px 0;
										cursor:pointer;
										background:url(../images/Umabel-Education_logo.png) no-repeat left center;
										background-size:34%;}

.container .headerWrapper .header .left h2{		float:left;
												width:300px;
												font-size:1.6em;
												margin:1px 100px;
												position:relative;}
											
										
/*--------------------banner-------------------*/
/*.container .bannerWrapper{		width:100%;
								position:relative;
								margin:auto;
								background-image:linear-gradient(#fe5d02,#ff7200);
								background-image:-moz-linear-gradient(#fe5d02,#ff7200);
								background-image:-o-linear-gradient(#fe5d02,#ff7200);
								background-image:-wekite-linear-gradient(#fe5d02,#ff7200);
								background-image:-ms-linear-gradient(#fe5d02,#ff7200);
								}*/

.container .bannerWrapper  .banner{	width:960px;
									min-height:350px;
									position:relative;
									margin:auto;
									overflow:hidden;}

.container .bannerWrapper .banner .gallery1{width:95000px;
										min-height:350px;
										float:left;
										position:relative;
										margin-bottom:-50px;}

					
.container .bannerWrapper .banner .gallery1 ul li{float:left;
											}
					
.container .bannerWrapper .banner .tabs{width:12%;
										height:12px;
										position:absolute;
										z-index:99;
										margin-top:325px;
										margin-left:837px;
										}

.container .bannerWrapper .banner .tabs ul li{width:10%;
height:12px;
float:left;
margin-left:5px;
background-color:white;
cursor:pointer;}												

.container .bannerWrapper .banner .tabs ul li:hover,.container .bannerWrapper .banner .tabs ul li.active{
background-color:orange;
}

/*-------------------------nav-------------------*/
.container .nav{width:960px;
				height:40px;
				margin:auto;
				position:relative;
				background-color:#28bdd3;
				margin-top:-5px;}


.container .nav ul li ul li{	float:none;}

.container .nav ul li a{display:block;		
					color:#000;
					line-height:40px;
					font-size:1.6em;
					padding:0 16px;
					
					font-weight:bold;}


.container .nav ul li ul{	position:absolute;
						display:none;
						}


.container .nav ul li:hover ul{display:block;
						margin:auto;
						z-index:100;
						border-radius:5px;
						}
						
.container .nav ul li ul li:hover ol{background-color:#28bdd3;
						display:block;}

.container .nav ul li ul li ol{background-color:#28bdd3;
						display:none;
						list-style:none;
						margin:auto;
						position:absolute;
						margin-left:175px;
						width:100%;
						padding:3px 0;
						margin-top:-26px;
						transition: all 0.5s;
						-webkit-transition: all 0.5s ;
						-moz-transition: all 0.5s ;
						-ms-transition: all 0.5s ;
						-o-transition: all 0.5s ;
						}						

.container .nav ul li ul li a{background-color:#28bdd3;
						padding:3px 15px;
						line-height:1.2;
						font-size:1.2em;
						transition: all 0.5s;
						-webkit-transition: all 0.5s ;
						-moz-transition: all 0.5s ;
						-ms-transition: all 0.5s ;
						-o-transition: all 0.5s ;
						}
						
						
						
.container .nav ul li a:hover{/*background-color:#b9bfc0;*/
						border-radius:0px 0px 0 0;
						text-decoration:underline;
						color:#FFF;}
.container .nav ul li a:hover,.container .nav ul li a.active{/*background-color:#b9bfc0;*/
text-decoration:underline;
						color:#FFF;}
/*-------------------content------------------*/

.container .content{	width:960px;
					margin:auto;
					background:#fff;
					position:relative;
					}

.container .content .animate{	width:960px;
								height:auto;
								margin:auto;
								background:#ffd200;
								}


.container .content .contentbody{ width:100%;
								padding:30px 10px;}								
						
.container .content .contentbody img{	float:left;
									margin-left:40px;}

.container .content .contentbody ul { width:100%;
									
									margin-left:0px;}
									
.container .content .contentbody ul li{display:block;		
									color:#000;
									font-size:1.4em;
									line-height:1.5;
									padding:0 50px;
									padding-top:10px;}							
.container .content .contentbody .text{color:red; float:left;
									margin-right:310px;}
.container .content .contentbody .text1{
										margin-right:220px;}									
/*--------------------footer----------------*/
/*.footerWrapper{				width:100%;
							margin:auto;
							height:80px;
							position:relative;
							background:#ffd200;
							clear:both;
							margin-top:10px;}*/
							
.footerWrapper .footer{		width:960px;
							margin:auto;
							height:80px;
							position:relative;
						}


.footerWrapper .footer ul li a{display:block;		
					color:#000;
					font-size:1.2em;
					padding:15px 10px;
					text-align:center;
					font-weight:normal;}
					
					
.footerWrapper .footer  h1{display:block;		
					color:#000;
					font-size:1.2em;
					margin-top:40px;
					margin-left:-245px;
					float:left;
					text-align:center;
					font-weight:normal;}

									

@media screen and (min-width:320px) and (max-width:640px){
.container .headerWrapper .header{		width:93%;}

.container .headerWrapper .header .right {width:100%;
										position:relative;
										float:left;
										height:auto;
										margin:auto;
										margin-top:2px;
										margin-right:-20px;}

.container .headerWrapper .header .left {	width:30%;
										margin-top:20px;
										float:left;
										position:relative;}
										
										
.container .headerWrapper .header .left h2{		width:222%;
												font-size:1.6em;
												margin:0 100px;
												position:relative;}										

.container .bannerWrapper .banner{	width:93%;
									min-height:100px;
									margin:auto;
									}

.container .bannerWrapper .banner img{width:66.66%;
									min-height:350px;
									margin:auto;}								
									
.container .bannerWrapper .banner .tabs{width:28%;
										height:12px;
										position:absolute;
										z-index:99;
										float:left;
										margin-top:280px;
										margin-left:210px;
										}
										
										
.container .nav{	width:93%;
				margin:auto;
				height:250px;
				margin-top:10px;}	

.container .nav ul li{float:none;}	

.container .content{	width:93%;
					margin-top:20px;
					padding:10px 0 10px 0;}

.container .content .animate{	width:100%;}


.container .content .contentbody{ width:100%;}								
								
.container .content .contentbody img{	float:none;
									margin-left:40px;
									vertical-align:center;}

.container .content .contentbody ul li { float:none;
									width:100%;
									margin-left:0;
									padding:0 5px;}
								

.footerWrapper .footer{		width:93%;
	}	

.footerWrapper .footer .icons{display:none;}

.footerWrapper .footer ul li a{display:block;		
					color:#000;
					width:100%;
					font-size:1.1em;
					padding:5px 2px;
					text-align:center;
					font-weight:normal;}


.footerWrapper .footer  h1{display:block;		
					color:#000;
					font-size:1.2em;
					margin-top:14px;
					margin-left:0;
					float:left;
					text-align:center;
					font-weight:normal;}					
												
}



@media  screen and (max-width:640px) and (orientation:landscape){
.container .headerWrapper .header{		width:93%;}

.container .headerWrapper .header .right {width:60%;
										float:left;
										height:auto;
										margin:auto;
										margin-top:2px;
										margin-right:-20px;}

.container .headerWrapper .header .left {	width:60%;
										margin-top:20px;
										float:left;
										}

.container .headerWrapper .header .left h2{		width:70%;
												font-size:1.6em;
												margin:0 100px;
												position:relative;}	
												
.container .bannerWrapper .banner{	width:93%;
									min-height:100px;
									margin:auto;
									}												
												
																				
.container .bannerWrapper .banner .tabs{width:12%;
										height:12px;
										}

.footerWrapper .footer{		width:93%;
							padding:10px 20px;
							width:100%;}	

.footerWrapper .footer ul li a{display:block;		
					color:#000;
					font-size:1.2em;
					padding:0 2px;
					text-align:center;
					font-weight:normal;
					width:100%;}
					
					
.footerWrapper .footer  h1{display:block;		
					color:#000;
					font-size:1.2em;
					margin-top:10px;
					margin-left:-79px;
					float:left;
					text-align:center;
					font-weight:normal;
					width:100%;}										
}