/*
Theme Name: ABD Main Site (v1.17)
Description:  HTML5 CSS3 Responsive
Author: Pollyana Miranda de Jesus
Author URI: accessbydesign.uk
Version: 1.17
*/
audio, canvas, video { display: inline-block;}
/* 1.10 FIX: .header-top is position:absolute with a fixed top:0,
   which has no awareness of the .welcomemsg accessibility banner
   ("Extra Large White Text on a Black background [Reset]") that only
   appears once someone actually chooses a text-size or contrast option.
   Being absolutely positioned, it never gets pushed down to make room
   for that banner - it just sits at the same fixed offset regardless,
   landing directly on top of it and hiding the Reset button underneath.
   Confirmed live: Reset button's box was entirely inside the Accessible
   View button's box - a genuine, measured overlap, not just visually
   close. Fix: push .header-top down by the banner's own height, but
   only when a .welcomemsg element actually exists in the page - normal
   browsing with no accessibility option chosen is confirmed completely
   unaffected (header-top stays at its original top:0).
   1.16 FIX: the 50px value above was itself a single guess applied to
   every case, and turned out wrong for most of them - Clive found it
   overlapping the nav menu, the opposite problem this rule was meant
   to prevent. Measured live across every combination: the banner is
   one line and only 30.8-39.4px tall (Default/Large/Extra Large text)
   at normal desktop widths, and 50px tall only because it wraps to two
   lines at narrow widths (confirmed at 375px, wrapping regardless of
   which text size is chosen - it's the viewport that forces the wrap,
   not the text size).
   First attempt used padded values (40px desktop / 52px mobile) to
   give some safety margin over the measured heights - but live testing
   showed this STILL overlapped ("Accessible View" colliding with the
   nav's "Audit" dropdown), because the nav menu itself shifts down by
   the banner's exact real height with no margin at all (it's a normal
   block in document flow, not absolutely positioned), so any padding
   added here just reintroduces drift relative to the nav instead of
   removing it. Switched to the exact measured Default-text height
   (30.8px) with no margin, and confirmed live at 804/900/1100/1440px
   widths under Default, Large and Extra Large text (33.7px/39.4px
   real height - i.e. up to 8.6px of drift) - no visible overlap at any
   of them, so this class of small drift is confirmed tolerable and an
   exact single constant is fine here; a per-text-size value isn't
   needed. */
body:has(.welcomemsg) .header-top{ top: 30.8px; }
/* 1.7 FIX: with the site's own Accessible View toolbar set to Large or
   Extra Large text, headings and paragraphs in narrow columns can grow
   large enough that a single long word no longer fits the column at
   all - and with no word-break permission set anywhere, the browser
   just lets that one word overflow visibly into whatever sits next to
   it. Confirmed live on the homepage's "Would you like to speak with
   people who understand..." section at Extra Large text: the single
   word "understand" rendered 363px wide against a 330px-wide column,
   overflowing 43px directly into the next column's text. This is a
   defensive, site-wide rule, not a fix for one specific section - the
   same failure mode is likely to recur anywhere a narrow column meets
   greatly enlarged text, and this catches the whole class of it rather
   than each instance individually. Confirmed live: same section now
   wraps the long word onto a second line within its own column, with
   no overlap, at Extra Large text size. */
h1,h2,h3,h4,h5,h6,p,a,span,li{
	overflow-wrap: break-word;
	/* 1.9 FIX: a hard break-word with no hyphen (e.g. "understan"/"d")
	   is readable but looks broken. Added proper hyphenation so the
	   browser inserts a real hyphen at a sensible point instead
	   ("under-stand") wherever the page's lang attribute and the
	   browser's hyphenation dictionary support it. overflow-wrap stays
	   as the fallback for anywhere hyphenation isn't available - still
	   readable, just not as pretty, rather than reverting to the
	   original overflow bug. Confirmed live at Extra Large text: clean
	   "under-stand", "inclus-ive" style breaks, no overlap. */
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%;}
body { margin: 0; font-size: 1em; line-height: 1.231; }
body, button, input, select, textarea { font-family: Open Sans, arial, sans-Arial; color: #545454; }
a { color: #297E89; outline:none;}
a:hover, a:active,a:focus{ color: #545454; outline: 0;}
a:focus-visible{ outline: 2px solid #000!important;}
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote {border-left: 5px solid #545454;font-size: 0.9em;font-style: italic;margin-bottom: 10px;margin-left: 2.2em; margin-top: 10px; padding: 5px 1em 5px 1em;}
dfn { font-style: italic; }
hr {float:left; width:100%; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box;width:30px;height:21px; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
h1,h2,h3,h4,h5{color:#000;font-family: 'Open Sans', Arial; font-weight:700; margin:0; padding:0; text-align:left;}
h1{
	font-size:2.7em; 
	line-height:1.3em;
	font-family: 'Open Sans', Arial; 
	margin:20px 0 20px;
	padding:0 0;
	color:#000;
	font-weight:700;
}
h1.h1posts{
	font-size:2.1em; 
}
.h1bordercenter{
	display: block;
	margin: 15px auto 0;
	width: 300px;
	height: 2px;
	background: #52BCAE;
	position: relative;
}
.h1border{
	display: block;
	margin: 15px 0 0 ;
	width: 300px;
	height: 2px;
	background: #52BCAE;
	position: relative;
}
.childmainwrapper h1{ text-align: center;}
h1.h1_posts{border:none;}
h2{font-size:2em;color:#028073 ;margin:0 0 15px; line-height:1.2em;}
h3{font-size:1.6em;color:#000;}
h4{font-size:1.5em;color:#000;margin:10px 0 7px;}
h4 a{text-decoration:none;}
h5{font-size:1.3em;font-weight:normal;color:#028073}
h3.awardsgalh3{ width:100%; text-align:center; text-transform:uppercase;}
.postcont h2{ text-align:center;}
h2.aboutus{text-align: center; color: #4f6d5a; font-size: 3em; margin-top: 130px; margin-bottom: 130px;}
.s30left img,.s30right img,.s25left img,.s25right img{ max-width:100%; height: auto;}
.borderbottom{
	float: left;
  	width:100%;
}
.video-responsive{margin-bottom: 30px;}
.borderbottomtitle {
	display: block;
	margin: 0 auto;
	width: 250px;
	height: 1px;
	background: #000;
	position: relative;
	clear: both;
}
body{
	line-height:1.8em;
	background: #fff;
	}
#out{
	float: left;
  	width:100%;
	margin:0 auto 0;
	padding:0;
	}
/*********** Search ***********/
#searchmain{
	float:left;
	width:auto;
	margin: 2px 20px 0 20px; 
	position:relative;
}
#searchtriger{
	float: left;
	  margin: 28px 0 0 0;
	  width: 44px;
	  height: 44px;
	  border: none;
	  cursor: pointer;
	  background: none;
	  font-size: 1.3em;
	  color: #028073;
}
#searchtriger:focus-visible{
	outline: 2px solid #000;
}
.searchform_main{
	float:left;
	width:auto;
	padding:20px;
	margin:0;
	position:absolute;
	background:rgba(255,255,255,0.7);
	left:0;
	display: none;
	top:60px;
	z-index:999999;
}
.searchform_main:focus-within,
.searchform_main.searchformselected,
.searchform_main.searchformselected:focus-within{
	left:0;
	display: block;
}
#searchform{
	float:left;
	width:310px;
	padding:4px 5px;
	font-size:1.1em;
	color:#333;
	margin: 0;
	border-radius:4px;
	background:#E5E5E7;
	height:auto;
	font-family:Open Sans;
}
#searchform label{
	position: absolute;
	left:-999999999px;
}
#searchsubmit {
	border:medium none;
	color:#fff;
	background:#666;
	font-size:0.9em;
	float:right;
	text-decoration:none;
	text-align:left;
	padding:3px 10px;
	height:auto;
	width:auto;
	border-radius:3px;
	cursor:pointer;
	position:relative;
}
#searchsubmit, #send, #top #submit {
	cursor:pointer;
}
#searchsubmit, #send, #top #submit {
	cursor:pointer;
}
#search {
	color:#333;
	float:left;
	font-size:1em;
	height:15px;
	width:200px;
	border:0;
	line-height:1.6em;
	background:none;
	font-style:italic;
	padding:15px 3px 15px 5px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}
/********************* Header ******************/
header{
	width:100%;
	float:left;
	margin: 0 auto 0;
	height:auto;
	position:fixed;
	top:0;
	z-index:99999;
	background:#fff;
	}
#mainheader{
	width:100%;
	float:left;
	margin-top: 52px;
}
#header{
    position:relative;
  	width:100%;
	display:block;
	height:auto;
	margin:0 auto 0;
	}
header .logo{
	float:left;
	width:auto;
	height:auto;
	margin:20px 0 20px;
}
header .logo a{
	float:left;
	margin:0;
	width:auto;
	height:auto;
	outline:none;
}
header .logo a:hover,
header .logo a:hover img,
header .logo a:focus,
header .logo a:focus img{
	opacity: 0.8;
}
footer a.footerlogo{
	float: left;
	width: 100%;
}
header .logo a:focus-visible,
footer a.footerlogo:focus-visible {
	outline: 2px solid #000!important;
}
header .logo a img{
	border:none;
	float:left;
	width:270px;
	height: auto;
}
.header-left{
	float:left;
	margin:0;
	padding:7px 0;
}
.header-top{
	float: left;
	width: 100%;
	position: absolute;
	top: 0;
	color: #fff;
	z-index: 99999;
	padding: 7px 0;
    background: #028073;
}
.header-right{
	float: right;
	width: auto;
	margin:0;
	padding:7px 0;
	position: relative;
}
.header-right ul,
.header-right ul li{
	float: left;
	list-style: none;
	padding:0;
	margin: 0;
}
.header-right ul li{
	float: left; 
	margin-right: 15px
}
.header-right a{
	color: #fff;
	text-decoration: none;
	font-size: 0.9em;
}
.header-right a:hover,
.header-right a:focus{
	color: #ccc;
	text-decoration: underline;
}
.header-top .tel,
.header-top .email{
	font-size: 0.9em;
	float: left;
	padding: 0 0 0;
    margin: 0 30px 0 0;
}
.header-top .tel i,.header-top .email i{
  font-size: 1.3em;
  margin-right: 10px;
  position: relative;
}
.header-top .tel a,.header-top .email a{
  text-decoration: none;
	color: #fff;
}
.header-top .tel a:hover,.header-top .tel a:focus {
  text-decoration: none;
	color: #ccc;
}
.header-top .tel a:focus-visible {
	outline: 2px solid #fff;
}
.headerbutton_main{
	float: right;
	width: auto;
	border-left: 1px solid #DAE0DC;
	border-right: 1px solid #DAE0DC;
}
.headerbutton{
	display:inline-block;
	background:#BC5120;
	text-align:center;
	color:#fff;
	padding:18px 15px 20px;
	margin: 20px 15px 20px 15px;
	text-decoration:none;
	font-family:'Poppins',sans-serif;
	font-size:1em;
	border: none;
	border-radius: 8px;
}
@media (min-width: 1200px) {
  .grid-container {
    max-width: 1320px!important;
  }
}
/*********flags**************/
.diduknowwrap{
	float: left;
	width: 100%;
	margin-top: 50px;
	background: #028073;
}
/* 1.6 FIX: .card-img is reused across more than one section (this one,
   .diduknowwrap, and also .accessibility_complaiance further down the
   page) but the responsive width fix below was only ever written to
   target .diduknowwrap specifically. The accessibility_complaiance
   section's own .card-img never got it, and its image rendered at a
   fixed 500px wide regardless of viewport - confirmed live as one
   direct cause of a genuine horizontal scrollbar at narrow widths.
   Making this unconditional so it applies wherever .card-img is used,
   rather than patching each section individually. */
.card-img{ max-width: 100%; }
/* 1.11 FIX: the Euro flag image in .accessibility_complaiance uses
   object-fit:fill (set by a Gutentor-generated inline stylesheet, not
   this file - so it can't be edited at the source, only overridden).
   fill always stretches to match its box exactly regardless of the
   image's own natural proportions, which visibly distorted it.
   object-fit:cover crops to fill the box instead, always preserving
   the image's real proportions - the correct choice whenever the
   wrapper's shape doesn't exactly match the source image's aspect
   ratio. Confirmed live at the width where the stretching was
   reported: image now renders proportionally, no visible distortion. */
