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

#banner-video {
    position: relative;
    right: 0;
    bottom: 0;
    /*min-width: 100%;
    min-height: 100%;*/
    width: 100%;
}

.banner{
	width:100%;
	/*height:800px;*/
	/*background:url(../Image/Others/Square.jpg);*/
	background-size:100%;
	background-repeat:no-repeat;
	margin-top:5px;
	float:left;
}

.content-text {
	float: left;
	width:100%;
	height:70%;
	background-color:rgba(255,255,255,0.7);
	display:block;
	/*margin: 10px auto;*/
	padding: 5px 0;
}

.content-text h1 {
	font-family: 'Courgette', cursive;
	font-size:36px;
	font-weight:bold;
	text-align:center;
	color:#0b4977;
	padding-top:8%;
}

.content-text p{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:20px;
	text-align:center;
	color:#333;
	padding:0% 5% 5% 5%;
}
.content-text a{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:20px;
	text-decoration:none;
	text-align:center;
	color:#fff;
	padding-top:2%;
	padding-bottom:2%;
}

.text1{
	width:50%;
	height:60%;
	background-color:rgba(255,255,255,0.7);
	display:block;
	margin:0 auto;
	margin-top:9%;
	postion:absolute;
}


.text1 h1{
	font-family: 'Courgette', cursive;
	font-size:36px;
	font-weight:bold;
	text-align:center;
	color:#0b4977;
	padding-top:8%;
}

.text1 p{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:20px;
	text-align:center;
	color:#333;
	padding:0% 5% 5% 5%;
}

.button{
	display:inline-block;
	width:23%;
	height:auto;
	background-color:#0a5e7c;
	border:3px solid #0a5e7c;
	margin-left:18%;
	float:left;
}

.button:hover, .button:focus, .button:active{
	display:inline-block;
	background-color:rgba(10,94,124,0);
	color:#074556;
	border:3px solid #0a5e7c;
	overflow:hidden;
}

.text1 a{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:20px;
	text-decoration:none;
	text-align:center;
	color:#fff;
	padding-top:2%;
	padding-bottom:2%;
}

.content{
	width:100%;
	height:700px;
	background-color:#F9F9F9;
	margin-top:6%;
	margin-bottom:5px;
	float:left;
}

.tagline{
	width:70%;
	height:auto;
	margin:0 auto;
	margin-top:8%;
	margin-bottom:-20px;
}

.tagline h2{
	font-family: 'Courgette', cursive;
	font-size:34px;
	font-weight:400;
	color:#333;
	text-align:center;
}

.tagline p{
	font-family: 'Roboto Condensed', sans-serif;
	font-size:18px;
	font-weight:200;
	text-align:center;
	color:#333;
	line-height:1.5;
}
	
.sub1{
	width:20%;
	height:250px;
	background-color:#fff;
	box-shadow: 0px 3px 10px rgba(102,102,102,0.3);
	margin-left:10%;
	margin-right:5%;
	margin-top:8%;
	float:left;
}

.sub2, .sub3{
	width:20%;
	height:250px;
	background-color:#fff;
	box-shadow: 0px 3px 10px rgba(102,102,102,0.3);
	margin-left:5%;
	margin-right:5%;
	margin-top:8%;
	float:left;
}


.sub1 img, .sub2 img, .sub3 img{
	width:100%;
	height:200px;
	overflow:hidden;
	opacity:1.0;
	filter:alpha(opacity=100);
}

.sub1 img:hover, .sub2 img:hover, .sub3 img:hover{
	opacity:0.8;
	filter:alpha(opacity=80);
}

.sub1 h3, .sub3 h3{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:22px;
	font-weight:400;
	text-align:center;
	margin-top:8px;
}

.sub2 h3{
	font-family: 'Open Sans Condensed', sans-serif;
	font-size:17px;
	font-weight:400;
	text-align:center;
	margin-top:13px;
}

.sub1 h3 a, .sub2 h3 a, .sub3 h3 a{
	text-decoration:none;
	color:#333;
}

.sub1 h3 a:hover,
.sub2 h3 a:hover,
.sub3 h3 a:hover{
	color:#666;
}


@media screen and (max-width: 1920px) and (min-width: 1600px) {
	.banner{
		width:100%;
		height:800px;
		background-size:100%;
		float:left;
	}
	
	.text1{
		width:45%;
		height:50%;
	}
	
	.text1 h1{
		font-size:42px;
	}
	
	.text1 p{
		font-size:22px;
		line-height:1.65;
		padding:0% 5% 3% 5%;
	}
	
	.content{
		height:auto;
	}
	
	.tagline{
		height:180px;
		margin-top:10%;
	}
	
	.tagline h2{
		font-size:38px;
	}
	
	.tagline p{
		font-size:20px;
	}
	
	.sub1{
		width:20%;
		height:280px;
		margin-left:13%;
		margin-right:2%;
		margin-top:5%;
		margin-bottom:150px;
	}
		
	.sub2, .sub3{
		width:20%;
		height:280px;
		margin-top:5%;
		margin-left:5%;
		margin-right:2%;
		margin-bottom:150px;
	}
	
	.sub1 img, .sub2 img, .sub3 img{
		height:230px;
	}
	
	.sub1 h3, .sub3 h3{
		font-size:22px;
		margin-top:10px;
	}
	
	.sub2 h3{
		font-size:18px;
	}

		
}
	


