/*
Theme Name: v1.22 - Through the Roof 2025
Description:  HTML5 CSS3 Responsive
Author: Pollyana Miranda de Jesus
Author URI: accessbydesign.uk
Version: 1.22
*/
		

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 1em; line-height: 1.8em; }
body, button, input, select, textarea { font-family: poppins, sans-Arial; color: #414042; }
a { color: #6C2A67; outline:none; font-weight: 500;}
a:hover, a:focus,a:active{color: #1949D4; outline: 0; }
a:focus-visible{ outline: 2px solid #000; border: 2px solid #fff;}
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; } 
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{font-family:Poppins;
	font-weight:400;
	color:#1d2650;}
h1{font-size:2.6em; line-height:1.5em; margin:0 0 30px; padding:0; font-weight:700; color: #6C2A67}
h2{font-size:2em;color:#6C2A67 ;padding:0 0 0; line-height:1.2em;margin:0 0 30px;}
h3{font-size:1.8em;color:#000;line-height:1.2em;}
h4{font-size:1.4em;color:##6C2A67;margin:10px 0 7px;}
h4 a{text-decoration:none;}
h5{font-size:1.2em;font-weight:normal;color:#545454}
h1.blogtitles{ text-align:center;}
.text-primary{
	color: #6C2A67!important;
}
h1.maincontenth1{
	margin-top: 50px;
	margin-bottom: 40px;
}
h1.singleh1{
	width: 80%;
	margin-right: 20%;
}
.headerimagetext h1{
	font-size: 1.5em;
	color: #fff;
}
.text-secondary{
	color: #3a8700!important;
}
.bg-primary{
	background-color: #6C2A67!important;
}
.bg-secondary{
	background-color: #3a8700!important;
}
.bg-pink{
	background: #d90275;
}
.bg-blue{
	background: #007aa3;
}
#out{
	float: left;
  	width:100%;
	margin:0 auto 0;
	padding:0;
	overflow-x: hidden;
	}
.headingdevider{
	background:#cf9b5a;
	height:2px;
	width:120px;
	display:block;
	clear:both;
	margin:10px 0 20px;
}
.btn-primary, .btn-primary:active, .btn-primary:visited {
    background-color: #6c2a67 !important;
	border-radius:40px!important;
	padding:15px 40px;
	display:block;
	clear:both;
	width:300px;
	max-width:100%; /* 1.2 FIX: fixed px width with no fallback overflowed
	the viewport on very narrow phones (under ~330px); this keeps the
	designed 300px on everything wider and only shrinks below that. */
	margin:30px 0;
	border:none;
	text-transform:none;
	box-sizing:border-box;
}
.btn-secondary, .btn-secondary:active, .btn-secondary:visited {
	 background-color: #6C2A67 !important;
}
/*********** Search ***********/
#searchmain{
	float:left;
	width:auto;
	margin: 0 10px 0; 
	position:relative;
}
#searchtriger{
	float:left;
	margin:0 0 0 0 ;
	width:44px;
	height:44px;
	border:none;
	cursor:pointer;
	background:none;
	color: #fff;
}
#searchtriger i{
	position: relative;
	top: -11px;
}
#searchtriger:focus-visible{
	outline: 2px solid #000;
	border: 2px solid #fff;
}
.searchform_main{
	float:left;
	width:auto;
	padding:20px;
	margin:0;
	position:absolute;
	background:rgba(255,255,255,0.7);
	left:0;
	display: none;
	top:30px;
	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:5px 3px 3px 5px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}
/*********** Slideshow ***********/
#slideshow_main{
	 height:890px;
	 width:100%;
	 margin-bottom:50px;	
}
#slideshow_main .slider_image_wrapper{
  float: left;
  position: relative;
  height: 890px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: #6C2A67;
}
#carouselslideshow{
 height:890px;
 width:100%;
 position: relative;
 }
/* 1.5 FIX: replaces the old width:auto/min-height:100vh rule (and the
   min-width:1300px override that used to sit further down this file -
   removed, see below). That combination silently distorted every hero
   photo above 768px wide: this <img> is a flex child of .d-flex, whose
   default align-items:stretch (align-items:normal computes to stretch
   for a flex item) forces its height to the container's own fixed
   890px/100vh box regardless of "height:auto", while width was pinned
   to 100% independently - two independently-fixed dimensions on a plain
   <img>, whose default object-fit is "fill", so the picture stretched
   instead of cropped. Confirmed live: before this fix, the active slide
   measured a rendered aspect ratio of 0.822 against its real 1.910 (i.e.
   visibly squashed). object-fit:cover fills the same fixed-height box
   without distorting the image - it crops instead, the same effect
   accessbydesign.uk's own header image gets a different way (a fixed
   width/height pair matching its own pre-cropped ratio, inside an
   overflow-hidden wrapper). This one rule now covers every width from
   mobile up, so the old 1300px (nee 768px) breakpoint override is gone
   too - confirmed live afterwards at 375, 1200 and 1366px that the
   image fills its box cleanly with no stretching at any of them. */
#carouselslideshow .d-flex img{
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	object-position: center;
}
/* 1.21: the thumbs-up boy slide - he stands right of centre (face at
   ~62-84% across), and the centre crop cut him out on phones and tablets
   (a phone shows only ~22% of the photo's width). Pan this one photo to
   80% across; desktop framing is barely affected. Keyed to the file name,
   so it does nothing if the photo is replaced. */
#carouselslideshow .d-flex img[src*="GettyImages-184990018"]{
	object-position: 80% center;
}
#carouselslideshow .carousel-inner{
	 height:890px;

}

.carousel-caption.carouselwithbg {
    background: rgba(108, 42, 103, 0.8) !important; /* #6C2A67 at 80% */
    color: #ffffff;
    text-align: left !important;
    position: absolute;
    left: calc(5% + 40px) !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: auto;
    max-width: 650px !important;
    padding: 24px 32px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.carousel-caption.carouselwithbg * {
    color: #ffffff;
    text-align: left !important;
    text-shadow: none;
}

@media (max-width: 768px) {
    .carousel-caption.carouselwithbg {
        left: 16px !important;
        right: 16px !important;
        max-width: none !important;
        padding: 16px 20px;
    }
}
/* 1.2 FIX: .carousel-item/.d-flex had no height of their own, so they
   stretched to match the slide <img>'s min-height:100vh - i.e. to the
   browser window's height, not to the 890px visible/clipped area above.
   .carousel-caption's "bottom:16%" is a percentage of that taller,
   partly-invisible box, so on any window taller than ~890px (an
   ordinary large monitor, not just a toolbar-enlarged view) the caption
   text is pushed down past the 890px cut-off and clipped - worse still
   under the accessibility toolbar's Large/Extra Large Text, where the
   caption itself also grows taller. Pinning these to the same fixed
   890px the visible area actually uses fixes the percentage's baseline. */
#carouselslideshow .d-flex,
#carouselslideshow .carousel-item{
	height:890px;
}
.containdertestimonials{
	min-height: 530px;
	background-size: cover;
	margin-top: 60px!important;
	background: #000;
	color: #fff!important;
}
.containdertestimonials::after {
  background: rgba(0,0,0,0.7);
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.containdertestimonials .gutentor-block-header{
	margin-top: 100px;
}
.containdertestimonials .gutentor-title{
	margin: 0 0 0 0;
  color: #fff;
  font-family: 'Poppins',sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
}


/* 1.5 FIX (revised 1.7): line-height:0.5 on a 45px heading - less than
   half the height its own text needs - is the same self-overlapping-
   heading bug already fixed elsewhere in this file (see the shared-
   heading-class fix further down) for a *different* selector; this one
   (.containdertestimonials h2.gutentor-single-item-title, the "How
   we're making a difference" stats heading) was never covered by that
   fix. 1.15 (the value used successfully elsewhere in this file)
   reduced the overlap but didn't fully remove it here: measured live
   with Range.getClientRects() on the actual text (not just the
   computed line-height number, which can't show whether two line boxes
   touch) - at 45px/weight 600 in this font, each line's rendered glyph
   box is 63px tall, but 1.15 only spaces consecutive lines 51.75px
   apart, an 11px genuine overlap whenever this heading wraps to 2+
   lines (which it only does below a certain container width - that's
   why this wasn't visible at every width). 1.4 is the exact break-even
   point (0px gap); used 1.45 for a small safety margin. Confirmed live
   at 375px (3 lines) and 832px (2 lines): a clean 2.25px gap between
   every line, no overlap. */
.containdertestimonials h2.gutentor-single-item-title{
	color: #fff;
  font-family: 'Poppins',sans-serif;
  text-align: center;
  font-size: 45px;
  margin: 25px 0 20px 0;
  padding: 0 0 60px 0;
  font-weight: 600;
  line-height: 1.45;
}
.containdertestimonials .container{
	position: relative;
	/* 1.13 FIX: was 9999 - tied with the fixed <header>, and being later
	   in the page it won the tie, so the stats section drew over the
	   open mobile menu when scrolled to. Only needs to clear its own
	   dark ::after overlay. */
	z-index: 2;
	
}
#gmac2d64f .gutentor-element-counter .gutentor-counter-number {
  color: #fff;
  font-family: 'poppis',sans-serif;
  font-size: 45px;
  font-weight: 900;
}
#gmac2d64f .gutentor-element-counter .gutentor-counter-number {
  color: #fff;
  font-family: 'poppis',sans-serif;
  font-size: 45px;
  font-weight: 900;
}

#section-1d1ce8d7-0905-4c0c-b5d5-fa3e7c4d79f7{
	background: none;
}

.testimonialcontent{
	background: url("images/quote.png") no-repeat top left;
	font-size: 1.6em;
	line-height: 1.6em;
	font-weight: 300;
	font-family: poppins;
	padding: 0 0 0 80px;
	margin: 160px 0 0 0;
}
#carouseltestimonials .carousel-inner,
#carouseltestimonials .carousel-item{
	height:400px;
}
.carousel-indicators {
    text-align: left;
    float: left;
    left:0 !important;
    right: inherit;
	margin-left: 80px;
	margin-top: 80px;
}

#carouselslideshow .carousel-inner::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: linear-gradient(rgba(0, 0, 0, 0.8) 5%, transparent 30%, rgba(255, 255, 255, 0) 100%);
    top: 0;
    left: 0;
}

#carouselslideshow::after{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(0deg,rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 90%);
  top: 0;
  left: 0;
}

