/*
Theme Name: Pergola Specialist Theme
Author: Nick Davis Design
Author URI: http://nickdavisdesign.com.au
Version: 1.0.0
*/

/* GENERAL
######################################################### */
* {	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:focus {	outline:none; }
body { padding:0; margin:0; background-color:#fff; }
img { max-width:100%;  height:auto; width:auto; vertical-align:bottom; }
hr { height:0; width:100%; border:none; border-top:#eee solid 1px; margin:30px 0; }
figure { margin:0; }
.clear { clear: both; }
.inline-block { display: inline-block!important; }
.block { display: block!important; }
.black-out { position: fixed; z-index: 950; width: 100%; height:100%; background-color: rgba(0,0,0,0.7); left:0; top:0; transition: background-color 200ms; }
.black-out.hide { left:-100%; background-color: rgba(0,0,0,0); transition: background-color 200ms 0ms, left 0ms 200ms; }

@media only screen and (min-width: 1024px) {
.hidedesktop { display: none!important; }
}

@media only screen and (max-width: 1023px) {
.hidemobile { display: none!important; }
}

/* TYPOGRAPHY
######################################################### */
html { font-family: 'Open Sans', sans-serif; font-size:16px; line-height: 1.7em; color:#000; font-weight:300; }
h1, .h1 { font-family: 'Dancing Script', cursive; font-size:3.5rem; line-height: 1.2em; margin:0 0 30px; font-weight:700; }
h2, .h2 { font-size:1.6rem; line-height: 1.2em; margin:0 0 30px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; }
h3, .h3 { font-size:1.3rem; line-height: 1.2em; margin:0 0 30px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
h4, .h4 { font-size:1.1rem; line-height: 1.2em; margin:0 0 30px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
h5, .h5 { font-size:1rem; line-height: 1.2em; margin:0 0 30px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
h6, .h6 { font-size:1.5rem; line-height: 1.5em; margin:0 0 30px; font-weight: 400; }
p, ul, ol { margin:0 0 1.8em; }
ul.children { margin-bottom:0; }
a { color:#1a71c3; font-weight: 400; transition: color 150ms; }
a:hover { color:#2099ff; }
a.no-underline { text-decoration: none; }
.no-underlines a { text-decoration: none; }
.text-green { color:#74b000; }
.text-blue { color:#1a71c3; }
.text-grey { color:#7a7670; }
.text-center { text-align: center; }
.text-xxl { font-size: 2.4rem; }
.text-xl { font-size: 1.7rem; }
.text-lg { font-size: 1.3rem; }
.text-sm { font-size: 0.9rem; line-height: 1.5rem; }
.text-xs { font-size: 0.8rem; line-height: 1.3rem; }
.text-400 { font-weight: 400; }
.letter-spacing-md { letter-spacing: 0.2em; }
.cursive-heading { position: relative; text-align:center; margin-bottom:5%; }
.cursive-heading:before { content: " "; display: block; border-bottom:1px solid rgba(0,0,0,0.1); position: absolute; top:55%; left:0; width: 100%; z-index:50; }
.cursive-heading .heading { display: inline-block; margin:0; font-family: 'Dancing Script', cursive; font-size:2.4rem; line-height: 1.2em; letter-spacing: 0; text-transform: none; font-weight:700; background-color:#fff; padding:10px; text-align: center; color:#1a71c3; position: relative; z-index: 100; }

@media only screen and (min-width: 1600px) {
html { font-size:18px; }
}

@media only screen and (max-width: 599px) {
html { font-size:14px; }
.cursive-heading .heading { font-size:2rem; }
}

/* FORM ELEMENTS
######################################################### */
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="password"],
textarea { display:block; border:none; background-color:#f5f3f0; min-height:50px; font-size:1rem; line-height: 1.2em; padding: 7px 12px 9px; width: 100%; vertical-align: bottom; transition: background-color 200ms, border-color 150ms, box-shadow 200ms; }
input[type="text"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
textarea:hover { background-color: #eeece9; }
input[type="text"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus { background-color: #eeece9; }

.btn,
#searchsubmit {
	display: inline-block; border:none; background-color:#1a71c3; padding:13px 25px 14px; border-radius: 100px;
	font-size: 1.1rem; line-height: 1.5em; font-family: inherit; text-decoration: none; color:#fff; font-weight: 700; text-transform: uppercase;
	cursor: pointer; transition: background-color 200ms; box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}
.btn:hover,
#searchsubmit:hover { background-color:#2489e7; color:#fff; }
.btn-green,
#searchsubmit { background-color:#9bc52e; box-shadow: 0 2px 3px rgba(0,0,0,0.15); }
.btn-green:hover,
#searchsubmit:hover { background-color:#a6d037; }

.nf-form-fields-required { display: none; }

@media only screen and (min-width: 1600px) {
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="password"],
textarea,
.btn,
#searchsubmit { min-height:60px; }
.btn,
#searchsubmit { padding-left:30px; padding-right:30px; }
}

/* LAYOUT
######################################################### */
.page-header { background-size:cover; background-position: center; position: relative; padding-bottom:15%; }
.page-header h1 { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 200; padding:20px 50px 24px; background-color:rgba(255,255,255,0.8); box-shadow: 0 5px 20px rgba(0,0,0,0.3); }
.row { clear: both; position: relative; }
.row:after { content: " "; display: table; clear: both; }
.col { float:left; }
.padding { padding:5%; }
.one-half { width: 50%; }
.one-third { width: 33.33%; }
.two-thirds { width: 66.66%; }
.one-quarter { width: 25%; }
.three-quarters { width: 75%; }
.page-wrapper { padding-top:70px; }
.lead { padding:80px 15%; }
.lead p:last-child { margin-bottom:0; }
.layout-3-col .image { position: relative; }
.layout-3-col .image .height-setter { padding-top:50%; }
.layout-3-col .info { position:relative; background-color:#f5f3f0; padding:10%; }
.layout-3-col .ribbon { position: absolute; top:0; right:0; width:90px; }
.image-cover { position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; }

@media only screen and (min-width: 1024px) and (max-width: 1200px) {
.page-header { padding-bottom:20%; }
}

@media only screen and (min-width: 768px) {
.layout-3-col .col:nth-child(even) .info { background-color:#eeece9; }
.layout-3-col .info p { font-size:0.9rem; line-height: 1.6em; }
}


@media only screen and (max-width: 1023px) {
.lead { padding:50px 10%; }
.page-wrapper { padding-top:50px; }
.page-header { padding-bottom:33%; }
}

@media only screen and (max-width: 767px) {
.lead { padding:50px 8%; }
.col { width:100%; }
.padding { padding:8%; }
.layout-3-col .info { padding:8%; }
}

@media only screen and (max-width: 599px) {
.page-header h1 { padding:12px 30px 15px; font-size:2.8rem; }
}

/* HEADER
######################################################### */
.site-header { position:fixed; z-index: 900; text-align: center; width: 100%; height:70px; background-color:rgba(255,255,255,0.95); box-shadow: 0 1px 6px rgba(0,0,0,0.2); }
.site-menu ul { margin:0; padding:0; list-style-type: none; }
.site-menu li { margin:0; padding:0; display: inline-block; }
.site-menu li a { padding:20px 12px; display: block; text-decoration: none; text-transform: uppercase; letter-spacing: 0.15em; font-size:0.9rem; font-weight: 600; color:#000; transition: color 150ms; }
.site-menu li a:hover { color:#999; }
.site-header .branding { position: absolute; top:0; left:0; padding:15px; }
.site-logo { width:160px; }
.site-header .phone { position: absolute; top:14px; right:14px; text-align: right; line-height: 1.3em; }
.site-header .phone .name { font-size:0.9em; }

@media only screen and (min-width: 1600px) {
.site-menu li a { padding:17px 15px; }
.site-header .phone { top:11px; }
}

@media only screen and (min-width: 1200px) and (max-width: 1299px) {
.site-menu { margin-left:20px; }
.site-menu li a { padding:20px 10px; letter-spacing: 0.1em; }
}

@media only screen and (min-width: 1024px) and (max-width: 1199px) {
.site-menu { margin-left:20px; }
.site-menu li a { padding:20px 7px; letter-spacing: 0.1em; font-size:0.8rem; }
.site-header .branding { padding:18px 10px; }
.site-logo { width:140px; }
}

@media only screen and (min-width: 1024px) {
.site-header .current-menu-item > a,
.site-header .current-menu-ancestor > a,
.site-header .current-post-ancestor > a,
.site-header .current-page-ancestor > a { color:#74b000!important; border-top:#74b000 solid 3px; }
.mobile-nav-btn { display: none; }
.mobile-call-btn { display: none; }
}

@media only screen and (max-width: 1023px) {
.site-header { height:50px; }
.site-header .branding { position: relative; text-align: center; padding:9px; }
.site-logo { width:130px; }
.mobile-nav-logo { display: block; padding:30px 30px 10px; }
.mobile-nav-logo .site-logo { width:160px; }
.site-menu { position: fixed; z-index: 1000; left:-70%; top:0; width:70%; max-width:350px; height:100%; background-color:#fff; text-align: left;transition: left 300ms ease, box-shadow 300ms; }
.site-menu.slide-in { left:0; box-shadow: 1px 0 20px rgba(0,0,0,0.5);}
.site-menu ul { margin-top:20px; }
.site-menu li { margin:0; padding:0; display: block; }
.site-menu li a { padding:15px 30px; font-size: 1rem; }
.site-header .current-menu-item > a,
.site-header .current-menu-ancestor > a,
.site-header .current-post-ancestor > a,
.site-header .current-page-ancestor > a { color:#74b000!important; border-left:#74b000 solid 5px; }
.mobile-nav-btn { display: block; position: absolute; top:12px; left:15px; font-size:25px; color: #000; }
.mobile-call-btn { display: block; position: absolute; top:12px; right:15px; font-size:25px; color:#74b000; }
}

/* HOME
######################################################### */
.hero-slider-wrapper { position: relative; }
.hero-slider-wrapper .more { display: block; position: absolute; bottom:30px; left:50%; transform: translateX(-50%); }
.hero-slider .panel { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 200; padding:40px 60px 36px; background-color:rgba(255,255,255,0.8); box-shadow: 0 5px 20px rgba(0,0,0,0.3); }
.hero-image-wrapper { position: relative; width:100%; }
.hero-image-wrapper .height-setter { padding-top:50%; }

@media only screen and (min-width: 768px) {
.hero-slider .panel .text-line-1 { font-size: 1.7rem; }
.hero-slider .panel a { font-size:0.9rem; }
.request-consultation nf-fields-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; }
.request-consultation nf-field { width:100%; }
.request-consultation nf-field:nth-child(1) { width:40%; }
.request-consultation nf-field:nth-child(2) { width:60%; padding-left:25px; }
}

@media only screen and (max-width: 767px) {
.hero-image-wrapper .height-setter { padding-top:75%; }
.hero-slider .panel { padding:20px 30px; }
.hero-slider .panel .text-line-1 { font-size: 1.3rem; }
.hero-slider .panel .h1 { font-size:2.8rem; line-height: 1em; white-space: nowrap; }
.request-consultation { padding-top:0; }
}

/* SERVICE
######################################################### */
.feature { margin-bottom:30px; }
.feature .image { position: relative; }
.extra-info-images img { margin-bottom:30px; width:100%; }

@media only screen and (min-width: 1600px) {
.feature { width:20.5%; margin-right:6%; }
.feature:nth-child(4n+0) { margin-right:0; }
}
@media only screen and (min-width: 1024px) and (max-width: 1599px) {
.feature { width:28%; margin-right:8%; }
.feature:nth-child(3n+0) { margin-right:0; }
}
@media only screen and (min-width: 768px) {
.feature .image { margin-bottom:30px; }
.feature .image .height-setter { padding-bottom:50%; }
.extra-info { padding-right:5%; }
.extra-info-images { padding-left:5%; }
}
@media only screen and (max-width: 767px) {
.feature .image { margin-bottom:20px; }
.feature h4 { margin-bottom:20px; }
.feature .image .height-setter { padding-bottom:66%; }
}
@media only screen and (min-width: 600px) and (max-width: 1023px) {
.feature { width:46%; margin-right:8%; }
.feature:nth-child(2n+0) { margin-right:0; }
}
@media only screen and (min-width: 600px) {
.feature p, .extra-info { font-size:0.9rem; line-height: 1.8em; }
}

/* GALLERY
######################################################### */
.gallery-nav ul { margin:0; padding:0; list-style-type: none; }
.gallery-nav li { margin:0; padding:0; }
.gallery-nav a { display: block; padding:15px 25px 15px 0; border-bottom:1px solid rgba(0,0,0,0.1); text-decoration: none; }
.gallery-nav .current_page_item a { color:#a8a39b; position: relative; }

.gallery { margin:0; padding:0; list-style-type: none; }
.gallery li img { width:100%; }
.gallery li a { transition: opacity 150ms; }
.gallery li a:hover { opacity:0.8; }

@media only screen and (min-width: 1200px) {
.gallery-nav a { font-size:1.2rem; }
}

@media only screen and (min-width: 1024px) {
.gallery-wrapper { float:right; width:75%; }

.gallery-nav-wrapper { float:left; width:25%; }
.gallery-nav-wrapper { padding-right:0; }
.gallery-nav .current_page_item a:after { font-family: "Font Awesome 5 Free"; content: "\f054"; font-weight: 900; position: absolute; top:15px; right:0; }
}
@media only screen and (max-width: 1023px) {
.gallery-wrapper { padding-bottom:0; }

.gallery-nav-wrapper { padding-top:0; padding-bottom:0; }
}

@media only screen and (min-width: 768px) {
.gallery-title { margin:3% 0 8% 0; }
.gallery li { margin:0; padding:0; float:left; width:21.25%; margin:0 5% 5% 0; }
.gallery li:nth-child(4n+0) { margin-right:0; }
}

@media only screen and (max-width: 767px) {
.gallery-title { margin:0 0 10% 0; }
.gallery li { margin:0; padding:0; float:left; width:30%; margin:0 5% 5% 0; }
.gallery li:nth-child(3n+0) { margin-right:0; }
}

/* TESTIMONIALS
######################################################### */
.testimonial:nth-child(even) { background-color:#f5f3f0; }
.testimonial .two-thirds { padding-right:5%; }
.testimonial img { width:100%; }
.testimonial .customer { margin-bottom:40px; }
.testimonial .craig { padding-left:30px; border-left:#1a71c3 solid 2px; }
.testimonial .craig h5 { color:#1a71c3; }
.testimonial .craig p { color:#555; }
.testimonial .craig p:last-child { margin-bottom:0; }

@media only screen and (max-width: 767px) {
.testimonial img { margin-top:30px; }
}

/* SHOWROOM
######################################################### */
@media only screen and (min-width: 1024px) {
.showroom-gallery-wrapper { float:right; width:66.66%; }
.showroom-info { float:left; width:33.33%; padding-right:0; }
}
@media only screen and (max-width: 1023px) {
.showroom-gallery-wrapper { padding-bottom:0; }
.showroom-info {  padding-bottom:0; }
}

/* CONTACT
######################################################### */
.contact-details .detail { padding-left:50px; position: relative; }
.contact-details iframe { width:100%!important; }

/* FOOTER
######################################################### */
.request-consultation-footer { border-top:1px solid rgba(0,0,0,0.1); padding-top:5%; }
.page-template-page-gallery-child .request-consultation-footer { border:none; }
.site-footer { background-size:cover; background-position: center center; text-align: center; color:#fff; }
.site-footer .container { background-color:rgba(10,10,10,0.5); padding:40px; }
.site-footer a { color:#fff; }
.footer-menu { margin-bottom:30px; }
.footer-menu ul { margin:0; padding:0; list-style-type: none; }
.footer-menu li { margin:0 10px; padding:0; display: inline-block; }
.footer-menu a { text-decoration: none; color:#fff; }
.footer-logo { width:180px; }
.fine-print { opacity:0.8; margin-top:25px; }
.footer-text-1 { margin:0 0 15px; font-size:14px; font-weight: 400; line-height: 1.3em; }
.footer-text-2 { margin:0; font-size:12px; font-weight: 400; line-height: 1.3em; }

.site-footer .current-menu-item > a,
.site-footer .current-menu-ancestor > a,
.site-footer .current-post-ancestor > a,
.site-footer .current-page-ancestor > a { text-decoration: underline; }

@media only screen and (min-width: 768px) {
.request-consultation-footer nf-fields-wrap { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }
.request-consultation-footer nf-field { width: 33.33%; padding:1%; }
.request-consultation-footer nf-field:nth-child(4) { width: 50%; }
.request-consultation-footer nf-field:nth-child(5) { width: 50%; }
.request-consultation-footer nf-field:nth-child(6) { width: 100%; }
.request-consultation-footer textarea { max-height: 150px; }
.request-consultation-footer .nf-field-container { margin-bottom:0; }
.request-consultation-footer .nf-input-limit { margin:0; }
}

@media only screen and (min-width: 1024px) {
.request-consultation-footer nf-field { padding:1%; }
}

/* CUSTOM MARGINS & PADDING
######################################################### */
.no-margin-top { margin-top:0!important; }
.no-margin-bottom { margin-bottom:0!important; }
.no-margin { margin:0!important; }
.margin-top-xxxl { margin-top:100px; }
.margin-top-xxl { margin-top:75px; }
.margin-top-xl { margin-top:50px; }
.margin-top-lg { margin-top:30px; }
.margin-top-md { margin-top:20px; }
.margin-top-sm { margin-top:10px; }
.margin-top-xs { margin-top:5px; }
.margin-top-xxs { margin-top:3px; }
.margin-bottom-xxl { margin-bottom:75px; }
.margin-bottom-xl { margin-bottom:50px; }
.margin-bottom-lg { margin-bottom:30px; }
.margin-bottom-md { margin-bottom:20px; }
.margin-bottom-sm { margin-bottom:10px; }
.margin-bottom-xs { margin-bottom:5px; }
.margin-bottom-xxs { margin-bottom:3px; }
.margin-right-xxs { margin-right:3px; }
.margin-right-xxl { margin-right:75px; }
.margin-right-xl { margin-right:50px; }
.margin-right-lg { margin-right:30px; }
.margin-right-md { margin-right:20px; }
.margin-right-sm { margin-right:10px; }
.margin-right-xs { margin-right:5px; }
.margin-right-xxs { margin-right:3px; }

.no-padding-top { padding-top:0!important; }
.no-padding-bottom { padding-bottom:0!important; }
.no-padding-right { padding-right:0!important; }
.no-padding-left { padding-left:0!important; }

.search-wrapper-404 { max-width: 400px; margin:auto; }
.search-wrapper-404 input { margin-top:15px; }


/* WP ADMIN
######################################################### */
#wpadminbar { display: none; }
body.admin-bar { margin-top: -32px!important; }

@media only screen and (max-width: 782px) {
body.admin-bar { margin-top: -46px!important; }
}