@media screen and (max-width: 1200px) and (min-width: 901px) {
	.banner{
		width:100%;
		height:600px;
		background-size:100%;
		float:left;
	}
	
	.text1{
		width:50%;
		height:55%;
	}
	
	.text1 h1{
		font-size:28px;
	}
	
	.text1 p{
		font-size:19px;
		line-height:1.6;
		padding:0% 5% 3% 5%;
	}
	
	.content{
		height:auto;
	}
	
	.tagline{
		height:180px;
		margin-top:10%;
	}
	
	.sub1{
		width:23%;
		height:240px;
		margin-left:8%;
		margin-right:2%;
		margin-top:8%;
		margin-bottom:100px;
	}
		
	.sub2, .sub3{
		width:23%;
		height:240px;
		margin-left:5%;
		margin-right:2%;
		margin-bottom:100px;
	}
	
	.sub1 img, .sub2 img, .sub3 img{
		height:190px;
	}
	
	.sub1 h3, .sub3 h3{
		font-size:20px;
		margin-top:10px;
	}
	
	.sub2 h2{
		font-size:14px;
	}
	
	.content{
		height:400px;
	}
		
}

@media only screen and (max-width: 900px) and (min-width: 769px){
	.banner{
		width:100%;
		height:500px;
		background-size:100%;
		float:left;
	}
	
	.text1{
		width:55%;
		height:54%;
	}
	
	.text1 h1{
		font-size:26px;
	}
	
	.text1 p{
		font-size:16px;
		line-height:1.5;
		padding:0% 5% 3% 5%;
	}
	
	.tagline{
		width:80%;
		height:180px;
		margin-top:10%;
	}
	
	.content{
		height:730px;
	}

	.sub1, .sub2, .sub3{
		width:35%;
		height:250px;
		margin-left:8%;
		margin-bottom:8%;
		margin-top:8%;
	}

}

@media only screen and (max-width: 768px) and (min-width: 481px){
	.banner{
		width:100%;
		height:350px;
		background-size:120%;
		float:left;
	}
	
	.text1{
		width:65%;
		height:65%;
	}
	
	.text1 h1{
		font-size:24px;
	}
	
	.text1 p{
		font-size:14px;
		line-height:1.5;
		padding:0% 5% 3% 5%;
	}
	
	.tagline{
		width:90%;
		height:180px;
		margin-top:10%;
		margin-bottom:3%;
	}
	
	.tagline h2{
		font-size:28px;
	}
	
	.tagline p{
		font-size:17px;
	}
	
	.sub1, .sub2, .sub3{
		width:36%;
		height:220px;
		margin-left:8%;
		margin-bottom:8%;
	}
	
	.sub1 h3, .sub3 h3{
		font-size:18px;
		margin-top:14px;
	}
	
	.sub2 h3{
		font-size:14px;
	}
	
	.sub1 img, .sub2 img, .sub3 img{
		height:170px;
	}
	
	.content{
		height:760px;
	}
	
	.text1 a{
		font-size:17px;
	}

}

@media only screen and (max-width: 480px) and (min-width: 321px){
	.banner{
		width:100%;
		height:330px;
		background-size:150%;
		float:left;
	}
	
	.text1{
		width:85%;
		height:68%;
	}
	
	.text1 h1{
		font-size:20px;
	}
	
	.text1 p{
		font-size:12px;
		line-height:1.5;
		padding:0% 5% 3% 5%;
	}
	
	.tagline{
		width:92%;
		height:140px;
		margin-top:10%;
		margin-bottom:12%;
	}
	
	.tagline h2{
		font-size:20px;	
	}
	
	.tagline p{
		font-size:14px;
	}
	
	.sub1, .sub2, .sub3{
		width:60%;
		height:250px;
		margin-left:20%;
		margin-top:5%;
		margin-bottom:6%;
	}
	
	.sub1{
		margin-top:15%;
	}
	
	.sub1 img, .sub2 img, .sub3 img{
		height:200px;
	}
	
	.sub1 h3, .sub3 h3{
		font-size:20px;
	}
	
	.sub2 h3{
		font-size:13px;
		margin-top:13px;
	}
	
	.button{
		width:20%;
	}
	
	.text1 a{
		font-size:14px;
	}
	
	.content{
		height:960px;
	}

}

@media only screen and (max-width: 320px) {
	.banner{
		width:100%;
		height:350px;
		background-size:150%;
		float:left;
	}
	
	.text1{
		width:90%;
		height:53%;
	}
	
	.text1 h1{
		font-size:16px;
	}
	
	.text1 p{
		font-size:12px;
		line-height:1.4;
		padding:0% 5% 0% 5%;
	}
	
	.tagline{
		width:92%;
		height:140px;
		margin-top:10%;
		margin-bottom:12%;
	}
	
	.tagline h2{
		font-size:20px;	
	}
	
	.tagline p{
		font-size:14px;
	}
	
	.sub1, .sub2, .sub3{
		width:80%;
		height:250px;
		margin-left:10%;
		margin-top:5%;
		margin-bottom:6%;
	}
	
	.sub1 h3, .sub3 h3{
		font-size:18px;
	}
	
	.sub2 h3{
		font-size:14px;
		margin-top:10px;
	}
	
	.button{
		width:20%;
		margin-left:17%;
	}
	
	.text1 a{
		font-size:13px;
	}
	
	.content{
		height:900px;
	}
	
}