#quotation-service .quote-head { 
border-bottom: 1px solid #ddd; 
border-top: 1px solid #ddd; 
color: #363636;
font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; 
line-height: 1.8em; 
margin-top: 25px; 
margin-bottom: 25px; 
padding: 12px 0; 
text-align: center; 
}

h3 {
font-weight: bold;
font-size: 1.44em;
margin-bottom: 10px;
}

.content-2{
display:inline-block;
}


.content-3{
display:inline-block;
}


.content-4{
display:inline-block;
}

.content-5{
display:inline-block;
}


/** main blocks **/
#quotation-service { 
display:inline-block;
max-width: 1028px;
margin: 0 auto; 
margin-bottom: 16px;
padding: 0px 0px 0px 0px; 
background: #fff; 
border-radius: 6px; 
-webkit-border-radius: 6px; 
-moz-border-radius: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; 
box-sizing: border-box;  
}


#buttons { display: block;
padding-top: 30px; }
#buttons #resetbtn {
	font-family:"Open Sans", Helvetica, Arial, sans-serif;
display: block;
float: left;
color: #515151;
text-shadow: -1px 1px 0px #fff;
margin-right: 30px;
margin-top:0px;
margin-left: 5%;
height: 3em;
padding: 0 1em;
outline: 0;
font-weight: bold;
font-size: 16px;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #fff;
background-image: -moz-linear-gradient(top,  rgb(255,255,255) 2%, rgb(240,240,240) 2%, rgb(222,222,222) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(240,240,240)), color-stop(100%,rgb(222,222,222)));
background-image: -webkit-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);
background-image: -o-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);    background-image: -ms-linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%);
background-image: linear-gradient(top,  rgb(255,255,255) 2%,rgb(240,240,240) 2%,rgb(222,222,222) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dedede',GradientType=0 );
border: 1px solid #969696;
box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
-moz-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
-webkit-box-shadow: 0 1px 2px rgba(144, 144, 144, 0.4);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
width: 100%;
}

#buttons #resetbtn:hover {
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);	
color: #818181;
background-color: #fff;
background-image: -moz-linear-gradient(top,  rgb(255,255,255) 2%, rgb(244,244,244) 2%, rgb(229,229,229) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(255,255,255)), color-stop(2%,rgb(244,244,244)), color-stop(100%,rgb(229,229,229)));
background-image: -webkit-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%);background-image: -o-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: -ms-linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); background-image: linear-gradient(top,  rgb(255,255,255) 2%,rgb(244,244,244) 2%,rgb(229,229,229) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
border-color: #aeaeae;
box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
}

#buttons #submitbtn {
	margin-top:0px;
	font-family:"Open Sans", Helvetica, Arial, sans-serif;
display: block;
float: right;
height: 3em;
border: 1px solid #109D3D;
outline: 0;
font-weight: bold;
font-size: 16px;
color:  #fff;
text-shadow: 0px 1px 1px #0A2F50;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border-color: #109D3D;
-moz-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
-ms-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
-webkit-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
background: #109D3D;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#286d3e', endColorstr='#269447', GradientType=0 );
width: 100%;
}
#buttons #submitbtn:hover, #buttons #submitbtn:active {
border-color: #6e6d69;
color: #fff;
-moz-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
-ms-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
background: #6e6d69;
}



#quotation-service .input {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 8px 20px 8px 6px;
    max-width: 422px;
    width: calc(100% - 1em);
    vertical-align: top;
}

#quotation-service .textarea {
position: relative;
z-index: 1;
display: inline-block;
margin: 0px 0px 1px 6px;
max-width: 875px;
width: calc(100% - 1em);
vertical-align: top;
}

#quotation-service .input__field {
	position: relative;
	display: block;
	float: right;
	padding: 0.8em;
	width: 60%;
	border: none;
	border-radius: 0;
	background: #f0f0f0;
	color: #aaa;
	font-weight: bold;
	font-family: "open sans", sans-serif;
	-webkit-appearance: none; /* for box shadows to show on iOS */
}

#quotation-service .input__field:focus {
	outline: none;
}

#quotation-service .input__label {
	display: inline-block;
	float: right;
	padding: 0 1em;
	width: 40%;
	color: #6a7989;
	font-weight: bold;
	font-size: 70.25%;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#quotation-service .input__label-content {
position: relative;
display: block;
padding: 20px 0px 13px 0px;
width: 100%;
}

#quotation-service .graphic {
	position: absolute;
	top: 0;
	left: 0;
	fill: none;
}

#quotation-service .icon {
	color: #ddd;
	font-size: 150%;
}



#quotation-service .content {
	font-size: 150%;
	padding: 0 0;
}

