/* CSS Document */
body#contact a#contact_nav {
	color: #99cc33;
}
form {
	max-width:800px;
	margin:0 auto;
}
section#box2 {
	background-color:#dadada;
}
form h4 {
	color:#666666;
	font-style:italic;
	font-size:18px;
	font-weight:lighter;
	line-height:1.5em;
	word-spacing:2px;
}
label span {
	display:inline-block;
	width:200px;
	color:#4b4b4b;
	font-size:18px;
	font-weight:bold;
	line-height:2em;
}
span.red {
	color:red;
	padding:10px;
	width:20px;
}
span.long_text {
	position:relative;
	bottom:30px;
}
#contact-form input,
#contact-form textarea {
   /* width:100%;*/
    width:400px;
    box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
    -webkit-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
    -moz-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
    border:1px solid #CCC;
    background:#FFF;
    margin:30px;
	margin-left:90px;
    padding:10px;
    border-radius:5px;
}
/*We can then target the button in the same way:*/

#contact-form button[type="submit"] {
    cursor:pointer;
   /* width:100%;*/
    border:none;
    background:#92bbd6;
    color:#FFF;
    padding:10px 20px;
    border-radius:5px;
	position:relative;
	display:block;
	text-decoration:none;
	width:200px;
	margin:0 auto;	
	border:solid 1px #92bbd6;
	text-align:center;
	
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	
	-webkit-box-shadow: 0px 6px 0px #7ca6ca;
        -moz-box-shadow: 0px 6px 0px #7ca6ca;
        box-shadow: 0px 6px 0px #7ca6ca;
}
#contact-form button:active{
    -webkit-box-shadow: 0px 2px 0px #7ca6ca;
    -moz-box-shadow: 0px 2px 0px #7ca6ca;
    box-shadow: 0px 2px 0px #7ca6ca;
    position:relative;
    top:4px;
}

/*CSS3 allows us to style the HTML5 placeholder text colours, which is great for that additional touch.*/

::-webkit-input-placeholder {
    color:#c1c1c1;
}
:-moz-placeholder {
    color:#c1c1c1;
}
::-moz-placeholder {
    color:#c1c1c1;
}
:-ms-input-placeholder {
    color:#c1c1c1;
}

/*for address and map*/
#control5 {
	max-width:800px;
	margin:100px auto;
}
/*google map responsive*/
#map {
	position: relative;
	padding-bottom: 50%; // This is the aspect ratio
	height: 0;
	overflow: hidden;
}
#map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
.address {
	max-width:250px;
	float:left;
	margin-right:60px;
	color:#4b4b4b;
	font-weight:bolder;
	line-height:2em;
}
/*captcha postion*/
div.g-recaptcha {
	max-width:204px;
	margin:0 auto;
	margin-bottom:20px;
}
@media screen and (max-width:850px) {
	#contact-form input, #contact-form textarea {
		width:300px;
	}
}
@media screen and (max-width:820px) {
	form h4, label span {
		font-size:16px;
	}
	span.long_text{
		bottom:40px;
	}
}
@media screen and (max-width:720px) {
	#contact-form input, #contact-form textarea {
		margin-left:30px;
		width:250px;
	}
	#map {
	padding-bottom: 60%; 
	}
	.address {
		margin-right:20px;
	}
}
@media screen and (max-width:620px) {	
	.address {
		float:none;
		width:100%;
		line-height:1.5em;
		margin:0 auto;
	}
	#contact-form input, #contact-form textarea {
		margin-left:0;
	}
	#control5 {
		margin-bottom:0px;
	}
	#map {
		margin-top:40px;
	}
	#contact-form button[type="submit"] {
		width:90%;
		right:5%;
	}
	div.g-recaptcha {
	max-width:604px;
}
}
@media screen and (max-width:570px) {
	form h4, label span {
		font-size:14px;
	}
		#contact-form input, #contact-form textarea {
		width:200px;
		width:80%;
	}
		span.long_text {
		bottom:0;
	}	
	#contact-form button[type="submit"] {
		width:85%;
		right:8%;
	}
}
@media screen and (max-width:510px) {
	::-webkit-input-placeholder {
    font-size:12px;
	}
	:-moz-placeholder {
		font-size:12px;
	}
	::-moz-placeholder {
	   font-size:12px;
	}
	:-ms-input-placeholder {
		font-size:12px;
	}
	#map {
		padding-bottom:80%;
	}
}