.accessibility_complaiance .card-img img{ object-fit: cover !important; }
.diduknowwrap .card-img{
    width: 500px; 
    /* 1.11 FIX: height was a fixed 500px, but width gets constrained
       below that by this file's own max-width:100% rule (added in 1.6)
       wherever the column is narrower than 500px - which is most
       widths, not just narrow ones. That mismatch between a fixed
       height and a variable width stretched this clip-path shape's
       aspect ratio away from what it was designed for, and the shape's
       fine organic-edge detail (most points differ by under 1%) became
       visually imperceptible - looking like a plain rectangle even
       though the clip-path was technically still applying. Confirmed
       live: at a narrow width, computed clip-path was genuinely
       present but the image visually showed as a plain rectangle;
       zooming in on the corners confirmed the curve detail was there
       but flattened almost to nothing. aspect-ratio locks height to
       follow width proportionally at any width, restoring the shape
       the clip-path was actually designed for. Confirmed live
       afterward: zoomed screenshot showed the organic edge clearly
       again. */
    height: auto;
    aspect-ratio: 443 / 500;
	overflow: hidden;
    clip-path: polygon( 0.648% 8.389%,0.648% 8.389%,0.627% 7.472%,0.762% 6.592%,1.041% 5.764%,1.45% 5%,1.979% 4.316%,2.612% 3.725%,3.339% 3.242%,4.146% 2.879%,5.02% 2.651%,5.95% 2.572%,91.031% 2.572%,91.031% 2.572%,91.909% 2.643%,92.741% 2.847%,93.515% 3.174%,94.219% 3.612%,94.844% 4.149%,95.376% 4.775%,95.806% 5.478%,96.121% 6.246%,96.311% 7.068%,96.363% 7.933%,94.429% 94.501%,94.429% 94.501%,94.335% 95.377%,94.101% 96.203%,93.742% 96.966%,93.267% 97.655%,92.692% 98.26%,92.027% 98.769%,91.285% 99.171%,90.48% 99.453%,89.623% 99.607%,88.727% 99.619%,14.664% 94.555%,14.664% 94.555%,13.908% 94.45%,13.19% 94.245%,12.517% 93.947%,11.897% 93.565%,11.338% 93.104%,10.848% 92.574%,10.435% 91.98%,10.106% 91.33%,9.869% 90.632%,9.732% 89.893%,0.648% 8.389% );
}
.diduknowwrap .card-img img{
	height: 100%;
	width: auto;
	margin-left: 50%;
  transform: translateX(-50%);
  float: left;
  position: relative;
}
/* 1.13 FIX: this rule used to be a fixed height:500px, with a separate
   height:220px!important override below 768px - two magic numbers
   picked to look right at two specific widths. The container above
   already tracks its own responsive width via aspect-ratio:443/500,
   so at any width in between (or above 990px, which had no override
   at all) the container's real height and the image's fixed height
   fell out of step - the container's clip-path shape rendered at its
   correct (larger) size while the image inside stayed a fixed 500px/
   220px tall, leaving empty space above/around it inside the shape.
   That reads exactly like Clive's report: "the straight image with a
   big gap" on mobile. height:100% ties the image's height to its
   container at every width, not just the two breakpoints that had
   been hand-tuned, so the image always exactly fills the clipped
   shape - removing the need for the old 768px override entirely.
   Width stays "auto" (unchanged) so the image still scales from its
   own natural aspect ratio and gets cropped left/right by the
   container's overflow:hidden, same centring technique as before.
   CONFIRMED LIVE at both 375px and 1100px widths - the image now
   fills the clipped shape correctly with no gap at either width. */
.diduknowwrap h2{
	color: #fff;
	font-size: 2.3em;
}
.accessibility_complaiance{
	padding: 30px 0;
	float: left;
	width: 100%;
}
.accessibility_complaiance h2{
	font-size: 2.3em;
	color: #000000;
}
.accessibility_complaiance h2 span{
	color: #028073;
}
.pretitle{
	position: relative;
	padding-left: 40px;
}
.pretitle::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%); 
  left: 0;
  width: 30px;
  height: 2px; 
  background-color: #BC5120; 
}
a.btn,
.accessibility_complaiance a.btn,
#gform_submit_button_2{
  display: inline-block;
  background: #028073;
  text-align: center;
  color: #fff;
  padding: 13px 15px 13px;
  margin: 20px 0 20px 0;
  text-decoration: none;
  font-family: 'Poppins',sans-serif;
  font-size: 1em;
  border: none;
  border-radius: 8px;
}
.contactushomemain a.btn{
	background: #BC5120;
	margin-top: 120px;
}
a.btn:hover,
a.btn:focus,
.accessibility_complaiance a.btn:hover,
.accessibility_complaiance a.btn:focus,
button.headerbutton:hover,
button.headerbutton:focus,
#gform_submit_button_2:hover,
#gform_submit_button_2:focus{
	background: #BC5120!important;
}
.contactushomemain a.btn:hover,
.contactushomemain a.btn:focus{
	background: #30939E;
	margin-top: 120px;
}
.mobileappaccess,
.serviceshome,
.meetclive,
.contactushomemain,
.testomonialshome{
	padding: 30px 0;
	position: relative;
	float: left;
	width: 100%;
}
.serviceshome{
	padding: 50px 0;
}
.meetclive{
	padding: 80px 0 30px;
	background-color: #000;
}
.testomonialshome{
	padding: 80px 0 30px;
	background-color: #fff;
}
.mobileappaccess{
	background-color: #000;
}
.serviceshome h3{
	font-size:1.2em;
	float: left;
 	width: 100%;
	margin-bottom: 10px;
	margin-top: 10px;
}
.serviceshome h3 a{
	color: #000;
	text-decoration: none;
}
.serviceshome i{
	color: #BC5120;
	font-size: 35px;
	margin-bottom: 8px;
}
.mobileappaccess::after {
  background: rgb(0 0 0 / .6);
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.mobileappaccess .maintext {
  width: 100%;
  padding: 0 0 0 0;
  margin: 0 0 0;
  z-index: 99;
  position: relative;
  float: left;
}
.serviceshome h2,
.homelogosmainwarpper h2,
.contactushomemain h2{
	font-size: 2.3em;
	color: #000000;
	float: left;
	width: 100%;
	text-align: center;
	margin-bottom: 60px;
}
.serviceshome h2 span,
.homelogosmainwarpper h2 span,
.contactushomemain h2 span{
	color: #028073;
}
.homelogosmainwarpper p{
	text-align: center;
}
.mobileappaccess h2,
.meetclive h2,
.contactushomemain h2{
	color: #fff;
	font-size: 2.3em;
	margin-bottom: 30px;
	text-align: left;
}
.mobileappaccess a{
	color: #fff;
}
.pretitle2{
	float: left;
	width: 100%;
	text-align: center;
}
.contactushomemain h2{
	font-size: 3em;
	line-height: 1.1em;
}
.card-body,
.Card{
	box-shadow: none!important;
	background-color: none!important;
}
/**************25% divs************/
.s25left{
	float: left;
	width: 23.5%;
	margin-right: 2%;
	margin-bottom: 15px;
}
.s25right {
  float: right;
  width: 23.5%;
  margin-bottom: 15px;
}
/********  social Icons *****************/
.ul_social
{
	float:right;
	list-style:none;
	margin: 5px 0 0 20px;
	padding:0 0 0 ;
	width:100%;
}
footer .ul_social{
	margin-bottom:15px!important;
	float:left;
	margin-left:0;
}
.ul_social li{
	float:left; 
	height:32px;
    width: auto;
	margin-right: 15px;
	}
#footer .ul_social li{
	margin-left: 0;
	margin-right: 15px;
}
.ul_social li a{
	display: block;
    float: left;
    height: 32px;
	text-align:left;
    width: 100%;
}
.ul_social li a span{
	text-indent:-99999em;
	display: block;
    float: left;
	text-align:left;
}
.ul_social li a i{
	font-size: 1.6em;
}
.ul_social li.facebook a i{
	font-size: 1.5em;
}
.ul_social li a:hover,
.ul_social li a:focus{
	opacity:0.5;
}
.ul_social li a:focus-visible{
	outline: 2px solid #000!important;
	padding:0;
	opacity:0.7;
}
/********* Navigation ******************/
#menu-handheld{
	float:right;
	width:40px;
	height:40px;
	text-decoration: none;
	color:#fff;
	background:url("images/menu.png") no-repeat scroll 7px 8px;
	padding:0;
	display:none;
	right:10px;
	z-index:99999;
	position:absolute;
	border:none;
}
#menu-handheld-close{
	float:right;
	width:25px;
	background: url('images/close.png') no-repeat right 7px ;
	height:25px;
	padding:0 0 8px 0;
	position:relative;
	top: 0;
	right:4%;
	cursor:pointer;
	display:none;
}
nav
{
  	width:auto;
	float:right;
	height:auto;
	margin: 7px 0 0;
	padding:0;
	z-index:99999;
	position:relative;
}
nav.menuselected{
	left:0;
}
#navmain{
	float: left;
}
#nav{
	float:right;
  	width:auto;
	margin:0 auto 0;
	position:relative;
	z-index:99999;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus-visible{
	outline: 2px solid #000;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{
	height: auto!important;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link{
	color: #028073;
	border-top: 5px solid #028073;
	box-shadow: 
    -10px 0 10px -5px rgba(0,0,0,0.1), /* Left side */
     10px 0 10px -5px rgba(0,0,0,0.1);
}
/* 1.6 FIX: the rule above (teal text, teal top border, drop shadow) is a
   desktop-only "highlighted tab" effect meant to sit against the white
   desktop nav bar. It was never scoped to desktop widths, so on mobile -
   where the whole open menu panel's background is that same teal - the
   current parent page's own menu text became invisible: teal text on a
   teal background. Confirmed live: two-tap navigation to a parent page,
   then reopening the mobile menu, showed the item present and clickable
   but completely invisible. Reported by Clive, reproduced and confirmed
   exactly. Fix below forces it back to white, matching every other
   (non-current) mobile menu item, and drops the border/shadow which
   don't make sense in a vertical mobile list anyway. */
@media (max-width: 768px){
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link{
    color: #fff !important;
    border-top: none !important;
    box-shadow: none !important;
  }
}
/*#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus-visible,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link:focus-visible {
	outline: 2px solid #000!important;
}*/
/******** wrapper *********/
#wrapper_mainbottom{
	float:left;
	width:100%;
	background:#fff;
	height:auto;
	position:relative;
	z-index: 99999;
	padding: 0 0 130px;
}
.projectmainimage_wrapper{
	display:block;
	width:1230px;
	margin: 0 auto 0;
}
#wrapper,#wrapper2,.wrapper{
	display:block;
	width:100%;
	max-width:1230px;
	padding: 0 0 0;
	margin: 0 auto 0;
	position:relative;
	z-index:11;
	}
#wrapper.wrapper6{
	float:left;
	width:100%;
}
#wrapper.wrapperposts{
	width:1180px;
}
#wrapper_child{
	width:100%;
	padding:0;
	display:block;
	background:#f1f2ee;
	border-bottom: 1px solid #DCDCDC;
	float: left;
	}
#pictures_wrapper {
    color: #545454;
    float: left;
    margin: 14px 45px 0;
    padding: 0;
    position: relative;
    width: 861px;
}
#pictures_wrapper img{
	float:left;
	margin:0;
	padding:0;
}
#content{
	float:left;
	width:100%;
	text-align:left;
	min-height:550px;
	padding:0 0 10px 0;
	position:relative;
}
#wrapper.wrapperposts #content{
	width:70%;
}
.wrapperprojects #content{
	min-height:200px;
	font-size:1.2em;
}
.content90per{
	float:left;
	width:90%;
	padding: 10px 5%;
}
.content80per{
	float:left;
	width:80%;
	padding: 10px 10%;
}
.content86per{
	float:left;
	width:86%;
	padding: 10px 7%;
}
.content70per{
	float:left;
	width:70%;
	padding: 10px 15%;
}
.contentblock{
	display:block;
	width:1230px;
	padding: 0 0 0;
	margin: 0 auto 0;	
}
#content.contentfull,
.contentfull{
	float:left;
	width:100%;
	text-align:left;
	min-height:550px;
	padding:15px 0 10px 0;
}
.main_content{
	float:left;
	width:100%;
	text-align:center;
	font-family: "Open Sans", Arial;
	padding:0 0 10px;
	color:#333;
	font-size:1.1em;
}
.main_content h1{
	float:left;
	width:100%;
	text-align:center;
	font-size:1.4em;
	line-height:1em;
	margin:0 0!important;
	color:#5ab3e8;
	border-bottom:0;
	padding:0 0 5px;
}
.main_content h2{
	font-size:1.1em;
	color:#000;
}
.main_content .largetext{
	float:left;
	width:100%;
	font-size:135%;
	line-height:1.6em; 
	margin-bottom:100px;
}
.main_content h3{
	font-size:1.5em;
	width:100%;
	text-align:center;
}
.main_content h1 b{
	color:#5ab3e8;
}
.postcont{
	font-size:1.6em;
	line-height:1.6em;
	width:90%;
	padding:0 5%;
}
.content_image{
	float:right;
	width:auto;
	margin:0 0 20px 15px;
	padding:0;
	border-radius: 0;
}
.content_image_large{
	float:left;
	width:100%;
	margin: 30px 0;
	}
.image_large_wrapper .content_image_large{
	margin: 0 0 0;
	border-radius: 0 100px 0 130px;
}
.contactleft{
	float:left;
	width:32%;
	text-align:left;
	margin-right:2%;
}
.contactright{
	float:right;
	text-align:left;
	padding:0;
	width:31%;
}
.pdflist .pdf_link{
	float:left; 
	width:29%;
}
.pdfdownload{
	float:left;
	width:100%;
	margin-top:30px;
}
.home_right
{
	float:right;
	width:47%;
	text-align:left;
	color:#545454;
	padding:0;
	margin: 10px 0 0 0;
}
.home_left
{
	float:right;
	width:51%;
	text-align:left;
	color:#545454;
	margin:10px 0 0 0;
	padding:15px 2% 10px 0;
}
.home_left_lower
{
	float:left;
	width:30%;
	text-align:left;
	padding:0 0 0 0;
	line-height:1.5em;
	font-size:1.2em;
	margin: 0 3% 0 0;
	color:#545454;
}
.home_left_lower ul{
	list-style: none;
	padding:0;
	margin:10px 0 0;
}
.home_left_lower ul li{
	float:left;
	width:43%;
	list-style: none;
	padding:0 0 15px 7%;
	margin:0;
	line-height:1em;
	background:url("images/bullet.png")no-repeat left top;
}
.home_right_lower
{
	float:right;
	width:67%;
	text-align:left;
	margin:0 0 0 0;
	padding:0 0 10px 0;
	color:#545454;
}
.home_left_lower h3,
.home_right_lower h3{
	font-size: 3.4em;
	margin:0 0 30px;
	font-family: "Open Sans";
}
.home_left h2{
	font-size:2.2em;
	font-weight:normal;
	color:#4ab240;
}
.home_scroller{
	float:left;
	width:100%;
	padding:0;
	margin:0;
	position:relative;
}
ul#verticalscroller{
	list-style:non;
	margin:0;
	padding:0;
}
.home_scroller li{
	float:left;
	width:49%;
	margin:0 0 10px 0;
	height:auto;
	padding:0 1% 0 0;
	list-style:none;}