#quotation-service .content h2 {
	margin: 0 0 2em;
	opacity: 0.1;
}

#quotation-service .content p {
	margin: 1em 0;
	padding: 5em 0 0 0;
	font-size: 0.65em;
}




/* Hoshi */
#quotation-service .input--hoshi {
	overflow: hidden;
}

#quotation-service .input__field--hoshi {
margin-top: 10px;
padding: 16px 1px 30px 5px;
width: 100%;
font-weight:600;
background: transparent;
color: #595F6E;
font-size: 15px;
}

#quotation-service .input__label--hoshi {
position: absolute;
bottom: 0;
left: 0;
padding: 0 0.25em;
width: 100%;
height: calc(100% - 1em);
text-align: left;
pointer-events: none;
}

#quotation-service .input__label-content--hoshi {
	position: absolute;
color: #6a7989;
font-weight: 600;
}

#quotation-service .input__label--hoshi::before,
#quotation-service .input__label--hoshi::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 10px);
	border-bottom: 1px solid #B9C1CA;
}

#quotation-service .input__label--hoshi::after {
	margin-top: 0px;
border-bottom: 2px solid red;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}

#quotation-service .input__label--hoshi-color-1::after {
	border-color: hsl(139, 82%, 34%);
}

#quotation-service .input__label--hoshi-color-2::after {
	border-color: hsl(160, 100%, 50%);
}

#quotation-service .input__label--hoshi-color-3::after {
	border-color: hsl(20, 100%, 50%);
}

#quotation-service .input__field--hoshi:focus + .input__label--hoshi::after,
#quotation-service .input--filled .input__label--hoshi::after {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

#quotation-service .input__field--hoshi:focus + .input__label--hoshi .input__label-content--hoshi,
#quotation-service .input--filled .input__label-content--hoshi {
	-webkit-animation: anim-1 0.3s forwards;
animation: anim-1 0.3s forwards;
color: #0f9d3c;
}

@-webkit-keyframes anim-1 {
	50% {
		opacity: 0;
		-webkit-transform: translate3d(1em, 0, 0);
		transform: translate3d(1em, 0, 0);
	}
	51% {
		opacity: 0;
		-webkit-transform: translate3d(-1em, -40%, 0);
		transform: translate3d(-1em, -40%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, -40%, 0);
		transform: translate3d(0, -40%, 0);
	}
}

@keyframes anim-1 {
	50% {
		opacity: 0;
		-webkit-transform: translate3d(1em, 0, 0);
		transform: translate3d(1em, 0, 0);
	}
	51% {
		opacity: 0;
		-webkit-transform: translate3d(-1em, -40%, 0);
		transform: translate3d(-1em, -40%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, -40%, 0);
		transform: translate3d(0, -40%, 0);
	}
}


#quotation-service h2{
color: #464646;
font-size: 26px;
font-family: 'Lato', sans-serif;
font-weight: 500;
margin-top: 30px;
margin-bottom: 30px;
padding-left: 7px;
}


#quotation-service .content-2 h2{
color: #464646;
font-size: 26px;
font-family: 'Philosopher', sans-serif;
font-weight: 500;
margin-top: 10px;
margin-bottom: 30px;
padding-left: 7px;
}



#quotation-service .content-3 h2{
color: #464646;
font-size: 26px;
font-family: 'Philosopher', sans-serif;
font-weight: 500;
margin-top: 30px;
margin-bottom: 30px;
padding-left: 7px;
}




#quotation-service .content-4 h2{
color: #464646;
font-size: 26px;
font-family: 'Philosopher', sans-serif;
font-weight: 500;
margin-top: 30px;
margin-bottom: 30px;
padding-left: 7px;
}




#quotation-service .content-5 h2{
color: #464646;
font-size: 26px;
font-family: 'Philosopher', sans-serif;
font-weight: 500;
margin-top: 30px;
margin-bottom: 0px;
padding-left: 7px;
}





#quotation-service h3{
font-size: 18px;
font-weight: 500;
font-family: 'Philosopher', sans-serif;
margin-bottom: 15px;
color: #299944;
}


#quotation-service .check-box-text{
    font-size: 16px;
    margin-left: 0px;
    margin-top: 5px;
    color: #6a7989;
	padding:3px;
}

#quotation-service .check-box-align{
    padding: 0px 0px 0px; 
	text-align:justify;

}

#quotation-service .check-box-align-2{
    padding: 8px 0px 0px;
	text-align:justify;
	
}

#quotation-service .check-box-align-3{
    padding: 8px 0px 7px;
	text-align:justify;
	
}




