@charset "utf-8";
/* CSS Document */
body,html,div,span,
h1,h1,p,ul,li,img,small,form {margin:0; padding:0; font:inherit; font-size:100%; vertical-align:baseline;}
html {line-height:1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body {font-family: 'Open Sans', sans-serif; font-size:1em; color:#333333; font-weight:300; background-color:#fff;}
ul,li {list-style:none;}
button,
input,
select,
textarea {
  outline: 0;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 14px;
  border: none;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  max-width: 100%;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.clearfix:after {content: ""; display: table; clear: both;}
strong {font-weight:700;}

.text_center {text-align:center;}

.outer {max-width:768px; margin:0 auto;}
.header {padding:1.5em 0;}
.header h1 {text-align:center; font-size:3em; line-height:1.1;}
.header h1 small {font-size:0.6em;}

.color_main {color:#078dd5;}
.color_second {color:#ffba00;}

.main_h1 {font-size:1.4em; color:#fff; line-height:1.2em; padding:0 20px; height:70px; text-shadow:1px 1px rgba(0,0,0,1);}
.main_h1 span {display:block;}
.main_content {position:relative; width:100%; background:url(images/bg_image.jpg) center bottom no-repeat; background-size:100% 100%; min-height:505px; padding-top:70px; z-index:2;}

.choose_color {text-align:center; background-color:#f6f6f6; padding:1em 0 0.5em; margin-bottom:1em;}
.choose_color ul {margin-top:15px;}
.choose_color ul li {display:inline-block; text-align:left; margin:0 5px; position:relative; height:40px;}
.choose_color ul a, .choose_color ul a:visited {width:32px; height:32px; -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px; display:inline-block;}
.choose_color ul a span {position:absolute; top:9px; left:38px; width:65px; visibility:hidden; display:block; font-size:0.8em;}
.choose_color ul a:hover, .choose_color ul a:focus, .choose_color ul a:active {
-moz-box-shadow:    inset 0 1px 2px rgba(0,0,0,0.4);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
box-shadow:         inset 0 1px 2px rgba(0,0,0,0.4);}
.choose_color ul a:active, .choose_color ul a:focus {outline:0; margin-right:65px;}
.choose_color ul a:active span, .choose_color ul a:focus span {visibility:visible; outline:0; z-index:2;}

.choose_color .color1 {background-color:#d0d0d4;}
.choose_color .color2 {background-color:#9b9ba0;}
.choose_color .color3 {background-color:#d4bba3;}
.choose_color .color4 {background-color:#d0a8a0;}

.form_content {margin-right:55%; padding:0 3% 1.5em 3%; color:#fff;}
.form_content:before {position:absolute; left:0; top:140px; right:55%; bottom:0; background-color:#078dd5; content:""; display:block; z-index:-1;}
.form_content .title {text-align:center; font-size:1.6em; padding:0.8em 0 0.7em;}
.form_content p {margin-top:0.4em;}
.form_content label {width:32%; margin-right:2%; font-size:0.8em; display:inline-block; vertical-align:middle; text-align:right;}
.form_content input {width:66%; padding:6px 7px; vertical-align:middle; display:inline-block; background:#fff; border:1px solid #fff;}
.form_content select {width:66%; padding:6px 7px; vertical-align:middle; display:inline-block; background:#fff; border:1px solid #fff;}
.form_content .post_code {width:40%;}
.form_content small {display:block; margin-left:34%; font-size:0.75em; padding:1em 0 0.5em;}
.form_content textarea {vertical-align:top; height:60px; resize:none; width:66%; padding:8px 7px; background:#fff; border:1px solid #fff;}
.form_content input:focus, .form_content textarea:focus {border:1px solid #078dd5;}
.form_content .txtarea_label {padding-top:9px;}
.form_content .button {display:block; margin-left:34%; text-decoration:none; background-color:#ffba00; padding:0.9em 5px; text-align:center; color:#333333; margin-top:1em;}
.form_content .button button { background-color:#ffba00; text-align:center; color:#333; border:none; cursor:pointer; }

.left_col {float:left; width:50%;}

.bot_title {font-size:1.6em; padding:0 0 10px; line-height:1.5em; text-transform:uppercase;}
.bot_title span {text-transform:none; display:block;}

.bot_list {}
.bot_list li {background:url(images/bullet_point.png) left 10px no-repeat; padding:0 0 0 15px; margin-top:10px; line-height:1.5em;}
.padd {padding:15px;}


.right_col {float:right; width:50%; background-color:#f6f6f6;}
.right_col h1 {text-align:center; font-size:1.4em; padding-top:0.5em; margin-bottom:0.8em;}
.right_col p {font-size:0.9em; line-height:1.8em;}


@media all and (max-width: 700px) {
	.header h1 {font-size:2.4em; line-height:1.1;}
	.form_content .title {font-size:1.4em; padding:1em 0 0.6em;}
	.form_content {margin-right:45%;}
	.form_content:before {right:45%;}
	.form_content input {padding:6px 5px;}
}
@media all and (max-width: 600px) {
	.header h1 {font-size:2.1em; line-height:1.1;}
	.form_content {margin-right:35%;}
	.form_content:before {right:35%;}
}
@media all and (max-width: 500px) {
	.header h1 {font-size:1.8em; line-height:1.1;}
	.main_content {background:url(images/bg_image.jpg) right top no-repeat; background-size:auto;}
	.form_content {padding:0 2% 1em 2%; margin-right:0;}
	.form_content:before {right:0;}
	.form_content .title {font-size:1.1em; padding:0.7em 0 0.3em; text-align:left;}
	.form_content label {width:100%; margin-right:0; margin-bottom:6px; display:block; text-align:left;}
	.form_content input {width:100%;}
	.form_content textarea {width:100%;}
	.form_content small {display:block; margin-left:0;}
	.form_content .txtarea_label {padding-top:0;}
	.form_content .button {margin-left:0;}
	.form_content .post_code {width:55%;}
}
@media all and (max-width: 400px) {
	.header {padding:.5em 0;}
	.header h1 {font-size:1.3em; line-height:1.1;}
	.left_col {float:none; width:100%; font-size:0.8em;}
	.right_col {float:none; width:100%; font-size:0.8em;}
	.choose_color {padding:0.8em 0 0.2em; margin-bottom:0; text-align:center;}
	.choose_color ul li {display:inline-block; width:45px; position:relative; height:70px; text-align:center;}
	.choose_color ul a, .choose_color ul a:visited {width:32px; height:32px; -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px; display:inline-block; margin:0;}
	.choose_color ul a span {position:absolute; top:36px; left:0; right:0; width:auto;}
	.choose_color ul a:active, .choose_color ul a:focus {margin-right:0;}
}
@media all and (max-width: 300px) {
	.header h1 {font-size:1.2em; line-height:1;}
}