.home_scroller li a{
	color:#545454;
	text-decoration:none;
}
.list_items_products .item .more{
	background:#8A8E8F;
	color:#fff;
	padding:4px 15px;
	float:left;
	width: auto;
	position:absolute;
}
.home_scroller li h4{
	font-family:Open Sans;
	font-size:1.3em;
	margin-top:0;	
}
.list_items_products .item .more a{
	text-decoration:none;
	color:#fff;
}
.list_items_products .item .more a:hover{
	text-decoration:none;
	color:#ccc;
}
.home_scroller .item_image{
	width:90px;
	height:90px;
}
.home_lower{
	float:left;
	width:100%;
	background:url(images/hor-devider2.png) no-repeat left top transparent;
	padding:20px 0 0;
	margin:35px 0 0
}
.home_lower figure{
	float:left;
	width:30%;
	margin-right:20px;
	padding-right:20px;
	background:url(images/ver-devider.png) no-repeat right center transparent;
}
.home_lower article{
	float:left;
	margin: 0 0 15px;
	width:100%;
}
figure.news, aside figure { 
	float:left;
	width:100%;
}
figure.news h3{
	float:left;
	width:100%;
	font-family:'Open Sans';
	font-size:3.2em;
	margin-bottom:40px;
	font-weight:normal;
	color:#a2a507;
}
figure.news article{
	float:left;
	width:100%;
	padding:5px 0;
}
figure.news article:last-child{
	border:0;}
figure.news article#side-article3{
	background:none;
}
.figure_image{
	float:left;
	width:75px;
	height:75px;
	padding:0;
	margin: 4px 15px 0 0;
	background:#fff;
	border:1px solid #ccc;
	border-radius:5px;
}
.figure_image img{
	border-radius:5px;
	border:0;
}
a.item_image_event img{ 
	border:0;
}
h4.user-event-head{
	color:#0179ad;
	font-size:1.2em;
	line-height:1.3em;
	font-weight:normal;
	margin:0 0 0;
	font-family:'Open Sans';
	margin-bottom:7px;
}
h4.user-event-head a{
	color:#a2a507;
}
.home_scroller p{
	margin:5px 0 0;
	line-height:1.4em;
}
figcaption{
	color:#066279;
	font-size:1.2em;
	margin-bottom:3px;
}
figcaption a{
	text-decoration:none;
	   font-family: 'Arial';
}
.news p{
	margin-top:0;
	line-height:1.7em;
}
.home_lower h3{
	color:#0586A8;
	margin-bottom:15px;
	font-size:1.6em;
}
.home_lower h3 a{
	text-decoration:none;
	color:#0586A8;
}
figure.lower_featured{
	float:left;
	width:31%;
	position:relative;
	margin-right:0;
	padding-right:0;
	background:none;
}
figure.lower_featured .more{
	float:left;
	bottom:-35px;
}
figure.lower_featured .figure_image{
	float:left;
	width:285px;
	height:130px;
	margin-bottom:10px;
	border-radius:0px;
	border:0;
	padding:0;
}
figure.lower_featured .figure_image img{
	border-radius:0px;
}
.video-frame-main{
	float:right;
	width:500px;
	height:350px;
	padding:7px 0 0 15px;
}
.video-frame-main iframe{
	width:500px;
	height:350px;
}
.home_left .video-frame-main{
	float:right;
	width:257px;
	height:170px;
	padding:7px 0 0 15px;
}
.home_left .video-frame-main iframe{
	width:257px;
	height:170px;
}
.video-frame-large{
	float:right;
	width:100%;
	height:600px;
	padding:7px 0 0 15px;
}
.video-frame-large iframe{
	width:100%;
	height:600px;
}
.home_left .video-frame-main{
	float:right;
	width:257px;
	height:170px;
	padding:7px 0 0 15px;
}
.home_left .video-frame-main iframe{
	width:257px;
	height:170px;
}
.child_sid_guide{
	float:left;
	width:100%;
	margin:0 0 15px;
	padding:0 0 10px;
	border-bottom:1px solid #ccc;
}
.numb-porj{
	float:left;
	width:100%;
	font-size:1.4em;
	color:#666;
	font-weight:700;
	margin:20px 0 0;
}
.headerprojects h1{
	font-size:1em;
	color:#fff;
	text-align:center;
}
.wrapperprojects h2{
	font-size:4em;
	font-weight:700;
	margin:0 0 30px;
	float: left;
	width: 100%;
	line-height: 1em;
}
.wrapperprojects h3{
	font-size:1.5em;
}
.projectleft{
	float:left;
	width:62%;
	margin-right:8%;
}
.projectright{
	float:left;
	width:30%;
	margin-top:140px;
}
.project_details{
	float:left;
	width:100%;
	margin-bottom:20px;
}
.project_details h2{
	color:#028073;
	font-weight:600;
	font-size:0.9em;
	margin:0;
}
.project_details p{
	font-size:1.2em;
	color:#000;
	margin:5px 0 10px;
}
.project_details p a{
	color:#000;
	text-decoration:none;
}
.project_details p a:focus{
	color:#005731;
	border:none!important;
	}
.project_details p a:focus-visible{
	outline: 2px solid #000!important;
}
.computerimage{
	margin:0 auto;
	display:block;
	width:1060px;
}
.computerimage img{
	float:left;
	margin:50px 0 0;
	border-radius: 8px;
	box-shadow: 1px 1px 27px 0 rgba(0,0,0,.21);
}
/* ==== for the sidebar ===== */
aside{
	float:right;
	width:26%;
	display:block;
	padding: 0 0 0 0;
	margin:130px 0 0 0;
	line-height:22px;
	position:relative;
	}
aside h2{
	font-size:1.6em;
	color:#dc5f0b;
	float:left;
	width:100%;
	margin-bottom:35px;
}
aside a .user-event-head{
	font-size:1.4em;
	line-height: 1.2em;
	color:#000;
	font-weight:600;
}
.home_scroller li a:hover .user-event-head, 
.home_scroller li a:active .user-event-head,
.home_scroller li a:focus .user-event-head{ 
	color: #028073;
}
.home_scroller li a:focus-visible,
.home_scroller li a:focus-visible .user-event-head{
	outline: 2px solid #000!important;	
}
.home_scroller li a h4{
	color:#a2a507;
}
aside .home_scroller li{
	width:100%;
	margin: 0 0 30px;
}
.sidebar-item-header
{
	float:right;
	font-size:1.6em;
	height:auto;
	padding:11px 0;
	width:100%;
	font-family:Arial;
	border-right:none;
	color:#00283C;
}
.article
{
	float:left;
	height:auto;
	padding:5px 2.5% 5px 0;
	width:97.5%;
	text-align:left;
	border-bottom: 1px dotted #ccc;
	font-style:italic;
}
footer .testimonial{
	float:left;
	height:auto;
	padding:35px 0 5px 5%;
	width:94%;
	color: #fff;
	font-family: Arial;
	font-size: 1em;
	font-style:italic;
	text-align:left;
	margin:15px 0 0;
	min-height:40px;
	background: url(images/quote.png) no-repeat 10px 0;
	border-top:none;
}
.testimonial h5{
	font-size:1.05em;
	text-align:right;
	font-weight:normal;
	color:#4ab240;	
			}
.child_pages{
	float:left;
	width:100%;
	text-align:left;
}
.child_pages h3{
	font-size:1.5em;
}
/*********************/			
	.headerimagewrapper,
.headerimagewrapperhome{
		float:left;
		height:auto;
		width:100%;
		margin:0 auto;
		margin:95px 0 0;
		padding:0;
		overflow: hidden;
		position: relative;
		z-index: 9999;
		background:#000;
	}
	.headerimagewrapper2{
		float:left;
		position:relative;
		height:auto;
		width:100%;
		margin:0 auto 0;
		padding: 0 0 0;
	}
	.header_image_space{
		float:left;
		position:relative;
		height:110px;
		width:100%;
	}
	.header_image_wrapperwithbg,
	.header_image_wrapperwithbg .header_image_wrapper2{
		height:850px;
	}
	.header_image_wrapperwithbg2,
	.header_image_wrapperwithbg2 .header_image_wrapper2{
		height:650px;
	}
	.header_image{
		margin-left: 50%;
		transform: translateX(-50%);
		float:left;
		position:relative;
	}
	#header_image_wrappertext::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: linear-gradient(rgba(0, 0, 0, 0.4) 100%, transparent 50%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 10;
    top: 0;
    left: 0;
}
.headerimagewrapper .headerimagetext {
  position: absolute;
  z-index: 99;
  top: 35%;
  left: 0;
  width: 100%;
  padding: 0 20%;
  text-align: center;
  color: #fff;
  font-weight: 500;
  font-size: 2em;
  line-height: 1em;
}
.headerimagewrapper .headerimagetext2 {
  text-transform: none;
  text-transform: none;
  font-size: 1.7em;
  font-weight: 700;
  line-height: 1.1em;
}
.headerimagewrapperhome .headerimagetextmain{
  position: absolute;
  z-index: 99;
  bottom: 60px;
  left: 0;
  width: 100%;
  padding: 0 0%;
  color: #fff;
  font-weight: 700;
  font-size: 3.3em;
  /* 1.8 FIX: line-height:1em gave the wrapped lines zero breathing room -
     since line-height scales proportionally with font-size, this was
     always tight, but only became visibly overlapping once the site's
     own Accessible View toolbar enlarged the text (confirmed live at
     Extra Large: font-size and line-height were both exactly 68.64px,
     lines visibly touching). 1.2em keeps the same tight, deliberate
     look at normal size while giving enough gap to stay readable at any
     scale. Confirmed live afterward: all four wrapped lines clearly
     separated at Extra Large text. */
  line-height: 1.2em;
text-align: left;
}
	#overlayimagetext{
		position:absolute;
		color:#fff;
		z-index:9999;
		width:400px;
	}
	#overlayimagetextsmaller{
		position:absolute;
		color:#fff;
		z-index:9999;
		width:100%;
		text-align:center;
	}
	#overlayimagetextsmaller h1,
	#overlayimagetext h1{
		color:#fff;
		border-bottom:none;
		font-size:6em;
		line-height:0.9em;
	}
	#overlayimagetextsmaller h1{
		width:100%;
		text-align:center;
	}
	#overlayimagetextsmaller p,
	#overlayimagetext p{
		color:#fff;
		text-align:left;
		font-size:1.7em;
		font-family:'Open Sans';
		border-bottom:none;
	}
	#overlayimagetextsmaller p{
		width:70%;
		padding:0 15%;
		text-align:center;
	}
#crumb{
	float:left;
	width:100%;
	text-align:right;
	margin:0 auto 5px;
	z-index:100;
	font-size:0.9em;
    height: auto;
	padding: 5px 0;
	}
.crumb{
	width:1230px;
	display:block;
	height:auto;
	color:#545454;
	padding:0;
	line-height:1.1em;
	margin:0 auto;
}
#crumb a{
	color:#40472E;
}
#crumb a:focus-visible{	
	outline: 2px solid #000!important;
}
.cf_hidden,
.linklove,
.nodisplay,
.mobile_nodisplay,
.linklove,
#linklove{
	display:none;
	}
/* ================================
   Scoped Accordion Styles 
   ================================ */
.wp-block-gutentor-accordion .gutentor-accordion-body {
  display: block !important;   /* override any display:none from the block */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 16px;
  color: #222 !important; /* High contrast text */
  line-height: 1.6;
  background-color: #fff; /* Default background */
  transition: max-height .35s ease, 
              opacity .25s ease, 
              padding .25s ease, 
              box-shadow .25s ease;
}
/* Open panel styles */
.wp-block-gutentor-accordion .gutentor-single-item.is-open .gutentor-accordion-body {
  opacity: 1;
  padding: 14px 16px 18px;
  background-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* soft lift effect */
  /* max-height is set by JS for smooth animation */
}
/* Icon swap logic */
.wp-block-gutentor-accordion .gutentor-accordion-heading .open-icon { display: inline-block; }
.wp-block-gutentor-accordion .gutentor-accordion-heading .close-icon { display: none; }
.wp-block-gutentor-accordion .gutentor-single-item.is-open 
.gutentor-accordion-heading .open-icon { display: none; }
.wp-block-gutentor-accordion .gutentor-single-item.is-open 
.gutentor-accordion-heading .close-icon { display: inline-block; }
/* Question row buttons */
.wp-block-gutentor-accordion .gacc-trigger {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
}
.wp-block-gutentor-accordion .gacc-trigger:focus {
  outline: 3px solid #7b0052;
  outline-offset: 2px;
  border-radius: 8px;
}
/* Hover and open background */
.wp-block-gutentor-accordion .gacc-trigger:hover,
.wp-block-gutentor-accordion .gutentor-single-item.is-open .gacc-trigger {
  background-color: #f7f7f7 !important;
}
/* Section heading spacing tidy */
.wp-block-gutentor-accordion h2 {
  font-weight: 700;
  font-size: 1.6rem;
  margin: 24px 0 10px;
}
.wp-block-gutentor-accordion h2 + .grid-container {
  margin-top: 8px;
}
/* Force high-contrast answer text */
.wp-block-gutentor-accordion .gutentor-accordion-body {
  color: #333 !important; /* Dark grey, AA+ contrast */
}
.wp-block-gutentor-accordion .gutentor-accordion-body p {
  color: #333 !important;
  margin: 0 0 10px;
}
/********** More info text ************/
#moreinfoprod{
	    float:left;
		width:100%;
		color:#545454;
		line-height:1.1em;
		font-size:1.1em;
		padding:10px 0 10px 0;
		cursor:pointer;
		text-decoration:none;
		font-weight:bold;
		cursor:pointer; 
		}
