/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, 
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body{
	background-color: #041120;
	font-family: 'Work Sans', sans-serif;
	font-weight: 300;
	color: #091e35;
}

::-webkit-input-placeholder {
  font-family: 'Work Sans', sans-serif;
	font-weight: 300;
	color: #091e35;
}
::-moz-placeholder {
  font-family: 'Work Sans', sans-serif;
	font-weight: 300;
	color: #091e35;
}
:-ms-input-placeholder {
  font-family: 'Work Sans', sans-serif;
	font-weight: 300;
	color: #091e35;
}
::placeholder {
  font-family: 'Work Sans', sans-serif;
	font-weight: 300;
	color: #091e35;
}

/**
*
* CSS for Desktop Version
*
**/
.greyBox{
padding-left: 25px;
padding-right: 25px;
padding-top:12px;
padding-bottom:12px;
background-color: #e6e8ea;
}
#content{
	width:  100%;
	position:  relative;
	margin:  0 auto;
	background-color: #091e35;
}

#header{
	height: 236px;
	width: 100%;
	background: #091e35 url(../images/header-bg.jpg) no-repeat;
	background-size: cover;
}

#bannercontainer{
	display: flex;
	flex-direction: row;
	justify-content: center;
  	align-items: center;
  	text-align: center;
	width: 95%;
	margin: 0 auto;
}

.bannerdiv{
	width: 33%;
	margin-top: 16px;
	margin-bottom: 32px;
}

.bannerdiv A,.bannerdiv A:VISITED{
	text-decoration: none;
	color: #fddd3f;
	font-size: 32px;
	font-weight: 100;
}
.bannerdiv A:HOVER{
	font-weight: 400;
}
#logomobile{
	display: none;
	width: 0px;
}
#logodesktop{
	display: block;
	width: 33%;
}
#menustrip{

	height: 32px;
	line-height: 32px;
	display: flex;
	flex-direction: row;
	justify-content: center;
  	align-items: center;
  	text-align: center;
}

#menustrip A,#menustrip A:VISITED{
	text-decoration: none;
	color: #feeb8e;
	font-size: 16px;
	font-weight: 100;
	margin-right: 28px;
}

#menustrip A:HOVER {
	font-weight: 400;
}
#homepagetop,#servicingpagetop{
	text-align: center;
	color:#fddd3f;
	font-weight: 700;
	font-size: 52px;
	height: 260px;
	width: 100%;
	display: flex;
	justify-content: center;
  	align-items: center;
}
#homepagetop{
	background: url(../images/homepage_top_bg.jpg) no-repeat; 
	background-size: cover;
}
#servicingpagetop{
	background: url(../images/servicing_top_bg.jpg) no-repeat; 
	background-size: cover;
}
#servicingpageyellowpanel{
	text-align: center;
	background-color: #fdde3f;
	padding-top: 40px;
	padding-bottom: 40px;
	font-size: 20px;
	line-height: 33px;
}
#servicingpageyellowpanelinner>p:first-child{
	font-weight: 600;
}
#servicingpageyellowpanelinner{
	width: 75%;
	margin: 0 auto;
}
#servicingpagewhitepanel{
	text-align: center;
	background-color: #fff;
	padding-top: 40px;
	padding-bottom: 40px;
	font-size: 16px;
	line-height: 25px;
}

.servicingpagewhitepanelinner{
	width: 60%;
	margin: 0 auto;
}
#homepagehowcanwehelp{
	background-color: white;
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center;
}
#homepagehowcanwehelpcontainer{
	display: flex;
	flex-direction: row;
	justify-content: center;
  	align-items: center;
}
.servicingbuttoncontainer{
	display: block;
	text-align: center;
	margin: 0 auto;
}
.howcanwehelp,.servicingbutton,.hollowbutton{
	width: 260px;
	display: flex;
	justify-content: center;
  	align-items: center;
	line-height: auto;
	min-height: 66px;
	background-color: #fddd3f;
	color:#091e35;
	font-size: 25px;
	text-decoration: none;
	margin-right: 42px;
	margin-left: 42px;
	padding-right: 12px;
	padding-left: 12px;
}
.servicingbutton{
	margin-bottom: 12px;
	margin-right: auto;
	margin-left: auto;
}
.howcanwehelp:hover,.servicingbutton:hover{
	background-color: #091e35;
	color:#fddd3f;
}

