@charset "utf-8";



html{overflow-y:scroll; overflow-x:hidden;}
html, body{margin:0; padding:0; font-size: 1.0rem; line-height:1.7em;}
p {font-size: 1.1rem;}
.size {font-size: 1.1rem;}
ul {font-size: 1.1rem;}
*, *::before, *::after{box-sizing:border-box;}

.big {font-size: 1.3rem;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.uppercase{text-transform:uppercase;}
.capitalise{text-transform:capitalize;}
.hidden{display:none;}
.nospace{margin:0; padding:0; list-style:none;}
.block{display:block;}
.justified{text-align:justify;}
.inline *{display:inline-block;}
.inline *:last-child{margin-right:0;}
.pushright li{margin-right:20px;}
.pushright li:last-child{margin-right:0;}
.borderedbox{border:1px solid; background-color:#ffffff;color:#808080;}
.overlay{position:relative; z-index:1;}
.overlay::after{display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:""; z-index:-1;}
.bgded{background-position:top center; background-repeat:no-repeat; background-size:cover;}
.circle{border-radius:50%; background-clip:padding-box;}
.btn{display:inline-block; padding:8px 18px 10px; text-transform:uppercase; border:1px solid;}
.btnlong{display:inline-block; padding:8px 18px 10px; text-transform:uppercase; border:1px solid; width:100%;text-align:center;}
.cursive{ font-family:"Playwrite NZ", sans-serif; font-size:1.8rem; line-height:50px;color:#9e2e2d;}

.clear, .group{display:block;}
.clear::before, .clear::after, .group::before, .group::after{display:table; content:"";}
.clear, .clear::after, .group, .group::after{clear:both;}

a{outline:none; text-decoration:none;}

.fl_left, .imgl{float:left;}
.fl_right, .imgr{float:right;}

img{width:auto; max-width:100%; height:auto; margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
.imgl{margin:0 15px 10px 0; clear:left;}
.imgr{margin:0 0 10px 15px; clear:right;}

.pale {background-color:#cce2e6; padding:10px !important;}
.red {color:#800000;}
/* Fonts
--------------------------------------------------------------------------------------------------------------- */
body, input, textarea, select{font-family:"Quicksand",  sans-serif;}
h1, h2, h3, h4, h5, h6, .heading{font-family:"Quicksand", sans-serif;}


/* Forms
--------------------------------------------------------------------------------------------------------------- */
form, fieldset, legend{margin:0; padding:0; border:none;}
legend{display:none;}
label, input, textarea, select, button{display:block; resize:none; outline:none; color:inherit; font-size:0.9rem; font-family:inherit;}
label{margin-bottom:5px;}
:required, :invalid{outline:none; box-shadow:none;}
::placeholder{opacity:1;}/* Makes sure the placeholder text is not transparent */


/* Generalise
--------------------------------------------------------------------------------------------------------------- */
h1 {margin:0 0 20px 0; font-size:1.9rem; line-height:normal; font-weight:normal; text-transform:capitalize;color:#75adba;}
/**h2 {margin:0 0 20px 20px; font-size:1.6rem; line-height:50px; font-weight:normal; text-transform:uppercase;}**/
h2 {margin:0 0 20px 0; font-size:1.4rem; line-height:normal; font-weight:normal; text-transform:capitalize; color:#75adba;}

h3 {margin:0 0 0 0; font-size:1.3rem; line-height:50px; font-weight:normal; text-transform:none;}
h4 {margin:0 0 10px 0; font-size:1.8rem; line-height:50px; font-weight:normal; text-transform:capitalize; text-align:left!important;}
h5 {margin:0 0 20px 0; font-size:1.4rem; line-height:normal; font-weight:normal; text-transform:capitalize; color:#75adba;}

h6, .heading{margin:0 0 20px 0; font-size:1.4rem; line-height:normal; font-weight:normal; text-transform:none;}
.heading.nospace{margin-bottom:0;}
.services-heading {margin:10px 0 20px 0; font-size:1.4rem; line-height:normal; font-weight:normal; text-transform:capitalize; color:#75adba;}

address{font-style:normal; font-weight:normal;}
hr{display:block; width:100%; height:1px; border:solid; border-width:1px 0 0 0;}

.font-xs{font-size:1rem;}
.font-x2{font-size:2.2rem;}
.font-x3{font-size:3.2rem;}

.wrapper{display:block; position:relative; width:100%; margin:0; padding:0; text-align:left; word-wrap:break-word;}
/*
The "hoc" class is a generic class used to centre a containing element horizontally
It should be used in conjunction with a second class or ID
*/
.hoc{display:block; margin:0 auto;}


/* HTML 5 Overrides
--------------------------------------------------------------------------------------------------------------- */
address, article, aside, figcaption, figure, footer, header, main, nav, section{display:block; margin:0; padding:0;}

/* Grid - RS-MQF 1140 V.2 - https://www.os-templates.com/free-basic-html5-templates/rs-mqf-1140
--------------------------------------------------------------------------------------------------------------- */
.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:inline-block; float:left; margin:0 0 0 4.21052%; list-style:none;}

.first{margin-left:0; clear:left;}

.one_quarter{width:21.8421%;}
.one_third{width:30.52631%;}
.one_half, .two_quarter{width:47.89473%;}
.two_third{width:65.26315%;}
.three_quarter{width:73.94736%;}


/* Spacing
--------------------------------------------------------------------------------------------------------------- */
.btmspace-10{margin-bottom:10px;}
.btmspace-15{margin-bottom:15px;}
.btmspace-30{margin-bottom:30px;}
.btmspace-50{margin-bottom:50px;}
.btmspace-80{margin-bottom:80px;}

.rgtspace-5{margin-right:5px;}
.rgtspace-10{margin-right:10px;}
.rgtspace-15{margin-right:15px;}
.rgtspace-30{margin-right:30px;}
.rgtspace-50{margin-right:50px;}
.rgtspace-80{margin-right:80px;}

.inspace-5{padding:5px;}
.inspace-10{padding:10px;}
.inspace-15{padding:15px !important;}
.inspace-30{padding:30px;}
.inspace-50{padding:50px;}
.inspace-80{padding:80px;}

/* Header
--------------------------------------------------------------------------------------------------------------- */
#header{padding:10px 0;}
#header *{margin:0; padding:0; line-height:1;}
#header #logo{font-size:26px; text-transform:uppercase;}
#header #logo i{display:block; margin-bottom:20px; font-size:3.5rem;}


.site-header {display: grid; width: 100%; margin: 0 auto;  position:relative;}
.site-header > .header-image {grid-row:1; grid-column:1; z-index:1; text-align:center;}
.site-header > .header-image > picture > img {object-fit: cover; height: 100%;}
.site-header > .header-content {grid-row:1; grid-column:1; display:grid; grid-template-columns: 100%; grid-template-rows: auto auto 1fr; z-index:99;}
.site-header > .header-content > #pageintro {padding: 1rem; align-self: center; text-align:center;}
.site-header > .header-content > #pageintro > .heading {text-shadow: 2px 2px 2px black; /**margin-top:2rem;**/ margin-bottom:0;color:#3b5b8e;}

/**.site-header .row0 {grid-row: 1;  z-index: 99;}**/
/**.site-header .row1 {grid-row: 2; z-index: 99;}**/
/**.site-header #pageintro {padding: 0; grid-row: 3;  z-index: 99; align-self: center;}**/
/**.site-header #pageintro h1 {text-shadow: 3px 3px 8px black;}**/
/**.site-header .header-image {grid-row: span 3; z-index: -1; text-align: center; margin: 0 auto; left: 0; right: 0;}**/
/**.site-header .header-image img {width: 100%; object-fit: cover; object-position: center center;}**/
/* Page Intro
--------------------------------------------------------------------------------------------------------------- */
#pageintro{padding:180px 0;}
#pageintro article{display:block; max-width:100%;}
#pageintro .heading{margin-bottom:125px; font-size:3rem;}
#pageintro p{font-size:1.5rem;}



/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container{padding:20px 0;}

/* Content */
.container .content{}

.sectiontitle{display:block; max-width:100%; margin:0 auto 1.5rem; text-align:center;}
/**.sectiontitle *{margin:0;}**/
.sectiontitle h2 {margin: 0 auto; margin-bottom: 1.5rem;}

.sectiontitle .heading{margin-bottom:20px;}
.sectiontitle p {display:block; max-width:100%; margin:0 auto 1.5rem; text-align:justify!important;}
.sectiontitle ul {display:block; max-width:100%; margin:0 auto 1.5rem; text-align:left!important;}

.posts figure{display:block; margin-bottom:50px;}
.posts figure:last-child{margin-bottom:0;}/* Used when elements stack in small viewports */
.posts figure > div, .posts figure figcaption{display:block; float:left; width:50%;}
.posts figure > div{}
.posts figure > div img{}
.posts figure figcaption{padding:50px 0 0 50px;}
.posts figure figcaption{}
.posts figure figcaption *{margin:0;}
.posts figure figcaption .heading{margin-bottom:30px;}
.posts figure figcaption footer{margin-top:30px;}
.posts figure:nth-child(even) > div{float:right;}
.posts figure:nth-child(even) figcaption{float:left; padding-left:0; padding-right:50px;}

/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{padding:80px 0;}

#footer .heading{margin-bottom:50px;}

#footer > div:first-of-type .heading{margin-bottom:20px; text-transform:uppercase; font-size:1.8rem;}
#footer > div:first-of-type .faico{margin-bottom:30px;}

/* Copyright
--------------------------------------------------------------------------------------------------------------- */
#copyright{padding:20px 0; font-size:0.8rem;}
#copyright *{margin:0; padding:0;font-size:0.8rem;}


/* Transition Fade
This gives a smooth transition to "ALL" elements used in the layout - other than the navigation form used in mobile devices
If you don't want it to fade all elements, you have to list the ones you want to be faded individually
Delete it completely to stop fading
--------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after{transition:all .3s ease-in-out;}
#mainav form *{transition:none !important;}

/* Navigation
--------------------------------------------------------------------------------------------------------------- */
nav ul, nav ol{margin:0; padding:0; list-style:none;}

#mainav, #breadcrumb, .sidebar nav{line-height:normal;}
#mainav .drop::after, #mainav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"Font Awesome\ 5 Free"; font-weight:900; font-size:10px; line-height:10px;}

/* Top Navigation */
#mainav{}

#mainav ul{display: flex; flex-wrap: nowrap; text-transform:none; text-align:center; font-weight:bold; width:100%; max-width:1140px; margin:0 auto;}
#mainav ul ul{z-index:9999; position:absolute; width:250px; text-transform:none; text-align:left;}
#mainav ul ul ul{left:250px; top:0;}
#mainav ul li{flex:auto; padding:0; align-self: center;}
#mainav li:last-child{margin-right:0;}
#mainav li li{width:100%; margin:0;}
#mainav li a{display:block; padding:20px 0;}
#mainav li li a{border:solid; border-width:0 0 1px 0;}
#mainav .drop{padding-left:15px;}
#mainav li li a, #mainav li li .drop{display:block; margin:0; padding:10px 15px;}
#mainav .drop::after, #mainav li li .drop::after{content:"\f0d7";}
#mainav .drop::after{top:25px; left:5px;}
#mainav li li .drop::after{top:15px; left:5px;}
#mainav ul ul{visibility:hidden; opacity:0;}
#mainav ul li:hover > ul{visibility:visible; opacity:1;}

#mainav form{display:none; margin:0; padding:0;}
#mainav form select, #mainav form select option{display:block; cursor:pointer; outline:none;}
#mainav form select{width:100%; padding:5px; border:none;}
#mainav form select option{margin:5px; padding:0; border:none;}





/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; font-size:16px; text-align:center; opacity:.2;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.5;}
#backtotop:hover{opacity:1;}


/* Tables
--------------------------------------------------------------------------------------------------------------- */
table, th, td{border:1px solid; border-collapse:collapse; vertical-align:top;}
table, th{table-layout:auto;}
table{width:100%; margin-bottom:15px;}
th, td{padding:5px 8px;}
td{border-width:0 1px;}


/* Gallery
--------------------------------------------------------------------------------------------------------------- */
#gallery{display:block; width:100%; margin-bottom:50px;}
#gallery figure figcaption{display:block; width:100%; clear:both;}
#gallery li{margin-bottom:30px;}


/* Font Awesome Social Icons
--------------------------------------------------------------------------------------------------------------- */
.faico{margin:0; padding:0; list-style:none;}
.faico li{display:inline-block; margin:8px 5px 0 0; padding:0; line-height:normal;}
.faico li:last-child{margin-right:0;}
.faico a{display:inline-block; width:36px; height:36px; line-height:36px; font-size:18px; text-align:center;}

.faico a{color:#9099AA; background-color:#2C3541;}
.faico a:hover{color:#FFFFFF;}

.faicon-dribble:hover{background-color:#EA4C89;}
.faicon-facebook:hover{background-color:#3B5998;}
.faicon-google-plus:hover{background-color:#DB4A39;}
.faicon-linkedin:hover{background-color:#0E76A8;}
.faicon-twitter:hover{background-color:#00ACEE;}
.faicon-vk:hover{background-color:#4E658E;}


/* Colours
--------------------------------------------------------------------------------------------------------------- */
body{color:#5F6F89; background-color:#2C3541;}
a{color:#3c5c8f;}
a:active, a:focus{background:transparent !important;}/* IE10 + 11 Bugfix - prevents grey background */
hr, .borderedbox{border-color:#808080;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#9099AA !important;}

.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(0,0,0,.55);}
.overlay.light{color:#474747;}
.overlay.light::after{background-color:rgba(255,255,255,.7);}

.btn, .btn.inverse:hover{color:#FFFFFF; background-color:#355d35; border-color:#355d35;}
.btn:hover, .btn.inverse{color:inherit; background-color:#768476; border-color:#768476;}

.btnlong, .btnlong.inverse:hover{color:#FFFFFF; background-color:#76adbc; border-color:#76adbc;}
.btnlong:hover, .btnlong.inverse{color:#76adbc; background-color:#FFFFFF; border-color:#76adbc;}

.imgover:hover::before{background:rgba(0,0,0,.55);}
.imgover, .imgover:hover::after{color:#9099AA;}


/* Rows */
.row0, .row0 a{color:#FFFFFF;background-color: rgba(255,255,255,.7);}
.row1{background-color:rgba(255,255,255,.5);/* #9099AA */}
.row2{color:#474747; background-color:#ffffff;}
.row3{color:#ffffff; background-color:#76adbc;}
.row4{color:#DFDFDF; background-color:#3F4A5C;}
.row5, .row5 a{color:#ffffff; background-color:#3b5b8e;}


/* Header */
#header #logo a{color:inherit;}
#header #logo i{color:#e2ee6e;}

/* Page Intro */
#pageintro{color:#3b5b8e;}

/* Content Area */
.team figure, .latest article{box-shadow:0px 0px 15px rgba(0,0,0,.1);}
.team figure:hover{color:inherit; background-color:#FFFFFF;}
.latest article:hover{box-shadow:0px 0px 15px rgba(0,0,0,.3);}


/* Footer */
#footer .heading{color:#FFFFFF;}
#footer hr, #footer .borderedbox, #footer .linklist li{border-color:rgba(255,255,255,.1);}


/* Navigation */
#mainav{}
#mainav li a{color:#3b5b8e;}
#mainav .active a, #mainav a:hover, #mainav li:hover > a{color:#404040; background-color:inherit;}
#mainav li li a, #mainav .active li a{color:#FFFFFF; background-color:rgba(144,153,170,.5);/* #9099AA */ border-color:rgba(144,153,170,1);/* #9099AA */}
#mainav li li:hover > a, #mainav .active .active > a{color:#77adba; background-color:#ffffff;}
#mainav form select{color:#474747; background-color:#FFFFFF;}

#backtotop{color:#FFFFFF; background-color:#9099AA;}


/* Tables + Comments */
table, th, td, #comments .avatar, #comments input, #comments textarea{border-color:#D7D7D7;}
th{color:#FFFFFF; background-color:#373737;}
tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#FBFBFB;}
tr:nth-child(even), #comments li:nth-child(even){color:inherit; background-color:#F7F7F7;}
table a, #comments a{background-color:inherit;}

.contactform {display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; max-width: 980px; grid-gap: 0.5rem; margin-bottom: 0.5rem;}
.contactform label {}

/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1140px){
	.hoc{max-width:1140px;}

}

@media screen and (min-width:978px) and (max-width:1140px){
	.hoc{max-width:95%;}
	#mainav li a {font-size: 0.95rem;}
}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:978px){
	.hoc{max-width:90%;}

	#header{}


	#mainav{padding:15px;}
	#mainav ul{display:none;}
	#mainav form{display:block;}

	#breadcrumb{}

	.container{}

	#footer{}

	#copyright{}
	#copyright p:first-of-type{margin-bottom:10px;}
}

@media screen and (min-width:750px) and (max-width:978px){
	.posts figure figcaption{padding-top:0;}
}

@media screen and (max-width:750px){
	.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
	.fl_left, .fl_right{display:block; float:none;}
	.group .group > *:last-child, .clear .clear > *:last-child, .clear .group > *:last-child, .group .clear > *:last-child{margin-bottom:0;}/* Experimental - Needs more testing in different situations, stops double margin when stacking */
	.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	#pageintro article{max-width:none;}
	#pageintro .heading{font-size:2rem;}

	.sectiontitle{max-width:none; margin-bottom:50px; text-align:left;}
	.posts figure{max-width:570px;}/* Same width as the image */
	.posts figure > div, .posts figure figcaption, .posts figure:nth-child(even) > div, .posts figure:nth-child(even) figcaption{display:block; float:none; width:100%;}
	.posts figure figcaption, .posts figure:nth-child(even) figcaption{padding:50px 0 0 0;}
	.team figure{max-width:350px;}
}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.6rem;}
	.font-x3{font-size:2.1rem;}
}