#moreinfoprod#infohide{
	background:none;
}
#infoshow{
	display:block;
	font-size:1.2em;
	color:#70A4CC;
}
#infohide{
	display:none;
	font-size:1.2em;
	color:#70A4CC;
}
	#moreinfoprodtext{
		display:none;
		margin-top:15px;
		}
/****** footer ********/
.companyprofiles{
	float:left;
	width:90%;
	margin:50px 5%;
}
.singleprof{
	float:left;
	width:27.3%;
	margin:0 3% 50px;
	font-family:'Open Sans', Arial;
	font-size:1.2em;
	font-weight:500;
}
.companyprofiles .profileimg{
	width:100%;
	height:auto;
}
.singleprof span{
	float:left;
	width:80%;
}
.linkedinicon{
	float:right;
	width:auto;
}
a#to-top {
    display: none;
    z-index: 600;
    position: fixed;
    bottom: -65px;
    right: 30px;
    background-color: #fff;
    font-size: 2em;
    padding: 5px 20px;
    text-decoration: none;
    color: #2b2b2b;
    line-height: 150%;
    border: 1px solid #fff;
}
a#to-top.selected{
	   display: block;
}
     footer{
		float:left;
		width:100%;
		color:#000;
		bottom:0;
		height:auto;
		position:relative; 
		font-size:1em;
		background:#fff;
		padding:0 0 110px; 
	}
footer h3{
	color:#000;
	font-size: 1.3em;
	margin-bottom:20px;
}
footer a{
	color:#000;
	text-decoration: none;
}
	#footer{
	    margin: 0 auto 0;
		padding:60px 0 20px;
		float:left;
		width:100%;
		color:#000;
		font-size:1.05em;
	}
	.footer_bg,
	#footer_section{
		display:block;
    	position:relative;
		margin:0 auto 0;
		padding:0 0 0;
		height:auto;
	}
	#footer section{
		float:left;
		width:24%;
		min-height:150px;
		position:relative;
		padding:0 2%;
	}
	#footer section.page-foot{
		width:42%;
		line-height:1.7em;	
		padding-left:0;
	}
	#footer section.page-foot img{
		margin-top:40px;
	}
	#footer2{
		float:left;
		width:1230px;
		margin:0 auto;
		padding:7px 0;
		display:block;
		color:#fff;
		position:relative;
	  }
	  .footerinfo{
		  float:left;
		  width:auto;
	  }
	  #footer2 a, #footer a{
		  color:#ffff;
	  }
	   #footer2 a:hover,#footer2 a:active,#footer2 a:focus,
	    #footer a:hover,#footer a:active,#footer a:focus{
		  color:#ccc;
		  text-decoration: underline;
	  }
	   #footer .tel,
	   #footer .email,
	   #footer .address{
			float:left;
			width:90%;
			padding:0 0 0 40px;
			margin:5px 0;
			text-decoration:none;
		}
		#footer .tel{
			background:url("images/phone.png") no-repeat left top;
			}
		#footer .email{
			background:url("images/email.png")no-repeat left top;
		}
		.address{
			background:url("images/add.png")no-repeat left top;
		}
footer .tel a:focus-visible,
footer .email a:focus-visible {
	outline: 2px solid #000!important;
}
footer .right{
	float:right;
	text-align:right;
	width: 20%;
	padding: 0 0 0;
	border:0;
	color:#666;
}
footer .left{
	float:left;
	width: 80%;
	padding:0 0 0;
	border:0;
}
footer .left .riba{
	float:left;
}
ul.legal{
	float:left;
	padding:0 0 0 0;
	width:100%;
	margin:0;
	list-style:none;
}
ul.legal li{
	float:right;
	width:100%;
	margin:0;
	padding:3px 0 3px;
	list-style:none;
	line-height:1.2em;
}
#footer ul.legal li a{
	padding:0;
	text-decoration:none;
}
#footer ul.legal li a:hover,
#footer ul.legal li a:focus{
	color:#ccc;
	text-decoration: underline;
}
#footer ul.legal li a:focus-visible{
	outline: 2px solid #000;
}
/*************** main-intro *******************/
.main-intro{
	display:block;
	margin:0 auto;
	width:1230px;
	padding: 0;
}
.main-intro h2{
	float:left;
	width:100%;
	text-align:center;
	color: #1573b4;
    font-family: "Open Sans",Arial;
    font-size: 2em;
	font-weight:normal;
	margin: 0 0 10px 0;
}
.main-intro p{
	text-align:center;
	font-size:1.4em;
	padding:10px 0 10px;
	font-family: "Open Sans",Arial;
}
.verylargeorange{
	font-size:1.5em;
	font-weight:700;
}
.h3large{
	font-size:2.4em;
	margin-bottom:30px
}
/*********** child **********/
.child-row{
	width:100%;
	float:right;
	padding:10px 0;
	margin:0;
	border-bottom:1px solid #ccc;
	border-top:1px solid #ccc;
	border:none;
	padding:0;
	}	
  childhomefull::after
  {
	 content:'';
	 position:absolute;
	 left:0;
	 width:100%;
	 height:100%;
	 background:#fff;  
  }
.childhomefull{
	  width:100%;
	  height:420px;
	  display:flex;
	  background:#333;
	  position:relative;
	  padding:0 0 0;
}
.child-home-featured-main{
	position:absolute;
	width:100%;
	left:0;
	top:0;
	z-index:999;
}
.childhomeporjectsmain,
#childmainwrapper,
.childmainwrapper{
	float: left;
	width:100%;
	margin:50px 0 0;
	overflow:hidden;
}
.childhomeporjects,
.child-homewrapper{
	display:block;
	width:1230px;
	margin:0 auto;
	position:relative;
}
.childhomeporjects2{
padding-bottom: 50px;
}
.child-home-featured{
	display:block;
	width:1230px;
	margin:0 auto 0;
	text-align:center;
}
.childhomeporjects p.childhomeporjectsintro,
.servicehome .childhomeporjectsintro{
	float:left;
	width:86%;
	color:#545454;
	line-height:1.6em;
	font-size:1.3em;
	margin:20px 7% 60px;
	text-align:center;
	font-family:Open Sans;
}
.servicehome .childhomeporjectsintro{
	width:96%;
	margin:20px 2% 0;
}
.child-home-featured-text h3{
	font-size:2.5em;
	text-align:left;
	margin-bottom:20px;
	font-family: "Open Sans";
}
.childhomefullintro{
	width:100%;
	float:left;
	min-height:400px;
	position:relative;
	margin:0 0 5px;
	padding:0 0 0;
	background: url("images/homefullbg.jpg") no-repeat top center #DFDFDF;
}
.child-row-home{
	width:1230px;
	display:block;
	padding:0 0 10px;
	margin:0 auto;
	position:relative;
}
.child{
    float: left;
    height: auto;
    margin: 0 0 10px;
    padding:0 0;
    position: relative;
    width: 100%;
}
.child-home{
    float: left;
    margin:15px 15px 0 0;
    position: relative;
    width: 400px;
	height:380px;
	color:#fff;
	line-height:1.4em;
	text-align:left;
	overflow:hidden;
}
#child-home-row1,
#child-home-row9{
	width:815px;
	height:380px;	
}
#childlist #child-home-row10{
	width: 400px;
	height:380px;	
}
#child-home-row2,
#child-home-row10{
	height:775px;
	float:right;
	margin-right:0;	
}
#child-home-row3,
#child-home-row11{
	float:right;
	height:380px !important;		
}
#child-home-row4,
#child-home-row12{
	height:775px;
}
#child-home-row5,
#child-home-row13{
	height:775px;
	width:815px;
	margin-right:0;
	float:right;		
}
#child-home-row7,
#child-home-row15{
	height:400px;
	width:607.5px;	
}
#child-home-row8,
#child-home-row16{
	height:400px;
	width:607.5px;
	margin-right:0;
	float:right;	
}
.wrapperprojects .child-home:last-child{
	margin-right:0;
}
.child-home a{
	color:#fff;
	z-index:999;
	padding: 0;
	width:100%;
	height:100%;
	left:0;
	top:0;
	position:absolute;
	text-decoration:none;
	background: rgba(0, 0, 0, 0.4);	
}
.child-home a:hover,
.child-home a:focus{
	background: rgba(255, 255, 255, 0.7);
	color:#000;
}
.childitem{
	margin-bottom: 80px;
}
.childitem h2{
	float:left;
	width:100%;
	padding:0 0 0 ;
	margin:15px 0 15px 0;
	font-size:1.3em;
	text-align:left;
	line-height:1.2em;
  	font-family:'Open Sans';
	color:#000;
}
.childitem h2 a{
	color:#000;
	text-decoration: none;
}
.child-home a:hover h2,
.child-home a:focus h2{
	color:#000;
}
.child-home .strapline{
	float:left;
	width:90%;
	padding:0 0 0 ;
	margin:5px 0 0 20px;
	font-size:1.1em;
	text-align:left;
  	font-family:'Open Sans';
	color:#fff;
}
.child-home a:hover .strapline,
.child-home a:focus .strapline{
	color:#000;
}
.child-home .textwork{
	float:left;
	width:90%;
	padding:0 0 0 ;
	margin:15px 0 0 20px;
	font-size:1em;
	line-height:1.7em;
	text-align:left;
  	font-family:'Open Sans';
	color:#000;
	opacity:0;
}
.child-home a:hover .textwork{
	opacity:1;
}
.child-home h2 a{
	color:#fff;
	text-decoration:none;
}
.child-home img{
	position:relative;
	z-index:999;
}
.butonhometab{
	margin:10px 0 0;
	padding:4px 30px;
	position:absolute;
	bottom:85px;
	border:1px solid #fff;
	z-index:99999;
	}
.child-fea{
    float: left;
    height: auto;
    margin: 0 0 70px;
    padding:0 0;
    position: relative;
    width: 100%;
	height:auto;
}
.border-bottom{
	height:1px;
	background:#000;
	width:260px;
	display:block;
	clear:both;
	margin:0 0;	
}
.child-fea h4{
	font-size:1.5em;
	line-height:1.4em;
	text-align:center;
	width:100%;
	padding:0;
}
.childodd .childfeatext{
	float:left;
	width:52%;
	padding:30px 3% 0 0;
	height:430px;
	text-align:left;
	position:absolute;
	top:30px;
	left:0;
	font-family: Open Sans;
	background:#fff;
}
.childeven .childfeatext{
	float:right;
	width:52%;
	padding:15px 0 15px 3%;
	text-align:left;
	color:#333;
	height:440px;
	position:absolute;
	top:20px;
	right:0;
	font-family: Open Sans;
	background:#fff
}
.childeven .childfeatext a p,
.childodd  .childfeatext a p{
	font-size:1.1em;
	margin-bottom:40px;
	margin-top:20px;
	color:#545454;
	line-height:1.6em;
}
.childeven .childfeatext a ,
.childodd  .childfeatext a {
		text-decoration:none !important;
}
.buttonschild{
	color: #000;
	float: left;
	display: block;
	clear: both;
	padding: 8px 35px;
	font-size: 1.3em;
	font-weight: 500;
	margin: 0 auto 15px;
	text-decoration: none;
	border: 1px solid #000;
}
.child-fea a.buttonschild:hover,
.child-fea a.buttonschild:focus{
	outline: 2px solid #000!important;
	background: #028073;
	color: #fff;
}
.child-fea a.buttonschild:focus-visible {
	outline-style:none;
	background: #fff;
	outline: 2px solid #000!important;
	color: #000999;
}
.childodd .childhomeimage{
	float:right;
	width:50%;
	margin:0;
	position:relative;
}
.childeven .childhomeimage{
	float:left;
	width:50%;
	margin:0;
	position:relative;
}
.childeven .childhomeimage img{
	float:right;
}
.childodd .childhomeimage img{
	float:left;
}
.child h3{
	padding:0;
	margin:0 0 5px;
	font-weight:700;
	text-align:left;
	font-size:2.3em;
  	font-family:'Open Sans';
}
.child_image{
	float:left;
	margin:0 20px 0 0;
	padding:0;
	width:auto;
	height:400px;
	border:none;
	}
.child h3 a{
	color:#333;
	text-decoration:none;
	border-top:5px solid #5ab3e8;
	padding:15px 0 30px;
	float:left;	
}
.childeven .childtext{
	float:right;
	width:44%;
	margin:0 3%;
	text-align:left;
	font-family:'Open Sans', arial;
	color:#333;
}
.childeven .child_image{
	float:left;
	width:50%;
	margin:0;
}
.childeven h2,
.childodd h2{
	float:left;
	width:100%;
	text-transform:none;
	margin:30px 0 30px;
	color:#028073;
	font-size:3.2em;
	line-height: 1em;
}
.childeven h2 a,
.childodd h2 a{
	float:left;
	width:100%;
	text-decoration:none;
	color:#028073;
}
.childeven h2 .smaller,
.childodd h2 .smaller{
	font-weight:400;
	font-size:0.6em;
	color:#000;
	float:left;
	width:100%;	
}
.childodd .childtext{
	float:left;
	width:44%;
	margin:0 3%;
}
.childodd .child_image{
	float:right;
	width:50%;
	margin:0;
}
.childeven .child_image img,
.childodd .child_image img{
	width:100%;
	height:400px;
}
.child h4 a:hover,.child-home h4 a:hover,
.child h4 a:focus,.child-home h4 a:focus{
	color:#666;
}
.child h4{
	width:100%;
	padding:0;
	margin:0 0 5px;
	font-weight:normal;
	color:#fff;
	font-size:1.5em;
	text-align:left;
  	font-family:'Open Sans';
}
#child_wrapper{
	float:left;
	width:100%;
	margin: 15px 0 0;
}
.child_image_home{
	display:block;
	margin:0 0 0 0;
	padding:0;
	text-align:center;
	}