.carousel-control-next, .carousel-control-prev{
	width:50px;
	height: 50px;
	top: 45%;
	background: rgba(109,41,103,0.7);
	border-radius: 5px;
}
.carousel-control-next{
	right: 2%;
}
.carousel-control-prev{
    
	left: 2%;
}
#carouselslideshow .carousel-caption{
	display: block;	
	left: 0;
	right: 0;
	bottom: 16%;
	text-align: left;
	z-index: 10;
}
#carouselslideshow .carousel-caption .btn-primary{
	background: #006C67!important;
	text-align: center!important;
}
#carouselslideshow .carousel-caption h2{
	font-size: 3.5em;
	color: #fff;
	margin-bottom: 30px;
	line-height: 1.1em;
}
#carouselslideshow .carousel-caption p{
	float: left;
	border-radius: 3px;
	font-size: 1.4em;
	line-height: 1.8em;
	clear: both;
	padding: 7px 0;
	margin-bottom: 25px;
}

#carouselslideshow .carousel-caption a{
	margin-top: 30px;
}
/* 1.3 FIX: pause/stop control for the auto-advancing carousel (WCAG 2.2.2) -
   see includes/elements/sub.slideshow.php and includes/js/script.js */
.carousel-control-pause{
	position: absolute;
	z-index: 15;
	bottom: 16px;
	right: 2%;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(109,41,103,0.7);
	border: none;
	border-radius: 5px;
	color: #fff;
	font-size: 1.3em;
	opacity: 1;
}
.carousel-control-pause:hover,
.carousel-control-pause:focus{
	background: rgba(109,41,103,0.95);
}
.carousel-control-pause:focus-visible{
	outline: 2px solid #fff;
	outline-offset: 2px;
}
/* 1.22: the hero's prev/next buttons had no visible keyboard focus at
   all (Bootstrap sets outline:0 on them) - same ring as the pause button */
#carouselslideshow .carousel-control-prev:focus-visible,
#carouselslideshow .carousel-control-next:focus-visible{
	outline: 2px solid #fff;
	outline-offset: 2px;
	opacity: 1;
}
/* 1.16 FIX: from 768px up the hero caption is a Bootstrap .container, so
   just above each container breakpoint (768, 992, 1200, 1400px) its left
   edge sits closer to the window edge than the prev/next arrows' inner
   edge (2% + 50px), and the heading ran under the arrows. Padding needed
   on each side = arrow edge + 12px gap - the container's own offset:
   62px + container/2 - 0.48 x width (padding % is of the slide's width).
   max() keeps the normal 12px once the container has moved clear, so
   wide desktop screens are unchanged. The .carouselwithbg caption
   variant has its own positioning (already clear of the arrows) and is
   left alone. */
@media only all and (min-width: 768px){
	#carouselslideshow .carousel-caption:not(.carouselwithbg){ padding-left: max(12px, calc(422px - 48%)); padding-right: max(12px, calc(422px - 48%)); }
}
@media only all and (min-width: 992px){
	#carouselslideshow .carousel-caption:not(.carouselwithbg){ padding-left: max(12px, calc(542px - 48%)); padding-right: max(12px, calc(542px - 48%)); }
}
@media only all and (min-width: 1200px){
	#carouselslideshow .carousel-caption:not(.carouselwithbg){ padding-left: max(12px, calc(632px - 48%)); padding-right: max(12px, calc(632px - 48%)); }
}
@media only all and (min-width: 1400px){
	#carouselslideshow .carousel-caption:not(.carouselwithbg){ padding-left: max(12px, calc(722px - 48%)); padding-right: max(12px, calc(722px - 48%)); }
}
@media only all and (max-width: 767px){
	.carousel-control-pause{ bottom: 10px; right: 4%; width: 38px; height: 38px; font-size: 1.1em; }
	/* 1.15 FIX: on phones the hero heading (3.5em = 56px) wrapped to four
	   lines and rose up under the header icons and Donate button, and
	   the paragraph ran underneath the prev/next arrows (which sit at 45%
	   down the slide). Smaller caption text keeps it clear of the header,
	   and the arrows move into a row with the pause button at the bottom
	   right, same 38px size. */
	#carouselslideshow .carousel-caption h2{ font-size: 2.2em; margin-bottom: 15px; }
	#carouselslideshow .carousel-caption p{ font-size: 1.1em; }
	/* 1.21: caption anchored 70px from the bottom (just above the
	   pause/prev/next row, which reaches 48px) instead of 16% up, and a
	   tighter paragraph, so on phones it sits over the lower part of the
	   photo and leaves faces in the upper half clear. */
	#carouselslideshow .carousel-caption{ bottom: 70px; }
	#carouselslideshow .carousel-caption p{ line-height: 1.5; }
	.carousel-control-prev,
	.carousel-control-next{ top: auto; bottom: 10px; left: auto; width: 38px; height: 38px; }
	.carousel-control-next{ right: calc(4% + 46px); }
	.carousel-control-prev{ right: calc(4% + 92px); }

	/* 1.22: phones still showed only the boy's face, with the purple
	   caption box over his mouth and hands. Cause: the slide is 890px
	   tall at every width, so on a 390px phone the 1700x890 photo is
	   blown up to 1700px wide and only ~23% of it shows; the caption box
	   (~425px tall) then covers half of what's left, and the fixed header
	   covers the top 163px. No caption size fits over the photo without
	   covering him - he fills the photo's full height.
	   Phones now stack the slide instead: a dark band behind the header,
	   then the photo at 4:3 (on a 390px phone ~68% of the photo's width,
	   so the background and the whole boy with his thumbs up show), then
	   the caption on a solid purple panel below it - nothing sits on the
	   photo. Caption text is smaller (heading 35px -> 24px, paragraph
	   17.6px -> 15px) and the button is a normal size. Applies to all
	   three slides; tablets and desktop are unchanged. */
	#carouselslideshow,
	#carouselslideshow .carousel-inner,
	#carouselslideshow .carousel-item,
	#carouselslideshow .d-flex{ height: auto; }
	#carouselslideshow{ background: #6C2A67; }
	/* the bottom-up dark gradient was for text over the photo - not needed now */
	#carouselslideshow::after{ display: none; }
	/* the fixed header overlaps the slide by 131px at every phone width
	   (see the 1.22 phone header block at the end of this file) */
	#carouselslideshow .d-flex{ flex-direction: column; padding-top: 131px; background: #231f20; }
	#carouselslideshow .carousel-inner::after{ height: 131px; }
	#carouselslideshow .d-flex img{ height: auto; aspect-ratio: 4 / 3; }
	#carouselslideshow .carousel-caption,
	#carouselslideshow .carousel-caption.carouselwithbg{
		position: static;
		z-index: auto; /* a flex item keeps z-index even when static - 10 would cover the controls */
		left: auto !important;
		right: auto !important;
		width: 100%;
		max-width: none !important;
		margin: 0 !important;
		padding: 16px 16px 56px; /* bottom room for the pause/prev/next row (32px + 10px from the bottom + 14px gap) */
		background: #6C2A67 !important;
		border-radius: 0;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	#carouselslideshow .carousel-caption h2{ font-size: 1.5em; margin-bottom: 8px; }
	#carouselslideshow .carousel-caption p{ font-size: 0.95em; margin-bottom: 10px; padding: 0; }
	#carouselslideshow .carousel-caption a{ margin: 4px 0 0; font-size: 1rem; padding: 8px 18px; }
	/* the controls now sit on the purple panel, where their own purple
	   background disappeared - darker fill and a white edge */
	#carouselslideshow .carousel-control-prev,
	#carouselslideshow .carousel-control-next,
	#carouselslideshow .carousel-control-pause{ background: #3d1739; border: 2px solid #fff; opacity: 1; }
	/* 1.22 (follow-up): big purple gap under the controls - the outer
	   #slideshow_main and .slider_image_wrapper (purple) were still fixed
	   at 890px, so ~154px of empty purple showed below the slide on a
	   390px phone. They now follow the slide's own height. The button's
	   30px bottom margin also went (margin above), and the controls are
	   smaller: 38px -> 32px (still above the 24px minimum target). */
	#slideshow_main,
	#slideshow_main .slider_image_wrapper{ height: auto; }
	#slideshow_main .slider_image_wrapper{ float: none; }
	#carouselslideshow .carousel-control-prev,
	#carouselslideshow .carousel-control-next,
	#carouselslideshow .carousel-control-pause{ width: 32px; height: 32px; bottom: 10px; font-size: 0.95em; }
	#carouselslideshow .carousel-control-next{ right: calc(4% + 40px); }
	#carouselslideshow .carousel-control-prev{ right: calc(4% + 80px); }
	#carouselslideshow .carousel-control-prev-icon,
	#carouselslideshow .carousel-control-next-icon{ width: 1.1rem; height: 1.1rem; }
}
.logoslideshow{ 
	position: absolute;
	bottom: -220px;
	right: 10%;
	z-index: 999;
}
/************ Colouredareas ***************/
.colouredareas .col-sm-4{
	padding: 0;
	margin: 0 2% 0;
	color: #000;
	width:32%;
	position: relative;
	overflow: hidden;
	min-height: 320px;
}
.colouredareas .mb-3{
	margin-bottom: 2%!important;
	
}
.colouredareas .col-sm-4:first-child{
	margin: 0;
}
.colouredareas .col-sm-4:last-child{
	margin: 0;
}
.colouredareas .col-sm-4 h2{
	color: #6C2A67;
	font-size: 1.6em;
	font-weight: 500;
	margin-bottom: 10px;
}
.colouredareas p{
	font-size: 19px;
	line-height: 1.5em;
	color: #545454;
}

.child-main-text-wrapper{
	position: relative;
	font-size: 1.1em;
	color: #000;
	z-index: 999;
}
.colouredareas .col-sm-4 .btn-image .child-main-text-wrapper h3{
	font-size: 2.2em;
	line-height: 1em;
	color: #fff;
	margin-bottom: 10px;
}
.btn-border{
	border: 1px solid #fff;
	color: #fff;
	background: none;
	padding: 7px 30px;
	position: relative;
	font-size: 1em;
	text-transform: uppercase;
}
/************giuterberg block fixes***/

.gutentor-image-thumb img,
.gtf-image img{
	max-width:100%;
	height:auto;
}
.gutentor-title{
	font-family:Poppins;
	font-weight:700;
	color:#1d2650;	
}

.gutentor-section-title.enable-title-design.text-center .gutentor-title::before{
	background:#bf8941!important;
}
.section-ge2dad1 .gutentor-block-button:focus,
.gutentor-block-button:focus{
	background: #6C2A67!important;
}
.section-ge2dad1 .gutentor-block-button:focus-visible,
.gutentor-block-button:focus-visible{
	outline: 2px solid #000!important;
	border: 2px solid #fff;
}

