.top{
	background: url($img_dir + 'top_bg.jpg') no-repeat center;
	background-size: cover;
	@include br3{
		background-position: 60% center;
	}
	header{
		position: relative;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-top: 3rem;
		padding-bottom: 66rem;
		background: url($img_dir + 'children.png') no-repeat 40px bottom;
		
		@include br1{
			background-position: center bottom;
			padding-bottom: 55rem;
		}
		@include br3{
			background-size: 90% auto;
			padding-bottom: 100%;
		}
		.logo{
			box-shadow: 0px 0px 4px 0px rgba(23,23,23,0.27);
			width: 329px;
			height: 178px;
			background-color: rgba(255,255,255,.9);
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			@include br2{
				width: 280px;
			}
			@include br3{
				margin: 5rem auto 0;
			}
			.phone{
				font: 30px/1 $HB;
				color: #1b2f44;
				margin-top: 5px;
				text-decoration: none;
			}
		}
		.right{
			padding-right: 2.5rem;
			display: flex;
			align-items: flex-end;
			flex-direction: column;
			flex-wrap: wrap;
			width: calc(100% - 329px);
			@include br2{
				width: calc(100% - 280px);
			}
			@include br3{
				width: 100%;
				padding-right: 0;
			}
		}
		nav{
			padding: 2rem 0;
			.icon-bar {
				display: block;
				width: 28px;
				height: 2px;
				border-radius: 1px;
				background-color: #fff;
				margin: 5px auto;
			}
			.navbar-toggle{
				display: none;
				@include br1{
					display: inline-block;
					position: absolute;
					right: 2.5rem;
					top: 3rem;
					z-index: 100;
				}
				.icon-bar:nth-of-type(2){
					top: 1px;
				}
				.icon-bar:nth-of-type(3) {
					top: 2px;
				}
				.icon-bar {
					position: relative;
					@include transition(all 200ms ease-in-out);
				}
				&.cross{ 
					.icon-bar:nth-of-type(1) {
						top: 6px;
						@include transform(rotate(45deg));
					}
					.icon-bar:nth-of-type(2) {
						background-color: transparent;
					}
					.icon-bar:nth-of-type(3) {
						top: -8px;
						@include transform(rotate(-45deg));
					}
				}
			}
			ul{
				@include br1{
					display: none;
					position: absolute;
					right: 0;
					top: 0;
					padding: 5rem 5rem 2rem 5rem;
					background: rgba(0,0,0, .9);
				}
				li{
					margin: 0 2.5rem;
					@include br1{
						display: block;
						margin: 2rem 0;
					}
					a{
						color: #fff;
						font-size: 16px;
						display: block;
						position: relative;
						line-height: 1;
						&:hover{
							text-decoration: none;
							&:before{
								content: "";
								position: absolute;
								width: 100%;
								height: 3px;
								background-color: #df4f00;
								left: 0;
								right: 0;
								bottom: -5px;
							}
						}
					}
				}
			}
		}
		.welcome{
			font-size: 42px;
			line-height: 45px;
			color: #ffffff;
			margin: 2rem 2.5rem 2rem 0;
			text-align: right;
			@include br1{
				margin: 2rem 0 0 2rem;
			}
			@include br3{
				margin: 0 auto;
				text-align: center;
			}
		}
	}
}
.fly{
	position: relative;
	margin-top: -445px;
	overflow: hidden;
	text-align: right;
	@include br1{
		margin-top: -70px;
		position: relative;
		z-index: 2;
		padding: 0 2rem;
		text-align: center;
		img{
			right: 0;
			left: 0;
		}
	}
	img{
		position: relative;
		right: -300px;	
		@media screen and (max-width: 1250px){
			right: -400px;
		}
		@media screen and (max-width: 1140px){
			right: -535px;
		}
	}
}