/*!
Theme Name: S2 Websolutions FrameWork
Theme URI: http://underscores.me/
Author: S2 Web Solutions
Author URI: http://www.s2websolutions.co.za
Description: Built on Underscores framework, by S2 Web Solutions, for S2 Web Solutions
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: s2_web_fw

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

s2_web_fw is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */
html {line-height: 1.15; -webkit-text-size-adjust: 100%; }

/* Sections
	 ========================================================================== */
body {margin: 0;}
h1 {font-size: 2em; margin: 0.67em 0;}

/* Grouping content
	 ========================================================================== */
hr {box-sizing: content-box; height: 0; overflow: visible;}
pre {font-family: monospace, monospace; font-size: 1em;}
a {background-color: transparent;}

abbr[title] {border-bottom: none; text-decoration: underline; text-decoration: underline dotted;}
b, strong {font-weight: bolder;}
code, kbd, samp {font-family: monospace, monospace; font-size: 1em; }
small {font-size: 80%;}

sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}

/* Embedded content
	 ========================================================================== */
img {border-style: none;}

/* Forms
	 ========================================================================== */
button, input, optgroup, select, textarea {font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}
button, input {overflow: visible;}
button, select {text-transform: none;}
button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button; appearance:button;}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style: none; padding: 0;}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
fieldset {padding: 0.35em 0.75em 0.625em;}
legend {box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal;}
progress {vertical-align: baseline;}
textarea {overflow: auto;}
[type="checkbox"], [type="radio"] {box-sizing: border-box; padding: 0;}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield; appearance: textfield; outline-offset: -2px;}
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button {-webkit-appearance: button; font: inherit;}

/* Interactive
	 ========================================================================== */
details {display: block;}
summary {display: list-item;}

/* Misc
	 ========================================================================== */