@media (min-width: 1350px) {
  .grid-container {
    max-width: 1320px!important;
  }
}
.gutentor-single-item-desc{
	line-height: 1.8em;
}
.wp-block-heading{
	margin-top: 15px;	
}
#section-g3222c1 h3.gutentor-text,
#section-g-a2gsn2y h3.gutentor-text,
#section-g-tnky8n4 h3.gutentor-text{
	color: #2d2d43;
  font-family: 'Poppins',sans-serif;
  font-size: 20px;
  font-weight: 600;
	margin-top: 20px;
}
 .section-g0aa916.gutentor-element-advanced-text .gutentor-text {
    margin: 0 0 20px 0;
    font-size: 16px;
  }
 .section-g-s4wz16z.gutentor-element-advanced-text .gutentor-text {
    margin: 0 0 50px 0;
    font-size: 16px;
	 color: #2d2d43;
  font-family: 'Poppins',sans-serif;
  }
.teamsection .gutentor-image-thumb img{
	border-radius: 100%;
}
.teamsection .gutentor-single-item{
	padding: 15px!important;
}
.teamsection.gutentor-team .gutentor-single-item-desc{
	background: rgba(80,26,104,0.8);
	color: #FFFFFF;
	padding: 30px;
	position: absolute;
	top: -5%;
	height: 105%;
	width: 100%;
	opacity: 0;
	text-align: left;
}
.gutentor-template-wrapper{
	position: relative;
}
.teamsection.gutentor-team .gutentor-template-wrapper:hover .gutentor-single-item-desc,
.teamsection.gutentor-team .gutentor-template-wrapper:focus .gutentor-single-item-desc{
	opacity:1;
}
.nopadding .grid-container{
padding-right: 0!important;
  padding-left: 0!important;
}
.nopadding .grid-container .grid-row{
	margin-right: 0!important;
  margin-left: 0!important;
}
.nopadding .grid-container .grid-row .gutentor-grid-column{
	padding-left:.0!important; 
}
.videoat100 iframe{
	width: 100%!important;
	height: 400px !important;
}
.section-gp191d6c.gutentor-enabled-width.gutentor-post-module-p6 .gutentor-post:not(.gutentor-post-featured):not(.gutentor-post-no-thumb) .gutentor-post-image-box{
	width: auto!important;
}
.wp-block-gutentor-call-to-action.has-gutentor-overlay{
	background-color: #000;
}
.gutentor-element-advanced-text .gutentor-text a{
	color: #6C2A67!important;
}
/****** Header *******/
header{
	width:100%;
	float:left;
	margin: 0 auto ;
	position:fixed;
	z-index:9999;
	background:none;
}

header .logo {
	float:left;
	z-index:999999;
	position:relative;
	text-align: left;
	margin:0 0;
    text-indent: -999999em;
}

.header-top{
	float: left;
	width: 100%;
	position: relative;
	z-index: 99999;
	padding: 25px 0 0;
	background:#000000;
    background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.0001));
}
.header-right{
	float: right;
	width: auto;
	position: relative;
	padding-left: 60px;
}
.header-top .tel{
	font-size: 1em;
	float: left;
	padding: 0 0 0;
    margin: 0 0 0 0;
	margin-left: 30px;
}
.header-top .tel i{
	font-size: 0.8em;
	margin-right: 2px;
	position: relative;
	top: -4px;
}
.header-top .tel 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 #000;
	border: 2px solid #fff;
}
.headerbutton1{
	float:right;
	min-width:70px;
	background:#006C67;
	text-align:center;
	color:#fff;
	padding:10px 15px;
	margin-left:20px;
	text-decoration:none;
	font-family:'arial';
	font-size:1em;
	border:none;
	border-radius: 5px;
}
.cart-customlocation,
.myaccountlink{
	width: auto;
	float: left;
	margin-left: 25px;
}

/* 1.4 FIX: below Max Mega Menu's own 768px mobile breakpoint (the same
   768px this theme's other mobile rules already use), .header-right's
   floated icon row runs out of horizontal room and .headerbutton1 (the
   "Donate Here" button) wraps onto its own line - but the plugin's own
   mobile toggle (.mega-menu-toggle, positioned by its own generated CSS,
   not this stylesheet) sits right where that wrapped line lands. Measured
   live with getBoundingClientRect() at both 767px and 760px: the toggle
   occupies y:40-80px, the wrapped button lands at y:69-107px - an 11px
   genuine overlap confirmed both before and after this fix (not just a
   visual guess). Pushing the wrapped button down clears the toggle with
   room to spare at both widths, confirmed live. */
@media only all and (max-width: 767px){
	.headerbutton1{
		clear: both;
		/* 1.15: was 40px, which was only needed to drop the button below the
		   menu toggle. The icon row now reserves the toggle's width itself
		   (.header-right padding-right below), so 12px is enough; nowrap
		   stops "Thank You!" wrapping onto a second line at 375px. */
		margin-top: 12px;
		white-space: nowrap;
	}
	/* 1.15 FIX: on phones the icon row wrapped straight underneath Max
	   Mega Menu's toggle - at 375px the basket icon sat entirely under it
	   (elementFromPoint at its centre hit the toggle, so it couldn't be
	   tapped at all). Reserve the toggle's width on the right. */
	.header-right{
		padding-right: 62px;
	}
	/* 1.15 FIX: once scrolled, the white .navbar.scrolled bar is only 70px
	   tall, but the wrapped icon row is ~170px on phones, so the account
	   icon (white on white) and the Donate button hung below the bar over
	   page text - and the invisible header box intercepted taps on links
	   underneath it. Desktop already loses this row under the white bar
	   on scroll; this does the same on mobile. display:none (not
	   visibility) so the header box collapses and stops blocking taps.
	   Class is set in footer.php next to the existing .scrolled toggle. */
	header.header-scrolled .header-top{
		display: none;
	}
}

/*********Nav *********/

.navbar {
      position: absolute;
      top: 0px;
      width: 100%;
	  padding-top: 25px;
    }
.navbar-nav{
	float:right;
	background: #652681;
	padding: 10px;
	border-radius: 5px;
}
.navbar.scrolled {
  background-color: rgba(255,255,255,0.9)!important;
  transition: background-color 200ms linear;
	z-index: 999999;
	padding-top: 0;
}

.navbar-toggler{
	border:none;
	/* 1.2 FIX: this is Bootstrap's own navbar-collapse hamburger button,
	but its target (#navbarNav) doesn't exist anywhere in the theme - the
	Max Mega Menu plugin's own toggle (.mega-menu-toggle) handles the
	real mobile menu instead. Because this button's visibility follows
	Bootstrap's default navbar-expand-lg breakpoint (992px) while the
	plugin switches to its mobile menu at 768px, this dead, non-clickable
	button was appearing on its own in the header between roughly
	769-991px wide (confirmed live). Hidden outright since nothing
	currently wires it up to anything. */
	display:none!important;
}
/* 1.3 FIX: Max Mega Menu's own mobile toggle (.mega-menu-toggle, the
   button that actually opens the off-canvas menu) was completely
   unclickable at every narrow width tested (375px and 767px) - confirmed
   live with elementFromPoint() across its whole hit area: every point
   resolved to .header-right (part of .header-top) instead, because
   .header-top is position:relative with z-index:99999 while the toggle
   only has z-index:1, so header-top's stacking context sits above the
   toggle everywhere they overlap, even though header-top has no visible
   background there. A direct .click() call opened the menu fine, proving
   the plugin's own click handler works - it's purely a stacking-order
   problem blocking real mouse/touch clicks from ever reaching the
   button. Raised the toggle above header-top so it can receive clicks;
   verified live afterwards with both elementFromPoint() and an actual
   simulated click, which now opens the menu correctly. */
.mega-menu-toggle{
	z-index:100000!important;
}
.navbar-expand-lg .navbar-nav .nav-link{
	color:#fff;
	padding:10px 15px;
	font-family:Poppins;
	font-size: 1.1em;
}
.navbar.scrolled .navbar-nav .nav-link{
	color:#1d2650!important;
}
.navbar-expand-md .navbar-nav .active .nav-link{ 
	border-bottom:2px solid #bf8941
}
.navbar.scrolled .navbar-brand img{
	height:52px;
}
/********** homepage**************/
.container-full{
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	position: relative;
}
.imagerighthome{
	bottom:-50px;
	position:relative;
	left:-15.5%;
}
.content_image{
	float:right;
	width:auto;
	margin:0 0 20px 15px;
	padding:0;
	border-radius: 0;
}
.imagelefthome{
	float: right;
	position:relative;
	top:-31px;
	left:-11%;
}
.threecolunsimg{
	max-width:100%;
	height:auto;
	margin-bottom:20px;
}
.container-xxl.containerhome{
	margin-top:40px;
	margin-bottom:60px;
	--bs-gutter-x: 0;
}
.maintext{
	width:100%;
	padding:60px 30px 55px 0;
	margin:30px 0 0;
	z-index:99;
	position:relative;
	float:left;
}
.containerdonatehone{
	min-height: 570px;
	background-size: cover;
	margin: 100px 0 60px;
}

.maintext h2{
	font-size:3.3em;
	color: #6c2a67;
	font-weight: 700;
}
.preheading{
	color:#000;
	font-size:1.2em;
	letter-spacing: 0.1em; 
	margin-bottom: 30px;
	font-weight: 600;
}
.container-xxl.containerhome .maintext{
	padding:50px 30px 40px 30px;
	top:10px;
	font-size:110%;
	}
.container-fluid.bg-light .maintext{
	font-size:110%;
}

.maintextright{
	left:-15%;
	position:relative;
	top:10px;
	padding:50px 0 80px 30px;
}
.maintext p{
	font-family:Poppins;
	font-size:1.2em;
	line-height:1.5em;
	color:#545454;
}
.col-sm-4 img{
	max-width:100%;
	height:auto;
	border-radius: 20px;
}
.main_content,#maincontent{
	float: left;
	width: 100%;
}
.main_content p{
	font-family:Poppins;
	font-size:1.2em;
	line-height:1.5em;
	color:#545454;
}
.bg-img{
	background-size: cover;
	background-repeat:no-repeat;
	background-position:center;
}
/********** tribe events*************/
.tribe-events header.tribe-events-header,
.tribe-events header.tribe-events-calendar-month__header{
	position: relative!important;
	float: none!important;
	width: auto!important;
}
.tribe-events-event-image img {
  max-width: 100%;
  height: auto;
}

