/* image is TOP aligned and moves further up into negative on scroll so it looks a bit 3 dimensional */
#bg{	
	background:#043956 url(../slides/image_xzc.png) no-repeat center 0px; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height:250px;
	margin-top:50px;
}

/* text inside the bg image */
#bg_text{
	font-size: 40px;
	font-weight: bold;
	padding:50px 0 0 30px;
	color: #FFF;
}

.article{
	margin: -150px 0 50px 0;
}

.booking_bg{
	overflow: hidden;
	margin: 20px auto;
	padding: 20px;
	width:850px;
	height:auto;
	min-height:22px;
	border-radius: 5px;
	box-shadow: 0 0 25px rgba(0,0,0,0.4);
	background: #0A6CA1 url(../img/b_white_transparent.png) repeat-x top;
	background-size: 60px 60px;
	color:#FFF;
}

#booking_2, #booking_3{
	background: #003957;
	overflow: hidden;
	height:22px;
}
/* small labels on top of each slide */
.b_num{
	display: inline-block;
	text-align: center;
	width:22px;
	height:22px;
	line-height: 22px;
	background: url(../img/b_num_1.png) no-repeat;
	background-size: 22px 22px;
	font-weight: bold;
	color:#FFF;
}
.b_title{
	padding-left:20px;
	font-weight: bold;
	color: #FFF;
	line-height: 22px;
}

#form1, #form2, #form3{
	margin:60px 0 30px 0;
	padding:0 80px 0 80px;
}

/* input field width  */
.input_left{
	width: 440px !important;
}
.input_right{
	width:163px !important;
}

.sum_a{
	float: left;
	border-right: 1px solid #1983BB;
	width:250px;
	margin:60px 0 30px 0;
	padding:0 80px 0 80px;
}
.sum_b{
	float: right;
	width:250px;
	margin:60px 0 30px 0;
	padding:0 80px 0 80px;
}
#edit_1, #edit_2{
	margin-right:0;
}

#datepicker{
	height: 42px;
	width: 648px;
	margin: 0 0 10px 0;
	padding: 0 3% 0 3%;
	vertical-align: middle;
	background: #fff;
	border: 0px solid #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 50px;
	color: #888;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
	-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