template {display: none;}
[hidden] {display: none;}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body, button, input, select, optgroup, textarea {color: #404040; font-family: "Urbanist", sans-serif; font-size: 16px; font-size: 1rem; line-height: 1.5;}
h1, h2, h3, h4, h5, h6, .header-image-text {clear: both; font-family: "Urbanist", sans-serif;}
p {margin-bottom: 1.5em;}
dfn, cite, em, i {font-style: italic;}
blockquote {margin: 0 1.5em;}
address {margin: 0 0 1.5em;}
pre {background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em;}
code, kbd, tt, var {font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 15px; font-size: 0.9375rem;}
abbr, acronym {border-bottom: 1px dotted #666; cursor: help;}
mark, ins {background: #fff9c0; text-decoration: none;}
big {font-size: 125%;}
h1.hero-title {text-align:center; font-size: 2.0rem; font-weight: 400; line-height: 1.1; margin:0; margin-top: 1rem; color: #fff;}
.hero-text {text-align:center; font-size: 1.4rem; line-height: 1.6; margin:0 auto; color: color-mix(in srgb, #ffffff, transparent 30%); max-width: 500px;}
.entry-content p {font-size: 1.1rem; margin-bottom: 1.25rem; line-height: 1.7; color: color-mix(in srgb, #14201c, transparent 15%); text-align: justify;}
p.page-intro {font-size: 1.3rem; font-weight: 500; color: #e16a02; text-align: center;}
p.subtitle {color: #e16a02; padding: 0px;font-size: 1.4rem; font-weight: 500; text-transform: uppercase; margin-bottom: 20px;}
.footer-header {font-size:1.2rem; font-weight: bold; position: relative; padding-bottom: 12px; display: block;}
.entry-title::after {display: block; margin:0 auto; content:''; width: 50%; min-width:320px; max-width: fit-content; background-color: #e16a02; height:2px; margin-top:1rem;}
.staff-member-card-title {font-size: 1.3rem; font-weight: 700;}
.staff-member-card-intro {font-weight: 600; color: color-mix(in srgb, #14201c, transparent 30%);}
.header-image-text {font-size: 2.6rem; font-weight: 700; color: #fff;}
.s2form-title {font-size: 1.8rem; font-weight: 700; color: #14201c;  position: relative; padding-left: 1rem;}
.s2form-title:before {content: "";  position: absolute; left: 0;  top: 0; height: 100%; width: 4px; background-color:#e16a02; border-radius: 2px;}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
body {background: #fff;}
hr {background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em;}
ul, ol {margin: 0 0 1.5rem 0; padding: 0 0 0 1.5rem;}
ul {list-style: disc;}
ol {list-style: decimal;}
li > ul, li > ol {margin-bottom: 0; margin-left: 1.5em;}
dt {font-weight: bold;}
dd {margin: 0 1.5em 1.5em;}
img {height: auto; max-width: 100%;}
figure {margin: 1em 0;}
table {margin: 0 0 1.5em; width: 100%;}
ul.inline-list {margin:0; padding:0; list-style: none; display: block; width: fit-content; align-items: center; grid-gap: 1rem; line-height: 1.5;}
ul.nolist {list-style: none; margin:0; padding:0;}
ul.padded-list li {padding-bottom:1rem;}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button, input[type="button"], input[type="reset"], input[type="submit"] {border: 1px solid; border-color: #ccc #ccc #bbb; border-radius: 3px; background: #e6e6e6; color: rgba(0, 0, 0, 0.8); font-size: 12px; font-size: 0.75rem; line-height: 1; padding: .6em 1em .4em;}
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {border-color: #ccc #bbb #aaa;}
button:active, button:focus, input[type="button"]:active, input[type="button"]:focus,input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus {border-color: #aaa #bbb #bbb;}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {color: #666; border: 1px solid #ccc; border-radius: 3px; padding: 3px;}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus {color: #111;}
select {border: 1px solid #ccc;}
textarea {width: 100%;}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {color: inherit;}
a:visited {color: inherit;}
a:hover, a:focus, a:active {color: inherit;}
a:focus {outline: none;}
a:hover, a:active {outline: 0;}
.site-footer a, .contact-bar-grid a {text-decoration: none; color: color-mix(in srgb, #ffffff, transparent 20%);}
.orange-btn, a.orange-btn {display: inline-block; background: linear-gradient(135deg, color-mix(in srgb, #f47920, transparent 10%), #f47920);color: #ffffff; text-decoration: none; padding:0.5rem 1rem; border-radius: 1rem; font-weight: 600; position: relative; padding-right: 2rem;}
.orange-btn::after {content: ''; width: 1rem; height: 1rem; color: #ffffff; background-image: url('images/svg/arrow-right-white.svg');    background-repeat: no-repeat; position: absolute; top: 0.75rem; right: 0.5rem; }
.orange-btn-large, a.orange-btn-large {background: linear-gradient(135deg, color-mix(in srgb, #f47920, transparent 10%), #f47920); color: #ffffff; text-decoration: none; padding:1.5rem 1rem; border-radius: 2rem; font-weight: 600; position: relative; text-align:center; text-transform: uppercase;}
.black-btn-large, a.black-btn-large {background: #000000; color: #ffffff; text-decoration: none; padding:1.5rem 1rem; border-radius: 2rem; font-weight: 600; position: relative; text-align:center; text-transform: uppercase;}
a.orange-link {text-decoration: none; color:#f47920;}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#nav-wrapper {position: fixed; z-index: 999!important;}
.mobile-nav-toggle > span {width:2rem; height:2rem; display:block; float:right; background: url('images/svg/nav-bars.svg'); background-repeat: no-repeat;}
.mobile-nav-toggle.nav-change-icon > span {background: url('images/svg/nav-bar-close.svg'); background-repeat: no-repeat;}

/** mobile only classes for screens with a min width of 978px in size) **/
@media screen and (min-width:978px) {
	.mobile-nav-toggle {display: none !important;}

	.main-navigation {padding: 0;}
	.main-navigation > ul {display: flex; list-style: none; margin: 0; padding: 0; width: 100%; flex-basis: auto; text-transform:none; align-items:center; gap:0.5rem; max-width: 620px; float: right;}
    .main-navigation > ul > li {flex: auto; position: relative; text-align: center;}
    .main-navigation > ul > li > a {display: block; text-decoration: none; line-height:2.5; color: #fff; font-weight: 500; border-bottom:2px solid transparent;}
	.main-navigation > ul > li.menu-item-has-children > a {display: flex; list-style: none; margin: 0 auto; padding: 0; width:fit-content; flex-basis: auto; text-transform:none; align-items:center; gap:0.35rem;}
	.main-navigation > ul > li.menu-item-has-children > a > span {white-space: nowrap;}
	.main-navigation > ul > li.menu-item-has-children > a > i {background-image:url('images/svg/chevron-down-white.svg'); width:0.75rem; height:0.75rem; background-repeat: no-repeat; top: 0.75rem; right: 0.75rem;}
    .main-navigation > ul > li > ul.sub-menu {display: block; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; position: absolute; z-index: 99999; width:280px; width: calc-size(max-content, size + 40px); background: #ffffff; padding: 0.25rem 1rem; margin:1rem 0 0 0; visibility: hidden; opacity: 0; transition: visibility 0.4s ease-in-out, margin 0.4s ease-in-out, opacity 0.4s ease-in-out; text-transform:unset;}
    .main-navigation > ul > li > ul.sub-menu ul {top: 0; text-transform:unset;}
    
    .main-navigation > ul > li > ul.sub-menu li:hover > ul, .main-navigation > ul > li > ul.sub-menu > li.focus > ul {visibility: visible; opacity: 1; margin:0rem;}
    .main-navigation > ul > li:hover > ul.sub-menu, .main-navigation > ul > li.focus > ul.sub-menu {visibility: visible; opacity: 1; margin:0rem;}

    .main-navigation > ul > li > ul.sub-menu > li a {transition: margin-left 0.25s ease-in-out; font-size: 0.85rem; font-weight: normal;}
    .main-navigation > ul > li > ul.sub-menu > li:hover a {color:#f47920;}
    .main-navigation > ul > li > ul.sub-menu > li > a {width:95%; color: #000000; line-height:1.5; white-space: nowrap; display: block; text-decoration: none;}
    .main-navigation > ul > li > ul.sub-menu > li {display: block; text-align:left; padding: 0.5rem 0;}
    .main-navigation > ul > li > ul.sub-menu > li::after {display: none;}
    
	.main-navigation > ul > li.current-menu-item > ul.sub-menu > li > a, .main-navigation > ul > li.current-menu-parent > ul.sub-menu > li > a {background:none; color:#000000; border-radius:unset;}
	.main-navigation > ul > li.current-menu-item > a, .main-navigation > ul > li.current-menu-ancestor > a, .main-navigation > ul > li > a:hover  {border-bottom:2px solid #f47920;}
	.main-navigation > ul > li > ul.sub-menu > li.current-menu-item > a {color: #f47920!important;}

    .main-navigation > ul > li > ul.sub-menu > li > a::after {display: none;}
	.main-navigation > ul > li:last-of-type > ul.sub-menu {left: unset; right: 0;}
	.main-navigation > ul > li:last-of-type > ul.sub-menu > li {text-align: right;}
	.main-navigation > ul > li:last-of-type > ul.sub-menu > li > a {width:100%;}
	.main-navigation > ul > li:last-of-type:hover > ul.sub-menu {overflow: hidden;}

}

@media screen and (min-width: 1140px) {
	.main-navigation ul > li > a {font-size: 0.9rem;}
}

@media screen and (min-width:1441px) {
	.main-navigation ul > li > a {font-size: 1rem;}
	
	.main-navigation > ul > li.menu-item-has-children > a {gap:0.45rem;}
	.main-navigation > ul > li.menu-item-has-children > a > i {font-size: 0.7rem;}
}
/** mobile only classes for screens with a max width of 978px in size) **/
@media screen and (max-width:977px) {
	.mobile-nav-toggle {color: #ffffff; font-size: 28px; line-height: 0; margin-right: 10px; cursor: pointer; transition: color 0.3s;}
	.nav-change-icon.fa-bars::before{content:'\f410' !important; font-size: 2.25rem!important; color:#f47920;}
	.main-navigation {padding: 0; z-index: 9997; text-align: right;}
	.main-navigation ul {display: none; list-style: none; position: absolute; inset: 60px 20px 20px 20px; padding: 10px 0; margin: 0; border-radius: 6px;background-color:#ffffff; border: 1px solid color-mix(in srgb, #2f3138, transparent 90%); box-shadow: none; overflow-y: auto;transition: 0.3s; z-index: 9998; }
	.main-navigation a, .main-navigation a:focus {color: #212529; padding: 0.5rem 1rem; font-size: 17px; font-weight: 500; display: flex; align-items: center; white-space: nowrap; transition: 0.3s; grid-gap: 1rem; text-decoration: none;}
	.main-navigation ul.sub-menu a {font-size: 0.75rem; padding:0.5rem;}
	.main-navigation a i, .main-navigation a:focus i {background-image:url('images/svg/chevron-down.svg'); width:1rem; height:1rem; background-repeat: no-repeat;}
	.main-navigation a i:hover, .main-navigation a:focus i:hover { background-color: unset;}
	.main-navigation a:hover, .main-navigation .active, .main-navigation .active:focus {color: #f47920;}
	.main-navigation .active i, .main-navigation .active:focus i {background-color: #c6c0bf; color: #ffffff; transform: rotate(180deg);}
	.main-navigation .dropdown ul {position: static; display: none; z-index: 99; padding: 10px 0; margin: 10px 20px; background-color: #ffffff; transition: all 0.5s ease-in-out;}
	.main-navigation .dropdown ul ul {background-color: rgba(33, 37, 41, 0.1);}
	.main-navigation .dropdown > ul.dropdown-active {display: block; background-color: rgba(33, 37, 41, 0.03);}

	.mobile-nav-active {overflow: hidden;}
	.mobile-nav-active .mobile-nav-toggle {color: #fff; position: absolute; font-size: 32px; top: 15px; right: 15px; margin-right: 0; z-index: 9999;}
	.mobile-nav-active .main-navigation {position: fixed; overflow: hidden; inset: 0; background: rgba(33, 37, 41, 0.8); transition: 0.3s;}
	.mobile-nav-active .main-navigation>ul {display: block;}
}

.site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation {margin: 0 0 1.5em; overflow: hidden;}
.comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous {float: left; width: 50%;}
.comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next {float: right; text-align: right; width: 50%;}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
.screen-reader-text {border: 0;	clip: rect(1px, 1px, 1px, 1px);	clip-path: inset(50%);	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px;	word-wrap: normal !important;}
.screen-reader-text:focus {background-color: #f1f1f1;border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000;}
#content[tabindex="-1"]:focus {outline: 0;}

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

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before, .clear:after {content: ""; display: table; table-layout: fixed;}
.clear:after {clear: both;}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {margin: 0 0 1.5em;}
.widget select {max-width: 100%;}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {display: block;}
.post, .page {margin: 0;}
.updated:not(.published) {display: none;}
.page-content, .entry-content, .entry-summary {margin: 1.5em 0 0;}
.page-links {clear: both; margin: 0 0 1.5em;}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {word-wrap: break-word;}
.bypostauthor {display: block;}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {display: none;}
.infinity-end.neverending .site-footer {display: block;}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley {border: none; margin-bottom: 0; margin-top: 0; padding: 0;}
embed, iframe, object {max-width: 100%;}
.custom-logo-link {display: inline-block;}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {margin-bottom: 1.5em; max-width: 100%;}
.wp-caption img[class*="wp-image-"] {display: block; margin-left: auto; margin-right: auto;}
.wp-caption .wp-caption-text {margin: 0.8075em 0;}
.wp-caption-text {text-align: center;}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {margin-bottom: 1.5rem; display: grid; max-width:1440px; margin:0 auto; grid-gap:1rem;}
.gallery-columns-2, .gallery-columns-4, .gallery-columns-8 {grid-template-columns: repeat(2, 1fr);}
.gallery-columns-3, .gallery-columns-6, .gallery-columns-5, .gallery-columns-7, .gallery-columns-9 {grid-template-columns: repeat(3, 1fr);}
figure.gallery-item {margin:0;}
.gallery-item a {display:block; line-height: 0;}

/*--------------------------------------------------------------
## Short Code Layouts
--------------------------------------------------------------*/
.clear_all {clear: both; display:block;}
.row_start {display:inline-block; width:100%; float:none; clear:both;}
.one_half, .two_quarter, .one_quarter, .three_quarter, .one_third, .two_third, .one_fifth {display: block; float: none; list-style: none; box-sizing: border-box; margin: 0 auto; width: 100%;}

#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:48px; height:48px; line-height:36px; font-size:16px; text-align:center; opacity:.2; background:#e16a02; border-radius: 0.25rem; color: #221c13ed; text-decoration: none;}
#backtotop span{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop span::after {content: ''; width: 1.75rem; height: 1.75rem; background: url('images/svg/arrow-up-white.svg'); background-repeat: no-repeat; display: block; margin-top: 0.55rem; margin-left: 0.9rem;}
#backtotop.visible{visibility:visible; opacity:.5;}
#backtotop:hover{opacity:1;}

/*--------------------------------------------------------------
## Grids
--------------------------------------------------------------*/
.grid, .feature-card, .landing-page-item, .staff-member-card-information {display: grid; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0;}
.one-col, .two-col, .two-col-auto, .three-col, .four-col, .footer-grid, .feature-card, .landing-page-item, .staff-member-card-information, .two-third-grid {grid-template-columns: 100%;}
.aligned-grid {align-items: center;}
.gapped-grid-small {grid-gap: 0.5rem;}
.gapped-grid {grid-gap: 1rem;}
.gapped-grid-large {grid-gap: 2rem;}
.grid-image {line-height: 0;}
.text-centered {text-align: center;}
.svg-grid {display: grid; grid-template-columns: 1rem auto; grid-gap: 0.25rem; width: max-content; align-items: center;}
.contact-bar-grid {padding:0.5rem 0; width:95%; grid-template-columns: 1fr 1fr; align-items: center;}
.contact-bar-grid .header-so-me a {float: right;}
a.site-logo {text-decoration: none; display:grid; grid-template-columns: 36px auto; align-items: center; grid-gap: 0.25rem;}
a.site-logo > .sitename {font-size: 1.5rem; margin: 0; font-family: 'Lora'; font-weight: 300; color:#ffffff; text-transform: uppercase; display: none;}
.site-header {grid-template-columns: 36px auto; padding:1rem 0; width: 95%;}
.shadow-grid {background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); border-radius: 1rem;
padding: 1.5rem; text-align: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease;}

#header-image-wrapper {position: relative; display: grid; grid-template-columns: 100%; max-width: 2048px; width: 100%; margin:0 auto; }
#header-image-wrapper > .header-image-overlay {grid-row: 1; grid-column: 1; position: relative; z-index: 1; max-width: 1440px; width:95%; padding:5rem 0 1rem 0;}
#header-image-wrapper > .header-image {grid-row: 1; grid-column: 1; z-index: -1;}
#header-image-wrapper > .header-image > picture {display: block; line-height: 0; text-align: center; height: 100%; }
#header-image-wrapper > .header-image > picture > img {object-fit: cover; margin: 0 auto; min-height:480px; width:100%; max-width:2048px; height: 100%; max-height: 1365px;}
#header-image-wrapper.other-page > .header-image-overlay {text-align: center; height: fit-content; align-self: center; padding: 5rem 0 1rem 0;}
#header-image-wrapper.other-page p#breadcrumbs {margin: 0 auto; color: #ffffff;}
#header-image-wrapper.other-page p#breadcrumbs a {text-decoration: none; color:#f47920;}
#header-image-wrapper.other-page > .header-image > picture > img {margin: 0 auto; min-height: unset; height: 100%;}
#header-image-wrapper > .header-image::after {background-color: rgba(0, 0, 0, 0.4); top:0; left:0; right:0; margin: 0 auto; width:100%; content:''; height:100%; position: absolute;}


.feature-card-grid {grid-template-columns: 50% 50%; width:95%;}
.feature-card {background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); border-radius: 1rem;
padding: 1.5rem; text-align: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease;}
.feature-card > span.featured-card-svg {width: 2rem; margin: 0 auto; color: #f47920;}
.feature-card > span.featured-card-text {display:grid; grid-template-columns:100%; color:color-mix(in srgb, #ffffff, transparent 30%);}
.feature-card > span.featured-card-text > span.featured-card-text-title {font-size: 1.2rem; font-weight: 600;}
.feature-card > span.featured-card-text > span.featured-card-text-text {font-size: 1.0rem;}
.landing-page-item {position:relative; overflow:hidden; text-align:unset; background-color: #fff; border-radius: 1rem; padding:1rem; text-decoration: none; transition: all 0.5s ease;}
.landing-page-item > .svg {transform: scale(1) rotate(0deg); width: 4rem; height: 4rem; background-color: #f47920; color:#fff; padding:1rem; line-height: 0; border-radius: 1rem; transition: all 0.5s ease;}
.landing-page-item > .landing-page-title {font-size: 1.5rem; font-weight: 700; margin-bottom: 15px; line-height: 1.3; margin:0.5rem 0;}
.landing-page-item::after {content: ''; position: absolute; top: -50%; right: -30%; background: linear-gradient(135deg, color-mix(in srgb, #f47920, transparent 85%), color-mix(in srgb, #f47920, transparent 95%)); width: 200px; height: 200px;  z-index: 1;border-radius: 50%; visibility: hidden; opacity: 0;}

.landing-page-item:hover {transform: translateY(-15px); box-shadow: 0 25px 60px color-mix(in srgb, #f47920, transparent 80%); transition: all 0.5s ease;}
.landing-page-item:hover::after {visibility: visible; opacity: 1; transition: all 0.5s ease;}
.landing-page-item:hover > .svg {transform: scale(1.1) rotate(5deg); transition: all 0.5s ease;}

.staff-member-card {position: relative; height: 100%; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08); border-radius: 1rem; overflow: hidden; max-width:480px; margin:0 auto;}
.staff-member-card-information {padding:1rem; background: #ffffff;}
.staff-member-card > .staff-member-card-overlay {position: relative;}
.staff-member-card > .staff-member-card-overlay > .staff-member-card-contact {display: flex; width: fit-content; grid-gap: 0.5rem; margin:0 auto; opacity: 0; visibility: hidden; position: absolute; bottom: 1rem; left: 0; right: 0; align-items: flex-end; justify-content: center; }
.staff-member-card > .staff-member-card-overlay > .staff-member-card-contact > span {width:36px; height:36px; line-height: 0; border-radius:50%; flex: auto; background-color: #e16a02; color: #fff; padding:12px;}
.staff-member-card > .staff-member-card-overlay > .staff-member-card-overlay-img > picture > img {line-height: 0; display: block;}
.staff-member-card > .staff-member-card-overlay > .staff-member-card-overlay-img > picture:after {content: ''; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); position: absolute; width: 100%; height: 100%; z-index: 0; top:0; left: 0; right: 0; visibility: hidden; opacity: 0;}

.staff-member-card:hover > .staff-member-card-overlay > .staff-member-card-contact, .staff-member-card:hover > .staff-member-card-overlay > .staff-member-card-overlay-img > picture:after {opacity: 1; visibility: visible;}

.contact-grid-block {display: grid; width:100%; grid-template-columns: minmax(50px, auto) minmax(120px, 1fr); grid-gap: 1rem; align-items:start; background-color: #ffffff; padding: 1.5rem;  border-radius: 1rem;  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; }

.contact-grid-block-svg {width: 50px; padding:0.75rem; border-radius: 1rem; background-color: color-mix(in srgb, #f47920, transparent 90%); line-height: 0;}
.contact-grid-block-span-2 {grid-column: span 2; background-color: #ffffff; padding: 1.5rem;  border-radius: 1rem;  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.s2form-grid{background-color: #ffffff; padding: 1.5rem;  border-radius: 1rem;  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; }

/*--------------------------------------------------------------
## Theme Wrappers and colours
--------------------------------------------------------------*/
.wrapper, #content, .max-1440 {display: block; width: 100%; margin: 0 auto; padding: 0; position: relative;}
#content, .max-1440, .full-width-grid, .nested-grid {max-width: 95%;}

.white-text {color:#ffffff;}
.black-bg {background-color: #000000;}
.grey-bg {background-color: #f1efee;}
.hero-badge > span { padding: 0.5rem 1.2rem; background: color-mix(in srgb, #f47920, transparent 20%); color: #ffffff; font-size: 1.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-radius: 2.5rem; backdrop-filter: blur(10px); display: block; text-align: center;}

#site-fixed-header {background-color: none; position: absolute; left: 0; right:0; margin:0 auto; z-index: 1000;}
#site-fixed-header.navbar-fixed {position: fixed !important; background-color: rgba(0, 0, 0, 1); z-index: 1000; margin: 0 auto; left: 0; right: 0;}

.portfolio-image-wrapper {position: relative; display: grid; grid-template-columns: 100%; text-align: center; overflow: hidden; }
.portfolio-image-wrapper > .portfolio-image {grid-row: 1; grid-column: 1;}
.portfolio-image-wrapper > .portfolio-image > picture {line-height: 0; display: block;}
.portfolio-image-wrapper > .portfolio-image > picture > img {border-radius: 1rem; position: relative; line-height:0;}
.portfolio-image-wrapper > .portfolio-image-overlay {grid-row: 1; grid-column: 1; position: absolute; top:25%; left:0; right:0; margin:0 auto; z-index: 999; visibility: hidden; opacity: 0; color: #fff;}
.portfolio-image-wrapper > .portfolio-image > picture::after {content: ''; background: rgba(0, 0, 0, 0.75); position: absolute; width: 50%; height: 50%; z-index: 800; top:25%; left: 0; right: 0; border-radius:1rem; margin:0 auto; transition: all ease-in-out 0.3s; visibility: hidden; opacity: 0;}
.portfolio-image-wrapper:hover > .portfolio-image > picture::after {width: 100%; height: 100%; top:0; transition: all ease-in-out 0.3s; visibility: visible; opacity: 1;}
.portfolio-image-wrapper > .portfolio-image > picture > img {transition: all ease-in-out 0.3s;}
.portfolio-image-wrapper:hover > .portfolio-image > picture > img {transform: scale(1.1); transition: all ease-in-out 0.3s;}
.portfolio-image-wrapper:hover > .portfolio-image-overlay {visibility: visible; opacity: 1;}
.portfolio-image-wrapper:hover > .portfolio-image-overlay > .portfolio-image-overlay-content > a {width:3rem; height:3rem; background:rgba(255,255,255,0.1); border-radius: 2rem; text-align: center; display: block; margin:0 auto;}
.portfolio-image-wrapper:hover > .portfolio-image-overlay > .portfolio-image-overlay-content > a > .svg {padding-top:0.75rem; width:1.5rem; height:1.5rem; margin: 0 auto;}

.email-marketing-block {display:grid; grid-template-columns: 3.75rem auto; grid-gap: 1rem; align-items: center; border: 1px solid
 color-mix(in srgb, #14201c, transparent 90%); padding: 1rem; border-radius: 0.5rem;}
.email-marketing-block > .email-marketing-block-icon > span {font-family: 'Font Awesome 5 Free'; font-weight: 900; text-align: center; border-radius: 100%; background: color-mix(in srgb, #f47920, transparent 90%); margin:0 auto; display:block; width:3.5rem; height:3.5rem; line-height: 2.25; color: #f47920; font-size: 1.5rem;}
.email-marketing-block > .email-marketing-block-icon > span.brands {font-family: 'Font Awesome 5 Brands'; font-weight: 900; text-align: center;}
.email-marketing-block > .email-marketing-block-content {display: grid; grid-template-columns: 100%; grid-gap: 0.25rem;}
.email-marketing-block > .email-marketing-block-content > .email-marketing-block-content-title {font-weight: bold; font-size: 1.25rem;}

.hosting-box {display:grid; grid-template-columns: 100%; grid-gap: 1rem; text-align: center; border: 2px solid color-mix(in srgb, #f47920, transparent 80%); background: linear-gradient(to bottom right, color-mix(in srgb, #f47920, transparent 97%), #ffffff); padding:2rem; border-radius: 1rem;}
.hosting-box > .hosting-box-svg > span {width:4rem; height:4rem; display: block;  margin:0 auto; background-color: color-mix(in srgb, #14201c, transparent 90%);  border-radius: 1rem;}
.hosting-box > .hosting-box-svg > span > svg {margin-top:1rem; width:2rem; height:2rem;}
.hosting-box > .hosting-box-title {font-weight: 500; font-size: calc(1.325rem + .9vw);}
.hosting-box > .hosting-box-content{font-size:1.05rem}

@media screen and (min-width:540px) {
	.contact-bar-grid {grid-template-columns: 1fr 1fr;}
	.align-right-desk {text-align: right;}
	.float-right-desk {float:right;}
	
	ul.inline-list {display: flex;}
	ul.inline-list li {flex: auto;}
	.site-header {grid-template-columns: 280px auto;}
	a.site-logo > .sitename {display: unset;}
}

@media screen and (min-width: 978px) {
	
	#header-image-wrapper {align-items: center;}
	#header-image-wrapper > .header-image > picture > img {height: 100vh;}

	.hero-badge > span {margin-bottom: 1.2rem;}
	h1.hero-title, .hero-badge > span, .hero-text {text-align: unset;}
	.hero-text {margin: unset;}

    .one_half:first-of-type, .two_quarter:first-of-type, .one_quarter:first-of-type, .three_quarter:first-of-type, 
	.one_third:first-of-type, .two_third:first-of-type, .one_fifth:first-of-type {margin-left: 0; clear: left;}
    .one_half, .two_quarter, .one_quarter, .three_quarter, .one_third, .two_third, .one_fifth {display: block; float: left; margin: 0 0 0 3.06748466257669%;}
    .one_half, .two_quarter {width: 48.46625766871166%;}
    .one_quarter {width: 21.69938650306748%;}
    .three_quarter {width: 74.23312883435584%;}
    .one_third {width: 31.28834355828221%;}
    .two_third {width: 62.47668711656442%;}
    .one_fifth {width: 17.29938650306748%;}
	
	.two-col-auto {grid-template-columns: auto auto;}
	.gallery-columns-2, .two-col, .four-col, .feature-card-grid {grid-template-columns: repeat(2, 1fr);}
	.gallery-columns-3, .three-col {grid-template-columns: repeat(3, 1fr);}
	.gallery-columns-4 {grid-template-columns: repeat(4, 1fr);}
	.gallery-columns-5 {grid-template-columns: repeat(5, 1fr);}
	.gallery-columns-6 {grid-template-columns: repeat(6, 1fr);}
	.gallery-columns-7 {grid-template-columns: repeat(7, 1fr);}
	.gallery-columns-8 {grid-template-columns: repeat(8, 1fr);}
	.gallery-columns-9 {grid-template-columns: repeat(9, 1fr);}
	.two-third-grid {grid-template-columns: 1fr 2.04fr;}
	.feature-card-grid {width:100%;}
	.contact-grid-block {font-size:0.7rem;}
}

@media screen and (min-width: 1140px) {
	.hero-badge > span {display: unset;}
	#content, .max-1440, .full-width-grid {max-width: 95%;}
	.four-col {grid-template-columns: repeat(4,1fr);}
}

@media screen and (min-width:1280px) {
	.contact-grid-block {font-size:1rem;}
}


@media screen and (min-width:1500px) {
	#content, .max-1440, .nested-grid {max-width: 1440px;}
	#header-image-wrapper > .header-image-overlay, .contact-bar-grid, .site-header {width:100%;}
	.full-width-grid {max-width:100%;}
	
}

@media screen and (min-width:1920px) {
	.wrapper, .full-width-grid {width: 100%; max-width: 2048px;}
}