.hollowbutton{
	margin-bottom: 12px;
	margin-right: auto;
	margin-left: auto;
	color:#091e35;
	background-color: #ffffff;
	border: 1px solid #091e35;
}
.hollowbutton:hover{
	background-color: #fddd3f;
	color:#091e35;
}
#homepagecontent{
	background-color: #e6e8ea;
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 40px;
	padding-right: 40px;
	text-align: center;
}
#homepagewhyus{
	background-color: #e6e8ea;
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 40px;
	padding-right: 40px;
	text-align: center;
}

#homepagewhyuscontainer{
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
}

.whyus{
	background-color: #f3f4f5;
	text-align: center;
	padding: 20px;
	color: #091e35;
	font-size: 16px;
	line-height: 25px;
	width: 210px;
	margin:25px;
}
.whyus.narrow{
	padding-left: 35px;
	padding-right: 35px;
	width: 180px;
}

#homepagebottom{
	background-color: #fff;
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 40px;
	padding-right: 40px;
	color: #091e35;
}
.heading50{
	color: #091e35;
	font-size: 32px;
	margin-bottom: 30px;
}
#plunket{
	background-color: #feee9f;
	text-align: center;
	padding: 26px;
	color: #091e35;
	font-size: 16px;
	padding: 26px;
	line-height: 24px;
	
}
#plunketcontainer{
	display: flex;
	}
#plunketleft{
	padding-right: 42px;
}
#plunketright{
	text-align: center;
}
#plunketright img{
	margin-left: 12px;
	margin-right: 12px;
}
#warranty{
	background-color: #fddd3f;
	line-height: 22px;
	text-align: center;
	color: #091e35;
	font-size: 16px;
	padding: 26px;
	
}
#plunket A,#plunket A:hover,#plunket A:visited,#plunket A:active, #warranty A,#warranty A:hover,#warranty A:visited,#warranty A:active{
	text-decoration: underline;
	color: #091e35;
}

#footer{
	background-color: #091e35;
	font-size: 12px;
	line-height: 16px;
	color: #fddd3f;
	padding-top: 16px;
	padding-bottom: 16px;
	width: 95%;
	margin: 0 auto;
	text-align: center;
}
#footer A,#footer A:hover,#footer A:visited{
	text-decoration: none;
	color: #fddd3f;
}
#footer A:hover,#footer A:active{
	text-decoration: underline;
}
#footerleft1{
	background-color: #091e35;
	width: 20%;
}
#footerleft2{
	background-color: #091e35;
	width: 20%;
}
#footermiddle{
	width: 20%;
	text-align: center;
	background-color: #091e35;
}
#footerright{
	width: 40%;
	display: flex;
	justify-content: flex-end;
	background-color: #091e35;
}
#footerright1{
	align-self: flex-end;
	padding-right: 50px;
	background-color: #091e35;
}
#footerright2{
	padding-right: 60px;
	background-color: #091e35;
}
#footerright3{
background-color: #091e35;
}
#copyright{
	height: 42px;
	background-color: #041120;
	font-size: 12px;
	line-height: 42px;
	color: #fddd3f;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.inputErrorDiv{
	position: relative;
}

.inputErrorMessage{
	position: absolute; 
	right: 5px; 
	top: -5px; 
	border: 1px solid white; 
	background-color: #ce171e; 
	color: white; 
	padding: 5px;
	box-shadow: 2px 2px 5px #888888;
	display:  none;
	font-size:  12px;
}

button.accordion {
    background-color: #e6e8ea;
    color: #091e35;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 24px;
    font-weight: 300;
}