.material-icons{
	margin-right:10px;
}
/***********************/
/* screen under 969 px */
/***********************/
@media (max-width: 969px) {
	/* image is TOP aligned and moves further up into negative on scroll so it looks a bit 3 dimensional */
	#bg{
		height:250px;
		margin-top:50px;
	}
	
	/* text inside the bg image */
	#bg_text{
		font-size: 20px;
		font-weight: bold;
		padding:50px 0 0 10px;
		color: #FFF;
	}

	.article{
		margin:-160px 10px 40px 10px;
		padding:0;
	}
	
	.booking_bg{
		overflow: hidden;
		margin: 20px auto;
		padding: 20px;
		width:550px;
		height:auto;
		min-height:22px;
		border-radius: 5px;
		box-shadow: 0 0 25px rgba(0,0,0,0.4);
		background: #0A6CA1 url(../img/b_white_transparent.png) repeat-x top;
		background-size: 60px 60px;
		color:#FFF;
	}

	#booking_2, #booking_3{
		background: #003957;
		overflow: hidden;
		height:22px;
	}
	/* small labels on top of each slide */
	.b_num{
		display: inline-block;
		text-align: center;
		width:22px;
		height:22px;
		line-height: 22px;
		background: url(../img/b_num_1.png) no-repeat;
		background-size: 22px 22px;
		font-weight: bold;
		color:#FFF;
	}
	.b_title{
		padding-left:20px;
		font-weight: bold;
		color: #FFF;
		line-height: 22px;
	}

	#form1, #form2, #form3{
		margin:60px 0 30px 0;
		padding:0 40px 0 40px;
	}

	/* input field width  */
	.input_left{
		width: 270px !important;
	}
	.input_right{
		width:140px !important;
	}

	.sum_a{
		float: left;
		border-right: 1px solid #1983BB;
		width:194px;
		margin:60px 0 30px 0;
		padding:0 40px 0 40px;
	}
	.sum_b{
		float: right;
		width:194px;
		margin:60px 0 30px 0;
		padding:0 40px 0 40px;
	}
	#edit_1, #edit_2{
		margin-right:0;
	}

	#datepicker{
		height: 42px;
		width: 442px;
		margin: 0 0 10px 0;
		padding: 0 3% 0 3%;
		vertical-align: middle;
		background: #fff;
		border: 0px solid #fff;
		font-family: 'Roboto', sans-serif;
		font-size: 16px;
		font-weight: 300;
		line-height: 50px;
		color: #888;
		-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
		-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
	}
	.material-icons{
		margin-right:10px;
	}
}
/***********************/
/* screen under 610px px */
/***********************/
@media (max-width: 610px) {
	/* image is TOP aligned and moves further up into negative on scroll so it looks a bit 3 dimensional */
	#bg{
		height:250px;
		margin-top:50px;
	}
	
	/* text inside the bg image */
	#bg_text{
		font-size: 20px;
		font-weight: bold;
		padding:50px 0 0 10px;
		color: #FFF;
	}

	.article{
		margin:-160px 10px 40px 10px;
		padding:0;
	}
	
	.booking_bg{
		overflow: hidden;
		margin: 20px auto;
		padding: 20px 10px;
		width:280px;
		height:auto;
		min-height:22px;
		border-radius: 5px;
		box-shadow: 0 0 25px rgba(0,0,0,0.4);
		background: #0A6CA1 url(../img/b_white_transparent.png) repeat-x top;
		background-size: 60px 60px;
		color:#FFF;
	}

	#booking_2, #booking_3{
		background: #003957;
		overflow: hidden;
		height:22px;
	}
	/* small labels on top of each slide */
	.b_num{
		display: inline-block;
		text-align: center;
		width:22px;
		height:22px;
		line-height: 22px;
		background: url(../img/b_num_1.png) no-repeat;
		background-size: 22px 22px;
		font-weight: bold;
		color:#FFF;
	}
	.b_title{
		padding-left:20px;
		font-weight: bold;
		color: #FFF;
		line-height: 22px;
	}

	#form1, #form2, #form3{
		margin:60px 0 30px 0;
		padding:0;
	}

	/* input field width  */
	.input_left{
		width: 94% !important;
	}
	.input_right{
		width: 94% !important;
	}

	.sum_a{
		float: none;
		border-right: none;
		width:100%;
		margin:40px 0 30px 0;
		padding:0;
	}
	.sum_b{
		float: none;
		width:100%;
		margin:20px 0 20px 0;
		padding:0;
	}
	#edit_1, #edit_2{
		margin-right:0;
	}

	#datepicker{
		height: 42px;
		width: 263px;
		margin: 0 0 10px 0;
		padding: 0 3% 0 3%;
		vertical-align: middle;
		background: #fff;
		border: 0px solid #fff;
		font-family: 'Roboto', sans-serif;
		font-size: 16px;
		font-weight: 300;
		line-height: 50px;
		color: #888;
		-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
		-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
	}
	.material-icons{
		margin-right:10px;
	}
	/* only the bottom one */
	.btn1v2 {
		width: 100% !important;
	}
}





/****************************/
/* landcape and moving cars */
/****************************/
#ftr_main .houses {
	height: 520px;
	background: url(../img/ftr_houses_white.png) center top repeat-x;
}

#ftr_main .sky1 {
	background: url(../img/ftr_sky_white.png);
}

/* when we have a high res screen */
@media (-webkit-min-device-pixel-ratio:1.5), (min-resolution:145dpi) {
	#ftr_main .houses {
		background: url(../img/ftr_houses_white_2x.png) center top repeat-x;
		background-size: 1414px auto
	}
			
	/* sky elements */
	#ftr_main .sky1 {
		background: url(../img/ftr_sky_white_2x.png) 0 0 / 1800px auto
	}
}








/* DELETE THIS IF YOU DONT NEED THESE BUTTONS as <button> */
	.bt1 {
			cursor: pointer;
			text-align: center;
			display: inline-block;
			height: 42px;
			width: 205px;
			margin: 0;
			padding: 0;
			vertical-align: middle;
			background: #19b9e7;
			border: 0;
			font-family: 'Roboto', sans-serif;
			font-size: 16px;
			font-weight: 300;
			line-height: 42px;
			color: #fff;
			-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
			text-shadow: none;
			-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
			-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
		}

		.bt1:hover { opacity: 0.75; color: #fff; }
		.bt1:active { outline: 0; opacity: 0.75; color: #fff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
		.bt1:focus { outline: 0; opacity: 0.75; background: #53B9F3; color: #fff; }
		.bt1:active:focus, button.bt1.active:focus { outline: 0; opacity: 0.75; background: #53B9F3; color: #fff; }