/*
Theme Name: Nought to Five Theme
Description: Nought to Five Theme Template
Version: 1.0
Author: The Code Company
Author URI: http://thecode.co
*/

/* Reset */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, small, strike, strong, ol, ul, li, fieldset, form, label, caption { border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 14px; color: #666;  }
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, button, input, select, textarea { font-family: "freight-sans-pro", sans-serif; font-weight: 300; }
a, a:hover, input[type="submit"], input[type="submit"]:hover { transition-property:all; -moz-transition-property:all; -webkit-transition-property:all; transition-duration:0.2s; -moz-transition-duration:0.2s; -webkit-transition-duration:0.2s; transition-timing-function:linear, ease-in; -moz-transition-timing-function:linear, ease-in; -webkit-transition-timing-function:linear, ease-in; }

/* Containers */
header, nav, section, footer { float: left; position: relative; width: 100%; text-align: center\9; }
.container { width: 100%; max-width: 1160px; margin: 0 auto; text-align: left\9; width: 1160px\9; }

/* Formatting */
a { text-decoration: none; color: #444; }
a:hover, a:focus, a:active { color: #4AAAB5; }
strong { font-weight: 600; }

h1, h2, h3, h4, h5, h6 { color: #000; font-weight: 500; }

.alignleft { display: inline; float: left; margin-right: 1.5em; }
.alignright { display: inline; float: right; margin-left: 1.5em; }
.aligncenter { clear: both; display: block; margin: 0 auto; }

/* Slideshow */
#slideshow { width: 100%; overflow: hidden; height: 470px; position: relative; }
#slideshow .item { float: left; display: block; height: 470px; position: relative; }
#slideshow .item img { width: 100%; height: auto; }
#slideshow .caption { position: absolute; z-index: 2000; width: 400px; color: #fff; font-size: 42px; line-height: 48px; font-weight: 700; }
#slideshow .caption h2 { font-size: 42px; line-height: 48px; font-weight: 700; margin: 0; }
#slideshow .caption h3 { font-size: 36px; line-height: 44px; font-weight: 700; margin: 0; }
#slideshow .caption h4 { font-size: 32px; line-height: 40px; font-weight: 700; margin: 0; }
#slideshow .caption.bottom-left { bottom: 50px; left: 70px; }
#slideshow .caption.top-left { left: 70px; top: 40px; }
#slideshow .caption.top-right { top: 40px; right: 70px; text-align: right; }
#slideshow .caption.bottom-right { bottom: 50px; right: 70px; text-align: right; }

/* Forms */
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; }
button, input[type="submit"] { border: 0; background: #ccc; color: #333; padding: 10px 20px; cursor: pointer; }
button:hover, input[type="submit"]:hover { background: #aaa; color: #333; }
button:focus, input[type="submit"]:focus { border: 1px solid #bbb; }
input[type="checkbox"], input[type="radio"] { padding: 0; }
input[type="text"], input[type="email"] { width: 100%; padding: 10px; margin: 10px 0 20px; border: 1px solid #ddd; color: #555; }
input[type="search"] { padding: 10px; margin: 10px 0 20px; border: 1px solid #ddd; color: #555; }
input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:hover { border: 1px solid #bbb; }
textarea { width: 100%; padding: 10px; overflow: auto; margin: 10px 0 20px; border: 1px solid #ddd; }
textarea:focus { border: 1px solid #bbb; }
form li { list-style: none; }

/* Theme Styles */

header { height: 135px; }
header .logo { width: 307px; float: left; height: auto; padding: 25px 0 15px; }
header .menu { float: left; }
header nav { float: right; width: auto; }
header nav ul { float: left; padding: 40px 0 0; }
header nav ul li { list-style: none; display: inline-block; }
header nav ul li a { color: #aaa; padding: 10px 8px 70px; float: left; text-transform: lowercase; }
header nav ul li ul { display: none; margin-top: 95px;  }
header nav ul li:hover ul { display: block; position: absolute; z-index: 3000; width: 250px; background: #eee; padding: 0; }
header nav ul li ul li { float: left; width: 100%; border-bottom: 1px dashed #ddd; }
header nav ul li ul li a { float: left; width: 100%; color: #999; padding: 10px 12px 10px; cursor: pointer; }
header nav ul li ul li a:hover { background: #4AAAB5; color: #fff; }
header nav ul li.current-menu-item a { font-weight: 600; color: #4AAAB5 }
header nav ul li.current-menu-item ul li a { font-weight: 300; color: #999; }
header nav ul li.current-menu-item ul li a:hover { color: #fff; }
header nav span { float: left; padding: 50px 25px 50px 15px; color: #4AAAB5; font-weight: 500;}
header nav span:before { content: url(inc/images/call.svg); margin-right: 7px; margin-top: 4px; float: left }
header nav a.button { float: left; padding: 20px 30px; background: #4AAAB5; color: #fff; margin: 30px 0 0; text-transform: uppercase; }
header nav .menu-primary-menu-container { float: left; }
header .mobile { display: none; }
header .mob-pos { float: left; }

h1.home { color: #fff; position: absolute; }
section#centre { background: #5DCD8C; }
section#centre .half { width: 50%; float: left; height: 310px; overflow: hidden; }
section#centre .half:nth-of-type(1) { padding: 70px; }
section#centre h2 { color: #fff; font-size: 32px; margin-bottom: 10px; line-height: 36px; }
section#centre p { color: #fff; font-size: 20px; line-height: 32px; }

section#quote { background: url(inc/images/quote-background.png); padding: 80px 70px 80px 0; position: relative; }
section#quote img.girl { position: absolute; left: 60px; bottom: 0; }
section#quote .text { float: right; width: 60%; font-size: 26px; line-height: 36px; text-align: right; font-weight: 300; }
section#quote .text span { color: #4AAAB5; }
 
section#location { background: #4AAAB5; }
section#location .half { width: 50%; float: left; height: 310px; overflow: hidden; }
section#location .half img { width: 100%; height: auto; }
section#location .half:nth-of-type(1) { padding: 50px 70px; }
section#location h2 { color: #fff; font-size: 32px; margin-bottom: 10px; line-height: 36px; }
section#location p { color: #fff; font-size: 20px; line-height: 32px; }

section#toptitle { background: url(inc/images/inner-bg.png); padding: 50px 70px; font-size: 26px; line-height: 36px; color: #666; }
section#toptitle h1 { color: #4AAAB5; font-weight: 500; display: inline; margin: 0; }

section#content { padding: 20px 30px; float: left; width: 100%; }
section#content h1 { font-size: 32px; line-height: 40px; margin-bottom: 15px; font-weight: 300; color: #4AAAB5 }
section#content h2 { font-size: 28px; line-height: 36px; margin-bottom: 15px; font-weight: 300; color: #4AAAB5 }
section#content h3 { font-size: 24px; line-height: 32px; margin-bottom: 10px; font-weight: 300; color: #4AAAB5 }
section#content p { font-size: 18px; line-height: 26px; margin-bottom: 15px; }
section#content ul { float: left; width: 100%; padding-left: 20px; margin-top: 5px; margin-bottom: 15px; }
section#content ul li { font-size: 18px; line-height: 28px; margin-bottom: 15px; width: 100%; margin-left: 20px; }
section#content ul { padding-left: 0; }
section#content ul.gfield_checkbox li { margin-bottom: 0; }
section#content ul.gfield_checkbox li label { width: auto; margin-left: 5px; }
section#content iframe { width: 100%; }
section#content form ul { width: 100%; float: left; margin: 0; padding: 0; }
section#content .gform_wrapper { margin: 0; }
section#content input[type="text"], section#content textarea { width: 100%; float: left; margin: 0 0 5px; }
section#content label { width: 100%; float: left; margin: 0 0 10px; font-weight: 300; }
section#content input[type="submit"] { float: left; padding: 20px 30px; color: #fff; text-transform: uppercase; background: #4AAAB5; }
section#content aside ul { border-top: 1px solid #eee; }
section#content aside ul li { padding: 10px 0 0; margin: 0 0 10px 20px; }

section#content.blog { padding: 40px 70px; }
section#content.blog .left { float: left; width: 70%; }
section#content.blog #sidebar { width: 25%; float: right; }
section#content.blog #sidebar aside { width: 100%; float: left; margin: 0 0 20px; }
section#content.blog header { height: auto; float: left; width: 100%; margin-bottom: 15px; }
section#content article .thumbnail { width: 100%; float: left; height: auto; margin-bottom: 20px; max-height: 350px; overflow: hidden; }
.single section#content article .thumbnail { height: auto; max-height: none; }
section#content article .thumbnail img { width: 100%; height: auto; float: left; }
section#content article a.readmore { color: #4AAAB5; margin-top: 15px; }
section#content.blog article { float: left; width: 100%; margin-bottom: 35px; padding-bottom: 35px; border-bottom: 1px solid #eee; }

section#grey { background: #F6F6F6; padding: 70px 0; }
section#grey .half { width: 50%; float: left; padding: 0 70px; }
section#grey h3 { font-size: 28px; line-height: 36px; color: #666; margin-bottom: 15px; }
section#grey .date { font-size: 16px; line-height: 24px; color: #aaa; }
section#grey h4 { font-size: 16px; line-height: 24px; color: #4AAAB5; }
section#grey h4 a { font-size: 16px; line-height: 24px; color: #4AAAB5; }
section#grey p { font-size: 14px; line-height: 24px; color: #999; }
section#grey a.more { font-size: 14px; line-height: 24px; color: #4AAAB5; }
section#grey a.button { padding: 20px 30px; color: #fff; background: #4AAAB5; float: left; margin-top: 20px; }

footer { background: #5DCD8C; padding: 45px 70px; color: #fff; font-size: 12px; text-transform: uppercase; }
footer a { color: #fff; font-size: 12px; }
footer a.by { float: right; color: #fff; }

@media only screen and (min-width : 900px) and (max-width : 1165px) {
body, button, input, select, textarea { font-family: "freight-sans-pro", sans-serif; font-weight: 500; }
.container { width: 100%; margin: 0; }
header { height: 225px; text-align: center; padding-bottom: 0; }
header .logo { display: inline-block; float: none; padding-bottom: 0; }
header nav { width: 100%; text-align: center; }
header nav .menu-primary-menu-container { float: left; margin-left: 5%; }
header nav a.button { float: right; margin-right: 5%; }
header nav ul { padding-top: 30px; }
header nav span { padding-top: 40px; }
header nav a.button { margin-top: 20px; }
header nav ul li ul { display: none; margin-top: 81px; z-index: 3000; }
header nav ul li:first-of-type a { padding-left: 0; }
#slideshow .caption.bottom-left { bottom: 30px; left: 5%; }
#slideshow .caption.top-left { left: 5%; top: 30px; }
#slideshow .caption.top-right { top: 30px; right: 5%; text-align: right; }
#slideshow .caption.bottom-right { bottom: 30px; right: 5%; text-align: right; }
section#toptitle { padding: 40px 5%; }
section#content { padding: 20px 1%; }
section#content.blog { padding: 50px 5%; }
section#content.blog header { text-align: left; }
section#centre .half:nth-of-type(1) { padding: 50px 50px 50px 5%; }
section#centre p { font-size: 18px; }
section#centre .half { height: 270px; }
section#centre .half img { width: 112%; height: auto; float: right; }
section#quote img.girl { left: 5%; }
section#quote { padding: 60px 5% 60px 0 }
section#quote .text { width: 55%; font-size: 22px; line-height: 34px; }
section#location .half:nth-of-type(1) { padding: 50px 50px 50px 5%; }
section#location p { font-size: 18px; line-height: 30px; }
section#location .half img { height: 100%; width: auto; }
section#grey { padding: 50px 0; }
section#grey .half { padding: 0 5%; }
footer { padding: 35px 5%; }

}

@media only screen and (min-width : 320px) and (max-width : 900px) {
body, button, input, select, textarea { font-family: "freight-sans-pro", sans-serif; font-weight: 500; }
header { height: auto; padding-bottom: 0; }
header nav ul { padding-top: 10px; display: none; }
header nav ul li { width: 100%; float: left; border-top: 1px dashed #eee; }
header nav ul li:hover ul { position: relative; float: left; width: 100%; margin: 0; }
header nav ul li a { padding: 15px 0; width: 100%; float: left; text-align: center; }
header .logo { width: 40%; max-width: 190px; margin-left: 5%; padding-top: 30px; }
header .logo img { width: 100%; height: auto; float: left; }
header nav a.button { display: none; }
header nav span { padding: 40px 20px 40px 0; float: right; }
header nav a.button { width: 100%; margin-top: 0; text-align: center; }
header .mob-pos { position: absolute; right: 0; top: -100px; width: 50%; }
header .mobile { display: block; float: right; padding: 43px 0 40px 0; margin-right: 10%; }
header .mobile img { width: 25px; height: auto; float: left; }
header nav .menu-primary-menu-container, header .menu { width: 100%; }
header nav { float: right; width: 100%; }
#slideshow .caption h2 { font-size: 22px; line-height: 28px; }
#slideshow { height: 200px; }
#slideshow .item { height: 200px; }
#slideshow .caption { font-size: 22px; line-height: 28px; width: 75%; bottom: 20px; }
#slideshow .caption.bottom-left { bottom: 30px; left: 5%; }
#slideshow .caption.top-left { left: 5%; top: 30px; }
#slideshow .caption.top-right { top: 30px; right: 5%; text-align: right; }
#slideshow .caption.bottom-right { bottom: 30px; right: 5%; text-align: right; }
section#toptitle { padding: 25px 5%; font-size: 20px; line-height: 28px; }
section#content { padding: 25px 0.5% 10px; }
section#content.blog { padding: 25px 5%; }
section#content.blog .left { width: 100%; margin-bottom: 25px; }
section#content.blog #sidebar { width: 100%; }
section#content h1 { font-size: 26px; line-height: 32px; }
section#content h2 { font-size: 22px; line-height: 28px; }
section#content h3 { font-size: 18px; line-height: 24px; }
section#centre .half { height: auto; }
section#centre .half:nth-of-type(1) { padding: 30px 5% 35px; }
section#centre p { font-size: 16px; line-height: 24px; }
section#centre .half img { width: 100%; height: auto; }
section#quote .text { width: 100%; font-size: 22px; line-height: 32px; text-align: center; }
section#quote img.girl { left: 0; right: 0; margin: auto; }
section#quote { padding: 30px 5% 350px; overflow: hidden; }
section#centre h2 { font-size: 26px; line-height: 32px; }
section#location h2 { font-size: 26px; line-height: 32px; }
section#location .half { height: auto; }
section#location .half img { width: 108%; }
section#location .half:nth-of-type(1) { padding: 40px 5%; }
section#location p { font-size: 16px; line-height: 24px; }
section#grey { padding: 30px 0; }
section#grey p { line-height: 20px; }
section#grey .half { padding: 0 5%; }
footer { text-align: center; padding: 25px 5%; }
footer a.by { width: 100%; margin-top: 15px; float: left; text-align: center; }

}

@media only screen and (min-width : 520px) and (max-width : 900px) {
	#slideshow { height: 320px; }
	#slideshow .item { height: 320px; }
}

@media only screen and (min-width : 320px) and (max-width : 720px) {
	
	header .logo { max-width: 135px; padding-top: 25px; }
	header .mobile { display: block; float: right; padding: 53px 0 30px 0; margin-right: 10%; }
	header .mobile img { width: 19px; height: auto; float: left; }
	header nav span { padding: 50px 15px 30px 0; float: right; }	
	section#centre .half { width: 100%; height: auto; }
	section#location .half { width: 100%; height: auto; }
	
}