/********** portfolio page ************/
.content-style{
  font-family: Poppins;
  font-size: 1.1em;
  line-height: 1.5em;
  color: #545454;
 padding-top: 45px;
}
.content-left{
	padding-right: 3%;
	padding-left: 4%;
}
.content-right{
	padding-left: 2%;
	padding-right: 5%;
}
.content-center{
	padding-right: 5%;
	padding-left: 5%;
}
.bottomimg{
	padding-top: 20px;
}
.portf{
	margin-top: 50px;
	margin-bottom: 50px;
	
}
.portf2{
	margin-top: 20px;
	margin-bottom: 20px;
	
}
.portf div{
	overlay:hidden;
}
.portf h2,
.reviewport h2{
	
	font-size:2.4em;

}
.reviewport{
	padding-left: 15%;
	padding-right: 15%;
	padding-bottom: 80px;
	font-family: Poppins;
  font-size: 1.2em;
  line-height: 1.5em;
  color: #545454;
 padding-top: 45px;
}
.reviewport h2{
	
	font-size:3.4em;
	font-weight: bold;

}

.portfimg{
	min-width: 100%;
	float: left;
}
.portf.bg-light{
	padding-bottom: 40px!important;
	padding-top: 40px!important;
}
.portfimgleft{
	padding-right: 2%;
	overflow: hidden;
}
.portfimgright{
	padding-left: 2%;
	overflow: hidden;
}
.contentportf{
	padding: 50px 0 80px;
	font-family: Poppins;
	font-size: 1.3em;
	line-height: 1.5em;
	color: #545454;
}
.fullproftimg{
	float: left;
	width: 100%;
	position: relative;
}
.fullproftimg::after {
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: rgba(20, 29, 71, .5);
            top: 0;
            left: 0;
            display: block;
            content: "";
 }
.textoverproft{
	position: absolute;
	padding: 150px 0;
	font-family: Playfair Display;
	font-size: 3em;
	line-height: 1.5em;
	color: #fff;
	text-align: center;
	width: 100%;
}

/********  social Icons *****************/
.ul_social
{
	float:right;
	list-style:none;
	margin:5px 20px 0 0 ;
	padding:0 0 0 40px;
	width:auto;
}
footer .ul_social{
	float:left;
	width:100%;
	margin:5px 0 10px 0;
}
.ul_social li{
	float:left; 
	height:32px;
    width: auto;
	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{
	/* 1.3 FIX: was a bright green (#99CC00) that didn't match anything
	   else in the palette - changed to a light grey per Clive's request,
	   still well clear of AA contrast against the purple footer/header
	   backgrounds these icons sit on. */
	color: #cccccc;
}
.ul_social li a:focus-visible{
	outline: 2px solid #99CC00!important;
	border: 2px solid #fff;
	padding:0;			
}

/****************** contact ***********/
.contactushomemainwrapper{
	float:left;
	width:100%;
	position:relative;
	z-index: 999;
	padding:80px 0;
	margin:30px 0 0;
	text-align:center;
	background:#1FB2E7;
}
.contactushomemain{
	display:block;
	width:1100px;
	margin:0 auto;
}
.contactushome{
	float:left;
	width:35%;
	padding:0;
	margin:0 5% 0 0;
	text-align:left;
}
.contactushomemain h3{
	color:#fff;
	float:left;
	width:100%;
	font-size:4.5em;
	font-weight:800;
	line-height:1.4em;
	text-align:center;
}
.bluewriting{
	color:#1FB2E7;
}
.contactushome p{
	font-family:'Poppins', Arial;
	font-weight:300;
	text-transform:uppercase;
	font-size:1.6em;
	line-height:1.3em;
	color:#fff;
	margin-bottom:40px;
}
.contactushome-textunder{
	float:left;
	width:100%;
	font-family:'Poppins', Arial;
	font-weight:400;
	font-size:1.3em;
	text-align:left;
	color:#fff;

}
.contactushomeright{
	float:right;
	width:55%;
}

.contactleft{
	float:left;
	width:38%;
	margin-right:2%;
}
.contactright{
	float:right;
	width:60%;
}
/******* child ************/
.child_pages{
	float:left;
	width:100%;
	text-align:left;
}
.child_pages h3{
	font-size:1.5em;
}
.formwhite{
	color:#fff!important;	
}

.gtranslate_wrapper{
	float:right;
	margin-top:5px
}
.gtranslate_wrapper .gt_switcher a img{
	top:-3px;
	position:relative;
}
/*********************/			
.header_image_wrapper,
.header_image_wrapper_events{
	float:left;
	position:relative;
	height:550px;
	width:100%;
	margin:0 auto;
	padding:0;
	background: #6C2A67;
	clip-path: polygon(0px 0px, 100% 0px, 100% 90%, 0px 100%);	
}
.header_image_wrapper_main{
	float:left;
	position:relative;
	height:550px;
	width:100%;
}
/*.header_image_wrapper_main::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: url("images/slide-bg.png") no-repeat top left;
    top: -50px;
    left: 0;	
}*/
.header_image_wrapper_events{
	height: 550px;
}
.header_image_wrapper2{
	float:left;
	position:relative;
	height:550px;
	width:100%;
	margin:0 auto;
	padding:0;		
}

.header_image_wrapper_events .header_image_wrapper2{
	height:500px;
}
/* 1.11 FIX: inner-page header image not filling its banner. The
   banner box (.header_image_wrapper/2) is a fixed 550px tall with a
   purple background, but the image inside it had no sizing of its own
   below 1500px (so it sat at its raw 1700x550, cropped from the left)
   and only width:100% at 1500px+ (so its height tracked the window
   width: at e.g. 1536px it is only ~497px tall, leaving ~53px of the
   purple background showing as a slanted band under the photo - the
   exact gap in Clive's About-page screenshot). Same fix as the
   homepage hero in 1.5: fill the box and crop with object-fit, so
   the photo always covers the whole banner at every width, cropped
   from the centre. Deliberately a plain .header_image selector (same
   specificity as the existing 767px rule's height:250px) so that
   later mobile rule still wins - a more specific selector here would
   silently override it (playbook Section 15, in reverse). */
.header_image{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
.header_image_wrapper2::after,
.header_image_wrapper3::after{
   content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: linear-gradient(rgba(0, 0, 0, 0.70) 15%, transparent 50%, rgba(255, 255, 255, 0) 100%);
    top: 0;
    left: 0;
}

.headerimagetext{
	position:absolute;
	z-index:9999;;
	bottom:15%;
	left:0;
	width:100%;
	text-align:left; 
	color:#fff;
	font-size:2.2em;
	font-family: "Poppins";
	font-weight:600;
	line-height:1.2em;
}
		
#crumb{
	float:left;
	width:100%;
	text-align:left;
	margin:0 auto 5px;
	z-index:100;
	font-size:0.9em;
    height: auto;
	padding: 5px 0;
	}

#crumb a{
	color:#40472E;
}
#crumb a:focus-visible{	
	outline:2px solid #000999;
	border: 2px solid #fff;
}
	


/********** More info text ************/
#moreinfoprod{
	    float:left;
		width:100%;
		text-transform:uppercase;
		color:#545454;
		line-height:1.1em;
		font-size:1.1em;
		padding:10px 0 10px 0;
		cursor:pointer;
		text-decoration:none;
		font-weight:bold;
		
		}
#moreinfoprod#infohide{
	background:none;
}
#infoshow{	
	display:block;
	font-size:1.1em;
	color:#769aa2;
	font-family:"Poppins";
	cursor:pointer; 
}
#infohide{
	display:none;
	font-size:1.1em;
	color:#769aa2;
	font-family:"Poppins";
	cursor:pointer; 
}
#moreinfoprodtext{display:none;margin-top:15px}
#moreinfoprodtext.selected{display:block}

/***************** logos footer************/
.containerlogos{
	padding: 130px 0;	
}
.containerlogos h2{
	font-size: 2.5em;
	margin-bottom: 60px;
	font-weight:500;
}
.containerlogos .col-3{
	padding: 0 4%;
	vertical-align: middle;
	min-height: 115px;
} 
.containerlogos img{
	max-width: 100%;
	height: auto;
}

/****** footer ********/
footer{
		float:left;
		width:100%;
		color:#fff;
		bottom:0;
		height:auto;
		background: #6C2A67;
		position:relative; 
		font-size:0.95em;
	}
	.footlogo{
		float:left;
		clear:both;
		width:100%;
		margin:0 0 15px;
		padding-left: 40px;
	}
	.footermsg{
		padding-left: 40px;
		margin-bottom: 30px;
	}

	  footer a{
		  color:#fff;
	  }
	  footer a:hover{
		  color:#ccc;
	  }
 	
	   footer .tel,
	   footer .email,
	   footer .address{
			float:left;
			width:90%;
			padding:0 0 0 ;
			margin:5px 0;
			
		}
		footer .tel i,
		footer .email i,
	   footer .address i{
			margin-right: 8px;
			font-size: 1.2em;
		}
	   footer .tel a,
	   footer .email a{
		   text-decoration:none;
	   }
	   /* 1.5 FIX: an email address is one unbroken "word" (no spaces),
	      and this link had no overflow-wrap/word-break of its own, so at
	      column widths around 768-850px (col-md-3 is narrowest right at
	      768px, before it widens again as the viewport grows) it simply
	      overflowed its column's padded content box instead of wrapping
	      - confirmed live at 768px: the link measured 190px wide against
	      a ~156px usable column width, encroaching into the next
	      column's padding. Same failure pattern as Section 18 of the
	      playbook ("a long word doesn't fit its column"), just on a
	      footer link instead of a heading. */
	   footer .email a{
		   overflow-wrap: break-word;
		   word-break: break-word;
	   }
	   footer .tel a:hover,footer .tel a:focus,
	   footer .email a:hover,footer .email a:focus,
 	   footer a:focus{
		   text-decoration:none;
		   color: #99CC00;
	   }
	   footer .tel a:focus-visible,
	   footer .email a:focus-visible,
       footer a:focus-visible{
		   outline: 2px solid #99CC00;
		   border: 2px solid #fff;
	   }
		footer .address span{
			padding-left: 28px;
			float: left;
		}

footer h3 {
	color: #fff;
	font-family:'Poppins', Arial;
	margin-top:0;
	font-size:1.2em;
	font-weight:600;
}
footer h3 a{
	text-decoration:none;
	color: #fff;
}
ul.legal{
	float:left;
	width:auto;
	padding:0 0 0 0;
	margin:0;
	list-style:none;
}
ul.legal li{
	float:right;
	width:100%;
	margin:0;
	padding:6px 0 6px;
	list-style:none;
	line-height:1.2em;
	font-size:1em;
	font-family:"Poppins";
}
ul.legal li a{
	padding:0;
	text-decoration:none;
	color: #fff;
}
ul.legal li a:hover,ul.legal li a:focus{
  color:#99CC00;
	text-decoration: underline
}
ul.legal li a:focus-visible{
	outline: 2px solid #99CC00;
	border: 2px solid #fff;
}