button.accordion.active, button.accordion:hover {
    background-color: #e6e8ea;
}

button.accordion:after {
    content: '\002B';
    color: #091e35;
    font-weight: 300;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel {
    padding-top: 0px;
    padding-left: 18px;
    padding-right: 18px;
    padding-bottom: 0px;
    background-color: #e6e8ea;
    max-height: 0;
    overflow: hidden;
    text-align: left;
    transition: max-height 0.2s ease-out;
}

#reviews{
	background-color: #091e35;
	text-align: left;
	color: white;
	margin-bottom: 25px;
	padding: 24px;
}
#workwithus,#contactus{
	width: 90%;
	display: flex;
	margin: 0 auto;
}
#workwithusleft,#contactusleft{
	text-align: left;
	margin-right: 16px;
	background-color: #e6e8ea;
	padding: 16px;
	flex: 1;
}
#workwithusright,#contactusright{
	text-align: left;
	background-color: #ced2d7;
	padding: 16px;
	flex: 1;
}
#contactusleft,#contactusright{
	background-color: #fff;
}
.contactbutton{
	width: 160px;
	display: flex;
	justify-content: center;
  	align-items: center;
	line-height: auto;
	min-height: 50px;
	background-color: #fddd3f;
	color:#091e35;
	font-size: 20px;
	text-decoration: none;
	padding-right: 12px;
	padding-left: 12px;
}
.contactbutton:hover{
	background-color: #091e35;
	color:#fddd3f;
}
.contactFormText{
	width: 100%;
	background-color: #e6e8ea;
	height: 36px;
	line-height: 36px;
	text-indent: 5px;
	font-size: 14px;
	color: #091e35;
	border: none;
	outline: none;
	margin-top: 12px;
}
.contactFormTextarea{
	width: 100%;
	background-color: #e6e8ea;
	height: 120px;
	line-height: 36px;
	text-indent: 5px;
	font-size: 14px;
	color: #091e35;
	border: none;
	outline: none;
	margin-top: 12px;
}
.imagerow{
display: flex;
}
.imagecolumn{
flex: 33.33%;
  padding: 5px;
}
.rightimage{
display: inline;
float: right;
margin-left: 12px;
margin-bottom: 12px;
width: 15%;
height: auto;
}
.leftimage{
display: inline;
float: left;
margin-right: 12px;
margin-bottom: 12px;
margin-bottom: 12px;
width: 15%;
height: auto;
}
.error{
	color: #ee5364;
}
@media screen and (max-width:1024px) {
	.whyus{
		padding: 12px;
		font-size: 16px;
		width: 190px;
	}
	.whyus.narrow{
		padding-left: 24px;
		padding-right: 24px;
		width: 160px;
	}
	#homepagebottom .heading50{
		font-size: 36px;
	}
}