.child_image img,.child_image_home img{
	border:none;
}
.chilhomebg{
	position:absolute;
	left:0;
	top:0;
	background:url("images/child-bg.jpg")no-repeat left top;
	width:17px;
	height:150px;
}
.child-text{
	width:237px;
	color:#fff;
	padding:15px 15px 5px;
}
.child-texthome{
	float:left;
	width:267px;
	color:#545454;
	padding:0 0;
	min-height:85px;
	border-radius:0 0 4px 4px;
}
.child-texthome .more{
	float:left;
	clear:both;
	text-align:left !important;
	color:#1573b4 !important;
}
.child-texthome .more a{
	color:#1573b4 !important;
}
.childimgs{
	min-height:250px;
	float: left;
	margin: 0 1% 15px;
	padding: 0 0 0;
	position: relative;
	width: 31%;
	height: auto;
}
.child a.icons_img{
	float:left;
	width:100%;
	text-align:center;
	text-decoration:none;
	font-family:'Open Sans';
	color:#545454;
}
.child a.icons_img span{
	float:left;
	width:100%;
	text-align:center;
	height:120px;
	margin-bottom:15px;	
}
.child a.icons_img img{
	display:block;
	clear:both;
	margin:0 auto;
}
/*********** Services *******************/
#serviceshome{
	float:left;
	width:100%;
	height:auto;
	position:relative;
	padding: 0 0 0;
	background:#fff;
	z-index:9999;
}
.servicehome{
	display:block;
	width:1230px;
	position:relative;
	z-index:9999;
	margin:0 auto;
}
.services-home{
	float:left;
	width:21%;
	padding:0 2%;
	margin:0 0 70px;
	min-height:270px;
	text-align:center;
	font-family:'Open Sans';
}
.services-home a{
	text-decoration:none;
	float: left;
	}
.services-home a:hover h3,
.services-home a:focus h3{
	color: #dc5f0b;
}
.services-home a:focus-visible{
	outline: 2px solid #000!important;
}
.services-home  img{
	display:block;
	margin:0 auto 10px;
}
.services-home h3{
	float:left;
	width:100%;
	font-size:1.2em;
	text-align:center;
	color:#333;	
}
.services-home p{
	color:#545454;
	font-family:'Open Sans';
}
a.allservieslink{
	color:#545454;
	font-family:'Open Sans';
	text-decoration:none;
	padding:8px 50px;
	font-size:1.15em;
	display:block;
	border:1px solid #545454;
	margin:0 auto 0;
	width:150px;
	height:20px;
	position:absolute;
	text-align:center;
	left: 50%;
	bottom:60px;
	transform: translateX(-50%);
}
/*********** packages *******************/
.packagesmain{
	float:left;
	width:100%;
	height:auto;
	position:relative;
	text-align:center;
	font-size:1.5em;
	color:#000;
	font-family: 'Open Sans', Arial;
	margin-bottom:40px;
}
.packagesmain h1{
	border-bottom:0;
	color:#000;
	text-align:center;
	font-size:2.3em;
	margin-bottom:0;
}
.pacakgesborder{
	display:block;
	margin:0 auto;
	width:200px;
	height:2px;
	background:#999;
	margin-bottom:20px;
}
#packageshome{
	float:left;
	width:100%;
	height:auto;
	position:relative;
	padding: 120px 0 100px;
	z-index:999;
}
#packageshome img{
	position:absolute;
	right:0; 
	top:0;
	z-index:999;
	}
.packagehome{
	display:block;
	width:1230px;
	position:relative;
	margin:0 auto;
	z-index:9999;
	color:#545454;
	text-align:center;
	font-family:'Open Sans';
}
.packagehome h2{
	color:#000;
	float:left;
	width:100%;
	text-align:center;
	margin-bottom:15px;
}
.packagehome p.intropackages{
	font-size:1.3em;
	font-family:'Open Sans';
	float:left;
	width:100%;
	margin:10px 0 70px;
	color:#333;
}
.packages-home{
	float:left;
	width:20%;
	padding:0 3%;
	margin:0 0 70px;
	min-height:120px;
	text-align:left;
	color:#666;
	font-family:'Open Sans';
}
#packages-home-row1{
	padding-left:0;
}
#packages-home-row4{
	padding-right:0;
}
.packages-home a{
	text-decoration:none;
	color:#444;
}
.packagehome h3{
	color:#000;
	float:left;
	width:100%;
	padding:0 0 20px;
	margin-bottom:15px;
	border-bottom: 2px solid #5AB3E8;	
}
.packagessubheadings{
	font-family:'Open Sans';
	font-size:1.3em;
	font-weight:bold;
	float:left;
	width:100%;
	color:#000;
	margin:0 0 7px;
}
.butonhomepackages{
	float:left;
	background:#5AB3E8;
	border-radius:5px;
	color:#fff;
	padding:5px 30px;
	margin:15px 0 0;
	text-align:center;
	font-size:1.1em;
}
.allpackageslink{
	color:#545454;
	font-family:'Open Sans';
	text-decoration:none;
	padding:8px 50px;
	font-size:1.15em;
	display:block;
	border:1px solid #545454;
	margin:0 auto 0;
	width:150px;
	height:20px;
	position:absolute;
	text-align:center;
	left: 50%;
	bottom:60px;
	transform: translateX(-50%);
	z-index:99999;
}
/************** Gallery **************/
.gallery_wrapper{
	padding:15px 0 0;
}
.gallery_wrapper h3{
	font-size:1.7em;
}
.ngg-gallery-thumbnail img {
  margin: 10px auto!important;
}
.ngg-gallery-thumbnail a:hover img,
.ngg-gallery-thumbnail a:focus img{ 
	opacity: 0.8;
}
.ngg-gallery-thumbnail a:focus-visible{ 
   outline: 2px solid #000!important;
}
/************** grid**************/
.grid{
	float:left;
	margin:0 0 0;
	padding:20px 0 0;
	width:100.5%;
	position:relative;
	left:-0.25%;
	border-top: 1px solid #ccc;
}
/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
  width: 32.3%;
  padding:0.5%;
  overflow:hidden;
}
.grid-item {
  float: left;
}
.grid-item a{
	float:left;
	width:100%;
	overflow:hidden;
}
.grid-item img {
  display: block;
  max-width: 100%;
}
/*********** Category ***************/
#list_wrapper{
	float:left;
	width:100%;
	margin: 35px 0 0;
	padding:0 ;
}
.list_items{
	float:left;
	width:100%;
	position:relative;
	padding:0 !important;
}
#lists{ 
	float:left;
	width:100%;
	padding-bottom:35px;
}
.item{
    float: left;
    height: auto;
    margin: 0 ;
    padding:0 1% 30px;
    position: relative;
	min-height:480px;
	text-align:left;
}
h2.relatedh2{
	font-size: 1.8em;
	color: #000;
	float: left;
	width: 100%;
	margin: 70px 0 35px;
}
.item a{
	text-decoration:none;
}
.item a:hover,
.item a:focus{ 
	color:#1ca795;
}
.item a:focus-visible{ 
   outline: 2px solid #000!important;
}
.item h2{
	font-size:1.2em;
	text-align: left;
	padding: 15px 0 15px;
}
.item h2 a {
	float:left;
	width:100%;
	color:#000;
	text-align:left;
	text-decoration:none;
}
.itemrelated  h4 a {
	text-transform:none;
	text-align:left;
}
.item a.item_image{
	overflow:hidden;
	float:left;
	width:100%;
}
.item a.item_image img{
	width:100%;
	border:none;
	-webkit-transition: all 0.4s ease-in-out;
	  -moz-transition: all 0.4s ease-in-out;
	  -o-transition: all 0.4s ease-in-out;
	  transition: all 0.4s ease-in-out;
}
.item a.item_image:hover img{
	transform: scale(1.3);
}
.item_image img{
	border:none;
	max-width: 100%;
	margin: 0 0 20px; 
}
.item a.item-image img:hover{
   filter: gray; 
   filter: grayscale(1); 
   -webkit-filter: grayscale(1); 
}
.item .meta_date,.meta_date{
	font-family:'Open Sans', Arial;
	color:#5E5E5E;
	font-size:0.9em;
}
#content .meta_date{
	margin-bottom:15px;
	display:block;
}
 .more,
.item .more,
.child-home .more,
.child .more {
	width:100%;
	text-align:right;
	right:10px;
	bottom:10px;
	margin:0 0 0;
}
.more a,
.item .more a,
.child-home .more a,
.child .more a{
	color:#028073;
	text-decoration: underline;
}		
.more a:hover,
.item .more a:hover,
.child-home .more a:hover,
.child .more a:hover{
	color:#545454;
	outline-style:none;
}
.more a:focus,.more a:focus-visible,
.item .more a:focus,.item .more a:focus-visible,
.child-home .more a:focus,.child-home .more a:focus-visible,
.child .more a:focus,.child .more a:focus-visible{
	outline: 2px solid #000!important;
}
figure.news article .more{
	width:auto;
	display:inline;
}
/*********** products page ******************/
	#tabs{
		float:left;
		width:100%;
		margin:20px 0 10px
		  }
	#tabs ul#tabsul{
		list-style:none;
		float:left;
		width:100%;
		padding:0;
		margin:0;
		height:32px;
		border-bottom:1px solid #ccc;
	}
	#tabs ul#tabsul li{
		list-style:none;
		float:left;
		width:auto;
		font-size:1.2em;
		font-family:"Open Sans",Arial;
		padding:5px 10px;
		margin: 0 5px 0 0 ;
		border-left:1px solid #ccc;
		border-top:1px solid #ccc;
		border-right:1px solid #ccc;
		border-radius:4px 4px 0 0 ;
	}
	#tabs ul#tabsul li a {
		text-decoration:none;
		color:#666;
	}
	#tabs ul#tabsul li.ui-tabs-active{
		background:#fff;
		height:22px;
	}
	#tabsprodul li img{
		border:none;
	}
	#tabs .ui-tabs-panel{
		float:left;
		width:98%;
		padding:10px 1%;
		border-left:1px solid #ccc;
		border-bottom:1px solid #ccc;
		border-right:1px solid #ccc;
		border-radius:0 0  4px 4px ;
	 }
 	#tabs #tabs-5{
		padding:25px 2%;
		width:96%;
	}
	#tabsprodul{
		float:left;
		width:450px;
		margin:5px 0 30px;
		padding:0;
		list-style:none;
	}
	#tabsprodul li{
		float:left;
		width:150px;
		margin:0 0 0 10px;
		list-style:none;
	}
	#tabsprodul li.tabsprod-1,
	#tabsprodul li.tabsprod-5,
	#tabsprodul li.tabsprod-9{
		margin:0;
	}
	#tabs ul#tabsul li a.tabprices{
		color:#ee6321;
	}
	a#moreinfoprod{
		width:100px;
		margin-bottom:10px;
		color:#EE6600;
		line-height:1.1em;
		font-size:1.1em;
		padding-right:25px;
		cursor:pointer;
		font-family:'Oxygen',serif;
		text-decoration:none;
		font-weight:bold;
		background:url(images/plus-minus.png) 85px 4px  no-repeat;
		}
	a#moreinfoprod.selected{
		background:url(images/plus-minus.png) 85px -13px  no-repeat;
	}
	#moreinfoprodtext{
		display:none;
		margin-top:15px;
		}
	#moreinfoprodtext.selected{
		display: block;
		}
	.list_items_products{
		float:left;
		width:100%;
	}
	.list_items_products .item{
		float:left;
		width:48%;
		padding:20px 1%;
		text-align:left;
		min-height:200px;
		border:none;
	}
	.list_items_products .item_image{
		margin: 0 20px 10px 0;
	}
	.list_items_products .item:first-child{
		margin-left:0;
	}
	.list_items_products .item h4{
		margin-top:0;
	}
	.list_items_products .item h4 a{
		color:#666;
		line-height:1em;
	}
	.home_products{
		float:left;
		width:22%;
		text-align:center;
		margin:10px 1.5%;
	}
	.home_products h4{
		width:100%;
		text-align:center;
		font-family:'Oxygen',serif;
		color:#545454;
		font-size:1em;
	}
	.home_products h4 a{
		color:#545454;	
	}
	.home_products_image{
		float:left;
		text-align:center;
		min-height:125px;
		width:100%;
	}
	.home_products_image img{
		margin:0 auto;
		border:none;
	}
/************ images ***********************/
#images_main {
	float:right;
	width:450px;
	height:auto;
	position:relative;
	margin:0 0 0 40px;
	}
.product_imagemain{
	width:450px;
}
#image-main {
	width:500px;
	height:300px;
	min-width:510px;
	display:table;
	background:#fff;
	text-align:center;
	vertical-align:middle;
	}
	#images{
    height: 300px;
	margin:0 auto;
	padding:0 0;
	position:relative;
	max-width:510px;
	width:350px;
    text-align: center;
    vertical-align: middle;
}
	#images img{
	background:#fff;	
	max-height:350px;
	max-width:500px;
	border-radius:4px;
	box-shadow: 0 0 5px #CCCCCC;
	}
#navi2 {
	float:left;
	width:390px; 
	height: auto;
	position:absolute;
	left:-5px;
	top:250px;
	list-style:none;
	margin:5px 0;
	padding:0;
		}
#navi2 li, #navi3 li  { 
	width:109px;
	height:75px;
	display:table;
	float: left; 
	margin: 0 5.5px 5px; 
	list-style: none;
}
#navi2 a, #navi3 a { 
	background:#fff;
    height: 75px;
	margin:0 auto;
	padding:0 0 0;
	border-radius:4px;
	max-width:90px;
    text-align: center;
    vertical-align: middle;
	}
