@charset "utf-8";
/*########################################

	Project:		Smart Repair Systems (NZ)
	Version:		1.2.3
	Last change:	26/11/2016
	Designed by:	dpDesignz - www.dpDesignz.co.nz

#########################################*/
/*! Google Font - Lato ~ 300 = Light, 400 = Normal, 400i = Regular-Italic, 700 = Bold */
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700');
/*! Google Font - Open Sans ~ 400 = Normal, 700 = Bold */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
.Fear {display:none;}

/*---------------------------------------
	UNIVERSAL
-----------------------------------------*/
*{font-family: 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
body {margin:0;padding:0; color: #3c3c3b;}
body#HolyGrail {display:flex; min-height: 100vh; flex-direction: column; justify-content: center;}
a {color: #e63323;}
a:hover {color: #b02b17;}
a[href^="tel:"] {text-decoration: none;}
h1 {font-weight: 300; font-size: 3.375em; color: #3c3c3b; margin: 30px 0;}
h2 {font-weight: 700; font-size: 1.875em; color: #3c3c3b; margin: 20px 0 30px;}
q {display: inline-block; width: 100%; background: #fff; padding: 15px 20px 15px 45px; margin: 0 0 20px; position: relative; box-shadow: 2px 2px 15px #ccc; font-style: italic; font-weight: 700; font-size: 1.125em; text-align: center; border-left: 15px solid #002d59; border-right: 2px solid #002d59;}
q::before{content: "\201C"; font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999; position: absolute; left: 10px; top:5px;}
q::after{content: "";}
.container {margin: 0 auto; max-width: 1154px; padding: 0 2%;}
figure.img-right, figure.video-right {float:right;}
figure.img-left {float:left;}
figure.img-right-pad, figure.img-left-pad {background-color: white; padding: 5px 10px;}
a:hover img {-moz-box-shadow: 1px 1px 5px #4D4D4D;-webkit-box-shadow: 1px 1px 5px #4D4D4D;box-shadow: 1px 1px 5px #4D4D4D;}
.clearfix:after {content: " "; /* Older browser do not support empty content */visibility: hidden;display: block;height: 0;clear: both;}
/* Extra small devices (Portrait phones (<544px)) */
@media screen and (max-width: 544px) {
}
/* Small devices (Landscape phones (≥544px - <768px)) */
@media screen and (max-width: 768px) {
	figure.img-right, figure.img-left, figure.video-right {float:none;}
	figure img, figure iframe {margin: 10px auto; display: block;}
}
/* Medium devices (Tablets (≥768px - <992px)) */
@media screen and (max-width: 992px) {
}
/*  Large devices (Desktops (≥992px - <1200px)) */
@media screen and (max-width: 1200px) {
}
/*   Extra large devices (Desktops (≥1200px)) */
@media screen and (min-width: 1200px) {
}

/*---------------------------------------
	HEADER
-----------------------------------------*/
body > header {padding:22px 8px !important;}
body > header > main {align-items: center;display: flex;justify-content: space-between;}
body > header > main > section#hdr-logo {margin-left: 20px;width: 100%;height: auto;max-width: 170px;}
body > header > main .menu-toggle, body > header > main .label-toggle {display: none;}
body > header > main > nav {margin-right: 80px;}
body > header > main > nav ul {padding:0; margin:0; list-style: none; position: relative;list-style-type: none;}
body > header > main > nav ul li {margin: 0px;float: left;list-style: none;z-index: 999;}
body > header > main > nav ul li a {font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;text-decoration: none;color:#414042;padding: 12px 20px;display: inline-block;}
body > header > main > nav ul li a:after, body > header > main > nav ul li label:after {content: '\f0d7';font-family: "Font Awesome 5 Free";font-weight: 900;margin-left: 10px;}
body > header > main > nav ul li a:only-child:after, body > header > main > nav ul li label:only-child:after {content: ''; display:none;}
body > header > main > nav ul li:hover > a, body > header > main > nav ul li a#nav-active, body > header > main > nav > ul li label:hover {background-color: #81909a; color: #FFFFFF;min-width: 100%;}
body > header > main > nav ul li:hover a:after {content: '\f0d8';}
body > header > main > nav ul ul {display: none; position: absolute; top: 42.3px;white-space: nowrap;}
body > header > main > nav ul li:hover > ul {display:inherit;}
body > header > main > nav ul ul li {float:none !important;display:list-item;position: relative; background-color: #fafafa;min-height: 43px;border-bottom:1px solid #ededed;}
@media screen and (max-width: 768px) { /* http://blog.christopherianmurphy.com/2016/01/responsive-pure-css-menu.html, http://codepen.io/andornagy/pen/RNeydj */
	body > header {padding-bottom: 0 !important;}
	body > header > main {flex-direction: column; justify-content: flex-start;}
	body > header > main > nav {display: none;margin-right:0;}
	body > header > main > #mmenu-toggle:checked ~ nav, body > header > main > nav .menu-toggle:checked ~ ul {display: block;}
	body > header > main > nav ul li, nav ul ul li {display:block;text-align: center;min-width: 100vw;font-size: 1.2em;}
	body > header > main > nav ul ul li {font-size: 1em;background-color: #ffffff; border-bottom: none;}
	body > header > main > nav ul li:hover > ul {display: none;}
	body > header > main > nav ul ul {float: none; position:static;}
	body > header > main .label-toggle {font-family: 'Open Sans'; font-size: 1.2em; text-align: center; color:#414042; display: block;padding: 8px 0;min-width: 100vw;}
	body > header > main > nav .label-toggle {font-size: 1em;padding: 12px 0;}
	body > header > main .label-toggle + a {display: none;}
	body > header > main > #mmenu-toggle + .label-toggle:after {content: '\f0c9';font-family: "Font Awesome 5 Free";font-weight: 900;margin-left: 10px;}
	body > header > main > #mmenu-toggle:checked ~ .label-toggle:after {content: '\f00d';}
	body > header > main .menu-toggle:checked ~ .label-toggle:after {content: '\f0d8';}
}

/*---------------------------------------
	CONTENT
-----------------------------------------*/
body > section#HolyGrail-body {display: flex;
background: rgba(217,222,225,1);
background: -moz-linear-gradient(-45deg, rgba(217,222,225,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(217,222,225,1)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(-45deg, rgba(217,222,225,1) 0%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(-45deg, rgba(217,222,225,1) 0%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(-45deg, rgba(217,222,225,1) 0%, rgba(255,255,255,0) 100%);
background: linear-gradient(135deg, rgba(217,222,225,1) 0%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9dee1', endColorstr='#ffffff', GradientType=1 );}
body > section#HolyGrail-body > main {flex:1;}
body > section#HolyGrail-body > main > section#top-image {max-height: 250px; overflow: hidden;}
body > section#HolyGrail-body > main > section#top-image img {width: 100%;height: 100%;object-fit: cover;}
body > section#HolyGrail-body > main article#main-content {padding-top: 26px; padding-bottom: 30px;}
body > section#HolyGrail-body > main article#main-content figure img {width: 100%;height: auto;max-width: 260px;}
body > section#HolyGrail-body > main > article#main-gallery {margin-bottom: 40px;}
body > section#HolyGrail-body > main > article#main-gallery h2 {font-weight: 700; font-size: 1.875em; text-align: center; color: #575756; margin-top: 0;}
body > section#HolyGrail-body > main > article#main-gallery main {display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap;}
body > section#HolyGrail-body > main > article#main-gallery main article {border: 1px solid #3c3c3b; width: 250px; height: 195px; overflow: hidden; margin:12px;}
body > section#HolyGrail-body > main > article#main-gallery main article img {width: 100%;height: 100%;object-fit: cover;}
body > section#HolyGrail-body > main > article.service-review {padding-bottom: 30px;}
body > section#HolyGrail-body > main > article.service-review .fb-post {max-width: 552px; margin: 0 auto;}
body > section#HolyGrail-body > main > article.service-review .service-review-container {display: inline-block; width: 100%; background: #fff; padding: 15px 35px 15px 45px; margin: 0 0 20px; position: relative; box-shadow: 2px 2px 15px #ccc; font-style: italic; font-weight: 700; font-size: 1.125em; text-align: center; border-left: 15px solid #002d59; border-right: 2px solid #002d59;}
body > section#HolyGrail-body > main > article.service-review .service-review-container::before{content: "\201C"; font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999; position: absolute; left: 10px; top:5px;}
body > section#HolyGrail-body > main > article.service-review .service-review-container::after{font-family: "Font Awesome 5 Brands"; font-weight: 400; content: "\f39e"; font-style: normal; font-size: 25px; color: #3b5998; position: absolute; right: 20px; bottom: 10px;}
body > section#HolyGrail-body > main > article.service-review .fb-post {max-width: 550px; margin: 0 auto;}
body > section#HolyGrail-body > main section.sidebar-page {display: flex; align-items: flex-start;}
body > section#HolyGrail-body > main section.sidebar-page article#main-content {max-width: 768px;}
body > section#HolyGrail-body > main section.sidebar-page aside.sidebar {padding: 26px 0 30px 15px; flex: 1;}
@media screen and (max-width: 768px) {
	body > section#HolyGrail-body > main > article#main-gallery main {max-width: 100vw; justify-content: center;}
	body > section#HolyGrail-body > main > article#main-gallery main article {justify-content: center;}
	body > section#HolyGrail-body > main section.sidebar-page {flex-direction: column; align-items: center;}
	body > section#HolyGrail-body > main section.sidebar-page aside.sidebar {max-width: 100vw; padding: 0px;}
}

body > section#HolyGrail-body > main > article#main-action {padding: 42px 8px;}
body > section#HolyGrail-body > main > article#main-action h2 {font-weight: 700; font-size: 1.875em; margin-top: 0;}
body > section#HolyGrail-body > main > article#main-action h3 {font-weight: 700; font-size: 1.125em; text-transform: uppercase; margin-bottom: 0;}
body > section#HolyGrail-body > main > article#main-action > section#ma-list > main {display: flex; align-items: top;}
body > section#HolyGrail-body > main > article#main-action > section#ma-list > main > article {flex:1; text-align: left; margin-right: 25px;}
body > section#HolyGrail-body > main > article#main-action > section#ma-list > main > article:last-child {margin-right: 0;}
body > section#HolyGrail-body > main > article#main-action > section#ma-list > main > article p {font-size:1em; display: inline-flex; align-items: flex-start;margin: 6px 0px 6px 38px; position: relative;}
body > section#HolyGrail-body > main > article#main-action > section#ma-list > main > article p:before {display: inline-block;content: ' ';margin-right: 10px;height:28px;width: 28px !important; background-image: url('/images/rw_tick.svg'); background-size: 100% 100%;position: absolute;left: -38px;top: -6px;}
body > section#HolyGrail-body > main > article#main-action > section#ma-list > main > article p:last-child {margin-bottom: 0;}
body > section#HolyGrail-body > main > article#main-action > section#ma-list > main > article p a {color: #ffffff; text-decoration: none;}
body > section#HolyGrail-body > main > article#main-action > section#ma-list > main > article p a:hover {text-decoration: underline;}
@media screen and (max-width: 768px) {
	body > section#HolyGrail-body > main > article#main-action > section#ma-list > main {flex-direction: column; align-items: center;}
	body > section#HolyGrail-body > main > article#main-action > section#ma-list > main > article {text-align: center;}
	body > section#HolyGrail-body > main > article#main-action > section#ma-list > article p {display: flex; justify-content: center;}
}

/*---------------------------------------
	FOOTER
-----------------------------------------*/
body > footer {background-color: #9d9d9c;flex:1;}
body > footer > section#HolyGrail-footer {display: flex; min-height: 15px;}
body > footer > section#HolyGrail-footer > main {flex: 1;}
body > footer > section#HolyGrail-footer > main > section#ftr-main-repairs {background:#002a5c url('/images/srs_car.svg') no-repeat; background-position: 50% 36px; background-size:  675px 108px; padding:36px 8px 50px;color:#FFFFFF;}
body > footer > section#HolyGrail-footer > main > section#ftr-main-repairs > header p {margin: 40px 0 35px; text-align:center; font-size: 1.200em;}
body > footer > section#HolyGrail-footer > main > section#ftr-main-repairs > main {display: flex; max-width:825px; align-items: center;}
body > footer > section#HolyGrail-footer > main > section#ftr-main-repairs > main > article {flex:1;}
body > footer > section#HolyGrail-footer > main > section#ftr-main-repairs > main > article p {font-size:1.170em; display: inline-flex; align-items: center;margin:5px 0;}
body > footer > section#HolyGrail-footer > main > section#ftr-main-repairs > main > article p:before {display: inline-block;content: ' ';margin-right: 10px;height:28px;width: 28px; background-image: url('/images/rw_tick.svg'); background-size: 100% 100%;}
body > footer > section#HolyGrail-footer > main > section#ftr-main-repairs > main > article p:last-child {margin-bottom: 0;}
body > footer > section#HolyGrail-footer > main > section#ftr-main-repairs > main > article p a {color: #ffffff; text-decoration: none;}
body > footer > section#HolyGrail-footer > main > section#ftr-main-repairs > main > article p a:hover {text-decoration: underline;}
body > footer > section#HolyGrail-footer > main > section#ftr-contact {padding:20px 8px 8px;color:#FFFFFF;}
body > footer > section#HolyGrail-footer > main > section#ftr-contact > main {align-items: center;display: flex;justify-content: space-between;}
body > footer > section#HolyGrail-footer > main > section#ftr-contact > main > h3 {font-family: 'Open Sans'; font-size:1.3em; text-transform: uppercase;}
body > footer > section#HolyGrail-footer > main > section#ftr-contact > main > section#ftr-mobile-only {display: none;}
body > footer > section#HolyGrail-footer > main > section#ftr-contact > main > section#ftr-mobile-only p {text-align: center; font-size: 1.2em; font-weight: 900;}
body > footer > section#HolyGrail-footer > main > section#ftr-contact > main > section#ftr-mobile-only p a {color: white; text-decoration: none;}
body > footer > section#HolyGrail-footer > main > section#ftr-contact > main > section#ftr-mobile-only p a:hover {text-decoration: underline;}
body > footer > section#HolyGrail-footer > main > section#ftr-contact > main > section#ftr-contact-info > p {display: inline-block;}
body > footer > section#HolyGrail-footer > main > section#ftr-contact > main > section#ftr-contact-info > p span.cont-box, body > footer > section#HolyGrail-footer > main > section#ftr-contact > main > section#ftr-contact-info > p a.cont-box {display: inline-flex;align-items: center;justify-content: center;font-size: 0.750em; font-weight: 700; color: #3C3C3B;text-transform: uppercase;padding: 10px;vertical-align: middle;width: 32px;height: 32px;text-align: center;margin: 0 10px 0 20px;border: 2px solid #FFFFFF;}
body > footer > section#HolyGrail-footer > main > section#ftr-contact > main > section#ftr-contact-info > p a.cont-box {margin-left: 10px;}
body > footer > section#HolyGrail-footer > main > section#ftr-contact > main > section#ftr-contact-info > p a.cont-box:hover {color:white; text-decoration: none;}
body > footer > section#HolyGrail-footer > main > section#ftr-contact > main > section#ftr-contact-info > p a {color:#FFFFFF;text-decoration:none;}
body > footer > section#HolyGrail-footer > main > section#ftr-contact > main > section#ftr-contact-info > p a:hover {text-decoration: underline;}
/* Scroll Back To Top Button ~ https://www.w3schools.com/howto/howto_js_scroll_to_top.asp */
body > footer > #scrollToTopBtn {display: none;position: fixed; bottom: 20px; right: 30px;z-index: 99;border: none;outline: none;background-color: #ed1c24;color: white;cursor: pointer; padding: 15px;border-radius: 10px;font-size: 18px;}
body > footer > #scrollToTopBtn:hover {background-color: #555;}

@media screen and (max-width: 768px) {
	body > footer > section#HolyGrail-footer > main > section#ftr-main-repairs > main, body > footer > section#HolyGrail-footer > main > section#ftr-contact > main {flex-direction: column;}
	body > footer > section#HolyGrail-footer > main > section#ftr-main-repairs > main > article, body > footer > section#HolyGrail-footer > main > section#ftr-contact > main > h3 {text-align: center;}
	body > footer > section#HolyGrail-footer > main > section#ftr-main-repairs > main > article p {display: flex; justify-content: center;}
	body > footer > section#HolyGrail-footer > main > section#ftr-contact > main > section#ftr-mobile-only {display: block;}
	body > footer > section#HolyGrail-footer > main > section#ftr-contact > main > section#ftr-contact-info > p {display: block; text-align: center;}
}