/*************** 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: "Poppins",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: "Poppins",Arial;
}
.largercatblocks .grid-container{
	width:1230px!important;	
	max-width: 1230px!important;	
}
/*********** 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{
	width:100%;
	float:left;
	margin:0 0 10px;
	padding:0 0 10px;
}
.childhomefullintro{
	width:100%;
	float:left;
	margin:0 0 5px;
	padding:0 0 0;
	background:#DADBDF;
}
.child-row-home{
	float:left;
	width:100%;
	padding:50px 0 20px;
	margin:0 auto 20px;
	position:relative;
	border-bottom:1px solid #ccc;
}
.child-row-home #prev{
	position:absolute;
	background:url(images/arrow-left.png) no-repeat 0 0;
	left:-40px;
	top:40%;
	width:29px;
	height:37px;
}
.child-row-home #next{
	position:absolute;
	background:url(images/arrow-right.png) no-repeat 0 0;
	right:-40px;
	top:40%;
	width:29px;
	height:37px;
}
.child{
    float: left;
    height: auto;
    margin: 0 0 10px;
    padding:0 0;
    position: relative;
    width: 100%;
	min-height:150px;
	height:auto;
}
#childrow-2 .child{
	width:48%;
	margin-left:2%;
}
#childrow-2 .child:first-child{
	margin-left:0;
}
#childmainwrapper,
#childmainwrapper2{
	float:left;
	width:100%;
	margin:0;
	padding:0;
	height:400px;
	overflow:hidden;
}
#child-homewrapper{
	float:left;
	width:100%;
	margin:20px 0 0;
	padding:0 0 0;
}
.child-homewrapper{
	display:block;
	margin:0 auto;
	width:1230px;
}
#child-homewrapper .intro{
	font-size:1.3em;
	text-align:center;
	line-height:1.7em;
	margin:0 0 15px;
}
.child-home{
    float: left;
    height: auto;
    position: relative;
	overflow:hidden;
}
.child_image_home{
	overflow:hidden!important;
	float: left!important;
     width:100%!important;
}
.child-home h3{
  float: left;
  width: 80%;
  color:#fff;
  padding: 15px 0;
  margin: 3px 10% 5px;
  font-weight: bold;
  font-size: 1.2em;
  text-transform: uppercase;
  text-align: center;
  position: absolute;
  z-index: 2;
  bottom: 10%;
  left: 0;
  transform: translateY(-50%);
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.child-home a{
	text-decoration:none;
}
.child-home a h3
{
	text-align:center;
	text-decoration:none;
}
.child-home:first-child{
	padding-left:0;
}
.child-home:last-child{
	padding-right:0;
}
.child_image_home{
	float: left;
	margin: 0 0 0 0;
	padding: 0;
	width: 100%;
	height: auto;
	text-align: center;
	overflow:hidden;
}
.child_image_home::before{
	display: block;
	position: absolute;
	height: 350px;
	width: 100%;
	content: '';
	background: rgba(0, 0, 0, 0.4) ;
}
.child_image_home img{
	float:left;
	width:100%;
}

.child h4{
	width:100%;
	padding:0;
	margin:0 0 5px;
	font-weight:normal;
	color:#fff;
	font-size:1.5em;
	text-align:left;
  	font-family:'Ubuntu';
}
.child h4{
	width:100%;
	padding:0;
	margin:0 0 5px;
	font-weight:normal;
	color:#fff;
	font-size:1.5em;
	text-align:left;
  	font-family:'Poppins';
}
#child_wrapper{
	float:left;
	width:100%;
	margin: 15px 0 0; 
}
.child-main{
    float: left;
    margin:15px 1% 0 0;
    position: relative;
    width: 49.5%;
	height:595px;
	color:#fff;
	line-height:1.4em;
	text-align:left;
	overflow:hidden;
}
#child-main-row4,
#child-main-row5{
	margin-right:0;
	height:290px;
}
#child-main-row1{
	height:400px;
}
#child-main-row2{
	margin-right:0;
	height:400px;
}
.child-main a{
	color:#fff;
	z-index:999;
	padding: 0 0;
	float:left;
	width:100%;
	height:100%;
	position:relative;
	text-decoration:none;
}
.child-main-text{
	color:#fff;
	float:left;
	width:90%;
	padding:0 5%;
	left:0;
	bottom:20px;
	position:absolute;	
	text-align:left;
	font-family:'Poppins';	
}

#child-main-row2 .child-main-text-wrapper,
#child-main-row3 .child-main-text-wrapper,
#child-main-row4 .child-main-text-wrapper,
#child-main-row5 .child-main-text-wrapper{
background-image: linear-gradient(to bottom, rgba(255,0,0,0) 15%, rgba(0,0,0,0.7));
}

.child-main h3{
	float:left;
	width:100%;
	padding:0 0 0 ;
	margin:0 0 10px 0;
	font-size:1.9em;
	text-align:left;
	line-height:1em;
	font-weight:700;
  	font-family:'Poppins';
	color:#fff;
}
.child-main h3 a{
	color:#fff;
	text-decoration:none;
}
.child-main img{
	position:relative;
	z-index:999;
}
.child-main p{
	font-size: 1.3em;
	line-height: 1.3em;
}
.child-mainlink {
	color: #000;
	float:left;
	padding: 12px 35px;
	font-size: 1.1em;
	font-weight: bold;
	margin: 0 auto 15px;
	border-radius:25px;
	text-align:center;
	text-transform: uppercase;
	text-decoration: none;
	background:#f1efef;
}

.child-mainlink span {
	background: #f5db4c;
	float: left;
	height: 10px;
	margin-top: 8px;
	margin-right: 15px;
	width: 50px;
}
/************** Gallery **************/
.gallery_wrapper{
	padding:15px 0 0;
}
.gallery_wrapper h3{
	font-size:1.4em;
	color:#671a1c;
}
.ngg-gallery-thumbnail img {
    margin: 4px 0 4px 5px;
}
.ngg-singlepic {
    background-color: transparent!important;
    padding:0!important;
}
.ngg-slideshow.slick-slider {
  margin: 10px auto 10px !important;
  overflow: visible;
}
#skiplinks a{ 
	position:absolute; 
	left:-10000px;
	color:#000;
	top:auto; 
	width:1px; 
	height:1px; 
	overflow:hidden;
	z-index:9999999;
 } 
  
#skiplinks a:focus{
	position:static;
	width:auto;
	height:auto;
	/* 1.3 FIX: this link sits directly over the hero photo (or whatever's
	   behind it elsewhere) with no background of its own, and its text is
	   #000 - confirmed live that a focused skip link is close to invisible
	   against the dark hero image, only becoming readable once a contrast
	   mode (which recolours the whole page) is switched on. Giving it a
	   solid background makes it readable regardless of what's underneath. */
	background:#fff;
	color:#000;
	padding:8px 16px;
	display:inline-block;
 }
#skiplinks a:focus-visible{
	outline: 2px solid #000;
	border: 2px solid #fff;
}
/*********** Category ***************/
#list_wrapper{
	float:left;
	width:100%;
	margin: 35px 0 0;
	padding:0 ;
}
.list_items{
	float:left;
	width:100%;
	position:relative;
	padding:0 !important;
}
.list_items_team{
	float:left;
	width:84%;
	padding:0 8%!important;
}
.contentteam h1{
	text-align:center;
}
#lists{ 
	float:left;
	width:100%;
	padding-bottom:35px;
}
.item{
	margin-bottom: 50px;
}
.item h2 {
	color: #6C2A67;
	float:left;
	width:100%;
	margin:10px 0;
	text-align: left;
	font-size: 1.3em;
	font-family: Poppins;
	font-weight: 400;
}
.item h2 a{
	color:#6C2A67;
	text-decoration:none
}
.item h2 a:hover,.item h2 a:focus{
	color:#000;
}
.item h2 a:focus-visible{
	outline: 2px solid #000;
	border: 2px solid #fff;
}

.item-title{
	left:0;
	width:100%;
	text-align:left;
	margin:5px 0 5px;
}
.item-title a{
	color:#000;
	font-size:1.1em;
	}
.item_content h2{
	margin:0;
	padding:0;
}
.item2 .item-title{
	position:relative;
	top:0;
}
.item_image {
    float: left;
    margin: 0 15px 10px 0;
    position: relative;
}
.item_image img{
	border:0;
}
.meta_date{
	text-transform:uppercase;
	font-family:arial;
	color:#666;
	font-size:0.9em;
	margin-bottom: 20px;
	float: left;
    width: 100%;
}

.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{
	text-decoration:none;
	color:#4c881b;
}
.more a:hover,
.item .more a:hover,
.child-home .more a:hover,
.child .more a:hover{
	text-decoration:none;
	color:#545454;
}


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;
		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;
		z-index:99999;
	}
	#tabsprodul li img{
		border:none;
	}
	#tabs .ui-tabs-panel{
		float:left;
		width:95.9%;
		padding:10px 2%;
		border-left:1px solid #ccc;
		border-bottom:1px solid #ccc;
		border-right:1px solid #ccc;
		border-radius:0 0  4px 4px ;
		
	 }
 	
	#tabsprodul{
		float:left;
		width:500px;
		margin:5px 0 30px;
		padding:0;
		list-style:none;
	}
	#tabsprodul li{
		float:left;
		width:117.5px;
		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:100%;
		border-top:1px solid #ccc;
		text-align:left;
	}
	.list_items_products .item:first-child{
		margin-left:0;
	}
	.list_items_products .item h4{
		margin-top:0;
	}
	.list_items_products .item h4 a{
		color:#006DBD;
		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:left;
	width:500px;
	height:auto;
	min-height:400px;
	position:relative;
	margin:0 10px 0 0;
	}

#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 *******/
/******** 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 10px 0;
	}
.wp-pagenavi a,
.wp-pagenavi span.extend,
.wp-pagenavi span.current
{
	color:#545454;
	text-decoration:none;
	height:25px!important;
	width:25px!important;
	display:inline-block;
	padding:0;
}

.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: 2px;
	border-radius:20px;
	}
.wp-pagenavi a.last{
	width:auto!important;
	padding:2px 10px;
}
.wp-pagenavi span.pages{
	margin-right:10px;
	height:25px!important;
	width:auto!important;
	padding:6px 10px;
	}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
    border-color: #bc9250!important;
	color:#bc9250;
}
/**** hometopfeatured *************/
#hometopfeaturedmain{
	float:left;
	width:100%;
	background:#016d9c;
	z-index:99999;
}
#hometopfeatured{
	display:block;
	width:1230px;
	margin:0 auto;
	padding:20px 0;
	font-size:1.2em;
	color:#fff;
	z-index:99999;
}
#hometopfeatured h2{
	color:#fff;
	line-height:0.8em;
}
#hometopfeatured p{
	margin-bottom:0;
}
/**************hover effect *************/
#project_list{
	float:left;
	width:100%;
	margin:20px 0 30px;
	padding:30px 0 0;
	border-top:1px solid #ccc;
	}