#navi2 a:focus, #navi3 a:focus { 
	outline: none; 
}
#navi2 img, #navi3 img{ 
	border: none; 
	height:75px;
	width:109px;
	box-shadow: 0 0 5px #CCCCCC;
	border-radius:4px;
}
#navi2 li.activeSlide a, #navi3 li.activeSlide a { 
}
#navi2 li.activeSlide a img, #navi3 li.activeSlide a img{
	opacity:1; 
	}
ul.details{
	list-style:square; font-size:1.2em; color:#666; margin:0; padding:10px 0 0 10px;
}
ul.details li{
	margin:9px;
	font-family: 'Arial';
	color:#36857E;
}
/******** page numbers *******/
.list_navi{
	float:left;
	width:100%;
	text-align:center;
	}
.wp-pagenavi{
	border:none;
	margin-right:15px;
	text-decoration:none;
	color:#545454;
	text-shadow:none;
	padding:15px 0 50px 0;
	}
.wp-pagenavi a,
.wp-pagenavi span.extend,
.wp-pagenavi span.current
{
	color:#545454;
	text-decoration:none;
	display:inline-block;
	padding:0;
}
.wp-pagenavi a,
.wp-pagenavi a.page,
.wp-pagenavi span.current,
.previouspostslink,
.nextpostslink,
.wp-pagenavi a.first,
.wp-pagenavi a.last,
.wp-pagenavi span.extend,
.wp-pagenavi a.nextpostslink,
.wp-pagenavi span.pages
 {
	margin-right:10px;
	border:1px solid #ccc;
	text-align:center;
	padding: 5px 13px;
	border-radius:20px;
	}
.wp-pagenavi a.last{
	width:auto!important;
	padding: 7px 13px;
}
.wp-pagenavi span.pages{
	margin-right:10px;
	height:25px!important;
	width:auto!important;
	padding: 7px 13px;
	}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
    border-color: #BC5120!important;
	color:#BC5120;
}
.gutentor-testimonial.testimonial-template3 .gutentor-single-item{
	text-align: left !important;
}
.gutentor-testimonial.testimonial-template3 .gutentor-single-item-image-box{
  float: left;
  width: 17%;
  margin-right: 1%!important;
}
.gutentor-testimonial .gutentor-single-item-image-box .gutentor-image-thumb img{
 width: 100%;
 height: auto;
}
.gutentor-image-thumb{
	min-height: 180px;
	width: 100%;
}
/******** Slideshow **************/
#slideshow{
	float:left;
	margin:0 auto 0;
	padding:0;
	width:100%;
	height:850px;
	color:#fff;
	overflow:hidden;
	position:relative;
	z-index:9999;
}
#slideshow_inner{
	float:left;
	margin:0 auto 0;
	width:100%;
	color:#fff;
	height:100%;
	position:relative;	
}
.pics {
	float:left;
    margin: 0;
	height:auto;
    padding: 0;
    width:100%;
	position:relative;
}
.slide_imagesignle{
  margin-left: 60%;
  transform: translateX(-50%);
  position:relative;
}
.homeslides{
	float:left;
	width:33.3333%;
	height:300px;
}
.homeslides:hover img{
	  -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -o-transform: scale(1.06);	
}
.homeslides img{
	float:left;
	height:auto;
	width:125%;
	position:relative;
}
#home1slide img{
	top:30px;
}
#home2slide img{
	width:160%;
	left:-100px;
	top:-40px;
}
#home3slide img{
	width:140%;
	left:-110px;
	top:-80px;
}
#home4slide img{
	width: 230%;
	left: 0;
	top: 20px;
}
#home5slide img{
	width:200%;
	left:160px;
	top:-100px;
}
#home6slide img{
	width: 60%;
  left: 20px;
  top: -190px;
  float: right;
}
#navi3{
	position:absolute;
	bottom:10px;
	left: 50%;
	transform: translate(-50%, 0);
	width:auto;
	height: auto;
	list-style:none;
	margin:5px 0;
	padding:0;
	z-index:9999;	
}
#navi3 span{
	float: left; 
    border-radius: 7px;
    color: transparent;
    display: inline-block;
    height: 7px;
    margin: 0 5px 0 0;
    text-align: left;
    text-indent: -99999px;
    width: 7px;
	background:#666;
	cursor:pointer;
}
.slidertest{
	float:left;	
	width:80%;
	height:200px;
	padding:70px 10%;
}
.slider{
	float:left;
	width:100%;
    height:auto;
	padding:150px 0 0;
	position:relative;
	background: url() no-repeat top transparent;
}
.slider_text {
    display: block;
	position:absolute;
	bottom:0;
    width: 1230px;
    z-index: 999;
	left: 50%;
	transform: translateX(-50%);
	/*text-shadow:  2px 2px 10px #000000;*/
}
.slider_text h1{
	float:left;
	position: relative;
	width: 100%;
	margin: 0 auto 15px;
	color:#000;
	font-weight:800;
	font-size:6em;
	line-height:0.9em;
	text-align:left;
}
.slider_text h1 .slide-titlepagesblue{
	color: #028073;
}
.slider_text h1 .slide-titlepagesorange{
	color: #dc5f0b;
}
.slider_text p{
	float:left;
	position: relative;
	width: 40%;
	margin: 20px auto 20px;
	color:#333;
	font-weight:400;
	font-size:1.8em;
	font-weight:300;
	line-height:1.2em;
	text-align:left;
}
.slide-text-link{
	color:#dc5f0b;
	float:left;
	display:block;
	clear:both;
	padding:8px 23px;
	font-size:1.4em;
	font-weight:bold;
	margin: 0 auto 15px;
	text-decoration:none;
	border:1px solid #dc5f0b;	
}
#navi {
	width:1230px; 
	height: 21px;
	list-style:none;
	z-index:600;
	position:absolute;
	text-align:center;
	margin: 0 0 0;
	padding: 0 0;
	bottom:15px;
	left:38px;
}
#navi span{ 
	float: left; 
    border-radius: 10px;
    color: transparent;
    display: inline-block;
    height: 10px;
    margin: 0 5px 0 0;
    text-align: left;
    text-indent: -99999px;
    width: 10px;
	background:#fff;
	cursor:pointer;
	}
#navi span.cycle-pager-active{ 
	background:#5ab3e8;
}
.slideshowtestimonials{
	float:left;
	width:100%;
	position: relative;
	background:#fff;
	padding: 50px 0 100px;
	z-index: 9999;
	text-align:center;
}
.slideshowtestimonial{
	display: block;
	width: 1230px;
	margin:0 auto;
	position: relative;
}
a.testimonial,.testimonial {
	float:left;
	width:80%;
	padding:10px 10% 10px;
	background: url(images/quote.png) no-repeat 360px 5px;
	text-decoration:none;
	font-family:'Open Sans', Arial;
	font-weight:400;
	text-align:left;
	color:#999;
	font-size:1.3em;
}
a.testimonial:focus-visible{
	outline: 2px solid #000!important;
}
.wrapperprojects a.testimonial {
	padding:10px 0 10px;
	background: url(images/quote.png) no-repeat 240px 5px;
	color:#666;
	font-size:1.1em;	
}
.wrapperprojects .testimonial h5 {
	float: none;
	width:auto;
	margin-top:15px;
	font-weight: 600;
	font-size: 0.85em;
	color: #028073;
	text-align: left;
}
.testimoniawh{
	background: url(images/quote-wh.png) no-repeat 0 5px;
	color:#fff;
	width:90%;
	padding:10px 0 10px 10%;
}
a.testimonial img,.testimonial img{
	float:left;
	margin-top:10px;
	margin-right:50px;
	border-radius:100%;
}
a.testimonial h5,.testimonial h5{
	float:right;
	width:100%;
	font-weight:600;
	font-size:0.85em;
	color:#1DB4A0;
	text-align:right;
}
.testimoniawh h5{
	color:#fff;
}
a.testimonial .company,.testimonial .company{
	float:right;
	width:auto;
	color:#DD652B;
	text-transform:none;
	text-align:right;
}
.testimoniawh .company{
	color:#fff;
	font-weight:600;
	font-size:0.8em;
}
.bordertest{
	float:right;
	width:60px;
	position: relative;
	top:13px;
	margin-right:20px;
	border-top:1px solid #DD652B;
}
.testimoniawh .bordertest{
	border-top:1px solid #fff;
}
.slideshowtestimonials h5{
	float:left; 
	width:100%;
	text-align:center;
	font-size:0.9em;
}
.contactushomemain{
	float:left;
	width:100%;
	position:relative;
	z-index: 999;
	color: #fff;
	background:#028073;
	padding: 130px 0 100px;
}
.contactushome{
	float: left;
	margin:0 auto;
	text-align:left;
}
.contactushome h3{
	color:#000;
	font-size:6em;
	line-height:0.9em;
}
.bluewriting{
	color:#017469;
}
.smallertitles {
  font-size: 40%;
}
.contactushome p{
	font-family:'Open Sans', Arial;
	color: #000;
	font-weight:400;
	font-size:1.4em;
	margin-bottom:40px;
}
a.contacthomebanner{
	margin:0 auto 0;
	width:430px;
	font-family:'Open Sans', Arial;
	color: #B84F0A;
	font-weight:700;
	font-size:1.8em;
	line-height:1em;
	text-decoration:none;
}
a.contacthomebanner:hover,
a.contacthomebanner:focus{
	color: #028073;
}
a.contacthomebanner span {
  background: #dc5f0b;
  float: left;
  height: 10px;
  margin-top: 7px;
  margin-right: 15px;
  width: 50px;
}
a.contacthomebanner:hover span,
a.contacthomebanner:focus span{
	background: #028073;
}
a.contacthomebanner:focus-visible{
	text-decoration: underline;
	outline: 2px solid #000;
}
.homelogosmainwarpper{
	background: #F5F5F5;
	float:left;
	width:100%;
	padding: 80px 0 80px;
}
.homelogosmainwarpper img{	
	width: auto !important;
	margin-top: 30px;
}
.homelogosmain{
	float:left;
	width:100%;
}
.homelogosmain{
	margin:30px 0;
}
.homelogos{
	float:left;
	width:auto;
	height:auto;
	margin:0 30px;
}
.homelogos:first-child{
	margin-left:0;
}
.homelogos:last-child{
	margin-right:0;
}
.homelogos a{
	float:left;
	width:auto;
	height:auto;
}
.homelogos a:focus{
	border:2px solid #000;
}
.homelogos img{
	height:40px;
	margin-bottom: 30px;
	max-width: 100%;
	width: auto;	
}
.homelogos img:hover{
	filter: gray;
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
}
/******** Slideshow project paages **************/
#slideshow_main{
		float:left;
		width:100%;
		margin:0 auto;
		height:auto;
		padding:0;
		z-index:99;
		position:relative;
		overflow:hidden;
}
#slideshow_main.slideshow_mainproj{
	margin-top:65px;
}
#work{
	display: block;
		width: 1230px;
		padding: 0 0 0;
		margin: 0 auto 0;
		position: relative;
		z-index: 11;
	}
.slide {
	float: left;
	text-align: center;
}
.slide.inactive{
  opacity: .5;
}
.slide.scrolling{
  opacity: 0.1 !important;
}
.slide img {
  /*margin: 5px;*/
}
.project-view {
  max-width: 1230px;
  width: 100%;
  margin: auto;
  position:relative;
}
.project-view .content-block:first-child h2 {
  margin-top: 0;
}
.project-view .content-block.gallery .viewport {
  background: #ebebeb;
  position: relative;
}
.project-view .content-block.gallery .slides {
  background: #ebebeb;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  width: 9999em;
}
.project-view .content-block.gallery .slides .frame {
  background: #fff;
  cursor: pointer;
  border-right: 8px solid #fff;
  float: left;
  position: relative;
}
.project-view .content-block.gallery .slides .frame img {
  display: block;
  height: auto;
  margin: 0;
  vertical-align: top;
  width: 100%;
}
 .project-view .content-block.gallery .slides .frame img {
  opacity: 0.3;
}
.project-view .content-block.gallery .slides .frame.active img {
  opacity: 1;
}
.project-view .content-block.gallery .progress {
  bottom: 5px;
  border: 0;
  position:absolute;
  left:30px;
  z-index:999;
}
.project-view .content-block.gallery .progress ul {
  margin: 0 0 0 0;
  padding: 0;
  width: auto;
}
.project-view .content-block.gallery .progress li {
  display: inline-block;
  *display: inline;
  margin: 0 2px;
  zoom: 1;
}
.project-view .content-block.gallery .progress li a {
	border-radius: 6px;
	border:2px solid #fff;
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 3px 0 0;
	text-align: left;
	text-indent: -99999px;
	color:transparent;
}
.project-view .content-block.gallery .progress li.active a {
  background: #fff;
}
.project-view .content-block.caption-slideshow .full-width {
  position: relative;
}
.project-view .content-block.caption-slideshow .frame {
  float: left;
  margin: 0 1px;
  position: relative;
}
.project-view .content-block.caption-slideshow .frame.center {
  margin-left: 1px;
  width: 359px;
}
.project-view .content-block.caption-slideshow .captions .progress {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
}
.playslider{
	cursor: pointer;
}
.pauseslider{
	cursor: pointer;
}
.slideshow{
	position: relative;
}
.project-view .content-block.gallery .onandoff {
    border: 0 none;
    text-align: left;
	position:absolute;
	z-index:999;
	left:15px;
	bottom:14px
}
/**************hover effect *************/	
.project_list {
	list-style: none;
	float:left;
	width: 100%;
	height: auto;
	position: relative;
	margin: 0 auto 40px;
	padding: 0;
}
.project_list li {
	animation:load 250ms forwards;
	background:#F2F2F2;
	height:300px;
	position:relative;
	overflow:hidden;
	margin: 5px 0.5%;
	width:32.3%;
	float: left;
}
.project_list li img{
	float:left;
	width:100%;
}
.project_list li .listpeople{
	color:#999;
	font-size:1.2em;
	width:95%;
	margin:0 2.5%;
}
.project_list li h2{
	color:#000;
	font-family:'Open Sans';
	font-weight:500;
	font-size:1.35em;
	font-weight:bold;
	float:left;
	width:100%;
	padding:10px 0 5px;
	text-align:left;
}
.project_list li .mainhover {
    opacity: 0;
    transition: 300ms opacity;
    will-change: opacity;
}
.project_list li:hover .mainhover {
    opacity: 1!important;
}
.mainhover{
	background: rgba(9,46,110,0.85);
	color:#fff;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:99999;
}
/************* Projects *********/
#fancybox-wrap{
	top:60px;
}
.imageframe{
	float:right;
	width:35%;
	overflow:hidden;
	position:relative;
	height:320px;
	margin:20px 0 10px 2.5%;
}
.projectmainimage{
	display:block;
	margin:80px auto 0;
	left: 50%;
	transform: translateX(-50%);
	position:relative;
}
.project_image{
	float:left; 
}
.proj_image_info_main{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	z-index:5;
}
.proj_image_info{
	background:rgba(102,102,102,0.9);
	font-size:1em;
	color:#fff;
	font-family: "Open Sans";
	width:90%;
	height:320px;
	text-align:left;
	padding:1px 5%;
}
.largetext{
	font-size:1.2em;
	font-weight:bold
}
.contentproj,
.contentprojmain{
	font-family: "Open Sans";
	font-size:1.1em;
}
ul.subpagesnav{
	float:left;
	width:100%;
	border-bottom:1px solid #ccc;
	padding:0 0 20px;
	margin:20px 0 15px;
	list-style:none;
	display:table;
	}