@media screen and (max-width:640px) {
	/**
	*
	* CSS for Mobile Version
	*
	**/
	.rightimage{
display: block;
width: 100%;
float: none;
margin-left: 0px;
margin-bottom: 12px;
margin-top: 12px;
}
.leftimage{
width: 100%;
display: block;
float: none;
margin-left: 0px;
margin-bottom: 12px;
margin-top: 12px;
}
	.imagerow{
display: block;
}
	.imagecolumn {
    width: 100%;
    padding-left:0px;
    padding-right:0px;
  }
	#header{
		height: auto;
		background: #091e35 url(../images/header-bg.jpg) no-repeat;
		background-size: cover;
	}
	#content{
		width:  320px;
		position:  relative;
		margin:  0 auto;
		padding-top: 12px;
	}
	#logomobile{
		display: block;
		width: auto;
		height: auto;
	}
	#logodesktop{
		display: none;
	}
	#bannercontainer{
		width: 100%;
		display: block;
		padding-top: 16px;
	}
	.bannerdiv{
		width: 100%;
		margin: 0px;
		display: block;
		text-align: center;
		padding: 0px;

	}
	.bannerdiv A,.bannerdiv A:HOVER,.bannerdiv A:VISITED{
		font-size: 24px;
		line-height: 42px;
	}
	#menustrip{
		height: 42px;
	}
	#menustrip A,#menustrip A:VISITED{
		font-size: 14px;
		margin-right: 16px;
	}
	#homepagetop,#servicingpagetop{
		font-size: 30px;
		height: 240px;
	}
	#servicingpageyellowpanelinner, .servicingpagewhitepanelinner{
		font-size: 18px;
	line-height: auto;
	width: 90%;
	padding-left: 12px;
	padding-right: 12px;
	}
	.heading50{
		font-size: 28px;
		line-height: 36px;
	}

	#homepagehowcanwehelp{
		padding-top: 20px;
		padding-bottom: 20px;
	}
	#homepagehowcanwehelpcontainer,#servicingbuttoncontainer{
		display: block;
		text-align: center;
	}
	.howcanwehelp{
		width: 100%;
		text-align: center;
		padding: 0px;
		line-height: auto;
		font-size: 25px;
		margin-right: 0px;
		margin-left: 0px;
		margin-bottom: 12px;
	}

	#homepagewhyus{
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 10px;
		padding-right: 10px;
	}

	#homepagewhyuscontainer{
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
	}

	.whyus, .whyus.narrow{
		font-size: 16px;
		line-height: 25px;
		margin-bottom: 16px;
		width: auto;
	}

	#homepagebottom{
		flex-direction: column;
		display: flex;
		align-items: stretch;
		justify-content: flex-start;
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 10px;
		padding-right: 10px;
		color: #091e35;
	}

	#plunket{
		text-align: center;
		padding: 12px;
		font-size: 16px;
		line-height: 24px;
		margin-right: 0px;
		margin-bottom: 20px;
	}
	#plunketcontainer{
		display: block;
	}
	#plunketleft{
		padding-right: 0px;
		margin-bottom: 16px;
	}
	#plunketright{
		text-align: center;
	}
	#plunketright img{
		margin-left: 12px;
		margin-right: 12px;
	}
	#warranty{
		background-color: #fddd3f;
		line-height: 22px;
		text-align: center;
		color: #091e35;
		font-size: 16px;
		padding: 26px;
		
	}

	#footer{
		height: auto;
		font-size: 16px;
		line-height: 20px;
		padding-top: 30px;
		padding-bottom: 30px;
		display: block;
	}

	#footerleft1{
		width: auto;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 16px;
		text-align: center;
	}
	#footerleft2{
		width: auto;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 24px;
		text-align: center;
	}
	#footermiddle{
		width: auto;
		text-align: center;
		margin-bottom: 24px;
	}
	#footerright{
		display: block;
		width: auto;
		text-align: center;
		margin-bottom: 16px;
	}
	#footerright1{
		display: block;
		width: auto;
		text-align: center;
		margin-bottom: 16px;
		padding-right: 0px;
		font-size: 20px;
		line-height: 24px;
	}
	#footerright2{
		display: block;
		width: auto;
		text-align: center;
		margin-bottom: 16px;
		padding-right: 0px;
		font-size: 20px;
		line-height: 32px;
	}
	#footerright3{
		display: block;
		width: auto;
		text-align: center;
		margin-bottom: 16px;
		padding-right: 0px;
		font-size: 20px;
		line-height: 32px;
	}
	#copyright{
		height: auto;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	.inputErrorDiv{
		position: relative;
	}
	
	.inputErrorMessage{
		position: absolute; 
		right: 5px; 
		top: -5px; 
		border: 1px solid white; 
		background-color: #ce171e; 
		color: white; 
		padding: 5px;
		box-shadow: 2px 2px 5px #888888;
		display:  none;
		font-size:  12px;
	}
	button.accordion {
		font-size: 18px;
	}

	#workwithus,#contactus{
		width: 90%;
		display: block;
	}
	#workwithusleft,#contactusleft{
		margin-right: 0px;
		margin-bottom: 16px;
	}

}