/* Theme Name: ABD Bognor 2026 (v1.26) Description: HTML5 CSS3 Responsive Author: Pollyana Miranda de Jesus Author URI: accessbydesign.uk Version: 1.26 */ audio, canvas, video { display: inline-block;} audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} body { margin: 0; font-size: 0.95em; line-height: 1.231; } body, button, input, select, textarea { font-family: arial, sans-Arial; color: #545454; } a { color: #666; outline:none;} a:hover {color: #2782df; } a:hover, a:active,a:focus{ color: #545454; outline: 0;} a:focus-visible{ border: 2px solid #fff; outline: 2px solid #000!important;} abbr[title] { border-bottom: 1px dotte; } 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; text-align:left;} 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:#666;font-family: 'poppins', Arial; font-weight:bold; margin:0; padding:0;} h1{font-size:2.1em; line-height:1.5em; margin:10px 0 10px; padding:0;font-weight:700!important;} h2{font-size:1.6em;color:#545454 ;padding:0 0 0;} h3{font-size:1.5em;color:#545454;} h4{font-size:1.3em;color:#545454;margin:10px 0 7px;} h4 a{text-decoration:none;} h5{font-size:1.2em;font-weight:700;color:#545454;} .btn-primary{background-color: #FFF5C9;} body{ line-height:1.8em; background: #fff; font-family: Arial; } body p{ font-family: Arial; } #out{ float: left; width:100%; margin:0 auto 0; padding:0; } #container{ float: left; margin: 0; padding: 0 0 ; width: 100%; background:#fff; } #container /********************* Header ******************/ header{ position:relative; width:100%; margin:0 auto; z-index:999; min-height:110px; background:rgba(255,255,255,0.7); } #header{ width:100%; max-width:1300px; display:block; position:relative; margin: 0 auto 0; } #mainheader{ width:100%; float:left; height:auto; position:relative; z-index:99999; } header .logo{ float:left; width:auto; height:auto } header .logo a{ float:left; margin:0; width:auto; height:auto; outline:none; } header .logo a:focus-visible, footer a.footerlogo:focus-visible { border: 2px solid #fff; outline: 2px solid #000!important; } /* 1.13 FIX: the footer logo image had no responsive sizing at all (no max-width, no Bootstrap .img-fluid class), so it rendered at its raw HTML width="200" attribute regardless of how narrow its column got, spilling into the contact-info column next to it. Confirmed live: image was 200px wide inside a 134px column. */ .page-foot2 img{ max-width: 100%; height: auto; } .header_top{ width:auto; float:right; } .header_right{ width:auto; float:right; padding: 3px 20px; margin: 0 0 0 35px; position: relative; } .header_left{ width:auto; float:left; padding:0 0 0 0; margin:10px 0 0 10px; position: relative; } .home-header-imagesmaller{ display:block; text-align:center; margin: 0 auto;} header .contact{ float:left; color:#999; width:auto; margin:0 0 5px 5px; padding:3px 0 0; text-align:right; font-weight:normal; line-height:1.6em; font-family: 'Arial',Arial; font-size:1em; } header .contact .telprefix{ float:right; } header .tel,header .email{ font-size: 1.2em; float: left; padding: 0 0 0; margin: 0 20px 0 0; } header .email{ font-size: 0.9em; margin: 3px 0 0 0; font-weight: 400; } header .tel i,header .email i{ font-size: 1em; margin-right: 7px; position: relative; } header .email i{ font-size: 1.1em; top: -1px; } #container header .tel a,#container header .email a { text-decoration: none; color: #000; } header .tel a:hover,header .tel a:focus, header .email a:hover,header .email a:focus{ text-decoration: none; color: #333; } header .tel a:focus-visible, header .email a:focus-visible{ border: 2px solid #fff; outline: 2px solid #000; } .header_image_wrapper{ float:left; width:100%; overflow:hidden; height:auto; position:relative; } #header_image_wrappertext{ background: #000; } #header_image_wrappertext::after { content: ""; width: 100%; height: 100%; position: absolute; background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent 50%, rgba(0, 0, 0, 0.8) 100%); z-index: 10; top: 0; left: 0; } .headerimagetext{ position:absolute; z-index:99; top:40%; left:0; width:70%; padding:0 15%; text-align:center; color:#fff; font-size:3em; text-transform:uppercase; font-weight:600; line-height:1em; } .headerimagetext2{ text-transform:none; font-size:0.5em; font-weight:normal; font-weight:normal; line-height:1.3em; } .header_image{ margin-left: 50%; transform: translateX(-50%); float:left; } .headerbutton1, .headerbutton2{ float:right; min-width:70px; background:#666; text-align:center; color:#fff; padding:10px 10px; margin-left:7px; text-decoration:none; font-family:'arial'; font-size:1em; border:none; } .tinyheader #mainheader{ position:fixed; height:auto; top:0; background:#fff; } /* Fix: the sticky/floating header on scroll used to hide the Accessible View / phone / email / search row entirely (display:none), leaving only a small floating logo. This was unconditional (not scoped to narrow widths), so it happened at every screen size, just less noticeably on wide screens. Clive wants the full bar to stay floated at every width, matching the wide-desktop appearance exactly, so these are no longer hidden - height:auto above lets the fixed header grow to fit them properly instead of clipping them into a fixed 80px box. */ .tinyheader .logo img{ height:60px; width:auto; } .tinyheader .logo{ margin-top:0; } .tinyheader .logo a{ margin:10px 0 0; } .tinyheader #nav{ margin-top:15px; } /******** social Icons *****************/ .ul_social { float:right; list-style:none; margin:5px 0 0 0 ; padding:0 0 0 ; width:auto; } footer .ul_social{ float:left; width:100%; margin:5px 0 10px 0; } .ul_social li{ float:left; height:32px; width: auto; margin-left: 15px; } .ul_social li a{ display: block; float: left; height: 32px; text-align:left; width: 100%; color: #000; } .ul_social li a span{ text-indent:-99999em; display: block; float: left; text-align:left; } .ul_social li a i{ font-size: 1.5em; } .ul_social li a:hover, .ul_social li a:focus{ color: #ccc; } .ul_social li a:focus-visible{ border: 2px solid #fff; outline: 2px solid #000!important; padding:0; } /********************/ #crumb{ width:100%; float:left; height:auto; color:#333; padding:0; line-height:1.1em; margin:0 0; } .crumb{ display:block; text-align:right; width:1200px; margin:3px auto 5px; z-index:100; font-size:0.85em; height: auto; padding: 0 0; } #crumb a{ color:#666; } #crumb a:focus-visible{ border: 2px solid #fff; outline: 2px solid #000!important; } /********* Extras ******************/ .container-full { float: left; width: 100%; padding: 0; margin: 0; position: relative; } .containerjoinhone{ min-height: 300px; background-size: cover; background: #000; color: #fff; float: left; width: 100%; text-align: center; overflow: hidden; position: relative; } .containerjoinhone .container{ z-index: 999; } .containerjoinhone::after{ background: rgba(151,97,29,0.9); content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .maintext { width: 100%; padding: 100px 30px 100px 0; margin: 30px 0 0; z-index: 99; position: relative; float: left; font-size: 1.1em; } /* 1.22 FIX: this wrapper originally assumed a heading followed by a real paragraph, hence the 50px padding-bottom to separate them. On the homepage this specific instance ("Our Website Services") only has a bare heading - the paragraph after it is empty (leftover blank content) - so that 50px was pure dead space, on top of the heading's own 40px margin-bottom, making a 90px gap before the service icons below. Confirmed this exact class combination is used nowhere else on the page, so reducing it here is safe. */ .eventshome .maintext{ padding-bottom: 10px; } .eventshome2 .maintext{ padding: 30px 0 0 0; } .maintext h2{ font-size:3em; color: #fff; font-weight: 700; text-align: center; margin-bottom: 40px; } .containerjoinhone2 .maintext p{ font-style: normal; font-size: 1.05em; } .child-row-home .maintext .gutentor-title{ color:#000; text-align: center; letter-spacing: 2px; font-size: 1.1em; overflow: hidden; } .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper{ background:#2778AD; color:#fff; } .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-infomation .wpem-event-details .wpem-event-title .wpem-heading-text{ color:#fff; } .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-infomation .wpem-event-details .wpem-event-date-time, .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-infomation .wpem-event-details .wpem-event-location, .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-infomation .wpem-event-details .wpem-event-ticket-type, .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-infomation .wpem-event-details .wpem-event-title, .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-infomation .wpem-event-details .wpem-event-type{ color:#fff; } .wpem-event-listings .wpem-event-layout-wrapper .wpem-event-infomation .wpem-event-details .wpem-event-location{color:#fff;} .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-banner .wpem-event-date .wpem-event-date-type .wpem-from-date{ background:#FFF094; color:#000; } .eventshome{background:#F4F5F8; padding-bottom: 100px; line-height: 1.7em;} .eventshome h3{ font-size: 1.3em; font-weight: bold; width: 100%; float: left;} .eventshome p{width: 100%; float: left; padding-right:15px; } .containerjoinhone .container .btn, .eventshome .container .btn, .hometabs .row .childfeatext .btn, .homelogosmainwarpper .btn, #slideshow .slide1st, #slideshow .slide2nd{ color: #fff; background-color: #333; padding: 15px 30px 15px 30px; font-family: 'poppins',sans-serif; font-weight: 500; letter-spacing: 1px; border-radius:0; border: none; font-size: 1.1em; margin-top: 50px; } .homelogosmainwarpper .btn{ margin-top: 10px; } .hometabs .row .childfeatext .btn{ color: #fff; background-color: #545454; } #slideshow .slide1st{ background-color: #2778AD; color: #fff; font-size: 0.7em; margin-right: 20px; } #slideshow .slide2nd{ font-size: 0.7em; } .eventshome .container .maintext h2{ color: #000; } .em-search-wrapper { display: none !important; } #upcoming_event_listing .wpem-event-listings-header, .childhomefull .event_filters{ display: none; } .hometabs .row{ padding: 40px 0 40px!important; } .hometabs .row .childfeatext h2{ color:#000; font-weight: 700; font-size: 2.2em; margin-bottom: 30px;} .hometabs .row .childfeatext{ font-size: 1.1em;} .childhomeimage img{ max-width: 100%!important;} /********* Navigation ******************/ nav { width:auto; float:right; height:auto; margin: 7px 0 0; padding:0; z-index:99999; position:relative; } nav.menuselected{ left:0; } #mega-menu-wrap-primary .mega-menu-toggle{ width: 60px !important; position: absolute; top: -45px; right: 0; } /* 1.10 FIX: the height/centering override below must only apply at the same widths where the toggle is actually meant to be visible (matching the Mega Menu plugin's own 1040px breakpoint). The 1.9 fix wrongly applied display:flex!important with no width limit at all, which beat the plugin's own rule hiding the toggle on desktop - causing a faint hamburger icon to incorrectly show above the breakpoint. */ @media only all and (max-width: 1040px){ #mega-menu-wrap-primary .mega-menu-toggle{ height: 45px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden; } } /* 1.11 FIX: on scroll, .tinyheader changes the header's height (shrunk logo etc.), which shifts where the toggle's positioning parent actually sits. The toggle's -45px offset was calibrated for the unscrolled state only, so once scrolled it landed 15px too low, spilling out of the 45px bar. This override corrects it specifically for the scrolled state, confirmed by measuring the exact pixel discrepancy live. */ .tinyheader #mega-menu-wrap-primary .mega-menu-toggle{ top: -60px !important; } #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; } @media only screen and (min-width: 1041px) { #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout.mega-align-bottom-right li.mega-menu-item a.mega-menu-link { text-align: left!important; } #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout.mega-align-bottom-right li.mega-menu-item a.mega-menu-link > span.mega-indicator { float: right!important; } } #nav{ display:block; width:auto; margin:10px auto 0; padding:0 0; position:relative; z-index:100; } nav ul#menu-main { width:auto; display:block; position:relative; z-index:3; text-align:left; font-size:1.1em; font-family:"Arial", Arial, Helvetica; } nav ul#menu-main ul { position:absolute; left:-999em; height:auto; width:220px; margin-top:45px; background: rgba(167,169,172,0.9); } nav ul#menu-main ul ul, nav ul#menu-main ul ul ul, nav ul#menu-main ul ul ul ul, nav ul#menu-main ul ul ul ul ul { margin:0 0 0 210px; } nav ul#menu-main li { float:left; height:auto; margin:0; } nav ul#menu-main li li { width:auto; list-style:none; background:none; border:none; } nav ul#menu-main a { float:left; text-align:left; padding:12px 19px; min-width:35px; text-decoration:none; font-weight:500; color:#686A6F; font-size:1.05em; } nav ul#menu-main li li a { width:200px; text-align:left; border-right:0; color:#fff; text-shadow: none; padding:7.5px 10px; border-left:none; } nav ul#menu-main li li:first-child a, nav ul#menu-main li li li:first-child a{ padding-left:10px; } nav ul#menu-main li.current_page_item a { color:#0A5388; font-weight: 800!important; } nav ul#menu-main li.parent-wrapper li a, nav ul#menu-main li.parent-wrapper li li a, nav ul#menu-main li.parent-wrapper li li li a, nav ul#menu-main li.parent-wrapper li li li li a { padding-right:0; } nav ul#menu-main li:hover a, nav ul#menu-main li a:focus{ color:#888; } nav ul#menu-main li ul li:hover a, nav ul#menu-main li ul li li:hover a, nav ul#menu-main li ul li li li:hover a, nav ul#menu-main li ul li li li:hover a, nav ul#menu-main li ul li a:focus, nav ul#menu-main li ul li li a:focus, nav ul#menu-main li ul li ul li a:focus, nav ul#menu-main li ul li ul li ul li a:focus { color:#ccc; } nav ul#menu-main li:hover li a, nav ul#menu-main li li:hover li a, nav ul#menu-main li li li:hover li a, nav ul#menu-main li li li li:hover li a, nav ul#menu-main li a:focus + ul li a, nav ul#menu-main li li a:focus + ul li a, nav ul#menu-main li li li a:focus + ul li a, nav ul#menu-main li li li li a:focus + ul li a { color:#fff; /*color for second level non-hover objects*/ } nav ul#menu-main li:hover ul ul, nav ul#menu-main li:hover ul ul ul, nav ul#menu-main li:hover ul ul ul ul, nav ul#menu-main li a:focus + ul ul, nav ul#menu-main li a:focus + ul ul ul, nav ul#menu-main li a:focus + ul ul ul ul, nav ul#menu-main li a:focus + ul ul ul ul ul, nav ul#menu-main li.sfhover ul ul, nav ul#menu-main li.sfhover ul ul ul, nav ul#menu-main li.sfhover ul ul ul ul, nav ul#menu-main li.sfhover ul ul ul ul ul { left:-999em; } nav ul#menu-main li:hover ul, nav ul#menu-main li li:hover ul, nav ul#menu-main li li li:hover ul, nav ul#menu-main li li li li:hover ul, nav ul#menu-main li a:focus + ul, nav ul#menu-main li li a:focus + ul, nav ul#menu-main li li li a:focus ul, nav ul#menu-main li li li li a:focus ul, nav ul#menu-main li.sfhover ul, nav ul#menu-main li li.sfhover ul, nav ul#menu-main li li li.sfhover ul, nav ul#menu-main li li li li.sfhover ul { left:auto; } #content{ float:left; width:100%; text-align:left; min-height:300px; padding:40px 0 10px; } #contentposts{ float:left; width:64%; } .wp-block-image img{ max-width:100%!important; height:auto!important;} .content_left{ float:left; width:49%; margin-right:2%; } .content_right{ float:left; width:49%; } .post_tags{ float:left; width:100%; margin:0 0 30px; } .post_tags a{ float:left; width:25%; font-size:1.3em; padding:5px 0; text-decoration:none; } .wpcf7{ text-align:left; } .wpcf7-form-control-wrap, .wpcf7 label, .wpcf7 p{ float:left; width:100%; } .wpcf7 input, .wpcf7 textarea, .wpcf7 select{ border-radius:3px; width:94%; border:1px solid #ccc; padding:3px 5px; } .wpcf7 .telephone{ background:none; padding:0; } .wpcf7 select{ width:98%; } .wpcf7 textarea{ height:70px; } .wpcf7-not-valid-tip, .wpcf7 form .wpcf7-response-output{ color: red!important; font-size: 0.9em!important; font-weight: bold!important; float: left; width: 100%; } .content_image{ float:right; width:auto; margin:0 0 15px 15px; } .slideimages{ float:right; } .content_image_larger{ display:block; clear:both; } .content_image_left{ float:left; margin:0 20px 15px 0; } #contentimage_articles{ float:none; display:block; margin:20px auto; } .contactleft{ float:left; width:300px; text-align:left; margin-right:15px; } .contactright{ float:right; text-align:left; padding:10px; background:#E9E9E9; width:250px; } .logofallback{ float:left; width:100%; padding:15px 0; border-top:1px solid #ccc; font-size:1.2em; font-family:"Arial",Arial; } .logofallback .content_image{ max-height:90px; } /******** wrapper *********/ #wrapper{ display:block; width:100%; max-width:1350px; padding: 0 0 0; margin: 0 auto 0; position:relative; z-index:11; } #wrapper_child{ width:100%; padding:0; display:block; background:#f1f2ee; border-bottom: 1px solid #DCDCDC; float: left; } .home_left { float:left; width:64%; text-align:left; margin:0 0 0 0; padding:0 2% 10px 0; color:#545454; } #home_left_full{ float:left; width:100%; text-align:left; margin:0 0 0 0; padding:0 0 10px 0; color:#545454; } .home_right h2{ color: #666; font-size:1.5em; margin: 12px 0 30px; text-transform:uppercase; } .home_right { float:right; width:32%; text-align:left; padding:10px 0 0 ; border-top:1px solid #ccc; margin: 0 0 2%; color:#545454; } .home_scroller{ float:left; width:100%; padding:0; margin:0; position:relative; } .home_scroller a{ text-decoration:none; } ul#verticalscroller{ list-style:none; margin:0; padding:0; width:100%; } .home_scroller li{ float:left; width:100%; margin:0 0 15px 0; height:105px !important; padding:0; list-style:none; } .home_scroller li p{ font-family:Arial; color:#545454; } .home_scroller li .item_image{ border-radius:3px; } .home_scroller li img{ border-radius:3px; } .home_scroller li p{ line-height:1.2em; font-size:0.9em} .list_items_products .item .more{ background:#00397C; color:#fff; padding:4px 15px; float:left; width: auto; position:absolute; } .list_items_products .item .more a{ text-decoration:none; color:#fff; } .list_items_products .item .more a:hover{ text-decoration:none; color:#ccc; } .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:'Arial'; font-size:1.3em; margin-bottom:10px; font-weight:normal; color:#1D3276; } 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; } h2.user-event-head{ color:#666; font-size:1em; line-height:1.3em; font-weight:normal; margin:0 0 0; text-transform:none; margin-bottom:5px; color:#666; margin-top: -2px!important; } .home_scroller p{ margin:5px 0 0; } .meta_date{ display:block; margin:5px 0; padding:0; color:#999; line-height:1.3em; font-size:0.85em; } 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; } #content figure { max-width: 800px; } #content figure video{ max-width:100%; } .single-post .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before { padding-top: 0; } .video-frame-main{ float:right; width:350px; height:240px; padding:7px 0 0 15px; } .video-frame-main iframe{ width:350px; height:240px; } .wp-block-embed__wrapper iframe, .wp-block-column iframe{ width:100%; } .video-frame-main-bsl{ float:left; width:400px; height:260px; padding:7px 15px 10px 0 ; } .video-frame-main-bsl iframe{ width:400px; height:260px; } aside{ float:right; width:32%; text-align:left; padding:10px 0 0 ; margin: 0 0 2%; color:#545454; } .sidesections{ float:left; background:#F7F7F7; padding: 30px 10%; width:100%; list-style:none; margin:0 0 30px; } .sidearchives{ width:80%; } .sidesections h2{ font-family: "Open Sans",sans-serif; font-style: normal; font-weight: 400; border-bottom: 5px solid #dfdfdf; margin: 0 0 10px; padding-bottom: 10px; text-transform: uppercase; } ul.sidesections li{ list-style:none; margin:0 0 5px; } ul.sidesections li a{ list-style:none; margin:0; text-decoration: none; color: #5594ca; line-height:1.3em; } ul.sidesections li i{ margin-right: 5px; font-size: 80%; } .sidesections select{ max-width: 100%; width: 100%; padding:5px 2%; margin:15px 0; } /*********** Search ***********/ #searchmain{ float:left; width:auto; margin: 0 10px 0 0; position:relative; } #searchtriger{ float:left; margin:0 0 0 0 ; width:44px; height:44px; border:none; cursor:pointer; background:none; font-size: 1.3em; color: #000; } #searchtriger:focus-visible{ border: 2px solid #fff; 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: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; cursor:pointer; 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; 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; } .gutentor-section .grid-container{ max-width: 1300px!important; } /****** footer ********/ footer{ float:left; width:100%; color:#fff; bottom:0; height:auto; position:relative; font-size:0.95em; overflow: hidden; font-family: 'poppins', Arial; } #footer{ margin: 0 auto 0; padding:35px 0; float:left; width:100%; color:#000; font-size:1.1em; background:#F4F5F8; } .footer_bg, #footer_section{ display:block; position:relative; margin:0 auto; height:auto; } #footer section{ float:left; width:21%; min-height:190px; height:auto; position:relative; padding:0 1.5%; } #footer section.page-foot .more a, #footer section.page-foot2 .more a{ text-decoration: underline; } #footer section.contact-info{ padding-left:0; width:25%; border-right:1px solid #e1d8de; } 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; } footer .tel a:hover,footer .tel a:focus, footer .email a:hover,footer .email a:focus, footer a:focus{ text-decoration:none; color: #000; } footer .tel a:focus-visible, footer .email a:focus-visible, footer a:focus-visible{ border: 2px solid #fff; outline: 2px solid #99CC00; } #footer section.legal-info, #footer section.page-foot{ border-right:1px solid #e1d8de; } #footer2{ float:left; width:1200px; margin:0 auto; padding:5px 0; display:block; color:#545454; font-size:1.1em; position:relative; border-top:1px solid #e1d8de; } #footer2 a{ color:#000; } #footer2 a:hover{ color:#2778ad; } #footer a{ color:#000; } #footer a:hover{ color:#2778ad; } footer h2 { color: #000; font-size:1.3em; font-weight:600; } footer h2 a{ text-decoration:none; } footer .right{ float:right; text-align:right; width: 20%; padding: 0 0 0; border:0; } footer .left{ float:left; width: 80%; padding:0 0 0; border:0; } ul.legal{ float:left; width:auto; padding:0 0 0 0; width:100%; margin:15px 0 0 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 .tel a:focus-visible, footer .email a:focus-visible { border: 2px solid #fff; outline: 2px solid #000!important; } /*************** main-intro *******************/ .main_contenttop{ float:left; width:100%; position:relative; background:#142A5C; border-bottom: 15px solid #D0AF2A; } .main-intro{ display:block; margin:0 auto; width:1200px; color: #fff; padding: 0; font-family: "Arial",Arial; } .main-intro h1{ float:left; width:100%; text-align:left; color: #fff; font-size: 2.7em; font-weight:normal; } .main-intro p{ width:85%; text-align:left; line-height:1.5em; font-size:1.5em; } .fx1one{ position:absolute; right:20px; bottom:-55px; } #homemaincontent_lower{ float:left; width:100%; padding:10px 0 0; border-top:1px solid #ccc; } .lower-left, .lower-center, .lower-right{ float:left; width:21% } .lower-left{ width:37%; } .lower-center{ width:37%; border-left:1px solid #ccc; border-right:1px solid #ccc; padding:0 1%; margin:0 1%; } .lower-right h3{ font-size:1.3em; } .testimonial { float:right; height:auto; padding:30px 0 20px 8%; width:92%; color: #545454; font-style:italic; text-align:left; margin:0 0 0; text-decoration:none; background:url("images/quote.png") no-repeat left top; } .testimonial h5{ float:left; width:100%; font-size:1em; text-align:left; font-weight:normal; font-style:normal; color:#999; } /*********** child **********/ .child-row{ width:100%; float:right; padding:10px 0; margin:0; border-bottom:1px solid #ccc; border-top:1px solid #ccc; border:none; } .childhomefull{ width:100%; float:left; margin:0 0; } .hometabs .row .childfeatext li{ padding: 10px 0; } .hometabs .row .childfeatext .btn{ margin-top: 30px; } .eventshome2{ padding-bottom: 30px; margin-bottom: 0; } .childhomefull .col-sm-6{ overflow: hidden; } .child-row-home{; display:block; padding:0 0; margin:0 auto; position:relative; } #carousel{ float:left; width:102%; position:relative; left:-1%; } .slick-list{ position: relative; display: block; overflow: hidden; margin: 0 0 0 -10px; padding: 0; } #carousel.slick-slider{ width:100%!important; position:relative; left:0; } #carousel .slick-prev{ background:url(images/arrow-left.png) no-repeat center center rgba(255,255,255,0.6); width:25px; left:0; height:45px; float: left; top:20%; padding:3px; position:absolute; z-index:999999; border:none; text-indent:-9999px; text-align:left; } #carousel .slick-next{ background:url(images/arrow-right.png) no-repeat center center rgba(255,255,255,0.6); width:25px; right:-2px; height:45px; float: right; top:20%; position:absolute; border:none; text-indent:-9999px; text-align:left; } .child-home{ float: left; height: auto; margin: 0; overflow:hidden; padding:10px 1% 10px; position: relative; height:auto; width:23%; } .child-home2rows{ width:48%; } #carousel.slick-slider .child-home{ width: auto; padding:10px; float: left; height: auto; margin: 0; overflow:hidden; position: relative; height:auto; } .child-home p{ float:left; width:100%; } .carouseldisplay .child-home { width:270px; padding: 10px 5px; } .child{ float:left; width:100%; margin:0 0 10px; } .child h3,.child h2{ padding:0; margin:0 0 8px; font-weight:normal; text-align:left; font-size:1.7em; font-family:'Arial'; } .child-home h3,.child-home h2{ width:100%; float:left; padding:0; margin:8px 0 5px; font-weight:normal; text-align:left; font-size:1.4em; font-family:'Arial'; } .child h3 a,.child h2 a{ color:#545454; text-decoration:none; } .child-home h3 a,.child-home h2 a{ color:#545454; text-decoration:none; } .child h4 a:hover,.child-home h4 a:hover, .child h4 a:focus,.child-home h4 a:focus{ color:#666; } .child h4,.child-home h4{ width:100%; padding:0; margin:0 0 5px; font-weight:normal; color:#545454; font-size:1.3em; text-align:left; font-family:'Arial'; } .child h4 a,.child-home h4 a{ color:#545454; } #child_wrapper{ float:left; width:100%; margin-top:30px; } .child_image, .child_image_home{ float:left; margin:0 0 0 0; padding:0; width:100%; height:auto; border:none; } .child_image{ margin:0 25px 0 0; width:auto; } .child_image img, .child_image_home img{ border:none; } .child-home .moreinfo{ font-family:'Arial'; font-size:1.1em; float:right; background:#9E9EA6; color:#fff; padding:3px 15px; text-decoration:none; text-transform:uppercase; margin-top:10px; } .child-home .homeprice{ font-family:'Lato'; font-size:2em; float:left; color:#1d3276; padding:3px 0; text-decoration:none; text-transform:uppercase; margin-top:10px; } /************** Gallery **************/ .gallery_wrapper{ padding:15px 0 0; float:left; width:100%; } .gallery_wrapper h3{ text-transform:uppercase; font-size:1.4em; color:#671a1c; } .ngg-galleryoverview{ float:left; width:100%; } .ngg-galleryoverview h3{ font-size:1.3em; text-align:center; margin:10px 0 10px; } .ngg-gallery-thumbnail { float: left; text-align: center; width:283px; height:auto; margin: 0.5%; } .ngg-gallery-thumbnail img { background-color: #fff; margin:0 auto; width:100%; position: relative; } .ngg-gallery-thumbnail a:hover img, .ngg-gallery-thumbnail a:focus img{ opacity: 0.8; } .ngg-gallery-thumbnail a:focus-visible{ border: 2px solid #fff; outline: 2px solid #000!important; } .ngg-gallery-thumbnail-box { float: left; margin-right: 5px; } .slidergall_images_desc{ position:absolute; z-index:9999; color:#fff; left:0; bottom:0; width:100%; } .slidergall_images_desc span{ padding:8px 2%; width:96%; float:left; } /*********** 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_itemsteam{ float:left; width:100%; position:relative; padding:0 !important; border-top:1px solid #ccc; } .list_items_products{ float:left; width:100%; } .list_items_products .item{ float:left; width:48%; margin-left:4%; border-bottom:1px solid #ccc; border-top:0; } .list_items_products .item:first-child{ margin-left:0; } .list_items_products .item h4 { font-size:1.4em; margin-top:0; } .list_items_products .item h4 a{ color:#545454; line-height:1em; } #lists{ float:left; width:100%; padding-bottom:35px; } /* 1.23 FIX: .item is reused in two unrelated contexts - the legacy list_items template (a plain stacked list, needs width:100% and float:left) and the Bootstrap-grid-based blog/listing templates (which combine .item with Bootstrap col-* classes to do the actual real column sizing). This rule used to win over Bootstrap's own col-lg-3/col-xl-3 width purely because of load order - Bootstrap was moved into , before this stylesheet, specifically to fix a button-colour conflict (version 1.4). That was the right fix for that problem, but it had this side effect: with equal specificity, whichever stylesheet loads later wins, and this rule's width:100% started winning over Bootstrap's width:25% wherever the two classes ended up on the same element. Confirmed live: the blog page's posts were rendering full-width, one per row, instead of the 4-per-row configured in the page's own "How many posts on a row?" setting. Fix: removed width and float from here (where they fight Bootstrap), and added them back scoped specifically to .list_items .item just below, which is the one template that still genuinely needs them and has nothing to do with Bootstrap's grid at all. Confirmed live afterward: the blog page's items rendered at an even 283px each, correctly matching 4 equal columns. */ /* 1.24 FIX: this had zero horizontal padding (right/left), which directly cancelled Bootstrap's own column gutter (.row applies a matching negative margin expecting each column to supply its own padding to create visible spacing). Same underlying load-order cause as the 1.23 width fix - this stylesheet loading after Bootstrap means ties go to whichever one is set here. Confirmed live: 0px gap between images before, 30px after adding horizontal padding. Also added a touch more bottom padding for breathing room between rows. */ .item{ height:auto; min-height:110px; padding: 15px 15px 20px; position:relative; margin-bottom: 40px; } .list_items .item{ float:left; width:100%; } .item h2{ font-size:1.4em; } .item-image{ float:left; margin:0 15px 0 0; } .item-image img{ border:none;} .itemteam { float:left; width:376px; height:auto; min-height:110px; padding: 15px 7px 0; position:relative; line-height:1.6em; text-align:left; } .itemteam h2{ margin:0 0 7px; color:#ee6321; } .teamimage{ float:left; margin-bottom:10px; margin-right:15px; } .item p{ line-height:1.5em;} .item h2 a{ color:#000; text-decoration:none; font-size: 0.9em ; } .item-title{ left:0; width:100%; text-align:left; margin:5px 0 5px; } .item-title a{ color:#000; font-size:1.1em; } .item a:hover, .item a:focus{ color:#1ca795; } .item a:focus-visible{ border: 2px solid #fff; outline: 2px solid #000!important; } .item_content h2{ margin:0; padding:0; } .item2 .item-title{ position:relative; top:0; } .item_image { float: left; margin: 0 10px 10px 0; position: relative; } .item_image img{ border:0; } .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:#000; } .more a:hover, .item .more a:hover, .child-home .more a:hover, .child .more a:hover{ text-decoration:none; color:#545454; } .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{ border: 2px solid #fff; 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; 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:758px; padding:10px 10px; 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:460px; margin:0 0 8px; padding:0; list-style:none; position:relative; left:-5px; } #tabsprodul li{ float:left; width:105px; margin:5px ; list-style:none; height:75px; } #tabs ul#tabsul li a.tabprices{ color:#ee6321; } a#moreinfoprod{ width:100px; margin-bottom:10px; text-transform:uppercase; 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:47%; margin-left:6%; border-bottom:1px solid #ccc; border-top:0; text-align:left; } .list_items_products .item:first-child{ margin-left: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:450px; height:auto; min-height:230px; position:relative; margin:0 10px 0 0 ; } #image-main { width:450px; 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:460px; 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%; background:#E9E9E9; } .wp-pagenavi{ border:none; margin-right:15px; text-decoration:none; color:#545454; font-family:"Lato"; font-size:1.1em; text-transform:uppercase; text-shadow:none; padding:5px 0 5px 15px; } .wp-pagenavi span.pages,.wp-pagenavi a.nextpostslink{ border:none; } .wp-pagenavi a{ color:#545454; text-decoration:none; } .wp-pagenavi span.pages{ margin-right:10px; } .wp-pagenavi a.page, .wp-pagenavi span.current, .previouspostslink, .nextpostslink, .wp-pagenavi a.first, .wp-pagenavi a.last, .wp-pagenavi span.extend{ margin-right:10px; border:none; padding:3px 8px; } .wp-pagenavi a:hover, .wp-pagenavi span.current { color:#005731; } .wp-pagenavi a:focus{ color:#005731; outline: 2px solid #000!important; } .wp-pagenavi a:focus-visible, .wp-pagenavi a.page:focus-visible{ border: 2px solid #fff; outline: 2px solid #000!important; } .wp-pagenavi a.nextpostslink{ } /******** Slideshow **************/ #slideshow_main{ float:left; width:100%; margin:0 auto 0; height:500px; padding:0 0 0; z-index:10; overflow:hidden; position:relative; } #slideshow{ display:block; margin:0 auto 0; width:100%; height:500px; color:#fff; position:relative; } #slideshow_inner{ float:left; margin:0 auto 0; width:100%; color:#fff; position:relative; background: #000; } #slideshow p{ margin:0 0 10px ; } /* Overlay */ .slider::before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; background-color: rgba(0,0,0,0.4); /*background-image: url("images/Overlay.png");*/ background-repeat: no-repeat; background-position: center -15px; z-index: 999; } .slider::after{ content: ""; width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; background-image: url("images/Overlay.png"); background-repeat: no-repeat; background-position: center -15px; z-index: 999; } .pics { float:left; height: 500px; margin: 0; padding: 0; z-index:1; width:100%; } .slider{ float:left; width:100%; height:500px; padding:0 0; position:relative; } .slider img{ position:absolute; z-index:5; left: -9999px; right: -9999px; top:0; margin: auto; } .slider_text{ position:absolute; bottom: 150px; left:0; height:auto; width:100%; padding:0 ; margin:0 auto; font-family: 'poppins',sans-serif; text-align:left; font-size:1.2em; color:#fff; line-height:1.5em; z-index: 9999; } .slider_text_main{ display:block; margin:0 auto; width:100%; max-width:1320px; } .slider_text_main2{ float:left; margin:0 0 0 0; width:800px; padding:0; } h2.slide-title1, h1.slide-title1{ float:left; width:auto; color:#fff; padding:10px 15px; margin:0 0; font-size:3.2em; line-height:1.1em; font-family: 'poppins',sans-serif; font-weight: 800; } h2.slide-title1 .smaller, h1.slide-title1 .smaller{ color: #D3EFFF; font-weight: 400; font-size: 0.58em; } .slide-text2{ float:left; width:96%; color:#fff; font-family: 'playfair display',sans-serif; padding:10px 2%; position:relative; bottom:5px; text-align:left; margin:15px 0 0; font-size:1.2em; line-height:1.4em; } .slider_text_main2.right .slide-text2{ text-align:right; } .slider_text_main2.left .slide-text2{ text-align:left; } #navi { width:auto; height: 10px; list-style:none; z-index:9999; position:absolute; margin: 0 0 0; left: 50%; transform: translate(-50%, 0); bottom:15px; } #navi span { border-radius: 9px; display: inline-block; height: 9px; margin: 0 5px 0 0; text-align: left; text-indent: -99999px; background:#fff!important; color:#000; width: 8px; } #navi .cycle-pager-active { background:#ccc; } /******** Slideshow pages **************/ .pics2 { float:left; height: 220px; margin: 0; padding: 0; z-index:1; width:100%; } /******** viewing buttons *******/ #accessibilitytringer{ float:left; width:auto; border:none; font-size: 1.1em; font-weight: 600; padding:0 0 ; margin:0 30px 0 0; position: relative; color:#545454; background: none; z-index: 999999; } #accessibilitytringer i{ font-size: 1.1em; position: relative; top: -1px; } #accessibilitytringer:hover, #accessibilitytringer:focus{ color:#000; } #accessibilitytringer:focus-visible{ border: 2px solid #fff; outline: 2px solid #000!important; } footer #viewing{ float:left; width:auto; position:absolute; right:0; top:-90px; margin: 5px 0 0 0; z-index: 999999; display: none; } header #viewing{ float:left; width:auto; position:absolute; left:0; top:40px; 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{ border: 2px solid #fff; 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; } /***************** cforms ********************/ .wpcf7-form { width:96%; height:auto; padding:15px 2%; margin:0 0 30px 0; float:left; height:auto; background:#F0F0F0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; } .wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select { background:none repeat scroll 0 0 #F9F9F9; border:1px solid #CCCCCC; margin:0 0 15px; border-radius:4px; padding:4px 0.5%; float:left; width:99%; } .wpcf7-form textarea{ height:100px; } .wpcf7-form input[type='checkbox'], .wpcf7-form input[type='radio']{ width:20px; margin-right: 10px; margin-top: 3px; } .wpcf7-list-item{ float:left; width:45%; } .wpcf7-form-control.wpcf7-radio{ width:100%; float:left; } .wpcf7 input.wpcf7-submit{ background:#6D6C72; padding:8px 35px; text-decoration:none; color:#fff; width:auto; border:none; border-radius:4px; float:right; margin-right:15px; text-transform:uppercase; } span.wpcf7-not-valid-tip{ float:left; width:96%; padding:5px 2%; border:1px solid #f00; } #fieldcheck{ display:none; } #mc-embedded-subscribe-form label{ display:none; } /****************** map frame****************/ .map_frame{ float:left; width:100%; margin-right:15px; } .map_frame iframe{ width:100%; height:350px; } /*********************** tables **************/ .easy-table th, .easy-table td{ padding:8px 8px 8px 0; } /************* newsletter *******************/ #mc-embedded-subscribe-form, #mc_embed_shell{ float:left; width:90%; padding:3px 3px; position:relative; } .home_right #mc-embedded-subscribe-form{ margin:0 0 40px; width:100%; padding:0; } .home_right #mc_embed_signup .mc-field-group{ width:100%; } .home_right #mc-embedded-subscribe-form input{ border:1px solid #ccc; float:left; width:96%; padding:2px 2%; margin:0 0 5px; } #footer_section #mc-embedded-subscribe-form input#mce-name, #footer_section #mc_embed_signup #mce-FNAME, #footer_section #mc_embed_signup #mce-LNAME{ float:left; width:96%; padding:4px 2%; background:#fff; margin-bottom:10px; border:1px solid #ccc; border-radius: 4px; } #footer_section #mc-embedded-subscribe-form input#mce-EMAIL, #footer_section #mc_embed_signup #mce-EMAIL{ float:left; width:96%; padding:4px 2%; background:#fff; border:none; border:1px solid #ccc; border-radius: 4px; } #footer_section #mc-embedded-subscribe-form #mc-embedded-subscribe, #footer_section #mc_embed_signup #mc-embedded-subscribe{ float:right; background:#0190B7; color:#fff; border:none; width:20px; border-radius: 4px; padding:2px 3px; margin-left:5px; position:absolute; right:0; bottom: 5px; } .home_right #mc-embedded-subscribe-form #mc-embedded-subscribe{ float: left; width: 100%; background: #a3a3a1; color: #fff; text-transform: uppercase; font-size: 1.1em; border: none; padding: 0; border-radius: 0; margin: 20px 0 0; } .unclickable > a:hover { cursor: default; } /***********map ********/ /*********************** tables **************/ .tablepress tbody td, .tablepress tfoot th { border:none!important; } .tablepress thead th { background:#e1e0e3!important; } .tablepress th, .tablepress td{ padding:2px 4px!important; } .tablepress tbody tr{ border-bottom:1px solid #ccc; } /***********Sahring buttons ****************/ .sharing-buttons{ width:80px; display:block; clear:both; padding: 15px 0; background:#fff; } .fb-share-button{ float:left; width:20px; height:20px; margin:0 5px 0 0; background:url("images/sharing-facebook.png") no-repeat 0 0; text-indent:-9999px; cursor:pointer; } a.twitter-button{ float:left; width:20px; height:20px; margin:0 5px 0 0; background:url("images/sharing.jpg") no-repeat -23px 0; text-indent:-9999px; } a.gbutton{ float:left; width:23px; height:20px; margin:0 5px 0 0; background:url("images/sharing.jpg") no-repeat -48px 0; text-indent:-9999px; } h2.woocommerce-loop-category__title, ul.products li.product h2.woocommerce-loop-product__title{ color: #333!important; font-size: 1.3em!important; } .related{ float: left; width: 100%; } .cart-customlocation, .myaccountlink{ width: auto; float: left; margin-top: 5px; margin-left: 25px; color: #333!important; font-size: 1.5em!important; } /***************** logos footer************/ .homelogosmainwarpper{ float:left; padding:80px 0 80px; width:100%; background:#545454; color: #fff; } .homelogosmaintitle span.pretitle{ font-family: 'poppins', Arial; font-size:2em; } .homelogosmaintitle h2{ float:left; width:100%; text-align:left; margin:0 0; font-size:3.5em; font-weight:700; line-height: 0.9em; color:#fff; } .homelogosmainwarpper p{ margin-top: 15px; font-size: 1.1em; } .homelogos{ display: table-cell; vertical-align: middle; padding:0 1.5%; line-height: 140px; width:12.5%; text-align:center; } .gallogos{ float:left; vertical-align: middle; padding:0 1.5%; line-height: 140px; width:22%; text-align:center; margin-bottom:20px; } #wrapper2 .homelogos{ margin-top:40px; } .gallogos img, .homelogos img{ max-height:130px; max-width:100%; vertical-align: middle; margin: 0 auto; direction:block; } .gallogos img{ max-height:140px; } .homelogos img:hover, .gallogos img:hover{ filter: grayscale(100%) opacity(80%); } .subhedlist{ font-size:1.1em; color:#777; margin:7px 0 15px; } /*************** comment form ******************/ h3#reply-title, h3.reply-title { font-size:1.4em; color:#333; margin-top:0; } .comment_count { color:#666; float:left; width:100%; height:auto; margin-bottom:20px; padding:15px 0 0; margin:40px 0 0; border-top:1px solid #ccc; } .comment-author { font-size: 1.2em; } #comment img { float:left; width:45px; margin-right:20px; } #comment { float:left; border-bottom:1px solid #E7E7E7; line-height:24px; margin:20px 0 0 0; padding:20px 0 20px 0; position:relative; width:95%; } .comment p { margin-top:15px; margin-left:65px } .comment-reply-link { margin-left:65px } .commentmetadata { color:#999; } #respond, .respond { border:1px solid #C5C5C5; padding: 15px; margin:30px 0; width:95%; float:left; height:auto; background:#f0f0f0; } .respond .left { float: left; width: 45%; margin-right:2%; } .respond .right { float: left; width: 49%; border-left:1px dashed #ccc; padding-left:3%; } .respond .left ul, .respond .right ul { float:left; margin:0; width:100%; list-style:none; } .respond .left ul li, .respond .right ul { margin:0; float:left; width:100%; list-style:none; } #respond input[type=text], #respond textarea { width:98%; margin:0 0; background:none repeat scroll 0 0 #F9F9F9; border:1px solid #CCCCCC; box-shadow:1px 1px 1px rgba(0, 0, 0, 0.1) inset; padding:4px; } #respond textarea #comment{ height:120px; } #respond label, .respond label { width:95%; margin:0%; padding:2px; } .respond input[type="text"], textarea, .respond input[type="password"] { background: #fff; border: 1px solid #ccc; padding: 4px 10px; width: 90%; } .respond .remember span { float:left; position:relative; top:-3px; } .respond form#loginform { width:97%; } .reply{ float:left; width:100%; } #respond input[type=submit], .respond input[type=submit] { color:#fff; border:none; padding: 12px 35px; background:#bbb; margin:15px 0 0; text-transform:uppercase; } input#log, input#login_password { float: left; width:90% !important; margin: 8px 5%; padding: 7px; margin-bottom:15px !important; background:#fff !important; } input#rememberme { float: left; width:10px; } form#loginform, form#lostpasswordform { height:auto; float:left; width:50%; } /***************** flags************/ .switcher,.switcher-popup{ position:relative; float:right; right:0; top:2px; margin-left:20px; } .header_right_wtranslator .ul_social{ min-width:160px; margin-top:35px; } .cf_hidden, .linklove, .nodisplay, .mobile_nodisplay, .linklove, #linklove{ display:none; } .onepagesite .home_left,.onepagesite .home_right{ border:none; margin-top:15px;} /***************** Guttentor Styles *************/ .gutentor-image-wrapper .gutentor-image-thumb img, .gutentor-element-image .gutentor-image-thumb img, .gutentor-gallery .gutentor-single-item-image-box img{ max-width: 100% !important; height: auto !important; } .gutentor-single-item .gutentor-single-item-content .gallery-icon.fa-search{ font-size: 40px!important; } .wp-block-image img { max-width: 100% !important; height: auto !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; } /***************** soocomerce *************/ table.wc-block-cart-items .wc-block-cart-items__header, .wc-block-cart .wp-block-woocommerce-cart-order-summary-block, .wc-block-cart .wc-block-cart__totals-title, table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total{ font-size: 1.3em!important; } table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name, table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices, .wc-block-components-product-metadata .wc-block-components-product-metadata__description > p, .message__messaging{ font-size: 1.2em!important; } /***************** no display messages *************/ .welcomelarge, .welcomedyslexia, .welcomestyleoff{ display:none; } #skiplinks a{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; color:#000; } #skiplinks a:focus{ position:static; width:auto; height:auto; } .container-youtube, .container-vimeo{ margin-bottom:10px; } /* ===== NEW CODE FROM HERE ===== */ /* Package feature ticks */ .package-features { list-style: none; margin: 0; padding-left: 0; } .package-features li { position: relative; padding-left: 28px; /* space for the tick */ margin: 6px 0; line-height: 1.5; } .package-features li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px; background: url("data:image/svg+xml;utf8,") no-repeat center / contain; /* purely decorative */ } .video-background { position: relative; overflow: hidden; } .video-background video { width: 100%; height: 100%; object-fit: cover; } .video-toggle{ position:absolute; right:20px; bottom:20px; background:#8B1E59; /* brand purple */ color:#fff; border:0; padding:10px; border-radius:50%; cursor:pointer; z-index:1000; opacity:0; transition:opacity .25s ease, border-radius .2s ease; } /* reveal control on hover, keyboard focus, or a show-control class toggle */ .video-background:hover .video-toggle, .video-background:focus-within .video-toggle, .video-background.show-control .video-toggle { opacity:1; } /* squared on hover/focus (no color change). Focus gets a real visible ring (matching the site's existing focus-visible style elsewhere) instead of outline:none with nothing to replace it, so a keyboard user tabbing to this button can actually see that it is focused. */ .video-toggle:hover, .video-toggle:focus { border-radius:4px; } .video-toggle:focus-visible { outline:2px solid #000; box-shadow:0 0 0 2px #fff; } .video-toggle svg { display:block; } #slideshow_main::after { pointer-events: none; } /* keep clicks/hover passing through */ /* ================================ Scoped Accordion Styles – Bognor Websites ================================ */ .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; } /* Contact page only: style the icon circles and apply the SVGs */ .page-id-4662 .gutentor-single-item-icon-box, #post-4662 .gutentor-single-item-icon-box{ width:40px; height:40px; border-radius:50%; background-color:#8c1d64; display:flex; align-items:center; justify-content:center; margin-bottom:10px; background-repeat:no-repeat; background-position:center; background-size:20px 20px; } /***************************** Responsive design *******************/ /***************************** Larger Screens *******************/ @media only all and (min-width: 1220px){ .slider img {width:100%;} #slideshow_main{ height:770px; overflow:hidden;} .slider,.pics{ height:770px;} .header_imagefull{ width:100%;} .home-header-image{ min-width:100%; min-height: 770px;} .home-header-imagesmaller{ width:1200px;} .header_imagefull{ width:100%;transform: translate(-50%, 0);} } @media only all and (max-width: 1220px){ #header{ width:98%; padding:0 1%; float:left;} #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {padding: 0px 15px;} } @media only all and (max-width: 1320px){ #header{ width:98%; padding:0 1%; float:left;} #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {padding: 0px 15px;} } @media only all and (min-width: 1400px){ .slider img {width:100%; top:-20px;} } @media only all and (min-width: 1500px){ #slideshow_main{ height:750px; overflow:hidden;} .slider,.pics{ height:770px!important;} .slider img {width:100%; top:-30px;} .header_imagefull{ width:100%;transform: translate(-50%, 0);} } @media only all and (min-width: 1600px){ #slideshow_main{ height:770px; overflow:hidden;} .slider,.pics{ height:770px!important;} .slider img {width:100%; top:-50px;} .header_imagefull{ width:100%;transform: translate(-50%, 0);} } @media only all and (min-width: 1790px){ #slideshow_main{ height:770px; overflow:hidden;} .slider,.pics{ height:770px!important;} .slider img {width:100%; top:-50px;} .header_imagefull{ width:100%;transform: translate(-50%, 0);} } /*************** iPads (landscape) and smaller screens ***************/ @media only all and (max-width: 1220px){ #wrapper,.homelogosmaintitle{ width:98%; padding:0 1%;} .crumb{width:98%; padding:0 1%;} .childhomefull{width:98%; padding:7px 1% 0;} .childhomefull3{width:98%; padding:30px 1%;} #header{ width:98%; padding:0 1%; float:left;} #content{ width:100%; border:none;} #content img{ max-width:100%; height:auto;} h1{ font-size:1.7em;} /******** slideshow **************/ #slideshow_main{ width:100%;} #slideshow,.slider,.pics,#slideshow_main{ height:445px;} .slider_text_main{ width:98%; padding:0 1%;} .slider img{ width:1500px;} .slider_text_main2.left,.slider_text_main2.right{ margin-top:100px;} .slider_text_main2.left a,.slider_text_main2.right a{ color:#fff;} #slideshow_main.headerimage{ height:350px; overflow:hidden;} #slideshow_main .home-header-image{ width:1300px;} /*************header iamge **********/ .home_header_image{ width:1800px;} .header_image_text{ width:96%; padding:40px 2%;} .header_image_text2{ position:relative; right:30px;width:370px;} .header_image_text h2{ font-size:2em;} .header_image_text p{ font-size:1.3em;} .child-row-home{ width:100%;} .header_right{ margin: 0;} header .contact .tel{ font-size:1.3em;} header .email{ font-size:0.95em;} a.cart-customlocation{ margin-left:10px;} .child_image_home,.child_image_home img{ width:100%;} #carousel{ padding-bottom:40px;} #carousel,.caroufredsel_wrapper{ width:100%!important;} .carouseldisplay .child-home{width:24.5%; padding:10px 0.25%; float:left;} .child_image img, .child_image_home img{ width:100%;} /*** header******/ header .logo a img{ max-width:380px;} .header_bottom{ width:550px;} #crumb{ width:96%; padding:0 2%;} header .contact .tel a{ text-decoration:none;} /**** nav ***********/ nav{ right:5px;} nav ul#menu-main a{ padding:12px 10px; font-size:1em;} /***** homepage *******/ .hometemplates img{ max-height:350px;} /******** general *********/ .main-intro{ width:100%;} .main-intro_bg{ padding:40px 0 20px;} .main-intro h1{ font-size:2.7em;} .main-intro .main_content{width:96%; padding:0 2%;} .gallery_wrapper .ngg-gallery-thumbnail img{ width:220px; height:auto;} h2.user-event-head{ margin-bottom:0 0 5px;} /******** footer **********/ #footer2{ width:100%;} .footer_bg, #footer_section{ width:96%; padding:0 2%;} #footer section{ min-height:160px;} footer .left{ width:85%;} footer .right{ width:15%;} #accessibilitytringer,header .tel, header .email{font-size:1em;} } /*************** iPads (portrait) and tablets(landscape) ***************/ @media only all and (max-width: 1023px){ #wrapper,.crumb{width:96%; padding:0 2%;} #header{ width:98%; padding:0 1%;} #content{ width:100%; border:none;} #content{ width:100%; border:none;} #content img,.wp-block-image img{ max-width:100%!important; height:auto!important;} aside{ display:none;} h1{ font-size:1.7em;} a.enquiry-button{ top:30%;} /******** slideshow **************/ #slideshow_main{ width:100%;} #slideshow,.slider,.pics,#slideshow_main{ height:345px;} .slider_text_main{ width:100%;} .slider img{ width:1150px;} .slide-text2{ font-size:1em;} h2.slide-title1{ font-size:1.3em;} .slider_text_main2.left,.slider_text_main2.right{ margin-top:100px;} .slider_text_main2.left a,.slider_text_main2.right a{ color:#fff;} #navi{ left:48%;} #slideshow_main.headerimage{ height:350px; overflow:hidden;} #slideshow_main .home-header-image{ width:1300px;} /*************header iamge **********/ .home_header_image{ width:1300px;} .header_image_text{ width:96%; padding:40px 2%;} .header_image_text h2{ font-size:2em;} .header_image_text p{ font-size:1.2em; margin-top:0;} .header_image_text2{ position:relative; right:30px; width:370px;} .child-row-home{ width:96%; padding:0 2%;} .child-row-home { width: 102%;padding: 0;left: -1%;} .child-home h3{ font-size:1.3em;} .home_scroller li#side-article3{ display:none;} .home_right h3{ float:left; width:100%;} .child-home{ width:48%; min-height:390px;} #carousel,.caroufredsel_wrapper{ width:100%!important; left:0!important;} .carouseldisplay .child-home{width:49%; padding:10px 0.5%; float:left;} .child_image img, .child_image_home img{ width:100%;} .header_image_wrapper{ height:auto!important;} /*** header******/ header .logo a img{ max-width:400px;} .header_right{ width:50%; margin:30px 0 0 15px;} .header_bottom{ width:auto; position:absolute; top:-38px; right:5px; margin:0;} .header_left{ width:400px;} header .contact{ margin-right:0; margin-top:32px;} #crumb{ width:96%; padding:0 2%;} .header_image{ width:1000px;} .searchform_main{ position:realtive; float:right;} #searchform{ width:180px;} #s{ width:100px;} header .contact .tel a{ text-decoration:none;} .ul_social li{filter:brightness(0) invert(0.9)!important;} .childhomefull ul.products li{ width:31.3%!important;} .childhomefull ul#productshome li:last-child{ display:none;} /**** nav ***********/ nav{width: 100%; position: absolute; margin-top: 0; top:0} #nav {float: left;width: 100%; margin-top: 0} #viewing:focus-within,nav:focus-within {left:0;} #menu-handheld{ display:block;} #menu-handheld-close{ display:block;} /******** general *********/ .home_right{ width:100%; margin: 10px 0} .home_left{ width:100%; padding:10px 0;} .hometemplates img{ max-height:250px;} /******** general *********/ .main-intro{ width:100%;} .main-intro_bg{ padding:40px 0 20px;} .main-intro h1{ font-size:2.1em;} .main-intro .main_content{width:96%; padding:0 2%;} .gallery_wrapper .ngg-gallery-thumbnail img{ width:220px; height:auto} /******** footer **********/ #footer2{ width:100%;} .footer_bg, #footer_section{ width:96%; padding:0 2%;} #footer section{ min-height:150px; margin-bottom:20px;} #footer section.legal-info{ width:43%; padding-right:0;border:none;} #footer section.contact-info{ width:43%;border:none;} #footer section.contact-info2{ width:43%;border:none;} #footer section.page-foot{ width:43%; border:none; padding-left:0} #footer section.page-foot2{ width:43%; padding:0; height:auto; min-height:40px;} footer .left{ width:70%;} footer .right{ width:30%;} } /*********** iPhone/Smartphones (portrait) ----------- */ @media only all and (max-width: 1040px){ #wrapper,.crumb{width:92%; padding:0 4%; float:left;} #wrapper,.crumb{width:92%; padding:0 4%; float:left;} .header_right{ position:absolute; color:#fff; width:100%; margin:0; top: 0; z-index: 99999;} #header{ width:100%; padding:0; float:left; border-top: 45px solid rgb(34, 34, 34);} header{ background:#fff !important; } .header_top {width:96%!important; padding:0 2%;} .header_left {width: 80%;position: absolute;top: -47px;left: 0;} #searchmain i{color: #fff;} #searchmain{margin: 0;} #searchform {width: 250px;} #search{ width: 150px;} .ul_social{ margin-top: 0;float: left;padding: 0 0 0 20px;} .ul_social li a i {font-size: 1.3em;} #content{ width:100%; border:none;} .homelogosmain{ width:100%;} .content_image{ width:100%; margin-bottom:15px;} #content img,.wp-block-image img{ max-width:100%!important; height:auto!important;} h1{ font-size:1.7em!important;} #viewing2{ position:relative!important; top:0!important; left:0!important;} #viewing2 ul li{ margin-bottom:10px!important;} .slideimages,.slideimagesmain{ width:100%!important; height:250px!important;} .content_imageportrait .slideimages{height:500px!important;} #content_imageslideshow img{ width:100%!important;height:auto!important;} /******** slideshow **************/ #slideshow_main{ width:100%;} .slider_text_main{ width:100%;padding:0;} .slider_text{ bottom:26px!important;} #slideshow .slide1st,#slideshow .slide2nd{padding: 10px;margin-top:0;} #navi{bottom:0;} #slideshow_main.headerimage{ height:150px;} #slideshow_main .home-header-image{ width:1000px;} .slidesnobg h2.slide-title1{ font-size:1.7em!important;} .slider_text_main2 {width: 96%;font-size: 0.8em;} #home_left_full{margin-bottom: 30px;} .maintext {padding: 0;font-size: 0.8em;} .containerjoinhone {min-height: 600px;} .cart-customlocation, .myaccountlink{color: #fff!important;} .containerjoinhone {min-height: 200px;padding: 50px 0;} .ps-5{padding-left: 0 !important;} /***** homepage *******/ .home_right{ width:100%; margin: 10px 0;} .home_left{ width:100%; padding:10px 0 !important; margin:0;} .main_content{ float:left; width:100%;} .hometemplates{ width:100%; margin-bottom:25px;} .hometemplates img{width:100%; height:auto;} .headerimagetext {font-size: 1.5em;} .header_image_wrapper{ height:auto!important;} /*************header iamge **********/ .caroufredsel_wrapper{ width:100%;} .child-row-home{ width:96%; padding:0 2%;} .child-home,.childfeatured{ width:100%; min-height:290px; padding:10px 0;} .childfeatured{ width:96%!important; margin-bottom:30px;} .child-home h3{ font-size:1.6em;} .child_image{ width:100%;} .child_image img, .child_image_home img{ width:100%; margin-top:10px;} .childhomefull3 h2{ font-size:2em; line-height:1.6em;} .home_right h3, .home_left h3{ font-size:1.6em;} header .logo{ width:100%;} header .logo a { width:96%; padding:0 2%; text-align:center;} header .logo a img { max-width:310px; display:block; margin:0 auto;} .ul_social li{filter:brightness(0) invert(0.9)!important;} /*** header******/ .header_image_wrapper{ height: auto !important;} .header_image{ width:100%;} .headerbutton2,.headerbutton1{ width:49%; margin: 10px 0 0 0!important; min-width:50px; text-align:center; padding:5px 2%;} .headerbutton1{ margin-left:2%!important;} .header_left{ width:100%; position:relative;} .header_bottom {width: 90%;position: absolute;right: 5px;top: -38px; margin-top:0;} .searchform_main2{ width:45%;border:none;} .searchform_main2 #searchform{ width:100%;} .searchform_main2 #s{ width:60%; font-size:0.8em;} header .contact{ width:100%; float:left; margin:10px 0 0;} header .contact .tel{ float:left; text-align:left;font-size:1.1em;} header .contact .tel a{ text-decoration:none;} header .email{ float:right; text-align:left; font-size:0.9em} #crumb{ width:96%; padding:0 2%;} .header_left {width: 80%;position: absolute;top: -47px;right: 5px;} #content .item-image,#content .item-image img{ width:100%;} .float30,.s30left,.s30right{width:100%!important; padding:0 0 10px!important;} .switcher{ top:0;} .slideimages{ overflow:hidden; height:280px;} .slidergall_images{ height:auto!important; width:100%!important;} .picture-left, .picture-right{ width:100%; max-width:100%;} .half_left,.half_right{ width:100%!important;} .post_tags a{ width:100%;} .homelogos{ width: 35%;margin: 0 5%;display: inline-block; line-height:60px;} .headerimagetext{ font-size:1.3em; line-height:1em;} .headerimagetext2{ font-size:0.7em;line-height:1em;} /**** nav ***********/ nav{width: 100%; position: absolute; margin-top: 0; top:0} #nav {float: left;width: 100%; margin-top: 0} #viewing:focus-within,nav:focus-within {left:0;} #menu-handheld{ display:block;} #menu-handheld-close{ display:block;} .main-intro{ width:100%;} .main-intro_bg{ padding:40px 0 20px;} .main-intro h1{ font-size:2em;} .main-intro .main_content{width:96%; padding:0 2%;} .gallery_wrapper .ngg-gallery-thumbnail img{ width:100%; height:auto;} #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout.mega-align-bottom-right li.mega-menu-item a.mega-menu-link{ text-align: left!important;} .homelogosmainwarpper {font-size: 0.85em;} /******** footer **********/ #footer2,.footermesg,.footer_bg, #footer_section,.footermesg{ width:92%; padding:0 4%;} #footer section{ margin-bottom:20px;} #footer section.legal-info{ width:100%;padding:10px 0 0;border:none;} #footer section.contact-info{ width:100%;border:none;} #footer section.page-foot{ width:100%; border:none; height:auto;padding:10px 0 0} #footer section.page-foot2{ width:100%; padding:10px 0 0; border:none; margin-top:10px; height:auto} footer .left{ width:100%;} footer .right{ width:100%;} #viewing2 ul{ font-size:0.8em} #viewing2 ul li{ margin-left:5px;} #viewing2 ul li a.off3{ margin:3px 4px 0 0} #viewing2 ul li a.off2{ margin:3px 4px 0;} .homelogosmaintitle{ width:100%;} .grid-container,.child-row{ padding-right: 0!important; padding-left: 0!important;} .wp-block-spacer{ height: 10px!important;} #slideshow,.slider,.pics,#slideshow_main{ height:370px!important;} #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {width: 100%!important;} #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open ~ button.mega-close { left: 92%;right: 0;} header .email{display: none;} #accessibilitytringer{color: #fff;font-size: 0.85em;margin-top: 3px; } /* 1.17 FIX: on hover/focus, #accessibilitytringer:hover,:focus{color:#000} (unconditional, defined much earlier in this file) beats this mobile white-text override because a pseudo-class selector is more specific than a plain one - so on hover, this button turned black on a bar that is actually rgb(34,34,34), not pure black. Contrast ratio was 1.32:1 (should be 4.5:1+), confirmed via live hover test. This override wins back to white specifically for hover/focus on mobile, without touching the desktop behaviour (black-on-light is correct there and is untouched, since this rule is scoped to this same max-width:1040px media block). */ #accessibilitytringer:hover, #accessibilitytringer:focus{ color: #fff !important; } .header_right {position: absolute; background: none;top: -55px;font-size: 0.9em;left: 130px; width:auto;margin:8px 0;} .ul_social{padding: 0;} #searchtriger{margin: 0 0 0 0;} .childhomefull {padding: 7px 1% 30px;} .childhomeimage img{width: 100%; margin-bottom: 20px;} #container header .tel a,#container header .tel a i{color:#fff; font-size:0.9em} .header_right{left: 280px;} .searchform_main{top: 35px;left: -150px;} } @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) ")"; } abbr:after { content: " (" attr(title) ")"; } a.item_image:after,a.child_image:after,.item h4 a:after,#navi2 a:after, #navi3 a:after,#tabsprodul li a:after{ content:""; } .ir a:after { content: ""; } /* Don't show links for images */ 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; } #out,#container,#content,#wrapper{ width:auto !important;} #images_main,#images,#navi2,.home_center,,.main-intro,#tabs .ui-tabs-panel{ width:100% !important;} .content_image {float: right;width: 350px!important;} .child_image img, .child_image_home img{float: left;width: 500px!important; margin-bottom:15px;} .home_tabs .more,.more,.mapframe, .child .more, header, footer, nav, aside, #featured, ul.ul_solutions, .contact, #cformsform, #crumb, #slideshow_main, #navi-header, .header_image, .child-row-home,#footer, .pre_header_main,.cform,.header_image_wrapper,.download-link,.preheadermain,.keyareas,a#main, #tabsprodul .ui-state-active,#tabsul,.home_right,.tablepress caption, a.enquiry-button{ display:none!important;} .home_left{ border-top: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:150px !important;} #images_main,#tabsprod{ width:100% !important;} .ui-tabs-panel, .ui-tabs-panel img{ width:400px !important; float:left !important;} #tabsprodul,#tabsprodul li,#tabsprodul li img{ width:160px !important; float:left !important;} #tabs .ui-tabs-panel{ border:none !important;} #tabs #tabs-2,#tabs #tabs-3,#tabs #tabs-4,#tabs #tabs-5,#tabs #tabs-6{ display:block!important; float:left!important; width:100%!important;} } /* 1.18 FIX: the "Find out what we can offer" button (homepage) sits in a narrow Gutentor column that stacks to full width on mobile. It had no bottom margin, so once stacked it butted straight up against the "Affordable Websites, Professionally Designed" heading below it, with no gap - visible only in the responsive/stacked view, not on desktop where the column sits beside the text instead of above it. This was originally patched via the WordPress "Extra CSS" box rather than the theme itself, which meant it lived outside version control entirely and wasn't something we could track or guarantee persisted. Moved into the theme properly here. Note: this targets Gutentor's auto-generated block ID, which can change if this specific block is ever edited/re-saved in the page editor. If this spacing issue ever reappears after an editor change to this section, re-find the button's column ID via the browser inspector and update the selector below to match. */ @media only all and (max-width: 991px){ #section-ee814bf9-de17-4641-802f-bff4bd3e50df { margin-bottom: 30px; } } /* 1.19 FIX: the "Websites to suit your requirements and budget" section on the homepage (.containerjoinhone/.maintext) had its paragraph text shrink disproportionately on mobile. .maintext's own font-size drops to 0.8em at max-width:1040px, and the paragraph inherited that directly with no size of its own - compounding down to 12.16px, versus ~15.2px for every other paragraph on the same page (confirmed live). Fixed with an explicit rem-based size so it's anchored to the page's root font size (16px) rather than compounding with its shrunk parent. */ @media only all and (max-width: 1040px){ .maintext p{ font-size: 0.95rem; } } /* Also: Clive asked for this section's body paragraph to be left- aligned rather than centred (the heading stays centred - only the paragraph changes). .containerjoinhone sets text-align:center unconditionally for the whole section; this overrides just the paragraph, at every width. */ .maintext p{ text-align: left; } /* 1.20 FIX: the gap above/below the text in the "Websites to suit your requirements and budget" hero section looked proportionately too big on mobile. In absolute pixels mobile actually had LESS padding than desktop (130px total vs 230px), but on a much narrower/shorter viewport that same amount reads as far more dominant. Halved it: .containerjoinhone's mobile padding from 50px top/bottom to 25px, and .maintext's margin-top from 30px to 15px. Confirmed visually live (screenshot) before shipping - clean, tight spacing, heading and button no longer floating in excess empty space. */ @media only all and (max-width: 1040px){ .containerjoinhone { padding: 25px 0 !important; } .maintext { margin-top: 15px !important; } } /* 1.21 FIX: after removing three empty spacer paragraphs from the homepage content (a page-content edit, not a code change) that had been the ONLY thing providing spacing above/below the "Access by Design Bognor / Affordable Websites, Professionally Designed" content block, that block turned out to have zero real padding of its own on any screen size - confirmed live (0px gap above, touching the hero video directly; 10px below). Added proper padding so it no longer depends on stray blank content. Tested and looks correct on both desktop and mobile with the same value, so this isn't scoped to any breakpoint. Same fragility note as the 1.18 fix: this targets Gutentor's auto-generated block ID, which can change if this block is ever edited/re-saved in the page editor. */ #section-d621823d-4f90-4b96-b870-f54635e21f54 { padding-top: 60px; padding-bottom: 60px; }