ul.fixedul{
	position:fixed;
	top:60px;
	padding:40px 0 30px;
	margin: 0 0 10px;
	width:1230px;
	background:#fff;
	z-index:9999;
	border:none;
}
h1.fixedh1 span{
	display:block;
	width:100%;
	padding-bottom:10px;
	border-bottom:1px solid #ccc;
}
ul.subpagesnav li{
	width:auto;
	padding:0;
	text-align:center;
	font-size:1.1em;
	display:table-cell;
}
ul.subpagesnav li:first-child{
	padding-left:0;
}
ul.subpagesnav li a{
	color:#777;
	text-decoration:none;
}
ul.subpagesnav li a.current{
	color:#5ab3e8;
	}
ul.subpagesnav li a:hover{
	color:#333;
	}
.project_content{
	float:left;
	width:62%;
}
.project_content_main{
	float:left;
	width:100%;
	padding:0 0 10px;
}
.proddetail3{
	line-height:1.8em;
}
.imageshistory{
	float:left;
	width:80%;
	padding:30px 10%;
}
.imageshistory img{
	margin: 0 5px;
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
}
/******** Slideshow Projects **************/
#slideshow_projects{
	float:left;
	width:100%;
	margin:0 auto 15px;
	height:750px;
	padding:0;
	z-index:10;
	position:relative;
	background:#fff;
	border-bottom:1px solid #B7B7B7;
}
#slideshowproject{
	display:block;
	width:1230px;		
	margin:0 auto 0;
	height:750px;
	color:#fff;
	position:relative;
	overflow:hidden;
}
#slideshow_innerproject{
	float:left;
	width:100%;
	margin:0 auto 0;
	color:#fff;
	position:relative;	
}
#slideshowproject p{
	margin:0 0 10px ;
}
.sliderproject{
	float:left;
	width:100%;
	height:750px;
	padding:0 0;
	position:relative;
	background: url() no-repeat top transparent;	
}
#slideshow_innerproject .pics {
	float:left;
    height: 750px;
    margin: 0;
    padding: 0;
	z-index:1;
    width:100%;
}
.sliderproject img{
	position:absolute;
	top:0;
	z-index:5;
	left:0;
}
#prev{
	position:absolute;
	left:10px;
	top:45%;
	height:50px;
	width:35px;
	z-index:999;
	text-align:left;
	text-indent:-99999px;
	cursor: pointer;
	background:url("images/arrow-left.png") no-repeat center;
}
#next{
	position:absolute;
	right:10px;
	top:45%;
	height:50px;
	width:35px;
	z-index:999;
	text-align:left;
	text-indent:-99999px;
	cursor: pointer;
	background:url("images/arrow-right.png") no-repeat center;
}
.fancybox-lock body {
    overflow: visible !important;
}
/************** Gallery **************/
.gallery_wrapper{
	margin:30px 0 50px;
	width:101%;
	position:relative;
	left:-0.5%;
	float:left;
}
.ngg-galleryoverview{
	float:left;
	width:100%;
	padding:20px 0 0;
	border-top:1px solid #ccc;
}
.ngg-gallery-thumbnail {
    float: left;
    text-align: center;
	width:100%!important;
	height:auto!important;
	margin: 0!important;
	border:none!important;
}
.ngg-gallery-thumbnail img {
    background-color: #fff;
    display: block;
	margin:0 auto;
    position: relative;
	border:none;
}
.ngg-gallery-thumbnail-box {
    float: left;
	width:32.3%;
    margin: 7px 0.5%;
	overflow:hidden;
}
.clilogos{  
	float: left;
	width:25%;
    margin:0 0 20px;
	min-height:140px;
}
/******** viewing buttons *******/
#accessibilitytringer{
	float:left;
	width:auto;
	border:none;
	font-size: 1em;
	font-weight: 600;
	padding: 4px 0 ;
	margin:0 30px 0 0;
	position: relative;
	color:#fff;
	background: none;
}
#accessibilitytringer .fa-universal-access{
  font-size: 1em;	
}
#accessibilitytringer:hover,
#accessibilitytringer:focus{
	color:#ccc;
	text-decoration: underline;
}
#accessibilitytringer:focus-visible{
	outline: 2px solid #000!important;
}
#viewing{
	float:left;
	width:auto;
	position:absolute;
	left:0;
	top:35px;
	margin: 5px 0 0 0;
	z-index: 999999;
	display: none;
}
#viewing ul{
    list-style:none;
	float:left;
	width:auto;
	margin:2px 0 3px;
    padding:20px;
	background:#fff;
	position:relative;
	}
#viewing ul li{
	margin-right:5px;
	padding:2px;
	float:left;
	width:auto;
	height:auto;
	position:relative;
}
#viewing ul li #contrast{
	font-size:150%;
}
#viewing ul li #resetcontrast{
	font-size:150%;
	background:#fff;
	border: 1px solid #000;
}
#viewing ul li button{
	float:left;
	width:44px;
	height:44px;
	padding:0;
	color:#000;
	font-weight:600;
	text-decoration:none;
	text-align:center;
	line-height:0.9em;
	font-size: 1.6em;
	background:none;
	border:none;
	}
#viewing ul li.resetcontrast button{
	width:20px;
	height:20px;
	}
#viewing ul li button:focus{
	opacity: 0.7;
}
#viewing ul li button:focus-visible{
	outline: 2px solid #000!important;
}
#viewing ul li #default{
	border: 1px solid #000;
	font-size:1.1em;
	}
#viewing ul li #large{
	font-size:1.4em;
	border: 1px solid #000;
	}
#viewing ul li #xlarge{
	border: 1px solid #000;
	font-size:2em;
	margin-top:0;
	}
#viewing ul li #off{
	margin-left:0;
	color: #000;
	font-size: 1.6em;
	border: 1px solid #000;
}
#viewing ul li button:hover,
#viewing ul li button:focus{
	opacity:0.7;
	border:2px solid #000;
	padding:0;
}
/***************** attachments ********************/
.attachment-icon{
	float:left;
	margin-right:15px;
}
.download-attachments div a, .download-attachments ul a, .download-attachments table a{
	float:left;
}
.download-attachments table td, .download-attachments table th{
	padding:10px;
}
/****************** form ***************/
.wpcf7-form{
	float:left;
	width:100%;
	font-size:1.1em;
	}
.wpcf7-form input.wpcf7-text,
.wpcf7-form input.wpcf7-quiz,
.zcwf_col_fld input#First_Name,
.zcwf_col_fld input#Last_Name,
.zcwf_col_fld input#Email,
.zcwf_col_fld input#Phone{
	float:left;
	width:99%;
	border:1px solid #666;
	padding:4px 4px;
	border-radius:4px;
	margin:0 0 5px 0;
}
.wpcf7-checkbox input[type='checkbox']:focus {
	outline:1px solid #000099!important;
}
.wpcf7-form textarea{
	float:left;
	width:99%;
	border:1px solid #666;
	padding:2px 3px;
}
.wpcf7-form input.wpcf7-submit,#formsubmit,.zcwf_button{
	float:right;
	width:auto;
	padding:6px 25px;
	background:#017469;
	color:#fff;
	border:none;
	font-size:1.3em;
	border-radius:4px;
	margin-top:20px
}
.zcwf_button{
	background:#E06326;
	margin-right:15px;
	margin-bottom:70px;
}
.wpcf7-list-item {
  display: inline-block;
  margin: 0 1em 0 0 ;
}
/************** map frame****************/
.map_frame{
	float:left;
	width:100%;
	margin-top:15px;
}
.map_frame iframe{
	width:100%;
	height:350px;
}
/***************** wp table********************/
.tablepress tfoot th, .tablepress thead th{
	background:#ccc!important;
}
.tablepress .column-3{
	text-align:right;
	padding-right:15px;
}
#skiplinks a{ 
	position:absolute; 
	left:-10000px;
	top:auto; 
	color: #000;
	width:1px; 
	height:1px; 
	overflow:hidden;
	z-index:9999999;
 } 
#skiplinks a:focus{ 
	position:relative; 
	width:auto; 
	height:auto;
	left: 0;
	top: 0;
	z-index:9999999;
 }
#skiplinks a:focus-visible{
	outline: 2px solid #000;
}
body:has(#skiplinks a:focus-within) .header-top {
    margin-top: 40px;
}
/************* newsletter *******************/
#mc-embedded-subscribe-form{
	float:left; 
	width:90%;
	border:1px solid #ccc;
	padding:3px 3px;
	border-radius: 4px;
	background:#fff;}
#mc-embedded-subscribe-form label{
	display:none;
}
#mc-embedded-subscribe-form input#mce-EMAIL{
	float:left;
	width:160px;
	border:none;
	}
#mc-embedded-subscribe-form	#mc-embedded-subscribe{
	float:right;
	color:#fff;
	background: url(images/arrow.png) no-repeat center;
	border:none;
	width:20px;
	border-radius: 4px;
	padding:2px 3px;
	margin-left:5px;
}
#mc-embedded-subscribe-form .button{
	text-indent:-9999px;
	text-align:left;
}
/***********map ********/
#contact-page{
	float:left;
	width:985px;
	padding:0 15px;
	border:1px solid #ccc
}
#contact-page .row{
	float:left;
	width:100%;
	padding:15px 0;
	border-top:1px solid #ccc;
}
#contact-page .row:first-child{
	border-top:none;
}
/*********************** tables **************/
.access-section {
  float: left;
  width: 100%;
  background: #f7f7f6;
  color: #111;
  padding: 80px 0 150px!important;
}
.small-title {
  font-size: 12px;
  font-weight: 700;
  color: #777;
  letter-spacing: 1px;
  position: relative;
  padding-left: 35px;
}
.small-title::before {
  content: "";
  width: 25px;
  height: 2px;
  background: #e7642c;
  position: absolute;
  left: 0;
  top: 50%;
}
.access-section h2{
	text-align: left;
	font-size: 2.2em;
	color: #000000;
	margin-bottom: 60px;
}
.access-section h2 span{
	color: #028073;
}
.card-box {
  border: 1px solid #ddd;
  padding: 30px 25px;
  min-height: 240px;
  position: relative;
}
.numberbox {
  font-size: 45px;
  color: #e7642c;
  font-weight: 700;
  margin-bottom: 10px;
}
.card-box h3 {
  font-size: 1.6em;
  font-weight: 600;
  margin-bottom: 15px;
}
.card-box p {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}
.box-top {
  margin-top: 0;
}
.box-middle {
  margin-top: 155px;
}
.box-top-2 {
  margin-top: 55px;
}
.curvedarrow1{
  position: absolute;
  bottom: -180px;
  left: 180px;
  width: 80%;
}
.curvedarrow2{
 position: absolute;
  top: -80px;
  right: -250px;
  width: 80%;
}
.curvedarrow3{
position: absolute;
  top: 60px;
  right: -250px;
  width: 80%;
}
@media (max-width: 991px) {
  .box-middle,
  .box-top-2 {
    margin-top: 0;
  }
  .arrow {
    display: none;
  }
  .access-section h2 {
    font-size: 28px;
  }
}
.easy-table{
	background:#e1e0e3!important;
}
/***************** no display messages *************/
.welcomemsg{
	width:96%;
	padding:1px 2%;
	position: relative;
	z-index: 99999;
	background:#fff;
}
.welcomemsg a{
	color:#028073;
}
.welcomemsg a:hover,.welcomemsg a:active,.welcomemsg a:focus{
	color:#E48545;
}
.card-img img{max-width: 100%;}
/***************************** Responsive design *******************/
.navbar-nav{width: 100%;}
	.navbar.scrolled .navbar-toggler{ border:none;}
	.navbar.scrolled .navbar-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(29,38,80)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");}
	.navbar-brand img{ height:70px;}
	.navbar.scrolled #navbarNav,#navbarNav.navbar-collapse{
	 background-color: rgba(255,255,255,0.9)!important;}
	 #navbarNav.navbar-collapse .nav-link{color:#1d2650!important;}
	.navbar-expand-md .navbar-nav .active .nav-link{border-bottom: none;}