#project_list h3{
	font-size:2.5em;
	color:#016D9C;
	text-align:center;
	margin-bottom:15px;	
}
.project_list {
	list-style: none;
	width: 100%;
	height: auto;
	position: relative;
	margin: 25px auto;
	padding: 0;
}
.project_list li.itemteam{
	float: left;
	width:27.3%;
	margin:10px 3%;
	height:auto;
	overflow:hidden;
	padding: 0;
	min-height:200px;
	position: relative;
	border:none;
}
.itemteam img{
	width:100%;
	height:auto;
}
.itemteam h4{
	font-size:1.4em;
	text-transform:uppercase;
	text-align:center;
}
.itemteam h5{
	font-size:1.1em;
	text-transform:uppercase;
	text-align:center;
	color:#999;
}
.project_list li div {
	position: absolute;
	background: rgba(0,118,169,0.95);
	width: 100%;
	height: 100%;
}
.project_list li div span {
	display: block;
	padding: 10px 0;
	margin: 10px 20px;
	font-weight: normal;
	color: #fff;
}

.project_list li p{
	color:#fff;
	font-family:Arial;
	font-weight:normal;
	text-transform:none;
	text-align:left;
	padding:0;
	margin:0 0 5px;}
.project_list li a{
	color:#fff;
}
.project_list li div span .titleteam{
	font-size:1.3em;
	text-transform:uppercase;
	color:#fff;
}
/************** containersupport *****************/
.containersupport{
	float: left;
	margin: 100px 0 50px;	
}
.colouredareasmain{
	margin: 100px auto 100px;	
}
.colouredareasmain .gutentor-single-item-desc{
	padding-bottom: 40px;	
	font-size: 18px!important;
}
.containersupport .gutentor-section-title .gutentor-title,
.colouredareasmain .gutentor-section-title .gutentor-title{
  margin: 0 0 0 0;
  color: #66666;
  font-family: 'Open Sans',sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.containersupport .gutentor-single-item .gutentor-single-item-title,
.colouredareasmain .gutentor-single-item .gutentor-single-item-title{
	color: #6C2A67;
  font-family: 'Poppins',sans-serif;
	text-align: center;
  font-size: 45px;
   margin: 25px 0 20px 0;
   padding: 0 0 60px 0;
  font-weight: 600;
  /* 1.3 FIX: line-height:0.5 is less than one line of 45px text, so a
     heading that wraps to more than one line (eg. "We'd love you to join
     the journey..." on the homepage Get Involved block, at mobile widths)
     renders each wrapped line almost on top of the last one - confirmed
     live at 375px wide. Single-line headings using this same class still
     look fine at 1.15; only wrapped ones were actually broken. */
  line-height: 1.15;
}
.containersupport .gutentor-single-item h3.gutentor-single-item-title{
  font-size: 25px!important;
	margin-bottom: 0;
}

.containersupport .gutentor-single-item-icon-box {
  font-size: 40px;
  margin-bottom: 20px;
	color: #6C2A67;
}
.containersupport #section-1d1ce8d7-0905-4c0c-b5d5-fa3e7c4d79f7 .gutentor-single-item-desc{
	padding: 0 20%;
}

.containersupport .gutentor-element-advanced-text#section-g67fc5d  h3.gutentor-text{
	width: 70%;
}
.containersupport .gutentor-single-item .gutentor-single-item-desc{
	font-size: 18px;
	color: #666666;
}
.containersupport .gutentor-element-icon .gutentor-element-icon-box{
	color: #6C2A67;
	font-size: 45px;
}
.containersupport .gutentor-element-advanced-text .gutentor-text{
	font-size: 15.5px;
	color: #666666;
}
.containersupport .gutentor-button,
.colouredareas .gutentor-button{
	color: #fff;
	background-color: #6C2A67;
	background-image: none;
	padding: 12px 25px 12px 25px;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 30px;
}
/************** featuredsection *****************/
.featuredsection{
	float:left;
	width:100%;
	margin:20px 0 0;
	font-size:1.3em;
	line-height:1.6em;
	font-family:Poppins;
}
.featuredsection h2{
	margin-top:15px;
	margin-bottom:0;
	color:#016d9c;
}
.featuredsection h3{
	margin-bottom:25px;
}
.featuredsection_image{
	float:right;
	width:620px;
	height:300px;
	position:relative;
	margin:0 0 0 15px;
	overflow:hidden;
}
.featuredsection_image img{
	border:none;
}
.featuredsection p{
	width:43%;
}
/*********** Read more Blocks************/
.blocktitle{
	float:left;
	width:96%;
	background:#eee;
	padding: 10px 2%;
	margin:10px 0 0;
}
#firstblocktitleshow,
#secondblocktitleshow,
#thirdblocktitleshow,
#fourthblocktitleshow,
#fifthblocktitleshow,
#sixthblocktitleshow,
#firstblocktitlehide,
#secondblocktitlehide,
#thirdblocktitlehide,
#fourthblocktitlehide,
#fifthblocktitlehide,
#sixthblocktitlehide{		
	width:auto;
	text-transform:uppercase;
	color:#315572;
	display:block;
	float:left;
	line-height:1.1em;
	font-size:1.3em;
	padding-right:35px;
	cursor:pointer;
	font-family:"Poppins",Arial;
	text-decoration:none;
	font-weight:bold;
	
}
#firstblocktitleshow,
#secondblocktitleshow,
#thirdblocktitleshow,
#fourthblocktitleshow,
#fifthblocktitleshow,
#sixthblocktitleshow{
	background:url(images/plus-minus.png) right 4px  no-repeat;
}
#firstblocktitlehide,
#secondblocktitlehide,
#thirdblocktitlehide,
#fourthblocktitlehide,
#fifthblocktitlehide,
#sixthblocktitlehide{
	display:none;
	cursor:pointer;
	background:url(images/plus-minus.png) right -14px  no-repeat;
}
#firstblocktext,
#secondblocktext,
#thirdblocktext,
#fourthblocktext,
#fifthblocktext,
#sixthblocktext{
	display:none;
	float:left;
	padding:15px 2%;
	background:#eee;
	width:96%;
}
#firstblocktext.selected,
#secondblocktext.selected,
#thirdblocktext.selected,
#fourthblocktext.selected,
#fifthblocktext.selected,
#sixthblocktext.selected{
	display: block;
}
/******** viewing buttons *******/
#accessibilitytringer{
	float:left;
	width:auto;
	border:none;
	font-size: 1em;
	font-weight: 400;
	padding:0 0 ;
	margin:0 0 0;
	position: relative;
	color:#fff;
	background: none;
}
#accessibilitytringer .bi-universal-access{
  font-size: 1em;
  position: relative;
  top: -4px;
}
#accessibilitytringer:hover,
#accessibilitytringer:focus{
	color:#ccc;
}
#accessibilitytringer:focus-visible{
	outline: 2px solid #000!important;
	border: 2px solid #fff;
}
#viewing{
	float:left;
	width:auto;
	position:absolute;
	right:0;
	top:45px;
	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;
	border: 2px solid #fff;
}
#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;
}

/**************** shop***********/
.subnav-main{
	float:left;
	width:100%;
	background:#eee;
	margin:0 0 10px;
	z-index:999;
}
.subnav{
	display:block;
	width:1230px;
	margin:0 auto;
}
.subnav ul{
	float:left;
	width:100%;
	list-style: none; /*to remove bullets*/
    text-align: center;
    margin: 25px auto;
    padding: 0;
}
.subnav ul li{
	list-style: none;
	float: left;
    	margin:0 15px;
    min-width: 50px;
	font-size: 1.2em;
	font-family: Poppins;
	text-transform:uppercase;
	font-weight:700;
}
.subnav ul li a{
	color: #666;
	text-decoration:none;
}
a.cart-customlocation{
	float:left;
	color:#fff;
	text-decoration:none;
	font-size:1.1em;
	position:relative;
	font-family: "Poppins", Arial, Helvetica;
	margin:0 10px;
	width:28px;
	height:20px;
}
.myaccountlink{
	float:left;
	color:#fff;
	text-decoration:none;
	font-size:1.1em;
	position:relative;
	font-family: "Poppins", Arial, Helvetica;
	width:20px;
	height:20px;
	margin:0 10px;
}

.nunberitemsoverlay{
	position: absolute;
	top: 0;
	right: 0;
	color: #fff;
	font-size: 0.8em;
	font-weight: 700;
	background: #FF6300;
	height: 18px;
	width: 18px;
	border-radius: 18px;
	line-height: 1.4em;
	text-align: center;
}
/****************** form ***************/
.wpcf7, .wpcf7-form{
	float:left;
	width:100%;
	}
.wpcf7-form label{
	float:left;
	width:100%;
	color:#666;
}
.wpcf7-form input.wpcf7-text,
.wpcf7-form input.wpcf7-quiz{
	float:left;
	width:99%;
	border:1px solid #ccc;
	padding:8px 4px;
	border-radius:7px;
	margin:3px 0 5px 0;
}
.wpcf7-form textarea{
	float:left;
	width:99%;
	border:1px solid #ccc;
	padding:2px 3px;
	margin:3px 0 5px 0;
}
input.wpcf7-form-control.wpcf7-submit,
.cf7mls_next.action-button,
.cf7mls_back.action-button{
	float:right;
	width:auto;
	padding:10px 45px!important;
	background:#3A8700;
	color:#fff;
	border:none;
	font-weight: 500!important;
	font-size:1.4em!important;
	border-radius:30px!important;
}
.cf7mls_next.action-button{
		background:#3A8700!important;
}
.cf7mls_back.action-button{
	float:left!important;
	background:#3A8700!important;
}
.wpcf7-list-item{
	float:left;
	width:30%;
	padding:5px 0;
}
.wpcf7-form-control-wrap{
	float:left;
	width:100%;
	margin:0 0 20px;
}
#wpcf7-f35421-p17781-o1 .wpcf7-form input.wpcf7-submit{
	background: #3A8700;
	padding:10px 60px;
	float:left;
	margin-top:30px;
	margin-bottom:50px;
	min-height:40px;
}
#wpcf7-f35421-p17781-o1 .wpcf7-form textarea{
	background:rgba(255,255,255,0.8);
	border-radius:5px;
	height:100px;
	border:none;
}
#wpcf7-f35421-p17781-o1 .wpcf7-form label{
	margin-top:7px;
	float:left;
	font-size:1.2em;
}
#wpcf7-f35421-p17781-o1 .wpcf7-form input{
	background:rgba(255,255,255,0.8);
	border-radius:5px;
	height:30px;
	border:none;
}
#wpcf7-f35421-p17781-o1 .wpcf7-form input.wpcf7-file{
	background:none;
}
.wpcf7-form-control-wrap.message{
	border:none!important;
	background:none!important;
}
span.wpcf7-not-valid-tip{
	float:left;
	width:100%;
}
.slick-slide img {
  max-width: 100%!important;
}
#section-65e4cb4d-29e0-4d5e-ac54-bddf5d9de229{
	padding-bottom:10px!important;
}
/************** map frame****************/
.map_frame{
	float:left;
	width:100%;
	margin-top:15px;
}
.map_frame iframe{
	width:100%;
	height:300px;
}
.pum-theme-13867 .pum-content, .pum-theme-lightbox .pum-content{
	float:left!important;
	width:100%!important;
}

