/* BASIC ---------------------------------------------- */ html, body { height: 100%; } html { font-size: 62.5%; } * { margin: 0px; padding: 0px; } a img { border: none; } a { outline: none; } /* FIXES ---------------------------------------------- */ header, .wide-block:after, .group-item, .clearfix:after { content: ""; display: table; clear: both; } /* Correct 'block' display not defined in IE Firefox 3. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /* Correct 'inline-block' display not defined in IE Firefox 3. */ audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } /* COOKIES MSG ---------------------------------------- */ .cookiemsg { width: 100%; position: fixed; left: 0; bottom: 0; padding: 15px 0; z-index: 9999; background: rgba(0,0,0,0.75); } .cookiemsg div p { color: #fff; margin-bottom: 0; font-size: 1.5rem; } .cookiemsg span a { color: #ccc; } .cookiemsg a.button { display: inline-block; margin: 10px 15px 0 0; padding: 2px 20px; background-color: #c3d77e; color: #000; } .cookiemsg a.button:hover { background-color: #b5e21a; } .cookiemsg span a:hover { color: #fff; } /* HEADER --------------------------------------------- */ header { padding: 20px 0px; margin: 0; float: left; width: 100%; z-index: 999; text-align: center; } .logo-link { width: 700px; margin: 0 auto; display: block; } .header-logo { margin: 0 auto; clear: both; width: 100%; float: left; margin: 0 0 15px; } .logo-wrapper img { display: block; width: 100%; margin: 0 auto; } .tagline { width: 100%; clear: both; margin: 0; text-align: center; text-transform: uppercase; font-size: 1.7rem; font-weight: 400; color: #fff; letter-spacing: 2px; } /* TOP MENU */ .top-menu, .top-menu li { float: left; margin: 0 30px 0 0; padding: 0; list-style-type: none; display: inline-block; font-weight: 500; font-size: 1.5rem; color: #fff; text-transform: uppercase; } .top-menu li:last-child { margin-right: 0; } .top-menu { margin: 0 0 15px; float: none; } .top-menu li i { padding-right: 10px; } .top-menu li a { color: #fff; display: inline-block; } .top-menu li a:hover { text-decoration: none; color: #50DA5E; } #top-p { padding: 0 5px } /* MAIN MENU */ .menu-link { font-size: 1.5rem; position: absolute; bottom: 4px; right: 18px; cursor: pointer; padding: 7px 0 0 7px; } .menu-link:hover { color: #50DA5E; } .main-menu { position: relative; top: 0; max-height: 0; width: 100%; max-height: 0; overflow: hidden; transition: max-height 0.33s ease; box-sizing: border-box; padding: 0; font-size: 1.6rem; } .main-menu.show { max-height: 560px; } .main-menu .inner-wrapper { margin: 20px auto; } .main-menu .col { width: 48%; float: left; } .main-menu .col-2 { float: right; } .main-menu .col-1 li:nth-last-child(1) a { display: inline-block; } /*.main-menu .col-1 li:nth-last-child(1) a:last-child { margin-left: 15px; }*/ .main-menu ul { padding-bottom: 0; margin: 0; } .main-menu ul, .main-menu li { list-style: none; } .main-menu li { padding: 1px 0 10px; margin: 0 0 10px; border-bottom: 1px solid rgba(255,255,255,0.4); line-height: 140%; min-height: 29px; } .main-menu li:not(.bybrand) { padding: 5px 0; } .bybrand span, .main-menu li a { color: #A2D854; transition: color 0.5s ease; font-weight: 600; display: inline-block; padding-bottom: 5px; } .bybrand span { display: inline; margin-right: 15px; } .bybrand select { padding: 3px 8px; font-size: 1.5rem; border: none; } .main-menu li i { width: 25px; } .main-menu li a:hover { color: #FBCA3F; } .main-menu p { text-transform: uppercase; font-weight: bold; margin: 0 0 10px; } .shortlist { position: relative; } .shortlist.badge:after { content: ""; background: #83C832; width: 10px; height: 10px; display: block; border-radius: 50%; position: absolute; top: 0; right: -11px; } /* FOOTER --------------------------------------------- */ footer { width: 100%; padding: 30px 0; position: relative; z-index: 999; } footer .logo { height: auto; display: block; clear: both; } footer .col { float: left; width: 60%; position: relative; } footer .col.right { float: right; } footer p { position: absolute; right: 0; bottom: 0; text-align: right; margin: 0; } footer .col ul.footer-links { position: absolute; left: 0; bottom: 0; padding: 0; margin: 0; } footer .col ul.social { float: right; padding-bottom: 0; } footer p, footer .col ul.footer-links li { font-size: 1.3rem; } footer .col ul.footer-links li { text-transform: uppercase; } footer .col ul.social li { font-size: 3.0rem; padding-bottom: 0; } footer .col li { list-style: none; margin: 0; } footer .col li { display: inline-block; margin-left: 20px; } footer .col li a {color: inherit; } footer .col li:first-child { margin-left: 0; } footer i { padding: 0 3px 0 0; } footer i.fas.fa-home { font-size: 17px; position: relative; top: 1px;} footer { margin-top: -180px; /* total height of footer incl. padding */ } footer .col { height: 120px; } footer .logo { width: 280px; } /* FEATURED ------------------------------------------- */ /* featured */ .featured { width: 100%; padding: 8px 0 35px; margin-bottom: 0; clear: both; float: left; background: #D7EBDF url(../images/tile-bg2.png); } .featured .inner-wrapper { overflow: hidden; } .scroller-wrapper { width: 100%; overflow: hidden; margin-bottom: 30px; } .scroller-wrapper.scroll { overflow-x: scroll; } .scroller { margin-top: 8px; min-height: 200px; float: left; width: 1264px; padding-bottom: 7px; } .prompt-scroll { font-size: 1.5rem; font-weight: 600; text-align: right; padding-bottom: 0; float: right; margin: 0 18px 0 0; visibility: hidden; } .prompt-scroll .fas { padding-right: 0; } .prompt-scroll.show { visibility: visible; } .story-col { width: 291px; float: left; margin-right: 30px; } .scroller .story-col:last-child { margin-right: 0; } .story-col .story.half:first-child { margin-bottom: 29px; } .story { width: 100%; background: #fff; overflow: hidden; box-shadow: 1px 1px 10px 0 #b0b0b0; position: relative; } .story > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; } .story:hover { box-shadow: 1px 1px 10px 0 #2DB2FF; } .story.full { height: 399px; height: 339px; } .story.half { height: 185px; height: 155px; } .story .headline { padding: 8px 12px 0 12px; overflow: hidden; height: 84px; } .story.full .headline { padding-top: 22px; } .story .headline.right { position: absolute; bottom: 10px; right: 0; } .story h3 { margin-bottom: 0; font-size: 1.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05rem; display: none; } .featured .story h2 { padding-top: 0; font-size: 2.20rem; font-weight: 700; letter-spacing: 0.05rem; line-height: 125%; margin-bottom: 0; } .featured .story h2 a { color: inherit; } .story p { padding: 11px 12px 0 12px; font-size: 1.6rem; font-weight: 500; margin-bottom: 0; line-height: 150%; } .story p.withimg { padding-right: 0; } .story p i { padding-left: 3px; padding-right: 0; font-size: 19px; position: relative; top: 1px; } .story p img { float: right; margin-left: 6px; position: relative; top: -21px; width: 125px; height: 125px; } .story.full p { margin-bottom: 27px; } .story.full.normal p { padding-top: 8px; } .story img.big { margin-bottom: 0; width: 100%; height: auto; } .story img.big.bot { margin-top: -3px; } /*.story .headline[class*="bg-lt"], .story .headline[class*="bg-lt"] h3, .story .headline[class*="bg-lt"] h2, .story[class*="bg-lt"], .story[class*="bg-lt"] a, .story[class*="bg-lt"] h2 { color: #fff; }*/ .story .headline h3, .story .headline h2, .story a, .story p { color: inherit; } .story.overlay { background-size: cover; } .story-wrap { position: absolute; left: 0; box-shadow: none; color: #fff; text-shadow: 1px 1px 5px #444; } .story.overlay.bot .story-wrap { bottom: -22px; background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.66) 70%); } .story.overlay.top .story-wrap { top: 0; background: linear-gradient(rgba(0,0,0,0.66) 0%, rgba(0,0,0,0) 100%); } .story.overlay .headline { height: auto; } /* popular (col-wrapper) */ .popular { float: left; width: 73.38%; padding: 0; box-sizing: border-box; } .popular h3 { margin: 0 0 20px 15px; font-weight: 700; letter-spacing: 0.05rem; font-size: 2.0rem; text-transform: uppercase; } .popular div { width: calc(25% - 3px); float: left; margin-right: 3px; padding-bottom: 11px; background: linear-gradient(transparent 28%, rgba(255,255,255,0.8) 0%); position: relative;} .popular div:last-child { border-right:none; } .popular div:last-child { margin-right: 0; } .popular img { margin: 0 auto; display: block; width: 115px; height: auto; padding: 10px; background: #fff; } .popular p { text-align: center; font-size: 1.5rem; line-height: 130%; margin: 0; padding: 0; } .popular p.popname { height: 65px; padding: 5px 5px 0; } .popular p.popsize { margin: 3px 0; } /*.popular div:first-of-type p { padding-left: 0; } .popular div:last-of-type p { padding-right: 0; }*/ .popular div a { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .popular div:hover { background: linear-gradient(transparent 28%, rgba(255,255,255,1) 0%); } .popular div:hover p { color: #E25F1E; } /* other links (col-wrapper) */ .other { width: 23.14%; float: right; margin-right: 15px; padding-top: 113px; } .other a { font-size: 2.15rem; font-weight: 600; position: relative; padding: 10px; box-sizing: border-box; height: 49px; margin-bottom: 10px; } .other a i { float: right; padding-right: 0; position: relative; top: 3px; } .other a { width: 100%; display: inline-block; } .other a:hover { background: #4F4550; color: #fff; } /*.other a:first-child { top: 120px; }*/ .other a:nth-last-child(2) { margin-bottom: 0; } .other a:last-child { display: none; } /* CONTAINERS ----------------------------------------- */ .page-wrapper { width: 100%; height: auto; min-height: 100%; margin: 0 auto; position: relative; } .inner-wrapper { box-sizing: border-box; padding: 0; margin: 0 auto; position: relative; } .page-content { width: 100%; padding: 0; margin: 0 auto; position: relative; overflow: hidden; } .content { padding: 30px 0 0; margin: 30px 0 0; position: relative; z-index: 1000; overflow: hidden; } body.normal .content { padding-top: 0; } /* sections for more spaced out content */ .inner-wrapper.sections { width: 100%; } section { width: 100%; clear: both; float: left; padding: 100px 0; } section *:last-child { margin-bottom: 0; } section * a.button:last-child { margin-bottom: 0; } section + hr { margin-bottom: 0; max-width: 800px; margin: 0 auto; } section * ul:last-child { padding-bottom: 0; } section.last { margin-bottom: -30px; } section h1, section h2, section h3, section h5 { margin-bottom: 30px; } body.normal .hero-wrapper-outer + .inner-wrapper.sections { margin-top: -30px; } body.full-hero .content .inner-wrapper.sections { margin-top: -30px; } /* hero-images */ .hero-wrapper-outer { position: relative; width: 100%; overflow: hidden; } .hero-wrapper-inner { background-size: cover; background-position: center top; padding: 0; height: 100%; position: relative; opacity: 0; transition: opacity 0.75s ease-out; } body.normal .hero-wrapper-inner { width: 100%; } body.normal .hero-wrapper-outer.done img, .done .hero-wrapper-inner { opacity: 1; } /* full height hero */ .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .full-hero .hero-wrapper-outer { height: 100vh; z-index: 500; } .jumpstart { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 50%; text-shadow: 1px 1px 5px rgba(0,0,0,0.85); bottom: 20px; font-weight: bold; padding: 0 7px; font-size: 40px; margin-top: 6px; line-height: 40px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.75); } .hero-wrapper-outer .tagline { box-sizing: border-box; clear: both; margin: 0; padding: 0; text-align: center; line-height: 130%; position: absolute; top: 100%; left: 50%; transform: translate(-50%, -100%); } .hero-wrapper-outer .tagline.centre { top: 50%; transform: translate(-50%, -50%); padding: 0 20px; } /* normal hero */ body.normal .hero-wrapper-outer { margin-bottom: 30px; } .hero-wrapper-outer img { position: absolute; top: 0; left: 50%; height: auto; width: 100%; opacity: 0; transition: opacity 0.75s ease-out; transform: translateX(-50%); } /* wide block - full screen width, usually add a bg-colour*/ .wide-block { width: 100%; clear: both; margin-bottom: 30px; } /* small para and a square picture */ .half-half { position: relative; } .half-half img { width: calc(50% - 80px); } .half-half img.alignright { margin-left: 80px; } .half-half img.alignleft { margin-right: 80px; } .half-half div { width: 50%; transform: translateY(-50%); top: 50%; position: absolute; } /* TEXT AND LISTS ------------------------------ */ h1, h2, h3, h4, h5, h6 { font-family: "Montserrat", sans-serif; font-weight: 400; line-height: 130%; -webkit-text-size-adjust: none; color: #283C00; color: #283C00; } h1 { font-size: 3.5rem; margin-bottom: 30px; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; } h1 span { text-decoration: underline; } .news h1 { text-transform: initial; } h2 { font-size: 3.0rem; margin-bottom: 5px; letter-spacing: 1px; } h3 { font-size: 2.5rem; margin-bottom: 5px; font-weight: 600; } .news h2, h4 { font-size: 2.0rem; font-weight: 500; color: #000; letter-spacing: normal; } .news h2 strong, .news h2 b, h4 strong, h4 b { font-weight: 600; } h5 { font-size: 2.25rem; font-weight: 500; } h6 { font-size: 3.0rem; margin-bottom: 5px; /* slider caption headlines*/ } /*h1 br, h2 br, h3 br { display: none; }*/ .small { font-size: 90%; } .tagline, select { font-family: "Montserrat", sans-serif; } .dateline { font-size: 85%; font-weight: bold; margin-bottom: 20px; } .dateline a { float: right; padding: 0px 5px; } .dateline a:hover { color: #fff !important; } p, .news h2, h4, li, th, td, label, address, cite { line-height: 160%; margin-bottom: 30px; -webkit-text-size-adjust: none; } b, strong { font-weight: 600; } .news-item b { font-weight: 600; } .news-item strong { font-weight: 500; } .nomg { margin-bottom: 0; } address { font-style: normal; } #content-top p, #content-top li, #content-top th, #content-top td, #content-top label, #content-top address { } p.bullet { padding-left: 22px; margin-left: 8px; position: relative; } .bigger { font-size: 140%; margin-right: 15px; vertical-align: top; }/* for icons */ .ul { position: relative; padding-left: 60px; } .ul i { position: absolute; top: 0; left: 0; } .mobileOnly { display: none; } .desktopOnly { } ul { list-style-type: disc; } ul, ol { padding-bottom: 25px; } li { padding-left: 5px; margin-left: 25px; margin-bottom: 5px; } ul.bullet { list-style: none; } .bullet li { list-style: none; padding-left: 22px; margin-left: 8px; position: relative; } .news-feed .bullet li { margin-left: 2px; } .bullet li:before, p.bullet:before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; display: block; } ol.modern { list-style-type: none; counter-reset: olCounter; } ol.modern li { margin-bottom: 20px; margin-left: 0; counter-increment: olCounter; list-style-type: none; } ol.modern li:before { content: counter(olCounter); line-height: 100%; font-size: 290%; float: left; padding-right: 10px; position: relative; top: 1px; } /*cite { font-size: 90%; margin-top: 5px; display: inline-block; }*/ ul.tick-list li { padding-left: 30px; } ul.tick-list li:before { color: #00A03C; content: "\F058"; font-family: "Font Awesome 5 Free"; font-weight: 600; font-size: 120%; top: -1px; background: none; } .block { width: 100%; float: left; margin: 0 0 20px; } .text-block { width: 940px; clear: both; margin: 0 auto; } .text-block.narrow { width: 700px; } .text-block.centred { margin: 0 auto; } .centre-this { text-align: center; } .padding { float: left; width: 100%; clear: both; padding: 20px; box-sizing: border-box; margin-bottom: 30px; } .news-feed .padding { padding: 15px; } .padding.rounded { border-radius: 10px; } .padding *:last-child:not(.button), .padding ul:last-child { padding-bottom: 0; margin-bottom: 0; } p.padding { padding-bottom: 20px !important; } .padding *:last-child.button { margin-bottom: 0; } .callout-info { position: relative; border-left: 3px solid #006426; margin-top: 10px; } .callout-info:before { position: absolute; top: -16px; left: -20px; font-family: "courier new", fixed; font-size: 2.5rem; color: #fff; content: "i"; background: #006426; border-radius: 50%; border: 5px solid #fff; width: 27px; height: 27px; font-weight: bold; text-align: center; } /* ITEMS --------------------------------------- */ .toplink { position: fixed; bottom: 40px; right: 0; padding: 0; text-align: center; z-index: 1500; } .toplink.fas { padding: 5px 0 10px; font-size: 23px; width: 40px; height: 20px; color: #fff; transition: transform 0.5s ease-in; transform: translateX(100px); background: rgba(0,0,0,0.3); } .toplink.fas.show { transform: translateX(0); } .jump { cursor: pointer; } hr { border: none; margin-bottom: 30px; clear: both; } hr.flourish-top, hr.flourish-bot { border: none; height: 25px; background-repeat: no-repeat; background-position: top center; background-image: url('../images/system/flourish-top.png'); } hr.flourish-bot { background-image: url('../images/system/flourish-bot.png'); } /* buttons */ a.button { display: inline-block; margin: 0 auto 30px; padding: 5px 20px; } a.button + a.button { margin-left: 15px; } a.button.rounded { border-radius: 25px; } a.button.centred { display: block; max-width: 250px; text-align: center; } a.button.outlined { border-width: 1px; border-style: solid; } a.button:hover { text-decoration: none !important; } /* video-wrapper */ .videowrapper { margin: 0 0 25px 0; clear: both; } .videowrapper.lightbox { position: absolute; left: 50%; top: 50%; z-index: 9999; transform: translate(-50%,-50%); width: 100%; max-width: 78%; height: auto; } .video { position: relative; padding-bottom: 56.25%; overflow: hidden; height: auto; } .videowrapper.lightbox .video { border: 5px solid #ccc; } .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } #page-content .expandable[class*="bg-"], #page-content .videowrapper[class*="bg-"], figure[class*="bg-"] { box-sizing: border-box; padding: 20px; } .videowrapper p { font-size: 1.6rem; font-weight: bold; margin: 10px 0 0; padding: 0 10px 10px; } /* Quote */ blockquote.quote { padding: 20px 40px 20px 80px; margin: 40px auto 35px; box-sizing: border-box; width: 100%; clear: both; } blockquote.quote+blockquote.quote { margin-top: 0; } blockquote.quote p { margin-bottom: 0; padding-top: 5px; font-style: italic; position: relative; } blockquote.quote p:first-child:before { font-family: serif; font-weight: bold; font-size: 7rem; content: "\201C"; position: absolute; top: 12px; left: -48px; color: inherit; } blockquote.quote p:first-child:after { font-family: serif; content: "\201D"; padding-left: 4px; font-weight: bold; color: inherit; } blockquote.quote p span { font-family: serif; font-weight: bold; padding-left: 5px; } /* testimonials - 3 across */ .testimonials { width: 100%; clear: both; float: left; } .testimonials { margin: 30px 0 20px; } .testimonials blockquote { padding: 15px; position: relative; margin-bottom: 36px; clear: none; box-sizing: border-box; width: 30%; margin-left: 5%; float: left; border-radius: 15px; } .testimonials blockquote:first-of-type { margin-left: 0; } .testimonials blockquote:after { content: ""; position: absolute; bottom: -26px; left: 10%; height: 0; width: 0; border-left: 26px solid transparent;border-right: 2px solid transparent; border-top: 26px solid #000; } .testimonials blockquote:nth-child(odd):after { left: auto; right: 10%; border-left-width: 2px; border-right-width: 26px; } .testimonials blockquote p { position: relative; padding-left: 29px; margin-bottom: 10px; } .testimonials blockquote p, .testimonials blockquote cite { font-size: 95%; padding-left: 30px; } .testimonials blockquote p:first-child:before { font-family: serif; font-weight: bold; font-size: 3.5rem; content: "\201C"; position: absolute; top: 1px; left: 0; color: inherit; } .testimonials blockquote p:first-child:after { font-family: serif; content: "\201D"; padding-left: 4px; font-weight: bold; color: inherit; } /* accordions */ .expandable-wrapper { margin-bottom: 25px; float: left; } .expandable { padding: 10px; width: 100%; box-sizing: border-box; margin-bottom: 2px; } .expandable .more { max-height: 0; overflow: hidden; padding-left: 25px; transition: max-height 0.5s ease; } .expandable-wrapper.big-gaps .expandable { margin-bottom: 25px; } .expandable-wrapper .expandable:last-child { margin-bottom: 0; } .expandable .more p, .single h2.explink, .single h3.explink { margin-bottom: 0; } .expandable .more ul { padding-bottom: 0; } .expandable.show .more { max-height: 1100px; } .expandable .more *:first-child { margin-top: 10px; } .explink { margin-bottom: 0; cursor: pointer; padding-left: 25px; position: relative; font-weight: bold; } .explink:before { position: absolute; left: 0; content: "\f078"; top: 0; font-size: 20px; font-family: "Font Awesome 5 Free"; font-weight: bold; transition: transform 0.5s ease 0.1s; } .expandable.show .explink:before { transform: rotate(180deg); } .expandable .cta { margin-top: 20px; } /* accordions alternative */ .expandable-wrapper.alt .explink, .expandable-wrapper.alt .expandable .more { padding: 0 50px 0 0; } .expandable-wrapper.alt .explink:before { left: auto; right: 0; content: "\f057"; font-size: 40px; transform: rotate(45deg); transition: transform 0.5s ease; } .expandable-wrapper.alt .expandable.show .explink:before { transform: rotate(0deg); } /* equal height cols */ .equal-height-block { position: relative; overflow: hidden; clear: both; padding-top: 20px; margin-bottom: 30px; } .col-wrapper { float: left; width: 100%; margin: 0 0 10px; } .col-wrapper .col { min-height: 100px; position: relative; margin: 0 1.5%; float: left; width: 31.33%; box-sizing: border-box; padding: 0; display: inline-block; vertical-align: top; height: 100%; margin-bottom: -2000px; padding-bottom: 2000px; } .col-wrapper .col:first-child { margin-left: 0; } .col-wrapper .col:last-child { margin-right: 0; } .col-wrapper .col div { padding: 15px; position: relative; } .col-wrapper .col div p { text-align: center; font-size: 1.6rem; } .col-wrapper .col div p:last-child { margin-bottom: 0; } .col-wrapper .col.icon h3 > i { font-size: 65px; position: absolute; top: -30px; left: 50%; transform: translate(-50%,0); } .col-wrapper .col.icon div { padding-top: 50px; } /* figures */ figure { margin-bottom: 25px; max-width: 50%; position: relative; display: table; } figure.videowrapper { max-width: 100%; } figure.alignnone { max-width: none; } figcaption { clear: both; padding: 10px; line-height: 140%; font-weight: 600; display: table-caption; caption-side: bottom; font-size: 1.65rem; -webkit-text-size-adjust: none; } figcaption.overlay { position: absolute; bottom: 0; right: 0; color: #fff; background: rgba(0,0,0,0.33); font-size: 12px; padding: 4px; text-transform: uppercase; } figcaption.overlay.ovltop { bottom: auto; right: auto; left: 0; top: 0; } figcaption a { color: #fff; opacity: 0.6; padding-left: 5px; } figcaption i { padding: 0 5px 0 0; } figcaption a i { padding: 0 0 0 5px; } figcaption.overlay a:hover { color: #fff; opacity: 1; } figure.lightbox-show:not(.nozoom):after { position: absolute; top: 5px; right: 5px; content: "\f00e"; font-size: 30px; font-family: "Font Awesome 5 Free"; font-weight: bold; color: #fff; text-shadow: 1px 1px #000; } figure img { width: 100%; display: block; margin: 0 !important; } figure.padded { padding: 0; } figure.padded img { padding: 10px 10px 5px; box-sizing: border-box; } .videowrapper figcaption[class*="bg-"] { padding: 10px; } figure[class*="bg-"] figcaption, .videowrapper figcaption, .videowrapper[class*="bg-"] figcaption { padding: 15px 0 0; } figure.padded figcaption { padding: 10px; opacity: 0.66; } /* tables */ table { width: 100%; float: left; margin: 5px 0 25px; border-collapse: collapse; } th, td { vertical-align: top; } th, td { padding: 6px 5px; text-align: left; } th { font-weight: bold; } /* gallery grid */ .grid { float: left; width: 100%; clear: both; margin: 0 0 30px; } .grid-item { box-sizing: border-box; float: left; box-sizing: border-box; margin: 0 30px 30px 0; position: relative; overflow: hidden; } .grid-item div { background-size: cover; background-position: top center; position: absolute; height: 100%; width: 100%; transition: transform 0.25s ease-in-out; } .grid-item.show div { opacity: 1; } /* 4 across on large screens */ .grid .grid-item { width: calc(25% - 23px); padding-bottom: calc(17% - 23px); } .grid .grid-item:nth-child(4n) { margin-right: 0; } /* alt grid */ .grid-alt { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); } .grid-alt-item { width: 100%; height: 100%; object-fit: cover; padding: 10px; box-sizing: border-box; } .grid-alt-item *:last-child { margin-bottom: 0; } /* SEE ALSO BOX ---------------------------------- */ .meta-wrapper { padding: 40px 0 10px; font-family: "montserrat", sans-serif; margin-bottom: 0; background: #D7EBDF url(../images/tile-bg2.png); float: left; width: 100%; } /* .latest { padding: 20px; box-sizing: border-box; margin: 0 0 30px; clear: both; width: 100%; overflow: hidden; } .latest-inner { width: 100%; overflow-x: auto; padding: 10px 0 15px; -webkit-overflow-scrolling: touch; } .latest-inner-scroll { display: grid; grid-gap: 18px; grid-template-columns: repeat(5, 260px); grid-template-rows: repeat(2, 95px); } .latest-inner .also-item { border: 1px solid #cecece; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.25); overflow: hidden; position: relative; } .latest-inner .also-item:hover { box-shadow: 0 0 15px rgba(0,255,0,0.5); } .latest-inner .also-item img { display: block; width: 95px; height: 95px; float: left; margin-right: 10px; } .latest-inner .also-item p { margin-bottom: 0; padding: 7px 9px; color: #000; line-height: 130%; font-size: 1.5rem; font-weight: 600; } .latest-inner .also-item a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; flex-flow: row nowrap; } .latest { box-shadow: 1px 1px 20px #cecece; border: 1px solid #cecece; background-color: rgba(255, 255, 255, 0.7); border-bottom: none; } .latest > p { margin-left: 18px; } */ /* SEE ALSO BOX 2026 ---------------------------------- */ .see-also { float: left; width: 100%; padding-top: 30px; background: #D7EBDF url(../images/tile-bg2.png); } .see-also .featured { background: none; padding: 0; } .see-also > .inner-wrapper h3 + p { margin-bottom: 10px; } .see-also .featured .other a.bg-orange { display: none; } /* .meta-wrapper { padding: 40px 0 10px; font-family: "montserrat", sans-serif; margin-bottom: -30px; background: #D7EBDF url(../images/tile-bg2.png); float: left; width: 100%; } .see-also { padding: 20px; box-sizing: border-box; margin: 0 0 30px; clear: both; width: 100%; overflow: hidden; box-shadow: 1px 1px 20px #cecece; border: 1px solid #cecece; background-color: rgba(255, 255, 255, 0.7); border-bottom: none; display: flex; flex-flow: column; gap: 20px; } .see-also h3 { margin-bottom: 0; font-size: 2.25rem; } .see-also p, .see-also li { font-size: 1.6rem; } .see-also ul { padding-bottom: 0; margin: 0; } .see-also p { margin-bottom: 10px; } .see-also section { padding: 0; margin: 0; } .see-also section p.first-child { font-size: 1.8rem; } .see-also .also-item { border: 1px solid #cecece; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.25); overflow: hidden; position: relative; } .see-also .also-item:hover { box-shadow: 0 0 15px rgba(0,255,0,0.5); } .see-also .also-item img { display: block; width: 95px; height: 95px; float: left; margin-right: 10px; } .see-also .also-item p { margin-bottom: 0; padding: 7px 9px; color: #000; line-height: 130%; font-size: 1.5rem; font-weight: 600; } .see-also .also-item a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; flex-flow: row nowrap; } @media only screen and (max-width : 600px) { .see-also h3 { font-size: 2.0rem; } .see-also p, .see-also li { font-size: 1.5rem; } } */ /* NEWS ON HOMEPAGE ------------------------------------ */ .sub-cap { font-size: 1.5rem; text-transform: uppercase; margin-bottom: 0; letter-spacing: 1px; } .news-feed { width: 65.66%; float: left; } .buyers-guide { width: 31.33%; float: right; } .buyers-guide .padding, .buyers-guide p:last-child { margin-bottom: 0; } .buyers-guide img.first { margin-bottom: 0; } .buyers-guide p, .buyers-guide .bullet li { font-size: 1.55rem; } .bglink { width: 100%; } .bglink p { font-weight: bold; text-align: center; } .news-item > *:last-child, .news-item .text-wrapper > *:last-child { margin-bottom: 0; padding-bottom: 0; } .news-item { float: left; margin: 0 0 30px; } .news-feed > .news-item:not(.voucher-codes) { padding-top: 20px; border-top: 1px dotted #006426; } .news-feed > .voucher-codes + .news-item { padding-top: 0; border-top: none; } .voucher-codes { border: 1px dashed #006426; padding: 15px; width: 100%; box-sizing: border-box; } .voucher-codes li:last-of-type { margin-bottom: 0; } .news-item[class*="bg-"] { padding: 20px; box-sizing: border-box; border-top: none; } .news-item[class*="bg-"]:not(.mobileOnly) + .news-item:not([class*="bg-"]), .news-feed .news-item:nth-child(2):not([class*="bg-"]) { border-top: none; padding-top: 0; } .news-item h2 { font-size: 3.2rem; letter-spacing: 0; width: 100%; color: #00A03C; } /*.news-item h2 a { color: #283C00; }*/ .news-item[class*="bg-"] h2 a { color: inherit; } .news-item h3 { font-size: 1.9rem; font-weight: 600; } .news-item h2, .news-item .sub-cap { font-weight: 600; margin-bottom: 15px; } .news-item .sub-cap { margin-bottom: 10px; position: relative; overflow: hidden; color: #283C00; } .news-item:not([class*="bg-"]) .sub-cap:after { content: ""; position: absolute; top: 11px; width: 100%; height: 1px; background: #283C00; margin-left: 10px; } /*.news-feed*/ a.more { font-weight: 500; text-transform: uppercase; font-size: 1.5rem; background: #00A03C; padding: 4px 10px; color: #fff; transition: all 0.5s ease; display: inline-block; line-height: 160%; } /*.news-feed*/ a.more i { padding-left: 5px; } .news-item p.bullet:last-child { margin-top: -15px; } /*.news-feed*/ a.more:hover { background: #4F4550; color: #fff !important; } .news-item img { width: 100%; height: auto; display: block; } .news-item img.alignnone { margin-bottom: 20px; } .news-item picture img { min-height: 230px; object-fit: cover; object-position: center; } .news-image { width: 100%; margin: 0 0 30px; background-color: #fff; /*box-shadow: 0 0 13px rgba(0,0,0,0.15);*/ position: relative; padding: 10px 0; } .news-item[class*="bg-"] .news-image, .news-item[class*="bg-"] img.alignnone:not(.nobox) { box-shadow: none; border: 4px solid #fff; box-sizing: border-box; } .bg-layers { background-image: url('../images/news/bg-layers.jpg'); } .bg-pattern { background-image: url('../images/news/bg-pattern.jpg'); } .bg-raindrops { background-image: url('../images/news/bg-raindrops.jpg'); } .bg-diagonal { background-image: url('../images/tile-bg2.png'); } .bg-flowers { background-image: url('/images/news/bg-flowers.png'); } .news-image a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; } .news-image .bg { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 50%; /*background-image: url('../images/tile-bg2.png');*/ } .news-image img { margin: 0 auto; padding: 10px 0; box-sizing: border-box; width: 250px; height: auto; position: relative; } .news-item .text-wrapper { padding: 0 15px; } .col { width: 50%; float: left; } .col-left { padding: 0 15px 0 0; box-sizing: border-box; } .col p { margin-bottom: 10px; } .col .new-upper { margin: 0 0 5px 0; font-size: 1.5rem; font-weight: 600; display: inline-block; padding: 1px 5px; } /* 2023 */ .news-feed p, .news-feed li { font-size: 1.7rem; } .news-item h2 { font-size: 3.0rem; } .news-feed > .horiz-feature + .news-item:not(.voucher-codes) { border-top: none; padding-top: 0; } .news-item .top-section { position: relative; } .news-item .top-section a:hover h2, .news-item .top-section a:hover h3 { color: #00A03C; } .news-brief { float: left; margin: 0 0 10px; } .news-brief .news-item { display: flex; flex-flow: row wrap; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px dotted #006426; margin-bottom: 20px; } .news-brief .news-item:first-child { padding-top: 30px; } .news-brief .news-item:last-child { border-bottom: none; padding-bottom: 0; } .news-brief .news-item a { display: block; flex: 0 0 calc(45% - 10px); } .news-brief .news-item h2 { flex: 0 0 calc(55% - 10px); font-size: 2.0rem; display: grid; align-items: center; } .news-brief .news-item h2 a { color: #006426; } .news-brief .news-item h2 a:hover { color: inherit; } .news-brief .news-item img { margin: 0; background: #ccc; width: 100%; height: 100%; } .inspiration { display: flex; flex-flow: row nowrap; justify-content: space-between; float: left; } .inspiration img { width: 100%; height: auto; } .inspiration div { flex: 0 0 calc(45% - 10px); padding: 0; box-sizing: border-box; } .inspiration div + div { flex: 0 0 calc(55% - 10px); padding: 15px 15px 15px 0; align-self: center; display: grid; } .inspiration h3 { font-size: 2.0rem; } .news-feed .inspiration p { margin: 0; font-size: 1.6rem; } .news-feed .inspiration .insp { display: inline-block; font-size: 1.5rem; font-weight: 600; margin: 0 0 15px; padding: 1px 10px; } .news-feed .inspiration a { font-weight: 500; } .news-item h2, .news-item h2 a { color: #006426; } .horiz-content h3 a:hover, .news-item h2 a:hover, .news-brief .news-item h2 a:hover { color: #00A03C; } /* HORIZONTAL FEATURE SLIDERS */ .homepage .horiz-feature { float: left; padding: 20px 0 0; width: 100%; margin: 0 0 30px; width: 940px; } .horiz-wrap { width: 100%; padding: 0 20px; overflow: hidden; box-sizing: border-box; } .latest > p, .horiz-wrap h2 { font-weight: 600; font-size: 2.5rem; margin: 0 0 20px; } .latest > p i, .horiz-wrap h2 i { float: right; opacity: 0.5; padding-top: 3px; display: none; } .latest > p { margin-bottom: 0; font-size: 2.25rem; } .horiz-inner { width: 100%; overflow: hidden; overflow-x: auto; } .horiz-content { display: grid; grid-template-columns: repeat(auto-fill, 200px); column-gap: 30px; } .horiz-content a.image-wrap img { width: 100%; height: 100%; margin: 0; background: #ccc; } .horiz-content h3 { font-size: 1.8rem; margin: 20px 0 10px; line-height: 140%; } .horiz-content h3 a { color: #006426; } .horiz-content p { font-size: 1.6rem; font-weight: 500; } .horiz-content#similar-items { grid-template-columns: repeat(auto-fill, 170px); } .horiz-content#similar-items h3 { font-size: 1.8rem; } .horiz-content#similar-items p { font-size: 1.5rem; } .meta-sim { margin: 0 0 8px; border-top: 1px dotted #666; border-bottom: 1px dotted #999; padding: 3px 0; } .meta-sim span { float: right; font-weight: 600; color: #006426; } .horiz-content .cell p:last-of-type { margin-bottom: 20px; } .horiz-content#similar-items p.meta-sim { font-size: 1.4rem; } /* NEWS ARTICLES --------------------------------------- */ .mb0 { margin-bottom: 0; } .mb30 { margin-bottom: 30px; } .mb50 { margin-bottom: 50px; } .mt0 { margin-top: 0; } .mt30 { margin-top: 30px; } .mt50 { margin-top: 50px; } .group .group-item { padding: 20px; box-sizing: border-box; margin: 30px 0; } .group .group-item *:last-child { margin-bottom: 0; } .group .group-item img { position: relative; z-index: 99; width: 275px; height: auto; background: #fff; border-width: 8px; border-style: solid; padding: 8px; float: right; margin: 0 -177px 0 20px; } .group .group-item:nth-child(2n) img { float: left; margin: 0 20px 0 -177px; } .group-item .button { font-weight: 600; } picture.hero-new img { min-height: 230px; object-fit: cover; } .card-std-group { display: flex; flex-flow: column wrap; gap: 40px; margin-bottom: 40px; float: left; } .card-std { width: 100%; display: flex; flex-flow: row nowrap; gap: 25px; align-items: flex-start; } .card-std a { flex: 0 0 35%; } .card-std img { display: block; width: 100%; height: auto; min-width: 180px; padding: 3px; border: 3px solid #006426; box-sizing: border-box; } .card-std *:last-child { margin-bottom: 0; } /* PRODUCT GRID ---------------------------------------- */ .filters { width: 100%; } .product-grid { width: 100%; margin: 10px 0 0; float: left; } .filter { display: inline-block; padding: 5px 10px; font-size: 1.6rem; font-weight: 500; cursor: pointer; margin-top: 20px; } .filter:hover { background: #4D494D; color: #fff; } .expandable .more .filter i { margin: 0 0 0 10px; } #sortby { font-family: inherit; font-size: 15px; margin: 0 0 0 10px; padding: 2px; } .item { float: left; width: calc(25% - 4px); margin: 0 5px 50px 0; padding-bottom: 15px; position: relative; background: #DFEDE6 url(../images/tile-bg2.png); } .item:nth-child(4n) { margin-right: 0; } .item > div { width: 100%; box-sizing: border-box; padding: 0 15px; overflow: hidden; } .item-top { background: #fff; height: 65px; } .item-image { position: absolute; z-index: 50; top: 0; left: 50%; width: 200px; box-sizing: border-box; height: auto; border: 2px solid #DFEDE6; background: #fff; padding: 10px; transform: translatex(-50%); } .best-seller { position: absolute; top: 0; right: 15px; padding: 5px 7px; font-size: 11px; font-weight: 600; text-align: center; line-height: 15px; letter-spacing: 1px; margin: 0; z-index: 100; opacity: 0.75; } .item .item-name { padding-top: 0; margin: 150px 0 0; } .item-name p { text-align: left; font-size: 1.5rem; margin-bottom: 0; line-height: 1; overflow: hidden; } .item-name p span { position: relative; z-index: 75; } .item-name p.brand { height: 20px; text-transform: uppercase; font-weight: 500;} .item-name p.model { height: 45px; font-weight: 600; line-height: 130%; } .item-name p.price { font-size: 1.6rem; margin: 0; font-weight: 600; letter-spacing: 1px; } .item-name p.price a { color: inherit; } .item .item-desc { height: 105px; padding-top: 0; /*padding-top: 14px;*/ } .item-desc p { font-size: 1.5rem; font-weight: 500; margin-bottom: 0; } .item .item-spec { height: 150px; } .item-spec ul { list-style: none; border-top: 1px solid #c0c0c0; } .item-spec li { list-style: none; border-bottom: 1px solid #c0c0c0; width: 100%; float: left; padding: 5px 0; font-size: 1.5rem; line-height: 1; margin: 0; } .item-spec li span { font-size: 1.4rem; display: inline-block; font-weight: 600; float: left; line-height: 120%; } .spec-cat { width: 105px; } .spec-cat b { font-weight: 600; } .spec-val { width: 83px; padding-right: 8px; text-align: right; } .item-spec li span.spec-unit { font-weight: 400; } .item .item-bottom { height: 29px; } .item-bottom .button { float: right; font-size: 1.4rem; font-weight: 600; padding: 5px 10px; margin-bottom: 0; } .addto { font-size: 1.5rem; margin-bottom: 0; } .addto a { text-decoration: underline; } .addto input { margin-right: 3px; } /* Arch Size Finder Grid Changes */ .item-name p.price { margin-bottom: 15px; } .sizer .spec-cat { width: 90px; } .sizer .spec-val { width: 35px; } .sizer .item-spec b { float: right; } .sizer .item .item-spec { height: 130px; } /* search, filter and related 2025 */ .sort-filter { display: flex; flex-flow: row nowrap; gap: 40px; margin: 0 0 40px; } .mode { font-weight: 600; margin: 0 0 20px; } .filter-col { flex: 1; } .filter-wrap { margin: 0; padding: 15px 0; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; } .filter-title { margin: 0 0 10px; font-weight: 600; } .button-row { display: flex; flex-flow: row wrap; gap: 20px; margin: 0; } .button-row a { background: #00A03C; color: #fff; border-radius: 100px; padding: 10px 20px; font-size: 1.5rem; font-weight: 600; } .content .button-row a:hover { background: #006426; color: #fff; } .filter-left { display: flex; flex-flow: column wrap; justify-content: space-around; } .filter-right { background: #DFEDE6 url(../images/tile-bg2.png); max-width: 500px; padding: 15px; box-sizing: border-box; border-radius: 15px; } .sort-filter #sortby { padding: 5px 10px; margin: 0; } .sort-filter #form_results { display: flex; flex-flow: row wrap; gap: 10px 20px; align-items: center; margin: 0 0 25px; } .filter-right> p:first-of-type { margin: 0 0 15px; } .trending-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .highlighted a { display: flex; flex-flow: row nowrap; gap: 15px; align-items: center; font-size: 1.6rem; font-weight: 600; } .highlighted a img { display: block; width: 50px; height: 50px; background: #fff; border: 1px solid #DFEDE6; padding: 5px; } /* PRODUCT PAGE ---------------------------------------- */ .full-spec { margin: 0 auto 0; } p.hdr { padding: 3px 5px; margin-bottom: 20px; } p.hdr i { padding-right: 5px; } .where-buy p.hdr, .others p.hdr { } .full-spec > p:nth-of-type(2) { margin-bottom: 20px; } .full-spec > p i { padding-right: 5px; } .full-spec .expandable-wrapper { width: 100%; margin-bottom: 35px; } .full-spec .explink { font-weight: 400; font-size: 1.5rem; } .full-spec .explink:before { opacity: 0.5; } .full-spec .more { font-size: 1.5rem; } .full-spec .explink span { width: 70%; float: right; font-weight: 500; } .more-help { margin: 20px 0 0; } .more-help p { margin-bottom: 15px; font-size: 1.6rem; padding-left: 10px; } .more-help p:last-child { margin-bottom: 0; } .breadcrumbs { list-style-type: none; width: 100%; margin: 0 0 30px; padding: 0; } .breadcrumbs li { list-style-type: none; display: inline; font-size: 1.4rem; font-weight: 500; margin: 0; padding: 0; } .breadcrumbs li a i { margin-right: 5px; } .breadcrumbs li > i { margin: 0 5px; } .top-wrapper { background: url(/images/news/bg-flowers.png); background-size: cover; position: relative; } .top-half { width: 100%; height: 140px; background: #fff; position: absolute; padding: 0; top: 0; left: 0; z-index: 50; display: none; } .main-images { width: 350px; height: auto; position: absolute; z-index: 60; top: 0; left: 20px; } .main-images img.single { display: block; width: 100%; height: auto; border: 2px solid #d8e6df; box-sizing: border-box; background: #fff; padding: 12px; } .slider-wrapper:after { content: "< > SWIPE"; position: absolute; right: 2px; bottom: 30px; font-size: 10px; color: #606060; } .highlights, .highlights-bullets { width: 100%; position: relative; z-index: 55; padding: 0 0 0 390px; box-sizing: border-box; } .highlights { padding: 10px 0 30px 390px; } .highlights h1 { font-weight: 500; font-size: 2.5rem; margin-bottom: 0; position: relative; z-index: 75; } .highlights h1 span { text-decoration: none; display: block; font-weight: 600; font-size: 3.0rem; } .highlights .price { font-size: 2.0rem; font-weight: 600; letter-spacing: 1px; margin: 10px 0 0; } .highlights-bullets .add-shortlist { font-size: 1.4rem; margin: 0; } .highlights-bullets .add-shortlist input { margin-right: 10px; } .highlights-bullets ul { padding: 30px 0 20px; box-sizing: border-box; min-height: 170px; } .highlights-bullets li { font-size: 1.6rem; font-weight: 500; padding-bottom: 0; margin-left: 0; } .highlights-bullets li:before { top: 9px; } blockquote.quote { margin-top: 0; padding-top: 10px; } blockquote.quote p { margin: 0 auto; width: 80%; } .new-product-price { margin-bottom: 20px; border-bottom: 1px solid #999; padding-bottom: 20px; } .where-buy .new-product-price:last-of-type { border-bottom: none; padding-bottom: 0; } .new-product-price img { display: inline; vertical-align: middle; margin-right: 20px; width: 200px; height: auto; border: 1px solid #666; border-radius: 3px; } .new-product-price p { margin: 0; } .price-link { padding: 8px 12px; border-radius: 5px; text-transform: uppercase; font-size: 1.5rem; } .price-link:hover { border-color: #4F4550; background: #4F4550; color: #fff !important; } .new-product-price span { padding-right: 20px; } .products span.price { font-size: 1.8rem; } .new-product-price p.coupon { margin-top: 15px; font-size: 1.5rem; padding: 0; } .new-product-price p.coupon.bg-lt-grey { padding: 15px; } .coupon i { margin-right: 5px; } .new-product-price p.deliv { margin: 15px 0 0px; font-size: 1.5rem; } /*.see-also { margin-top: 20px; border-top: 1px solid #999; padding-top: 20px; }*/ .details .expandable { padding: 0; } .details .expandable .more p { margin-bottom: 30px; } .details .explink { display: none; } .details .expandable { margin-bottom: 0; } .details .expandable .more { max-height: none; padding: 0; } .details .expandable .more p:first-child { margin-top: 0; } .details p.hdr + p { font-weight: 500; } .where-buy { margin-bottom: 40px; border-bottom: 2px solid #00A03C; } .eandoe span { display: inline; } /* new retailer card layout 2021 */ .retailer-card { margin-bottom: 20px; border-bottom: 1px solid #999; padding-bottom: 20px; } div.retailer-card:last-of-type { border-bottom: none; padding-bottom: 0; } .retailer-card img { display: inline; vertical-align: middle; margin-right: 20px; width: 140px; height: auto; border: 1px solid #666; border-radius: 3px; } .retailer-card p:not(.about-retailer) { margin: 0; } .visit-store { padding: 5px 12px; border-radius: 5px; position: absolute; top: 0; right: 0; font-weight: 600; font-size: 1.5rem; text-transform: uppercase; } .visit-store:hover { border-color: #4F4550; background: #4F4550; color: #fff !important; } .retailer-card span { padding-right: 20px; } .products span.the-price { font-size: 1.8rem; } .about-retailer { font-size: 1.5rem; padding-right: 160px; margin: 15px 0 0; position: relative; } .retailer-card p.coupon { margin-top: 15px; font-size: 1.5rem; padding: 0; } .retailer-card p.coupon.bg-lt-grey { padding: 15px; } /* alt */ .main-image img { right: auto; left: 20px; background: #fff; padding: 10px; display: block; border: 1px solid #00A03C; } .main-image h1, .main-image .price { padding-left: 320px; } .main-image ul { padding-left: 340px; } .main-image .add-shortlist { padding-left: 300px; left: 0; bottom: -20px; } blockquote.quote { padding: 65px 40px 20px 80px; } blockquote.quote p { margin: 0; width: 100%; } .why { font-size: 15px; float: right; font-weight: 500; cursor: pointer; } .why-more { margin-bottom: 0; max-height: 0; overflow: hidden; transition: max-height 0.5s ease; box-sizing: border-box; } .why-more.show { max-height: 1100px; } .why-more > ul { padding-bottom: 0; } .why-close { font-size: 15px; cursor: pointer; float: right; padding-bottom: 10px; width: 100%; border-bottom: 1px solid #999; text-align: right; margin-bottom: 25px; } .stock { font-size: 1.5rem; font-weight: 500; } .update { border-bottom: 1px solid #bbb; padding-bottom: 15px; margin-bottom: 15px; } .key-features { display: block; margin: 0 0 25px; width: 100%; height: auto; } .where-buy { border-bottom: none; } .where-buy-new a { font-weight: bold; text-decoration: underline; } .products .horiz-feature { padding: 20px 0 0; } /* SLIDER (2019) --------------------------------------- */ /* Slider Containers */ .siema { -ms-touch-action: pan-y; touch-action: pan-y; position: relative; overflow: hidden; padding-bottom: 40px; } .slider-no-slide { width: 100% !important; transition: none !important; transform: none !important; } .aslide { height: 100%; min-height: 1px; position: relative; overflow: hidden; border: 2px solid #d8e6df; box-sizing: border-box; background: #fff; padding: 12px; } .slider-wrapper { margin: 0 auto; padding-bottom: 0; width: 100%; position: relative; } .slide-img-wrap { position: relative; } .sldlink { margin: 0; padding: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 760; display: block; /* whole slide links */ } /* Slider Dots */ .siema .dots { position: absolute; left: 0; padding: 0; margin: 0; bottom: 8px; width: 100%; text-align: center; } .siema .dots button { position: relative; top: -5px; margin-left: 18px; color: transparent; outline: none; padding: 0; width: 17px; height: 17px; cursor: pointer; font-size: 0; border: 3px solid #000; border-radius: 50%; transition: background 0.3s ease; } .siema .dots button:first-child { margin-left: 0; } /* slider arrows */ button.arrow i { text-align: center; width: 100%; padding: 0; font-size: 22px; text-align: center; position: relative; } button.arrow i { text-align: center; width: 100%; padding: 0; font-size: 22px; text-align: center; position: relative; } button.arrow.prev i { left: -2px; } button.arrow.next i { left: 2px; } .siema .arrow { position: absolute; top: auto; bottom: -4px; right: 60px; font-size: 25px; opacity: 1; width: 50px; height: 20px; cursor: pointer; border-width: 0; transform: translate(0%, -50%); -webkit-tap-highlight-color: rgba(0,0,0,0); } .siema .arrow.next { right: 5px; } /* Slider Captions */ /* slider caption underneath image (default) */ .slide-caption { text-align: center; padding: 15px 15px 0; } /* slider caption overlaid bottom of image */ .siema.slider-caps-bottom .slide-caption { width: 100%; margin: 0 auto; padding: 15px; box-sizing: border-box; position: absolute; bottom: -1px; z-index: 755; } /* slider caption text */ .slide-caption h6, .slide-caption p { margin: 0 auto; } .slide-caption h6 { font-size: 2.75rem; } .siema p a { color: inherit; text-decoration: underline; } .siema p:empty { display: none; } /* controls-inline option to show arrows and dots within slide (default is underneath) */ /* always use with slider-caps-bottom on full-hero sliders */ .controls-inline.slider-wrapper { padding-bottom: 0; } .controls-inline .siema { padding-bottom: 0; } .controls-inline .arrow { bottom: auto; top: 50%; height: 60px; right: auto; left: 0; } .controls-inline .arrow.next { right: 0; left: auto; } .controls-inline button.arrow i { font-size: 40px; color: #fff; background: rgba(0,0,0,0.3); padding: 10px 0; } .controls-inline .siema .dots { margin: 0 auto; width: auto; left: 50%; transform: translateX(-50%); bottom: 13px; } .controls-inline .siema.slider-caps-bottom .slide-caption { padding-bottom: 50px; } /* slider as full hero */ .full-hero .hero-wrapper-outer .slider-wrapper { height: 100%; } .full-hero .hero-wrapper-outer .siema { overflow: hidden; height: 100% !important; } .full-hero .hero-wrapper-outer .siema > div:first-child { height: 100% !important; } .full-hero .hero-wrapper-outer .slide-img-wrap { padding-bottom: 0 !important; height: 100%; } /* slider images */ .slide-img-wrap { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center center; transition: opacity 0.33s ease-out; opacity: 0; } .aslide.done .slide-img-wrap { opacity: 1; } /* overrides for specific sliders */ /* if changing the padding-bottom for aspect ratio, may also need to change the fixed height at 1023px */ /*#sliderID .slide-img-wrap { padding-bottom: 56.25%; }*/ #slider1 .slide-img-wrap { padding-bottom: 56.25%; } #slider-main { padding-bottom: 50px; } #slider-main .slide-img-wrap { padding-bottom: 100%; } /* LOADING FEEDBACK ----------------------------------- */ .spinner { position: absolute; top: 50%; left: 50%; box-sizing: border-box; transform: translate(-50%,-50%); } /* alternative available below*/ .grid-item:before, .hero-wrapper-outer:before, .content .aslide:before, .spinner:before, .hero-wrapper-inner:before { content: "Loading"; font-size: 17px; color: #999; /*text-shadow: 1px 1px #fff;*/ position: absolute; z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%); padding-top: 80px; } .grid-item:after, .hero-wrapper-outer:after, .content .aslide:after, .spinner:after, .hero-wrapper-inner:after { content: "\f1ce"; font-family: "Font Awesome 5 Free"; font-size: 50px; color: #999; /*text-shadow: 1px 1px #fff;*/ position: absolute; top: 50%; left: 50%; font-weight: 900; transform: translate(-50%, -50%); animation: anim-spinner 2s infinite linear; } @keyframes anim-spinner { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(359deg); } } .grid-item.done:before, .grid-item.done:after, .hero-wrapper-outer.done:before, .hero-wrapper-outer.done:after, .aslide.done:before, .aslide.done:after, .done .spinner:before, .done .spinner:after, .hero-wrapper-outer.done .hero-wrapper-inner:before, .hero-wrapper-outer.done .hero-wrapper-inner:after { content: ""; animation: none; } /* MODAL ---------------------------------------------- */ .modal { background: #fff; z-index: 9999; display: none; padding: 15px; overflow-y: auto; -webkit-overflow-scrolling: touch; position: absolute; width: 75%; min-width: 270px; max-width: 970px; top: 50%; left: 50%; max-height: 80%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); /* for ie9 */ transform: translate(-50%,-50%); } .modal.show { display: block; } /* LIGHTBOX ------------------------------------------- */ /* single images */ .lightbox-show, .modal-show { cursor: pointer; } .lightbox-inner { flex-direction: column; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; z-index: 990; position: absolute; transition: opacity 0.5s ease-in; -ms-display: flex; -ms-flex-direction: column; } .lightbox-image { margin: 0 auto; background-color: #fff; padding: 4px; max-height: 78%; max-width: 86%; } .lightbox-title { color: #fff; text-align: center; margin: 2px auto 0; } .lightbox-inner.hide { opacity: 0; } /* shared items */ .page-overlay { display: none; background: rgba(0,0,0,0.9); position: fixed; top: 0px; left: 0; width: 100%; height: 100%; z-index: 9998; } .page-overlay.show { display: block; } .lightbox-close { float: right; padding-right: 40px; padding-top: 5px; font-weight: bold; color: #fff; cursor: pointer; position: relative; z-index: 999; } .lightbox-close i { position: absolute; top: 10px; right: 10px; color: #fff; font-size: 40px !important; } .lightbox-close i.fa { padding-right: 0; } /* lightbox arrows */ .page-overlay.show .arrow { position: absolute; z-index: 9999; color: #fff; top: 50%; left: 0; transform: translateY(-50%); cursor: pointer; font-size: 3rem; } .page-overlay.show .arrow.a-right { left: auto; right: 0; } /* IMAGES AND BACKGROUNDS ----------------------------- */ img { display: block; height: auto; } img.border { padding: 10px; box-sizing: border-box; margin-bottom: 15px; } .alignleft { float: left; margin-right: 20px; max-width: 50%; height: auto; } .alignright { float: right; margin-left: 20px; max-width: 50%; height: auto; } .alignnone { margin-bottom: 25px; width: 100%; } .actual { max-width: 100%; width: auto; } .crop-from-right { background-position: left top; } .crop-from-left { background-position: right top; } .hero-wrapper-outer.crop-from-left img { left: 100%; transform: translateX(-100%); } .hero-wrapper-outer.crop-from-right img { left: 0%; transform: translateX(0%); } /* CONTACT FORM -------------------------------------- */ /* some element style shared with newsletter signup */ #form_contact { margin: 30px 0; width: 100%; box-sizing: border-box; } .aform label { margin-bottom: 0; width: 100%; display: block; font-weight: 600; } .form_competition.aform label { font-weight: normal; } .aform label i { font-size: 120%; width: 30px; opacity: 0.33; } .aform p { margin-bottom: 5px; float: left; clear: both; } .aform div { width: 100%; float: left; clear: both; border-radius: 7px; border-bottom: 2px solid #fff; padding: 10px; box-sizing: border-box; } aside.newsletter form input[type="email"], .aform input[type="text"], .aform textarea { box-sizing: border-box; background: inherit; font-family: courier, "courier new", "lucida mono", fixed; font-size: 110%; width: 100%; margin: 10px 0 0; padding: 5px; border: 1px solid transparent; } p#form_submit { display: block; margin-bottom: 0; padding: 5px 15px; cursor: pointer; padding: 5px 30px; text-transform: uppercase; text-align: center; width: 160px; margin-top: 20px; } p#form_submit:hover { background: #4F4550; color: #fff; } p.check { visibility: hidden; margin: 20px 0 0; } p.check .fas { font-size: 120%; } p.check.show { visibility: visible; } #form_success { display: none; padding: 15px; margin-bottom: 20px; } #form_success p { margin-bottom: 0; font-weight: 500; } /* NEWSLETTER SIGNUP ---------------------------------- */ aside.newsletter { width: 100%; padding: 20px; box-sizing: border-box; margin: 0 0 20px; } .see-also aside.newsletter, .latest + aside.newsletter { background: rgba(255, 255, 255, 0.7); } .news-feed aside.newsletter { background-image: url(../images/tile-bg2.png); float: left; } aside.newsletter .logo-gg { width: 260px; height: auto; margin: 0 0 15px; } aside.newsletter #form_contact div { width: 100%; position: relative; border: none; padding: 0; } aside.newsletter div.signup { margin: 20px 0; } aside.newsletter h3 { margin-bottom: 13px; } aside.newsletter p { margin-bottom: 0; font-size: 1.7rem; } aside.newsletter br.nl { display: none; } .newsletter.hide { display: none; } aside.newsletter #form_contact { margin: 0; } aside.newsletter form input[type="email"] { background: #fff; margin: 0; width: 100%; padding-right: 110px; float: left; height: 35px; font-size: 90%; } aside.newsletter p#form_submit { position: absolute; right: 0; top: 0; width: 110px; height: 35px; box-sizing: border-box; margin: 0; padding: 5px 0; font-size: 90%; text-transform: initial; } aside.newsletter p.check { margin: 0; font-size: 90%; } .news-feed aside.newsletter { margin-bottom: 30px; border-top: none; } aside.newsletter #form_success { padding: 15px 0 0; } .newsletter.hide { display: none; } /* COMPETITION ENTRY ---------------------------------- */ .gg { margin: 10px 0 15px; width: 250px; } /* contact cards */ .contact-block { margin: 75px auto 30px; width: 100%; max-width: 580px; padding: 25px 0; position: relative; } .contact-block *:last-of-type { margin-bottom: 0; } .contact-block[class*="bg-"] p.contact { padding-left: 25px; } .contact-headline { position: absolute; top: -55px; left: 0; font-weight: bold; font-size: 3rem; } img.contact { position: absolute; bottom: 0; right: 10px; z-index: 5; width: 204px; height: auto; } p.contact { margin-bottom: 10px; font-size: 1.5rem; } p.contact i, p.contact i { padding: 7px 5px 5px 5px; margin-right: 15px; text-align: center; width: 18px; height: 16px; } .contact-group .contact-block { margin-top: 45px; float: left; margin-right: 50px; max-width: 100%; width: calc(50% - 25px); } .contact-group .contact-block:nth-child(2n) { float: right; margin-right: 0; } /* map */ .contact-map { width: 100%; clear: both; margin: 0; padding: 30px 0; overflow: visible; } .contact-map iframe { width: 100%; height: 350px; display: block; border: 0; } .map-wrapper.no-gap .contact-map { padding: 0; } /* address, opening hours*/ .address-wrapper { width: 100%; float: left; margin: 30px 0 0; position: relative; } .address { padding-top: 15px; } .address address, .address p { margin: 0; padding: 8px 0; line-height: 160%; } .address p i { font-size: 130%; vertical-align: middle; margin-right: 10px; } .address address { margin-top: 10px; } .opening-hours { width: 275px; margin-left: -275px; float: right; padding: 17px; box-sizing: border-box; } .opening-hours ul { list-style-type: none; margin: 10px 0 0; padding: 0; font-size: 95%; } .opening-hours li { list-style-type: none; margin: 0; padding: 3px 0 3px; } .opening-hours li span { float: right; text-align: right; width: 60%; display: inline-block; } .address { width: 100%; float: left; padding-right: 305px; box-sizing: border-box; box-sizing: border-box; } p.opening-note { margin: 12px 0 0; font-size: 95%; } p.address-note { height: 59px; } li.today { font-weight: bold; } /* NO JAVASCRIPT -------------------------------------- */ body.nojs .siema .aslide:nth-child(1n+2) { display: none; } /* BASIC COLOURS -------------------------------------- */ .c-black { color: #000; } .c-white { color: #fff; } .c-darkred { color: #B40000; } .c-red { color: #E6000B; } .c-yellow { color: #FFFF00; } .c-lt-yellow { color: #FFFF80; } .c-tangerine { color: #FD9800; } .c-orange { color: #FF5613; } .c-amber { color: #FBCA3F; } .c-mint { color: #26B8A5; } .c-lt-green { color: #83C832; } .c-mid-green { color: #00A03C; } .c-dk-green { color: #006426; } .c-olive { color: #54692E; } .c-greenblue { color: #006651; } .c-cyan { color: #43DBD6; } .c-lt-blue { color: #2DB2FF; } .c-navy { color: #002D50; } .c-royalblue { color: #0000C0; } .c-violet { color: #C285D2; } .c-darkviolet { color: #7B5DA7; } .c-indigo { color: #3C1A6E; } .c-brown { color: #764836; } .c-cutepink { color: #FFC0FF; } .c-hotpink { color: #FF4F91; } .c-magenta { color: #FF00FF; } .c-lt-grey { color: #DFEDE6; } .c-mid-grey { color: #B6B6B6; } .c-dk-grey { color: #656565; } .c-slate { color: #4F4550; } .bg-black, .bull-black li:before { background-color: #000; } .bg-white, .bull-white li:before { background-color: #fff; } .bg-red, .bull-red li:before { background-color: #E6000B; } .bg-orange, p.bullet.bull-orange:before, .bull-orange li:before { background-color: #FF5613; } .bg-amber, .bull-amber li:before { background-color: #FBCA3F; } .bg-mint, .bull-mint li:before { background-color: #26B8A5; } .bg-lt-green, .bull-lt-green li:before { background-color: #83C832; } .bg-mid-green, p.bullet.bull-mid-green:before, .bull-mid-green li:before { background-color: #00A03C; } .bg-dk-green, .bull-dk-green li:before { background-color: #006426; } .bg-greenblue, .bull-greenblue li:before { background-color: #006651; } .bg-cyan, .bull-cyan li:before { background-color: #43DBD6; } .bg-lt-blue, .bull-lt-blue li:before { background-color: #2DB2FF; } .bg-violet, .bull-violet li:before { background-color: #C285D2; } .bg-darkviolet, .bull-darkviolet li:before { background-color: #7B5DA7; } .bg-indigo, .bull-indigo li:before { background-color: #3C1A6E; } .bg-brown, .bull-brown li:before { background-color: #764836; } .bg-hotpink, .bull-hotpink li:before { background-color: #FF4F91; } .bg-lt-grey, .bull-lt-grey li:before { background-color: #DFEDE6; } .bg-mid-grey, .bull-mid-grey li:before { background-color: #B6B6B6; } .bg-dk-grey, .bull-dk-grey li:before { background-color: #656565; } .bg-slate, .bull-slate li:before { background: #4F4550; } .bg-olive, .bull-olive li:before { background-color: #54692E; } .bg-cutepink, .bull-cutepink li:before { background-color: #FFC0FF; } .bg-magenta, .bull-magenta li:before { background-color: #FF00FF; } .bg-navy, .bull-navy li:before { background-color: #002D50; } .bg-royalblue, .bull-royalblue li:before { background-color: #0000C0; } .bg-lt-yellow, .bull-lt-yellow li:before { background-color: #FFFF80; } .bg-yellow, .bull-yellow li:before { background-color: #FFFF00; } .bg-tangerine, .bull-tangerine li:before { background-color: #FD9800; } .bg-darkred, .bull-darkred li:before { background-color: #B40000; } .bg-new-green { background-color: #FAFEFA }; .border-black { border-color: #000; } .border-white { border-color: #fff; } .border-red { border-color: #E6000B; } .border-orange { border-color: #FF5613; } .border-amber { border-color: #FBCA3F; } .border-mint { border-color: #26B8A5; } .border-lt-green { border-color: #83C832; } .border-mid-green { border-color: #00A03C; } .border-dk-green { border-color: #006426; } .border-greenblue { border-color: #006651; } .border-cyan { border-color: #43DBD6; } .border-lt-blue { border-color: #2DB2FF; } .border-violet { border-color: #C285D2; } .border-darkviolet { border-color: #7B5DA7; } .border-indigo { border-color: #3C1A6E; } .border-brown { border-color: #764836; } .border-hotpink { border-color: #FF4F91; } .border-lt-grey { border-color: #DFEDE6; } .border-mid-grey { border-color: #B6B6B6; } .border-dk-grey { border-color: #656565; } .border-slate { border-color: #4F4550; } .border-olive { border-color: #54692E; } .border-cutepink { border-color: #FFC0FF; } .border-magenta { border-color: #FF00FF; } .border-navy { border-color: #002D50; } .border-royalblue { border-color: #0000C0; } .border-lt-yellow { border-color: #FFFF80; } .border-yellow { border-color: #FFFF00; } .border-tangerine { border-color: #FD9800; } .border-darkred { border-color: #B40000; } /* THIS SITE ----------------------------------------- */ .inner-wrapper, .hero-wrapper-outer .tagline { width: 1272px; } .hero-wrapper-outer .tagline { font-size: 5.5rem; font-weight: 600; padding-bottom: 80px; } /* top gradient, bottom gradient. % are start and end points*/ .hero-overlay { background: linear-gradient(rgba(77,190,255,100) 0%, rgba(0,0,0,0) 25%), linear-gradient(rgba(0,0,0,0) 75%, rgba(255,123,15, 0.75) 100%); } .page-content { padding-bottom: 180px; /* same as footer height above */ } /* override for a special testimonials block */ .special1 h2 { margin-bottom: 30px; text-align: center; } .special1 .testimonials blockquote { background: #fff; } .special1 .testimonials blockquote:after { border-top-color: #fff; } /* special call-out boxes*/ .special.climbers { background-image: url('/images/climbers.png'); background-repeat: no-repeat; background-position: bottom right; background-size: initial; } .special .logo { margin-bottom: 17px; width: 140px; height: auto; } .special p.main { margin-bottom: 17px; font-weight: 500; } .special a.button { padding-bottom: 5px; } /* custom images and masks */ .shape1 { margin-left: -50px; margin-bottom: 20px; shape-margin: 20px; shape-outside: url(/images/test/milk-bottle-mask.png); } .meter { float: left; margin: 0 20px 20px -120px; display: block; width: 300px; height: auto; shape-margin: 20px; shape-outside: url(/images/news/meter-mask.png); } .sun { display: block; float: right; margin: 0 -123px 10px 20px; shape-outside: circle(50% at 81%); shape-margin: 15px; } .colm { width: calc(50% - 8px); float: left; } .colm.left { margin-right: 15px; } .colm.right { float: right; } .colm img { display: block; width: 100%; height: auto; margin: 0 0 15px; } .colm p { font-size: 90%; } /* ALSO ------------------------------ */ #also-list { border-top: 5px solid #DFEDE6; padding: 15px 0px; border-bottom: 5px solid #DFEDE6; margin-top: 0; margin: 0 0 50px; } #also-list > p { margin-bottom: 10px; } #also-list .expandable p { font-size: 1.6rem; } #also-list ul { padding-bottom: 0; } #also-list ul li:last-child { margin-bottom: 0; } /* Default Body Font and Text Colour */ html { color: #000; font-weight: 400; font-family: "Montserrat", sans-serif; } body { font-size: 1.8rem; } a { text-decoration: none; } p.contact-headline { color: #4D494D; } /* Menu Colours */ /* Footer Colours */ footer p, footer .col ul.footer-links li, footer .col ul.social li, footer .col li a:hover { color: #fff; text-decoration: none; } footer .col li a:hover, footer .col li a:hover i { color: #50DA5E; } /* Link and Related Colours (accents eg bullets) */ /* all links and menu links */ a, p.lightbox-show, p.modal-show, header li a:hover { color: #007EC6; color: #00A03C; } /* full menu only */ .single-page header li:hover, .single-page.menushow header li a:hover, .menuoverlay:not(.menushow) header.full-menu li a:hover { color: #FFFF80; } /* numbered list colour */ ol.modern li:before { color: #FF0000; } /* bullet colour now use bull-colour class on the element to set the bullet colour */ /* content link hover */ p.lightbox-show:hover, p.modal-show:hover, .content a:hover { color: #000; } /* Button Hover Colours */ a.button:hover { background: #4D494D; border-color: #4D494D; color: #fff; } /* Borders */ hr { border-top: 1px solid #c0c0c0; } .expandable-wrapper.alt .expandable { border-bottom: 1px solid; } .expandable-wrapper.alt .expandable:first-child { border-top: 1px solid; } .contact-block { border-top: 1px solid #D8D1E2; border-bottom: 1px solid #D8D1E2; } .opening-hours li { border-bottom: 1px solid #ccc; } .address address, .address p { border-bottom: 1px solid #bbb; } .address address { border-top: 1px solid #bbb; } /* Backgrounds */ .hero-wrapper-outer { background: #f0ecef; } .testimonials blockquote { background: #4F4550; } .testimonials blockquote:after { border-top-color: #4F4550; } .grid-item { background: #eee; } p.contact i.fab, /* icons for contact block sections */ p.contact i.fas { color: #fff; background: #4D494D; } /* Contact Form Colours */ .aform input[type="text"], .aform textarea { color: #02501a; background: none; } .aform p.error, /*#form_contact label.error { color: #e71d36; } #form_contact input.error, #form_contact textarea.error { background: #ffdede; }*/ .aform div.error { background: #ffdede; } /* Slider Colours */ .slider-wrapper { background: none; } .siema .dots button { border-color: #006426; background: #fff; } .siema .dots button.active { background: #006426; width: 21px; height: 21px; } .siema .arrow { background: none; color: #006426; } .siema.slider-caps-bottom .slide-caption { background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.66) 70%); } .siema.slider-caps-bottom h6, .siema.slider-caps-bottom p { color: #fff; text-shadow: 1px 1px 1px #444; } .controls-inline .siema .arrow { color: #fff; text-shadow: 1px 1px 1px #444; } /* links in slider content */ .siema.slider-caps-bottom a:hover { color: #FFFF80; } /* Tables */ table { border: 1px solid #aaa; } table tr:first-child td { border-top: 1px solid #ccc; } td, th { border-left: 1px solid #ccc; font-size: 85%; } td { border-top: 1px solid #ccc; } th:first-child, td:first-child { border-left: none; } /* new comparision table */ .newcomptbl { border: none; border-top: 2px solid #aaa; border-bottom: 2px solid #aaa; margin: 0 0 15px; } .newcomptbl tr td { font-size: 1.5rem; padding: 8px 0; border: none; } .newcomptbl tr td:not(:first-child) { text-align: center; } .newcomptbl tr td:nth-child(1) { font-weight: 600; } .newcomptbl tr td:nth-child(1) i { padding-right: 5px; } .newcomptbl tr { border: none; border-bottom: 1px solid #aaa; } .newcomptbl tr:first-child td { border: none; } .newcomptbl tr:last-child { border-bottom: none; } .newcomptbl tr td img { display: block; width: 90%; height: auto; margin: 4px auto 5px; } .newcomptbl tr td:nth-child(1) { min-width: 150px; padding-left: 10px; } .newcomptbl.cols4 tr td:nth-child(1n) { width: 25%; } .newcomptbl.cols4 tr td:nth-child(1n+2) { min-width: 180px; } .newcomptbl.cols5 tr td:nth-child(1n) { width: 20%; } .newcomptbl.cols5 tr td:nth-child(1n+2) { min-width: 135px; } .newcomptbl.cols6 tr td:nth-child(1n) { width: 16.66%; } .newcomptbl.cols6 tr td:nth-child(1n+2) { min-width: 110px; } .newcomptbl, .newcomptbl tbody { display: block; } .newcomptbl tbody { overflow-x: auto; } .calculator { padding: 20px; margin: 0 0 40px; width: 100%; box-sizing: border-box; } .soil-calc {} .soil-calc p span, .soil-calc p input[type="radio"] { margin-right: 10px; } .calc-results { margin: 20px 0 0; } .calc-col { float: left; width: 33.33%; box-sizing: border-box; } .calc-results p, .calc-col p { margin: 0; font-weight: 500; } .calc-col input { margin: 5px 0; padding: 8px 5px; width: calc(100% - 15px); box-sizing: border-box; border: none; font-size: 2.0rem; } .calc-col div { position: relative; width: 100%; max-width: 150px; } .calc-units { position: absolute; right: 23px; top: 13px; } .calc-results p span { font-weight: 500; } .calculator i { padding-right: 10px; } /* END OF THIS SITE SPECIFIC -------------------------- */ /* RESPONSIVE ----------------------------------------- */ /* first breakpoint is: width of inner-wrapper + 40px */ @media only screen and (max-width : 1320px) { .inner-wrapper { width: 100%; padding: 0 20px; box-sizing: border-box; } header > .inner-wrapper { padding: 0; } .scroller-wrapper { overflow-x: scroll; -webkit-overflow-scrolling: touch; } .prompt-scroll { margin-right: 0; line-height: 1.1rem; } .other { margin-right: 0; } .popular { width: 74.30%; } .other a { font-size: 2.10rem; } /* .menu { width: 1060px; padding: 0 20px; box-sizing: unset; } .menu-inner .inner-wrapper { overflow-x: scroll; -webkit-overflow-scrolling: touch; } .menu-advice-other, .by-brand { right: 20px; }*/ .menuicon, footer p { right: 20px; } body.normal .hero-wrapper-outer { padding-bottom: 0 !important; height: 425px; overflow: hidden; position: relative; left: 0; width: 100vw; } body.normal #content-top .hero-wrapper-outer { left: -20px; } body.normal .hero-wrapper-outer img { height: 100%; width: auto; } .prompt-scroll { visibility: visible; } .logo-link { width: 600px; } .popular h3 { margin-left: 0; } } @media only screen and (max-width : 1200px) { .group .group-item img { margin: 0 0 0 20px; width: 250px; } .group .group-item[class*="bg-"] img { border: none; } .group .group-item:nth-child(2n) img { margin: 0 20px 0 0; } .group .group-item:not([class*="bg-"]) { padding : 0; } .spec-cat { width: 65px; } .spec-cat b { display: none; } .addto { font-size: 1.3rem; } } @media only screen and (max-width : 1023px) { .inner-wrapper { width: 100%; padding: 0 15px; box-sizing: border-box; } body.normal .hero-wrapper-outer { height: 350px; } /* reset full menu to mobile*/ .main-menu, .full-menu .main-menu { color: #fff; } .full-menu .menuicon { display: block; } .full-menu .menu-container { position: fixed; background: rgba(0,0,0,0.90); } .menushow .full-menu .menu-container { transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1); } .full-menu.full-menu-centre .main-menu, .full-menu .main-menu { transform: translate(-50%, -50%); position: relative; float: none; margin: 0; display: inline-block; } .full-menu .main-menu li { transform: translateX(100vw); font-size: 4.5rem; display: block; padding: 0; } .menushow .full-menu .main-menu li { transform: translateX(0); } .full-menu .main-menu li i { width: 82px; text-align: center; font-size: 70%; position: relative; opacity: 0.5; padding: 0; } /* grid is now 3 across */ .grid .grid-item:nth-child(1n) { width: calc(33.33% - 20px); padding-bottom: calc(24% - 23px); margin: 0 30px 30px 0; } .grid .grid-item:nth-child(3n) { margin-right: 0; } .contact-group .contact-block:nth-child(1n) { float: none; margin: 75px auto 30px; max-width: 580px; width: 100%; } .popular { width: 100%; } .popular p { font-size: 1.4rem; } .other { width: 100%; padding-top: 30px; } .other a:nth-last-child(2) { margin-right: 0; } /*.other a:last-child { margin-right: 0; }*/ .other a { width: calc(33.33% - 17px); margin: 0 20px 0 0; font-size: 2.0rem; } .text-block { width: 100%; } .item:nth-child(1n) { width: calc(33% - 1px); margin-right: 5px; } .item:nth-child(3n) { margin-right: 0; } .meta-wrapper { padding-left: 10px; padding-right: 10px; box-sizing: border-box; } .visual .item:nth-child(1n) { width: calc(25% - 8px); margin-right: 10px; } .visual .item:nth-child(4n) { margin-right: 0; } #news .horiz-feature { width: calc(100vw - 15px); } } @media only screen and (max-width : 900px) { .text-block { width: 100%; clear: both; } .content.nogap { margin: 1px 0 0; } .text-block.hero { position: relative; left: -15px; width: 100vw; } .text-block.centred { margin: 0; } section { padding: 80px 40px; box-sizing: border-box; } .inner-wrapper.sections .inner-wrapper { padding: 0; } .half-half img { width: 100%; max-width: 100%; } .half-half img.alignright { margin-left: 0; } .half-half img.alignleft { margin-right: 0; } .half-half div { width: 100%; position: static; transform: none; float: left; margin-bottom: 40px; } .most-popular { padding-bottom: 20px; } .pop-item { float: left; width: calc(50% - 10px); margin: 0 20px 20px 0; padding: 0; } .pop-item:nth-of-type(2n) { margin-right: 0; } .pop-item:nth-child(1n) { background: #283C00; } .pop-item:nth-of-type(3n+1) { background: #FFC41A; } .pop-item img { width: 160px; position: absolute; left: 20px; margin: 0; top: 20px; } .pop-item .desc { float: right; width: auto; position: static; padding: 55px 20px 0 34%; height: 200px; } .all { margin-top: 0; } header { padding: 15px; box-sizing: border-box; text-align: left; } .tagline { text-align: left; } .logo-link { margin: 0; } .menu-link { right: 0; } .news-brief .news-item h2 { font-size: 1.8rem; } .news-item h2 { font-size: 2.75rem; } .inspiration div:first-of-type { padding: 15px 0 15px 15px; } .news-feed .inspiration .insp { margin: 0 0 7px; } } @media only screen and (max-width : 800px) { .address { padding-right: 0; } .opening-hours { width: 100%; margin: 0 0 20px; } p.address-note { height: auto; } } @media only screen and (max-width : 767px) { .page-content { padding-bottom: 227px; /* new total height of footer (as single col) */ } h1 { font-size: 3.25rem; } ul.small li, .small { font-size: 1.5rem; } footer { margin-top: -227px; } footer .col, footer .col.right { float: left; width: 100%; height: auto; } footer .col ul.social { float: left; } footer p { position: static; text-align: left; width: 100%; float: left; margin: 20px 0 0; } footer .col ul.footer-links { position: static; margin: 20px 0; width: 100%; } figure.lightbox-show:not(.nozoom):after { font-size: 24px; } /* slider */ .siema .dots button { width: 17px; height: 17px; } .controls-inline .siema .dots { bottom: 10px; } .controls-inline .siema.slider-caps-bottom .slide-caption { padding-bottom: 40px; } .siema h6 { font-size: 2.20rem; } .siema p { display: none; } /* equal height cols */ .equal-height-block { padding-top: 0; margin-bottom: 10px; } .equal-height-block + .equal-height-block { margin-top: -20px; margin-bottom: -20px; } .col-wrapper .col { width: 100%; padding-bottom: 0; margin: 0 0 10px 0; } .col-wrapper .col.icon div { padding-top: 15px; } .col-wrapper .col.icon h3 > i { position: static; transform: none; font-size: 30px; margin-right: 15px; } /* grid is now 2 across */ .grid .grid-item:nth-child(1n) { width: calc(50% - 13px); padding-bottom: calc(34% - 23px); margin: 0 25px 25px 0; } .grid .grid-item:nth-child(2n) { margin-right: 0; } .logo-link { width: 500px; } .top-menu li { font-size: 1.4rem; margin: 0 20px 0 0; } .text-block, .text-block.narrow { width: 91%; width: 100%; } .news-feed { width: 100%; } .buyers-guide { width: 100%; float: left; } .other a { font-size: 1.8rem; height: auto; } .mobileOnly { display: block; } .news-item[class*="bg-"].mobileOnly + .news-item:not([class*="bg-"]) { border-top: none; padding-top: 0; } .desktopOnly { display: none; } .text-block.hero:not(.new) img { width: 100%; height: 330px; position: relative; object-fit: cover; } .text-block.hero:not(.new) img.crop-from-left { transform: translateX(-100%); left: 103%; } .text-block.hero:not(.new) img.centred { transform: translateX(-50%); left: 50%; } .item:nth-child(1n) { width: calc(50% - 3px); margin-right: 5px; } .item:nth-child(2n) { margin-right: 0; } .item-image { width: 220px; } .item .item-name { margin: 165px 0 0 ; } .full-spec .explink span { width: 52%; } blockquote.quote p { width: 100%; font-size: 1.6rem; } .main-image { height: 410px; } .main-image-top { height: 60%; padding: 0 20px 20px 0; } .main-image img { width: 250px; top: 115px; right: auto; left: 50%; transform: translateX(-50%); } .main-image ul { top: 103%; } .main-image .add-shortlist { width: 100%; bottom: -18px; } /* alt */ .main-image h1, .main-image .price { padding-left: 0; text-align: center; } .main-image .add-shortlist { padding-left: 0; } .main-image ul { padding: 20px; } /* testimonials/quotes */ /* blockquote.quote { width: 100%; padding: 30px 30px 20px 60px; margin-top: 160px; } .testimonials blockquote:nth-of-type(n) { width: 85%; clear: both; margin: 25px auto 50px; float: none; }*/ .why-more.show { max-height: 1950px; } /*.breadcrumbs { text-align: center; }*/ .top-half { height: 250px; } .highlights, .highlights-bullets { padding: 0; } .highlights { padding-bottom: 25px; } .highlights h1 { text-transform: capitalize; } .highlights h1 span { text-transform: uppercase; } .main-images { position: relative; margin: 30px auto 15px; left: auto; top: auto; width: calc(100% - 60px); max-width: 380px; } .highlights-bullets .add-shortlist { padding: 0 20px; } .highlights-bullets ul { padding: 5px 20px 20px; min-height: auto; } blockquote.quote { padding: 30px 30px 20px 60px; } .visual .item:nth-child(1n) { width: calc(33% - 5px); margin-right: 10px; } .visual .item:nth-child(3n) { margin-right: 0; } .visual .item p { font-size: 1.4rem; } .calculator { position: relative; width: 100vw; left: -20px; } .inspiration div:first-of-type { padding: 0; } .news-feed .inspiration .insp { margin: 0 0 15px; } /* search, filter and related 2025 */ .sort-filter { flex-flow: column wrap; gap: 20px; margin-bottom: 20px; } .filter-wrap { margin: 0; } .filter-right { max-width: none; } #form_results > strong br { display: none; } .highlighted a { font-size: 1.5rem; } } @media only screen and (max-width : 700px) { .other a { width: 100%; margin: 0 0 20px; } .other a:nth-last-child(2) { } .other a:last-child { display: block; margin: 20px 0 0; } /*.popular img { width: 105px; } .popular div { width: calc(33.33% - 3px); } .popular div:last-child { display: none; } */ .popular div { width: calc(50% - 2px); margin-right: 2px; } .popular div:nth-of-type(2n) { margin-right: 0; } .popular div:nth-of-type(-n+2) { margin-bottom: 15px; } .logo-link { width: 420px; } .tagline { font-size: 1.4rem; } .menu-link { font-size: 1.4rem; bottom: 2px; } .stock { display: block; padding: 7px 0 2px; } } @media only screen and (max-width : 600px) { .top-menu li.cookiechk { display: none; } .top-menu li:nth-child(3) { margin-right: 0; } /* .text-block.hero.new img { width: auto; height: 350px; position: relative; } .text-block.hero.new img.crop-from-left { transform: translateX(-100%); left: 103%; } .text-block.hero.new img.centred { transform: translateX(-50%); left: 50%; } */ .menu-buttons p { font-size: 1.4rem; width: 180px; } .advice-item p, .menu li { font-size: 1.6rem; } .main-menu .menu-tab, .main-menu li { font-size: 1.5rem; } .menu li { margin: 0 0 7px; } .menu-link span { display: none; } .menu-link { font-size: 1.8rem; bottom: 0; } .main-menu .inner-wrapper { padding: 0; position: relative; } .main-menu .col { width: 100%; position: relative; } .main-menu .col ul { visibility: hidden; width: 100%; clear: both; margin: 0; padding: 10px 15px 0; box-sizing: border-box; z-index: 500; position: relative; } .main-menu .col.active ul { visibility: visible; z-index: 600; } .main-menu .col-2 { position: absolute; width: 100%; } .main-menu .col .menu-tab { cursor: pointer; text-align: center; color: #999; padding: 10px 0; box-sizing: border-box; width: 50%; float: left; z-index: 600; position: relative; border: none; border-bottom: 1px solid #fff; } .main-menu .menu-tab:hover, .main-menu .col.active .menu-tab { background: none; color: #FBCA3F; } .main-menu .col.active .menu-tab { border: none; border-top: 1px solid #fff; } .main-menu .col-1.active .menu-tab { border-right: 1px solid #fff; } .main-menu .col-2.active .menu-tab { border-left: 1px solid #fff; } .main-menu .col-2 .menu-tab { float: right; } .main-menu .col-2 .menu-tab span { display: none; } h1 { font-size: 2.6rem; } h2 { font-size: 2.5rem; } h3 { font-size: 2.25rem; } h5 { font-size: 2.0rem; } p, .news h2, h4, li, th, td, label, cite { font-size: 1.65rem; } .ul { position: relative; padding-left: 60px; } body.normal .hero-wrapper-outer { height: 325px; margin-bottom: 20px; } section { padding: 70px 20px; } /* slider */ .controls-inline button.arrow { height: 50px; } .controls-inline .siema .arrow { display: none; } .controls-inline button.arrow i { font-size: 30px; } .content #slider1 .slide-img-wrap { padding-bottom: 0; height: 330px; overflow: hidden; } .content #slider2 .slide-img-wrap { padding-bottom: 0; height: 330px; overflow: hidden; } .alignleft:not(.actual), .alignright:not(.actual) { width: 100%; max-width: none; margin: 0 0 30px; } .grid .grid-item:nth-child(1n) { width: calc(50% - 10px); padding-bottom: calc(34% - 23px); margin: 0 20px 20px 0; } .grid .grid-item:nth-child(2n) { margin-right: 0; } .contact-block { padding: 20px 0; } img.contact { width: 140px; right: 0; } p.contact i, p.contact i { margin-right: 10px; } .contact-block[class*="bg-"] p.contact { padding-left: 15px; } .contact-map iframe { height: 250px; } .products aside.newsletter { padding: 15px; } .pop-item { width: 100%; margin-right: 0; } .pop-item .desc { padding: 21px 15px 0 130px; min-height: 105px; } .pop-item:nth-of-type(4) { display: none; } .pop-item:nth-of-type(1n) img { padding: 20px 15px 15px 30px; background: linear-gradient(45deg, #FFC41A 0%, #FFC41A 50%, white 50%, white 100%); } .pop-item:nth-of-type(odd) img { background: linear-gradient(45deg, #283C00 0%, #283C00 50%, white 50%, white 100%); } .text-block, .text-block.narrow { width: 100%; } .news-image img { width: 225px; } .group .group-item img:nth-child(1n) { margin: 0 auto 25px; float: none; } /* .item-image { width: 250px; } .item .item-name { margin-top: 200px; } .item:nth-child(1n) { width: 100%; margin: 0 0 30px 0; } .item .item-desc { height: 100px; } .item:nth-child(odd) .best-seller { left: 15px; right: auto; } .item:nth-child(odd) .item-name p { text-align: left; } .item p.model, .item .item-spec, .item .item-desc { height: auto; margin-bottom: 12px; }*/ .product-grid { width: 100vw; left: -15px; position: relative; } .product-grid .item { margin-bottom: 30px; } .item-image { width: 100%; transform: none; position: static; margin: 0 auto 15px; } .item .item-name { margin: 0; } .item-desc p { font-size: 1.4rem; } /* .item .item-desc { height: 120px; }*/ .item-spec li { position: relative; } .product-grid:not(.sizer) .spec-val { position: absolute; right: -10px; } .item .item-bottom { height: 60px; } .item span.addto { display: block; margin-bottom: 12px; } .item-top { height: 0; } #sortby { clear: left; display: block; margin: 10px 0; } .addto { font-size: 1.4rem; } .full-spec .expandable .more p { font-size: 1.5rem; } .top-wrapper { width: 100vw; left: -20px; } .highlights { padding: 0 20px 20px; box-sizing: border-box; } .breadcrumbs { margin: 0 0 20px; } .main-image .best-seller { top: 78px; } .details .explink { display: block; font-weight: normal; } .details .expandable { margin-bottom: 30px; } .details .expandable .more { max-height: 0; padding: 0; } .details .expandable.show .more { max-height: 3000px; } .details .expandable .more p:first-child { margin-top: 10px; } .details .expandable .more p:last-child { margin-bottom: 0; } /*.new-product-price img { display: block; clear: right; margin: 0 0 15px; } */ .visual .item:nth-child(1n) { width: calc(50% - 5px); margin-right: 10px; } .visual .item:nth-child(2n) { margin-right: 0; } .visual .item-name p { font-size: 1.4rem !important; } aside.newsletter br.nl { display: block; } .latest > p, .horiz-wrap h2, .news-item h2 { font-size: 2.25rem; } .news-brief .news-item h2, #news h3 { font-size: 1.8rem; } #news p:not(.small), #news li { font-size: 1.55rem; } .inspiration { flex-flow: row wrap; } .inspiration div { flex: 0 0 100%; padding: 0; } .inspiration div + div { flex: 0 0 100%; padding: 15px; } .card-std { flex-flow: column; } .card-std a { width: 100%; flex: 1; order: -1; } .card-std img { min-width: none; } } @media only screen and (max-width : 500px) { .menu-buttons p { width: 50%; } .menu-link { bottom: -3px; } /*.top-menu li:nth-of-type(3) { margin-right: 0; }*/ .top-menu li:last-child { margin-right: 0; } table, tbody { display: block; } tbody { overflow-x: scroll; } .grid .grid-item:nth-child(1n) { width: calc(100%); padding-bottom: calc(60%); margin: 0 0 20px; } h1 br, h2 br, h3 br { display: block; } .contact-block { padding: 15px 0; } p.contact { font-size: 1.4rem; } .contact-headline { top: -50px; font-size: 2.25rem; } img.contact { width: 130px; } /*.homepage #content-top .equal-height-block, #news { position: relative; left: -20px; width: 100vw; }*/ .homepage #content-top { padding: 0; } .homepage h4 { padding: 0 20px; } .news-item { margin: 0 15px 30px; } .news-item.voucher-codes { width: calc(100% - 30px); } .horiz-feature { margin: 0 0 30px; } .news-item[class*="bg-"] { margin: 0 0 30px; padding: 15px; } .news-item h2 { font-size: 2.5rem; } .news-item h3 { font-size: 1.9rem; } .homepage #content-top .equal-height-block .col-wrapper { margin-bottom: 0; } .homepage .content { padding-bottom: 0; } .buyers-guide { padding-bottom: 20px; } footer .col li { margin-left: 12px; float: left; } footer .col li:first-child { margin-left: 0; } footer .col li:nth-child(3) { clear: left; margin: 10px 0 0; } footer .col li:nth-child(4) { margin-top: 10px; } footer .logo { width: 240px; padding-bottom: 10px; } .logo-link { width: 320px; } .tagline { font-size: 1.3rem; letter-spacing: 1px; margin: 10px 0 0; } .tagline span { display: none; } .top-menu { margin: 0 0 10px; } .top-menu li { font-size: 1.3rem; } .top-menu span { display: none; } .prompt-scroll { font-size: 1.3rem; } .popular h3 { font-size: 1.5rem; text-align: center; margin-bottom: 15px; } .scroller-wrapper { margin-bottom: 20px; } .text-block.hero:not(.new) img { height: 250px; } .meter { margin-left: -150px; } .highlights { } .highlights h1, .highlights .price { } .highlights h1 {font-size: 2.25rem; } .highlights h1 span { font-size: 2.75rem; } .main-images { width: calc(100% - 40px); max-width: 345px; margin-top: 20px; } /* .item-desc p, .item-spec li span, .item-name p:not(.brand) { font-size: 1.6rem; }*/ .eandoe br { display: none; } /*.eandoe span { display: inline; }*/ figcaption { font-size: 1.5rem; } /*strong.actualprice { display: block; padding: 15px 0 2px; } .about-retailer { margin-bottom: 60px; padding-right: 0; } .visit-store { top: auto; right: auto; left: 0; bottom: -45px; } */ .pp { position: relative; } .products span.price { position: absolute; right: 0; top: 10px; } /*strong.actualprice { display: block; padding: 15px 0 2px; }*/ .about-retailer { margin-bottom: 60px; padding-right: 0; } .price-link { clear: both; display: block; width: 180px; margin: 15px 0 12px; text-align: center; } .item .item-desc { height: 140px; height: 125px; } .news-brief .news-item h2 { font-size: 1.6rem; } #news .horiz-feature { width: 100%; } } @media only screen and (max-width : 370px) { .logo-link { width: 260px; } .top-menu li:nth-of-type(2) { margin-right: 0; } .top-menu li:nth-of-type(3) { display: none; } .tagline { letter-spacing: 0; } .popular p { font-size: 1.3rem; } .group .group-item img:nth-child(1n) { width: 200px; } .breadcrumbs li { font-size: 1.3rem; } .full-spec .explink span { width: 48%; } .full-spec .explink, .full-spec .expandable .more p { font-size: 1.3rem; } .main-images { position: relative; margin: 20px auto 0; left: auto; top: auto; width: calc(100% - 40px); max-width: 280px; } .visual .item > div { padding: 0 5px; } .sizer .spec-cat { width: 50px; } .latest > p, .horiz-wrap h2, .news-item h2 { font-size: 2.0rem; } .news-brief .news-item h2 { font-size: 1.5rem; } } /* ADMIN */ .admin header { background: red; } .admin table { width: 100%; float: left; margin: 5px 0 25px; border-collapse: collapse; border: none; } .admin th, .admin td { padding: 8px 5px; text-align: left; vertical-align: middle; border: none; font-size: 100%; } .admin th { font-weight: bold; text-transform: uppercase; background: #eee; } .admin td { border-bottom: 1px solid #bbb; } .admin table a.button { margin-bottom: 0; } .admin .vat th, .admin .vat td { vertical-align: top; } .admintablerow { width: 100%; float: left; } .page-content .admintablerow p { margin-bottom: 0; } .page-content .admintablerow p span { } .admintablecol { float: left; padding: 12px 0 0px 0px; font-size: 17px; } .admintablecol input, .admintablecol select { padding: 3px; font-size: 15px; } .rtborder { margin-right: 3px; } .col_retailer {width: 140px; } .col_expiry {width: 130px; } .col_type {width: 90px; } .col_applies {width: 140px; } .col_brand {width: 130px; } .col_min, .col_max, .col_disc { width: 90px; } .col_min input, .col_max input, .col_disc input { width: 40px; } .col_code { width: 120px; } .col_code input { width: 85px; } .col_notes {width: 230px; } .col_notes input { width: 210px; } .col_end { width: 30px; } /* daily reports */ .daily-report { width: 100%; padding: 15px; box-sizing: border-box; } .daily-report p, .daily-report #custom, .daily-report li { font-size: 1.75rem; padding: 0; margin: 0; } .daily-report p, .daily-report ul { margin-bottom: 0; } .daily-report h2 { color: #fff; margin: 0 0 20px; } .daily-report ul { padding-left: 14px; } .daily-report ul.cu { margin: 20px 0; padding: 0; } .daily-report ul.cu, ul.cu li { list-style: none; } .daily-report ul.cu li { display: inline-block; margin: 0 9px; position: relative; font-weight: bold; } .daily-report ul.cu li:before { content: " "; position: absolute; left: -12px; top: 0; } .daily-report ul.cu li:first-child { margin-left: 0; } .daily-report ul.cu li:first-child:before { content: ""; } .daily-report ul.cu li:last-child { margin-right: 0; } .daily-report #custom { width: 140px; margin-right: 10px; font-size: 90%; padding: 3px; } .daily-report .orange, .daily-report a { color: #FF9D3D; }