.main-heading-white-bg h1 {font-weight:300; max-width:70vw; color:#333; font-size: 3.4rem; line-height:3.6rem; padding-bottom: 30px;} /************************* Reset **************************/ *{padding: 0; margin:0;} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } table { border-collapse: collapse; border-spacing: 0; } /************************************************************************************ Fix Iphone sizing display issue *************************************************************************************/ .list, .link-dark, p, h1, h2, h3, h4, h5, h6 {text-size-adjust:none; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; } /************************************************************************************ HTML - force vert scrollbar & smoothing/antialiasing, set font-size and Body CSS *************************************************************************************/ html { overflow-y: scroll; /* forces vert scrollbar, works in all except Opera */ font-size: 62.5%; /*-if set to 62.5%; all other sizes 1.4em=14px and 1.6rem=16px-- */ } body {margin: 0 auto;} html, body { z-index:-10000; font-family: "Roboto", sans-serif; /**** font when not set by the tag sets p, h1, h2 bullets, etc *****/ text-rendering: optimizeLegibility; -moz-font-feature-settings: "liga" on; overflow: auto; } /************************************************************************************ Google fonts import *************************************************************************************/ @import url("https://fonts.googleapis.com/css?family=Lato:300,400,500,700"); @import url("https://fonts.googleapis.com/css?family=Railway:100,200,300,400,500,700"); @import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700"); @import url("https://fonts.googleapis.com/css?family=Roboto+Mono"); @import url("https://fonts.googleapis.com/css?family=Material+Icons"); @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700); /************************************************************************************ Google fonts -referenced locally from the 'fonts' folder *************************************************************************************/ /* questrial-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Questrial'; font-style: normal; font-weight: 400; src: url('../fonts/questrial-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* roboto-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /************************************************************************************ CONTAINER *************************************************************************************/ #container { width:100%; color: #333; /*-text colour within container, only a fallback colour should be set by p, h1, h2, h3, h4 tag settings etc -- */ font-family: 'Roboto', 'Helvetica', 'Trebuchat MS', Verdana, Arial, sans-serif; font-size: 1.5rem; /*--only a fallback font size, should be controlLed by p, h1, h2, h3, h4 tag settings etc --*/ line-height: 1.7rem; text-align: left; margin: 10px 0; } /*--only a fallback font sizes, should be controlLed by p, h1, h2, h3, h4 tag settings etc --*/ @media only screen and (max-width: 900px) {#container {font-size: 1.4rem; line-height: 1.6rem;}} @media only screen and (max-width: 600px) {#container {font-size: 1.3rem; line-height: 1.5rem;}} /************************************************************************************ Scroll-bar - custom colours to main scroll bar *************************************************************************************/ body::-webkit-scrollbar-track { background: #2b2b8d; /* color of the tracking area */ } body::-webkit-scrollbar-thumb { background-color: #d63535; /* color of the scroll thumb */ border: 1px solid #2b2b8d; /* creates padding around scroll thumb */ } /************************************************************************************ Paragraph 'p' *************************************************************************************/ p { font-family: Roboto, Helvetica, 'Trebuchat MS', Verdana, Arial, sans-serif; font-size: 1.8rem; line-height: 2.4rem; font-weight: 400; color: #505050; text-align: left; margin: 10px 0; padding-bottom:10px; /***** increases vertical space between each

set ****/ } @media only screen and (max-width: 900px) {p {font-size: 1.6rem; line-height: 2rem;}} @media only screen and (max-width: 600px) {p {font-size: 1.5rem; line-height: 1.9rem;}} .bkgrnd-white p, .bkgrnd-white-no-pad-top p {color:#262525;} .bkgrnd-light-grey p, .bkgrnd-light-grey-no-pad-top p {color:#333;} .bkgrnd-dark-grey p, .bkgrnd-dark-grey-no-pad-top p {color:#000;} .bkgrnd-dark-blue p, .bkgrnd-dark-blue-no-pad-top p {color:#d6d5d5;} /****Paragraph p with reduced space above, eg used when multiple paragraphs, used for 2nd onwards, so space between paras is reduced****/ .p-5px-less-above {margin-top:-5px} .p-10px-less-above {margin-top:-10px} .p-15px-less-above {margin-top:-15px} /************************************************* LISTS - BULLETS, TICKS AND NUMBERS **************************************************/ /*********************************************** styling - bullets, numbers, ticks - also colour ************************************************/ .list-numbers-default-white-bg ol li {list-style-type:decimal; color:#333;} .list-disc-white-bg ul li {list-style-type:disc; color:#333;} .list-disc-light-grey-bg ul li {list-style-type:disc; color:#272727;} .list-disc-dark-blue-bg ul li {list-style-type:disc; color:#e6e6e6;} .list-tick-white-bg ul li {list-style-type:none; text-indent:-22px; color:#5c5b5b;} .list-tick-light-grey-bg ul li {list-style-type:none; text-indent:-22px; color:#333;} .list-tick-dark-blue-bg ul li {list-style-type:none; text-indent:-22px; color:#ccc;} /** the tick **/ .list-tick-white-bg ul li:before {content: '\2714'; padding-right:10px;} .list-tick-light-grey-bg ul li:before {content: '\2714'; padding-right:10px;} .list-tick-dark-blue-bg ul li:before {content: '\2714'; padding-right:10px;} .list-numbered-white-bg ol li {list-style-type:lower-alpha; color:#5c5b5b;} .list-numbered-light-grey-bg ol li {list-style-type:lower-alpha; color:#333;} .list-numbered-dark-blue-bg ol li {list-style-type:lower-alpha; color:#ccc;} /*** indent list so bullet point lines up with start of Para texts above and below ***/ .list-disc-white-bg ul, .list-disc-light-grey-bg ul, .list-disc-dark-blue-bg ul, .list-tick-white-bg ul, .list-tick-light-grey-bg ul, .list-tick-dark-blue-bg ul, .list-numbered-white-bg ol, .list-numbers-default-white-bg, .list-numbered-light-grey-bg ol, .list-numbered-dark-blue-bg ol {margin: 0 4% 6%;} /************************************************************************** font-family, size & weight, line-height, padding - for colour see above **************************************************************************/ .list-disc-white-bg ul li, .list-disc-light-grey-bg ul li, .list-disc-dark-blue-bg ul li, .list-tick-white-bg ul li, .list-tick-light-grey-bg ul li, .list-tick-dark-blue-bg ul li, .list-numbers-default-white-bg ol li, .list-numbered-white-bg ol li, .list-numbered-light-grey-bg ol li, .list-numbered-dark-blue-bg ol li{ font-family: 'Roboto', 'Helvetica', 'Trebuchat MS', Verdana, Arial, sans-serif; font-size: 1.8rem; line-height: 2.0rem; font-weight: 400; padding-top: 12px; /*** vert distance between each list item ***/ } /** Media Queries **/ @media only screen and (max-width: 900px) { .list-disc-white-bg ul li, .list-disc-light-grey-bg ul li, .list-disc-dark-blue-bg ul li, .list-tick-white-bg ul li, .list-tick-light-grey-bg ul li, .list-tick-dark-blue-bg ul li, .list-numbers-default-white-bg ol li, .list-numbered-white-bg ol li, .list-numbered-light-grey-bg ol li, .list-numbered-dark-blue-bg ol li{ font-size: 1.6rem; line-height: 2rem; padding-top: 10px; } } @media only screen and (max-width: 600px) { .list-disc-white-bg ul li, .list-disc-light-grey-bg ul li, .list-disc-dark-blue-bg ul li, .list-tick-white-bg ul li, .list-tick-light-grey-bg ul li, .list-tick-dark-blue-bg ul li, .list-numbers-default-white-bg ol li, .list-numbered-white-bg ol li, .list-numbered-light-grey-bg ol li, .list-numbered-dark-blue-bg ol li{ font-size:1.5rem; line-height: 1.9rem; padding-top: 8px; } } /** don't know if need this - leave for moment **/ .list-header-text p {font-family:'Roboto', 'Helvetica', 'Trebuchat MS', Verdana, Arial, sans-serif; color:#ffd68b; padding-left:1%; padding-bottom:0; font-size:2rem; line-height:2.1rem; font-weight: 400;} @media only screen and (max-width:1400px) {.list-header-text p {font-size:1.9rem; line-height:2rem;}} @media only screen and (max-width:1000px) {.list-header-text p {font-size:1.7rem; line-height:1.8rem;}} /************************************************* Table styling re text sizes only **************************************************/ /*** REST OF 'OUTER' TABLE STYLING FURTHER DOWN PAGE - search on 'table.outer' ***/ table.outer-white-bg, table.outer-light-grey-bg, table.outer-dark-blue-bg { font-family: Roboto, Helvetica, 'Trebuchat MS', Verdana, Arial, sans-serif; color:#505050; font-size:1.8rem; line-height:2.4rem; } @media only screen and (max-width: 900px) {table.outer-white-bg, table.outer-light-grey-bg, table.outer-dark-blue-bg {font-size: 1.6rem; line-height: 2.0rem;}} @media only screen and (max-width: 600px) {table.outer-white-bg, table.outer-light-grey-bg, table.outer-dark-blue-bg {font-size: 1.5rem; line-height: 1.9rem;}} /************************************************* Table styling re responsive tables (.table-responsive-container) for text sizes, see the section later in this file ****/ /************************************************* Headings, h1, h2 etc **************************************************/ /*** yellow text colours for h1 and h2 and some sub-headings ***/ .yellow-text {color:#d3aa81;} .yellow-text-lighter {color:#f2cba4;} /**** was #f4c99f then #f4e09f then a light yellow text fff0c1****/ .yellow-text-even-lighter {color:#ffdcba;} h1 { /*****IF EDIT H1 THEN ALSO NEED TO EDIT THE .nohero-header-text--h2-as-h1-size DIV SO MATCHES ****/ font-family: Questrial, 'Trebuchat MS', Verdana, Arial, Helvetica, sans-serif; font-size: 5rem; line-height: 5.2rem; font-weight: 400; color:#333333; text-align:left; } @media only screen and (max-width: 1100px) {h1 {font-size: 4.2rem;line-height: 4.2rem;}} @media only screen and (max-width: 800px) {h1 {font-size: 3.6rem;line-height: 3.5rem;}} @media only screen and (max-width: 600px) {h1 {font-size: 3rem;line-height: 2.8rem;}} .bkgrnd-white h1, .bkgrnd-white-no-pad-top h1 {color:#262525;} .bkgrnd-light-grey h1, .bkgrnd-light-grey-no-pad-top h1 {color:#333;} .bkgrnd-dark-grey h, .bkgrnd-dark-grey-no-pad-top h1 {color:#262525;} .bkgrnd-dark-blue h1, .bkgrnd-dark-blue-no-pad-top h1 {color:#d6d5d5;} .nohero-header-text--h1-as-h1-size h1 {font-size: 3.6rem; line-height:3.8rem} @media only screen and (max-width: 1100px) {.nohero-header-text--h1-as-h1-size h1 {font-size: 3rem;line-height: 3.2rem;}} @media only screen and (max-width: 800px) {.nohero-header-text--h1-as-h1-size h1 {font-size: 2.7rem;line-height: 2.9rem;}} @media only screen and (max-width: 600px) {.nohero-header-text--h1-as-h1-size h1 {font-size: 2.6rem;line-height: 2.6rem; padding-bottom: 10px;}.nohero-header-text--h1-as-h1-size h2 {font-size: 1.7rem;line-height: 1.7rem;}} h2 { font-family: Questrial, 'Trebuchat MS', Verdana, Arial, Helvetica, sans-serif; font-size: 2.4rem; line-height: 2.5rem; font-weight: 400; color: #333333; text-align: left; } @media only screen and (max-width: 900px) {h2 {font-size: 2.1rem; line-height: 2.3rem;}} @media only screen and (max-width: 600px) {h2 {font-size: 1.9rem; line-height: 2rem;}} .bkgrnd-white h2, .bkgrnd-white-no-pad-top h2 {color:#262525;} .bkgrnd-light-grey h2, .bkgrnd-light-grey-no-pad-top h2 {color:#333;} .bkgrnd-dark-grey h2, .bkgrnd-dark-grey-no-pad-top h2 {color:#262525;} .bkgrnd-dark-blue h2, .bkgrnd-dark-blue-no-pad-top h2 {color:#d6d5d5;} h3 { font-family: Questrial, 'Trebuchat MS', Verdana, Arial, Helvetica, sans-serif; font-size: 2.1rem; line-height: 2.3rem; font-weight: 400; color:#333333; text-align: left; padding-bottom:10px; } @media only screen and (max-width: 900px) {h3 {font-size: 1.8rem; line-height: 1.9rem;}} @media only screen and (max-width: 600px) {h3 {font-size: 1.6rem; line-height: 1.7rem;}} .bkgrnd-white h3, .bkgrnd-white-no-pad-top h3 {color:#262525;} .bkgrnd-light-grey h3, .bkgrnd-light-grey-no-pad-top h3 {color:#333;} .bkgrnd-dark-grey h3, .bkgrnd-dark-grey-no-pad-top h3 {color:#262525;} .bkgrnd-dark-blue h3, .bkgrnd-dark-blue-no-pad-top h3 {color:#d6d5d5;} h4 { font-family: Questrial, 'Trebuchat MS', Verdana, Arial, Helvetica, sans-serif; font-size: 1.8rem; line-height: 1.9rem; font-weight: 400; color: #333333; text-align: left; } @media only screen and (max-width: 900px) {h4 {font-size: 1.6rem;line-height: 1.7rem;}} @media only screen and (max-width: 600px) {h4 {font-size: 1.4rem;line-height: 1.5rem;}} .bkgrnd-white h4, .bkgrnd-white-no-pad-top h4 {color:#262525;} .bkgrnd-light-grey h4, .bkgrnd-light-grey-no-pad-top h4 {color:#333;} .bkgrnd-dark-grey h4, .bkgrnd-dark-grey-no-pad-top h4 {color:#262525;} .bkgrnd-dark-blue h4, .bkgrnd-dark-blue-no-pad-top h4 {color:#d6d5d5;} /*------------------------------------------------------------ Content restricted to a given width - eg content within a full-width bkgrnd -------------------------------------------------------------*/ .width1145px {max-width:1145px; margin: 0 auto;} /**** used on the homepage **/ .width1140px {max-width:1140px; margin: 0 auto;} .width1135px {max-width:1135px; margin: 0 auto;} /**** used on the 'modules' webpages ***/ .width1100px {max-width:1100px; margin: 0 auto;} /**** this is key, it controls all content that requires 1100px max width ****/ .width1090px {max-width:1090px; margin: 0 auto;} .width1000px {max-width:1000px; margin: 0 auto;} .width900px {max-width:900px; margin: 0 auto;} .width800px {max-width:800px; margin: 0 auto;} .width750px {max-width:750px; margin: 0 auto;} .width700px {max-width:700px; margin: 0 auto;} .width600px {max-width:600px; margin: 0 auto;} .width500px {max-width:500px; margin: 0 auto;} .width400px {max-width:400px; margin: 0 auto;} .width300px {max-width:300px; margin: 0 auto;} .width200px {max-width:200px; margin: 0 auto;} .width100px {max-width:100px; margin: 0 auto;} /*------------------------------------------------------------- Content hidden on mobile or on desktop - Different breakpoints --------------------------------------------------------------*/ /***breakpoint 800px***/ @media only screen and (max-width: 797px) {.desktop { display:none !important; }} @media only screen and (min-width: 800px) {.mobile { display:none !important; }} /***breakpoint 700px***/ @media only screen and (max-width: 699px) {.desktop700 { display:none !important; }} @media only screen and (min-width: 700px) {.mobile700 { display:none !important; }} /***breakpoint 600px***/ @media only screen and (max-width: 599px) {.desktop600 { display:none !important; }} @media only screen and (min-width: 600px) {.mobile600 { display:none !important; }} /***breakpoint 500px***/ @media only screen and (max-width: 499px) {.desktop500 { display:none !important; }} @media only screen and (min-width: 500px) {.mobile500 { display:none !important; }} /*********************** Note: CSS for logo, 'Integrated Bindery Systems' text, British Engineering and 'Smart-binder menu' button positioning comes after the menus CSS ***********************/ /*------------------------------------------------------------ Determine whether Mobile or Desktop menu code is referenced... DON'T THINK THESE TAGS ARE REFERENCED, EXCEPT "mobile-only" on one webpage where has its own css file on the page - may be able to delete them -------------------------------------------------------------*/ /**** ham-breakpoint--also-in-js-bottom-of-each-webpage ****/ @media only screen and (max-width: 1445px) {.desktop-only {display:none !important;}} /** also had display:inline-block in here until 1march2026 **/ @media only screen and (min-width: 1446px) {.mobile-only {display:none !important;}} /** also had display:flex in here until 1march2026 **/ /*------------------------------------------------------------ Allows to be used for desktop menu, without breaking mobile menu> -------------------------------------------------------------*/ /**** ham-breakpoint--also-in-js-bottom-of-each-web @media only screen and (max-width: 1445px) { .mobile-only-new-upper-menu a {pointer-events:none; line-height: 0; margin-left:0; padding-left:0;} .mobile-only-new-sub-menus a {pointer-events:none; line-height: 0; margin-left:0; padding-left:0;} } page ****/ /*---------------------------------------- Ham menuburger -----------------------------------------*/ /* Ham construction & styling */ @media only screen and (max-width: 1445px) { .mobile-only-new-upper-menu a {pointer-events:none; line-height: 0; margin-left:0; padding-left:0;} .mobile-only-new-sub-menus a {pointer-events:none; line-height: 0; margin-left:0; padding-left:0;} .hamburger { position:absolute; /*** or if not using overlay header, then 'relative', may need to adjust margin above **/ width:50px; height:35px; padding:27px 0 0 16px; z-index:2000; } @media only screen and (max-width: 1445px) {.hamburger {padding-top: 65px;}} /*18jan26*/ .line, .line-last { width: 27px; height: 3px; background-color: #b5b4b4; border-radius:0; z-index:2000; } .line {margin-bottom: 6px; z-index:2000;} /* End of ham construction & styling */ .dropdown-icon, .dropdown-icon-sub {display:none !important;} /*NOT WORKING still get down arrow in mob menu*/ /*- Menu font size --*/ #menu { font-family: Roboto, Helvetica, Verdana, sans-serif; /**** for margin-top look under #menu in the horiz menu CSS media query below ****/ color:#333; z-index:2000; } #menu {font-size:15px; font-weight:400;} nav ul ul{font-size:15px;} .d-only { display:none !important;} /*So Forward Arrow in sub & sub-sub menus is right-justified*/ /* mmenujs.com/mmenu-light, Copyright (c) Fred Heusschen, www.frebsite.nl, License: CC-BY-4.0, http://creativecommons.org/licenses/by/4.0/ */ :root{--mm-ocd-width:89%;--mm-ocd-min-width:300px;--mm-ocd-max-width:440px} /*** min-width don't want more than about 300px so has a right margin on 320px width mobiles *****/ body.mm-ocd-opened{overflow-y:hidden;-ms-scroll-chaining:none;overscroll-behavior:none} .mm-ocd{position:fixed;top:0;right:0;bottom:100%;left:0;z-index:9999;overflow:hidden;-ms-scroll-chaining:none;overscroll-behavior:contain;background:rgba(0,0,0,1);-webkit-transition-property:bottom,background-color;-o-transition-property:bottom,background-color;transition-property:bottom,background-color;-webkit-transition-duration:0s,.3s;-o-transition-duration:0s,.3s;transition-duration:0s,.3s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:.45s,.15s;-o-transition-delay:.45s,.15s;transition-delay:.45s,.15s} .mm-ocd--open{bottom:0; background:rgba(0,0,0,.25); /*applies to overlay that applied to right of menu (outside menu) over top of page behind */ -webkit-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s} .mm-ocd__content{position:absolute;top:0;bottom:0;z-index:2;width:var(--mm-ocd-width);min-width:var(--mm-ocd-min-width);max-width:var(--mm-ocd-max-width);background:#fff;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;-webkit-transition-duration:.3s;-o-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease} .mm-ocd--left .mm-ocd__content{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)} .mm-ocd--right .mm-ocd__content{right:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)} .mm-ocd--open .mm-ocd__content{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} .mm-ocd__backdrop{position:absolute;top:0;bottom:0;z-index:3;width:clamp(calc(100% - var(--mm-ocd-max-width)),calc(100% - var(--mm-ocd-width)),calc(100% - var(--mm-ocd-min-width))); background:rgba(3,2,1,0)}/*affects overlay applied to right of menu, ie over top of page behind, same as one above */ .mm-ocd--left .mm-ocd__backdrop{right:0} .mm-ocd--right .mm-ocd__backdrop{left:0} .mm-spn,.mm-spn a,.mm-spn li,.mm-spn span,.mm-spn ul{display:block;padding:0; margin:0;-webkit-box-sizing:border-box;box-sizing:border-box} :root{--mm-spn-item-height:44px; /* determines height of links in HAM menu, both sub-menu, sub-sub menu */ --mm-spn-item-indent:0; /***indent of links in hamburger, but links with a submenu are indented by twice the value used, so don't use this - use .mm-spn li tag set re padding-left, see below */ --mm-spn-line-height:18px;--mm-spn-panel-offset:30%} .mm-spn{width:100%;height:100%;-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch;overflow:hidden;-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)} .mm-spn ul{-webkit-overflow-scrolling:touch;position:fixed;top:0;left:100%;bottom:0;z-index:2;width:calc(100% + var(--mm-spn-panel-offset));padding-right:var(--mm-spn-panel-offset);line-height:var(--mm-spn-line-height);overflow:visible;overflow-y:auto;background:inherit;-webkit-transition:left .3s ease 0s;-o-transition:left .3s ease 0s;transition:left .3s ease 0s;cursor:default} .mm-spn ul:after{content:"";display:block;height:var(--mm-spn-item-height)} .mm-spn>ul{left:0}.mm-spn ul .mm-spn--open{left:0} .mm-spn ul.mm-spn--parent{left:calc(-1 * var(--mm-spn-panel-offset));overflow:visible} .mm-spn li{position:relative;background:inherit;cursor:pointer;} /***background gives bkgrnd color of actual links***/ .mm-spn li:before{content:"";display:block;position:absolute;top:calc(var(--mm-spn-item-height)/ 2);right:calc(var(--mm-spn-item-height)/ 2);z-index:0; width:12px; height:12px; color:#fff; margin-top:1px; /***adjusts width & height (ie size) & colour of arrows in main bank of links***/ border-top:3px solid;border-right:3px solid; /***adjusts thickness of arrows in main bank of links***/ -webkit-transform:rotate(45deg) translate(0,-50%);-ms-transform:rotate(45deg) translate(0,-50%);transform:rotate(45deg) translate(0,-50%);opacity:.4} .mm-spn li:after{ content:"";display:block;margin-left:var(--mm-spn-item-indent); /* border-top:1px solid; determines the horiz-border between each cell in the menu */ /* opacity:.25 determines opacity of horiz-border lines between each cell, ie lightness-darkness of the lines*/ } .mm-spn li{color:#fff; padding-left:24px;} /*color of links in ham menu & sub menu, sub sub menu, & padding from left margin*/ .mm-spn a,.mm-spn span{position:relative;z-index:1;padding:calc((var(--mm-spn-item-height) - var(--mm-spn-line-height))/ 2) var(--mm-spn-item-indent)} .mm-spn a{background:inherit;color:inherit;text-decoration:none} .mm-spn a:not(:last-child){width:calc(100% - var(--mm-spn-item-height))} .mm-spn a:not(:last-child):after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;border-right:1px solid;opacity:.15} .mm-spn span{background:0 0;} .mm-spn.mm-spn--navbar{cursor:pointer;} .mm-spn.mm-spn--navbar:before{content:"";display:block;position:absolute;top:calc(var(--mm-spn-item-height)/ 2);left:var(--mm-spn-item-indent); width:12px;height:12px; /*** width & height determine size of the 'Back' arrow in uppermost row ***/ margin-top:1px; margin-left:10px; /***margin to the left of the 'Back' arrow in the uppermost row ***/ border-top:3px solid #fff; /***thickness of top half of 'Back' arrow in uppermost row ***/ border-left:3px solid #fff; /***thickness of lower half of 'Back' arrow in uppermost row ***/ color:#fff; /*** above two adjust the arrow colour, but still with some opacity ***/ -webkit-transform:rotate(-45deg) translate(50%,-50%);-ms-transform:rotate(-45deg) translate(50%,-50%);transform:rotate(-45deg) translate(50%,-50%);} .mm-spn.mm-spn--navbar.mm-spn--main{cursor:default} .mm-spn.mm-spn--navbar.mm-spn--main:before{content:none;display:none} .mm-spn.mm-spn--navbar:after{ content:attr(data-mm-spn-title); display:block;position:absolute;top:0; left:0; /**** normally 0, if comment out tag then 'back' arrow in top row has white bkgrnd-& text right-justified***/ right:0; /*** comment out tag if want text in top row left-justified ***/ height:var(--mm-spn-item-height); padding:0 calc(var(--mm-spn-item-indent) * 2); line-height:var(--mm-spn-item-height); opacity:.5; /*** opacity of text and arrow (making lighter or darker) in uppermost row ***/ color:#fff; /**** text color of text in uppermost row ****/ /****padding-left:20px; added 8april wasn't there before***/ font-size: 16px; /**** font size of header top row - ie row that tells what eg the sub-sub menu is ***/ /****padding-top:16px; gives padding to header row in open ham menu, but if add padding-bottom that doesn't work, nor does 'height' ***/ background-color:#000000; /*** was 1f1f1f **** background color of the uppermost row ***/ text-align:center; overflow:hidden; white-space:nowrap; -o-text-overflow:ellipsis; text-overflow:ellipsis } .mm-spn.mm-spn--navbar:hover {background-color:#f7f7f7;} /*** hover color of main bank of links not really useful ***/ .mm-spn.mm-spn--navbar.mm-spn--main:after{padding-left:var(--mm-spn-item-indent)} .mm-spn.mm-spn--navbar ul{top:calc(var(--mm-spn-item-height) + 1px)} .mm-spn.mm-spn--navbar ul:before{content:"";display:block;position:fixed;top:inherit;z-index:2;width:100%; opacity:.4} /*** line under the uppermost row ***/ .mm-spn.mm-spn--light {color:#fff; background:#003066;} /*** determines the colour (and text colour) of the entire menu area, upper level and all lower levels ***/ .mm-spn.mm-spn--light:hover {color:#fff; background:#003066;} /*** added on 31aug - so colours remain when hovering over the menu, but text colour change doesn't seem to work ***/ .mm-spn.mm-spn--dark{color:#ddd;background:#333} .mm-spn.mm-spn--vertical{overflow-y:auto} .mm-spn.mm-spn--vertical ul{width:100%;padding-right:0;position:static} .mm-spn.mm-spn--vertical ul ul{display:none;padding-left:var(--mm-spn-item-indent)} .mm-spn.mm-spn--vertical ul ul:after{height:calc(var(--mm-spn-item-height)/ 2)} .mm-spn.mm-spn--vertical ul.mm-spn--open{display:block} .mm-spn.mm-spn--vertical li.mm-spn--open:before{-webkit-transform:rotate(135deg) translate(-50%,0);-ms-transform:rotate(135deg) translate(-50%,0);transform:rotate(135deg) translate(-50%,0)} .mm-spn.mm-spn--vertical ul ul li:last-child:after{content:none;display:none} /* Media queries so link texts smaller font size on small screens. If necessary can add :root{--mm-ocd-width:90%;} to the media queries, ie so can vary the %, but don't think it is required*/ @media only screen and (max-width: 400px) { #menu, nav ul ul {font-size:16px;} .mm-spn.mm-spn--navbar:after{font-size: 16px;} .mm-spn li{margin-left:0;} } @media only screen and (max-width: 365px) { #menu, nav ul ul {font-size:15.5px;} .mm-spn.mm-spn--navbar:after{font-size: 15.5px;} .mm-spn li{margin-left:-4px;} } @media only screen and (max-width: 355px) { #menu, nav ul ul {font-size:14.2px;} .mm-spn.mm-spn--navbar:after{font-size: 14.4px;} .mm-spn li{margin-left:-8px;} } } /* Close of ham menu media query */ /**************************************************** Start of Horiz menu *****************************************************/ @media only screen and (min-width: 1446px) { #menu { font-family: Roboto, Helvetica, Verdana, sans-serif; /*** for padding-left to control hoiz position of menu, see section below ****/ font-size:17px; font-weight:400; color:#333; z-index:2000; margin-top:49px; /* moves menu down from top */ } /*in uppermost menu, space before ">", in sub-menus ">" is right justified with 'float right' */ .dropdown-icon {padding-left:0; } .dropdown-icon-sub {float: right; color:#fff; margin-right:0; } /* I did have transform:rotate(-90deg) in here */ nav ul a:any-link {padding-top:15px; text-decoration:none; z-index:2000;} /******nav ul a1:first{padding:7px 11px; z-index:2000;} THIS ROW DOESN'T SEEM TO BE REQUIRED *****/ .mobile-only-new-sub-menus11111111 a {padding-top:42px; padding-bottom: 43px;} /*----------------------------------------- Rest of HORIZ menu nav CSS ------------------------------------------*/ nav{ margin-top:37px; z-index: 1000; } nav ul { list-style:none; position:relative; float:left; margin:0; z-index: 1000; } nav ul a { display:block; color:#edecec; /***** text colour in links *********/ margin-right:4px; padding: 10px 19px 16px;/*-----padding of links in uppermost horiz menu----*/ line-height: 16px; /**** WAS 18PX UNTIL 21OCT adjusted for link texts that wrap - but also affects height of all links in sub & sub-sub menus ***/ z-index: 1000; justify-content: center; } .mobile-only-new-sub-menus a {padding: 27px 14.8px 27px 19px;} /*** sub-menu padding to links, only links that have arrows, ie open sub-sub-menus edited 29april25 added 15px to top and bottom ***/ nav ul li ul a {padding: 15px 14.8px 26px;} /**** sub-sub-menu padding to links, only links that do NOT have arrows, ie do NOT have sub-sub-menus edited 29april25 added 15px to top and bottom****/ nav ul li{ position:relative; float:left; z-index: 1000; } nav ul a {padding-top:15px;} nav ul li.current-menu-item {background:#ddd; z-index: 1000;} nav ul li:hover { color:#fff; z-index: 1000; } nav ul :hover > ul{ display:block; z-index: 1000; } nav ul ul:hover > ul{ display:block; z-index: 1000; } nav ul ul{ display:none; position:absolute; top:100%; z-index: 1000; margin-left:5px; /*********added 6sep so start of text in sub-menu aligns with start of link texts in main menu ******/ font-size:17px; font-weight:400; } nav > ul >li >a:nth-child(1) {margin-bottom:9px;} /*** added 3may25, it creates the correct height of the first 'home' link ***/ nav ul li ul li a {padding-left:20px; } nav ul li ul li {background-color: #030a21;} /*bkgrnd colour of links in sub menu edited. Also padding-left added 31aug */ nav ul li ul li ul li {background-color:#000;} /**** background colour of links in sub-sub menu edited 31aug ****/ nav ul li ul li a:hover {background-color: #030a21;} /***** color of the link on hover in the sub and sub-sub-menu ******/ nav ul li ul li:hover {background-color: #353f55;} /***** given this color on 31aug so get a thin line to right of link hovered over in sub-sub-menu ***/ nav ul ul li{ float:none; width:334px; /********width of links in sub menus ********/ background: #2673c6; /*****background of sub and subsub menus *****/ color:#000; /***** colour of text in links in sub-menu that DO have ">" ***********/ margin-left:-5px; z-index: 1000; } /*********************************** styling of sub-sub menu **********************************/ nav ul ul ul { top:0; left:100%; margin-left:0; overflow-x: hidden; /*----so no horiz scrollbar------*/ /* ---overflow-y11: scroll; added 11 July - controls scrolling within sub-menu if lots of links----*/ background: #4e4e4e;/* -----don't think this is required ----*/ z-index: 1000; max-height:89vh; } /*********************************** styling of sub-sub menu, re max-height of scroll bar when sub-menu doesn't fit on page vertically **********************************/ @media only screen and (max-height: 1100px) { nav ul ul ul {max-height:88vh;}} @media only screen and (max-height: 1000px) { nav ul ul ul {max-height:87vh;}} @media only screen and (max-height: 950px) { nav ul ul ul {max-height:86vh;}} @media only screen and (max-height: 900px) { nav ul ul ul {max-height:85vh;}} @media only screen and (max-height: 850px) { nav ul ul ul {max-height:84vh;}} @media only screen and (max-height: 740px) { nav ul ul ul {max-height:83vh;}} @media only screen and (max-height: 700px) { nav ul ul ul {max-height:79vh;}} @media only screen and (max-height: 560px) { nav ul ul ul {max-height:77vh;}} @media only screen and (max-height: 500px) { nav ul ul ul {max-height:75vh;}} @media only screen and (max-height: 450px) { nav ul ul ul {max-height:71vh;}} @media only screen and (max-height: 400px) { nav ul ul ul {max-height:69vh;}} @media only screen and (max-height: 350px) { nav ul ul ul {max-height:67vh;}} nav ul ul ul li{ width:340px; /*----width of links in sub-sub menus was 340px changed 29april25----*/ z-index: 1000; } nav ul ul ul ul li{ width:160px; /*----width of links in sub-sub-sub menus----*/ z-index: 1000; } nav ul li ul li:hover {background-color: #042243;} .d-only img {max-width:12px; float:right; padding-top:3px;} /* so Forward Arrow in sub & sub-sub menus is right-justified */ } /****close of media query for the horiz menu ****/ /*---------------------------------------- Menu code that applies to Ham and Horiz menus -----------------------------------------*/ .hr-in-menu hr{background-color: #000000; border-width: 0; padding-top: 1px; margin-left:-5px;} /*line used under two intro links in products sub-menu*/ /* different colours on roll-over-*/ nav ul li:hover, nav ul li ul li ul li, nav ul li ul li ul li:hover, nav ul li ul li ul li ul li ul li, nav ul li ul li ul li ul li ul li:hover, nav ul li ul li ul li ul li ul li ul li ul li, nav ul li ul li ul li ul li ul li ul li ul li:hover, nav ul li ul li ul li ul li ul li ul li ul li ul li ul li, nav ul li ul li ul li ul li ul li ul li ul li ul li ul li:hover, nav ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li, nav ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li:hover, nav ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li {background-color:#042243;} nav ul li ul li, nav ul li ul li:hover, nav ul li ul li ul li ul li, nav ul li ul li ul li ul li:hover, nav ul li ul li ul li ul li ul li ul li, nav ul li ul li ul li ul li ul li ul li:hover, nav ul li ul li ul li ul li ul li ul li ul li ul li, nav ul li ul li ul li ul li ul li ul li ul li ul li:hover, nav ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li, nav ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li:hover, nav ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li, nav ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li:hover {background-color:#003066;} /** END OF MENUS **/ /** SCROLLBAR STYLE FOR IE **/ body { scrollbar-base-color: #138a72; scrollbar-3dlight-color: #fff; scrollbar-highlight-color: #1abc9c; scrollbar-track-color: #fff; scrollbar-arrow-color: #1abc9c; scrollbar-shadow-color: #1abc9c; -ms-overflow-style: -ms-autohiding-scrollbar; } .icon { display: inline-block; width: 5vw; height: 4vw; stroke-width: 0; stroke: currentColor; fill: currentColor; } /************************************************ HERO IMAGE *************************************************/ .hero-image {position:relative; z-index:-1;} /********************************************************************************** Spacer - all screen widths ***********************************************************************************/ .spacer-120px {padding-top:120px;} .spacer-120px {padding-top:110px;} .spacer-100px {padding-top:100px;} .spacer-80px {padding-top:80px;} .spacer-60px {padding-top:60px;} .spacer-50px {padding-top:50px;} .spacer-40px {padding-top:40px;} .spacer-30px {padding-top:30px;} .spacer-20px {padding-top:20px;} .spacer-10px {padding-top:10px;} .spacer-5px {padding-top:5px;} .heading-space-balancer-10px {padding-top:10px;} /********************************************************************************** Spacer - only below break point to 1 column ***********************************************************************************/ @media only screen and (max-width:740px) { .spacer-mobile-40px {padding-top:40px;} } /**************************************************************************************** One column - ie used within 1100px width container (outside of flexbox two-cols divs) ****************************************************************************************/ .one-col {max-width:1050px; margin: 0 auto;} @media only screen and (max-width:1100px) {.one-col {margin: 0 8%}} /************************************************************************************ FLEX TWO COLS Use Col01 and Col02 options to left-align images if required Use .f2-rev-*** for a reversed col order in mobile view ************************************************************************************/ /***Flex containers ***/ .f2-l--l-l, .f2-rev-l--l-l, .f2-nobreak {display:flex; flex-direction:row; text-align:left; justify-content:left; /**don't think there is a justify-content:left; so presumably this isn't doing anything, check **/ width:100%; margin:0 auto 8px; padding:0; } /****images centered horiz by default***/ .f2-l--l-l img, .f2-rev-l--l-l img, .f2-nobreak img {display:block; margin: 0 auto;} /** Flex items - Column widths c10, c20 etc up to c80, c90. Also padding, backgrounds & borders **/ /** Re eg c50-1 & c50-2 .c50-1-imgl img & .c50-2-imgl img these are with IMAGES left (l) ALIGNED (because default positioning of images is cED - must include display:block**/ /***c10***/ .c10-1, .c10-1-imgl, .c10rev-1, .c10rev-1-imgl {width:10%; padding:0 2%;} .c10-2, .c10-2-imgl, .c10rev-2, .c10rev-2-imgl {width:90%; padding:0 2%;} .c10-1-imgl img, .c10-2-imgl img {display:block; margin: 0 auto 0 0;} /***c10-nobreak***/ .c10-nobreak-1, .c10-nobreak-1-imgl {width:20%; padding:0 2%;} .c10-nobreak-2, .c10-nobreak-2-imgl {width:80%; padding:0 2%;} .c10-nobreak-1-imgl img, .c10-nobreak-2-imgl img {display:block; margin: 0 auto 0 0;} /***c20***/ .c20-1, .c20-1-imgl, .c20rev-1, .c20rev-1-imgl {width:20%; padding:0 2%;} .c20-2, .c20-2-imgl, .c20rev-2, .c20rev-2-imgl {width:80%; padding:0 2%;} .c20-1-imgl img, .c20-2-imgl img {display:block; margin: 0 auto 0 0;} /***c30***/ .c30-1, .c30-1-imgl, .c30rev-1, .c30rev-1-imgl {width:30%; padding:0 2%;} .c30-2, .c30-2-imgl, .c30rev-2, .c30rev-2-imgl {width:70%; padding:0 2%;} .c30-1-imgl img, .c30-2-imgl img {display:block; margin: 0 auto 0 0;} /***c40***/ .c40-1, .c40-1-imgl, .c40rev-1, .c40rev-1-imgl {width:40%; padding:0 2%;} .c40-2, .c40-2-imgl, .c40rev-2, .c40rev-2-imgl {width:60%; padding:0 2%;} .c40-1-imgl img, .c40-2-imgl img {display:block; margin: 0 auto 0 0;} /***c50 ***/ .c50-1, .c50-1-imgl, .c50rev-1, .c50rev-1-imgl {width:50%; padding:0 2%;} .c50-2, .c50-2-imgl, .c50rev-2, .c50rev-2-imgl {width:50%; padding:0 2%;} .c50-1-imgl img, .c50-2-imgl img {display:block; margin: 0 auto 0 0;} /***c60***/ .c60-1, .c60-1-imgl, .c60rev-1, .c60rev-1-imgl {width:60%; padding:0 2%;} .c60-2, .c60-2-imgl, .c60rev-2, .c60rev-2-imgl {width:40%; padding:0 2%;} .c60-1-imgl img, .c60-2-imgl img {display:block; margin: 0 auto 0 0;} /***c70***/ .c70-1, .c70-1-imgl, .c70rev-1, .c70rev-1-imgl {width:70%; padding:0 2%;} .c70-2, .c70-2-imgl, .c70rev-2, .c70rev-2-imgl {width:30%; padding:0 2%;} .c70-1-imgl img, .c70-2-imgl img {display:block; margin: 0 auto 0 0;} /***c80***/ .c80-1, .c80-1-imgl, .c80rev-1, .c80rev-1-imgl {width:80%; padding:0 2%;} .c80-2, .c80-2-imgl, .c80rev-2, .c80rev-2-imgl {width:20%; padding:0 2%;} .c80-1-imgl img, .c80-2-imgl img {display:block; margin: 0 auto 0 0;} /***c90***/ .c90-1, .c90-1-imgl, .c90rev-1, .c90rev-1-imgl {width:90%; padding:0 2%;} .c90-2, .c90-2-imgl, .c90rev-2, .c90rev-2-imgl {width:10%; padding:0 2%;} .c90-1-imgl img, .c90-2-imgl img {display:block; margin: 0 auto 0 0;} /*** MOBILE VIEW: MEDIA QUERY 2 cols to 1 column)***/ @media only screen and (max-width:740px) { .f2-l--l-l, .f2-rev-l--l-l {flex-direction:column; text-align: left; justify-content:left; align-items:center; /*centres vert when dir=row ****/ /**********NOT SURE IF THIS IS DOING ANYTHING - CHECK ********/ width:84%; padding: 0 8%; margin: 0 auto 20px 0;} /*** Col order, rev - reversed vertically *****/ .f2-l--l-l {flex-direction:column;} .f2-rev-l--l-l {flex-direction:column-reverse;} /********************************************************* Mobile view, re cols 01 AND 02 - width & padding *********************************************************/ .c10-1, .c10-1-imgl, .c10-2, .c10-2-imgl {width:100%; padding:0 4%;} .c20-1, .c20-1-imgl, .c20-2, .c20-2-imgl {width:100%; padding:0 4%;} .c30-1, .c30-1-imgl, .c30-2, .c30-2-imgl {width:100%; padding:0 4%;} .c40-1, .c40-1-imgl, .c40-2, .c40-2-imgl {width:100%; padding:0 4%;} .c50-1, .c50-1-imgl, .c50-2, .c50-2-imgl {width:100%; padding:0 4%;} .c60-1, .c60-1-imgl, .c60-2, .c60-2-imgl {width:100%; padding:0 4%;} .c70-1, .c70-1-imgl, .c70-2, .c70-2-imgl {width:100%; padding:0 4%;} .c80-1, .c80-1-imgl, .c80-2, .c80-2-imgl {width:100%; padding:0 4%;} .c90-1, .c90-1-imgl, .c90-2, .c90-2-imgl {width:100%; padding:0 4%;} } /*********media query closing bracket DON'T DELETE THIS BRACKET *********/ /********************************************************** BACKGROUNDS - key backgrounds used on webpages **********************************************************/ /*** colours of p, h1, h2, h3 and h4 over these different bkgrnds is set in p, h1, h2, h3 and h4 sections towards top of this CSS file ***/ /*** don't page padding-bottom of bkgrnds unless adjust vertical positions of the 'top' buttons relative to background border ***/ .bkgrnd-white {background:#fff; margin: 0 auto; padding:90px 0;} @media only screen and (max-width: 700px) {.bkgrnd-white {padding:60px 0;}} .bkgrnd-white-no-pad-top {background:#fff; margin: 0 auto; padding:0 0 90px;} @media only screen and (max-width: 700px) {.bkgrnd-white-no-pad-top {padding:0 0 60px;}} .bkgrnd-white-under-header {background:#fff; margin: 0 auto; padding:60px 0;} @media only screen and (max-width: 700px) {.bkgrnd-white-under-header {padding:50px 0;}} @media only screen and (max-width: 700px) {.bkgrnd-white-under-header {padding:35px 0;}} .bkgrnd-light-grey {background:#e6e6e6; margin: 0 auto; padding:90px 0;} @media only screen and (max-width: 700px) {.bkgrnd-light-grey {padding:60px 0;}} .bkgrnd-light-grey-no-pad-top {background:#fff; margin: 0 auto; padding:0 0 90px;} @media only screen and (max-width: 700px) {.bkgrnd-light-grey-no-pad-top {padding:0 0 60px;}} .bkgrnd-very-light-grey {background:#e5e5e5; margin: 0 auto; padding:90px 0;} /***** was dca73c ****/ @media only screen and (max-width: 700px) {.bkgrnd-very-light-grey {padding:60px 0;}} .bkgrnd-very-light-grey-no-pad-top {background:#e5e5e5; margin: 0 auto; padding:0 0 90px;} @media only screen and (max-width: 700px) {.bkgrnd-very-light-grey-no-pad-top {padding:0 0 60px;}} .bkgrnd-dark-blue {background:#003066; margin: 0 auto; padding:90px 0;} @media only screen and (max-width: 700px) {.bkgrnd-dark-blue {padding:60px 0;}} .bkgrnd-dark-blue-no-pad-top {background:#fff; margin: 0 auto; padding:0 0 90px;} @media only screen and (max-width: 700px) {.bkgrnd-dark-blue-no-pad-top {padding:0 0 60px;}} /******************* HEADER *******************/ /*** Header elements require position ABSOLUTE so each can be adjusted by media queries without affecting the other header elements, & so all stay above underlying hero image**/ .header { position:absolute; width:100%; z-index:100; } .header-content {position:relative; width:100%;} /*** don't think this is used, delete later after checking every webpage ***/ /*----------------------------------------------------------- NAV CONTAINER ------------------------------------------------------------*/ /** NOTE: NAV-CONTAINER CODE DOESN'T SEEM TO DO ANYTHING NOW ONLY HAVE HAM MENU, WHEN CONFIDENT THIS IS THE CASE THEN REMOVE IT***/ .nav-container {position:absolute; left:50%; max-width:fit-content; margin: 25px auto 0 -400px;} /******************** MENU DIV ********************/ #menu {margin-right:0; margin-left:auto; padding-left:0; padding-right:0;} /********************* LOGO **********************/ .logo {position:absolute;} .logo img {max-width:146px; margin-left:54px; margin-top:23px; z-index:2000;} @media only screen and (max-width: 1600px) {.logo img {margin-top: 9px;}} @media only screen and (max-width: 1445px) {.logo img {margin-top: 37px;}} /*18jan26*/ @media only screen and (max-width: 938px) {.logo img {margin-left:69px;}} @media only screen and (max-width: 530px) {.logo img {margin-top:44px; width:128px; }} @media only screen and (max-width:495px){.logo img {margin-top: 44px;}} @media only screen and (max-width: 380px) { .logo img { max-width:125px; margin-left: CALC(50vw - 62px); margin-top: 46px; /*------------------Added 21Aug25-------------*/ } } /********************** BRITISH ENGINEERING **********************/ .british-engineering {position:absolute;} .british-engineering img {max-width:140px; margin: 28px 0 0 calc(100vw - 520px);} @media only screen and (max-width: 1445px) {.british-engineering img {margin-top: 66px;}} /*18jan26*/ @media only screen and (max-width: 1007px) {.british-engineering img {display:none !important;}} @media only screen and (max-width: 800px) {.british-engineering img { margin-left: calc(100vw - 170px);}} @media only screen and (max-width: 495px) {.british-engineering img {display:block !important; margin: 66px 0 0 calc(100vw - 166px);}} @media only screen and (max-width: 412px) {.british-engineering img {max-width:120px; margin-left: calc(100vw - 130px);}} @media only screen and (max-width: 380px) {.british-engineering img {display:none !important;}} /********************** LINKEDIN *********************/ .linkedin {position:absolute;} .linkedin {max-width:52px; margin: 14px 0 0 calc(100vw - 376px);} @media only screen and (max-width: 1700px) {.linkedin {margin-left: calc(100vw - 367px);}} @media only screen and (max-width: 1445px) {.linkedin {margin:52px 0 0 calc(100vw - 365px);}} @media only screen and (max-width:800px){.linkedin {margin-left:calc(100vw - 346px);}} @media only screen and (max-width:734px){.linkedin {margin-left:calc(100vw - 286px);}} @media only screen and (max-width:538px){.linkedin {margin-left:calc(100vw - 292px);}} @media only screen and (max-width:495px){.linkedin {margin-left:calc(100vw - 220px);}} @media only screen and (max-width:412px){.linkedin {max-width:50px; margin:53px 0 0 calc(100vw - 180px);}} @media only screen and (max-width:380px){.linkedin {margin-left:calc(100vw - 60px);}} /************************ INTEGRATED BINDERY SYSTEMS *************************/ .ibs {position:absolute; margin:39px 0 0 211px;} @media only screen and (max-width: 1600px) {.ibs {margin-top:22px;}} @media only screen and (max-width: 1445px) {.ibs {margin-top: 52px;}} /*18jan26*/ .ibs h3 {font-family:Michroma, Questrial; color:#fff; font-size:15px; line-height:18px; font-weight:400; margin-top:14px;} @media only screen and (max-width: 938px) {.ibs {margin-left:226px;}} @media only screen and (max-width: 660px) {.ibs { display:none !important;}} /*** so doesn't display ****/ /********************** SEARCH BOX **********************/ .search {position:absolute; width:310px; margin: 25px 0 0 calc(98vw - 285px);} /** changed from 100vw to 98vw on 18june25 **/ @media only screen and (max-width: 1445px) {.search {margin-top: 63px;}} /*18jan26*/ .search-caption {display:flex; flex-direction:row; align-items:center; padding-left:19px; width:90%; height:30px;} .google-search-image img {max-width:54px; vertical-align:top; margin-top:-5px; margin-left:4px;} @media only screen and (max-width:700px){.google-search-image img {max-width:48px; margin-top:-4px;}} @media only screen and (max-width:411px){.google-search-image img {max-width:46px; margin-top:-3px;}} .google-search-text, .google-search-google-text {margin-top:-6px; font-size:13px; color:#fff; text-shadow: 1px 1px 1px #000;} @media only screen and (min-width: 411px) {.google-search-google-text {display:none !important;}} @media only screen and (max-width: 412px) {.google-search-text{padding-right:4px; padding-left:4px;}} /*** the search box ***/ #txtSearch {width:175px; font-size:16px; height: 28px; padding-left:10px; padding-right:10px; background:#fff; text-align:left; border:1px solid #6f6f6f;} /*** the search button ***/ .search1 {font-size:16px; text-align: center; color: #fff; height: 29px; padding-left:14px; padding-right:14px; margin-left:3px; background:#7d90e5; border:0;} .search1:hover {background:#4356af; color:#ccc;} .search2 {text-align:left;} /*** not sure this does anything I added it ****/ @media only screen and (max-width:734px){ .search {width:240px; margin-left: calc(100vw - 240px);} #txtSearch {width:155px; font-size:13px; padding-left:4px; padding-right:4px;} .search1 {font-size:13px; margin-left:1px; padding-left:7px; padding-right:7px;} } @media only screen and (max-width: 495px) {.search{width:245px; margin:124px 0 0 calc(52vw - 113px);}} /*18jan26*/ /******************************************************* Header text for webpages with no hero image, where want h1 text in header to have h1 size text FOR WIDTHS ABOVE 700PX THEN THE NORMAL H2 CSS APPLIES ******************************************************/ .nohero-header-text--h1-as-h1-size {margin: 0 2%;} /****uses normal h1 css from styles file, plus the specific css re max-width 700px from this tag set***/ .nohero-header-text--h1-as-h1-size h1 {font-family: Questrial, 'Trebuchat MS', Verdana, Arial, Helvetica, sans-serif; color:#333333; text-align:left; margin-bottom:1vw;} .nohero-header-text--h1-as-h1-size h2 {font-family: Questrial, 'Trebuchat MS', Verdana, Arial, Helvetica, sans-serif; color: #333333; text-align: left;} /******************************************************* Header text for webpages with no hero image, where want h2 text in header to have h1 text size (for SEO reasons), for consistency with other pages ******************************************************/ .nohero-header-text--h2-as-h1-size {margin: 0 2%;} .nohero-header-text--h2-as-h1-size h2 {font-family: Questrial, 'Trebuchat MS', Verdana, Arial, Helvetica, sans-serif; color:#333333; text-align:left; margin-bottom:1vw; } .nohero-header-text--h2-as-h1-size p {font-family: Roboto, 'Trebuchat MS', Verdana, Arial, Helvetica, sans-serif; color: #333333; text-align: left; margin-bottom: -25px;} /********************************************************************************************* Hain Header text for modules datasheets - also used in Customer Feedback expanded webpages, Media report expanded pages, and a few News webpages **********************************************************************************************/ .modules-header-text {margin-top:50px; margin-bottom:3%;} @media only screen and (max-width: 750px){.modules-header-text {margin-top:25px; margin-bottom:1%;}} .modules-header-text h1 {color:#000; font-size:2.8rem; line-height:2.9rem; padding-bottom: 1%;} @media only screen and (max-width: 750px){.modules-header-text h1 {font-size:2.5rem; line-height:2.5rem; padding-bottom: 2%;}} @media only screen and (max-width: 450px){.modules-header-text h1 {font-size:2.2rem; line-height:2.2rem; padding-bottom: 2.5%;}} .modules-header-text p {font-family:Questrial; color:#333; text-shadow: 0 0 0 #fff; margin-top:12px;} @media only screen and (max-width:400px) {.modules-header-text p {margin-top:6px;}} /****IMAGES*****/ /*************************************** Hero image is the first DIV that is position:relative - all divs above that (logo, menus, IBS and hero text etc) are position:absolute. ****************************************/ .div-under-faded-hero-image {margin-top:-16vw;} @media only screen and (max-width:1100px) {.div-under-faded-hero-image {margin-top:-32vw;}} @media only screen and (max-width:700px) {.div-under-faded-hero-image {margin-top:-52vw;}} /********************************************************** Responsive images: Images displaying at different % sizes, & preserve aspect ratio with "auto" "auto" ***********************************************************/ img {width:100%; height: auto;} /*** if add width:auto here then it distorts images re their height ***/ .image-actual-size img {width:auto; height:auto;} /**** non-responsive images display at native pixel width ******/ /************.image90 img {width:90%; width: auto; height: auto;} .image85 img {width:85%; width: auto; height: auto;} .image80 img {width:80%; width: auto; height: auto;} .image75 img {width:75%; width: auto; height: auto;} .image70 img {width:70%; width: auto; height: auto;} .image65 img {width:65%; width: auto; height: auto;} .image60 img {width:60%; width: auto; height: auto;} .image55 img {width:55%; width: auto; height: auto;} .image50 img {width:50%; width: auto; height: auto;} .image45 img {width:45%; width: auto; height: auto;} .image40 img {width:40%; width: auto; height: auto;} .image35 img {width:35%; width: auto; height: auto;} .image30 img {width:30%; width: auto; height: auto;} .image25 img {width:25%; width: auto; height: auto;} .image20 img {width:20%; width: auto; height: auto;} .image15 img {width:15%; width: auto; height: auto;} .image10 img {width:10%; width: auto; height: auto;} .image5 img {width:5%; width: auto; height: auto;} above image85 to image5 commented out on 28feb2026, I checked and none seem to be used on webpages ******/ /********images given px max-width, centered horizontally *********/ .image1000px {max-width:1000px; margin: 0 auto;} .image950px {max-width:950px; margin: 0 auto;} .image900px {max-width:900px; margin: 0 auto;} .image850px {max-width:850px; margin: 0 auto;} .image800px {max-width:800px; margin: 0 auto;} .image750px {max-width:750px; margin: 0 auto;} .image700px {max-width:700px; margin: 0 auto;} .image600px {max-width:600px; margin: 0 auto;} .image575px {max-width:575px; margin: 0 auto;} .image550px {max-width:550px; margin: 0 auto;} .image525px {max-width:525px; margin: 0 auto;} .image500px {max-width:500px; margin: 0 auto;} .image475px {max-width:475px; margin: 0 auto;} .image450px {max-width:450px; margin: 0 auto;} .image425px {max-width:425px; margin: 0 auto;} .image400px {max-width:400px; margin: 0 auto;} .image375px {max-width:375px; margin: 0 auto;} .image350px {max-width:350px; margin: 0 auto;} .image300px {max-width:300px; margin: 0 auto;} .image250px {max-width:250px; margin: 0 auto;} .image200px {max-width:200px; margin: 0 auto;} .image-left-200px {max-width:200px;} .image-right-200px {max-width:200px; margin: 0 0 0 auto;} /**** doesn't seem to work not justifying right ***/ .image190px {max-width:190px; margin: 0 auto;} .image180px {max-width:180px; margin: 0 auto;} .image170px {max-width:170px; margin: 0 auto;} .image160px {max-width:160px; margin: 0 auto;} .image150px {max-width:150px; margin: 0 auto;} .image140px {max-width:140px; margin: 0 auto;} .image130px {max-width:130px; margin: 0 auto;} .image125px {max-width:125px; margin: 0 auto;} .image120px {max-width:120px; margin: 0 auto;} .image110px {max-width:110px; margin: 0 auto;} .image100px {max-width:100px; margin: 0 auto;} .image75px {max-width:75px; margin: 0 auto;} .image60px {max-width:60px; margin: 0 auto;} .image50px {max-width:50px; margin: 0 auto;} .image40px {max-width:40px; margin: 0 auto;} .image30px {max-width:30px; margin: 0 auto;} .image-left-30px {max-width:30px;} .image25px {max-width:25px; margin: 0 auto;} .image20px {max-width:20px; margin: 0 auto;} .image20px-left {max-width:20px;} .image15px {max-width:15px; margin: 0 auto;} .image10px {max-width:10px; margin: 0 auto;} /***************************************** images used in customer-feedback sections ******************************************/ .image-customer-feedback {max-width:180px;} @media only screen and (max-width: 740px) {.image-customer-feedback {max-width:120px;}} @media only screen and (max-width: 480px) {.container-only-buttons-upper {width:270px; justify-content: center; margin:0 auto; left:0; right:0; padding-left:22px; }} @media only screen and (max-width: 480px) {.container-only-buttons-lower {width:270px; justify-content: center; margin:0 auto; left:0; right:0; }} /*************************** CSS buttons ****************************/ /********************************************************** Links - actual text, where text is bold and underlined on hover **********************************************************/ a.text-link:link, a.text-link:visited, a.text-link:active {text-decoration: none; color: #004795; font-weight:600;} a.text-link:hover {text-decoration:underline; color: #004795; font-weight:600;} /* within dark-blue-bg, text color is white not blue */ .bkgrnd-dark-blue a.text-link {color:#fff;} /*** NOTE: CSS for the 'top' links are covered elsewhere in this file ****/ /****************************************************************** Buttons containing text - with border, no background colour, border colour adjusted depending on white, light-grey or dark-blue bkgrnds - FOR USE WITHIN FLOWING TEXT SO DOESN'T CREATE GREATER LINE SPACE BETWEEN ROWS OF TEXT. *****************************************************************/ a.link-within-flow-text:link, a.link-within-flow-text:visited, a.link-within-flow-text:active, a.link-within-flow-text:hover{ font-size:1.8rem; color:#505050;; /*** fall-back setting, set below for white, light-grey and dark-blue bkgrnds see below ***/ line-height:22px; text-align:left; margin:0 3px; padding:2px 8px; left:0; right:0; text-decoration: none; border:1px solid #807e7e; border-radius:5px; } a.link-within-flow-text:hover {background-color: #cedbfd;} /** uses same text sizes at different resolutions as used for

earlier in this css file **/ @media only screen and (max-width: 900px) {a.link-within-flow-text:link, a.link-within-flow-text:visited, a.link-within-flow-text:active {font-size: 1.6rem;}} @media only screen and (max-width: 600px) {a.link-within-flow-text:link, a.link-within-flow-text:visited, a.link-within-flow-text:active {font-size: 1.5rem;}} @media only screen and (max-width: 740px){a.link-within-flow-text:link, a.link-within-flow-text:visited, a.link-within-flow-text:active {font-size:14px;}} @media only screen and (max-width: 500px){a.link-within-flow-text:link, a.link-within-flow-text:visited, a.link-within-flow-text:active {padding:0 8px; line-height:18px;}} /*** text color and border colour, when used on different border colours ***/ .bkgrnd-white a.link-within-flow-text {color:#505050;; border:1px solid #807e7e;} .bkgrnd-light-grey a.link-within-flow-text {color:#272727; border:1px solid #807e7e;} .bkgrnd-dark-blue a.link-within-flow-text {color:#ccc; border:1px solid #807e7e;} /*** hover text colour, bkgrnd colour and border colour, when used on different border colours ***/ .bkgrnd-white a.link-within-flow-text:hover {color: #fff; border:1px solid #807e7e; background-color: #031976; } .bkgrnd-light-grey a.link-within-flow-text:hover {color: #ccc; border:1px solid #807e7e; background-color: #181f3c; } .bkgrnd-dark-blue a.link-within-flow-text:hover {color: #ccc; border:1px solid #807e7e; background-color: #181f3c; } /****************************************************************** Buttons containing text - with border, no background colour, border colour adjusted depending on white, light-grey or dark-blue bkgrnds *****************************************************************/ /*** NOTE: CSS for the 'top' links are covered elsewhere in this file ****/ a.link-within-text:link, a.link-within-text:visited, a.link-within-text:active, a.link-within-text:hover{ font-size:16px; color:#333; /*** fall-back setting, set below for white, light-grey and dark-blue bkgrnds see below ***/ line-height:33px; text-align:left; margin:8px 4px; padding:5px 15px; left:0; right:0; text-decoration: none; border:1px solid #807e7e; /*** fall-back setting, set below for white, light-grey and dark-blue bkgrnds ***/ border-radius:5px; } a.link-within-text:hover {background-color: #cedbfd;} @media only screen and (max-width: 740px){a.link-within-text:link, a.link-within-text:visited, a.link-within-text:active {font-size:14px;}} /*** text color and border colour, when used on different border colours ***/ .bkgrnd-white a.link-within-text {color:#333; border:1px solid #807e7e;} .bkgrnd-light-grey a.link-within-text {color:#272727; border:1px solid #807e7e;} .bkgrnd-dark-blue a.link-within-text {color:#ccc; border:1px solid #807e7e;} /*** hover text colour, bkgrnd colour and border colour, when used on different border colours ***/ .bkgrnd-white a.link-within-text:hover {color: #fff; border:1px solid #807e7e; background-color: #031976; } .bkgrnd-light-grey a.link-within-text:hover {color: #ccc; border:1px solid #807e7e; background-color: #181f3c; } .bkgrnd-dark-blue a.link-within-text:hover {color: #ccc; border:1px solid #807e7e; background-color: #181f3c; } /************************************************************ links with dark-blue-background - small and large sizes (display: block required on the large size buttons, so extend full width and can use a
within the text) ************************************************************/ a.link-small-dark-blue-bg:link, a.link-small-dark-blue-bg:visited, a.link-small-dark-blue-bg:active, a.link-large-dark-blue-bg:link, a.link-large-dark-blue-bg:visited, a.link-large-dark-blue-bg:active { color: #fff; /*--was #333 ---*/ background-color: #003066; font-family: Roboto; text-decoration: none; text-align: center; margin: 0 auto; left:0; right:0; border-radius:6px; } a.link-small-dark-blue-bg:link, a.link-small-dark-blue-bg:visited, a.link-small-dark-blue-bg:active {font-size:1.6rem; line-height:1.6rem; padding: 6px 12px 8px 12px;} a.link-large-dark-blue-bg:link, a.link-large-dark-blue-bg:visited, a.link-large-dark-blue-bg:active {display: block; font-size:1.6rem; line-height:1.6rem; padding: 20px;} a.link-small-dark-blue-bg:hover, a.link-large-dark-blue-bg:hover { color: #fff; background-color:#081438; } @media only screen and (max-width: 740px) {a.link-small-dark-blue-bg:link, a.link-small-dark-blue-bg:visited, a.link-small-dark-blue-bg:active {font-size:1.5rem; line-height:1.5rem;}} @media only screen and (max-width: 540px) {a.link-small-dark-blue-bg:link, a.link-small-dark-blue-bg:visited, a.link-small-dark-blue-bg:active {font-size:1.4rem; line-height:1.4rem;}} @media only screen and (max-width: 740px) {a.link-large-dark-blue-bg:link, a.link-large-dark-blue-bg:visited, a.link-large-dark-blue-bg:active {font-size:1.5rem; line-height:1.5rem;}} @media only screen and (max-width: 540px) {a.link-large-dark-blue-bg:link, a.link-large-dark-blue-bg:visited, a.link-large-dark-blue-bg:active {font-size:1.4rem; line-height:1.4rem;}} /************************************************************************************ TOP links - on both white, light-grey & dark-blue backgrounds - both re headers and sub-headers *************************************************************************************/ /**TOP links to right of headings - on both white, light-grey & dark-blue bkgrnds**/ a.h-top-white-bg:link, a.h-top-white-bg:visited, a.h-top-white-bg:active, a.h-top-light-grey-bg:link, a.h-top-light-grey-bg:visited, a.h-top-light-grey-bg:active, a.h-top-dark-blue-bg:link, a.h-top-dark-blue-bg:visited, a.h-top-dark-blue-bg:active, /**TOP links to right of sub-headings on both white, light-grey & dark-blue bkgrnds**/ a.sh-top-white-bg:link, a.sh-top-white-bg:visited, a.sh-top-white-bg:active, a.sh-top-light-grey-bg:link, a.sh-top-light-grey-bg:visited, a.sh-top-light-grey-bg:active, a.sh-top-dark-blue-bg:link, a.sh-top-dark-blue-bg:visited, a.sh-top-dark-blue-bg:active { position:absolute; font-size:13px; line-height:13px; text-align: center; padding:7px 10px 4px; width:18px; height:15px; text-decoration: none; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; z-index:6000; } /** 'Top' links to right of headngs over white bkgrnd **/ a.h-top-white-bg:link, a.h-top-white-bg:visited, a.h-top-white-bg:active {color: #000; border:1px solid #aaa9a9; margin:0 0 0 92vw;} @media only screen and (max-width: 740px){ a.h-top-white-bg:link, a.h-top-white-bg:visited, a.h-top-white-bg:active {margin: 0 0 0 85vw;}} /** 'Top' links to right of headngs over light-grey bkgrnd **/ a.h-top-light-grey-bg:link, a.h-top-light-grey-bg:visited, a.h-top-light-grey-bg:active {color: #000; border:1px solid #aaa9a9; margin:0 0 0 92vw;} @media only screen and (max-width: 740px){ a.h-top-light-grey-bg:link, a.h-top-light-grey-bg:visited, a.h-top-light-grey-bg:active {margin:0 0 0 85vw;}} /** 'Top' links to right of headings over dark-blue bkgrnd **/ a.h-top-dark-blue-bg:link, a.h-top-dark-blue-bg:visited, a.h-top-dark-blue-bg:active {color:#be9a57; border:1px solid #be9a57; margin:0 0 0 92vw;} @media only screen and (max-width: 740px){ a.h-top-dark-blue-bg:link, a.h-top-dark-blue-bg:visited, a.h-top-dark-blue-bg:active {margin:0 0 0 85vw;}} /** 'Top' links to right of sub-headings **/ /** 'Top' links to right of sub-heading over white bkgrnd **/ a.sh-top-white-bg:link, a.sh-top-white-bg:visited, a.sh-top-white-bg:active {color: #000; border:1px solid #aaa9a9; margin:-63px 0 63px 76%;} @media only screen and (max-width: 740px){ a.sh-top-white-bg:link, a.sh-top-white-bg:visited, a.sh-top-white-bg:active {margin-left:82%;}} @media only screen and (max-width: 410px){ a.sh-top-white-bg:link, a.sh-top-white-bg:visited, a.sh-top-white-bg:active {margin-left:78%;}} /** 'Top' links to right of sub-heading over light-grey bkgrnd **/ a.sh-top-white-bg:link, a.sh-top-white-bg:visited, a.sh-top-white-bg:active {color: #000; border:1px solid #aaa9a9; margin:-63px 0 63px 76%;} @media only screen and (max-width: 740px){ a.sh-top-white-bg:link, a.sh-top-white-bg:visited, a.sh-top-white-bg:active {margin-left:82%;}} /** 'Top' links to right of sub-heading over dark-blue-bg **/ a.sh-top-dark-blue-bg:link, a.sh-top-dark-blue-bg:visited, a.sh-top-dark-blue-bg:active {color:#be9a57; border:1px solid #be9a57; margin:-63px 0 63px 76%;} @media only screen and (max-width: 740px){ a.sh-top-dark-blue-bg:link, a.sh-top-dark-blue-bg:visited, a.sh-top-dark-blue-bg:active {margin-left:82%;}} /********************************************************** MAIN HEADINGS **********************************************************/ /*** main-heading, sub-heading, and hr (under them) must both be position sticky for z-index to work so hr displays UNDER the Main or Sub heading rectangle ****/ /** common to all main headings **/ .main-heading-outer {position:sticky;} .main-heading-inner {position:sticky; width:1080px; margin: 0 auto ;} /********************************** MAIN HEADINGS - white backgrounds **********************************/ .main-heading-white-bg h1 {font-weight:300; max-width:70vw; color:#333; font-size: 3.2rem; line-height:3.4rem; padding-bottom: 30px;} .main-heading-white-bg h2 {font-weight:300; max-width:70vw; color:#333; font-size: 2.6rem; line-height:2.8rem; padding-bottom: 30px;} .main-heading-white-bg p {font-size:1.6rem; color:#d6d4cf;} @media only screen and (max-width: 1100px) {.main-heading-white-bg h2 {margin-left:2.5%;}} @media only screen and (max-width: 700px) { .main-heading-white-bg h1 {font-size: 2.4rem; line-height:2.8rem; padding-bottom: 15px; margin-left:3.5%;} .main-heading-white-bg h2 {font-size: 2.2rem; line-height:2.4rem; padding-bottom: 15px; margin-left:3.5%;} .main-heading-white-bg p {font-size:1.4rem;} } @media only screen and (max-width: 400px) { .main-heading-white-bg h1 {font-size: 2.3rem; line-height:2.5rem; padding-bottom: 12px; margin-left:5.5%;} .main-heading-white-bg h2 {font-size: 1.9rem; line-height:2.1rem; padding-bottom: 12px; margin-left:5.5%;} .main-heading-white-bg p {font-size:1.4rem;} } /********************************** MAIN HEADINGS - light-grey backgrounds **********************************/ .main-heading-light-grey-bg h2 {font-weight:300; max-width:70vw; color:#2a2a2a; font-size: 2.6rem; line-height:2.8rem; padding-bottom:30px;} .main-heading-light-grey-bg p {font-size:1.6rem; color:#d6d4cf;} @media only screen and (max-width: 1100px) {.main-heading-light-grey-bg h2 {margin-left:2.5%;}} @media only screen and (max-width: 700px) { .main-heading-light-grey-bg h2 {font-size: 2.2rem; line-height:2.4rem; padding-bottom: 15px; margin-left:3.5%;} .main-heading-light-grey-bg p {font-size:1.4rem;} } @media only screen and (max-width: 400px) { .main-heading-light-grey-bg h2 {font-size: 1.9rem; line-height:2.1rem; padding-bottom: 12px; margin-left:5.5%;} .main-heading-light-grey-bg p {font-size:1.4rem;} } /********************************** MAIN HEADINGS - dark backgrounds **********************************/ .main-heading-dark-blue-bg h2 {font-weight:300; max-width:70vw; color:#fff; font-size: 2.6rem; line-height:2.8rem; padding-bottom:30px;} .main-heading-dark-blue-bg p {font-size:1.6rem; color:#d6d4cf;} @media only screen and (max-width: 1100px) {.main-heading-dark-blue-bg h2 {margin-left:2.5%;}} @media only screen and (max-width: 700px) { .main-heading-dark-blue-bg h2 {font-size: 2.2rem; line-height:2.4rem; padding-bottom: 15px; margin-left:3.5%;} .main-heading-dark-blue-bg p {font-size:1.4rem;} } @media only screen and (max-width: 400px) { .main-heading-dark-blue-bg h2 {font-size: 1.9rem; line-height:2.1rem; padding-bottom: 12px; margin-left:5.5%;} .main-heading-dark-blue-bg p {font-size:1.4rem;} } /********************************************************** SUB-HEADINGS - over WHITE bkgrnd with f2-1--1-1 (and rev) with c40 c50 c60 columns **********************************************************/ /*** FOR LEFT COLUMNS and RIGHT COLUMNS ***/ .sub-heading-white-c40-left-bg, .sub-heading-white-c40-right-bg, .sub-heading-white-c50-left-bg, .sub-heading-white-c50-right-bg, .sub-heading-white-c60-left-bg, .sub-heading-white-c60-right-bg {position:sticky; z-index:100;} .sub-heading-white-c40-left-bg h2, .sub-heading-white-c40-right-bg h2, .sub-heading-white-c50-left-bg h2, .sub-heading-white-c50-right-bg h2, .sub-heading-white-c60-left-bg h2, .sub-heading-white-c60-right-bg h2 {font-family:Questrial; color:#003066; width:50%; z-index:5000; padding:8px 15px 10px 0; border-top: 1px solid #939191; border-right: 1px solid #939191; border-top-right-radius:8px;} .sub-heading-white-c40-left-bg {margin:0 50% 0 2%;} .sub-heading-white-c40-right-bg {margin:0 0 0 52%;} .sub-heading-white-c50-left-bg {margin:0 50% 0 2%;} .sub-heading-white-c50-right-bg {margin:0 0 0 52%;} .sub-heading-white-c60-left-bg {margin:0 40% 0 2%;} .sub-heading-white-c60-right-bg {margin:0 0 0 52%;} @media only screen and (max-width:600px) { .sub-heading-white-c40-left-bg h2, .sub-heading-white-c40-right-bg h2, .sub-heading-white-c50-left-bg h2, .sub-heading-white-c50-right-bg h2, .sub-heading-white-c60-left-bg h2, .sub-heading-white-c60-right-bg h2 {width:60%; margin-left:0;} } @media only screen and (max-width:740px) { .sub-heading-white-c40-left-bg, .sub-heading-white-c40-right-bg, .sub-heading-white-c50-left-bg, .sub-heading-white-c50-right-bg, .sub-heading-white-c60-left-bg, .sub-heading-white-c60-right-bg {margin: 0 0 0 8%;} } /********************************************************** SUB-HEADINGS - over LIGHT-GREY bkgrnd with f2-1--1-1 (and rev) with c40 c50 c60 columns **********************************************************/ /*** RE LEFT HAND COLUMN ***/ .sub-heading-light-grey-c40-left-bg, .sub-heading-light-grey-c40-right-bg, .sub-heading-light-grey-c50-left-bg, .sub-heading-light-grey-c50-right-bg, .sub-heading-light-grey-c60-left-bg, .sub-heading-light-grey-c60-right-bg {position:sticky; z-index:100;} .sub-heading-light-grey-c40-left-bg h2, .sub-heading-light-grey-c40-right-bg h2, .sub-heading-light-grey-c50-left-bg h2, .sub-heading-light-grey-c50-right-bg h2, .sub-heading-light-grey-c60-left-bg h2, .sub-heading-light-grey-c60-right-bg h2 {font-family:Questrial; color:#003066; width:40%; z-index:5000; padding:8px 15px 10px 0; border-top: 1px solid #959393; border-right: 1px solid #959393; border-top-right-radius:8px;} .sub-heading-light-grey-c40-left-bg {margin:0 50% 0 2%;} .sub-heading-light-grey-c40-right-bg {margin:0 0 0 52%;} .sub-heading-light-grey-c50-left-bg {margin:0 50% 0 2%;} .sub-heading-light-grey-c50-right-bg {margin:0 0 0 52%;} .sub-heading-light-grey-c60-left-bg {margin:0 40% 0 2%;} .sub-heading-light-grey-c60-right-bg {margin:0 0 0 52%;} @media only screen and (max-width:600px) { .sub-heading-light-grey-c40-left-bg h2, .sub-heading-light-grey-c40-right-bg h2, .sub-heading-light-grey-c50-left-bg h2, .sub-heading-light-grey-c50-right-bg h2, .sub-heading-light-grey-c60-left-bg h2, .sub-heading-light-grey-c60-right-bg h2 {width:60%; margin-left:0;} } @media only screen and (max-width:740px) { .sub-heading-light-grey-c40-left-bg, .sub-heading-light-grey-c40-right-bg, .sub-heading-light-grey-c50-left-bg, .sub-heading-light-grey-c50-right-bg, .sub-heading-light-grey-c60-left-bg, .sub-heading-light-grey-c60-right-bg {margin: 0 0 0 8%;} } /********************************************************** SUB-HEADINGS - over DARK-GREY bkgrnd with f2-1--1-1 (and rev) with c40 c50 c60 columns **********************************************************/ /*** RE LEFT HAND COLUMN ***/ .sub-heading-dark-grey-c40-left-bg, .sub-heading-dark-grey-c40-right-bg, .sub-heading-dark-grey-c50-left-bg, .sub-heading-dark-grey-c50-right-bg, .sub-heading-dark-grey-c60-left-bg, .sub-heading-dark-grey-c60-right-bg {position:sticky; z-index:100;} .sub-heading-dark-grey-c40-left-bg h2, .sub-heading-dark-grey-c40-right-bg h2, .sub-heading-dark-grey-c50-left-bg h2, .sub-heading-dark-grey-c50-right-bg h2, .sub-heading-dark-grey-c60-left-bg h2, .sub-heading-dark-grey-c60-right-bg h2 { font-family:Questrial; color:#003066; width:50%; z-index:5000; padding:8px 15px 10px 0; border-top: 1px solid #333; border-right: 1px solid #333; border-top-right-radius:8px;} .sub-heading-dark-grey-c40-left-bg {margin:0 50% 0 2%;} .sub-heading-dark-grey-c40-right-bg {margin:0 0 0 52%;} .sub-heading-dark-grey-c50-left-bg {margin:0 50% 0 2%;} .sub-heading-dark-grey-c50-right-bg {margin:0 0 0 52%;} .sub-heading-dark-grey-c60-left-bg {margin:0 40% 0 2%;} .sub-heading-dark-grey-c60-right-bg {margin:0 0 0 52%;} @media only screen and (max-width:600px) { .sub-heading-dark-grey-c40-left-bg h2, .sub-heading-dark-grey-c40-right-bg h2, .sub-heading-dark-grey-c50-left-bg h2, .sub-heading-dark-grey-c50-right-bg h2, .sub-heading-dark-grey-c60-left-bg h2, .sub-heading-dark-grey-c60-right-bg h2 {width:60%; margin-left:0;} } @media only screen and (max-width:740px) { .sub-heading-dark-grey-c40-left-bg, .sub-heading-dark-grey-c40-right-bg, .sub-heading-dark-grey-c50-left-bg, .sub-heading-dark-grey-c50-right-bg, .sub-heading-dark-grey-c60-left-bg, .sub-heading-dark-grey-c60-right-bg {margin: 0 0 0 8%;} } /********************************************************** SUB-HEADINGS - over DARK BLUE bkgrnd with f2-1--1-1 (and rev) with c40 c50 c60 columns **********************************************************/ /*** RE LEFT HAND COLUMN ***/ .sub-heading-dark-blue-c50-left-bg, .sub-heading-dark-blue-c50-left-bg, .sub-heading-dark-blue-c50-left-bg, .sub-heading-dark-blue-c50-right-bg, .sub-heading-dark-blue-c60-left-bg, .sub-heading-dark-blue-c60-right-bg {position:sticky; z-index:100;} .sub-heading-dark-blue-c40-left-bg h2, .sub-heading-dark-blue-c40-right-bg h2, .sub-heading-dark-blue-c50-left-bg h2, .sub-heading-dark-blue-c50-right-bg h2, .sub-heading-dark-blue-c60-left-bg h2, .sub-heading-dark-blue-c60-right-bg h2 {font-family:Questrial; color:#f4c99f; width:50%; z-index:5000; padding:8px 15px 10px 0; border-top: 1px solid #f4c99f; border-right: 1px solid #f4c99f; border-top-right-radius:8px;} .sub-heading-dark-blue-c40-left-bg {margin:0 50% 0 2%;} .sub-heading-dark-blue-c40-right-bg {margin:0 0 0 52%;} .sub-heading-dark-blue-c50-left-bg {margin:0 50% 0 2%;} .sub-heading-dark-blue-c50-right-bg {margin:0 0 0 52%;} .sub-heading-dark-blue-c60-left-bg {margin:0 40% 0 2%;} .sub-heading-dark-blue-c60-right-bg {margin:0 0 0 52%;} @media only screen and (max-width:600px) { .sub-heading-dark-blue-c40-left-bg h2, .sub-heading-dark-blue-c40-right-bg h2, .sub-heading-dark-blue-c50-left-bg h2, .sub-heading-dark-blue-c50-right-bg h2, .sub-heading-dark-blue-c60-left-bg h2, .sub-heading-dark-blue-c60-right-bg h2 {width:60%; margin-left:0;} } @media only screen and (max-width:740px) { .sub-heading-dark-blue-c40-left-bg, .sub-heading-dark-blue-c40-right-bg, .sub-heading-dark-blue-c50-left-bg, .sub-heading-dark-blue-c50-right-bg, .sub-heading-dark-blue-c60-left-bg, .sub-heading-dark-blue-c60-right-bg {margin: 0 0 0 8%;} } /****************************************** container used for video button ******************************************/ .link-large-container { margin: 0 auto; left:0; right:0; text-align: center; } @media only screen and (min-width:350px) {.link-large-container {width:300px;}} /********************************************************************************** Hero panel text - and if used a button link under the text. If different vertical postioning is required on given webpages, then this is added to that page's CSS file, ie re .hero-panel-text {margin-top:XXvw} **********************************************************************************/ .hero-panel-text {position:absolute; margin-top:30vw; z-index:1;} .hero-panel-text h1 {text-align: left; color: #fff; font-family: Questrial; padding-left:40px; padding-right:20px; text-shadow: 1px 1px 1px #000; } .hero-panel-text p {color:#f4f4f4; font-size: 20px; line-height:21px; padding-left:40px; text-shadow: 1px 1px 1px #000;} .hero-panel-text .hero-panel-button {padding-left:40px;} .hero-panel-button a.link-small-dark-blue-bg {margin-left:-10px;} @media only screen and (max-width:1100px) {.hero-panel-text {margin-top:40vw;}} @media only screen and (max-width:700px) {.hero-panel-text {margin-top:65vw;}} /**hero-panel-text h1, p, and button media queries****/ @media only screen and (max-width:1100px) {.hero-panel-text h1 {padding-left:20px} .hero-panel-text p {font-size: 18px; line-height: 17px; padding-left:20px;} .hero-panel-text .hero-panel-button {padding-left:20px;}} @media only screen and (max-width:700px) {.hero-panel-text h1 {padding-left:20px} .hero-panel-text p {margin-top:0; font-size: 17px; line-height: 16px; padding-left:20px;}} @media only screen and (max-width:600px) {.hero-panel-text p {margin-top:-4px; font-size: 17px; line-height: 16px;}} @media only screen and (max-width:500px) {.hero-panel-text h1 {padding-left:16px;} .hero-panel-text p {font-size: 14px; line-height:15px; padding-left:16px;} .hero-panel-text .hero-panel-button {padding-left:16px;} .book-finishing .hero-panel-button a {font-size:16px; } .hero-panel-button a.link-small-dark-blue-bg {margin-left:-12px;}} /************************* Banner light blue - eg as used for Mission statement on the Description page **************************/ .banner-light-blue p {font-family: Questrial; color: #fff; font-weight: 400; font-size: 2.4rem; line-height:3.6rem; background-color:#416083; border-radius:6px; margin-top:2.5%; padding:40px 80px;} @media only screen and (max-width:1100px){.banner-light-blue p {font-size:2.2rem; line-height:3rem; padding: 40px 40px; }} @media only screen and (max-width:740px){.banner-light-blue p {font-size: 2rem; line-height:2.7rem; text-align: center; margin-left:2%; margin-right:2%;}} /********************************* Caption to full width image *********************************/ .full-width-image-caption p {text-align: center; margin: 0 auto; left:0; right:0;} /************************************************************************************ TABLE STYLING using table.outer-white-bg, table.outer-light-grey-bg and table.outer-dark-blue-bg *************************************************************************************/ /**** text size related styling is at top of page after the 'list' styling section ***/ table.outer-white-bg, table.outer-light-grey-bg, table.outer-dark-blue-bg { width:96%; border-collapse: collapse; } table.outer-white-bg td, table.outer-light-grey-bg td, table.outer-dark-blue-bg td {padding: 6px;} /*** padding around content in each cell ***/ /*** bkgrnd specific table CSS ***/ table.outer-white-bg {color:#333;} /** text colour within table cells **/ table.outer-light-grey-bg {color:#242424;} /** text colour within table cells **/ table.outer-dark-blue-bg {color:#dedddd;} /** text colour within table cells **/ table.outer-white-bg td {border: 1px solid #989797;} /*** add background:#xxxxxx; to give table a bkgrnd colour **/ table.outer-light-grey-bg td {border: 1px solid #989797;} /*** add background:#xxxxxx; to give table a bkgrnd colour **/ table.outer-dark-blue-bg td {border: 1px solid #989797;} /*** add background:#xxxxxx; to give table a bkgrnd colour **/ /**************************************** Responsive tables, horiz swipe columns on mobiles ****************************************/ .table-responsive-container table { /*** "th" top row "tbody td" every other row ***/ font-family: Roboto, Helvetica, 'Trebuchat MS', Verdana, Arial, sans-serif; color:#505050; font-size:1.8rem; line-height: 2.4rem; font-weight: 400; } @media only screen and (max-width: 900px) {.table-responsive-container table {font-size: 1.6rem; line-height: 2.0rem;}} @media only screen and (max-width: 600px) {.table-responsive-container table {font-size: 1.5rem; line-height: 1.9rem;}} .table-responsive-container { width: 96%; margin: 15px auto; margin-left:0; padding-left:0; overflow-x: auto; } .table-responsive-container table { font-family: arial, "Open Sans", sans-serif; position: relative; border-collapse: separate; /** seperate not 'collapse' or 1st col loses rhd border when scroll cols to left **/ border-spacing: 0; table-layout: auto; width: 100%; white-space: nowrap; } /** borders **/ .table-responsive-container table, .table-responsive-container table th, .table-responsive-container table td { border: 1px solid #dedddd; } .table-responsive-container table thead tr th {border:1px solid #cecdcd;} /** border 'thead' top row cells **/ /** end of borders **/ .table-responsive-container table thead tr { text-align: left; } .table-responsive-container table thead tr th { background: #f0f7ff; /** color of top row (except 1st col, see below) **/ padding: 1rem 0.4rem 1rem 1rem; vertical-align: top; font-weight:400; /*** if want header row in bold change to 600; ***/ } .table-responsive-container table tbody tr:nth-child(odd) td { background: #ffffff; } .table-responsive-container table tbody tr:nth-child(even) td { background: #f7f7f7; } .table-responsive-container table tbody td { color: #1a202c; padding: 0.5rem 0.5rem; vertical-align: middle; text-align:left; padding-left:1rem; } .table-responsive-container table tr > th:first-child, .table-responsive-container table tr > td:first-child { position: sticky; left: 0; } .table-responsive-container table tbody tr td:nth-child(1), table thead tr th:nth-child(1){ background-color:#f0f7ff; /** bkgrnd color of 1st col if required **/ } .table-responsive-container table {text-wrap:wrap;} /********************************************* Videos **********************************************/ .video-intro-text p {text-align:center; padding: 0;} .video-container {display:flex; padding: 0 3% 0 3%; margin-top:-8px;} video { text-align:center; left:0; right:0; width: 100%; height: auto; margin: 0 auto; border-bottom:1px solid #b9b6b6; } @media only screen and (max-width: 1000px) {.video-container {padding: 0 2%;}} @media only screen and (max-width: 700px) {.video-container {margin-bottom:-4%;}} @media only screen and (max-width: 600px) {.video-container {padding: 0 2% 0 1%; margin-bottom:-6%;}} /**************************************** Tabs for tables ****************************************/ @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700); @import url(https://fonts.googleapis.com/css?family=Raleway:100,400,700); .pc-tab > input, .pc-tab section > div { display: none; } #tab1:checked ~ section .tab1, #tab2:checked ~ section .tab2, #tab3:checked ~ section .tab3, #tab4:checked ~ section .tab4, #tab5:checked ~ section .tab5 {display: block;} #tab1:checked ~ nav .tab1, #tab2:checked ~ nav .tab2, #tab3:checked ~ nav .tab3, #tab4:checked ~ nav .tab4, #tab5:checked ~ nav .tab5 {color: red;} /***BORDER-BOX, IF INCLUDE IT MESSES UP LOGO AT TOP, CUTS IT SHORT *** *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ***/ .pc-tab { width: 96%; max-width: 700px; margin: 0 auto; font-size:17px; line-height: 19px; font-family: Roboto; } .pc-tab ul { list-style: none; margin: 0 0 0 0; padding: 0; z-index:0; /***so menu sub-menus run over the top of the tabs ***/ } .pc-tab ul li label { font-family: "Raleway"; float: left; padding: 15px 15px; border: 1px solid #b5b4b4; /*** border color of tabs ***/ border-bottom: 0; background: #f5f5f5; /***tabs bkgrnd color ***/ color: #272727; } .pc-tab ul li label:hover { background: #dddddd; } .pc-tab ul li label:active { background: #ffffff; } .pc-tab ul li:not(:last-child) label { border-right-width: 0; } .pc-tab section { font-family: "Droid Serif"; clear: both; } .pc-tab section div { width: 100%; background: #fff; color: #444; } .pc-tab section div h2 { margin: 0; font-family: "Raleway"; letter-spacing: 1px; color: #34495e; } #tab1:checked ~ nav .tab1 label, #tab2:checked ~ nav .tab2 label, #tab3:checked ~ nav .tab3 label, #tab4:checked ~ nav .tab4 label, #tab5:checked ~ nav .tab5 label{ background: white; color: #111; position: relative; } #tab1:checked ~ nav .tab1 label:after, #tab2:checked ~ nav .tab2 label:after, #tab3:checked ~ nav .tab3 label:after, #tab4:checked ~ nav .tab4 label:after, #tab5:checked ~ nav .tab5 label:after{ content: ""; display: block; position: absolute; height: 2px; width: 100%; background: #ffffff; left: 0; bottom: -1px; } /********************************** Partners - breakpoint so the two images wrap at smaller screen sizes ***********************************/ @media only screen and (min-width:600px) {.partners-breakpoint { display:none !important; }} /********************************************* MAIN FOOTER, BOTTOM OF PAGE, WITH DARK BLUE BKGRND **********************************************/ .bkgrnd-footer-dark-blue {background:#46566d; margin: 0 auto; padding:17px 0;} @media only screen and (max-width:950px){ .bkgrnd-footer-dark-blue {padding-top:3%; padding-bottom:5%;}} @media only screen and (max-width:500px){ .bkgrnd-footer-dark-blue {padding-top:5%; padding-bottom:8%;}} @media only screen and (max-width:400px){ .bkgrnd-footer-dark-blue {padding-bottom:11%;}} .bkgrnd-footer-dark-blue p {color:#cccccc;} /***Footer content - within dark-blue bkgrnd******/ .footer-subheaders p {font-size:18px; color:#e0b76d; text-align: left;} /***subheader texts within footer***/ .ibis-address p {font-size:15px;} .webaddress p {font-size:18px; color:#e0b76d;} .phone-number {color:#ccc;} .tel-mob-email p {font-size:16px; color:#fff;} .tel-mob-email-inner {font-size:14px; color:#ccc; } .tel-mob-email img {max-width:20px;} .othertext {font-size:14px; color:#ccc;} @media only screen and (max-width:600px) { .footer-subheaders p {font-size:13px; color:#e0b76d; text-align: left;} /***subheader texts within footer***/ .ibis-address p {font-size:13px;} .webaddress p {font-size:12px; color:#e0b76d;} .phone-number {color:#ccc;} .tel-mob-email p {font-size:12px; color:#fff;} .tel-mob-email-inner {font-size:12px; color:#ccc; } .tel-mob-email img {max-width:20px;} .othertext {font-size:12px; color:#ccc;} } /****************** Links in Footer *******************/ a.link-footer-dark-blue-bg:link, a.link-footer-dark-blue-bg:visited, a.link-footer-dark-blue-bg:active { text-align:center; color:#ccc; /*--was #333 ---*/ font-size:13px; line-height:33px; padding:5px 10px; left:0; right:0; text-decoration: none; border:1px solid #807e7e; border-radius:5px; margin:4px 0; } a.link-footer-dark-blue-bg:link, a.link-footer-dark-blue-bg:visited, a.link-dark-footer-dark-blue-bg:active {color:#ccc; border:1px solid #807e7e;} a.link-footer-dark-blue-bg:hover {color: #ccc; background-color: #181f3c;} /********************************** Footer four cols, Flexbox 4-2-1 ***********************************/ .box-sizing * { /***box sizing only applies to the footer***/ box-sizing: border-box; } /* Container for flexboxes */ .row { display: flex; flex-wrap: wrap; text-align:left; } /* Create four equal columns */ .column { flex: 25% 25% 40% 10%; padding: 20px; /*** was padding: 20px; borderk:1px solid #000; so for the moment I have removed borderk:1px solid #000; ***/ } /* Break from 4-to-2 cols */ @media screen and (max-width: 1310px) { .column { flex: 50%; } } /* Break from 2-to-1 cols */ @media screen and (max-width: 660px) { .row { flex-direction: column; text-align:left; margin-left:30px; } } @media screen and (max-width: 460px) {.row {margin-left:10px;}} @media screen and (max-width: 380px) {.row {margin-left:0;}} /*** give containers a width, so can then centre them, and give some padding (within media queries) so better centered at lower screen sizes) ***/ .col1-container{width:280px; margin: 0 auto -18px; border:1px solid #000;} .col2-container{width:280px; margin: 0 auto -18px; border:1px solid #000;} .col3-container{width:280px; margin: 0 auto -18px; border:1px solid #000;} .col4-container{width:140px; margin: 0 auto 18px; border:1px solid #000;} @media screen and (min-width:900px) and (max-width:1310px) {.variable-width {max-width:900px; margin: 0 auto;}} /******************************************************** Images where captions within image %, ie responsive images **********************************************************/ .image-01, .image-02, .image-03, .image-04, .image-05, .image-06 {position: relative; margin: 0 auto;} .image-01 figcaption .caption1, .image-01 figcaption .caption2, .image-01 figcaption .caption3, .image-01 figcaption .caption4, .image-01 figcaption .caption5, .image-01 figcaption .caption6, .image-01 figcaption .caption7, .image-01 figcaption .caption8, .image-01 figcaption .caption9, .image-01 figcaption .caption10, .image-02 figcaption .caption1, .image-02 figcaption .caption2, .image-02 figcaption .caption3, .image-02 figcaption .caption4, .image-02 figcaption .caption5, .image-02 figcaption .caption6, .image-02 figcaption .caption7, .image-02 figcaption .caption8, .image-02 figcaption .caption9, .image-02 figcaption .caption10, .image-03 figcaption .caption1, .image-03 figcaption .caption2, .image-03 figcaption .caption3, .image-03 figcaption .caption4, .image-03 figcaption .caption5, .image-03 figcaption .caption6, .image-03 figcaption .caption7, .image-03 figcaption .caption8, .image-03 figcaption .caption9, .image-03 figcaption .caption10, .image-04 figcaption .caption1, .image-04 figcaption .caption2, .image-04 figcaption .caption3, .image-04 figcaption .caption4, .image-04 figcaption .caption5, .image-04 figcaption .caption6, .image-04 figcaption .caption7, .image-04 figcaption .caption8, .image-04 figcaption .caption9, .image-04 figcaption .caption10, .image-05 figcaption .caption1, .image-05 figcaption .caption2, .image-05 figcaption .caption3, .image-05 figcaption .caption4, .image-05 figcaption .caption5, .image-05 figcaption .caption6, .image-05 figcaption .caption7, .image-05 figcaption .caption8, .image-05 figcaption .caption9, .image-05 figcaption .caption10, .image-06 figcaption .caption1, .image-06 figcaption .caption2, .image-06 figcaption .caption3, .image-06 figcaption .caption4, .image-06 figcaption .caption5, .image-06 figcaption .caption6, .image-06 figcaption .caption7, .image-06 figcaption .caption8, .image-06 figcaption .caption9, .image-06 figcaption .caption10 {position: absolute; color:#333; font-size:14px; line-height:15px; font-family:roboto;} @media only screen and (max-width:500px) { .image-01 figcaption .caption1, .image-01 figcaption .caption2, .image-01 figcaption .caption3, .image-01 figcaption .caption4, .image-01 figcaption .caption5, .image-01 figcaption .caption6, .image-01 figcaption .caption7, .image-01 figcaption .caption8, .image-01 figcaption .caption9, .image-01 figcaption .caption10, .image-02 figcaption .caption1, .image-02 figcaption .caption2, .image-02 figcaption .caption3, .image-02 figcaption .caption4, .image-02 figcaption .caption5, .image-02 figcaption .caption6, .image-02 figcaption .caption7, .image-02 figcaption .caption8, .image-02 figcaption .caption9, .image-02 figcaption .caption10, .image-03 figcaption .caption1, .image-03 figcaption .caption2, .image-03 figcaption .caption3, .image-03 figcaption .caption4, .image-03 figcaption .caption5, .image-03 figcaption .caption6, .image-03 figcaption .caption7, .image-03 figcaption .caption8, .image-03 figcaption .caption9, .image-03 figcaption .caption10, .image-04 figcaption .caption1, .image-04 figcaption .caption2, .image-04 figcaption .caption3, .image-04 figcaption .caption4, .image-04 figcaption .caption5, .image-04 figcaption .caption6, .image-04 figcaption .caption7, .image-04 figcaption .caption8, .image-04 figcaption .caption9, .image-04 figcaption .caption10, .image-05 figcaption .caption1, .image-05 figcaption .caption2, .image-05 figcaption .caption3, .image-05 figcaption .caption4, .image-05 figcaption .caption5, .image-05 figcaption .caption6, .image-05 figcaption .caption7, .image-05 figcaption .caption8, .image-05 figcaption .caption9, .image-05 figcaption .caption10, .image-06 figcaption .caption1, .image-06 figcaption .caption2, .image-06 figcaption .caption3, .image-06 figcaption .caption4, .image-06 figcaption .caption5, .image-06 figcaption .caption6, .image-06 figcaption .caption7, .image-06 figcaption .caption8, .image-06 figcaption .caption9, .image-06 figcaption .caption10 {font-size:12px; line-height:11px;} } /*---------------------------------------------------------------- Hero-images fill viewport with subtle gentle size growth animation. Also a scroll button -------------------------------------------------------------------*/ /* Hero image filling viewport - NOTE: CSS re hero bkgrnd image URLs is on each individual webpage */ .hero-image { background:#272727; height: 100vh; width: 100vw; /** was 100% until Mar6th 2026***/ background-position:center center; /** It was just background-position: center; and 1st in tag set **/ background-size:cover; /* NOTE: must be last in tag set or cover will not work */ } /* Hero panel text size - note: vertical position CSS is on each individual webpage */ .hero-panel-text h1 {font-size:52px; line-height:54px;} @media only screen and (max-width:1100px) { .hero-panel-text h1 {font-size:45px; line-height:45px;}} @media only screen and (max-width:700px) {.hero-panel-text h1 {font-size:40px; line-height:42px;}} @media only screen and (max-width:500px) {.hero-panel-text h1 {font-size:32px; line-height:33px;} .hero-panel-text p {font-size:16px; line-height:18px;}} /* Hero image - scale animation */ .hero-image {animation: scaleUp 15s ease-out forwards;} /** seconds gives duration of the animation **/ @keyframes scaleUp {from {transform: scale(1);} to {transform: scale(1.2);}} /** scale gives the speed of the animation **/ @media only screen and (max-width: 750px) { /*** if want a different duration or speed on a mobile phone, ie below 500px width **/ .hero-image {animation: scaleUp 15s ease-out forwards;} @keyframes scaleUp {from {transform: scale(1);} to {transform: scale(1.4);}} } @media only screen and (max-width: 500px) { /*** if want a different duration or speed on a mobile phone, ie below 500px width **/ .hero-image {animation: scaleUp 15s ease-out forwards;} @keyframes scaleUp {from {transform: scale(1);} to {transform: scale(1.5);}} } /* Scroll down button */ .scroll-down-btn { position: fixed; bottom: 25px; /* distance up of button from bottom of window */ left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.4); color: lightgray; border: 2px solid #ccc; border-radius: 50%; width: 80px; /*size of entire button out to outer border, it was 60px */ height: 80px; /*size of entire button out to outer border, it was 60px */ cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 24px; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index:1; } .scroll-down-btn:hover { background: rgba(0, 0, 0, 0.9); transform: translateX(-50%) scale(1.1); } .scroll-down-btn img { width: 52px; /* size of chevron image, it was 48px */ height: 52px; /*size of chevron image, it was 48px */ opacity: 0.8; transition: opacity 0.3s ease; } .scroll-down-btn:hover img { opacity: 1; } /* Hide scroll button on mobile */ @media (max-width: 768px) { .scroll-down-btn { bottom: 30px; width: 70px; height: 70px; } } /******************************************* Lower footer banner, darker blue, for with copyright notice *********************************************/ .bkgrnd-footer-darker-blue {background:#081438; padding:10px 0 2px;} .footer-lower-strap-line {margin-top:-10px;} .footer-lower-strap-line p {font-family: Roboto; font-size:1.4rem; line-height:1.5rem; text-align:center; color:#939292; padding-top:8px;} @media screen and (max-width: 350px) {.footer-lower-strap-line p {font-size:1.1rem; line-height:1.1rem;}} /**************************************************** Upper footer strap line IBIS Customerized Finishing Solutions ************************************************/ /***** Strapline, just above the dark-blue bkgrnd footer content ******/ .footer-strap-line {margin: 35px auto 0; text-align:center;} .footer-strap-line h3 {font-family:Questrial; font-size:30px; font-weight:400;line-height:32px; text-align: center; padding-left:10px; padding-right:10px; color:#172e72;} @media only screen and (max-width: 900px) {.footer-strap-line h3 {font-size: 24px; line-height:22px;}} @media only screen and (max-width: 600px) {.footer-strap-line h3 {font-size: 20px; line-height:20px;}} @media only screen and (max-width: 360px) {.footer-strap-line h3 {font-size: 17px; line-height:17px;}} /********************************************** Flex container for the footer **********************************************/ .footer-outer {max-width:1400px; margin: 0 auto;} .footer-four-cols {display:flex; flex-direction:row; text-align:left; width:100%; margin:0 auto -10px; padding:0; } /****images centered horiz by default***/ .footer-four-cols img {margin: 0 auto;} /*** three columns within the 'banner-three-images' div ***/ .c25footer1 {width:27%; text-align:right; padding:0; background:transparent; font-size:15px;} .c25footer1 p {text-align: right; padding-right:10px;} .c25footer2 {width:18%; padding-top:5px; padding-left:10px; background:transparent;} .c25footer3 {width:37%; padding:0; background:transparent; font-size:15px;} .c25footer3 p {text-align: right; padding-right:10px;} .c25footer4 {width:18%; padding-top:5px; padding-left:10px; background:transparent;} @media only screen and (max-width: 940px) { .footer-four-cols {flex-direction:column; text-align:center;} .c25footer1, .c25footer2, .c25footer3, .c25footer4 {width:97vw;} /** changed from 100% to 97vw on 18june25 **/ .c25footer1 p, .c25footer3 p {text-align:center; padding-top:15px; line-height:0;} .c25footer2, .c25footer4 {padding-top:0;} } .mobile500 .three-small-images {margin-top: 12vw;} .vert-spacer-above-text {padding-top:70px;} @media only screen and (max-width: 700px) {.vert-spacer-above-text {padding-top: 40px;}} /****************************************************************** Links in Footer *****************************************************************/ a.link-footer-dark-blue-bg:link, a.link-footer-dark-blue-bg:visited, a.link-footer-dark-blue-bg:active { text-align:center; color:#e6e5e5; /*--was #333 ---*/ font-size:13px; line-height:33px; padding:5px 10px; left:0; right:0; text-decoration: none; border:1px solid #bfbebe; border-radius:5px; margin:4px 0; } .footer-subheaders {color:orange;} .footer-subheaders p {color:#ffd68a;} /********************************************** Footer Lower strap line 'All contents Copyright' **********************************************/ .footer-lower-strap-line p {color:#ebebeb;}