/************* newsletter *******************/
.newsletter img{
	margin-top: 100px;
	position: relative;
	left: -50px;
}
.newsletter h2{
	float: left;
	width: 100%;
	color: #fff;
	margin-bottom: 15px;
	font-size: 2.5em;
    font-weight: 500;
	margin-top: 80px;
}
.newsletter p.newsintro{
	font-size: 1.1em;
}

.mc4wp-form-fields{
	float:left; 
	width:100%;
	margin-top:15px;
	margin-bottom: 80px;
	}
.mc4wp-form-fields legend{
	font-size: 1.1em;
	
}
.mc4wp-form-fields .row label{
	position: absolute;
  	left: -999999999px;
}
.mc4wp-form-fields input{
	float:left;
	width:100%;
	padding:8px 2%;
	background:#fff;
	margin:0 15px 10px 0;
	color:#333;
	border: none;
	border-radius:3px;
}
.mc4wp-form-fields a{
	color: #fff;
}
.mc4wp-form-fields input[type='checkbox'] {
  background-color: #fff;
  margin: 0;
  font: inherit;
  width: 1.15em;
  height: 1.15em;
  border-radius: 0.15em;
}
.mc4wp-form-fields .checklabels{
	position: relative;
	top: -5px;
	margin: 0 30px 0 10px;
}
.mc4wp-form-fields	#mc-embedded-subscribe{
	text-transform: uppercase;
	font-size: 1.5em;
	margin: 0 auto 0;
	margin-bottom: 0px;
	padding: 10px 15px;
	text-align: center;
	border: none;
	text-decoration: none;
	background:#1FB2E7;	
	font-weight: 600;
	width:30%;
	color:#fff;
	font-family: "Poppins",Arial;
	border-radius:30px;
	float: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;
}
	.map-wrapper
	{
		width:80%;
		height:auto;
		float:right;
		padding:0 0 0 15px;
		margin:0 0 0 15px;
		border-left:1px solid #ccc;
	}
/***************** no display messages *************/
.welcomemsg{
	width:100%;
	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;
}

.temporary-notice {
    background-color: #fdfd8a;
    color: #1a1a1a;
    width: 100%;
    padding: 4px 16px;
    text-align: center;
    box-sizing: border-box;
}

.temporary-notice__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
}

@media (max-width: 600px) {
    /* 1.22: 13px / 1.35 and 8px side padding (was 14px / 1.4, 16px) so
       the current notice wording fits on 2 lines instead of 3 on phones
       390px wide and up (iPhone 12-16, most larger Androids). On 360-389px
       phones the current wording still needs 3 lines - a shorter notice
       (Theme Options > temporary notice text) fixes that without going
       below 13px. */
    .temporary-notice{ padding: 4px 8px; }
    .temporary-notice__text {
        font-size: 13px;
        line-height: 1.35;
    }
}

/*********************** tables **************/

	.easy-table{
		font-size:1.1em;
		}
	.easy-table th{
		background:#eee;
		font-family:'Poppins',serif;
		font-size:1.2em;
	}

.wp-block-image img {
  max-width: 100% !important;
  height: auto !important;
}
#section-9a49a465-b633-421e-9c53-6e69cba377e1 .gutentor-single-item .gutentor-single-item-desc{
	line-height: 1.8em!important;
}
.btn:focus-visible,
.btn-primary:focus-visible,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item a.mega-menu-link:focus-visible{
	outline: 2px solid #000;
	border: 2px solid #fff;
}

