/* ==========================================================================
   Custom CSS
   ========================================================================== */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
	background:#fff;
	font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
	font-size:15px;
	line-height:1.5;
	color:#333;
	letter-spacing:normal;
}

h1 {
	font-size:26px;
}

h2 {
	font-size:18px;
	color:#fff;
	background:#353535;
	margin:0 auto;
	margin-top:-36px;
	padding:5px;
	width:200px;
	border-radius: 0 0 5px 5px;
}

h3 {
	font-size:22px;
}
h4 {
	font-size:20px;
	margin-bottom:20px;
}

p {
	margin:10px 0;
}

a {
	text-decoration:none;
}

p a {
	font-weight:bold;
	color:#40586B;
}

strong {
	font-weight:bold;
}

ol {
	list-style: decimal;
	margin-left:45px;
}

ul {
	list-style: disc;
	margin-left:45px;
}

ol li, ul li {
	padding-left:5px;
}

a.button, input[type="submit"], input[type="reset"] {
	padding:8px 16px;
	font-size:16px;
	cursor:pointer;
	background:#2e8bc8;
	color:#fff;
	border:1px solid #fff;
	border-radius:4px;
	margin-top:5px;
}

input[type="reset"] {
	background:#656565;
}

a.button {
	display:inline-block;
	font-weight:normal;
}

input[type="text"], textarea, select {
	width:100%;
	padding:8px 5px;
	line-height:1.5;
	border-radius: 5px;
	border:1px solid #ccc;
}

textarea {
	min-height:100px;
	font-family:FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
}

header {
	z-index:5;
	position:fixed;
	width:100%;
}

nav {
	max-width:960px;
	border-radius: 0 0 7px 7px;
	margin:0 auto;
	border-bottom:1px solid #777;
	background: rgb(226,226,226); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}

#topnav {
	border-radius: 0 0 7px 7px;
	box-shadow: 0 1px 4px #555;
	overflow:hidden;
}

#topnav .logo-icon {
	float:left;
	width:20%;
	border-right:1px solid #bbb;
	padding:1px 0;
}

.menu-toggle {
	display:none;
	color:#454545;
}

.menu {
	margin-left:20%;
	overflow:hidden;
}
.menu a {
	width: 25%;
	display:block;
	float:left;
	text-align:center;
	padding:17px 0;
	border-right:1px solid #bbb;
	color:#333;
	font-size:16px;
}

.menu a:last-child {
	border-right:0;
}

.content {
	padding: 35px 0;
	min-height:150px;
}

.container {
	max-width:960px;
	margin:0 auto;
}

.banner {
	background:url('../images/background.png') center -15px no-repeat;
	height:540px;
}

.front-logo {
	margin-top:145px;
}

.language {
	margin-top:20px;
}

.language a {
	padding:5px 8px;
	margin:10px;
	color:#eee;
	font-size:12px;
	font-weight:normal;
	border:1px solid #fff;
	border-radius:15px;
	background:rgba(0,0,0,.2);
}

.language a.active, .language a:hover {
	background:rgba(255,255,255,.4);
	color:#333;
}

.about i, .services i, .student i, .host i {
	margin-bottom:7px;
	vertical-align:middle;
}

.index-card {
	padding:20px 15px;
	background:#dddbdb;
}

.indexcard-title {
	margin-top:10px;
}

.bar {
	border-top:1px solid #d7d7d7;
}

.wood {
	background:url(../images/wood.png) repeat-x center center;
	min-height:250px;
	box-shadow:inset 0 0 50px #111;
}

.wall {
	background:url(../images/wall5.png) repeat center center;
}

footer {
	background:#333;
	min-height:300px !important;
}

footer h3 {
	font-size:18px;
	color:#ccc;
}

footer p {
	font-size:14px;
}

footer a {
	color:#fff;
	font-weight:normal;
}

.box {
	box-shadow:0 1px 2px #999;
	background:#dddbdb;
	margin-top:20px;
}

.hc-title {
	font-style:italic;
	color:#777;
}

div.and { position:relative; }