/***************************** Larger Screens *******************/
@media only all and (max-width: 1350px){
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{ padding: 10px!important;}
	.card-image img{max-width: 100%;}
	#maincontent img{max-width: 100%; height: auto;}
}
@media only all and (max-width: 1280px){
	img.footerlogosabds{ max-width: 100%;}
	header{position: relative;}
	.preheaderlinks{ display: none;}
	.curvedarrow1,.curvedarrow2,.curvedarrow3{ display: none;}
	.diduknowwrap .card-img{ width: 100%!important;}
	.card-image img{max-width: 100%;}
	.diduknowwrap .card-img img{max-width: 200%!important;}
	nav{ margin:0; width: 100%;}
	.crumb{ width: 96%; padding: 0 2%;}
	.headerimagewrapper, .headerimagewrapperhome{ margin-top: 0;}
	#maincontent img{max-width: 100%; height: auto;}
}
@media only all and (max-width: 990px){
	.container{ max-width: 100%;}
	header{position: relative;}
	/* 1.13 FIX: the Mega Menu plugin switches to its own mobile
	   hamburger at 991px (see #mega-menu-wrap-primary rules above,
	   and #menu-handheld being shown from this same 990px breakpoint
	   a few lines below), but the green header background was only
	   ever set in the narrower max-width:767px block further down.
	   Between 768px and 990px the mobile toggle was already showing,
	   sitting on the default (non-green) header background - reported
	   directly by Clive with a screenshot of the gap. Duplicating the
	   same #header background rule here matches this file's existing
	   pattern of repeating header rules across breakpoints.
	   IMPORTANT - the #header background alone was NOT enough: an
	   earlier version of this fix set only #header's background and,
	   despite getComputedStyle correctly reporting the green colour
	   and a real 60px-tall box, nothing green was actually visible.
	   Root cause, confirmed live with elementFromPoint/DOM inspection:
	   #mega-menu-wrap-primary (the Mega Menu plugin's own wrapper) is
	   a DESCENDANT of #header, not a sibling - it sits inside #nav
	   inside #header - and it ships with its own solid white
	   background (rgb(255,255,255)) and is tall enough (~95px) to
	   fully cover #header's 60px box, so the green was being painted
	   and then immediately hidden underneath the menu's own white
	   panel. Forcing that one element transparent in this breakpoint
	   lets #header's green show through. Confirmed live at 850px
	   (closed menu) and 400px (both closed and with the mobile menu
	   open via the hamburger toggle - the open dropdown keeps its own
	   readable white-on-green look, not a regression). */
	#header {background: #028073;min-height: 60px;}
	#mega-menu-wrap-primary {background: transparent!important;}
	header .logo {float: left;width: 200px;margin: 75px 10px 15px 10px;}
	.header-top {width: auto;top: 0; background: none;}
	.header-left,.header-right{ padding: 0;}
	#nav {float: left; width: 100%;}
	#navmain {float: right;width: 100%;}
	#viewing:focus-within,nav:focus-within {left:0;}
	#menu-handheld{ display:block;}
	#mainheader{margin-top: 0;}
	#mainheader .container{ padding-left: 0; padding-right: 0;}
	#menu-handheld-close{ display:block;}
	/* 1.17 FIX: Clive found the nav menu landing ON TOP of the logo
	   (and occasionally showing as a stray solid-colour block over the
	   header) at widths roughly 781-990px. Root cause, confirmed live
	   by comparing computed styles above/below 990px: this rule made
	   nav position:absolute at top:0 relative to #header, which was
	   written assuming the Mega Menu plugin's OWN separate mobile
	   breakpoint (confirmed live to be ~780px, via .mega-menu-toggle's
	   visibility) had already collapsed it to a hamburger toggle by
	   990px. It hasn't - the plugin's breakpoint is a different, lower
	   number than this theme's own 990px breakpoint - so in that gap
	   the plugin is still rendering its full horizontal desktop menu,
	   and this rule was yanking that full menu out of normal document
	   flow and stacking it directly on top of .header-top/the logo
	   (both absolutely positioned with the same z-index:99999 - nav
	   simply painted underneath, invisible, or as a solid colour block
	   where its own background showed through).
	   Fix: stop forcing position:absolute here. #nav (the plugin's own
	   wrapper) is already position:relative and flows normally below
	   the logo without it - removing this just lets that continue
	   naturally down to the plugin's own ~780px breakpoint, where its
	   hamburger toggle takes over cleanly, same as it already did
	   before this rule existed. Confirmed live at 990, 900, 790 (nav
	   below logo, no overlap, matching the already-correct >990px
	   layout) and 750, 400 (hamburger toggle unaffected, opens/closes
	   correctly, no regression) - also incidentally fixed the search
	   icon overlapping "Accessible View" text at ~750px, the same
	   absolute-positioning collision applied to #searchmain/#searchtriger. */
	nav {width: 100%;margin-top: 0;}
	#searchmain {float: left;margin-right: 30px;z-index: 999999; margin-top: -35px;;left: 630px;}
	#searchtriger {margin-top: -10px;color: #fff;}
	.headerimagewrapperhome{ margin-top: 0;}
	.contactushomemain .pretitle{font-size: 85%;}
	.diduknowwrap .card-img{ width: 100%!important;}
	.diduknowwrap .card-img img{max-width: 200%!important;}
	.content_image {width: 100%!important;}
	#maincontent img{max-width: 100%; height: auto;}
	.crumb {width: 100%;}
}
/***********  iPhone/Smartphones (portrait) ----------- */
@media only all and (max-width: 767px){
	ul.preheaderlinks,.header-left,.access-section svg{display: none;}
	#mainheader{margin-top: 0;}
	header{position: relative;}
	.headerbutton_main {border-left: 0;border-right: 0;}
	#header {background: #028073;min-height: 60px;}
	/* 1.16 FIX: see the .header-top comment near the top of this file -
	   the .welcomemsg banner wraps to two lines below 768px regardless
	   of text size, measuring exactly 50px instead of the 30.8-39.4px
	   it is at normal desktop widths, so this width needs its own,
	   taller offset - set to the exact measured value, no padding, for
	   the same reason the desktop value has none. Confirmed live at
	   375px: no visible overlap (in practice .header-top's own content
	   is hidden at this width in favour of the hamburger menu, so this
	   value mainly matters for consistency/defensiveness). */
	body:has(.welcomemsg) .header-top{ top: 50px; }
	 header .logo {float: left;width: 200px;margin: 75px 10px 15px 10px;}
	header .logo a img {width: 200px; }
	.header-top {width: auto;top: 0; background: none;}
	#nav {float: left; width: 100%;}
	#navmain {float: right;width: 100%;}
	#viewing:focus-within,nav:focus-within {left:0;}
	#menu-handheld{ display:block;}
	#mainheader{margin-top: 0;}
	#mainheader .container{ padding-left: 0; padding-right: 0;}
	#menu-handheld-close{ display:block;}
	nav {width: 100%;position: absolute;margin-top: 0;}
	#searchmain {float: left;margin-right: 30px;z-index: 999999; margin-top: -35px;;left: 150px;}
	#searchtriger {margin-top: -5px;color: #fff;}
	.headerbutton {padding: 12px 15px 12px;font-size: .9em;margin-top: 80px;}
	.header_image {width: 250%;}
	.headerimagewrapperhome{ margin-top: 0;}
	.headerimagewrapperhome .headerimagetextmain {font-size: 1.7em;bottom: 20px;}
	.curvedarrow1,.curvedarrow2,.curvedarrow3{ display: none;}
	.slider{ padding-top:100px;}
	.homeslides{ height:170px;}
	#slideshow{ height:auto;}
	.headerimagewrapperhome .headerimagetextmain {font-size: 1.7em; width:80%;}
	.homelogosmainwarpper img{	max-width: 120px!important;margin-top: 10px;}
	/* 1.16 FIX: Clive reported the "Did You Know" keyboard image
	   "suddenly goes massive" right at 767px, even though 1.13's fix
	   made it work well at both 375px and 1100px. Root cause: this
	   image's wrapper (.diduknowwrap .card-img) sits in a Bootstrap
	   column, <div class="col-12 col-md-5">, which is Bootstrap's own
	   stock md breakpoint at 768px - the same kind of mismatch between
	   Bootstrap's grid and this theme's own breakpoints as the 1.13
	   footer and green-bar fixes. At 768px and above the column is
	   col-md-5 (about 5/12 of the row - confirmed live at 282px wide),
	   but drop to 767px and it stacks to col-12 (confirmed live at
	   735px wide - 2.6x wider in a single pixel). Because the wrapper's
	   height follows its own width via aspect-ratio:443/500, that jump
	   carried straight through to height too (318px to 830px), which
	   is what actually reads as "massive" - an unusually tall, wide
	   card, wider than it ever is on a real phone. It didn't show up
	   at 375px because col-12 there only means "100% of a narrow
	   phone screen", which was already a sensible size.
	   Fix: cap the wrapper at a fixed 450px (roughly its own col-md-5
	   size) and centre it, instead of letting it fill 100% of whatever
	   column width Bootstrap gives it below 768px. At genuinely narrow
	   widths (375px) 100% is already under 450px, so the cap does
	   nothing there and that confirmed-good behaviour is unchanged.
	   Confirmed live at 767px, 600px (both now sensibly sized and
	   centred, matching the desktop card's proportions) and re-checked
	   375px (unchanged, still 343px wide as before). */
	.diduknowwrap .card-img{ width: 100%!important; max-width: 450px!important; margin: 0 auto!important; float: none!important;}
	.diduknowwrap .card-image img{max-width: 200%!important;}
	.content_image {width: 100%!important;}
	#maincontent img{max-width: 100%; height: auto;}
	#crumb{ display: none!important;}
}
/* 1.13 FIX: the footer's four columns (Contact / Legal Information /
   Quick Links / logos) use Bootstrap's col-md-3, which switches from
   stacked to side-by-side at Bootstrap's own stock 768px breakpoint -
   not a number this theme chose deliberately. At widths just above
   768px there isn't really enough room for four columns side by side:
   the postcode ("St Johns House, St Johns Street, Chichester, West
   Sussex, PO19 1UU") and the support email both wrap awkwardly in the
   Contact column. Clive confirmed the wrapping stops once the columns
   stay stacked up to 822px. Bootstrap's compiled CSS can't be edited
   at the source, so this overrides it for the footer only (scoped via
   the "footer" selector, which is used exactly once in this theme -
   confirmed via grep - so nothing else on the site is affected). */
@media (min-width: 768px) and (max-width: 821px){
	footer .col-md-3{ flex: 0 0 100%; max-width: 100%; }
	/* 1.13 FIX: making the footer columns stay stacked in this range
	   (above) had a side effect on the two footer logo images ("Access
	   by Design" and "Access by Audit"). They previously only appeared
	   stacked because there was never enough horizontal room for them
	   to sit side by side - nothing was actually forcing that layout.
	   Once their column stopped shrinking in this range, the images
	   rendered side-by-side/overlapping instead. display:block makes
	   each logo take its own full line regardless of available width,
	   same stacked appearance as everywhere else on the site. Confirmed
	   live at 790px and 800px: postcode/email no longer wrap awkwardly
	   and the two logos stack correctly, no overlap. */
	.footerlogosabds{ display:block; }
}
/* 1.13 FIX: the "More about accessibility audits" button in the
   Gutentor advanced-columns block (Real Accessibility Expertise /
   the numbered 01-04 cards) sat at whatever height its own text
   happened to produce, so on the one responsive size where its card
   was taller than its neighbours the button landed lower than the
   others in the row - reported directly by Clive ("on one of the
   responsive sizes, the... box is not aligned. It is on the other
   sizes"). Scoped to this block's own auto-generated instance ID
   (#g-441c4gw) rather than .gutentor-col-wrap generally, since that
   class is reused elsewhere in the theme and this fix is only meant
   for this one row of cards. display:flex + flex-direction:column
   on the column, with margin-top:auto on the button, pins the button
   to the bottom of its column at every height, so all four buttons
   line up regardless of how much text is above them. Confirmed live
   via style injection before writing this rule. */
#g-441c4gw .gutentor-col-wrap{ height:100%; display:flex; flex-direction:column; }
#g-441c4gw .gutentor-element-button{ margin-top:auto; }
@media print {
* { background: transparent !important; color: #444 !important; text-shadow: none !important; }
a, a:visited { color: #444 !important; text-decoration: underline; }
a:after { content: " (" attr(href) ")"; } 
a.item_image:after,.item h4 a:after,#navi2 a:after, #navi3 a:after,#tabsprodul li a:after, .child a:after{ content:""; } 
abbr:after { content: " (" attr(title) ")"; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ 
tr, img { page-break-inside: avoid; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
.home_right,.child-home-featured-main{ font-size:1.3em;}
h1{ font-size:5em;}
#out,#container,#content,#wrapper{ width:auto !important;}
#images_main,#images,#navi2,.home_center,.home_right,.main-intro,#tabs .ui-tabs-panel{ width:100% !important;}
#moreinfoprodtext,.child-home-featured-text{ display:block;}
.home_tabs .more,.more,.mapframe, .child .more, header, footer, nav, aside, #featured, .contact, #cformsform, #crumb, #slideshow_main, #navi-header, .header_image, .child-row-home,#footer, .pre_header_main,.cform,.header_image_wrapper,.home_left,.preheadermain,#slideshowpages, #tabsprodul .ui-state-active,#tabsul,.tablepress caption, a.enquiry-button, a#main,.home_left_lower,.home_right_lower,.childhomefull img,#moreinfoprod{ display:none!important;}
.item_image img,.item_image img{ width:250px !important;}
.child_image,.item_image{ width:250px!important; margin-right:15px!important; float:left;}
script{ display:none;}
}