/*FONT */ @font-face { } /* COMMON */ * { -webkit-appearance: none; padding:0; margin:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; list-style-type:none; color:#424242; font-family: 'Open Sans', Helvetica, Arial, sans-serif; outline:none; border:none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent;} input::-moz-focus-inner { border: 0; } .ios a, .ios { text-decoration:none; color:#000000;} body { background:#ffffff; -webkit-text-size-adjust: 100%; } a { color:#424242; } a:hover { color:#48AB78; } p {font-family: 'Open Sans', sans-serif; font-weight:400; font-size:14px;} strong {font-weight:700;} h1, h2, h3, h4, h1 span, h2 span, h3 span, h4 span {font-family: 'Aleo', serif; font-weight:700;} h1 {color:#48ab78;} h3 {font-size:24px; line-height:34px; padding: 25px 0;} .intro .introcopy h1, h2 {font-size:75px; line-height:57px; padding: 25px 0;} .intro .introcopy{ padding:210px 0px 0 24%;} .intro .introcopy li {margin: 0 0 8px 0; position: relative;padding: 4px 0 10px 41px; font-size:17px; font-weight:bold;} .intro .introcopy li:before { content: ""; background: #48AB78; border-radius: 100%;height: 30px; width: 30px; display: inline-block; margin: 1px 4px 0; position: absolute; left: 0; top: 0px;} .intro .introcopy li:after {content:url(tick.svg); position: absolute; left: 11px; top: 2px;} .cta {margin:15px 0 15px 15px; position:relative; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition:all 0.1s ease-in-out; font-family: 'Aleo', serif; font-weight:700; font-size:24px; padding: 12px 2px; color:#424242; background-repeat:repeat-x; background-image: url("ctaunderline.svg"); background-position: 0 0.7em; background-size: 5px 102%;text-decoration:none; position: relative; display: block; clear: both; width: max-content;} .cta:after {content:"\203A"; position: absolute;right: -21px;top: -4px;margin: 0 0 0 12px; font-size: 49px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition:all 0.1s ease-in-out;} .cta:hover {background-size: 41px 124%;background-position: 0 -0.3em; color:#ffffff;background-image: url("ctaunderlinehover.svg");} .cta:hover:after { color:#48ab78;} .twoCol .col {width:50%; float:left;} #bodyInner{ width:100%;} .row {padding:40px 0;width: 100%; clear: both; float: none; overflow:visible;} .row.twoColrow, .row.oneColrow { margin:0 auto;} .row.twoColrow .col p, .row.twoColrow .col h2 {width:400px;} .row.twoColrow .odd.col .cta {float: right; margin: 0 200px 0 0;} .row.twoColrow .odd.col p, .row.twoColrow .odd.col h2 { float: right;} .row.twoColrow .col.wide p {width:430px;} .row.twoColrow .col.wide h2 {width:200px;} .row.oneColrow .col p, .row.oneColrow .col h3, .row.oneColrow .col p, .privacy-policy .row.oneColrow .col ul {width:50%;} .row.twoColrow .twoCol.wider .col.image-focus{max-width:970px;} .extrasSlides li{opacity:0; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; display:none; width: 100%; } .extrasSlides li.active{opacity:1; display:inline;} .extrasSlides {position:relative;} .extrasSlides li img {padding:0; width: auto; margin: 0 auto;} .extrasSlides li img:first-child{opacity:1; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s;} .extrasSlides li img:nth-child(2){opacity:1; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s;} .extrasSlides li img:last-child{opacity:1; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s;} .extrasSlides li.transition img:first-child {opacity:0; padding:0 0 0 25px;} .extrasSlides li.transition img:nth-child(2) {opacity:0; padding:0 0 0 25px;} .extrasSlides li.transition img:last-child {opacity:0;padding:0 0 0 25px;} .row.twoColrow .twoCol { display: flex; display: -webkit-flex; align-items: center; justify-content: center;} .twoColrow .twoCol .col {position:relative; padding: 0 2%;} .twoColrow .twoCol .col.wide.text-focus {width:100%;} .oneColrow .oneCol .col {position:relative; padding:50px 10%;} .twoColrow .twoCol .col.image-focus img { border-radius: 45px; width: 100%;} .twoColrow .twoCol .col.image-focus .tag { position: absolute; left: -7px; bottom: 10%;} .twoColrow .twoCol .col.image-focus .tag img {border-radius:0!important;} .twoColrow .twoCol .col.image-focus {max-width: 780px; padding: 0 2% 0 75px; width:60%;} .twoColrow .twoCol .col.text-focus {width:40%; max-width: 890px;} .row.twoColrow.grey, .row.oneColrow .oneCol.grey { max-width: none;} .row.twoColrow.grey .twoCol { background:#f7f8f7;padding:70px 25px 70px 0; width: 95%; border-radius: 0 70px 70px 0;} .row.oneColrow .oneCol.grey { background:#f7f8f7;padding:70px 25px 70px 5%; width: 100%; max-width: 930px; border-radius: 0 70px 70px 0; overflow: hidden;} .row.twoColrow#pricingPlan .twoCol > div {width:70%;} .row.twoColrow#pricingPlan ul { display: flex;} .row.twoColrow#pricingPlan ul li strong, .row.twoColrow#pricingPlan ul li sup{color: #46a149;} .row.twoColrow#pricingPlan ul li {align-items: center; justify-content: center;display: flex; position:relative; background: #f7f8f7; padding: 15px; border-radius: 15px; text-align: center; margin: 0 4% 0 0;width: 21%;} .row.twoColrow#pricingPlan ul li::after { content: "\203A"; color:#CECFCE; position: absolute; margin: 0 0 0 12px; font-size: 49px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.1s ease-in-out; right: -21px;} .row.twoColrow#pricingPlan ul li:last-child{margin:0;} .row.twoColrow#pricingPlan ul li img {max-width:40px; margin:11px;} .row.twoColrow#pricingPlan ul li:last-child::after{content:"";} .row.twoColrow#pricingPlan .twoCol > div:first-child{max-width:450px;} .row.twoColrow#pricingPlan h2, .row.twoColrow#pricingPlan p {float:none;} .row.oneColrow#pricing {position:relative;} .row.oneColrow#pricing .pricing-info h3 {color:#a9b6bd; font-size:24px; margin:0;} .row.oneColrow#pricing .pricing-info h3 sup {color:#a9b6bd; font-size:16px; } .row.oneColrow#pricing .pricing-info h5 { border-bottom: 1px solid #a9b6bd; padding: 0 0 8px 0;} .row.oneColrow#pricing .pricing-info h4 {color:#48ab78; font-size:24px; margin:0 0 30px 0;} .row.oneColrow#pricing .pricing-image p {float:left; width: 100%; padding: 40px 0 0px 15px; max-width:280px;} .row.oneColrow#pricing .pricing-image ul {padding: 30px 0 80px; width: 100%; margin: -6px 0 0 6%; float:left; display: flex; display: -webkit-flex; max-width: 330px;} .row.oneColrow#pricing .pricing-image ul li {cursor: pointer; justify-items: center;align-content: center;display: grid;width: 38%;height: 70px;position: relative;} .row.oneColrow#pricing .pricing-image ul li span {font-family: 'Aleo', serif;font-weight: 700;text-align: center;width: 80px;position: absolute;bottom: -9px;} .row.oneColrow#pricing .pricing-image ul li span small { display: block; font-size: 12px; width: 100%;} .row.oneColrow#pricing .pricing-image ul li:hover{opacity:0.5;} .row.oneColrow#pricing .pricing-image ul li img {transform: scale(0.5);position: relative;left: 0;opacity: 0.25;} .row.oneColrow#pricing .pricing-image ul li.active img {opacity:1;} .row.oneColrow#pricing .pricing-info { right: 0; top: 0; padding: 40px 6% 70px 25px; position:absolute; right:0; text-align: left; width: 37%;} .row.oneColrow#pricing .pricing-info .pStandard, .row.oneColrow#pricing .pricing-info .pOptional { margin: 20px 0;} .row.oneColrow#pricing .pOptional .addons li::after { content: "?"; background: #48AB78; border-radius: 100%; height: 20px; width: 20px; display: inline-block; margin: 1px 4px 0; cursor:pointer; left: 0; top: 0px; color: #fff; font-weight: bold; text-align: center;} .row.oneColrow#pricing .pricing-info .pOptional ul {display:flex;display: -webkit-flex; flex-wrap: wrap;} .row.oneColrow#pricing .pricing-info .pStandard li, .row.oneColrow#pricing .pricing-info .pOptional li { font-size: 14px;} .row.oneColrow#pricing .pricing-info .pOptional li {min-width:25%;flex-wrap:wrap;padding:12px 28px 12px 0;} .row.oneColrow#pricing .pricing-info .pStandard ul { padding: 12px 0 0 0;} .row.oneColrow#pricing .pricing-image #activeroom { width: 100%; text-align: center;} .row.oneColrow#pricing .pricing-image #activeroom img {width: auto; max-height: 490px;} .row.oneColrow#pricing .pricing-info h3 span span sup {font-size:12px; color:#000000;} .row.oneColrow#pricing .pricing-info h3 > span { float: right; border-radius: 45px; overflow: hidden; padding: 2px 0px 8px 0px; margin: -7px 0 0 0; height: 45px} .row.oneColrow#pricing .pricing-info h3 span span {color: #000000; padding: 12px 12px 7px 12px; font-size: 18px; border: 1px solid #a9b6bd; } .row.oneColrow#pricing .pricing-info span.floorplan {border-radius:0; float: right; font-size: 14px; margin: -3px 13px 0 0;cursor:pointer; color: #a9b6bd; text-decoration: underline; font-weight: bold;} .row.oneColrow#pricing .pricing-info span.floorplan:hover { color: #000000;} #customisations .trio { background: #f7f8f7; min-height: 62vh; border-radius: 45px;} #customisations .trio div { position: absolute;} #customisations .trio img {border-radius: unset;} #customisations .trio .trioFlooring {width: 28vw;left: -35px;bottom: -43px;max-width: 480px;} #customisations .trio .trioBlinds {width: 19vw;left: 56%;margin: 0 0 0 -25%;max-width: 350px;} #customisations .trio .trioDoors {width: 15vw;bottom: 13px;right: 16px;max-width: 260px;} #customisations .trio div span {text-align: center; position: absolute;color: #6a6a6a;font-size: 15px;width: 160px;z-index: 300;} #customisations .trio div span:before{ content: url(arrow.svg); position: absolute;} #customisations .trio .trioDoors span {right: 260px;top: 122px;} #customisations .trio .trioFlooring span {left: 60px;top: -168px;} #customisations .trio .trioBlinds span {right: -180px;top: 122px;} #customisations .trio .trioDoors span:before {top: -75px; left: 138px; transform: scaleX(1) rotate(20deg);} #customisations .trio .trioFlooring span:before {top: 95px;left: 118px;transform: scaleX(1) rotate(138deg);} #customisations .trio .trioBlinds span:before {top: -65px; left: -62px; transform: scaleX(-1) rotate(30deg);} #addons .col.odd.image-focus { padding: 0 2% !important;} .row.twoColrow.commit { max-width: none; margin:35px 0;} .row.twoColrow.commit .twoCol {float: right; background:#48ab78; width: 95%; border-radius: 70px 0 0 70px;} .row.twoColrow.commit .twoCol .col.odd{padding:0 0 0 70px;} .row.twoColrow.commit .cta:hover {background-size: 41px 124%;background-position: 0 -0.3em; color:#48ab78;background-image: url("ctaunderlinehover2.svg");} .row.twoColrow.commit .cta:hover:after { color:#ffffff;} .row.twoColrow.commit .odd.col .cta {float: none; margin:15px 0 15px 15px;} .row.twoColrow.commit .odd.col p, .row.twoColrow.commit .odd.col h2 { float: none;} .twoColrow.commit .twoCol .col.image-focus img { border-radius: 0; display: inherit;} .twoColrow.commit .twoCol .col.image-focus { max-width: none; padding: 0; width: auto; text-align: right; float: right;} .twoColrow.commit .twoCol .col.text-focus p {max-width: 280px;} .twoColrow.circlelinks .twoCol .col.circlelink { max-width: 370px; margin: 0 0 30px 0;} .twoColrow.circlelinks .twoCol { display: inline;} .twoColrow.circlelinks .twoCol .col.circlelink p {width:auto;padding:0; max-width: 300px;} .twoColrow.circlelinks .twoCol .col.circlelink h3 { padding: 0 0 15px 0;} .twoColrow.circlelinks .twoCol .col.circlelink a {text-decoration:none;} .twoColrow.circlelinks { overflow: hidden; padding: 60px 0 120px 10%;} .twoColrow.circlelinks .twoCol .col.circlelink p::after { content: "\203A"; position: absolute; margin: 0 0 0 12px; font-size: 49px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.1s ease-in-out; top: 20px; right: 9px;} .twoColrow.circlelinks .twoCol .col.circlelink span {display:block; width:100%;padding:15px 0 0 0;} .twoColrow.circlelinks .twoCol .col.circlelink a:hover span {text-decoration:underline;} .twoColrow.circlelinks .twoCol .col.circlelink a:hover p::after {right: -6px;} .privacy-policy .row.oneColrow .col ul, .privacy-policy .row.oneColrow .col p {margin:15px 0;} .privacy-policy .row.oneColrow .col ul ul {width:auto;} .privacy-policy .row.oneColrow .col ul li {padding: 2px 0 2px 19px; display: block; position: relative; font-size:14px;} .privacy-policy .row.oneColrow .col ul li::before {content: "\2022"; color:#4AAA79; position:absolute; left:-2px; font-size: 34px;line-height: 21px;} /* HEADER */ .home #headerInner #inpageHeader .colourFill {fill:#48ab78;} .rooms #headerInner #inpageHeader .colourFill {fill:#46a149;} .technical #headerInner #inpageHeader .colourFill {fill:#9bcbed;} .about-us #headerInner #inpageHeader .colourFill {fill:#46a149;} .environmentally-friendly #headerInner #inpageHeader .colourFill {fill:#46a149;} .sales #headerInner #inpageHeader .colourFill {fill:#b5a68b;} #headerOuter {width:100%; clear:both; text-align:center;position: absolute;} #headerInner {margin:0 auto; overflow:hidden; min-height: 215px;} #headerInner #inpageHeader {display:none;width:57.3333334%; float:right; text-align:left; position:relative; padding: 70px 0 0 13%;} #headerInner #overpageHeader {top:0;opacity:1; position: fixed; z-index: 999; margin-top: 0px; background: #a9b6bd; width: 100%; text-align: left; padding:10px 25px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition:all 0.5s ease-in-out;} #headerOuter.conceal #overpageHeader {margin-top: -285px; opacity:0;} #inpageHeaderSVG { position: absolute; left: -82px;} #headerOuter.conceal #inpageHeader {display:block;} #overpageHeader #overpageHeaderSVG { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition:all 0.1s ease-in-out;} /* NAVIGATION */ #nav { margin: 39px 0 0 0;} #nav ul li { float: left; margin: 15px;} #nav ul li a {text-decoration:none; font-size:16px; font-weight:700;} #menu span { display: block; width: 100%; border-top: 4px #000000 solid; margin: 0 0 7px 0;} #inpageHeader #menu{display:none; cursor:pointer; width:30px; height:30px; position:absolute; right: 20px; top: 100px;} #overpageHeader #menu {display:none; cursor:pointer; width:30px; height:30px; position:absolute; right: 20px; top: 50px;} #overpageHeader #menu span { border-top: 4px #ffffff solid;} #overpageHeader #nav {max-width: 640px; opacity:1; visibility:visible; margin: 0; width: 57.3333334%; float: right; text-align: left; position: relative; padding: 37px 0 0 123px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition:all 0.1s ease-in-out;} #overpageHeader #nav ul li a {color:#ffffff;} #overpageHeader #nav ul li a:hover {color:#000000;} /* CONTENT */ #bodyOuter #bodyInner .intro .twoCol .col.odd {background-size:cover; width: 42.6666666%; border-radius: 0 70px 70px 0; background-position: left center; background-repeat: no-repeat;} .home #bodyOuter #bodyInner .intro .twoCol .col.odd{background-image:url(../images/intro-home.jpg); } .rooms #bodyOuter #bodyInner .intro .twoCol .col.odd{background-image:url(../images/intro-rooms.jpg); } .technical #bodyOuter #bodyInner .intro .twoCol .col.odd{background-image:url(../images/intro-technical.jpg); } .about-us #bodyOuter #bodyInner .intro .twoCol .col.odd{background-image:url(../images/intro-about.jpg); } .environmentally-friendly #bodyOuter #bodyInner .intro .twoCol .col.odd{background-image:url(../images/intro-environmentally-friendly.jpg); } .sales #bodyOuter #bodyInner .intro .twoCol .col.odd{background-image:url(../images/intro-sales.jpg); } .fourohfour #bodyOuter #bodyInner .intro .twoCol .col.odd{background-image:url(../images/intro-404.jpg); } .privacy-policy #bodyOuter #bodyInner .intro .twoCol .col.odd{background-image:url(../images/intro-home.jpg); } #bodyOuter #bodyInner .intro .twoCol .col.even {width:57.3333334%;} .home #bodyOuter #bodyInner .intro .introcopy h1 span {color:#b5a68b;} .home #bodyOuter #bodyInner .intro .introcopy h1 span:first-child {color:#48ab78;} .home #bodyOuter #bodyInner .intro .introcopy h1 span:last-child {color:#a9b6bd;} #bodyOuter #bodyInner .intro .introcopy p, .row.twoColrow p {max-width:280px; width:100%; padding:40px 0 40px 15px; } #bodyOuter #bodyInner .intro .introcopy.wider p, .row.twoColrow p { max-width: 420px; width: 100%; padding: 40px 5% 40px 5px;} .grass h1,.grass h2,.grass h3, .twoColrow.circlelinks .twoCol .col.circlelink.grass span, .twoColrow.circlelinks .twoCol .col.circlelink.grass p::after {color:#46a149;} .cloud h1, .cloud h2, .cloud h3, .twoColrow.circlelinks .twoCol .col.circlelink.cloud span, .twoColrow.circlelinks .twoCol .col.circlelink.cloud p::after {color:#a9b6bd;} .jade h1, .jade h2, .jade h3, .twoColrow.circlelinks .twoCol .col.circlelink.jade span, .twoColrow.circlelinks .twoCol .col.circlelink.jade p::after {color:#48ab78;} .soil h1, .soil h2, .soil h3, .twoColrow.circlelinks .twoCol .col.circlelink.soil span, .twoColrow.circlelinks .twoCol .col.circlelink.soil p::after {color:#b5a68b;} .white h1, .white h2, .white h3, .white p, .twoColrow.circlelinks .twoCol .col.circlelink.white span, .twoColrow.circlelinks .twoCol .col.circlelink.white p::after {color:#ffffff;} .row.twoColrow.diagram-feature .image-focus, .row.twoColrow.diagrams .image-focus {position:relative; padding:0 2%;} .row.twoColrow.diagram-feature .image-focus span, .row.twoColrow.diagrams .image-focus span {text-align:center; position:absolute; color: #6a6a6a; font-size: 15px; width:160px; z-index:300;} .row.twoColrow.diagram-feature .image-focus span#label1 {top:3%; left:3%;} .row.twoColrow.diagram-feature .image-focus span#label2 {top: 6%;left: 65%;} .row.twoColrow.diagram-feature .image-focus span#label3 {top: 91%; left: 11%;} .row.twoColrow.diagram-feature .image-focus span#label4 {top: 90%;left: 61%;} .row.twoColrow.diagram-feature .image-focus span:before, .row.twoColrow.diagrams .image-focus span:before { content:url(arrow.svg); position:absolute;} .row.twoColrow.diagram-feature .image-focus span#label1:before {top: 45px;left: 72px; transform:scaleX(-1) rotate(180deg);} .row.twoColrow.diagram-feature .image-focus span#label2:before {top: 44px;left: 61px;transform:rotate(155deg);} .row.twoColrow.diagram-feature .image-focus span#label3:before {top: -90px;left: 80px;} .row.twoColrow.diagram-feature .image-focus span#label4:before {top: -111px;left: 50px;transform: scaleX(-1) rotate(-21deg);} .row.twoColrow.diagram-feature .image-focus img {border-radius:0!important;} .row.twoColrow.grey-reverse .twoCol {float: right; width: 95%; border-radius: 70px 0 0 70px; display: flex; display: -webkit-flex; flex-wrap: wrap; padding: 70px 70px 70px 25px;} .row.twoColrow.diagrams .text-focus p, .row.twoColrow.diagrams .text-focus h2 { width: 420px;} .twoColrow .twoCol .col.diagram-panel.image-focus{width:50%!important; padding: 0 2% !important; text-align:center;} .twoColrow .twoCol .col.image-focus.diagram-panel img { width: auto; max-height: 490px; margin:auto 0;} .twoColrow .twoCol .col.image-focus.diagram-panel h3{text-align:center;color:#a9b6bd;} .row.twoColrow .diagram-panel.image-focus span {text-align:center; position:absolute; color: #6a6a6a; font-size: 15px; width:160px; z-index:300;} .row.twoColrow .diagram-panel.image-focus span#label1 {top:24%; left:13%;} .row.twoColrow .diagram-panel.image-focus span#label2 {top: 18%; left: 55%;} .row.twoColrow .diagram-panel.image-focus span#label3 {top: 77%; left: 9%;} .row.twoColrow .diagram-panel.image-focus span#label4 {top: 50%;left: 64%;} .row.twoColrow .diagram-panel.image-focus span#label5 { top: 17%; left: 69%;} .row.twoColrow .diagram-panel.image-focus span#label6 {top: 26%; left: 9%;} .row.twoColrow .diagram-panel.image-focus span#label7 {top: 53%; left: 8%;} .row.twoColrow .diagram-panel.image-focus span#label8 {top: 90%;left: 68%;} .row.twoColrow .diagram-panel.image-focus span#label9 {top: 80%; left: 65%;} .row.twoColrow .diagram-panel.image-focus span#label10 {top: 83%; left: 5%;} .row.twoColrow .diagram-panel.image-focus span#label12 {top: 30%; left: 9%;} .row.twoColrow .diagram-panel.image-focus span:before{ content:url(arrow.svg); position:absolute;} .row.twoColrow .diagram-panel.image-focus span#label1:before {top: 39px;left: 72px; transform:scaleX(-1) rotate(180deg);} .row.twoColrow .diagram-panel.image-focus span#label2:before {top: 53px;left: 20px;transform:rotate(155deg);} .row.twoColrow .diagram-panel.image-focus span#label3:before {top: -90px;left: 80px;} .row.twoColrow .diagram-panel.image-focus span#label4:before {top: -92px; left: 3px;transform: scaleX(-1) rotate(1deg);} .row.twoColrow .diagram-panel.image-focus span#label5:before {top: 62px; left: -2px; transform:rotate(180deg);} .row.twoColrow .diagram-panel.image-focus span#label6:before {top: 44px; left: 61px; transform: scaleX(-1) rotate(-185deg);} .row.twoColrow .diagram-panel.image-focus span#label7:before {top: -90px;left: 117px;} .row.twoColrow .diagram-panel.image-focus span#label8:before {top: -94px; left: -50px; transform: scaleX(-1) rotate(-1deg);} .row.twoColrow .diagram-panel.image-focus span#label9:before {top: -111px;left: 50px;transform: scaleX(-1) rotate(-21deg);} .row.twoColrow .diagram-panel.image-focus span#label10:before {top: -79px;left: 89px;transform: rotate(16deg);} .row.twoColrow .diagram-panel.image-focus span#label12:before {top: 15px;left: 89px;transform: rotate(150deg) scaleX(-1);} .row.twoColrow .diagram-beams.image-focus span#label1 {top: 88%; left: 63%;} .row.twoColrow .diagram-beams.image-focus span#label1:before {top: -105px; left: 38px; transform: scaleX(-1) rotate(-20deg);} .row.twoColrow .diagram-comforts.image-focus span#label1 {top:3%; left:3%;} .row.twoColrow .diagram-comforts.image-focus span#label1:before {top: 51px; left: 75px; transform: scaleX(-1) rotate(-190deg);} .row.twoColrow .diagram-comforts.image-focus span#label2 {top: 91%; left: 66%;} .row.twoColrow .diagram-comforts.image-focus span#label2:before {top: -103px;left: 0px;transform: scaleX(-1) rotate(-16deg);} .galleryHolder {width:75%; float:right; clear:both; border-radius: 70px 0 0 70px; margin: 90px 0 90px 0;} .galleryHolder .slides img { margin-left: 2.8%; padding:0.5% 0 0.5% 0.5%; border-radius: 70px 0 0 70px;} #contactForm { width: 100%; max-width: 315px; padding:0 0 0 15px;} .inputText{background: none repeat scroll 0 0 #ffffff; border:2px solid #000; color: #646464; font-size: 15px; height:41px; margin: 6px 0 8px; padding: 9px 7px; width: 100%; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .inputTextArea{background: none repeat scroll 0 0 #ffffff; border:2px solid #000; color: #646464; font-size: 15px; margin: 6px 0 10px; padding: 13px 11px; width: 100%; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;} .sendbutton, #error { clear: both; } #error { padding:0 0 12px;} .errorclue { background:#F8A7A7; } .theError { color:red; font-size: 13px;} .senderror { border: red solid 4px; margin: 30px 0; padding: 35px 15px; color: #000000; border-radius: 33px; font-weight: bold;} .returnsuccess { border: #46a149 solid 4px; margin: 30px 0; padding: 35px 15px; color: #000000; border-radius: 33px; font-weight: bold;} .sendbutton { margin:0 0 20px 0; text-align:right; width:100%; display: grid;justify-items: right;} #submit.cta { margin: 0;cursor:pointer; background-color:#ffffff!important;} .inputText::-webkit-input-placeholder, .inputTextArea::-webkit-input-placeholder { font-family: 'Aleo', sans-serif; font-size:11px;} .inputText::-moz-placeholder, .inputTextArea::-moz-placeholder { font-family: 'Aleo', sans-serif; font-size:11px;} .inputText:-ms-input-placeholder, .inputArea:-ms-input-placeholder { font-family: 'Aleo', sans-serif; font-size:11px;} .inputText:-moz-placeholder, .inputArea:-moz-placeholder { font-family: 'Aleo', sans-serif; font-size:11px;} #contactForm .loading {position:relative; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition:all 0.1s ease-in-out; font-family: 'Aleo', serif; font-weight:700; font-size:24px; padding: 12px 2px; color:#424242; background-repeat:repeat-x;background-size: 41px 124%;background-position: 0 -0.3em; color:#ffffff;background-image: url("ctaunderlinehover.svg");text-decoration:none; position: relative; display: block; clear: both; width: max-content;} /* FOOTER */ #footerOuter {width:100%; clear:both; padding: 40px 0;} #footerInner {margin: 0 auto 60px auto; padding:0 5% 0 15%; position:relative;} #footerInner #nav {margin:0;float: left;} #footerInner #nav ul:first-child:before{content:url(emblem-grass.svg);float:left; margin:0 0 0 -60px;} #footerInner #nav ul {width:100%; display:block; clear:both;} #footerInner #nav ul li { margin: 2px 15px !important;} #footerInner #nav ul:last-child { margin: -5px 0 0 0; display: inline-block;} #footerOuter #nav ul li a { font-size: 13px;} #footerContact {position:relative;width: 100%; float: left; text-align: left; padding: 0 12px 25px 12px;} #footerContact .address { font-size: 13px; clear:both;} #footerContact .social {position: absolute; top: -58px; right:10px;} #footerContact .social ul li {float:left;} #footerContact .social ul li a{display:block; padding:8px 0 0 0; height:35px; width:35px; text-align:center; border-radius:100%; margin: 0 4px;} #footerContact .social ul li a:hover {opacity:0.5;} #footerContact .social ul li a.facebook {background:#4867AA;} #footerContact .social ul li a.instagram {background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);} #footerContact .social ul li a.facebook:before {content:url(facebook.svg);} #footerContact .social ul li a.instagram:before {content:url(instagram.svg);} #footerContact .social ul {margin: 0 0 12px 0; overflow: hidden;width: max-content;float: right;} @media (min-width: 1600px) { #headerInner { width: 100%; float: left;} /*.row.twoColrow {max-width: 1200px;}*/ } @media (max-width: 1465px){ #pricing.row.oneColrow .oneCol.grey { max-width: 60%;} .row.oneColrow#pricing .pricing-info {padding: 80px 4% 70px 25px;} .row.oneColrow#pricing .pricing-image ul{margin: -6px 0 0 -20px;} .row.oneColrow#pricing .pricing-info .pOptional li { min-width: 40%;} .row.twoColrow .diagram-panel.image-focus span{ font-size: 19px; width: 188px; transform: scale(0.7);} .row.twoColrow .diagram-panel.image-focus span#label1::before { top: 49px; left: 81px;} .row.twoColrow .diagram-panel.image-focus span#label2::before { top: 62px; left: 63px;} .row.twoColrow .diagram-panel.image-focus span#label12 { left: 6%;} .row.twoColrow .diagram-panel.image-focus span#label12::before { top: 25px; left: 108px;} .row.twoColrow .diagram-panel.image-focus span#label3 { top: 77%; left: 3%;} .row.twoColrow .diagram-panel.image-focus span#label3::before {top: -93px; left: 103px;} .row.twoColrow .diagram-panel.image-focus span#label7 { top: 53%; left: 6%;} .row.twoColrow .diagram-panel.image-focus span#label7::before { top: -90px; left: 126px;} } @media (max-width: 1465px) and (min-width:790px) { .twoColrow .twoCol .col.image-focus.diagram-panel img { max-height: 350px;} } @media (max-width: 1465px) and (min-width:1090px) { .row.oneColrow#pricing .pricing-image p, .row.oneColrow#pricing .pricing-image ul { float: none;} .row.oneColrow#pricing .pricing-image #activeroom img { max-height: 390px;} } @media (max-width: 1200px) { .twoColrow .twoCol .col.image-focus .tag img {border-radius: 0 !important; width: 170px !important;} .twoColrow .twoCol .col.image-focus .tag { left: 21px;} .row.twoColrow .col p, .row.twoColrow .col h2 { width: auto; max-width: 360px;} .row.twoColrow .col h2 { font-size: 55px; line-height: 46px;} #overpageHeader #overpageHeaderSVG { width: 150px;} .cta, .loading {font-size:20px;} .row.twoColrow .odd.col .cta{margin: 0 189px 0 0;} .row.twoColrow .col .cta { float: none;} .row.twoColrow.diagrams .text-focus p, .row.twoColrow.diagrams .text-focus h2 { width: auto;} .row.twoColrow .diagram-panel.image-focus span#label7 { left: -3%;} .row.twoColrow#pricingPlan .twoCol > div:first-child{max-width:unset;} .row.twoColrow#pricingPlan .twoCol > div {width:100%;} .row.twoColrow#pricingPlan .twoCol {display:inline-block; padding:0; width: 100%;} .row.twoColrow#pricingPlan { padding: 70px 25px 70px 5%;} .row.twoColrow#pricingPlan ul li {width:22%;} #customisations .twoCol .col { width: 80%; margin: 0 auto; max-width: unset; float: none;} #customisations .twoCol { display: inline;} #customisations .col.odd.text-focus {min-height: 400px;} #customisations .col.odd.text-focus h2, #customisations .col.odd.text-focus p { width: 100%; float: none;} #customisations .trio .trioBlinds { width: 29vw;} #customisations .trio .trioFlooring { width: 38vw;} #customisations .trio .trioDoors { width: 25vw;} } @media (max-width: 1145px) { /*MENU CRUNCH*/ #inpageHeader #nav, #overpageHeader #menu {display:none;} #inpageHeader #menu {display:block;} #overpageHeader #nav {width: auto; padding: 42px 0 0 0px;} .intro .introcopy { padding:210px 0px 0 15%;} .intro .introcopy h1 {font-size: 60px; line-height: 47px;} .twoColrow .twoCol .col.diagram-panel.image-focus { width: 100% !important;} .cta:hover { background-size: 34px 124%; background-position: 0 -0.3em;} .row.twoColrow .diagram-panel.image-focus span#label1 { top: 104px; left: 130px;} .row.twoColrow .diagram-panel.image-focus span#label10 { top: 330px; left: 48px;} .row.twoColrow .diagram-panel.image-focus span#label12 { left: 158px;} .row.twoColrow .diagram-panel.image-focus span#label4 { top: 50%; left: 420px;} .row.twoColrow .diagram-panel.image-focus span#label3 {top: 77%; left: 168px;} .row.twoColrow .diagram-panel.image-focus span#label6 { top: 150px; left: 80px;} .row.twoColrow .diagram-panel.image-focus span#label6::before { top: 51px; left: 84px;} .row.twoColrow .diagram-panel.image-focus span#label5 { top: 120px; left: 450px;} .row.twoColrow .diagram-panel.image-focus span#label7 { top: 52%;left: 15%;} .row.twoColrow .diagram-panel.image-focus span#label8 { top: 300px; left: 440px;} .row.twoColrow .diagram-panel.image-focus span#label8 { top: 90%; left: 60%;} } @media (max-width: 1145px) and (min-width:790px) { .twoColrow.commit .twoCol .col.text-focus { width: 80%;} .twoColrow.commit .twoCol .col.text-focus p {padding: 25px 0 15px 15px; max-width: 90%;} .twoColrow.commit .twoCol .col.text-focus h2 {padding:25px 0 0 0;} .row.twoColrow.commit .odd.col .cta { margin: 0 0 15px 15px;} } @media (max-width: 1090px) { .row.oneColrow#pricing .pricing-info { padding: 20px 0 70px 0%; position: static; width: 95%;} #pricing.row.oneColrow .oneCol.grey { max-width: 95%;} .row.oneColrow#pricing .pricing-image ul{float: right;} .row.oneColrow#pricing .pricing-image #activeroom {clear:both;} .row.oneColrow#pricing .pricing-image ul { padding: 30px 0 20px;} } @media (max-width: 1010px) { .row.twoColrow .odd.col .cta { margin: 0 0 0 12px; float: left; } } @media (max-width: 1010px) and (min-width:790px) { .row.twoColrow.diagram-feature .image-focus span#label3 {top: 95%;left: 6%;} } @media (max-width:910px) and (min-width:790px) { .row.twoColrow.diagram-feature .image-focus span#label2 { top: 3%; left: 59%;} .row.twoColrow.diagram-feature .image-focus span#label4 { top: 90%; left: 53%;} .row.twoColrow.diagram-feature .image-focus span#label3 { top: 94%; left: 4%;} .row.twoColrow.diagram-feature .image-focus span#label1 { top: -4%;} } @media (max-width:910px) { .row.twoColrow .diagram-panel.image-focus span, .row.twoColrow.diagram-feature .image-focus span, .row.twoColrow.diagrams .image-focus span, .row.twoColrow .diagram-beams.image-focus span, .row.twoColrow .diagram-comforts.image-focus span{ font-size: 19px; width: 188px; transform: scale(0.7);} .row.twoColrow .diagram-beams.image-focus span {width: 368px;} .twoColrow .twoCol .col.image-focus.diagram-panel img { max-height: none; margin: auto 0; width: 100%;max-width: 400px;} .row.twoColrow .diagram-panel.image-focus span#label1 { top: 28%; left:-2%;} .row.twoColrow .diagram-panel.image-focus span#label2::before { top: 59px; left: 32px; } .row.twoColrow .diagram-panel.image-focus span#label12 {top:30%; left: 11%;} .row.twoColrow .diagram-panel.image-focus span#label10 { top: 86%; left: -6%;} .row.twoColrow .diagram-beams.image-focus span#label1 { top: 98%; left: 28%;} .row.twoColrow .diagram-beams.image-focus span#label1::before { left: 138px;} .row.twoColrow .diagram-panel.image-focus span#label3 { top: 77%; left: 13%;} .row.twoColrow .diagram-panel.image-focus span#label4 {top: 67%; left: 59%;} .row.twoColrow .diagram-panel.image-focus span#label6 { top: 30%; left: 0%;} .row.twoColrow .diagram-panel.image-focus span#label5 { top: 22%; left: 69%;} .row.twoColrow#pricingPlan ul { display: inline-block; padding:0; width: 100%;} .row.twoColrow#pricingPlan ul li {margin: 0 0 8% 0; width: 100%;} .row.twoColrow#pricingPlan ul li::after{bottom: -49px; right: 50%; transform: rotate(90deg); top: auto;} #customisations .trio .trioDoors span::before { left: 108px;} #customisations .trio .trioDoors span { right: 240px;} } @media (max-width: 790px) { /*TABLET AND DOWN*/ #headerInner #overpageHeader {margin-top: 0!important; display:block;} #headerInner #overpageHeader, #headerOuter { position: static;} #headerInner #inpageHeader, #headerOuter.conceal #inpageHeader {display: none;} #headerOuter.conceal #overpageHeader {opacity:1;} #overpageHeader #menu span { border-top: 3px #fff solid;} #headerInner { min-height: auto;} #overpageHeader #menu {display:block;} #overpageHeader.reveal #nav {opacity:1; visibility:visible;} #overpageHeader.reveal #nav ul li { margin: 15px 15px 0;} #overpageHeader #nav ul li:first-child { margin: 15px 15px 0 3px;} #overpageHeader.reveal #overpageHeaderSVG {margin-top: 3px; width: 150px; height: 68px;} #overpageHeader #overpageHeaderSVG {margin-top: 4px; width: 150px; } #overpageHeader {height:125px;} #overpageHeader #nav { width: auto !important; opacity:0; visibility:hidden; float: left; text-align: left; position: absolute; clear: both; padding: 0 !important; margin: -10px 0 0 0 !important;} #overpageHeader #menu {display:block;} .twoCol .col {width: 100% !important; float: none;} #bodyOuter #bodyInner .intro .twoCol .col.odd { border-radius: 0 0px 70px 70px;} #bodyOuter #bodyInner .intro .introcopy { padding: 60px 0px 0 10%;} #bodyOuter #bodyInner .intro .twoCol .col.odd .fixheight, #bodyOuter #bodyInner .intro .twoCol .col.odd .fixhalfheight { height: auto !important; min-height: 60vh;} #bodyOuter #bodyInner .intro .twoCol .col.odd {height:600px;} #bodyOuter #bodyInner .intro .introcopy, .row.twoColrow { padding: 60px 0px 0 10%;} .row.twoColrow .twoCol { display: flex; flex-wrap:wrap; padding: 0 5% 0 0;} .row.twoColrow .odd.col p, .row.twoColrow .odd.col h2, .row.twoColrow .odd.col .cta { float: none;} .row.twoColrow.reverse .twoCol {display: -webkit-flex; display: flex; flex-wrap: wrap;} .row.twoColrow.reverse .twoCol .col.odd.text-focus, .row.twoColrow.reverse .twoCol .col.odd.image-focus {order: 2;} .row.twoColrow.reverse .twoCol .col.even.image-focus, .row.twoColrow.reverse .twoCol .col.even.text-focus {order: 1;} .twoColrow .twoCol .col.image-focus{margin: 0 0 0 -61px;} .row.twoColrow.grey, .row.oneColrow .oneCol.grey { padding: 60px 0px 0 0%;} .row.twoColrow.grey .twoCol { padding: 70px 25px 70px 10%;} .row.twoColrow.diagram-feature .image-focus { padding: 55px 0; margin: 0 0 0 -9% !important;} .row.twoColrow .col h2 { padding: 40px 0 0 0;} .row.twoColrow.diagram-feature .image-focus span#label3 { top: 88%; left: 1%;} .galleryHolder { width: 95%;} .row.oneColrow#pricing .pricing-image { padding: 0 0 0 5%;} .row.oneColrow#pricing .pricing-info { padding: 20px 0 70px 5%;} .row.oneColrow#pricing .pricing-image ul { float: none;} .row.oneColrow#pricing small { padding: 0 0 40px 5%; display: block;} .row.oneColrow#pricing .pricing-image #activeroom img { width: 100%;max-height: none;} .twoColrow.commit .twoCol .col.image-focus img { display: none;} .row.twoColrow.commit .twoCol { width: 100%;} .row.oneColrow .col p, .row.oneColrow .col h3 { width: 90%;} .row.twoColrow.diagram-feature .image-focus span#label2::before { top: 60px; left: 35px;} .row.twoColrow.diagram-feature .image-focus span#label2 {top: 13%; left: 68%;} .row.twoColrow.diagram-feature .image-focus span#label1 { top: 13%; left: -8%;} .row.twoColrow.diagram-feature .image-focus span#label3 { top: 82%; left: -5%;} .row.twoColrow.diagram-feature .image-focus span#label4 { top: 82%; left: 71%;} .row.twoColrow.diagram-feature .image-focus span#label4::before { left: -40px;} .row.twoColrow .diagram-panel.image-focus span#label7 { top: 52%; left: 6%;} .row.twoColrow .diagram-panel.image-focus span#label12 { top: 30%; left: 0%;} .row.twoColrow .diagram-panel.image-focus span#label3 { top: 77%; left: 1%;} .privacy-policy .row.oneColrow .col ul { width: auto;} #footerInner #nav ul:first-child::before { content: url(emblem-grass.svg); float: none; margin: 0 0 0 6px;transform: scale(0.75);} #footerInner #nav ul li { float: none;} #footerInner { padding: 0 5% 0 6%;} #footerContact .social, #footerContact .social ul{position: static; float: none;} .row.twoColrow.grey-reverse .twoCol, .row.twoColrow.grey .twoCol { width: 100%;} #footerContact {top: 16px;} #customisations .trio div { position: relative;} #customisations .trio .trioFlooring {width: 70%;} #customisations .trio .trioBlinds { width: 70%; left: -4%; margin: 80px 0;} #customisations .trio .trioDoors { width: 50%; margin: 10px 0 40px 10px;} #customisations .trio { background: #f7f8f7;padding: 30px 0 30px 50px; min-height: 62vh; border-radius: 45px 0px 0px 45px;} #customisations .trio .trioFlooring span {left: 80%; top: -38px;} #customisations .trio .trioFlooring span::before { top: 95px; left: -11px; transform: scaleX(1) rotate(194deg);} #customisations .trio .trioBlinds span { right: -100px; top: 182px;} #customisations .trio .trioBlinds span::before { top: -105px; left: 28px; transform: scaleX(-1) rotate(-8deg);} #customisations .trio .trioDoors span { right: -170px; left:unset;} #customisations .trio .trioDoors span::before { top: 65px; left: 8px; transform: scaleX(1) rotate(-180deg);} #addons .twoCol .col.image-focus { display: flex; order: 2;} #addons .twoCol .col.text-focus { order: 1; display: flex; flex-wrap: wrap;} } @media (max-width: 670px) { .row.twoColrow .diagram-panel.image-focus span#label7 { left: -7%; } .row.twoColrow .diagram-panel.image-focus span#label8 {top: 90%; left: 71%;} .row.twoColrow .diagram-comforts.image-focus span#label1 { top: -1%; left: 14%;} .row.twoColrow .diagram-comforts.image-focus span#label2 {top: 93%; left: 56%;} .twoColrow.circlelinks .twoCol .col.circlelink p::after {right: 10px;} .twoColrow.circlelinks .twoCol .col.circlelink a:hover p::after { right: 1px;} .row.twoColrow .diagram-beams.image-focus span#label1 { left: 14%;} .twoColrow .twoCol .col.image-focus .tag {bottom: 12%;} } @media (max-width: 525px) { /* MENU CRASH */ #overpageHeader #nav {padding: 0 55px 0 0 !important;} #overpageHeader.reveal #overpageHeaderSVG { margin-top: -60px;opacity:0;} #overpageHeader.reveal #nav ul li { margin: 8px 15px 0 3px;} #bodyOuter #bodyInner .intro .introcopy, .row.twoColrow { padding: 60px 0 0 5%;} .row.twoColrow .col h2, h2 { font-size: 37px;line-height: 32px;} .intro .introcopy h1 {font-size: 47px; line-height: 37px;} .home .row.twoColrow.diagram-feature .image-focus img { width: 86%; margin: 0 auto;} .home .row.twoColrow.diagram-feature .image-focus { text-align: center;} .row.twoColrow.diagram-feature .image-focus span#label1 { top: 3%; left: 2%;} .row.twoColrow.diagram-feature .image-focus span#label2 { top: 3%; left: 43%;} .row.twoColrow.diagram-feature .image-focus span#label4 {top: 82%; left: 45%;} .row.twoColrow.diagram-feature .image-focus span#label4::before { left: 56px;} .row.twoColrow .diagram-panel.image-focus span#label7 { left: 43%; top:43%;} .row.twoColrow .diagram-panel.image-focus span#label7::before { top: -90px; left: -42px; transform: scaleX(-1) rotate(0deg);} .row.twoColrow .diagram-panel.image-focus span#label8 { top: 75%; left: 42%;} .row.twoColrow .diagram-panel.image-focus span#label12 {top: 23%; left: 55%;} .twoColrow.reverse .twoCol .col.image-focus {margin: 0 0 0 -72px;} .row.twoColrow .diagram-panel.image-focus span#label12:before {transform: rotate(190deg) scaleX(1); top: 38px; left: 11px;} .row.twoColrow .diagram-panel.image-focus span#label3 {top: 89%; left: 52%;} .twoColrow .twoCol .col.image-focus { margin: 0 0 0 -72px; width: 120% !important;} .row.twoColrow .diagram-panel.image-focus span#label3::before { top: -93px; left: 3px; transform: scaleX(-1) rotate( 1deg );} #bodyOuter #bodyInner .intro .introcopy p, .row.twoColrow p { padding: 40px 0 40px 5px;} .tag, #customisations .trio div span::before {display:none;} .row.twoColrow .col h2 { padding: 27px 0 0 0;} .twoColrow .twoCol .col {padding:0;} .galleryHolder { width: 103%;} .twoColrow.commit .twoCol .col.text-focus p { max-width: none; padding: 15px 25px 0 0;} .row.twoColrow.commit .odd.col .cta { margin: 15px 0 40px 0px;} .row.twoColrow .col.wide p { width: auto;} .row.twoColrow .diagram-panel.image-focus span#label5 { left: 62%;} img.vertical { margin: 0 0 0 -130px!Important;} .twoColrow .twoCol .col.image-focus.diagram-panel h3 { padding: 25px 0 25px 30px; text-align:left;} .twoColrow.circlelinks .twoCol .col.circlelink p { padding: 0 5% 0 0;} .intro .introcopy li {font-size: 14px; padding: 2px 0 10px 33px;} .intro .introcopy li:before{height: 22px; width: 22px;} .intro .introcopy li:after{left: 8px; top: 0px;} #headerInner #overpageHeader {padding: 0px 4px;} #overpageHeader #overpageHeaderSVG { margin-top: -12px; width: 120px;} #overpageHeader { height: 81px;} #overpageHeader.reveal #nav ul li { margin: 12px 15px 0 3px;} #overpageHeader #menu {top: 27px;} #customisations .trio div span { position: static;} #customisations .trio .trioBlinds { text-align:center; width: 100%; max-width: unset;} #customisations .twoCol .col { width: 100% !important;} #customisations .trio div {position: relative; text-align: center; width: 100% !important;} #customisations .trio .trioDoors{margin: 0 auto !important;} }