/*

Theme Name: Southern Cross Cleaning Service
Version: 1.0
Author: Finely Sliced

*/

* { margin: 0; padding: 0; }

body { position: relative; padding: 0 12px 30px 12px; background: /* #1B78C5 */ #FFF url(img/bg_white.jpg) center 200px no-repeat; font-family: 'Helvetica Neue', 'Helvetica', sans-serif; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

.wrap { margin: 0 auto; max-width: 1100px; border-radius: 3px; box-shadow: 0 0 3px rgba(0,0,0,.3); background: #FFF; overflow: hidden; }

/*---------------------------------------

	HEADER

-----------------------------------------*/

.header { position: relative; max-width: 1100px; margin: 0 auto; height: 120px; z-index: 100; }

#logo { display: block; position: absolute; bottom: 6px; left: -10px; width: 364px; height: 100px; }
#logo img { display: block; width: 364px; height: 100px; }

#nav_toggle { position: absolute; right: 0; top: 0; width: 50px; height: 50px; background: url(img/burger.svg) center center no-repeat; display: none; }

#nav { position: absolute; bottom: 40px; right: 230px; width: 600px; list-style: none; text-align: right; line-height: normal; margin: 0; }
#nav li { display: inline-block; margin-left: 30px; font-size: 15px; font-weight: bold; }

#nav a:link, #nav a:visited { color: #009EE2; text-decoration: none; }
#nav a:hover, #nav a:active { color: #0B5088; text-decoration: none; }


#nav li.active a:link, #nav li.active a:visited { color: #0B5088; text-decoration: none; }

.phone { position: absolute; bottom: 38px; right: 40px; width: 200px; text-align: right; font-size: 22px; font-weight: bold; color: #0B5088; }

.columns { position: relative; margin: 0 auto; max-width: 1100px; overflow: hidden; }
.column { float: left; }
.column_half { width: 50%; }
.column_twothirds { width: 66.6666%; }
.column_third { width: 33.3333%; }

.column_lining { margin: 0 30px; }

h1 { color: #FFF; font-weight: 200; font-size: 37px; }
h2 { color: #0B5088; font-weight: bold; font-size: 22px; letter-spacing: -0.5px; margin-bottom: 12px; }
h3 { color: #0B5088; font-weight: normal; font-size: 16px; }

p { font-size: 14px; color: #333; line-height: 140%; margin-bottom: 18px; }

ul { font-size: 14px; color: #333; line-height: 140%; margin: 0 0 18px 22px; }

button { border: none; background: #00B16A; color: #FFF; font-weight: 700; font-size: 15px; padding: 0; line-height: 33px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;  text-rendering: optimizeLegibility; cursor: pointer; outline: none; margin-top: 16px; }

button:hover { background: #00B16A; }

a:link, a:visited { color: #009EE2; text-decoration: underline; }
a:hover, a:active { color: #0B5088; text-decoration: none; }


/*---------------------------------------

	BANNERS

-----------------------------------------*/

.banner { position: relative; background-size: cover; background-position: center top; background-repeat: no-repeat; z-index: 50; }

.page .banner { height: 240px; }
.home .banner { height: 350px; }

.banner h1 { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; background: rgba(0,158,226,0.75); text-shadow: 1px 0 0 rgba(0,0,0,.2); z-index: 2; }


.home .banner h1 { text-align: center; }
.page .banner h1 { text-align: left; padding: 12px 30px; }


/*---------------------------------------

	WHY US

-----------------------------------------*/

.why_us { position: relative; background: #FFF; padding: 30px 0; z-index: 60; }
.why_us h2 { margin: 0 0 12px 0; color: #0B5088; }

.why_us .column_third { width: 32%; border-left: 1px solid #EDEDED; }
.why_us .column_third:first-child { border: none; } 



/*---------------------------------------

	CTA

-----------------------------------------*/

.cta { background: #0B5088; padding: 22px; text-align: center; }
.cta h2 { color: #FFF; margin: 0; font-weight: normal; font-size: 22px; letter-spacing: 0; }

.cta_action { display: inline-block; font-weight: bold; font-size: 16px; padding: 12px 20px; border-radius: 5px; font-family: "Helvetica Neue"; line-height: normal; border: 1px solid #d37019; border-top: 1px solid #dc8130; text-shadow: 0 0 1px rgba(99,63,31,.4); text-transform: uppercase; letter-spacing: 0px; margin-right: 12px; }

.cta_action:link, .cta_action:visited { background: #f48421; color: #FFF; text-decoration: none; }
.cta_action:hover, .cta_action:active { background: #f47521; color: #FFF; text-decoration: none; }


.page_columns .cta { text-align: left; }


/*---------------------------------------

	QUOTE FORM

-----------------------------------------*/

.quote_field { display: block; border-top: 1px solid #EDEDED; padding: 12px 0; width: 100%; overflow: hidden; }
.button_field { display: block; border-top: 1px solid #EDEDED; padding: 0 0 0 152px; margin-bottom: 22px; }

.quote label { display: block; float: left; width: 140px; color: #0B5088; font-size: 14px; padding: 2px 0 0 0; }

.quote_field div { float: left; width: 222px; padding-left: 12px; }

.quote input { padding: 8px 10px; border: 1px solid #DEDEDE; background: #F4F4F4; width: 200px; font-size: 14px; color: #444; font-family: 'Helvetica Neue', 'Helvetica', sans-serif; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

.quote button { width: 120px; }

.required, span.wpcf7-not-valid-tip { color: red; font-style: italic; font-size: 13px !important; }

.wpcf7-response-output { border: none; color: #FFF; padding: 16px !important; font-size: 14px; margin-bottom: 22px !important; }

.wpcf7-validation-errors { background: red; border: none !important; }
.wpcf7-mail-sent-ok { background: #00B16A; border: none !important; }


/*---------------------------------------

	PAGES

-----------------------------------------*/


.page_columns { padding: 40px 0; border-bottom: 1px solid #DEDEDE; }

.page-template-page-contact .column_third { padding-top: 110px; }
.page-template-page-contact .column_third, .page-template-page-thanks .column_third { text-align: center; }

/*---------------------------------------

	FOOTER

-----------------------------------------*/

.footer { padding: 30px 0; }
.footer h4 { font-size: 13px; color: #777; }
.footer p { font-size: 13px; color: #777; margin: 0; line-height: 140%; }
.footer span { margin-right: 12px; }

.footer ul { list-style: none; font-size: 26px; font-weight: 400; color: #AAA; margin: 0 0 1px 0; text-align: right; }
.footer li { display: inline-block; margin-left: 5px; }

.footer a:link, .footer a:visited { color: #A8A8A8; text-decoration: none; }
.footer a:hover, .footer a:active { color: #008ECF; text-decoration: none; }


/*---------------------------------------

	MISC

-----------------------------------------*/

img { border: none; }
a { outline: none; }


/*---------------------------------------

	BREAKPOINTS

-----------------------------------------*/


@media screen and ( max-width: 1000px ) {
	
body { padding: 60px 12px 12px 12px; }

.wrap { box-shadow: none; }

.header { position: fixed; top: 0; left: 0; right: 0; max-width: 1100px; margin: 0 auto; height: 50px; background: #FFF; z-index: 100; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; }

#logo { position: absolute; bottom: auto; top: 6px; left: 0px; width: 145px; height: 40px; }
#logo img { display: block; width: 145px; height: 40px; }

#nav_toggle { display: block; }


#nav { position: absolute; bottom: auto; top: 50px; left: 0; right: auto; width: 100%; list-style: none; text-align: center; background: #FFF; border-top: 1px solid #EDEDED;max-height: 0; overflow: hidden; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease;}
#nav li { display: block; margin: 0; font-size: 15px; font-weight: bold; border-bottom: 1px solid #EDEDED; }
#nav a { display: block; padding: 10px; }
#nav a:link, #nav a:visited { color: #009EE2; text-decoration: none; }
#nav a:hover, #nav a:active { color: #0B5088; text-decoration: none; }

.navigate #nav { max-height: 999px; }

.phone { position: absolute; bottom: auto; top: 0; right: 65px; width: 200px; text-align: right; line-height: 50px; font-size: 15px; font-weight: bold; color: #0B5088; }

.page .banner, .home .banner { height: 140px; }
.banner h1 { font-size: 19px; font-weight: bold; padding: 12px 15px; }
.page .banner h1 { padding: 12px 15px; }
.columns { position: relative; margin: 0 auto; max-width: 1100px; overflow: hidden; }
.column { float: none; width: auto !important; }
.column_lining { margin: 0 15px; }


.why_us .column_third { width: 32%; border-left: none; text-align: center; }
.why_us .column_third:first-child { border: none; } 

.footer { padding: 15px 0; text-align: center; }
.footer p { margin: 0; }

.column_third .cta_action { display: none; }
.cta_action { display: block; margin: 0 0 12px 0; }

}

@media screen and ( max-width: 500px ) {
	
.quote label { float: none; width: auto; margin-bottom: 2px; }

.quote_field div { float: none; width: auto; padding: 0; }

.quote input { padding: 8px 10px; border: 1px solid #DEDEDE; background: #F4F4F4; width: 200px; font-size: 14px; color: #444; font-family: 'Helvetica Neue', 'Helvetica', sans-serif; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

}