@media (max-width: 767px) {

#contact-enq input[type="text"], #contact-enq input[type="email"], #contact-enq input[type="tel"], #contact-enq input[type="url"], #contact-enq textarea, #contact-enq select {
	width:92%;
	max-width:410px;
	border:1px solid #6a7989;
	border-radius:0px;
	background:transparent;
	margin:0 0 10px;
	padding:9px;
	color:#6a7989;
}
#contact-enq button[type="submit"] {
	cursor:pointer;
	max-width:420px;
	border:1px #6a7989 solid;
	background:#0769b2;
	color:#6a7989;
	text-transform:lowercase;
	padding:12px;
	font-size:15px;
}

#quotation-service .check-box-align{
    padding: 5px 0px 0px 0px; 
	text-align:justify;
}
#quotation-service .check-box-align-2{
    padding: 0px 0px 0px; 
	text-align:justify;
}
#quotation-service .check-box-align-3{
    padding: 0px;
	text-align:justify;
	
}

#quotation-service .fieldset {
	border: medium none !important;
	margin: 0 0 1px;
	min-width: 100%;
	padding: 0;
	width: 100%;
}



}

/*We will import 2 fonts*/
/*fontawesome iconfont*/
@import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);
/*Montserrat for the text*/
@import url(http://fonts.googleapis.com/css?family=Montserrat); 


/*Adding custom checkbox icons*/
#quotation-service label {
position: relative;
padding-left: 23px;
font-size: 14px;
cursor: pointer;
color: #565454;
padding-right: 20px;
display: inherit;
margin-bottom: 15px;
padding-top: 4px;
	
}
@media (max-width: 767px) {
#quotation-service label {
	float:none;
	position: relative;
	padding-left: 23px;
	font-size: 14px;
	cursor: pointer;
	color:#6a7989;
	padding-right: 20px;
	
}

}


#quotation-service label:before, label:after {
	font-family: FontAwesome;
	font-size: 21px;
	/*absolutely positioned*/
	position: absolute; top: 0; left: 0;
}
#quotation-service label:before {
	content: '\f096';
	 /*unchecked*/
}
#quotation-service label:after {
	content: '\f046'; /*checked*/
	/*checked icon will be hidden by default by using 0 max-width and overflow hidden*/
	max-width: 0;
	overflow: hidden;
	opacity: 0.5;
	/*CSS3 transitions for animated effect*/
	transition: all 0.35s;
	
	
}

/*hiding the original checkboxes*/
#quotation-service input[type="checkbox"] {
	display: none;
	
	
	
}
/*when the user checks the checkbox the checked icon will animate in*/
#quotation-service input[type="checkbox"]:checked + label:after {
	max-width: 25px; /*an arbitratry number more than the icon's width*/
	opacity: 1; /*for fade in effect*/
	
}

/*adding some colors for fun*/
#one+label:before, #one+label:after {color:#6a7989;}
#two+label:before, #two+label:after {color:#6a7989;}
#three+label:before, #three+label:after {color:#6a7989;}
#four+label:before, #four+label:after {color:#6a7989;}
#five+label:before, #five+label:after {color:#6a7989;}
#six+label:before, #six+label:after {color:#6a7989;}

#aligned{
box-sizing: border-box;
float: left;
width: 490px;
margin-right: 10px;
}


#quotation-service .servicetext{
	font-weight:800; 
	font-size:21px; 
	color:#6a7989;
}



#quotation-service input[type="radio"] {
    display:none;
}
#quotation-service input[type="radio"] + label {
    color:#666;
    font-family:Arial, sans-serif;
    font-size:14px;
	
}
#quotation-service input[type="radio"] + label span {
    display:inline-block;
    width:16px;
    height:16px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  3px;
	
}

#quotation-service input[type="radio"] + label span:after {
	opacity: 0;
	content: '';
	position: absolute;
	width: 9px;
	height: 5px;
	background: transparent;
	top: 9px;
	left: 5px;
	border: 3px solid #fff;
	border-top: none;
	border-right: none;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	
}

#quotation-service input[type="radio"] + label span {
     background-color:#4d4c51;
	 box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.8);
	 
}

#quotation-service input[type="radio"]:checked + label span{
     background-color: #40963b; 
	 box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.3) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.8);
}

#quotation-service input[type="radio"]:checked + label span:after{
     opacity: 1;
}

#quotation-service input[type="radio"] + label span,
#quotation-service input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}


#quotation-service .checkbox label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 25px;
	margin-right: 15px;
	font-size: 13px;
	line-height:18px;
}
#quotation-service .wrapper {
	width: 500px;
	margin: 50px auto;
}
#quotation-service .checkbox input[type=radio],
#quotation-service input[type=checkbox] {
	display: none;
}
#quotation-service .checkbox label:before {
	content: "";
	display: inline-block;

	width: 16px;
	height: 16px;

	margin-right: 10px;
	position: absolute;
	left: 0;
	bottom: 1px;
	background-color: #40963b;
	box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