/***************** Graphs ***********************/
	#tabs svg{ 
		width:100% !important;
	 }
	 #tabs svg rect{ 
		width:100% !important;
	 }
	/* 1.20 FIX: the reCAPTCHA badge was hidden here (display:none!important,
	   inherited from the original theme), which is why it didn't show once
	   reCAPTCHA was added to the newsletter form. Google's terms also only
	   allow hiding it if the reCAPTCHA notice text is shown with the form
	   instead. Now visible, lifted from Google's default 14px to 80px so it
	   doesn't sit on the hero slideshow's pause/prev/next buttons (which
	   reach 60px up on desktop, 48px on phones). */
	.grecaptcha-badge{ 
	 	bottom: 80px !important;
	 }
	 .age-gate-form{border:10px solid #fff;}
.age-gate-form, .age-gate-form label, .age-gate-form h1, .age-gate-form h2, .age-gate-form p{font-Family:'Poppins', Arial; width:100%; text-align:center;}
.age-gate-subheading{ font-size:1.8em; margin:15px 0;}
.age-gate-form p{ font-size:1.4em; margin:0 0 10px;}
.age-gate-submit-yes,.age-gate-submit-no{background: #fff;cursor:pointer;margin: 10px 20px;padding: 10px;min-width: 100px;font-size: 1.5em;font-family: Arial;text-transform: uppercase;border: none;color: #4bcfd3;}
.age-gate-heading.age-gate-logo img{ display:block;margin:0 auto 20px;}
.age-gate-form .age-gate-error-message{ color:#000;}
/******************** ie8 ***********************/
.ie8 .slider_text{ height:150px;}
.ie8 .slider_text_main{ position:absolute; left:0;}
.ie8 .project_list li div{ background:#0076A9;}
/******************** ie7 ***********************/
.ie7 #nav{ width:820px; z-index:99999;}
.ie7 #header_main,.ie7 #header{z-index:99999;}
.ie7.header_image_wrapper,.ie7 .header_image_wrapper2,.ie7 .header_image{ z-index:99; position:relative;}
.ie7 nav ul#menu-fish ul 
{
	margin-left:-115px;
	z-index:999999;
}
.ie7 nav ul#menu-fish ul ul,
.ie7 nav ul#menu-fish ul ul ul,
.ie7 nav ul#menu-fish ul ul ul ul
{
   	margin:0 0 0 0;	
}

.ie7 .project_list li div{ background:#0076A9;}
.ie7 .child-home{ float:left;}
.ie7 .child-texthome2{ float:left; width:880px;}
.ie7 .child-home h4,.ie7 .child-home p{ float:left; width:280px; padding:0; margin-top:0;}
.ie7 .slide-text2 .firsttitle{ line-height:2em;}
.ie7 .slide-text2 .secondtitle{ line-height:1.2em;}
.ie7 .slider img { bottom: 0; left: 0; right: 0; top: 0;}
/***************************** Responsive design *******************/
/***************************** Larger Screens *******************/

/* 1.4's fix lowered this rule's threshold from 1300px to 768px to close
   a gap where the hero image overflowed uncropped between those two
   widths. 1.5 replaces the whole approach (see the object-fit:cover
   rule earlier in this file) with one that works at every width without
   a breakpoint at all, so this override is removed rather than adjusted
   again - confirmed live at 375/768/1200/1366px that nothing here is
   still needed. */
@media only all and (min-width: 1500px){
	.header_image{ width:100%;}
	
}

@media only all and (max-width: 1220px) and (min-width: 1024px){
	footer_bg, #footer_section { width: 98%; padding: 10px 1%;}
}
@media only all and (max-width: 1023px) and (min-width: 768px){
	footer_bg, #footer_section { width: 98%; padding: 10px 1%;}
	#footer section.contact-info{width: 35%;}
	#footer section{ width: 30%;}
	#footer section.page-foot{width: 35%;margin-bottom: 50px;}
	#footer section.page-foot img{ width: 100%;}
	#footer_section{margin: 0px auto;}
	.contactsection .col-sm-6{width: 90%;}
	.maintext h2{font-size: 2.6em;}
	.slick-slide{height: 550px;}
	.contactsection{ width: 94%; padding: 0 3%;}
	.gutentor-section.gutentor-image-slider .gutentor-single-item-image-box{height: 500px;}
}

@media only all and (max-width: 767px){
	.maintext,.maintextright{ width:100%;margin:0 auto 0; left:0;padding:0}
	.imagerighthome{ bottom:0; left:0; width:100%;}
	.imagelefthome{ display:none;} 
	.col-sm-4{ margin-top:20px;}
	/* 1.15 FIX: the three feature cards (International Mission / Become a
	   Roofbreaker / Fellowship Together) had width:32% at every size, which
	   overrode Bootstrap's own stacking, so on phones they stayed three
	   ~120px columns with clipped headings. Full width below 768px. The
	   :first-child/:last-child selectors are repeated so this beats the
	   base margin:0 rules for those two (same specificity, later). Kept in
	   this end-of-file block deliberately: it must come after the base
	   width:32% rule to win. */
	.colouredareas .col-sm-4,
	.colouredareas .col-sm-4:first-child,
	.colouredareas .col-sm-4:last-child{ width: 100%; margin: 0 0 30px; }
	.maintext h2 {font-size: 1.6em;}
	.container-xxl.containerhome .maintext{padding: 50px 3% 40px;}
	.contactsection .maintext{padding: 30px 10px 30px; top:0;}
	.col-sm-6 img{ max-width:100%;}
	.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:60px;}
	.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;}
	/* 1.12 FIX: the outer banner section (.header_image_wrapper_main) was
	   never included here, so on mobile it stayed 550px tall around a
	   250px banner - a 300px white gap under the photo, before the
	   breadcrumb. Present since before 1.11 (confirmed in 1.10 too). */
	.header_image_wrapper_main,.header_image_wrapper,.header_image {height: 250px;}
	.header_image_wrapper3,.portfimg { height: 300px; }
	.btn-primary{width: 320px !important; max-width:100% !important;} /* 1.2 FIX: same fixed-width overflow risk as the base rule above */
	.main_content h3.has-x-large-font-size{font-size: 1.7em!important;}
	.section-gm8ddb63f{ padding:5% 0!important;}
	#section-d48ec263-a88c-44e9-8c81-8b7578c26149{padding: 0 3% 0!important;}
	#section-43862f46-9977-401b-aaaf-98c59b6e2e7e{ margin-top:0!important;}
	.contentportf h1{ font-size: 2em; line-height: 1.2em;}
	.portfimgright { margin-top: 10px;}
	.mobilenodisplay{ display: none;}
	.content-style{ padding: 0 7%; }
	.portf h2, .reviewport h2 {font-size: 2em;}
	.portf .text-left{ text-align: center;}
	.portf {margin-top: 0;margin-bottom: 0;}
	.fullportimg2{ margin-top: 20px;}
	.fullproftimg img{ height: 250px;}
	.textoverproft{font-size: 1.6em; padding: 0 10%;}
	/*footer*/
	footer_bg, #footer_section { width: 98%; padding: 10px 1%;}
	#footer2{ width:100%;}
	footer .right{ width:100%; font-size:0.95em; padding:5px 0 30px; text-align:left}
	#viewing{ position:absolute; bottom:0;}
	#viewing ul li{ margin-left:0; margin-right:0;}
	#footer section.legal-info{ width:49%; maring:0 2% 0 0;}
	#footer section.contact-info{ width:49%; margin-top:0;}
	footer .left{ width:100%;}
	#footer h4{ font-size:1em;}
	#footer .email{font-size: 0.8em;padding: 0 0 0 30px;}
	#footer .tel,#footer .address{padding: 0 0 0 30px;}
	#footer section.page-foot{ width:100%; margin-top:20px; text-align:center;min-height: 40px; margin-bottom:20px;}
}
/* 1.16 FIX: footer on phones - the first three columns are col-6 (two
   across), which squeezed the address into a ~150px column and broke the
   email address mid-word. One column below 480px. */
@media only all and (max-width: 479px){
	footer .row > .col-6{ width: 100%; }
}
@media only all and (max-width: 400px){
	#footer section{padding: 0 2% 20px;min-height: 120px;}
	#footer section.legal-info{ width:100%; maring:00; text-align: left;}
	#footer section.contact-info{ width:100%; margin-top:0; text-align: left;}
	ul.legal li{ font-size: 0.95em; width: 50%; float: left;}
	#footer h3{ text-align: left;}
	#footer .email{font-size: 0.9em;padding: 0 0 0 23px;float: left; width: auto; margin:5px 0 5px 15px}
	#footer .tel{ float: left; width: auto; padding: 0 0 0 23px;}
	.navbar-brand img{ height: 50px;}
}

/* 1.17 FIX: WooCommerce category tiles on the Shop page, matched to the
   manually added Gutentor category block (measured live: 3 across with
   30px gutters, image full width + 20px below, title Open Sans 24px/700
   black, count Open Sans 16px/600 purple, 15px above/below each tile;
   one per row below 768px). Scoped to li.product-category so product
   grids are untouched; #content raises specificity above WooCommerce's
   own columns-4 / smallscreen rules. See functions.php (1.17). */
#content .woocommerce ul.products li.product.product-category{ float: left; clear: none; width: calc((100% - 60px) / 3); margin: 0 30px 0 0; padding: 15px 0; text-align: center; }
#content .woocommerce ul.products li.product.product-category:nth-of-type(3n){ margin-right: 0; }
#content .woocommerce ul.products li.product.product-category:nth-of-type(3n+1){ clear: left; }
#content .woocommerce ul.products li.product.product-category a{ display: block; text-decoration: none; color: inherit; }
#content .woocommerce ul.products li.product.product-category a img{ display: block; width: 100%; height: auto; margin: 0 0 20px; box-shadow: none; }
#content .woocommerce ul.products li.product.product-category .woocommerce-loop-category__title{ font-family: "Open Sans", Poppins, sans-serif; font-size: 24px; font-weight: 700; line-height: 28.8px; color: #000; margin: 0 0 5px; padding: 0; text-align: center; }
#content .woocommerce ul.products li.product.product-category .roof-cat-count{ display: block; font-family: "Open Sans", Poppins, sans-serif; font-size: 16px; font-weight: 600; line-height: 28.8px; color: #6C2A67; text-align: center; }
#content .woocommerce ul.products li.product.product-category a:hover .woocommerce-loop-category__title{ text-decoration: underline; }
#content .woocommerce ul.products li.product.product-category a:focus-visible{ outline: 3px solid #6C2A67; outline-offset: 4px; }
@media only all and (max-width: 767px){
	#content .woocommerce ul.products li.product.product-category{ float: none; width: 100%; margin: 0; }
}
@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; }
.content_image{ width:400px!important;}
#out,#container,#content,#wrapper{ width:auto !important;}
#images_main,#images,#navi2,.home_center,.home_left,.main-intro,#tabs .ui-tabs-panel{ width:100% !important;}
.main-intro h2,.main-intro p{ text-align:left;}
.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_right,.preheadermain,#slideshowpages, #tabsprodul .ui-state-active,#tabsul,.tablepress caption, a.enquiry-button, a#main{ display:none!important;}
.main-intro{ text-align:left!important; padding:0 !important; border:none !important;}
.main-intro p,.main-intro h1{text-align:left!important;}
.home_right,.home_center{ padding:0 !important; border:none !important;}
#content h1{ border:none !important;}
.item_image img{ width:250px !important;}
.child_image{ width:250px!important; margin-right:15px!important;}
.project_details{ width:100%!important;}
.project_details p{ width:50%!important; float:left}
script{ display:none;}
}

/* 1.8 FIX: Gutentor's Slick-based "Image Slider" block (e.g. the
   Church Partners slider on join-the-journey/become-a-church-partner/)
   ships with its arrows/dots outline suppressed by Slick's own bundled
   CSS - confirmed live: outline-style computed to "none" on both,
   which combined with the arrows never being keyboard-reachable before
   (see script.js) meant no one had ever actually seen these focused.
   Restored a high-contrast focus ring (a light outline plus a dark
   halo, so it stays visible over both light and dark slide photos) and
   styled the new pause/play button script.js adds next to these
   sliders. Scoped generically to every Slick slider on the site, not
   just this one page. */
/* 1.10 FIX: Clive found the v1.8/v1.9 focus ring on the prev/next
   arrows hard to make out - a 3px white outline sitting right against
   the arrow's own dark (rgba(0,0,0,0.55)-ish) background and a busy
   photo behind it didn't stand out enough. Confirmed live with a real
   keyboard Tab press (not a scripted .focus(), which doesn't reliably
   trigger :focus-visible - had to use an actual keypress to see what
   Clive was actually seeing): a thicker outline, pushed further out,
   with only a thin dark separation ring instead of a heavy 6px halo,
   plus a light fill behind the arrow itself, is dramatically more
   visible against both the dark button and light/dark photos alike.
   Left the dots' own focus ring as it was - Clive only flagged the
   arrows. */
.slick-prev:focus-visible,
.slick-next:focus-visible {
	outline: 4px solid #fff;
	outline-offset: 3px;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
	background-color: rgba(255,255,255,0.3);
}
.slick-dots li button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px rgba(0,0,0,0.6);
}
.gutentor-slider-pause-toggle{
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 20;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(0,0,0,0.55);
	color: #fff;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.gutentor-slider-pause-toggle:focus-visible{
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px rgba(0,0,0,0.6);
}

/* 1.22 FIX: phone header (Basecamp: "fix the header phone, accessibility
   button and icons and button"). Below 768px the floated icon row
   wrapped into three ragged rows (163px tall at 390px): "Accessible View"
   beside the logo, the phone number under it, the basket and account
   icons stranded on a row of their own, and the Donate button on a
   third. The basket (28x20) and account (20x20) links were below the
   24px minimum tap size (WCAG 2.5.8), the "Accessible View" button was
   only 24px tall, and at 320px its text ran over the logo. The search
   box opened 350px wide from the search icon, off the right of the
   screen.
   Now two tidy rows:
   - row 1: logo | Donate button (centred) | menu toggle
   - row 2: Accessible View | phone | search | basket | account, spread
     across the full width, every one a 44px-tall tap target, icons
     vertically centred
   The phone number text is hidden visually below 480px (icon only), but
   kept for screen readers - header.php now wraps it in .tel-number.
   The search box and the Accessible View options open full width under
   row 2. Header is 131px tall at every phone width (was 163px).
   Placed at the end of the file so it beats the base rules for these
   elements further up (e.g. a.cart-customlocation, #accessibilitytringer). */
@media only all and (max-width: 767px){
	.header-right{
		float: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		width: auto;
		margin: 62px 0 0;
		padding: 0;
	}
	.header-right > *{ float: none; margin: 0; flex: 0 0 auto; }
	#accessibilitytringer,
	.header-top .tel a,
	#searchtriger,
	a.cart-customlocation,
	.myaccountlink{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-width: 44px;
		height: 44px;
		margin: 0;
		padding: 0 4px;
		font-size: 0.9rem;
		line-height: 1;
		white-space: nowrap;
		box-sizing: border-box;
	}
	.header-top .tel{ margin: 0; padding: 0; }
	.header-top .tel a{ gap: 0; }
	.header-top .tel .tel-number{ margin-left: 6px; }
	#accessibilitytringer .bi-universal-access,
	.header-top .tel i,
	#searchtriger i{ top: 0; font-size: 1.1rem; }
	a.cart-customlocation,
	.myaccountlink{ width: 44px; }
	a.cart-customlocation img,
	.myaccountlink img{ height: 22px; width: auto; }
	#searchmain{ position: static; margin: 0; }
	.searchform_main{ left: 0; right: 0; top: 48px; padding: 12px; }
	.searchform_main:focus-within,
	.searchform_main.searchformselected{ left: 0; }
	#searchform{ width: 100%; box-sizing: border-box; }
	.headerbutton1{
		position: absolute;
		top: -52px;
		left: 50%;
		transform: translateX(-50%);
		margin: 0;
		padding: 8px 12px;
		font-size: 0.85rem;
		clear: none;
	}
}
@media only all and (max-width: 479px){
	.header-top .tel .tel-number{
		position: absolute; width: 1px; height: 1px; overflow: hidden;
		clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
	}
	/* belt and braces: if header.php's .tel-number span is missing (e.g.
	   only style.css uploaded, or a cached header), the bare number text
	   still takes no width - font-size 0 keeps it readable by screen
	   readers but stops it pushing the account icon off the right edge */
	.header-top .tel a{ font-size: 0; }
	.header-top .tel a i{ font-size: 1.1rem; }
	/* and never let the row run off the screen: the Accessible View label
	   gives way first */
	#accessibilitytringer{ flex: 0 1 auto; min-width: 0; overflow: hidden; }
}
@media only all and (max-width: 359px){
	.headerbutton1{ padding: 8px 10px; font-size: 0.8rem; }
	#accessibilitytringer{ font-size: 0.8rem; gap: 4px; padding: 0 2px; }
	.header-top .tel a,
	#searchtriger,
	a.cart-customlocation,
	.myaccountlink{ min-width: 40px; width: 40px; padding: 0; }
}