div.and:before {
	content:'&';
	position:absolute;
	font-size:150px;
	z-index:3;
	top:-155px; left:43%;
	color:#999;
	font-family:garamond, serif;
}

.fee {
	font-size:46px;
	width:160px; height:160px;
	margin:0 auto;
	border-radius:80px;
	background:#40586B;
	padding:25px 15px;
	color:#fff;
	text-indent:-3px;
}

.currency {
	font-size:18px;
	vertical-align:top;
	display:inline-block;
	margin-top:15px;
}

.description{
	display:block;
	font-size:14px;
	font-weight:bold;
	line-height:1.3;
	margin-top:-8px;
	text-indent:3px;
}

.homestay-fee {
	width:380px;
	margin:0 auto;
}

.homestay-fee > div {
	float:left;
}

.homestay-fee .fee {
	padding-top:32px;
	background:#CE3537;
}

.or {
	font-size:42px;
	width:60px; height:160px;
	padding-top:43px;
	color:#ccc;
}

.homestay-fee:after {
	content:'';
	display:block;
	clear:both;
}

.ma-bo {
	margin-bottom:15px;
}

.form-line {
	margin-bottom:5px;
	border-bottom:1px solid #ccc;
}

.note {
	border:5px solid #ddd;
	padding:0 20px 10px;
}

#application {
	display:none;
}

form span {
	white-space:nowrap;
}

.oneline {
	white-space:nowrap;
}

.gallery {
	padding:5px;
}

.gallery img {
}

.ui-datepicker-month, .ui-datepicker-year {
	padding:0;
}

.form-error {
	display:none;
}

/*
 * General styles
 */


.pad {
	padding:10px;
}

.martop {
	margin-top:40px;
}
 
.bg-grey {
	background:#e7e7e7;
}

.centered {
	text-align:center;
}

.left {
	float:left;
	margin-right:20px;
}

.right {
	float:right;
	margin-left:20px;
}

.white {
	color:#fff;
}

.grey {
	color:#777;
}

.above-space {
	margin-top:25px;
}

.above-space-big {
	margin-top:35px;
}

.iconspace {
	margin-left:10px;
}

.logo-icon img {
	margin-top:6px;
}

.width-check {
	display:none;
}

@media screen and (min-width: 1500px) {
	.banner {
		background-size:cover;
		height:620px;
	}
	.front-logo {
		margin-top:180px;
	}
}

@media screen and (max-width: 978px) {
	nav {
		border-radius:0;
	}
	
	#topnav {
		border-radius:0;
	}
}

@media screen and (max-width: 860px) {
    div.and:before {
		top:-120px; left:43%;
	}
}

@media screen and (min-width: 600px) and (max-width: 850px) {
	.banner {
		background-position: -250px -15px;
	}
	.front-logo {
		margin-top:14%;
	}
}

@media screen and (max-width: 600px) {
	.width-check {
		display:block;
	}
	.banner {
		position:relative;
		background:#274A7E;
	}
}

@media screen and (max-width: 567px) {
    div.and:before {
		top:-120px; left:40%;
	}
	.above-space-big {
	margin-top:25px;
	}
	h2 {
		width:auto;
		border-radius:0;
	}
	footer .pure-u-1 {
		text-align:center;
	}
	.push-left {
		text-align:left;
	}
}

@media screen and (max-width: 500px) {
	.menu-toggle {
		display:block;
		padding:14px 0 13px;
		float:right;
		width:16%;
		text-align:center;
	}
	.menu {
		width:100%;
		margin-left:0;
		background:#f7f7f7;
		display:none;
	}
	.menu a {
		float:none;
		width:100%;
		border-right:0;
		border-bottom:1px solid #777;
	}
	.logo-icon {
		border-right:0 !important;
	}
	nav {
		height:58px;
	}
}

@media screen and (max-width: 420px) {
	.homestay-fee {
		width:320px;
	}
	.homestay-fee .fee {
		width:140px; height:140px;
		border-radius:70px;
		padding-top:28px;
	}
	.or {
		width:40px; height:140px;
		padding-top:42px;
		font-size:35px;
	}
	.martop {
		margin-top:50px;
	}
}