#quotation-service .checkbox  #quotation-service .radio label:before {
	border-radius: 8px;
}
#quotation-service .checkbox label {
	margin-bottom: 10px;
}
#quotation-service .checkbox label:before {
    border-radius: 3px;
}

#quotation-service .checkbox  input[type=radio]:checked + label:before {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}



@media (max-width: 767px) {
#quotation-service .servicetext{
	font-weight:800; 
	font-size:15px; 
	color:#6a7989;
}
}





#contact select, #contact textarea, #contact input[type="text"], #contact input[type="password"], #contact input[type="datetime"], #contact input[type="datetime-local"], #contact input[type="date"], #contact input[type="month"], #contact input[type="time"], #contact input[type="week"], #contact input[type="number"], #contact input[type="email"], #contact input[type="url"], #contact input[type="search"], #contact input[type="tel"], #contact input[type="color"], #contact .uneditable-input { outline:none; }
#contact select:-moz-placeholder, #contact textarea:-moz-placeholder, #contact input[type="text"]:-moz-placeholder, #contact input[type="password"]:-moz-placeholder, #contact input[type="datetime"]:-moz-placeholder, #contact input[type="datetime-local"]:-moz-placeholder, #contact input[type="date"]:-moz-placeholder, #contact input[type="month"]:-moz-placeholder, #contact input[type="time"]:-moz-placeholder, #contact input[type="week"]:-moz-placeholder, #contact input[type="number"]:-moz-placeholder, #contact input[type="email"]:-moz-placeholder, #contact input[type="url"]:-moz-placeholder, #contact input[type="search"]:-moz-placeholder, #contact input[type="tel"]:-moz-placeholder, #contact input[type="color"]:-moz-placeholder, #contact .uneditable-input:-moz-placeholder { color:#fff; }
#contact select:-ms-input-placeholder, #contact textarea:-ms-input-placeholder, #contact input[type="text"]:-ms-input-placeholder, #contact input[type="password"]:-ms-input-placeholder, #contact input[type="datetime"]:-ms-input-placeholder, #contact input[type="datetime-local"]:-ms-input-placeholder, #contact input[type="date"]:-ms-input-placeholder, #contact input[type="month"]:-ms-input-placeholder, #contact input[type="time"]:-ms-input-placeholder, #contact input[type="week"]:-ms-input-placeholder, #contact input[type="number"]:-ms-input-placeholder, #contact input[type="email"]:-ms-input-placeholder, #contact input[type="url"]:-ms-input-placeholder, #contact input[type="search"]:-ms-input-placeholder, #contact input[type="tel"]:-ms-input-placeholder, #contact input[type="color"]:-ms-input-placeholder, #contact .uneditable-input:-ms-input-placeholder { color:#fff; }
#contact select::-webkit-input-placeholder, #contact textarea::-webkit-input-placeholder, #contact input[type="text"]::-webkit-input-placeholder, #contact input[type="password"]::-webkit-input-placeholder, #contact input[type="datetime"]::-webkit-input-placeholder, #contact input[type="datetime-local"]::-webkit-input-placeholder, #contact input[type="date"]::-webkit-input-placeholder, #contact input[type="month"]::-webkit-input-placeholder, #contact input[type="time"]::-webkit-input-placeholder, #contact input[type="week"]::-webkit-input-placeholder, #contact input[type="number"]::-webkit-input-placeholder, #contact input[type="email"]::-webkit-input-placeholder, #contact input[type="url"]::-webkit-input-placeholder, #contact input[type="search"]::-webkit-input-placeholder, #contact input[type="tel"]::-webkit-input-placeholder, #contact input[type="color"]::-webkit-input-placeholder, #contact .uneditable-input::-webkit-input-placeholder { color:#999; }
#contact select::-moz-placeholder, #contact textarea::-moz-placeholder, #contact input[type="text"]::-moz-placeholder, #contact input[type="password"]::-moz-placeholder, #contact input[type="datetime"]::-moz-placeholder, #contact input[type="datetime-local"]::-moz-placeholder, #contact input[type="date"]::-moz-placeholder, #contact input[type="month"]::-moz-placeholder, #contact input[type="time"]::-moz-placeholder, #contact input[type="week"]::-moz-placeholder, #contact input[type="number"]::-moz-placeholder, #contact input[type="email"]::-moz-placeholder, #contact input[type="url"]::-moz-placeholder, #contact input[type="search"]::-moz-placeholder, #contact input[type="tel"]::-moz-placeholder, #contact input[type="color"]::-moz-placeholder, #contact .uneditable-input::-moz-placeholder {
	color:#6a7989;
	opacity:1;
}