/* Minification failed. Returning unminified contents.
(1150,44): run-time error CSS1046: Expect comma, found '0'
(1150,48): run-time error CSS1046: Expect comma, found '/'
 */

.range-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 15px; }
.range-product-card { background-color: #f6f6f6; border-radius: 0 0 20px 20px; text-align: center; }
.range-products-card hr { border-color: #3f8da6 !important; }
.range-prod-inner { padding: 45px 15px 75px; }
.range-prod-number { position: absolute; right: 50%; transform-origin: bottom; bottom: 0; transform: translate(50%, 50%); height: 60px; width: 60px; border: 1px solid #fff; background-color: #3f8da6; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem; font-weight: bold; }
.range-product-img { height: 200px; width: 100%; background-color: #24353f; border-radius: 20px 20px 0 0; position: relative; }
.range-colour-flex { display: flex; flex-direction: column; grid-gap: 10px; margin-bottom: 30px; height: 230px; }
.range-prod-colour { height: 50px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #666666; font-weight: bold; }

.price-box { background-color: #fff; border: 1px solid #666666; text-align: center; padding: 8px; font-size: 1.4rem; font-weight: 700; color: #757575; }

#garden-section, #awnings-section { display: none; }
.product-type [type=radio] { position: absolute; left: -9999px; }
div.selected, span.selected { background-color: #3f8da6 !important; color: #fff; }
.a-block { display: block; }

.top-btn { display: flex; align-items: center; justify-content: center; padding: 15px 30px; background-color: #f68b1f; color: #fff; text-decoration: none !important; font-size: 1.2rem; width: fit-content; border-radius: 5px; font-weight: 500; margin: 0 auto; }
.top-btn:hover { background-color: #fff; color: #f68b1f !important; }
.a-block:first-child .sale-btn { border: 2px solid #007fa8; }
.a-block:last-child .sale-btn { border: 2px solid #F68B1E; }

.a-block:hover:first-child .sale-btn { background-color: #fff; color: #007fa8 }
.a-block:hover:last-child .sale-btn { background-color: #fff; color: #F68B1E }

.intro h1.orange-txt { color: #f68b1f; }
.locations { display: grid; grid-template-columns: 1fr 1.3fr; align-items: center; border: 6px solid #3f8da6; padding: 45px 60px; }
.loc-list-flx { display: flex; align-items: stretch; justify-content: flex-end; grid-gap: 60px; }
.loc-list-flx .hor-divider { width: 1px; background-color: #707070; }
.locations .list-circle { height: 27px; width: 27px; border-radius: 50%; border: 3px solid; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; }
.locations .orange .list-circle { border-color: #F68B20; }
.locations .blue .list-circle { border-color: #3f8da6; }
.fs-15 { font-size: 1.5rem; }
.locations .orange, .locations .blue { display: flex; flex-direction: column; grid-gap: 5px; }

.locations .orange > div, .locations .blue > div { display: flex; align-items: center; grid-gap: 10px; font-size: 1.25rem; margin-top: 15px; }
.locations > div > img { height: 100%; width: 100%; }
.container.location-map { max-width: 1671px; width: initial; }

.rev-bar .flx-bx { align-items: center; justify-content: center; gap: 15px; flex-wrap: wrap; }
.rev-bar .google-lnk { display: block; padding: 0px 10px; }

@media screen and (min-width:1470px) {
    .products-section .container { width: 1450px !important; }
}


@media screen and (max-width:1730px) {
    .locations { grid-template-columns: 1fr 1fr; grid-gap: 60px; }
    .loc-list-flx { grid-gap: 60px; flex-direction: column; align-items: flex-start; }
    .loc-list-flx .hor-divider { display: none; }
}


@media screen and (max-width:1230px) {
    .locations { grid-template-columns: 1.2fr 1fr; align-items: flex-start; }
    .loc-list-flx { grid-gap: 60px; flex-direction: row; align-items: flex-start; }
    .loc-list-flx .hor-divider { display: none; }
}


@media screen and (max-width:768px) {
    .locations { grid-template-columns: 1fr; align-items: flex-start; padding: 15px; }
}

html { -webkit-font-smoothing: antialiased; }
body { font-size: 0.8em; font-family: 'Work Sans',sans-serif; color: #666666; background-color: #fff; margin: 0; padding: 0; -webkit-text-size-adjust: 100%; }
img { border: 0; max-width: 100%; height: auto; }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select { background-color: #fff; border: 0; height: 40px; width: 100%; padding: 0 0 0 10px; color: #666; border: 1px solid #e8e8e8; border-radius: 3px; margin-top: 10px; }
textarea { font-family: inherit; background-color: #fff; border: 0; height: 150px; width: 100%; padding: 10px 0 0 10px; color: #666; border-radius: 0; border: 1px solid #e8e8e8; border-radius: 3px; margin: 10px 0; }
input.btn.red { cursor: pointer; padding: 0; line-height: 40px; border: 0; max-width: 270px; background-color: #af3f32; margin: auto; display: block; font-size: 1.15em; -webkit-appearance: none; }
input.btn.red:hover { border: 1px solid #af3f32; background-color: transparent; color: #af3f32; -webkit-appearance: none; }
textarea { display: block; padding: 10px 0 0 10px; }
span.field-validation-error { color: #af3f32; }
.gdpr-form + span.field-validation-error { display: block; max-width: fit-content; padding: 15px; color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; margin-top: 10px; font-weight: bold; position: relative; display: flex; align-items: center; grid-gap: 15px; }
.gdpr-form + span.field-validation-error:after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 4px; background-color: #721c24; }
.gdpr-form + span.field-validation-error:before { display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased; content: "\f071"; font-size: 1.5rem; }
.editor-label { margin: 20px auto 0; position: relative; }
.editor-label label { color: #3f8da6; font-weight: 500; }
.editor-label .req { font-weight: 500; }
.gdpr-form.showrooms { margin: 20px 0; max-width: 300px; font-size: 1.2em; }



.top-msg-banner { background-color: #af3f32; text-align: center; padding: 15px; color: #fff; font-size: 1.6em; position: relative; z-index: 10; }
.top-msg-banner a { color: #fff; text-decoration: underline; cursor: pointer; }
.top-msg-banner a:hover { text-decoration: none; color: #fff; }
.inline-block { display: inline-block; }
.brd-dashed { border: dashed 1px #707070; }

.center-txt { text-align: center; }
.center-block { margin: 0 auto !important; }
.center-img img { margin: 0 auto; }

.teal-txt { color: #3f8da6; }
.red-txt { color: #af3f32; }


.teal-bg { background-color: #3f8da6; }
.orange-bg { background-color: #F68B1E; }


.underline { text-decoration: underline; }

.no-bold { font-weight: normal !important; }
a.button { color: #fff; background-color: #f68b1f; text-decoration: none !important; border-radius: 5px; padding: 15px 30px; min-height: 60px; display: flex; justify-content: center; align-items: center; font-size: 1.2em; }

a.button.blue-btn { background-color: #3f8da6 }

a.button:hover { color: #fff !important; background-color: #9b9b9b }

.ranges-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 30px; }

.grey-flex { display: flex; flex-direction: column; color: #000; grid-gap: 15px; justify-content: space-between; }

.grey-flex h2 { color: #000; font-size: 2.8em; font-weight: 500; }

.ranges-grid .ranges-buttons { display: flex; grid-gap: 15px; color: #fff; font-family: 'Work Sans', sans-serif; font-weight: 500; font-size: 1.2em; }

strong .inline-link { text-decoration: underline; }
strong .inline-link:hover { text-decoration: none; }

.xmas-banner { background-color: #bd081f; text-align: center; padding: 15px; display: none; }
.xmas-banner strong { color: #fff; }

.horizonplus { background-color: #bd081f; padding-left: 24%; padding-right: 24%; padding-bottom: 35px; }
.bghorizonplus { text-align: center; color: #fff !important; }
.sizeh { font-size: 3em; padding-top: 20px; }
.sizeh2 { font-size: 1.5em }

a.inline-link { text-decoration: underline; }
a.inline-link:hover { text-decoration: none; }

.left-txt { margin: 20px auto 0; font-size: 1.2em; }
.left-txt .txt { font-family: 'Work Sans', sans-serif; }
.left-txt h2 { color: #3f8da6; }

h2.bl { color: #3f8da6; }

.inline-link { text-decoration: underline; }
.inline-link:hover { text-decoration: none; }

.center-btn { margin: 0 auto !important; }

.call-to-action.btm { text-align: center; padding-bottom: 15px; }
.call-to-action.btm a { margin: 15px auto 15px auto; border: 1px solid #3f8da6; display: inline-block; text-align: center; font-size: 1.3em; background-color: #3f8da6; color: #fff; position: relative; z-index: 0; padding: 15px; }
.call-to-action.btm a:before { z-index: 1; content: ''; background: transparent; border: 1px solid #3f8da6; top: -7px; right: 7px; bottom: 7px; left: -7px; position: absolute; }
.call-to-action.btm a:hover { color: #3f8da6; background-color: #fff; }
.call-to-action.btm a:hover:before { display: none; }

.call-to-action.aqua-bg { background-color: #3f8da6; padding: 30px 0px; }

.call-to-action.aqua-bg .btn.wide:hover { background-color: #f68b1e; }
.call-to-action.aqua-bg .btn.wide:hover:before { border: 1px solid #f68b1e; }
.call-to-action .btn.wide { height: auto; width: 100%; max-width: 450px; margin: 0 auto !important; display: block; }
.call-to-action .btn.center { float: none !important; }
.call-to-action.white { background-color: #fff; }

.purp-bg { background-color: #9c5d89; }

.input-validation-error { background-color: #fee !important; }

.stockists-sell h1 { color: #3F8DA6; text-align: center; font-size: 2.8em; padding-top: 20px; padding-bottom: 20px; }
.stockists-sell h3 { font-size: 1.8em; color: #007FA8; text-align: left; }
.stockists-sell textarea { height: 90px; }
.stockists-sell .ftext { font-size: 1.4em; margin-bottom: 30px; }
.stockists-sell .subheader-container { text-align: center; width: 70%; margin: 0px auto; margin-top: 120px; background-color: white; padding: 40px; padding-top: 10px; padding-bottom: 4px; }
.stockists-sell .subheader-container h2 { background-color: white !important; color: #007FA8 !important; }
.stockists-sell .inner-text.home--offer--h1 { max-width: 100%; }
.stockists-sell .btn.orange { margin-top: 20px; }
.stockists-sell .product-listing { background-color: #efefef; padding: 8px; margin-bottom: 10px; padding-bottom: 15px; }
.stockists-sell .product-listing .text { text-align: center; margin-top: 5px; font-size: 1.2em; font-weight: 800; margin-bottom: 10px; }
.stockists-sell .product-listing .description { height: 19px; font-weight: 700; font-size: 1.3em; }
.stockists-sell .product-listing .btn.aqua { text-align: center; margin: 0px auto; margin-top: 16px; font-weight: 700; margin-bottom: 5px; font-size: 1.1em; }
.stockists-sell .product-listing .btn span { z-index: 1; position: relative; }
.stockists-sell li { margin-bottom: 20px; margin-top: 10px; }
.stockists-sell .ftext a { text-decoration: underline; }
.stockists-sell .ftext a:hover { color: #f68b1f; }
.stockists-sell .options-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; }
.stockists-sell textarea { border: solid 1px #3f8da6; border-radius: 5px; }
.stockists-sell .description { display: flex; justify-content: center; align-items: center; min-height: 50px; }
.stockists-sell .white-section .ftext { font-size: 1.4em; text-align: left; font-weight: 300; margin-bottom: 40px; }
.stockists-sell .white-section .ftext .link-option .etext { float: left; font-weight: bold; font-size: 1.2em; white-space: nowrap; text-align: left; color: #e3e3e3; margin-bottom: 10px; }
.stockists-sell .white-section .ftext .link-option-example .etext { font-weight: bold; font-size: 1.2em; white-space: nowrap; text-align: left; color: #3f8da6; margin-bottom: 10px; width: 100%; }
.stockists-sell .white-section .ftext .link-option-example .example { display: flex; justify-content: center; text-align: center; min-width: 250px; margin: 0px auto; }
.stockists-sell .white-section .ftext .link-option-example .example img { margin: 0 auto; }
.stockists-sell .white-section .ftext .link-option-example .example a:hover { color: #3f8da6; }
.stockists-sell .white-section, .stockists-sell .white-section .ptext { text-align: center; font-weight: 300; }
.stockists-sell .stockists-review { width: 80%; margin: 0px auto; }
.stockists-sell .stockists-review .light-grey-box { min-height: 120px; }

.offer-banner { background-color: #af3f32; margin: 15px 0px; padding: 20px 15px; text-align: center; color: #fff; font-size: 1.55em; }
.video-banner { cursor: pointer; background-color: #007FA8; margin: 15px 0px; padding: 20px 15px; text-align: center; color: #fff; font-size: 1.55em; }
.offer-banner a { color: #fff; text-decoration: underline; }
.offer-banner a:hover { text-decoration: none; color: #fff; }

.navimage-limiter { max-height: 160px; }

.inner .inner-image-abs { position: absolute; top: 17.5%; left: 52.5%; max-width: 630px; z-index: 2; }
.inner .inner-image-abs img { min-width: 570px; min-height: 270px; }

.link-tofront { position: relative; z-index: 3; }

.center-icon { margin: 0px auto; }

.icon-text { text-align: center; margin-top: 15px; font-weight: bolder; font-size: 1.9em; color: #3F8CA6; font-family: Calibri; }

.header-link { background-color: white; color: #007FA8; width: 130px; padding: 8px; margin-top: 10px; text-decoration: underline; font-weight: 800; white-space: nowrap; }

.unclickable-link { color: #007FA8; text-decoration: underline; }
.unclickable-link:hover { color: #f68b1f; }

.footer .please-note { font-weight: bold; position: relative; padding-left: 30px; }
.footer .please-note i { position: absolute; left: 0px; top: 50%; transform: translateY(-50%); font-size: 20px; }

.g-recaptcha div, .g-recaptcha { height: 40px !important; width: 230px !important; border-radius: 3px; }
.g-recaptcha { height: 40px; overflow: hidden; position: relative; border: 1px solid #cbcbcb; background-color: #f9f9f9; }
.g-recaptcha div { margin-top: -17px; }

#video iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }
iframe#video, #video object, #video embed, #placeholder img { display: block; width: 480px; height: 270px; }
.video-bg { background-image: url(images/banners/glass-verandas-banner.jpg); overflow: hidden; width: 480px; height: 270px; background-size: cover; background-position: center; }
.video-bg.rb { background-image: url(images/sunspace-roof-blinds.jpg); height: 325px; }
.video-bg.li { background-image: url(images/garden-room-lighting.jpg); height: 325px; }
.videobanner .text { position: absolute; top: 5%; width: 100%; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); text-transform: uppercase; font-family: 'futura-pt', sans-serif; padding: 0 15px; }
.container.videoapsire { margin-top: 16.6%; }

.loading-help { position: relative; }
.loading-help .loading-special { position: relative; display: block; background-color: #af3f32; border: 0; max-width: 270px; margin: 0 auto; font-size: 1.3em; height: 50px; line-height: 50px; }
.loading-help .surround { text-align: center; }
.loading-help .new-loader { display: inline-block; color: #ffffff; font-size: 3px; margin: 4px; width: 1em; height: 1em; border-radius: 50%; position: relative; text-indent: -9999em; -webkit-animation: load4 1.3s infinite linear; animation: load4 1.3s infinite linear; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); margin-bottom: 2px; }
.loading-help .load-text { line-height: 40px; display: inline-block; color: #fff; text-align: center; -webkit-appearance: none; font-weight: 500; margin-left: 15px; font-size: 1em; }

#headerleft .disruption-tag { color: #fff; position: absolute; top: 35px; font-weight: bold; font-size: 18px; left: 365px; width: 400px; font-family: 'Work Sans', sans-serif; }

.emessage { position: absolute; left: 50%; -ms-transform: translate(-50%,0); -o-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -webkit-transform: translate(-50%,0); transform: translate(-50%,0); z-index: 1; }
.roundel { position: absolute; top: 28%; right: 0px; }
.roundel.vid { top: 42%; cursor: pointer; }
.roundel.novid { top: 52%; }
.roundel.vid .circle { background-color: #3f8da6; }
.roundel.novid .circle { background-color: #3f8da6; }
.roundel.vid .circle i { font-size: 4em; display: block; margin-bottom: 10px; }
.roundel.novid .circle i { font-size: 4em; display: block; margin-bottom: 10px; }
.roundel .circle { background-color: #f68b1f; color: #fff; border-radius: 100%; height: 180px; width: 180px; text-align: center; font-size: 1.15em; position: relative; }
.roundel .circle a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 100%; z-index: 1; }
.roundel .circle span { display: block; padding: 15px; position: absolute; top: 50%; left: 50%; width: 100%; -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); font-weight: 600; color: #fff; }
.roundel .circle span p { margin: 0px 0px; min-height: 10px; height: auto; display: block; }
.roundel .circle span p span { padding: 0px !important; position: static; transform: none; }
.circle.no-fill img { border-radius: 100%; }
.focused { box-shadow: 0px 0px 5px 0px #50afd0 !important; border: solid 1px #50afd0; }
h1 { margin: 10px 0 15px 0; color: #333; font-size: 2em; }
h2 { margin: 10px 0 10px 0; color: #333; font-size: 1.8em; }
h2.aqua { color: #3f8da6; }
h2.lg { font-size: 2.3em; }
.fa, .fab, .fal, .far, .fas { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; text-rendering: optimizeLegibility; }

.orange-txt { color: #f68b1e; }

.btn { width: 270px; height: 50px; line-height: 50px; display: block; text-align: center; font-size: 1.3em; }
.btn.long-name { width: auto; max-width: max-content; height: auto; padding: 0 10px; }
.btn.white { background-color: #fff; margin-top: 45px; color: #3f8da6; position: relative; }
.whiteredbtn { color: #bd081f !important; margin-left: 28.33%; }
.btn.white:before { content: ''; background: transparent; border: 1px solid white; top: -7px; right: 7px; bottom: 7px; left: -7px; position: absolute; }
.btn.aqua { background-color: #3f8da6; color: #fff; position: relative; margin-left: 8px; }
.btn.aqua:before { content: ''; background: transparent; border: 1px solid #3f8da6; top: -7px; right: 7px; bottom: 7px; left: -7px; position: absolute; z-index: 0; }
.btn.red { background-color: #af3f32; color: #fff; position: relative; margin-left: 8px; }
.btn.red:before { content: ''; background: transparent; border: 1px solid #af3f32; top: -7px; right: 7px; bottom: 7px; left: -7px; position: absolute; }
.btn.white:hover:before { border: 1px solid #3f8da6; }
.btn.white:hover { background-color: #3f8da6; color: #fff; }
.btn.white:hover { background-color: #3f8da6; color: #fff; }
.btn.white.whiteredbtn:hover { background-color: #fff !important; color: #000 !important; }
.btn.white.whiteredbtn:hover:before { border: 1px solid #fff; }



.btn.aqua:hover:before { border: 1px solid #666666; }
.btn.aqua:hover { background-color: #666666; }
.btn.red:hover:before { border: 1px solid #621b12; }
.btn.red:hover { background-color: #621b12; }

.btn.orange { background-color: #f68b1f; color: #fff; position: relative; margin-top: 50px; margin-left: 8px; }
.btn.orange:hover { background-color: #fff; color: #f68b1f; }
.btn.orange:hover:before { border: 1px solid #fff; }

.btn.orange.aqua-hov:hover { background-color: #3f8da6; color: #fff; }
.btn.orange.aqua-hov:hover:before { border: 1px solid #3f8da6; }

.btn.orange:before { content: ''; background: transparent; border: 1px solid #f68b1f; top: -7px; right: 7px; bottom: 7px; left: -7px; position: absolute; }

.btn.btn-sml { width: 200px; margin-top: 10px; height: 45px; }

.btn.full-w { width: 100%; }


.btn.navbtn { border-radius: 5px; width: 150px; font-size: 1em; margin: 0px; height: 55px; display: flex; justify-content: center; align-items: center; font-family: 'Work Sans', sans-serif; font-weight: 600; }
.btn.navbtn:before { display: none; }

.btn.navbtn.white { border: 3px solid #007FA8; color: #007FA8; font-size: 1.2em; font-weight: 500; }

.btn.alt { border-radius: 5px; width: 150px; margin: 0px; height: 55px; display: flex; justify-content: center; align-items: center; font-family: 'Work Sans', sans-serif; font-weight: 600; }
.btn.alt:before { display: none; }

.text-center { text-align: center; }
.text-start { text-align: start !important; }
.italic { font-style: italic; }
.m-auto { margin: 0 auto; }


a:hover { color: #3f8da6; }
.split.images .overlay a:hover { color: #f68b1e; }
.overtop .grey-box .bottom a:hover { color: #f68b1e; }
.views .grey-box .bottom a:hover { color: #f68b1e; }
a.prod-item:hover img { opacity: 0.7; }
.innerdrop a:hover img { opacity: 0.7; }


a { text-decoration: none; color: #3f8da6; }
a.browse { font-weight: bold; text-decoration: underline; }
.topmasthead { position: relative; z-index: 10; }
.banner { display: flex; justify-content: center; align-items: center; }

.banner.roof-blinds { height: 600px; background-size: cover; background-position: top; background-image: url(images/banners/sue-minshull2.jpg); position: relative; background-color: #fff; }
.banner.roof-blinds:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #0000007a; }
.banner.roof-blinds.li { height: 600px; background-size: cover; background-position: center; background-image: url(images/banners/gr-lighting-banner.jpg); }








@media screen and (max-width:1228px) {
    .header-grid { grid-template-columns: 1.5fr 1fr 1fr; align-items: center; justify-content: space-between; padding-top: 20px; font-size: 1.5em; color: #fff; }
}

@media screen and (max-width:992px) {
    .ranges-grid { display: grid; grid-template-columns: 1fr; grid-gap: 30px; }
    .section.flx-bx.fl-al-stretch.fl-wrap { flex-direction: column-reverse; }
}


@media screen and (max-width:549px) {
    .header-grid { grid-template-columns: 1fr 1fr; align-items: center; justify-content: space-between; padding-top: 20px; font-size: 1.5em; color: #fff; }

    .header-grid .esta { grid-row: 2/auto; grid-column: 2/3; margin-top: 15px; }
}



.footer-logo-flex { display: flex; align-items: center; grid-gap: 30px; }


@media screen and (max-width:1229px) {
    .footer-logo-flex { flex-direction: column; align-items: flex-start; grid-gap: 15px; }
}

@media screen and (max-width:767px) {
    .footer-logo-flex { align-items: center; grid-gap: 15px; }
}


.banner .txt-bx { color: #fff; font-weight: 400; }
.lpbanner { display: flex; justify-content: center; align-items: center; background-position: center; background-repeat: no-repeat; background-size: cover; }
.masthead { padding: 0; z-index: 9; }
.container.navigation { padding: 0; margin-top: 10px; }
.mobile-overlay { display: none; background-color: #3f8da6; z-index: 1; height: 100%; width: 100%; position: fixed; }
#content { min-height: 500px; }
.phone-icon, .menuicon { display: none; }
.phone-icon a { display: block; height: 20px; font-size: 1.9em; color: #2A2A2A; height: 100%; }
.footer { background-color: #787878; padding-top: 50px; padding-bottom: 40px; color: #fff; font-size: 1.2em; font-family: 'Work Sans', sans-serif; }
.footer #footnoteright { text-align: right; }
.footer a { color: #fff; font-weight: bold; font-size: 1.2em; }
.footer .directions { text-transform: uppercase; font-family: 'Work Sans', sans-serif; font-size: 0.85em; font-weight: 600; }
.footer .socialbtns a { font-weight: normal; }

.footer .footer-logo { margin-top: 20px; }
.footer .footer-logo .socialbtns i { font-size: 1.6em; margin: 5px; }
.footer .copyright, .footer .copyright a { font-size: 0.8em; }
.footer .designer { float: right; font-size: 0.8em; }
.footer .callinfo { font-size: 0.8em; }
.OK { padding: 10px; border: 1px solid #339933; color: #339933; background-color: #eeffee; margin: 10px 0; }
.KO { padding: 10px; border: 1px solid #993333; color: #993333; background-color: #ffeeee; margin: 10px 0; }
.Generic { padding: 10px; border: 1px solid #333; color: #333; background-color: #ccc; margin: 10px 0; }
.sitemap { font-size: 1.2em; font-family: 'Work Sans', sans-serif; }
.ajaxLoader { min-height: 40px; line-height: 35px; text-align: center; }
.ajaxLoader i { display: inline-block; color: #729bef; font-size: 5px; margin: 0; width: 1em; height: 1em; border-radius: 50%; -o-animation: load4 1.3s infinite linear; -moz-animation: load4 1.3s infinite linear; -webkit-animation: load4 1.3s infinite linear; animation: load4 1.3s infinite linear; content: ""; }
.background-lazy { position: relative; background-color: transparent; background-image: none !important; }
.background-lazy:before { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); display: inline-block; color: #2895d8; font-size: 5px; margin: 0; width: 1em; height: 1em; border-radius: 50%; -o-animation: load4 1.3s infinite linear; -moz-animation: load4 1.3s infinite linear; -webkit-animation: load4 1.3s infinite linear; animation: load4 1.3s infinite linear; content: ""; }


@keyframes load4 {
    0%,100% { box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; }
    12.5% { box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
    25% { box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }
    37.5% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; }
    50% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; }
    62.5% { box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; }
    75% { box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; }
    87.5% { box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; }
}

.inner .inner-text h1, .inner .inner-text .inner-text--sub { margin-left: 15px; }
.inner .inner-text h1.center-block { margin: 0 auto !important; }
h1 span, .inner-text--sub span { background: #3F8CA6; color: #FFF; box-shadow: 15px 0 0 #3F8CA6, -15px 0 0 #3F8CA6; padding: 0px; text-shadow: none; font-weight: 600; }
.inner-text--sub span { padding: 3px 0px; }
.Videoplayb { height: auto; }



.section.heats .dw-sm-5, .section.heats .dw-sm-7 { padding: 0; height: 340px; }

.home-banner { display: flex; justify-content: center; height: 740px; align-items: center; }
.outdoor-structures { background-image: url(images/banners/aspire-home-banner.jpg); height: 740px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.glass-verandas { background-image: url(images/banners/glass-verandas-banner.jpg); min-height: 480px; background-size: cover; background-repeat: no-repeat; background-position: 50%; position: relative; padding: 30px 0px; }

.outdoor-structures.banner.home-banner { position: relative; }
.outdoor-structures.banner.home-banner .finance-roundel { position: absolute; bottom: 35px; left: 50px; transform: rotate(-15deg); opacity: 0.9; }


.garden-rooms { background-image: url(images/banners/garden-rooms-banner.jpg); height: 480px; background-size: cover; background-repeat: no-repeat; background-position: 50%; display: flex; justify-content: space-between; background-blend-mode: darken; align-items: center; }
.show-rooms { background-image: url(images/banners/showrooms.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.showroom-cardiff { background-image: url(images/banners/cardiff.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; position: relative; }
.showroom-cardiff::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(30,30,30); background: linear-gradient(180deg, rgba(30,30,30,1) 0%, rgba(30,30,30,0.44647233893557425) 100%); }
.showroom-slough { background-image: url(images/banners/slough.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.showroom-stalbans { background-image: url(images/banners/stalbans.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.request-quote { background-image: url(images/banners/quote.jpg); height: 185px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.garden-awnings { background-image: url(images/banners/awnings.jpg); height: 480px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.about-us { background-image: url(images/banners/about-us.jpg); height: 370px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.why-sunspaces { background-image: url(images/banners/why-sunspaces.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.commercial { background-image: url(images/banners/commercial.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.planning-advice { background-image: url(images/banners/planning-advice.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.technical-features { background-image: url(images/banners/technical-features.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.care { background-image: url(images/banners/reviews.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.installation-resources { background-image: url(images/banners/installation-resources.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.installation-fitting-service { background-image: url(images/banners/installation-fitting-service.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.heaters-range { background-image: url(images/banners/heaters-range.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.faqs { background-image: url(images/banners/faqs.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.pitched { background-image: url(images/banners/pitched-roof-carport.jpg); height: 480px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.kids { background-image: url(images/banners/kids-spaces.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.lounge { background-image: url(images/banners/lounge.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.dining { background-image: url(images/banners/outdoor-dining.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.hottub { background-image: url(images/banners/hot-tubs.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.storage { background-image: url(images/banners/storage.jpg); height: 390px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.veranda-gal { background-image: url(images/banners/veranda-gallery.jpg); height: 480px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.locations-banner { background-image: url(images/locations-banner.jpg); height: 480px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.awnings-gal { background-image: url(images/banners/garden-awning-lp.jpg); height: 480px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.carports-gal { background-image: url(images/banners/carport-banner.jpg); height: 480px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.garden-gal { background-image: url(images/banners/garden-room-gallery.jpg); height: 480px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.reviews-ss { background-image: url(images/banners/review-banner.jpg); height: 480px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.case-study { height: 325px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.gym { background-image: url(images/banners/outdoor-gym.jpg); height: 480px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.carportstop { background-image: url(images/banners/carport-banner.jpg); height: 480px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }




.carousel { height: 500px; margin-bottom: 60px; }
.carousel-caption { z-index: 10; }
.carousel .item { height: 500px; background-color: #777; }
.carousel-inner > .item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 500px; }

.intro.video { max-width: 550px; margin: 15px auto; }
.video-container i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ff0000; cursor: pointer; display: inline-block; font-size: 4em; }
.video .video-container i:hover { color: #3f8da6; }

.video-container iframe, .video-container object, .video-container embed { border: none; position: absolute; height: 100%; width: 100%; left: 0; top: 0; }
#lightbox-close { float: right; margin: 25px; font-size: 3em; color: #fff; cursor: pointer; }
.video-container { padding-bottom: 56.25%; position: relative; padding-top: 30px; overflow: hidden; height: 0; }

.playvid { cursor: pointer; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }

.playvid:hover i { color: #666666; }

.lightbox-container { position: relative; max-width: 960px; margin: 7% auto; display: block; padding: 0 3%; height: auto; z-index: 10; }
.lightbox-content { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
.lightbox { background-color: rgba(0, 0, 0, 0.8); overflow: scroll; position: fixed; display: none; z-index: 9999; bottom: 0; right: 0; left: 0; top: 0; }
.outdoor-structures.banner .container, .banner .container.internal { position: static !important; }
.banner .container { position: relative; }
.topstick .masthead { }
.notinstock { background-color: #3f8da6; text-align: center; position: fixed; width: 100%; z-index: 999; height: 69px; }
.notinstock a { color: #fff; display: block; font-size: 1.3em; padding: 17px 5px 0 40px; }
.notinstock a:hover span { text-decoration: underline; }
.notinstock a span { font-weight: 600; }
.notinstock i { position: absolute; margin-left: -45px; border: 3px solid #fff; border-radius: 100%; padding: 5px; margin-top: -5px; width: 30px; height: 30px; line-height: 15px; }

.blue-nav { cursor: auto; font-weight: 700; }
.header-buttons { position: absolute; bottom: 45%; }
.inner { position: relative; display: flex; align-items: center; justify-content: space-between; }
.inner.centered { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; }

.inner.centered .section { display: flex; align-items: center; justify-content: center; text-align: center; }
.home-banner .inner { justify-content: center; align-items: center; }





.fnt-ws { font-family: 'Work Sans', sans-serif; font-weight: 400; }

.inner .inner-text { }

.inner .inner-text.design { max-width: 795px; }
.inner .inner-text.center { max-width: 100%; text-align: center; width: 100%; }
.inner .inner-text h1 { color: #fff; font-size: 3.7em; text-shadow: 0 0 8px #000; }
.inner .inner-text .dw-md-4 { width: 33.33333333333333%; }



.banner .inner .inner-text.blocklnk { background-color: #3f8da6; min-width: 605px; padding: 15px 30px; display: block; }
.banner .inner .inner-text.blocklnk .btn { margin-top: 15px; border: 1px solid #fff; font-size: 1.5em; }
.banner .inner .inner-text.blocklnk:hover .btn { background-color: transparent; color: #fff; }
.banner .inner .inner-text.blocklnk:hover .btn:before { display: none; }

.banner .inner .inner-text.blocklnk.aspire { background-color: #F68B1E; padding: 0px; }
.banner .inner .inner-text.blocklnk.aspire h1 { background-color: #fff; color: #F68B1E; padding: 15px; margin: 0px; }
.banner .inner .inner-text.blocklnk.aspire h1 span { background-color: #fff; color: #F68B1E; box-shadow: none; }
.banner .inner .inner-text.blocklnk.aspire .btn:before { display: none; }
.banner .inner .inner-text.blocklnk.aspire .btn { height: 50px; margin: 30px auto; padding: 0px 30px; display: flex; justify-content: center; align-items: center; color: #F68B1E; font-size: 1.8em; }
.banner .inner .inner-text.blocklnk.aspire:hover .btn { background-color: transparent; color: #fff !important; }



.banner-txt { font-size: 2.5em; }
.banner-txt h2 { font-weight: 400; }
.banner-txt .btn { font-size: 0.7em; font-family: 'Work Sans', sans-serif; font-weight: 400; border-radius: 5px; width: fit-content; line-height: initial; height: fit-content; padding: 15px; }
.banner-txt .btn:before { display: none; }


.top-price { }
.top-price h1 { display: block; background-color: #3f8da6; margin: 0px !important; padding: 10px; }
.top-price h1 span { box-shadow: none; background-color: transparent; }
.top-price .price { color: #fff; background-color: #f68b1e; padding: 10px; text-align: center; font-size: 1.9em; }


.inner .inner-text .dw-sm-6.glass { width: auto; }
.inner .inner-text .dw-sm-6.right { padding: 0; }
.inner .inner-text .inner-text--sub { color: #fff; font-size: 1.9em; font-weight: normal; margin-top: 30px; text-shadow: 0 0 8px #000; }
.inner .inner-text--link { margin-top: 65px; }
.inner .inner-text--link a { color: #fff; font-size: 1.2em; }
.inner .inner-text--link img { margin: 0 15px; display: inline-block; }
.inner .inner-text--link.gs { margin-right: 25px; }
.inner .inner-text--link.vid { cursor: pointer; color: #fff; font-size: 1.2em; }
.inner .inner-text--link.vid:hover { color: #f68b1e; }
.cs-page h2 { text-align: left; color: #fff; font-size: 1.6em; }
.inner .inner-image { top: 18%; right: 0; z-index: 2; overflow: hidden; }
.overtop { margin-top: -100px; }
.container.virtual { padding-bottom: 40px; }
.virtual .overtop { margin-top: -48px !important; }
.overtop .overtop-img { background-repeat: no-repeat; background-size: cover; height: 225px; }
.overtop .overtop-img.one { background-image: url(images/garden-glass-verandas.jpg); }
.overtop .overtop-img.two { background-image: url(images/garden-rooms.jpg); }
.overtop .overtop-img.three { background-image: url(images/electric-awnings.jpg); }


.banner.bespoke { height: 600px; }
.banner.bespoke .inner-image { max-height: 320px; top: 21%; }
.banner.bespoke .banner-txt { font-weight: 400; color: #fff; font-family: 'Work Sans', sans-serif; font-size: 1.3em; }
.banner.bespoke .inner-text h1 { font-size: 3.4em; }
.banner.bespoke .inner-text { padding-right: 15px; }
.banner.bespoke .inner-text strong a { color: #fff; }
.banner.bespoke .inner-text strong a:hover { text-decoration: underline; }

.grey--span { font-size: 0.95em !important; font-weight: 700 !important; margin-top: 7px !important; }
.overtop .grey-box { color: #fff; background-color: #666666; padding: 20px; min-height: 200px; height: 100%; -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.1); box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.1); }
.overtop .grey-box h2 { margin: 0; color: #fff; font-size: 1.8em; }
.overtop a:hover .bottom { color: #f68b1e; }
.overtop .grey-box span { font-size: 1.15em; color: #fff; }
.overtop .grey-box .bottom { color: #fff; text-transform: initial; font-family: 'Work Sans', sans-serif; font-weight: 500; font-size: 1.2em; position: absolute; bottom: 18px; }
.body-internal { margin: 15px; }
.body-internal .dw-md-6.right { float: right; }
.body-internal .dw-md-6.left { float: left; }
.split { margin-top: 50px; }
.split.land-page { margin-top: 0; }
.split h2 { color: #3f8da6; margin-top: 0; }
.split.internal span { font-size: 1.15em; }
.split span { font-family: 'Work Sans', sans-serif; color: #666666; font-size: 1.15em; }
.split img.right { float: right; }
.split .btn.verand { width: 290px; }
.split .btn { width: 230px; }
.split .btn.aqua { margin: 20px 8px; }
.split .btn.long { width: 320px; }
.split .btn.red { margin: 20px 8px; }
.split.others { margin-bottom: 30px; }
.split.others span { font-size: 1.2em; }
.split.images.view { margin-bottom: 25px; }
.split.images { margin-top: 25px; }
.split.images .underlay { background-repeat: no-repeat; background-size: cover; height: 215px; }
.split.images .underlay.one { background-image: url(images/free-3d-design.jpg); }
.split.images .underlay.two { background-image: url(images/installation-services.jpg); }
.split.images .overlay { position: absolute; bottom: 20px; left: 40px; background-color: rgba(107,106,105,0.9); color: #fff; min-width: 345px; padding: 15px; }
.split.images .overlay h3 { font-size: 1.8em; margin-top: 0; text-transform: capitalize; }
.split.images .overlay div { color: #fff; font-family: 'Work Sans', sans-serif; font-weight: 500; font-size: 1.1em; }
.split.images .overlay a { color: #fff; }
.split.images a:hover .overlay div { color: #f68b1e; }
.split.images.about { margin: 30px 0; }
.split .section.pa .dw-md-6 { padding: 0; }
.split .section.pa .inner-bg { background-color: #f5f5f5; min-height: 360px; padding: 0 15px 0 0; }
.split .section.pa .inner-bg h2 { margin: 20px 0; padding: 15px; }
.split .section.pa .inner-bg .btn { margin-left: 25px; }
.split .section.pa .inner-bg img { left: 0; }
.section.homevis { max-width: 600px; margin: auto; }
.reviews { margin-top: 40px; }
.reviews h2 { color: #3f8da6; text-align: center; }
.reviews .light-grey-box { background-color: #efefef; padding: 25px; margin-top: 20px; -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2); box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2); min-height: 340px; }
.reviews .light-grey-box .stars { margin-bottom: 15px; }
.reviews .light-grey-box .stars i { color: #f68b1e; font-size: 1.3em; margin: 5px; }
.reviews .light-grey-box span { color: #3f8da6; font-size: 1.05em; }
.reviews .light-grey-box strong { font-weight: 600; font-family: 'Work Sans', sans-serif; color: #666666; }
.split-double { margin-top: 50px; }
.split-double h2 { padding: 0 15px; color: #3f8da6; }
.split-double h3 { color: #3f8da6; font-size: 1.8em; }
.split-double .verandas { background-repeat: no-repeat; background-size: cover; height: 260px; background-image: url(images/verandas.jpg); background-position: center; margin: 15px 0; }
.split-double .rooms { background-repeat: no-repeat; background-size: cover; height: 260px; background-image: url(images/rooms.jpg); background-position: center; margin: 15px 0; }
.split-double .standing { background-repeat: no-repeat; background-size: cover; height: 260px; background-image: url(images/free-standing-veranda.jpg); background-position: center; margin: 15px 0; }
.split-double .service { background-repeat: no-repeat; background-size: cover; height: 260px; background-image: url(images/installation-service.jpg); background-position: center; margin: 15px 0; }
.split-double .materials { background-repeat: no-repeat; background-size: cover; height: 260px; background-image: url(images/choose-materials.jpg); background-position: center; margin: 15px 0; }

.split-double .size { background-repeat: no-repeat; background-size: cover; height: 260px; background-image: url(images/select-your-size.jpg); background-position: center; margin: 15px 0; }
.split-double .free-standing { background-repeat: no-repeat; background-size: cover; height: 260px; background-image: url(images/free-standing-rooms.jpg); background-position: center; margin: 15px 0; }
.split-double .optional { background-repeat: no-repeat; background-size: cover; height: 260px; background-image: url(images/optional-extras.jpg); background-position: center; margin: 15px 0; }
.split-double .installation, .video-container.installation { background-repeat: no-repeat; background-size: cover; height: 260px; background-image: url(images/fitting-installation.jpg); background-position: center; margin: 15px 0; }
.centertext { text-align: center }

.video-container.sidepannel { background-repeat: no-repeat; background-size: cover; height: 260px; background-image: url(images/glass-room-with-privacy-walls-vid.jpg); background-position: center; margin: 15px 0; }
.sidepannel2 { background-repeat: no-repeat; background-size: cover; height: 260px; background-image: url(images/glass-room-with-privacy-walls.jpg); background-position: center; margin: 15px 0; }

.split-double span { font-family: 'Work Sans', sans-serif; font-weight: normal; font-size: 1.2em; }
.split-double .around { margin: 20px auto; }
.sunspaces.case { margin: 45px auto; }
.sunspaces { margin-top: 100px; margin-bottom: 50px; }
.sunspaces h2 { color: #3f8da6; }
.sunspaces .under { font-family: 'Work Sans', sans-serif; color: #666666; font-size: 1.15em; max-width: 400px; margin-bottom: 30px; margin-top: 20px; }
.sunspaces .greybx { background-color: #f5f5f5; padding: 30px 55px; }
.sunspaces .overlap { background-repeat: no-repeat; background-size: cover; height: 370px; width: 670px; float: right; background-image: url(images/outdoor-sunspaces.jpg); margin-top: -25px; }
.prodslider, .lightslider, .shadeslider, .heatslider { margin-top: 40px; padding: 0px 30px; }
.prodslider .bx-wrapper .bx-controls-direction a.fa-angle-right, .heatslider .bx-wrapper .bx-controls-direction a.fa-angle-right, .lightslider .bx-wrapper .bx-controls-direction a.fa-angle-right, .shadeslider .bx-wrapper .bx-controls-direction a.fa-angle-right { right: -40px; z-index: 0; }
.prodslider .bx-wrapper .bx-controls-direction a.fa-angle-left, .heatslider .bx-wrapper .bx-controls-direction a.fa-angle-left, .lightslider .bx-wrapper .bx-controls-direction a.fa-angle-left, .shadeslider .bx-wrapper .bx-controls-direction a.fa-angle-left { left: -38px; z-index: 0; }
.prodslider .prod-item img, .lightslider .prod-item img, .shadeslider .prod-item img, .heatslider .prod-item img { margin: auto; display: block; }
.prodslider .prod-item, .shadeslider .prod-item, .lightslider .prod-item, .heatslider .prod-item { float: left; width: 33.33%; }
.colour-options .co { float: left; }
.prodslider .title, .lightslider .title, .shadeslider .title { color: #666666; max-width: 120px; text-align: center; margin: 10px auto 0 auto; display: block; font-weight: 600; }
.prodslider h2 { color: #3f8da6; text-align: center; font-size: 1.7em; margin-bottom: 15px; }

.intro.land-page { margin-top: 0; }
.intro.land-page .description.land-page { text-align: start; }
.prodslider.category { margin: 30px auto; }
.services { margin: 50px auto; }
.services img { display: block; margin: auto; }
.services strong { text-align: center; margin: 15px auto; display: block; font-size: 1.3em; max-width: 133px; color: #666666; }
.services strong em { font-size: 0.7em; }
.call-to-action { background-color: #efefef; }
.call-to-action .cta { margin: 25px 0; line-height: 50px; font-size: 1.4em; font-weight: bold; }
.call-to-action.heater .cta { line-height: 35px; text-align: center; }
.call-to-action .btn.aqua, .call-to-action .btn.orange { margin: 25px 0; float: right; }
.call-to-action h2 { font-size: 2em; font-weight: bold; color: #666666; text-align: center; margin: 25px auto; }

.intro { margin-top: 40px; position: relative; z-index: 1; }
.intro h2, .intro h1 { color: #3f8da6; text-align: center; font-size: 2.8em !important; margin-bottom: 25px !important; }
.intro .description { font-size: 1.4em; text-align: center; margin: 20px auto; font-family: 'Work Sans', sans-serif; max-width: 790px; }
.intro .description.wide { max-width: 830px; }
.intro .description a { cursor: pointer; }

.intro.product .description { text-align: left; }
.intro.product .description.center-txt { text-align: center; }
.intro .description span { color: #666; font-weight: 600; }
.intro .description span i { margin-right: 15px; color: #3f8da6; }
.intro .description.view { max-width: 680px; }
.intro .grey-box { background-color: #f5f5f5; padding: 20px; min-height: 200px; }
.item { margin: 30px 0; }
.item .thumbnails { margin-top: 30px; }
.item .thumbnails .overlay { z-index: 1; background-color: #000; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5)"; filter: alpha(opacity=.5); position: absolute; height: 100%; width: 100%; top: 0; left: 0; }
.item .thumbnails .view { position: relative; display: block; }
.item .thumbnails .view-icon { position: absolute; top: 40px; z-index: 2; left: 60px; }
.item .thumbnails .view-more { position: absolute; bottom: 30px; left: 45px; color: #fff; z-index: 2; font-family: 'Work Sans', sans-serif; font-size: 1.3em; text-align: center; }
.item .description { font-family: 'Work Sans', sans-serif; font-size: 1.15em; }
.item .grey-box { margin-top: 25px; background-color: #f5f5f5; padding: 20px; min-height: 240px; }
.item .grey-box .item-price.one { margin-bottom: 20px; }
.item .grey-box .item-price div { font-size: 1.4em; }
.item .grey-box .item-price .title { color: #3f8da6; font-size: 1.6em; display: block; font-weight: bold; }
.item .grey-box.compact .item-price div { font-size: 1.1em; }
.item .grey-box.compact .prodtitle { display: block; font-size: 1.2em; font-weight: bold; margin: 15px 0; }
.item .grey-box.compact { position: relative; }
.item .grey-box.compact em { position: absolute; right: 35px; bottom: 35px; font-style: normal; }
.item .grey-box.compact .prodtitle span { font-weight: normal; font-size: 0.7em; }
.item .grey-box.compact .item-price span.price { font-size: 1.5em; }
.item .grey-box .item-price span.price { color: #3f8da6; font-weight: 700; font-size: 1.2em; }
.item .grey-box .item-price div.small { font-size: 1.1em; }
.item .grey-box .item-price div.small p { margin: 0; }
.item .grey-box .item-price div.small.one { font-size: 0.55em !important; }
.item .grey-box .btn.red { margin-top: 40px; }
.colours { cursor: pointer; }
#colour-opt .top .bx-wrapper { max-width: 100% !important; padding-bottom: 40px; }
.colour-options.top .bx-wrapper .bx-viewport { padding-bottom: 5px; }
.colour-options.top .bx-wrapper .section { margin: 0px !important; }
.colour-options.top.bx-wrapper .dw-xs-3 { padding: 0px !important; }
.colour-options.top .bx-wrapper .bx-controls-direction a { bottom: 0; width: 15px; height: 40px; text-align: center; line-height: 40px; color: #3f8da6; top: 32%; font-size: 3em; z-index: 0; }
.colour-options.top .bx-wrapper .bx-controls-direction a.fa-angle-left { left: 0; }
.colour-options.top .bx-wrapper .bx-controls-direction a.fa-angle-right { right: 0; }

.colour-options { margin-top: 40px; z-index: 9; position: relative; }
.colour-options h3 { color: #3f8da6; }
.colour-options .circle { border-radius: 100%; font-family: 'Work Sans', sans-serif; max-width: 100px; aspect-ratio: 1; text-align: center; font-weight: 600; font-size: 1.15em; display: flex; margin: auto; justify-content: center; align-items: center; padding: 10px; }
.circle.anthracite { background-color: #384043; color: #fff; }
.circle.black { background-color: #000; color: #fff; }
.circle.aluminium { background-color: #8a8a8a; color: #fff; }
.circle.just-grey { background-color: #a4a4a4; color: #fff; }
.circle.traffic-white { background-color: #f9fafe; color: #666666; border: 1px solid #e1e1e1; }
.circle.cream { background-color: #f2ecde; color: #666666; }
.circle.offwhite { background-color: #fdfbee; color: #666666; }
.circle.havana { background-color: #5a5148; color: #fff; }
.circle.greybrown { background-color: #695e58; color: #fff; }
.circle.metalic { background-color: #c8c9c4; color: #666666; }
.circle.anthracitemetalic { background-color: #59585d; color: #fff; }
.circle.stonegreymet { background-color: #b6b2af; color: #666666; }
.circle.blackgrey { background-color: #2e3136; color: #fff; }
.colour-options .colour { text-align: center; margin-top: 10px; font-family: 'Work Sans', sans-serif; font-size: 1.1em; margin-bottom: 15px; }
.circle.stonegrey { background-color: #999c95; color: #fff; }
.circle.lightgrey { background-color: #c1c9cb; }
.circle.quartsgrey { background-color: #706b67; color: #fff; }
.circle.jetblack { background-color: #16151a; color: #fff; }
.circle.glimmer { background-color: #3b3b39; color: #fff; }
.circle.slategrey { background-color: #4d5258; color: #fff; }
.circle.purewhite { background-color: #f5f6f1; color: #666666; }
.circle.graphitegrey { background-color: #484d53; color: #fff; }
.circle.agategrey { background-color: #b2b4b1; color: #fff; }
.circle.windowgrey { background-color: #99a0a8; color: #666666; }
.circle.chocolatebrown { background-color: #45302b; color: #fff; }
.circle.blackbrown { background-color: #1b1716; color: #fff; }
.circle.darkbrown { background-color: #6c4631; color: #fff; }
.circle.signalwhite { background-color: #fbfcfe; color: #666666; border: 1px solid #e1e1e1; }
.circle.signalblack { background-color: #232426; color: #fff; }
.circle.whitealum { background-color: #b4b4b4; color: #666666; }
.circle.graphiteblack { background-color: #1f2025; color: #fff; }
.circle.lightivory { background-color: #e9dbc1; color: #666666; }
.circle.brownred { background-color: #7a2029; color: #fff; }
.circle.sapphireblue { background-color: #1d3058; color: #fff; }
.circle.greyblue { background-color: #2d3b44; color: #fff; }
.circle.pigeonblue { background-color: #6a7d9b; color: #fff; }
.circle.mossgreen { background-color: #124438; color: #fff; }
.circle.firegreen { background-color: #213529; color: #fff; }
.circle.signalgrey { background-color: #9a9b9f; color: #666; }
.circle.beigegrey { background-color: #756b5f; color: #fff; }

.trade__form { background-color: #e5e5e5; padding: 50px; margin: 60px auto; max-width: 1040px; }
.trade__form h3, .trade__browse h3 { text-align: center; font-size: 2.3em; color: #3f8da6; }
.trade__form .text { text-align: center; font-size: 1.1em; max-width: 900px; margin: auto; }
.trade__form .g-recaptcha { margin: auto; background-color: #f9f9f9; }
.trade__fields { margin: 40px auto; max-width: 550px; }
.trade__fields .editor-label { font-weight: 700; margin: 10px 0; color: #555555; font-size: 1.08em; }
.trade__installer span { font-size: 1.08em; text-align: center; display: block; margin-bottom: 25px; }
.trade__installer .editor-label { font-size: 1.1em; text-align: center; display: block; margin-bottom: 25px; font-weight: 600; }
.trade__installer .labels .option.selected { background-color: #3f8da6; }
.trade__installer .labels .option { color: #666666; background-color: #fff; padding: 15px; border-radius: 2px; cursor: pointer; position: relative; display: inline-block; height: 40px; width: 40px; margin: 0 30px; }
.trade__installer .labels label input[type="radio"] { display: none; }
.trade__installer .labels { margin: auto; display: block; max-width: 215px; }
.trade__installer .labels .option span { position: absolute; right: -30px; font-weight: 600; display: block; }
.trade__form .text strong a { color: #3f8da6 !important; font-style: italic; text-decoration: underline; }
.trade__form .text strong a:hover { text-decoration: none; }
.trade__form input[type="submit"] { max-width: 400px; margin: 15px auto 40px; font-size: 1.2em; font-weight: 600; }
input.btn.red:before { content: ''; background: transparent; border: 1px solid #af3f32; top: -7px; right: 7px; bottom: 7px; left: -7px; position: absolute; }
.trade__browse { display: block; margin: auto; }
.trade__browse .btn--browse { font-size: 1.1em; margin: auto; max-width: 400px; margin: 15px auto; }
.trade__browse .circle { height: 170px; width: 170px; border-radius: 50%; margin: 50px auto 80px; }
.trade__browse .circle.grey { background-color: #b8b8b8; }
.trade__browse .circle.black { background-color: #000000; }
.trade__browse .circle.cream { background-color: #d1b48c; }
.text.trade--top { margin: 25px 0; max-width: 950px; display: block; }
.trade__browse .productsale { margin: 80px auto 0; max-width: 800px; }
.trade__browse .section { margin-top: 150px; }
.middle-services { background-color: #f5f5f5; padding: 50px; }
.middle-services .circle { border-radius: 100%; height: 100px; width: 100px; text-align: center; font-weight: 600; font-size: 1.15em; display: block; margin: auto; background-color: #3f8da6; }
.middle-services .circle i { color: #fff; font-size: 4em; text-align: center; line-height: 100px; }
.middle-services .circle span.number { color: #fff; font-size: 2.2em; }
.middle-services .circle span.warranty { font-size: 0.45em; }
.middle-services .title { font-weight: 800; margin: 20px auto 0; text-align: center; font-size: 1.3em }
.middle-services .text { margin: 20px auto 0; text-align: center; font-family: 'Work Sans', sans-serif; font-size: 1.2em; }
.middle-services.about { padding: 15px 80px; }
.middle-services.about h3 { color: #3f8da6; margin: 20px auto; font-size: 2em; }
.middle-services.about h4 { font-size: 1.3em; margin-left: 15px; }
.middle-services.about .services { margin: 5px auto; }
.middle-services.about .dw-sm-2, .middle-services.about .dw-sm-10 { padding: 0; }
.middle-services.about i { font-size: 1.8em; color: #3f8da6; text-align: center; display: block; }
.middle-services.about a { color: #666666; font-family: 'Work Sans', sans-serif; font-size: 1.15em; }
.middle-services.about a:hover { color: #3f8da6; }
.product-box { margin: 20px auto; }
.product-box .circle { border-radius: 100%; height: 60px; width: 60px; line-height: 60px; color: #fff; text-align: center; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 1.6em; display: block; margin: 0 auto 25px; background-color: #3f8da6; }
.product-box strong { font-weight: 800; font-family: 'Work Sans', sans-serif; font-size: 1.3em; text-align: center; display: block; max-width: 130px; margin: auto; }
.product-box img { margin: auto; }
.grey-box .info { padding: 15px 15px 0; font-weight: 600; font-size: 1.1em; }
.product-details { background-color: #eeeeee; }
.product-details.carports { padding: 40px 0; }
.product-details h3 { color: #3f8da6; margin: 20px auto; text-align: center; font-size: 2em; }
.product-details span.carports { font-family: 'Work Sans', sans-serif; font-size: 1.15em; padding: 40px 0; }
.product-details .sunroom { position: relative; margin-bottom: 100px; }
.product-details .sunroom.atrium { margin-bottom: 160px; }
.product-details .sunroom.dyn { margin-bottom: 150px; }
.product-details .sunroom.compact { margin-bottom: 240px; }
.product-details .sunroom.lite { margin-bottom: 370px; }
.product-details .sunroom .white-box { background-color: #fff; max-width: 300px; padding: 15px 0; text-align: center; }
.product-details .sunroom .white-box span { color: #0080a9; font-weight: 700; font-size: 0.9em; }
.product-details.customise { padding-bottom: 40px; }
.product-details.customise h2 { color: #3f8da6; text-align: center; font-size: 2.8em; margin: 25px auto 40px; }
.product-details.customise .text { font-size: 1.2em; text-align: center; margin: 20px auto; }
.product-details.customise img { display: block; margin: auto; }
.product-details.customise .dw-md-2 { width: 20%; }
.product-details .sunroom .top-right { position: absolute; right: 0; bottom: 45%; }
.product-details .sunroom .top-right.vista { position: absolute; right: 0; bottom: 70%; }
.product-details .sunroom.panorama .top-right .point { right: 486px; top: 97%; }
.product-details .sunroom .top-right.horizon { bottom: 50%; }
.product-details .sunroom .top-right.atrium { bottom: 28%; }
.product-details .sunroom .top-right img.right { float: right; }
.product-details .sunroom .top-right.atrium .point { top: 40%; }
.product-details .sunroom .top-right.atrium.room .point { top: 76%; }
.product-details .sunroom .top-right .point { right: 445px; position: absolute; top: 60%; }
.product-details .sunroom .top-right .point i:after { width: 200px; right: -155px; top: -75px; -ms-transform: rotate(130deg); -o-transform: rotate(130deg); -moz-transform: rotate(130deg); -webkit-transform: rotate(130deg); transform: rotate(130deg); }
.product-details .sunroom .top-right.vista .point i:after { width: 242px; right: -239px; top: 29px; -ms-transform: rotate(130deg); -o-transform: rotate(130deg); -moz-transform: rotate(130deg); -webkit-transform: rotate(130deg); transform: rotate(188deg); }
.product-details .sunroom.panorama .top-right .point i:after { width: 367px; right: -298px; top: -139px; }
.product-details .sunroom .top-left { position: absolute; left: 0; bottom: 50%; }
.product-details .sunroom .top-left.atrium { bottom: 70%; }
.product-details .sunroom .top-left.atrium .point { top: 60%; }
.product-details .sunroom .top-left.avant { bottom: 88%; }
.product-details .sunroom .top-left.avant.vog .point { top: 90%; left: 550px; }

.product-details .sunroom .top-left.compact { bottom: 20%; }
.product-details .sunroom .top-left .point { left: 456px; position: absolute; top: 45%; }
.product-details .sunroom.panorama .top-left .point { left: 445px; position: absolute; top: 106%; }
.product-details .sunroom .top-left.spire .point { top: 70%; }
.product-details .sunroom .top-left.spire .point i:after { width: 180px; right: 0px; top: -50px; -ms-transform: rotate(35deg); -o-transform: rotate(35deg); -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); transform: rotate(35deg); }
.product-details .sunroom .top-left.avant .point { top: 120%; left: 550px; }
.product-details .sunroom .top-left.avant .point i:after { width: 350px; right: -18px; top: -94px; -ms-transform: rotate(35deg); -o-transform: rotate(35deg); -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); transform: rotate(35deg); }
.product-details .sunroom .top-left .point i:after { width: 200px; right: 0px; top: -50px; -ms-transform: rotate(35deg); -o-transform: rotate(35deg); -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); transform: rotate(35deg); }
.product-details .sunroom.panorama .top-left .point i:after { width: 433px; right: -17px; top: -114px; }

.product-detaile .sunroom .middle .point { position: absolute; top: 120%; left: 550px; }

.product-details .sunroom .top-left.compact .point { top: 25%; }
.product-details .sunroom .point i:after { content: ""; height: 2px; background-color: #3f8da6; display: block; position: absolute; }
.product-details .sunroom .point i { position: absolute; top: 0; left: 0; width: 25px; height: 25px; line-height: 25px; text-align: center; color: #fff; background-color: #3f8da6; border-radius: 50%; font-size: 1.2em; }
.product-details .sunroom .bottom-left { position: absolute; top: 60%; left: 15px; }
.product-details .sunroom .bottom-left.atrium { top: 35%; }
.product-details .sunroom .bottom-left.avant { top: 22%; }
.product-details .sunroom .bottom-left.compact { top: 88%; }
.product-details .sunroom .bottom-left.compact .point { display: none; }
.product-details .sunroom .bottom-left .point { right: -120px; position: absolute; top: 30%; }
.product-details .sunroom .bottom-left.pan .point { right: -15%; position: absolute; top: 0; }
.product-details .sunroom .bottom-left .point i:after { width: 120px; right: 25px; top: 10px; -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
.product-details .sunroom .bottom-left.avant .point { top: 0; right: -108px; }
.product-details .sunroom .bottom-left.aspire .point { right: -110px; position: absolute; top: -10px; }
.product-details .sunroom .bottom-left.aspire .point i:after { width: 120px; right: 15px; top: 48px; -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(150deg); }
.product-details .sunroom .bottom-left.pan .point i:after { width: 88px; right: 23px; top: 12px; -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(180deg); }
.product-details .sunroom .bottom-middle { position: absolute; right: 32%; max-width: 380px; bottom: -25%; }
.product-details .sunroom .bottom-middle .colour-options .circle { font-size: 1em }
.product-details .sunroom .bottom-middle.compact .colour-options { margin-top: 100px; }
.product-details .sunroom .bottom-middle.plus { top: 50%; right: 30%; }
.product-details .sunroom .bottom-middle.plus .point i:after { width: 120px; right: -115px; top: 10px; -ms-transform: rotate(180deg); -o-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.product-details .sunroom .bottom-middle .section { margin: 0px -5px; }
.product-details .sunroom .bottom-middle .section > div { padding: 0px 5px; }

.product-details .sunroom .middle { position: absolute; }
.product-details .sunroom .middle.wintergard { top: -10px; right: 100px; }
.product-details .sunroom .middle.wintergard .point { position: absolute; bottom: -80px; left: 60px; }
.product-details .sunroom .middle.wintergard .point i:after { position: absolute; width: 273px; right: -135px; top: -134px; -ms-transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(93deg); }

.product-details .sunroom .middle.panplus { top: -239px; left: 312px; }
.product-details .sunroom .middle.panplus .point { position: absolute; bottom: -339px; left: 49%; }
.product-details .sunroom .middle.panplus .point i:after { position: absolute; width: 494px; right: -248px; top: -251px; -ms-transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(93deg); }

.product-details .sunroom .middle.vogue { top: -312px; left: 456px; }
.product-details .sunroom .middle.vogue.vista { top: -312px; left: 585px; }
.product-details .sunroom .middle.vogue .point { position: absolute; bottom: -200px; }
.product-details .sunroom .middle.vogue .point i:after { position: absolute; width: 372px; right: -183px; top: -183px; -ms-transform: rotate(93deg); -o-transform: rotate(93deg); -moz-transform: rotate(93deg); -webkit-transform: rotate(93deg); transform: rotate(93deg); }

.product-details .sunroom .details.btmmiddle { top: 60%; right: 0; }
.product-details .sunroom .details.btmmiddle.plus { top: 70%; }
.product-details .sunroom .details.btmmiddlethree { top: 65%; right: 10%; }
.product-details .sunroom .details.btmright.avant { top: 72%; }
.product-details .sunroom .details.btmright.horizon { top: 56%; }
.product-details .sunroom .details.btmright.ultra { top: 65%; }
.product-details .sunroom .details.btmright.atrium { top: 95%; right: 28%; }
.product-details .sunroom .details.btmmid { bottom: -50%; right: 20%; }
.product-details .sunroom .bottom-right.ultra { top: 70%; }
.product-details .sunroom .bottom-right.atrium .point { top: -80%; right: 400px; }
.product-details .sunroom .bottom-right.atrium .point i:after { width: 200px; right: -168px; -ms-transform: rotate(40deg); -o-transform: rotate(40deg); -moz-transform: rotate(40deg); -webkit-transform: rotate(40deg); transform: rotate(40deg); top: 88px; }
.product-details .sunroom .bottom-right.ultra .point i:after { width: 115px; right: -108px; }
.product-details .sunroom .details.btmmiddle.ultra { top: 95%; right: 32%; max-width: 490px; }
.product-details .sunroom .details.btmmiddle.hor { top: 85%; right: 0; max-width: 490px; }

.product-details .sunroom .details.btmmiddle.atrium { right: 60%; top: 95%; }
.product-details .sunroom .details.btmmiddle.bottom { top: 42.66%; }
.product-details .sunroom .details.btmmiddle.bottom.vista { top: 17.60%; }

.product-details .sunroom .bottom-right.aspire { position: absolute; right: 0; top: 66%; max-width: 380px; }

.product-details .sunroom .bottom-right.aspire .point { right: 355px; position: absolute; top: -14%; }
.product-details .sunroom .bottom-right.aspire .point i:after { width: 141px; right: -137px; top: 28px; -ms-transform: rotate(130deg); -o-transform: rotate(130deg); -moz-transform: rotate(130deg); -webkit-transform: rotate(130deg); transform: rotate(15deg); }

.product-details .sunroom .bottom-right .section > * { padding: 0px 5px; }
.product-details .sunroom .bottom-right { position: absolute; right: 0; top: 75%; max-width: 380px; }
.product-details .sunroom .bottom-right .colour-options .circle { font-size: 1em }
.product-details .sunroom .bottom-right .point { right: 375px; position: absolute; top: -20%; }
.product-details .sunroom .bottom-right.room .point { top: -50%; }
.product-details .sunroom .bottom-right.room .point i:after { width: 120px; -ms-transform: rotate(30deg); -o-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); top: 45px; right: -105px; }
.product-details .sunroom .bottom-right .point i:after { width: 65px; right: -55px; top: 28px; -ms-transform: rotate(130deg); -o-transform: rotate(130deg); -moz-transform: rotate(130deg); -webkit-transform: rotate(130deg); transform: rotate(15deg); }
.product-details .sunroom .bottom-right.avant .point { right: 375px; position: absolute; top: -108%; }
.product-details .sunroom .bottom-right.avant .point i:after { width: 205px; -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); right: -160px; top: 96px; }
.product-details .sunroom .bottom-right .point.compact { display: none; }
.product-details .sunroom .bottom-right.compact .colour-options { margin-top: 100px; }
.product-details .sunroom .details.btmlefttwo .point { right: -18%; position: absolute; top: -190%; }
.product-details .sunroom .details.btmlefttwo .point i:after { width: 205px; -ms-transform: rotate(145deg); -o-transform: rotate(145deg); -moz-transform: rotate(145deg); -webkit-transform: rotate(145deg); transform: rotate(145deg); right: -10px; top: 76px; }
.product-details .sunroom .details { background-color: #3f8da6; color: #fff; max-width: 300px; padding: 15px; font-size: 1.2em; position: absolute; }
.product-details .sunroom .details.btmleft { top: 63%; left: 80px }
.product-details .sunroom .details.btmleft.two { top: 52%; left: 0; }
.product-details .sunroom .details.btmlefttwo { top: 98%; left: 80px; }
.product-details .sunroom .details.btmleft.avant { top: 15%; left: 5%; }
.product-details .sunroom .details.btmleft.compact { top: 100%; left: 220px; }
.product-details .sunroom .details.btmright { top: 70%; right: 15px; }
.product-details .sunroom .details.btmright.mid { right: 36%; top: 75%; }
.product-details .sunroom .details.btmright.bottom { right: 0; top: 42.66%; }
.product-details .sunroom .details.topright { top: -25%; right: 7%; max-width: 245px; }
.product-details .sunroom .details.topright.panplus { top: -15%; right: 15%; }
.product-details .sunroom .details.middle.pan { top: -24%; left: 40%; max-width: 212px; }
.product-details .sunroom .details.topright.pres { right: 20%; }
.product-details .sunroom .details.topleft { top: -22%; left: 5%; }
.product-details .sunroom .details.topleft.spire { left: 25%; }
.product-details .sunroom .details.topleft.avant { left: 13%; top: -42%; }
.product-details .sunroom .details.topleft.pls { left: 24%; top: -28%; }
.product-details .sunroom .details.topleft.dyn { left: 22%; top: -30%; }
.product-details .sunroom .details.topmiddle { top: 90%; left: 15%; }
.note { background-color: #f5f5f5; padding: 15px; font-family: 'Work Sans', sans-serif; font-size: 1em; }
.note i { float: right; color: #3f8da6; font-size: 2.8em; }
.spec { background-color: #3f8da6; margin: 20px auto; min-height: 50px; color: #fff; font-size: 1.3em; text-align: center; line-height: 50px; }
.spec img { float: right; margin: 10px 0; }
.category-back { background-image: url(images/cat-verandas.jpg); background-position: center; height: 450px; background-size: cover; background-repeat: no-repeat; }
.category-back h2 { color: #fff; margin: 30px auto 30px; font-size: 2em; }
.category-back .text { font-family: 'Work Sans', sans-serif; font-size: 1.2em; color: #fff; max-width: 650px; }
.category-back .text a { color: #fff; text-decoration: underline; font-weight: 600; }
.configurations { margin: 20px auto; }
.configurations h3 { color: #3f8da6; font-size: 1.3em; }
.configurations .dw-sm-3 { width: 20%; }
.configurations .dw-sm-3 img { display: block; margin: auto; }
.configurations .text { text-align: center; margin-top: 20px; }
.extras { margin-top: 50px; }
.extras h3 { color: #3f8da6; font-size: 1.3em; }
.extras .text { margin: 25px 0; font-family: 'Work Sans', sans-serif; font-size: 1em; }

.text-center-land { padding: 15px 0; text-align: center; font-weight: 600; font-size: 1.2em; }
.text-center-price { text-align: center; font-weight: 600; font-size: 1.2em; padding-bottom: 15px; }
.text-center-price span { color: #3f8da6; }

.personalextrastop { margin: 0 auto 30px; }
.personalextrastop h3 { color: #3f8da6; font-size: 1.3em; }
.personalextrastop .text { position: absolute; bottom: 20px; right: 15px; background-color: #3f8da6; color: #fff; font-size: 1.2em; font-weight: 600; padding: 15px; max-width: 250px; }
.personalextrastop .text span { font-weight: normal; font-family: 'Work Sans', sans-serif; }

.personalextrasbot .section.exbot { margin: 0; }
.personalextrasbot .dw-md-3 { padding: 0; }
.personalextrasbot .one .green h4 { font-size: 1.3em; margin: 0 auto 10px; }
.personalextrasbot .one .green .text { font-size: 1.1em; }
.personalextrasbot .one .green .text span { font-family: 'Work Sans', sans-serif; }
.personalextrasbot .one .green { background-color: #3f8da6; color: #fff; padding: 13px; min-height: 302px; }

.pinlink { position: relative; }
.pinterestlinkbottom { display: block; color: #fff; width: 100%; line-height: 20px; background-color: #bd081f; font-size: 1.2em; border-radius: 3px; padding: 10px 10px 10px 42px; position: relative; margin-top: 15px; border: 1px solid #bd081f; }
.pinterestlinkbottom i { font-size: 1.6em; position: absolute; top: 50%; left: 10px; margin-top: -20px; height: 40px; line-height: 40px; }
.pinterestlinkbottom:hover { color: #bd081f; background-color: #fff; }


#featured { margin: 30px 0; }
#featured ul { list-style: none; margin: 0; padding: 0; width: 100%; }
#featured ul li { position: relative; display: table-cell; line-height: 70px; height: 70px; width: 5%; cursor: pointer; text-align: center; border-right: 2px solid #fff; }
#featured ul li a { color: #3f8da6; font-size: 1.1em; display: block; font-weight: 800; }
#featured ul li.active { background-color: #f5f5f5; }
#featured ul li.notactive { background-color: #3f8da6; }
#featured ul li.notactive a { color: #fff; }
#featured ul li.notactive a:hover { color: #3f8da6; }
#featured ul li.notactive:hover a { color: #3f8da6; }
#featured ul li:hover { background-color: #f5f5f5; }
#featured .tabs.active { visibility: visible; opacity: 1; background-color: #f5f5f5; padding: 25px; }
#featured .tabs { visibility: hidden; -moz-transition: opacity 1s ease-in-out; /* -webkit-transition: opacity 1s ease-in-out; */ opacity: 0; }
#featured .tabs.notactive { display: none; }
#featured .tabs { font-size: 1.2em; }
#featured .tabs span { color: #d71a21; font-weight: 800; }
#featured .tabs span.price, #featured .tabs div.price { color: #3f8da6; font-weight: 600; }
#featured img { margin: auto auto 25px auto; }
.section.categories { margin: 40px auto; }
.views { margin: 10px auto; }
.views.cars .overtop-img { background-repeat: no-repeat; background-size: cover; height: 225px; }
.size-guide .views .overtop-img { height: 225px; }
.views .overtop-img { background-repeat: no-repeat; background-size: cover; height: 225px; }
.views .overtop-img.one { background-image: url(images/space-for-kids.jpg); }
.views .overtop-img.two { background-image: url(images/outdoor-lounge.jpg); }
.views .overtop-img.three { background-image: url(images/perfect-dining.jpg); }
.views .overtop-img.four { background-image: url(images/home-gym.jpg); }
.views .overtop-img.five { background-image: url(images/hot-tub.jpg); }
.views .overtop-img.six { background-image: url(images/additional-storage.jpg); }
.views.cars .overtop-img.seven { background-image: url(images/carport-pitched.jpg); }
.views.cars .overtop-img.eight { background-image: url(images/pitched-roof.jpg); }

.views .overtop-img.sizeone { background-image: url(images/aspire-size.jpg); }
.views .overtop-img.sizetwo { background-image: url(images/aspire-plus-size.jpg); }
.views .overtop-img.sizethree { background-image: url(images/avant-size.jpg); }
.views .overtop-img.sizefour { background-image: url(images/horizon-size-veranda.jpg); }
.views .overtop-img.sizefive { background-image: url(images/atrium-size.jpg); }
.views .overtop-img.sizesix { background-image: url(images/horizon-size.jpg); }
.views .overtop-img.sizeseven { background-image: url(images/compact-size.jpg); }
.views .overtop-img.sizeeight { background-image: url(images/lite-size.jpg); }
.views .overtop-img.sizenine { background-image: url(images/elite-size.jpg); }
.views .overtop-img.sizeten { background-image: url(images/panorama-size.jpg); }
.views .overtop-img.sizeeleven { background-image: url(images/vogue-size.jpg); }
.views .overtop-img.sizetwelve { background-image: url(images/prestige-size.jpg); }
.views .overtop-img.sizethirteen { background-image: url(images/atrium-garden-size.jpg); }
.views .overtop-img.sizefourteen { background-image: url(images/ultra-size.jpg); }
.views .overtop-img.sizefifteen { background-image: url(images/panorama-plus--size.jpg); }
.views .overtop-img.sizesixteen { background-image: url(images/wintergarden-size.jpg); }
.views .grey-box { color: #fff; background-color: #666666; padding: 20px; min-height: 220px; height: 100%; margin-bottom: 20px; }
.item .grey-box .item-price.one .dim { margin: 15px 0; }
.views .grey-box h2 { margin: 0; color: #fff; font-size: 1.8em; }
.views .grey-box span { font-family: 'Work Sans', sans-serif; font-size: 1.04em; color: #fff; }
.views.size.cs .grey-box span { color: #666666; }
.views .grey-box.guide span { color: #666666; }
.views.cars .grey-box h2 { padding: 0; }
.views.cars .grey-box a { color: #fff; font-weight: 500; }
.views.cars { font-size: 1.3em; }
.views .grey-box .bottom { position: absolute; bottom: 25px; }
.categories a:hover .bottom div { color: #f68b1e; }
.views.ys .grey-box .bottom { bottom: 50px; }
.views .grey-box .bottom div { color: #fff; text-transform: uppercase; font-family: 'Work Sans', sans-serif; font-weight: 500; font-size: 1.2em; }
.views.size h2 { color: #3f8da6; margin-top: 30px; font-size: 1.6em; }
.views.size h2.cs { font-size: 1.6em; }
.views.size.cs { margin: 30px auto; }
.views.size .grey-box { background-color: #fff; color: #666666; padding: 0; min-height: 145px; }
.views.size .grey-box .bottom a { color: #3f8da6; }
.views.size .grey-box .bottom a:hover { color: #f68b1e; }
.views.size .grey-box .bottom { bottom: 45px; }
.views.size .grey-box .bottom.cs { bottom: 0; }
.video-surround { position: relative; padding-bottom: 35%; height: 0; overflow: hidden; max-width: 600px; margin: 0 auto 40px; }
.video-surround iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.youtube { background-size: cover; background-position: center; cursor: pointer; width: 100%; padding-bottom: 60%; }


.youtube .play { color: #e62117; font-size: 4em; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); position: absolute; }
.youtube.v1 { background-image: url(images/veranda-installation.jpg); }
.youtube.v2 { background-image: url(images/garden-time-lapse.jpg); }

.new.youtube { padding: 0px !important; }
.new.youtube iframe { width: 100%; aspect-ratio: 16 / 9; }

.new-yt { position: relative; }
.new-yt iframe { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; }
.heaters h2 { color: #3f8da6; font-size: 1.8em; font-weight: 600; text-align: center; }
.heaters h3 { color: #3f8da6; font-size: 1.6em; font-weight: 600; }
.heaters .price { color: #3f8da6; font-weight: 800; font-size: 1.3em; margin-left: 15px; }
.heaters .price span { color: #666; }
.heaters li { color: #3f8da6; font-size: 1.08em; font-family: 'Work Sans', sans-serif; }
.heaters li span { color: #666; }
.new-heaters .dw-xs-4 { width: 33.333%; margin: auto; }
.new-heaters .dw-xs-4.nopad { padding: 0; }
.new-heaters .around { margin: 20px auto; }
.new-heaters .around img { margin: auto; display: block; }

.faq-section { margin: 25px auto; }
.faq-section div { margin-bottom: 10px; }
.faq-section .question { display: block; background-color: #6d6e71; padding: 10px 50px 10px 15px; color: #fff; font-size: 1.45em; font-weight: 700; line-height: 20px; position: relative; cursor: pointer; }
.faq-section .question:hover { background-color: #f68b1f; }
.faq-section .question i { display: block; position: absolute; top: 50%; -ms-transform: translate(0,-50%); -o-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -webkit-transform: translate(0,-50%); transform: translate(0,-50%); right: 15px; width: 20px; height: 22px; line-height: 22px; color: #fff; text-align: center; font-size: 1.8em; }
.faq-section div.shutter { height: 0; margin: 0; overflow: hidden; }
.faq-section div.open { height: auto; margin: 0; }
.faq-section div span { display: block; padding: 10px 15px 10px; font-size: 1.15em; font-family: 'Work Sans', sans-serif; }
.faq-section a { font-weight: 700; color: #f68b1f; }

#map { width: 100%; height: 380px; }
.textpage .conditions h2 { text-align: left; }
.textpage .conditions { font-family: 'Work Sans', sans-serif; font-size: 1.2em }
.textpage .conditions li { color: #f68b1f; }
.textpage .conditions li span { color: #666 }

.showroom .intro h2 { font-size: 2.8em; }
.showroom .intro .description span { font-weight: 800; font-family: 'Work Sans', sans-serif; font-size: 0.95em; }

.head-top { left: 15%; width: 70%; margin: 0 auto; }
.head-top .round { width: 50px; height: 50px; color: #fff; line-height: 55px; text-align: center; border-radius: 100%; background-color: #3f8da6; margin: 20px auto; }
.head-top .round i { font-size: 1.8em; color: #fff; }
.head-top .title { color: #fff; font-size: 1.1em; text-align: center; }
.head-top .title a { color: #fff; }
.our-rooms { margin: 40px 0; }
.our-rooms img { margin: 15px auto; }
.our-rooms .show-title { color: #3f8da6; font-size: 1.4em; font-weight: 600; margin-bottom: 15px; }
.our-rooms span { font-family: 'Work Sans', sans-serif; font-size: 1.2em; }
.our-rooms .btn.aqua { margin-top: 30px; }
.grey-form { padding: 30px 170px; background-color: #f5f5f5; margin-top: 30px; margin-bottom: 70px; position: relative; z-index: 8; }
.grey-form h2 { color: #3f8da6; font-size: 2em; margin-bottom: 15px; }
.grey-form.pack { margin-bottom: 35px; }
.grey-form.brochure { padding: 30px; margin: 20px auto; }
.grey-form.brochure h2 { font-size: 1.6em; }
.grey-form.brochure .btn.aqua { margin: 20px auto 0; }
#designform { font-size: 1.2em; font-family: 'Work Sans', sans-serif; }
.container.show { max-width: 1038px; }
.container.show .text { font-family: 'Work Sans', sans-serif; font-size: 1.15em; }
.map { margin: 50px 85px; }
.map h2 { color: #3f8da6; font-size: 2.2em; }
.map .text { font-size: 1.3em; margin-top: 20px; font-family: 'Work Sans', sans-serif; }
.map .map-grey { background-color: #f5f5f5; padding: 15px 30px; min-height: 380px; }
.map-grey i { color: #3f8da6; margin-bottom: 15px; font-size: 1.3em; }
.map-grey .text span { font-weight: 800; }
.block { max-width: 900px; margin: 0 auto 40px; position: relative; z-index: 8; }
.block h1 { color: #3f8da6; font-size: 2em; text-align: center; }
.block h2 { color: #3f8da6; font-size: 2em; }
.block .text.top { text-align: center; }
.block .text strong { color: #3f8da6; }
.block .text { font-size: 1.3em; margin-top: 20px; font-family: 'Work Sans', sans-serif; }
img.cardiff { margin: 0 auto 50px; display: block; }
.galcont { margin-bottom: 30px; }
.galcont h2 { color: #3f8da6; font-size: 1.9em; text-align: center; margin-top: 75px; }
.gallimg { margin: 15px auto; }



#theform h3 { color: #3f8da6; }
#theform .editor-field.checkbox input { width: 30px; height: 30px; margin: 13px auto; }
#theform .editor-label.star span { color: #3f8da6; }
#theform .editor-label.star .enquiry-options label span { color: #666; font-size: 1em; }
.grey-form.pack { margin-bottom: 40px; font-family: 'Work Sans', sans-serif; font-size: 1.2em; }
.request .text.bottom { margin-bottom: 40px; font-family: 'Work Sans', sans-serif; font-size: 1.2em; }
.stepbox { cursor: pointer; }
.stepbox img { margin: 15px auto; }
.stepbox .title { font-weight: 600; line-height: 1.4; font-size: 1.5em; text-align: center; }
.freeinfobx .btn.red a { color: #fff; }
.freeinfobx a { color: #3f8da6; }
.text a { color: #3f8da6; font-weight: 600; }
.freeinfobx .dw-sm-2 { font-size: 0.8em; }
.product-config .dw-md-2 .dimensions { line-height: 50px; text-align: center; color: #3f8da6; font-weight: bold; margin: auto; display: block; }
.product-config .size { line-height: 50px; }
#garden-section .dw-md-2, #verandas-section .dw-md-2 { margin: 15px auto; }
#garden-section .dw-md-2 { width: 14.28%; }
#garden-section .dw-md-2 .surround div { font-size: 0.85em; }
.product-model .surround, .product-type .surround { -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2); box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2); }
.product-model .surround span, .product-type .surround label span { width: 100%; text-align: center; background-color: #fff; height: 40px; line-height: 40px; display: block; }
.product-model .surround label, .product-type .surround label { cursor: pointer; display: block; }

#quote-request-modal { width: min(80vw, 800px); position: relative; opacity: 0; transform: scale(0); transition: opacity 0.7s ease-out, overlay 0.7s ease-out allow-discrete; }
#quote-request-modal:open { opacity: 1; transform: scale(1); }
#quote-request-modal:open::backdrop { background-color: #000; opacity: 0.4; }

@starting-style {
    #quote-request-modal:open { opacity: 0; transform: scaleY(0); }
}

dialog::backdrop { background-color: rgb(0 0 0 / 0%); transition: display 0.7s allow-discrete, overlay 0.7s allow-discrete, background-color 0.7s; }

@starting-style {
    #quote-request-modal:open::backdrop { background-color: rgb(0 0 0 / 0%); }
}

#quote-request-modal span.close { position: absolute; top: 20px; right: 20px; cursor: pointer; }

#virtualform .section.enq .editor-label .quote-link { display: flex; align-items: center; gap: 5px; }

.section.inspire-design { margin-bottom: 20px; }
.inspire-design .design1 { background-image: url(images/design-lab-1.jpg); height: 310px; margin-top: 0px; position: relative; background-position: center; background-size: cover; }
.inspire-design .design2 { background-image: url(images/design-lab-2.jpg); height: 310px; position: relative; background-position: center; background-size: cover; }
.inspire-design .design { position: absolute; bottom: 0px; left: 0; padding: 5px; width: 50%; color: #fff; font-weight: 700; font-size: 1.1em; }
.inspire-design .design.result { left: 50%; }

.section.inspire .rangeimg .image { height: 455px; }
.section.inspire .bluebx { background-color: #efefef; padding: 30px; position: relative; min-height: 310px; }
.section.inspire .bluebx.dark { background-color: #6d6e71; color: #fff; min-height: 310px; }
.section.inspire .bluebx.dark h2 { color: #fff; }

.section.inspire .dw-md-6 { padding: 0 10px; }
.section.inspire .rangeimg div { height: 420px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
.section.inspire .rangeimg div.first { margin-top: 0; }


.grey-sale { background-color: #f5f5f5; min-height: 390px; padding: 15px; }
.body-internal.sale { font-size: 1em; }
.body-internal.sale .dw-md-6 { padding: 0; font-family: 'Work Sans', sans-serif; font-size: 1.1em; }
.body-internal.sale h3 { font-size: 1.6em; color: #af3f32; }
.body-internal.sale h4 { font-weight: bold; }
.body-internal .btn.red { margin-top: 30px; }
.clearance-sale { margin: 30px auto; background-color: #f2891c; }
.clearance-sale .block { padding: 30px; color: #fff; text-align: center; }
.clearance-sale .block h2 { color: #fff; font-size: 2.8em; margin-bottom: 15px; }
.clearance-sale .block span { font-weight: 700; font-size: 1.8em; font-family: 'Work Sans', sans-serif; }
.clearance-sale .block .btn.white { margin: 25px auto 0; color: #f2891c; }
.clearance-sale .block .btn.white:hover { background-color: #666; color: #fff; }
.clearance-sale .block .btn.white:hover:before { border: 1px solid #666; }

.newsfeed { margin-bottom: 40px; }
.newsfeed h2 { color: #3f8da6; font-weight: 800; font-size: 2em; margin: auto; }
.newsfeed .blogdate { font-size: 1.2em; text-align: left; color: #f68b1e; text-transform: uppercase; font-weight: 600; }
.newsfeed .title { text-align: left; color: #3f8da6; font-size: 1.6em; font-weight: 800; line-height: initial; margin: 10px 0 0; }
.newsfeed .content { text-align: left; color: #666666; font-size: 1.15em; line-height: 1.3; margin: 15px 0 0; font-weight: normal; font-family: 'Work Sans', sans-serif; }
.newsfeed .blogpost .content span { text-transform: initial; font-size: 1em; color: #3f8da6; text-align: left; display: block; margin: 5px 0 15px; font-weight: 800; text-decoration: underline; }
.newsfeed .blogpost img { max-width: 265px; height: 225px; }
.newsfeed .blogpost .image { position: relative; padding-bottom: 100%; min-height: 265px; }
.newsfeed .blogpost .image div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: 50%; }
.newsfeed .blogpost { margin: 15px 0; }
.newsfeed .blogpost:nth-child(2n+1) { clear: both; }


.cs-page .video-section { margin-top: 30px; background-color: #6d6e71; padding: 30px; color: #fff; font-size: 1.15em; }
.cs-page .video-section h2 { color: #fff; }
.cs-page .block { max-width: 945px; }
.cs-page .video-section .video-surround { padding-bottom: 53.84615384615385%; }
.cs-page .video-section .youtube { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-bottom: 0; }
.cs-page .video-section .video i { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; text-align: center; line-height: 80px; margin-top: -40px; margin-left: -40px; color: #ad372c; font-size: 5em; }
.cs-page .video-section .video:hover i { color: #fff; }
.cs-page p { margin: 15px 0 0; font-family: 'Work Sans', sans-serif; font-size: 0.95em; }

.cs-page .bottom-message { margin-top: 6px; background-color: #f5f5f5; color: #666666; font-family: 'Poppins',sans-serif; font-size: 1.15em; }
.cs-page .bottom-message .text { padding: 30px; width: 66.75%; float: left; }
.cs-page .bottom-message h2 { color: #3f8da6; margin: 0 0 15px; }
.cs-page .bottom-message .image { width: 33.25%; float: right; }
.cs-page .bottom-message .bgimage { padding-bottom: 81.95488721804511%; background-position: center; background-repeat: no-repeat; background-size: cover; }
.cs-page .final-text { font-size: 1.17em; margin-bottom: 15px; font-family: 'Poppins',sans-serif; }
.cs-page .final-text a { color: #3f8da6; }
.cs-page .final-text a:hover { color: #6d6e71; }
.cs-page .final-text p { margin: 20px 0 0; }

.case-images .bgimage { background-position: center; background-repeat: no-repeat; background-size: cover; margin: 3px; }
.case-images .left { float: left; width: 46.5%; }
.case-images .left .bgimage { padding-bottom: 104.3010752688172%; }
.case-images .right { float: right; width: 53.5%; }
.case-images .top .bgimage { padding-bottom: 45.01557632398754%; }
.case-images .alignment { margin: 3px -3px; }
.case-images .surround { width: 50%; padding: 0 3px; float: left; }
.case-images .surround .bgimage { padding-bottom: 90.59561128526646%; margin-top: 3px; }

.cs-page .pinterestlinkbottom { display: block; color: #fff !important; width: 100%; background-color: #bd081f; font-size: 1em; border-radius: 3px; position: absolute; border: 1px solid #bd081f; max-width: 315px; }
.cs-page .pinterestlinkbottom i { font-size: 1em; position: absolute; top: 50%; left: 10px; margin-top: -20px; }
.cs-page .pinterestlinkbottom:hover { color: #bd081f !important; background-color: #fff; }

.pinlink { position: relative; }
.pinterestlinkbottom { display: block; color: #fff; width: 100%; line-height: 20px; background-color: #bd081f; font-size: 1.2em; border-radius: 3px; padding: 10px 10px 10px 42px; position: relative; margin-top: 15px; border: 1px solid #bd081f; }
.pinterestlinkbottom i { font-size: 1.6em; position: absolute; top: 50%; left: 10px; margin-top: -20px; height: 40px; line-height: 40px; }
.pinterestlinkbottom:hover { color: #bd081f; background-color: #fff; }



.section.overall .btn.red { margin: 15px auto; }
.rev-grey { background-color: #f5f5f5; border: 1px solid #ddd; padding: 20px; margin: 10px auto; font-size: 1em; }
.rev-grey.hiding { display: none; }
.review-selector { background-color: #f5f5f5; padding: 15px 15px 5px; margin-bottom: 15px; }
.review-selector .title { font-size: 1.25em; margin-bottom: 15px; }
.review-selector .selection { line-height: 40px; font-size: 1.25em; }
.review-selector .selection label { cursor: pointer; display: block; margin-bottom: 10px; }
.review-selector .selection input { width: 20px; height: 20px; margin: 10px 10px 10px 0; float: left; border: 1px solid #848484; }
.review-selector .selection .fa { color: #cacaca; }
.review-selector .selection .fa.yellow { color: #edc501; }
.review-selector .review-clear { float: left; padding: 0 15px; line-height: 40px; color: #f68a1f; font-size: 1.2em; text-align: center; font-weight: bold; cursor: pointer; }
.rev-val span.field-validation-error { position: relative; line-height: unset; line-height: normal; display: inline-block; }
.review-stars { position: relative; width: 100px; height: 20px; line-height: 20px; font-size: 1.4em; display: inline-block; float: left; margin-right: 15px; }
.review-stars .stars { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; }
.review-stars .stars.blank { width: 100%; color: #cacaca; }
.review-stars .stars.full { color: #edc501; }
.review-stars .star-connect { width: 100px; }
.review-stars .stars i { width: 20%; height: 20px; line-height: 20px; float: left; }
.revpage em { font-size: 1.2em; display: block; margin-bottom: 10px; font-family: 'Work Sans', sans-serif; }
.revpage strong.person { color: #f68a1f; display: inline-block; line-height: 20px; font-weight: bold; font-size: 1.2em; }

.editor-field.reviewers { height: 40px; padding: 10px 0; }
.editor-field.reviewers label { cursor: pointer; float: left; margin: 0; }
.editor-field.rev-desc textarea { height: 265px; }
.editor-field.photo label { width: 100px; float: left; margin: 0 0 10px; }

i.blank { display: block; float: left; width: 20px; text-align: center; height: 20px; line-height: 20px; font-size: 1.6em; color: #cacaca; cursor: pointer; }
i.full, i.selected { color: #edc501; }
.pointthree { z-index: 1; }
.pointtwo { z-index: 2; }
.pointone { z-index: 1 !important; }
.product-model .surround { margin-bottom: 20px; }

.inner-text.home--offer--h1 { }
.inner-text.home--offer--h1 .offer { font-size: 1.8em; font-weight: 600; padding: 13px 35px; display: inline-block; color: #fff; font-family: 'Work Sans', sans-serif; background-color: #f68b1e; }
.inner-text.home--offer--h1 h1, .inner-text.home--offer--h1 .h1 { }
.inner-text.home--offer--h1 .detail { }

.case-study-slider.single .bx-controls { display: none; }

.home-faqs .faq-question { position: relative; border-bottom: solid 1px #B4B4B4; padding: 15px 55px 15px 0px; cursor: pointer; }
.home-faqs .faq-question h3 { font-size: 25px; color: #231f21; margin: 0px; }
.home-faqs .answer { padding: 15px; }
.home-faqs .answer { color: #666; font-size: 1.3em; font-weight: 300; }
.home-faqs .answer a { color: #434e62; text-decoration: underline; }
.home-faqs .answer a:hover { text-decoration: none; }
.openclose { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; display: inline-block; text-align: center; width: 35px; }
.openclose a { background-color: #B4B4B4; display: inline-block; height: 35px; position: relative; width: 1px; }
.openclose a:after { position: absolute; background-color: #B4B4B4; content: ""; height: 1px; width: 35px; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }
.openclose.closed a { transform: rotate(0deg); transition: 0.50s; }
.openclose.open a { transform: rotate(45deg); transition: 0.50s; }

.home-faqs .answer.shut { height: 0px; overflow: hidden; padding: 0px 15px; }

.more-faq.shut { height: 0px; overflow: hidden; padding: 0px; margin: 0px; }
.toggle-more-faq { display: block; background-color: #3f8da6; color: #fff; line-height: 40px; text-align: center; cursor: pointer; margin: 30px auto 0px auto; max-width: 200px; }
.toggle-more-faq:hover { background-color: #666666; color: #fff; }
.toggle-more-faq span.hide { display: none; }


.comp-slider { }
.comp-slider .slide-inner { background-color: #F5F5F5; border-radius: 20px; width: calc(100% - 14px); margin: 0 auto; text-align: center; padding: 0px 25px; overflow: hidden; }
.comp-slider .slide-inner .top-img { height: 144px; position: relative; overflow: hidden; margin: 0 -25px; background-position: center; background-size: cover; }
.comp-slider .slide-inner .top-img.aspire { background-image: url(images/range/aspire.jpg); }
.comp-slider .slide-inner .top-img.aspireplus { background-image: url(images/range/aspireplus.jpg); }
.comp-slider .slide-inner .top-img.avant { background-image: url(images/range/avant-garde.jpg); }
.comp-slider .slide-inner .top-img.horizon { background-image: url(images/range/horizon.jpg); }
.comp-slider .slide-inner .top-img.ultra { background-image: url(images/range/ultra.jpg); }
.comp-slider .slide-inner .top-img.panorama { background-image: url(images/range/panorama.jpg); }
.comp-slider .slide-inner .top-img.vogue { background-image: url(images/range/vogue.jpg); }
.comp-slider .slide-inner .top-img.prestige { background-image: url(images/range/prestige.jpg); }
.comp-slider .slide-inner .top-img.dynamic { background-image: url(images/range/dynamic.jpg); }
.comp-slider .slide-inner h2 { color: #3f8da6; }
.comp-slider .slide-inner h3 { color: #3f8da6; font-family: 'Work Sans', sans-serif; font-size: 1.1em; text-transform: uppercase; }
.comp-slider .slide-inner .colourbx { margin-bottom: 10px; font-family: 'Work Sans', sans-serif; padding: 8px; font-size: 1.1em; line-height: 1; }
.comp-slider .slide-inner .colourbx strong { margin-bottom: 5px; display: block; line-height: 1 !important; }
.comp-slider .slide-inner .colourbx.agr { background-color: #24353F; border: 1px solid #24353F; color: #fff; }
.comp-slider .slide-inner .colourbx.whi { background-color: #fff; border: 1px solid #8A8D8F; }
.comp-slider .slide-inner .colourbx.crw { background-color: #F6F3CC; border: 1px solid #8A8D8F; }
.comp-slider .slide-inner .colourbx.gra { background-color: #8A8D8F; border: 1px solid #8A8D8F; color: #fff; }
.comp-slider .slide-inner .colourbx.blk { background-color: #000; border: 1px solid #000; color: #fff; }
.comp-slider .slide-inner .colourbx.met { background-color: #343434; border: 1px solid #000; color: #fff; }
.comp-slider .slide-inner .colours { min-height: 270px; }
.comp-slider .slide-inner .line { height: 1px; background-color: #3F8DA6; }
.comp-slider .slide-inner .point { position: relative; padding: 20px 105px 20px 0px; text-align: left; font-family: 'Work Sans', sans-serif; font-size: 1.15em; min-height: 110px; }
.comp-slider .slide-inner .point img { position: absolute; right: 0px; top: 50%; transform: translateY(-50%); }
.comp-slider .slide-inner .point.d-img { padding: 20px 127px 20px 0px; }
.comp-slider .slide-inner .point.d-img .txt { width: 142px; position: absolute; top: 50%; left: 0px; transform: translateY(-50%); }
.comp-slider .slide-inner .point.d-img .txt .sml-txt { font-size: 0.9em; }
.comp-slider .slide-inner .point img.left { max-width: 52px; }
.comp-slider .slide-inner .point img.right { max-width: 52px; right: 60px; }
.comp-slider .slide-inner .point h3 { padding: 0px; margin: 0px 0px 5px 0px; color: #3f8da6; }
.comp-slider .slide-inner .point ul { padding-left: 15px; margin-top: 0px; margin-bottom: 5px; }
.comp-slider .slide-inner .point ul li span { transform: translateX(-5px); display: block; width: calc(100% + 5px); }
.comp-slider .slide-inner .pricing { font-family: 'Work Sans', sans-serif; padding-bottom: 40px; min-height: 470px; }
.comp-slider .slide-inner h2 { font-weight: 600; font-size: 1.9em; }
.comp-slider .slide-inner .pricbx { background-color: #fff; border: 2px solid #3f8da6; font-weight: 700; font-size: 2em; padding: 10px; }
.comp-slider .slide-inner .pricing h2 { font-size: 1.6em; }
.comp-slider .slide-inner .pricing h3 { margin: 15px 0px 10px; font-size: 1.35em; }
.comp-slider .slide-inner .pricing strong { margin-bottom: 5px; display: block; }
.comp-slider .slide-inner .content { position: relative; padding-top: 30px; }
.comp-slider .slide-inner .dw-xs-6 .pricbx { font-size: 1.5em; }
.comp-slider .slide-inner .content .num { position: absolute; width: 78px; height: 78px; left: 50%; top: -35px; transform: translateX(-50%); }
.comp-slider .fa-angle-left { position: fixed !important; left: 0px; top: 50% !important; transform: translateY(-50%); display: block; background-color: #666666; width: 50px !important; height: 50px !important; line-height: 50px; text-align: center; color: #fff !important; }
.comp-slider .fa-angle-right { position: fixed !important; right: 0px; top: 50% !important; transform: translateY(-50%); background-color: #666666; width: 50px !important; height: 50px !important; line-height: 50px; text-align: center; color: #fff !important; }

.bespoke-points { }
.bespoke-points .point { min-height: 307px; margin-bottom: 30px; position: relative; }
.bespoke-points .point .left-img { min-height: 307px; width: calc(100% - 760px); background-size: cover; background-position: center; }
.bespoke-points .point .left-img.aspire { background-image: url(images/bespoke-sizes/aspire.jpg); }
.bespoke-points .point .left-img.ultra { background-image: url(images/bespoke-sizes/ultra.jpg); }
.bespoke-points .point .left-img.panorama { background-image: url(images/bespoke-sizes/panorama.jpg); }
.bespoke-points .point .left-img.prestige { background-image: url(images/bespoke-sizes/prestige.jpg); }
.bespoke-points .point .left-img { background-image: url(images/banners/about-us.jpg); }
.bespoke-points .point .content { width: 760px; position: absolute; right: 0px; top: 0px; overflow: hidden; height: 100%; border-radius: 0px 100px 100px 0px; background-color: #F5F5F5; }
.bespoke-points .point .content .inner { height: 100%; position: relative; }
.bespoke-points .point .content h3 { margin-top: 0px; color: #3f8da6; font-size: 2.4em; font-weight: 700; margin-bottom: 0px; }
.bespoke-points .point .content .dims { margin: 25px 0px; font-size: 1.5em; font-family: 'Work Sans', sans-serif; }
.bespoke-points .point .content .txt { position: absolute; top: 50%; left: 40px; transform: translateY(-50%); }
.bespoke-points .point .content .txt .btn { width: 190px; }
.bespoke-points .point .content .dim-diag { width: 380px; height: 380px; position: absolute; right: 132px; top: 50%; transform: translate(40%, -50%); background-color: #fff; border-radius: 100%; }
.bespoke-points .point .content .dim-diag .svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.bespoke-points .point .content .dim-diag .width { font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 1.4em; color: #3f8da6; position: absolute; top: 95px; left: 255px; }
.bespoke-points .point .content .dim-diag .length { font-family: 'Work Sans', sans-serif; font-weight: 700; color: #3f8da6; font-size: 1.4em; position: absolute; bottom: 88px; left: 200px; }

.colourbx { font-family: 'Work Sans', sans-serif; text-align: center; font-size: 1.8em; font-weight: 700; border: 1px solid #767674; line-height: 80px; margin-bottom: 15px; }
.colourbx.grap { background-color: #24353F; color: #fff; }
.colourbx.whit { background-color: #fff; color: #666666; }
.colourbx.crea { background-color: #F6F3CC; color: #666666; }
.colourbx.grey { background-color: #8A8D8F; color: #fff; }

.d-grey-bg { background-color: #F5F5F5; padding: 30px 0px; }
.dd-grey-bg { background-color: #787878; }
.l-grey-bg { background-color: #FFFBFB; padding: 30px 0px; }
.grey-bg { background-color: #f5f5f5; }
.blue-bg { background-color: #3f8da6; }
.dblue-bg { background-color: #007fa8; }
.white-bg { background-color: #fff; padding: 30px 0px; }
.white-bg.no-padd { padding: 0px; }
.lg-tb-padd { padding: 80px 0px; }
.lgrey-bg { background-color: #EFEFEF; }
.white-txt { color: #fff; }
.dgrey-txt { color: #2A2A2A; }
.product-cards { text-align: center; font-family: 'Work Sans', sans-serif; font-size: 1.4em; }
.product-cards { text-align: center; font-family: 'Work Sans', sans-serif; font-size: 1.4em; }
.product-cards h3 { color: #3f8da6; font-size: 1.2em; }
.product-cards img { margin: 30px auto 0px; }

.purp-txt { color: #9c5d89; }

.white-bord { border: 1px solid #fff; }

.txt-bx { font-family: 'Work Sans', sans-serif; font-size: 1.4em; }
.txt-bx ul { padding-left: 20px; }

.cd-image-container { position: relative; width: 90%; overflow: hidden; max-width: 768px; margin: 2em auto; }
.cd-image-container img { display: block; }


.cd-image-label { position: absolute; bottom: 0; right: 0; color: #ffffff; padding: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s; transition: transform 0.3s 0.7s, opacity 0.3s 0.7s; }
.cd-image-label.is-hidden { visibility: hidden; }
.is-visible .cd-image-label { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }

.cd-resize-img { position: absolute; top: 0; left: 0; width: 0; height: 100%; overflow: hidden; background: url("images/bespokegardenrooms/attached.jpg") no-repeat left top; background-size: auto 100%; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cd-resize-img .cd-image-label { right: auto; left: 0; }
.is-visible .cd-resize-img { width: 50%; -webkit-animation: cd-bounce-in 0.7s; -moz-animation: cd-bounce-in 0.7s; animation: cd-bounce-in 0.7s; }

.compare-slider .container { max-width: 550px; padding: 0px; }
.compare-slider #comparison { width: 100%; padding-bottom: 72.73%; overflow: hidden; position: relative; }
.compare-slider figure { position: absolute; background-image: url(images/bespokegardenrooms/freestanding.jpg); background-size: cover; font-size: 0; width: 100%; height: 100%; margin: 0; }
.compare-slider #divisor { background-image: url(images/bespokegardenrooms/attached.jpg); background-size: cover; position: absolute; width: 50%; box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3); bottom: 0; height: 100%; }
.compare-slider #divisor::before, #divisor::after { content: ""; position: absolute; right: -2px; width: 4px; height: calc(50% - 25px); background: white; z-index: 3; }
.compare-slider #divisor::before { top: 0; box-shadow: 0 -3px 8px 1px rgba(0, 0, 0, 0.3); }
.compare-slider #divisor::after { bottom: 0; box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3); }
.compare-slider #handle { position: absolute; height: 50px; width: 50px; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); z-index: 1; background-color: #fff; border-radius: 100%; box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3); }
.compare-slider #handle::before, #handle::after { content: ""; width: 0; height: 0; border: 6px inset transparent; position: absolute; top: 50%; margin-top: -6px; }
.compare-slider #handle::before { border-right: 6px solid #666; left: 50%; margin-left: -17px; }
.compare-slider #handle::after { border-left: 6px solid #666; right: 50%; margin-right: -17px; }
.compare-slider input[type=range] { -webkit-appearance: none; -moz-appearance: none; position: absolute; top: 50%; left: -25px; transform: translateY(-50%); background-color: transparent; width: calc(100% + 50px); z-index: 2; }
.compare-slider input[type=range]:focus, input[type=range]:active { border: none; outline: none; }
.compare-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 50px; width: 50px; border-radius: 50%; background: transparent; }
.compare-slider input[type=range]::-moz-range-track { -moz-appearance: none; height: 15px; width: 100%; background-color: transparent; position: relative; outline: none; }

strong.bl { color: #3f8da6; }


@keyframes cd-bounce-in {
    0% { width: 0; }
    60% { width: 55%; }
    100% { width: 50%; }
}

.cd-handle { position: absolute; height: 44px; width: 44px; left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; border-radius: 50%; background: #fff no-repeat center center; cursor: move; opacity: 0; -webkit-transform: translate3d(0, 0, 0) scale(0); -moz-transform: translate3d(0, 0, 0) scale(0); -ms-transform: translate3d(0, 0, 0) scale(0); -o-transform: translate3d(0, 0, 0) scale(0); transform: translate3d(0, 0, 0) scale(0); }
.cd-handle .inner-rel { width: 100%; height: 100%; display: block; position: relative; }
.cd-handle .inner-rel:before { content: ""; display: block; height: 500px; width: 10px; background-color: #fff; position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; }
.cd-handle .inner-rel i:first-child { position: absolute; top: 50%; transform: translateY(-50%); left: 10px; }
.cd-handle .inner-rel i:last-child { position: absolute; top: 50%; transform: translateY(-50%); right: 10px; }
.is-visible .cd-handle { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); -ms-transform: translate3d(0, 0, 0) scale(1); -o-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s; transition: transform 0.3s 0.7s, opacity 0s 0.7s; }

.l-r-vid { padding: 15px; background-color: #f5f5f5; margin: 100px 0px; display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; }
.l-r-vid.my-15 { margin: 15px 0px; }
.l-r-vid .txt { position: relative; padding: 15px; width: calc(100% - 610px); float: right; }
.l-r-vid .txt .inner { max-width: 360px; margin: 0 auto; height: auto; display: block; }
.l-r-vid .txt .inner.wide { max-width: 480px; }
.l-r-vid .vid { left: 0px; top: 50%; width: 50%; }
.l-r-vid .vid .inner-rel { position: relative; padding-top: 56.25%; }
.l-r-vid .vid .inner-rel .video { width: 100% !important; height: 100% !important; position: absolute; top: 0px; left: 0px; }
.l-r-vid .vid .inner-rel.li-bg { background-size: cover; background-position: center; background-image: url(images/lighting-thumb.jpg); }
.l-r-vid .vid .inner-rel.rb-bg { background-size: cover; background-position: center; background-image: url(images/shade-thumb.jpg); }

.l-r-vid .clear { display: none !important; }
.ab-img-right { position: relative; }
.ab-img-right .txt-bx { max-width: 275px; }
.ab-img-right .image-round { width: 180px; height: 180px; position: absolute; top: 50%; right: 0px; transform: translateY(-50%); background-color: #fff; border-radius: 100%; }
.ab-img-right .image-round .inner { position: relative; width: 100%; height: 100%; }
.ab-img-right .image-round .inner.veranda img { position: absolute; top: 50%; left: 14%; transform: translateY(-50%); }
.ab-img-right .image-round .inner.veranda span { font-weight: 700; color: #3f8da6; }
.ab-img-right .image-round .inner.veranda .width { position: absolute; right: 26%; top: 70%; }
.ab-img-right .image-round .inner.veranda .depth { position: absolute; right: 14%; top: 25%; }

.center-txt { text-align: center; }

.max-w-770 { max-width: 770px; margin: 0 auto; }

.inline-btns .btn { display: inline-block; margin: 0px 20px; }

.no-marg { margin: 0px !important; }

h2.white { color: #fff; }

.bl-bg { background-color: #3f8da6; }

.padd-10 { padding: 10px; }
.padd-15 { padding: 15px; }
.padd-20 { padding: 20px; }

.gr-bg { background-color: #f5f5f5; }

.no-marg { margin: 0px; }
.center-block { margin: 0 auto; display: block; }
.max-w-970 { max-width: 970px; }
.max-w-1370 { max-width: 1370px; }
.max-w-1640 { max-width: 1640px; }

.lg-txt { font-size: 1.2em; }

.prod-cards { margin: 0px -8px; }
.prod-cards .prod-card { width: calc(100% / 4); padding: 8px; }
.prod-cards .card-inner { box-shadow: 0px 3px 6px #00000033; max-width: 260px; margin: 0 auto; }
.prod-cards a:hover .card-inner .btm { background-color: #f68b1e; }
.prod-cards .card-inner .img { height: 212px; background-color: #333; background-position: center; background-size: cover; }
.prod-cards .card-inner .img.asp2 { background-image: url("images/aspire-two-posts.jpg") }
.prod-cards .card-inner .img.asp3 { background-image: url("images/aspire-three-posts.jpg") }
.prod-cards .card-inner .img.asplu { background-image: url("images/aspire-plus-veranda.jpg") }
.prod-cards .card-inner .img.sol2 { background-image: url("images/shelf-solaris-2-posts.jpg") }
.prod-cards .card-inner .img.sol3 { background-image: url("images/shelf-solaris-3-posts.jpg") }
.prod-cards .card-inner .img { height: 212px; background-color: #333; }
.prod-card .txt { background-color: #fff; padding: 10px; text-align: center; }
.prod-card .txt .title { color: #3f8da6; max-width: 170px; margin: 0 auto; font-weight: 700; margin-bottom: 10px; font-size: 1.2em; }
.prod-card .txt .save { color: #af3f32; max-width: 170px; margin: 0 auto; font-weight: 700; margin-bottom: 10px; font-size: 1.6em; font-family: 'Work Sans', sans-serif; }
.prod-card .txt .cost { font-family: 'Work Sans', sans-serif; font-size: 1.2em; }
.prod-card .txt .cost strong { color: #3f8da6; font-weight: 700; }
.prod-card .btm { background-color: #3f8da6; color: #fff; text-align: center; font-family: 'Work Sans', sans-serif; padding: 10px; }
.ws-fnt { font-family: 'Work Sans', sans-serif; }
.white-link { color: #fff !important; }
.white-link:hover { text-decoration: underline; }
.ribbon { padding: 10px; font-size: 1.4em; position: relative; z-index: 8; }
.ribbon a { color: #fff; }

.under-l-link { text-decoration: underline; }
.under-l-link:hover { text-decoration: none; }

.step-point { background-color: #3f8da6; color: #fff; width: 55px; height: 55px; position: relative; text-align: center; line-height: 55px; border-radius: 100%; margin: 0 auto 30px; font-size: 1.8em; }
.step-point:before { content: ""; position: absolute; height: 0px; width: 300px; left: 100%; top: 50%; border: none; transform: translateY(-50%); border-top: 3px dashed #f68b1e; }
.step-point.last:before { display: none; }

.flex-table { font-size: 1.3em; }
.flex-table .head { text-align: center; background-color: #3f8da6; color: #fff; padding: 15px; display: flex; justify-content: center; align-items: center; }
.flex-table .row { padding: 15px; display: flex; justify-content: center; align-items: center; font-family: 'Work Sans', sans-serif; }
.flex-table .col-first .row, .flex-table .col-first .head { justify-content: start; text-align: left; }
.flex-table .row:nth-child(odd) { background-color: #f1f1f1; }

.solaris-diag { position: relative; }
.solaris-diag .img-point { cursor: pointer; position: absolute; width: 25px; height: 25px; color: #fff; background-color: #3f8da6; border-radius: 100%; }
.solaris-diag .img-point i { width: 25px; line-height: 25px; text-align: center; }
.solaris-diag .img-point.roof { top: 20%; left: 22%; }
.solaris-diag .img-point.post { bottom: 56%; right: 24%; }
.solaris-diag .img-point.pitch { bottom: 51%; right: 17%; }

.solaris-diag .img-point:before { background-color: #f68b1e; }


.solaris-diag .info-box { background-color: #3f8da6; width: 100%; text-align: center; font-size: 1.2em; }

.solaris-diag .info-box .padd { padding: 15px; }

.solaris-diag .info-box.poly { max-width: 275px; left: -25%; top: 25%; position: absolute; }
.solaris-diag .info-box.germ { max-width: 265px; left: -24%; bottom: 26%; position: absolute; }
.solaris-diag .info-box.post { max-width: 212px; right: -21%; bottom: 52%; z-index: 1; position: absolute; text-align: left !important; }
.solaris-diag .info-box.pitch { max-width: 185px; right: -20%; bottom: 26%; z-index: 1; position: absolute; }

.solaris-diag .info-box.poly:before { content: ""; display: block; position: absolute; width: 76px; height: 29px; right: -24%; bottom: 71%; border-bottom: 2px solid #3f8da6; border-right: 2px solid #3f8da6; }
.solaris-diag .info-box.post:before { content: ""; display: block; position: absolute; width: 111px; height: 1px; right: 98%; bottom: 50%; border-bottom: 2px solid #3f8da6; }
.solaris-diag .info-box.pitch:before { content: ""; display: block; position: absolute; width: 101px; height: 77px; right: 93%; bottom: 71%; border-bottom: 2px solid #3f8da6; border-left: 2px solid #3f8da6; }
.solaris-diag .info-box .fa-times { width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 100%; position: absolute; right: 0px; top: 0px; background-color: #f68b1e; transform: translate(50%, -50%); cursor: pointer; }
.no-overflow { overflow: hidden; }

.solaris-diag .info-box .de-flag { width: 27px; height: 27px; background-image: url(images/de-flag.svg); background-position: center; background-size: cover; border-radius: 100%; }


@media screen and (min-width: 1660px) {
    .comp-slider .fa-angle-left, .comp-slider .fa-angle-right { display: none !important; }
}

@media screen and (min-width: 1231px) {
    .split .section.pa { margin: 0 88px; }
    .intro.video.sec .video-container { margin-top: 70px; }
    .outdoor-structures.banner.home { position: relative; background-position: center top; }
    .outdoor-structures.banner.home #roundel { }
    .outdoor-structures.banner.home .inner .inner-text { max-width: 750px !important; }
    .outdoor-structures.banner.home .alan { position: absolute; left: 50%; bottom: 80px; z-index: 8; transform: translateX(300px); width: 300px; height: auto; }
    .outdoor-structures.banner.home .lyg-logo { position: absolute; bottom: 310px; left: 50%; transform: translateX(230px); width: 150px; height: auto; }
}

@media screen and (max-width: 1230px) {
    .inner .inner-image { top: 23%; }
    .loc-list-flx { flex-direction: column; }
    .loc-list-flx .hor-divider { display: none; }
}

@media screen and (min-width: 992px) and (max-width: 1230px) {

    .request-quote { height: 245px; }
    .step-point:before { width: 230px; }
    .item .grey-box.compact em { position: static; margin-top: 10px; display: block; }

    .outdoor-structures.banner.home { position: relative; background-position: center top; }
    .outdoor-structures.banner.home #roundel { top: 160px; }
    .inner .inner-text h1 { margin: 15px auto; }
    .outdoor-structures.banner.home .inner .inner-text { max-width: 750px !important; }
    .outdoor-structures.banner.home .alan { position: absolute; left: 50%; bottom: 20px; z-index: 8; transform: translateX(200px); width: 270px; height: auto; }
    .outdoor-structures.banner.home .lyg-logo { position: absolute; bottom: 110px; left: 50%; transform: translateX(100px); width: 150px; height: auto; z-index: 21; }
    .inner .inner-text--link { margin-top: 15px; transform: translateY(15px); }


    .container.videoapsire { margin-top: 27.6%; }
    .overtop { margin-top: -45px; }
    .nav li a { font-size: 0.85em; }
    .nav ul li span i { color: #87ac3f; font-size: 1.5em; float: right; margin: 10% !important; }
    .inner .inner-text { top: 34%; }
    .inner .inner-text .inner-text--link { margin-top: 70px; }
    .inner .inner-image { right: 0; max-width: 490px; }
    .item .thumbnails .view-more { left: 25px; bottom: 20px; }
    .item .thumbnails .view-icon { top: 15px; left: 45px; }

    .cs-page .video-section, .cs-page .bottom-message .text { padding: 15px; }
    .cs-page .video-section p, .cs-page .bottom-message .text p { font-size: 0.9em; }
    .cs-page .bottom-message .bgimage { min-height: 290px; }
    .nav li .innerdrop .bottom-link { bottom: -28%; }
    #roundel { top: 25%; right: 0; }
    .nav li div .sunspacesnav li { }
    .nav li div .bigger li { width: 22.8% !important; }
    .nav li div .rooms li { width: 12.4% !important; }
    .nav li div .awnings li { width: 31.3% !important; }
    .nav li div .showrooms li { width: 48% !important; }
    .head-top { top: 219px !important; }
    .views .grey-box { min-height: 280px; }
    .sunspaces .overlap { width: 470px; }


    .internal .inner .btn.white { margin-top: 20px; }
    .nav li.home { width: 6% !important; }
    .nav li a { font-size: .85em; }
    .nav li span { font-size: .85em; }
    .personalextrasbot .one .green .text { font-size: 0.85em; }
    .personalextrasbot .one .green { padding: 10px; min-height: 237px; }
    .product-details .sunroom .details.btmright.mid { right: 32%; z-index: 9; }
    .product-details .sunroom .details.btmmiddle.ultra { right: 40%; }
    .product-details .sunroom .details.btmlefttwo { left: -6px; }
    .product-details .sunroom .bottom-middle { right: 23%; }
    .product-details .sunroom .bottom-right { top: 80%; }
    .product-details .sunroom .details.topright { right: 17%; top: -24%; }
    .product-details .sunroom #voguegrtr { right: 9%; top: -45%; }
    .product-details .sunroom #dynamicgrtr { right: 10%; top: -45%; }
    .product-details .sunroom.compact .details.btmright.mid { right: 37%; }
    .kids { background-position: 66%; }
    .casestudy .section.categories .dw-md-4:nth-child(3n+1) { clear: both; }
    .product-details .sunroom.panorama .top-right .point { right: 432px; }
    .banner .container { position: relative; top: 0% }
    .masthead #call { margin-left: 0 !important; }


    .inner-text.home--offer--h1 { transform: translateY(-85px); }

    .inner-text.home--offer--h1 h1 { margin: 0px !important; }
    .bespoke-points .point .left-img { min-height: 307px; width: calc(100% - 670px); background-size: cover; background-position: center; }
    .bespoke-points .point .content { width: 670px; position: absolute; right: 0px; top: 0px; overflow: hidden; height: 100%; border-radius: 0px 100px 100px 0px; background-color: #F5F5F5; }
}



@media screen and (min-width:992px) {
    .navigation { background-color: #EFEFEF; border-bottom: 1px solid #f5f5f5; }

    .solaris-diag .info-box { display: block !important; }

    .solaris-diag .info-box .fa-times { display: none !important; }

    .our-rooms img { margin: 15px 0; }
    #headerleft { padding-top: 20px; width: 345px; }
    .header-grid a { color: #fff; font-weight: bold; }
    .masthead #call div { width: 22px; height: 22px; display: inline-block; margin-right: 10px; border-radius: 3px; line-height: 22px; text-align: center; }
    .masthead #call div i { font-size: 1.2em; color: #007FA8; }

    .center-icons-mobile { display: none; }
    #show-details { display: none; }

    .map .dw-md-5 { width: 37.6%; padding-right: 0; }
    .map .dw-md-7 { width: 62.4%; padding-left: 0; }
    .section.overall { margin: 0 -10px !important; }
    .section.overall .dw-lg-9 { width: 70.5%; padding: 20px 10px 0 10px; }
    .section.overall .dw-lg-3 { width: 29.5%; padding: 0px 10px; }
    .section.inspire .rightimg { float: right; background-repeat: no-repeat; background-position: 50%; }
    .product-config .dw-md-2 { width: 5%; margin: auto; }
    .product-config .dw-md-3 { width: 30.6%; }
    .first .border-line { border-top: 1px solid #efefef; margin: 15px 25px 0 5px; }
    .second .border-line { border-top: 1px solid #efefef; margin: 15px 25px 0 5px; }
    .third .border-line { border-top: 1px solid #efefef; margin: 15px 25px 0 5px; }
    .personalextrasbot .one { width: 32.7%; }
    .personalextrasbot .middle { width: 16.83%; }
    .personalextrasbot .middletwo { width: 25.204%; }
    .personalextrasbot .last { width: 25.201%; }
    .personalextrasbot .last img { width: 100%; }
    .product-details .sunroom .center { max-width: 550px; margin: 135px auto 0 auto; }
    .product-details .sunroom.gr .center { margin-top: 280px; }
    .product-details .sunroom .center.avants { margin-top: 335px; }
    .product-details .sunroom .center.vista { margin-top: 215px; }
    .casestudy .dw-md-4:nth-child(3n+1) { clear: both; }


    .md-lrg-txt { font-size: 1.8em !important; max-width: 731px !important; }
    .section.rel { position: relative; }
    .section.rel .md-toright { float: right; }
    .section.rel .md-ab-right { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); }
    .section.rel .md-ab-left { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); }
}

@media screen and (max-width:991px) {
    .step-point:before { display: none; }
    .banner.roof-blinds { height: 500px; }
    .inline-btns .btn { margin: 0px 0px 30px; }
    .banneroverlay.rb { height: 500px; }

    .menuicon-flex { display: flex; align-items: center; justify-content: right; grid-gap: 20px; }
    .menuicon-flex > .phone-icon { order: -1; }

    .prod-cards .prod-card { width: calc(100% / 3); padding: 8px; }

    .l-r-vid { margin: 30px 0px; flex-wrap: wrap; }
    .l-r-vid > * { width: 100%; }
    .l-r-vid .txt { width: 100%; float: none; }
    .l-r-vid .txt .inner { max-width: 500px; margin: 0 auto; height: auto; }
    .l-r-vid .vid { width: 100%; position: static; transform: none; margin: 0 auto; }
    .l-r-vid .vid .inner-rel { position: relative; padding-top: 56.25%; }
    .l-r-vid .vid .inner-rel .video { display: block !important; }


    .md-ab-left, .md-ab-right { margin-top: 15px; text-align: center; }
    .md-ab-left img, .md-ab-right img { margin: 0 auto; }

    .banner.bespoke .inner-image { display: none; }

    .banner.bespoke .inner-text h1 { width: 100%; }
    .banner.bespoke .inner-text { max-width: 100%; }
    .banner.bespoke .inner-text strong a { color: #fff; }
    .banner.bespoke .inner-text strong a:hover { text-decoration: underline; }

    .masthead.fnt-ws { display: none; }


    h1 span { padding-top: 0px; }
    .container.videoapsire { margin-top: 37.6%; }
    .white-nav { background-color: #fff; }
    .nav li span.white-nav i { color: #fff; float: right; font-weight: 800; font-size: 1.5em; width: 15%; line-height: 39px; text-align: center; border-bottom: 1px solid #5fa0b4; }
    .nav li span.white-nav a { color: #fff; font-weight: 700; }
    .innerdrop ul { padding: 8px 0 5px 8px; }
    .nav .innerdrop ul li a { color: #fff; }
    .nav li .innerdrop .bottom-link, .nav li .innerdrop .bottom-link-double, .nav li div .showrooms li.hours, .nav li .innerdrop .first span, .nav li .innerdrop .second span { color: #f68b1e; font-weight: 700; }
    #headerright .esta { margin-top: 25px; position: absolute; right: 35%; }
    #call, #mail { display: none; }
    .masthead .container.top { position: relative; }
    .mobile-overlay { display: block; }
    .shut { height: 0px; overflow: hidden; }
    .nav.open { height: auto; background-color: #3f8da6; position: relative; }
    .phone-icon { display: block; }
    .menuicon { font-size: 2.1em; display: block; visibility: visible !important; cursor: pointer; height: 100%; color: #2A2A2A; }
    .nav { width: 100%; padding: 0; margin: 0px; z-index: 1; }
    .nav li.orange { background-color: #f68b1f; }
    .nav li a:hover { text-decoration: none; }
    .nav li.drop i.fa.fa-angle-down { float: right; font-size: 1.5em; text-align: center; color: #fff; width: 15%; border-bottom: 1px solid #5fa0b4; line-height: 39px; }
    .nav li { width: 100% !important; float: none; text-align: left; border-bottom: 1px solid #5fa0b4; list-style: none; }
    .nav li.last { }
    .nav li.drop { border: 0; }
    .nav div.shut { height: 0px; overflow: hidden; }
    .nav div ul { padding: 0px; list-style: none; }
    .nav li a { padding-left: 3%; height: 40px; line-height: 40px; color: #fff; display: block; list-style: none; font-size: 1.15em; font-family: 'Work Sans', sans-serif; width: 85%; }
    .nav li .title { font-weight: 700; border-bottom: 1px solid #5fa0b4; padding-left: 3%; height: 40px; line-height: 40px; color: #fff; display: block; float: left; list-style: none; font-size: 1.15em; font-family: 'Work Sans', sans-serif; width: 85%; }
    .nav .bottom-link-tripple { border-bottom: 1px solid #5fa0b4; width: 100%; }

    .nav li a:hover { color: #E1E1E1; }
    .nav li a.arrow { border-bottom: 1px solid #5fa0b4; }
    .nav a.arrow.open { background-color: #E1E1E1; }
    .nav li a.on { background-color: transparent; }
    ul .navimage { display: none; }
    #headerleft { z-index: 99; padding-top: 20px; padding-bottom: 20px; }
    #headerright { position: relative !important; min-height: 50px; }
    #headerright span a { float: right; margin-right: 25px; display: block; width: 21px; height: 19px; background-repeat: no-repeat; margin-top: 10px; }
    #headerright span a.facebook { color: #395793; font-size: 1.6em; }
    #headerright span a.twitter { color: #4297ff; font-size: 1.9em; }
    #headerright span a.google { color: #de4b3b; font-size: 1.7em; }
    #slideheader { background-color: #f5f5f5; height: 50px; line-height: 50px; color: #3f8da6; text-align: center; padding: 0 15px; font-size: 1.5em; cursor: pointer; font-weight: 800; text-transform: uppercase; }
    #slideheader i { float: right; height: 50px; line-height: 50px; color: #3f8da6; }
    li#option1.notactive, li#option2.notactive, li#option3.notactive, li#option4.notactive { width: 100%; height: auto; display: block; }

    iframe#video, #video object, #video embed, #placeholder img { display: none; }
    .product-details .sunroom .top-left, .product-details .sunroom .top-right, .product-details .sunroom .bottom-left, .product-details .sunroom .bottom-right, .product-details .sunroom .bottom-middle, .product-details .sunroom .details.topmiddle, .product-details .sunroom .details.btmmiddlethree, .product-details .sunroom .details.btmlefttwo, .product-details .sunroom .details.btmlefttwo, .product-details .sunroom .middle { display: none; }
    .product-details .sunroom .details.topleft, .product-details .sunroom .details.topright, .product-details .sunroom .details.btmleft, .product-details .sunroom .details.btmright, .product-details .sunroom .details.btmmiddle { display: none; }
    .product-details .sunroom .center img { margin: auto; display: block; }
    .product-details .sunroom .center { margin-top: 20px }
    .product-details .sunroom { margin-bottom: 20px !important; }
    .product-details .sunroom .center .center-icons-mobile .icon i { position: absolute; top: 0; left: 0; width: 35px; height: 35px; line-height: 35px; text-align: center; color: #fff; background-color: #3f8da6; border-radius: 50%; font-size: 1.7em; }
    .product-details .sunroom .center .center-icons-mobile .i-middle .icon { left: 35%; position: absolute; top: 160px; }
    .product-details .sunroom .center .center-icons-mobile .i-middle .icon.pan { left: 47%; position: absolute; top: 336px; }
    #show-details .overlaypop { background-color: #fff; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .6; }
    #show-details { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; opacity: 0; visibility: hidden; }
    #show-details.open { opacity: 1; visibility: visible; }
    #show-details .details { position: relative; width: 100%; max-width: 800px; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); max-height: 100%; overflow-y: auto; background-color: #3f8da6; height: auto; }
    #show-details .close { font-size: 16px; display: block; position: absolute; top: 5px; right: 40px; right: 5px; cursor: pointer; z-index: 999; }
    #show-details .close .fa { font-size: 2em; color: #fff; float: right; }
    #show-details .close .text { line-height: 30px; margin-left: 10px; float: left; padding: 0 15px; font-size: 0.85em; }
    #show-details .details-up { padding: 30px 15px; position: relative; color: #fff; min-height: 200px; }
    .middle-services { padding: 15px; }
    .item .description { margin-top: 20px; }
    .item img { margin: auto; }
    .middle-services .text { margin-bottom: 20px; }
    .sunspaces { margin: 0; }
    .grey-form { padding: 15px; }
    .cs-page .bottom-message .text { width: 100%; float: none; }
    .cs-page .bottom-message .image { display: none; }
    .revpage { margin-bottom: 15px; }
    .section.inspire .rangeimg div { height: 200px !important; }
    .newsfeed .blogpost .image div { max-width: 345px; }
    .newsfeed .blogpost .image { padding-bottom: 50%; }
    .nav li div ul li a div .sub { display: none; }
    #slideheader, #featured ul li a { text-transform: capitalize; font-size: 1.2em; }
    #featured .close { height: 0; overflow: hidden; text-transform: uppercase; }
    .new-heaters .dw-xs-12 { width: 92%; margin: auto; }
    .product-details .sunroom .white-box { margin-top: 40px; }
    #featured ul li { display: block; width: 100%; height: auto; }
    .top-msg-banner { font-size: 1.0em; }
    .solaris-diag .info-box:before { display: none !important; }
    .solaris-diag .info-box { left: 50% !important; top: 50% !important; bottom: auto !important; right: auto !important; transform: translate(-50%, -50%); display: none; }
}

@media screen and (min-width: 900px) and (max-width: 1100px) {

    .whiteredbtn { margin-left: 23.33%; color: #bd081f !important; }
}

@media screen and (min-width: 700px) and (max-width: 900px) {

    .whiteredbtn { margin-left: 15.33%; color: #bd081f !important; }
}

@media screen and (min-width: 400px) and (max-width: 700px) {

    .whiteredbtn { margin-left: 3.33%; color: #bd081f !important; }
    .horizonplus { background-color: #bd081f; padding-left: 12%; padding-right: 12%; padding-bottom: 35px; }
}

@media screen and (min-width: 768px) and (max-width: 991px) {

    .flex-table { font-size: 1.3em; }
    .flex-table .head { height: 70px; }
    .flex-table .row { height: 70px; }

    .bespoke-points .point .left-img { min-height: 250px; width: calc(100%); background-size: cover; background-position: center; }
    .bespoke-points .point .content { z-index: -1; width: 100%; position: absolute; right: 0px; top: 250px; overflow: hidden; height: 100%; border-radius: 0px 100px 100px 0px; background-color: #F5F5F5; }
    .bespoke-points .point { margin-bottom: 350px; }

    .stockists-sell .product-listing .btn.aqua { width: 100%; }


    .outdoor-structures.banner.home { position: relative; background-image: url(images/love-your-garden/love-your-garden-ss-banner.jpg) !important; background-position: center top; }
    .outdoor-structures.banner.home #roundel { top: 100px }
    .inner .inner-text h1 { }
    .outdoor-structures.banner.home .inner .inner-text { max-width: 750px !important; }
    .outdoor-structures.banner.home .alan { position: absolute; left: 50%; bottom: 70px; z-index: 5; transform: translateX(100px); width: 270px; height: auto; }
    .outdoor-structures.banner.home .lyg-logo { position: absolute; bottom: 210px; left: 50%; transform: translateX(00px); width: 150px; height: auto; z-index: 21; }
    .inner .inner-text--link { margin-top: 15px; transform: translateY(15px); }
    .outdoor-structures.banner.home .header-buttons { transform: translateY(30px); }
    .outdoor-structures.banner.home .btn { margin-top: 15px; margin-left: 0px; }

    .container.videoapsire { margin-top: 37.6%; }
    .overtop .dw-md-4.last { margin-top: 10px; }
    .split img.right { float: none; margin: auto; }
    .sunspaces .overlap { float: none; margin-top: 0; width: 690px; }
    .prodslider .bx-wrapper .bx-controls-direction a.fa-angle-left, .lightslider .bx-wrapper .bx-controls-direction a.fa-angle-left { left: -22px; }
    .prodslider .bx-wrapper .bx-controls-direction a.fa-angle-right, .lightslider .bx-wrapper .bx-controls-direction a.fa-angle-right { right: -24px; }
    .call-to-action .cta { line-height: 25px; padding-right: 20px; padding-right: 20px; padding-right: 0px; padding-right: 30px; }
    .call-to-action .btn.aqua { width: 230px; }
    .footer { font-size: 1em; }
    .inner .inner-text { top: 25%; }
    .inner .inner-text .btn { margin-top: 30px; }
    .inner .inner-text h1 { font-size: 2.8em; margin: 15px auto !important; }
    .inner .inner-text .inner-text--link { margin-top: 70px; }
    .inner .inner-image { right: 0; max-width: 400px; max-height: 189px; }
    .inner .inner-image { right: 0; max-width: 400px; max-height: 189px; }
    .inner .inner-image .video-bg.rb { width: 255px; height: 400px; }
    .internal .inner-text { width: 100%; }
    .product-details .sunroom .center .center-icons-mobile .i-top-left .icon { left: 25%; position: absolute; top: 50px; }
    .product-details .sunroom .center .center-icons-mobile .i-top-right .icon { left: 65%; position: absolute; top: 50px; }
    .product-details .sunroom .center .center-icons-mobile .i-bottom-left .icon { left: 20%; position: absolute; top: 55%; }
    .product-details .sunroom .center .center-icons-mobile .i-bottom-right .icon { left: 70%; position: absolute; bottom: 30%; }
    .product-details .sunroom .center .center-icons-mobile .i-bottom-middle .icon { left: 5%; position: absolute; top: 50px; }
    .split .section.pa { margin: 0 88px; }
    .case-images .left .bgimage { min-height: 351px; }
    #roundel { top: 30%; right: 0; }
    .head-top { top: 108px !important; }
    .views .grey-box { min-height: 270px; }
    .views.ys .grey-box .bottom { bottom: 35px; }
    .split.images .overlay.sun { left: auto; min-width: 300px; }
    .split.images .overlay { left: auto; max-width: 215px; }
    .overtop .overtop-img.three { margin-top: 120px; }
    .section .dw-md-4.last { margin-left: 25%; }
    .split.images .overlay h3 { font-size: 1em; }
    .item .thumbnails .overlay { width: 175px; left: 11%; }
    .item .thumbnails .view-icon { left: 88px; }
    .item .thumbnails .view-more { left: 74px; }
    .new-heaters .dw-xs-12 { width: 74%; margin: auto; }
    .personalextrasbot .dw-sm-4 img { width: 100%; height: 250px; }
    .product-details .sunroom.panorama .center .center-icons-mobile .i-top-right .icon { top: 228px; }
    .product-details .sunroom.panorama .center .center-icons-mobile .i-top-left .icon { top: 232px; left: 40%; }
    .banner .container { position: relative; top: 10% }


    .inner-text.home--offer--h1 { transform: translateY(-10px); }
    .inner-text.home--offer--h1 .offer { font-size: 1.2em !important; padding: 10px 25px; }
    .inner-text.home--offer--h1 h1 { width: auto; margin: 0px !important; padding: 20px 25px; font-size: 1.8em !important; }
    .inner-text.home--offer--h1 .detail { font-size: 1.3em; }

    .outdoor-structures.banner.home-banner .finance-roundel { width: 150px; }
}



@media screen and (min-width: 768px) {
    .masthead, .marketing, .footer { padding-left: 0; padding-right: 0; }


    .footer .please-note { max-width: 470px; margin-top: 60px; }

    .case-study-slider { margin-bottom: 30px; }
    .case-study-slider .around { position: relative; background-color: #3f8da6; }
    .case-study-slider .around h2 { color: #fff; font-size: 1.7em; }
    .case-study-slider .around .text { width: 50%; float: right; padding: 25px 40px; color: #fff; }
    .case-study-slider .around .text .btn { margin-top: 30px; }
    .case-study-slider .around .text span { min-height: 110px; display: block; font-size: 1.05em; }
    .case-study-slider .around .text span a { color: #fff; }
    .case-study-slider .around .text span a:hover { text-decoration: underline; }
    .case-study-slider .around .overtop-img { position: absolute; top: 0px; left: 0px; height: 100%; width: 50%; background-size: cover; background-position: center; }
    .case-study-slider .fa-angle-left { left: -40px; width: 30px; height: 30px; line-height: 30px; text-align: center; display: block; top: 50% !important; transform: translateY(-50%); }
    .case-study-slider .fa-angle-right { right: -40px; width: 30px; height: 30px; line-height: 30px; text-align: center; display: block; top: 50% !important; transform: translateY(-50%); }
}

@media screen and (max-width: 767px) {

    .banner.home-banner .container .inner a.btn.orange { display: none; }
    .outdoor-structures.banner.home-banner .finance-roundel { display: none; }
    .sale-flex { flex-direction: column; }

    .flex-table { font-size: 1.3em; }
    .flex-table .head { height: 70px; }
    .flex-table .row { height: 70px; }


    .prod-cards .prod-card { width: calc(100% / 2); padding: 8px; float: left; }

    .bespoke-points .point .left-img { min-height: 250px; width: calc(100%); background-size: cover; background-position: center; }
    .bespoke-points .point .content { padding-bottom: 30px; border-radius: 0px; width: 100%; position: static; right: 0px; top: 250px; overflow: hidden; background-color: #F5F5F5; }
    .bespoke-points .point .content .txt { position: static; transform: none; width: 100%; text-align: center; padding: 15px; }
    .bespoke-points .point .content .txt a { margin: 0 auto; }
    .bespoke-points .point { margin: 0px auto 30px; max-width: 370px; }
    .bespoke-points .point .content .dim-diag { margin-top: 30px; background-color: transparent !important; position: static; transform: none; width: 350px; height: 240px; margin: 0 auto; }

    .stockists-sell .subheader-container { text-align: center; width: 100%; margin: 0px auto; margin-top: 15px; background-color: white; padding: 10px; padding-top: 0px; padding-bottom: 4px; }
    .stockists-sell .section { text-align: center; }
    .stockists-sell .ftext { padding: 5px; font-size: 1.2em; text-align: left; }

    .reviews .light-grey-box { min-height: 30px; }
    .item .grey-box.compact em { position: static; margin-top: 10px; display: block; text-align: center; }
    .footer .please-note { max-width: 412px; margin: 15px auto; }


    .outdoor-structures.banner.home { position: relative; background-image: url(images/love-your-garden/love-your-garden-ss-banner.jpg) !important; background-position: center top; }
    .outdoor-structures.banner.home #roundel { right: 0; }
    .outdoor-structures.banner.home .inner .inner-text { max-width: 750px !important; }
    .outdoor-structures.banner.home .alan { position: absolute; left: 50%; bottom: 0px; z-index: 6; transform: translateX(40px); width: 250px; height: auto; }
    .outdoor-structures.banner.home .lyg-logo { display: none; }
    .inner .inner-text--link { margin-top: 15px; transform: translateY(15px); }
    .outdoor-structures.banner.home .header-buttons { transform: none; left: 0px; width: 50%; bottom: 30px; z-index: 7; }
    .outdoor-structures.banner.home .btn { margin-top: 15px; margin-left: 0px; }


    #headerleft img { width: 70% !important; }
    #headerright .esta { width: 18%; right: 25%; margin-top: 20px; }
    .container.videoapsire { margin-top: 77.6%; }
    .header-buttons { bottom: 0; left: 50%; transform: translate(-50%); width: 80%; font-size: 0.8em; }
    body .mobile-quick-link { position: fixed; z-index: 99999; bottom: 0px; left: 0; width: 100%; padding: 10px 15px; visibility: hidden; }
    body .mobile-quick-link .overlay { background-color: #fff; opacity: 0.8; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    body .mobile-quick-link .btn { position: relative; font-weight: 700; width: 100%; font-size: 1.3em; margin: 10px 0px; }
    .section.homevis a { font-size: 1.05em; }

    .outdoor-structures { height: 615px; }

    .inner { }
    .inner .inner-text h1 { font-size: 2.3em; margin: 0px; }
    .inner .inner-text { top: 25%; max-width: 470px; width: 100%; }
    .inner .inner-text .inner-text--sub { font-size: 1.3em; max-width: 285px; }
    .inner .inner-text .dw-sm-6 { width: auto; }
    .inner .inner-text .dw-sm-6.right { padding: 15px; }
    .inner .inner-text .inner-text--link { margin-top: 0; margin-left: 15px; }
    .overtop { margin: 10px auto; }
    .overtop.one { margin-top: -20px; }
    .split { margin-top: 10px; }
    .split .btn.aqua, .split .btn.red { margin: 20px auto; }
    .split .dw-md-7 { padding: 0; }
    .split.images .overlay { left: 15px; min-width: 260px !important; }
    .split.images .overlay h3 { font-size: 1.6em; }
    .split.images .overlay a { font-size: 1.05em; }
    .split.images .underlay { margin: 20px auto; }
    .split.images .underlay.two { background-position: center; }
    .reviews { margin-top: 10px; }
    .reviews .light-grey-box.mobile { display: none; }
    .split-double { margin-top: 20px; }
    .sunspaces { margin-top: 30px; margin-bottom: 15px; }
    .sunspaces .overlap { margin: auto; }
    .sunspaces .greybx { padding: 15px; }
    .sunspaces .dw-md-6.right { padding: 0; }
    .prod-item { width: 200px !important; margin-right: 24px !important; }

    .prodslider, .lightslider { padding: 0 25px; }
    .call-to-action .cta { text-align: center; line-height: 35px; }
    .call-to-action .btn.aqua { float: none; margin: 20px auto; }
    .footer { text-align: center; }
    .footer .footer-logo { margin-top: 30px; }
    .footer .footer-logo img { margin: auto; display: block; }
    .footer .footer-logo .socialbtns { float: none; margin-top: 15px; }
    .footer .designer { float: none; }
    .btn { height: 40px; line-height: 40px; width: 100%; }
    .stockists-sell .product-listing .btn { font-size: 0.9em; }
    .internal .inner .inner-text { top: auto; text-align: center; max-width: 100%; position: relative; }
    .internal .btn.white { margin: 20px auto; }
    .internal .inner .inner-text .inner-text--link a { display: none; }
    .internal .item .thumbnails .view-more { left: 5px; bottom: 5px; }
    .internal .item .thumbnails .view-icon { top: 5px; left: 25px; }
    .internal .item .description { margin-top: 15px; }
    .note i { float: none; }
    .internal .configurations .dw-sm-3 { width: 50%; margin-bottom: 20px; }
    .category-back { height: 680px; }
    .product-details .sunroom .center .center-icons-mobile .i-top-left .icon { left: 20%; position: absolute; top: 20px; }
    .product-details .sunroom .center .center-icons-mobile .i-top-right .icon { left: 80%; position: absolute; top: 50px; }
    .product-details .sunroom .center .center-icons-mobile .i-bottom-left .icon { left: 10%; position: absolute; top: 50%; }
    .product-details .sunroom .center .center-icons-mobile .i-bottom-right .icon { left: 75%; position: absolute; bottom: 75px; }
    .product-details .sunroom .center .center-icons-mobile .i-bottom-middle .icon { left: 5%; position: absolute; top: 50px; }
    .product-details .sunroom .center .center-icons-mobile .i-middle .icon { left: 30%; position: absolute; top: 160px; }

    .product-details .sunroom .center .center-icons-mobile .i-middle .icon.pan { left: 47%; position: absolute; top: 336px; }
    .roundel .circle { height: 130px; width: 130px; font-size: 0.85em; }
    .roundel.vid { top: 48% }
    .roundel .circle span { padding: 10px; }
    .case-images .left, .case-images .right { float: none; width: 100%; }
    input.btn.red { margin: 25px auto; }
    .banneroverlay, .lpbanneroverlay, .reviews-ss, .show-rooms, .commercial, .garden-awnings, .why-sunspaces, .heaters-range, .care, .faqs, .installation-resources, .installation-fitting-service, .glass-verandas, .garden-rooms, .about-us, .kids, .lounge, .dining, .gym, .hottub, .storage, .veranda-gal, .garden-gal, .awnings-gal, .planning-advice, .showroom-slough, .showroom-stalbans, .showroom-cardiff { min-height: 350px; }

    .banneroverlay { display: none; }
    .spec { font-size: 1em; line-height: 20px; }
    .spec img { float: right; }
    #lightbox-close { margin: auto; }
    .lightbox-container { margin: 25% auto; }
    #garden-section .dw-md-2 { width: 33.3%; }
    .intro h2, .intro h1, .showroom .intro h2 { font-size: 2em; }
    .request-quote { height: 160px; }
    .request-quote .head-top { top: 13%; }
    .views .grey-box { min-height: 200px; }
    .views.ys .grey-box .bottom { bottom: 10px; }
    .body-internal .dw-md-6.right { margin: 15px auto; }
    .map { margin: auto; }
    .middle-services.about h3 { padding: 0 30px; font-size: 1.8em; }
    .middle-services.about { padding: 15px; }
    .intro .description { font-size: 1.2em; }
    .personalextrasbot .dw-sm-4.middle img, .personalextrasbot .dw-sm-4.middletwo img { width: 50%; float: left; height: 225px; }
    .personalextrasbot .dw-sm-4 img { width: 100%; }
    .freeinfobx .btn.red { width: 100%; font-size: 1em; margin: 15px 0; }
    .footer .dw-sm-3 { margin-bottom: 15px; }
    .footer .callinfo img { margin: auto; }
    .product-details .sunroom.panorama .center .center-icons-mobile .i-top-right .icon { top: 200px; }
    .product-details .sunroom.panorama .center .center-icons-mobile .i-top-left .icon { top: 200px; left: 40%; }
    .extras .text { margin: 0 0 15px 0; }
    #featured .tabs.active { padding: 15px; }
    .stepbox .title { font-size: 1em; }
    .pinterestlinkbottom, .cs-page .pinterestlinkbottom { position: relative; margin: 15px auto 0; bottom: 0; right: 0; }
    .galcont h2 { margin-top: 30px; }
    .head-top { left: 1%; width: 98%; }
    .showroom-stalbans .head-top .title, .showroom-slough .head-top .title, .showroom-cardiff .head-top .title { font-size: 0.8em !important; }

    .inner-text.home--offer--h1 { transform: translateY(12px); }
    .inner-text.home--offer--h1 .offer { font-size: 1.2em !important; }
    .inner-text.home--offer--h1 h1 { width: auto; max-width: 401px; margin: 0px !important; font-size: 1.8em !important; }
    .inner-text.home--offer--h1 .detail { line-height: 20px; font-size: 1.3em; }


    .case-study-slider { margin-bottom: 30px; }
    .case-study-slider .around { position: relative; background-color: #3f8da6; padding-top: 250px; }
    .case-study-slider .around h2 { color: #fff; }
    .case-study-slider .around .text { padding: 25px 40px; color: #fff; }
    .case-study-slider .around .text .btn { margin-top: 30px; }
    .case-study-slider .around .text span { min-height: 110px; display: block; font-size: 1.05em; }
    .case-study-slider .around .text span a { color: #fff; }
    .case-study-slider .around .text span a:hover { text-decoration: underline; }
    .case-study-slider .around .overtop-img { position: absolute; top: 0px; left: 0px; height: 250px; width: 100%; background-position: center; }
    .case-study-slider .fa-angle-left { color: #f68b1e !important; left: 0px; width: 30px; height: 30px; line-height: 30px; text-align: center; display: block; top: 50% !important; transform: translateY(-50%); }
    .case-study-slider .fa-angle-right { color: #f68b1e !important; right: 0px; width: 30px; height: 30px; line-height: 30px; text-align: center; display: block; top: 50% !important; transform: translateY(-50%); }

    .inner .inner-image { max-height: 270px; position: relative; top: auto; display: none; }
    .comp-slider .slide-inner .colours .dw-xs-6 { padding: 0px 3px; }
    .comp-slider .slide-inner .colourbx { text-align: left; }
    .comp-slider .slide-inner .colours { min-height: 100px; }
    .comp-slider { max-width: 333px; margin: 0 auto; }

    .banner.bespoke .inner-text { max-width: 550px; margin: 115px auto 0px; }
    .banner.bespoke .inner-text h1 { margin: 0px 0px 30px; }
    .bespoke-points .point .content .dim-diag .width { top: 40%; left: 30%; transform: translate(61%, -364%); }
    .bespoke-points .point .content .dim-diag .length { top: 50%; left: 50%; transform: translate(-16%, 216%); }

    .banner.sml-mob { height: 300px; }

    .outdoor-structures.banner.home-banner .finance-roundel { width: 100px; left: 25px; top: 15px; }
}

@media screen and (min-width: 700px) {
    .stockists-sell .white-section .ftext .link-option-example { margin-top: 15px; font-size: 0.8em; padding-right: 15px; padding-top: 5px; }
    .stockists-sell .white-section .ftext .link-option { font-size: 0.8em; margin-top: 15px; margin-bottom: 15px; padding-left: 15px; padding-right: 15px; }
    .stockists-sell .white-section .ftext .wrapper { width: 100%; background-color: #3f8da6; border-bottom-left-radius: 5px; border-top-left-radius: 5px; margin-top: 10px; margin-bottom: 10px; }
    .stockists-sell .white-section .ftext .wrapper-2 { width: 100%; background-color: #e3e3e3; border-bottom-right-radius: 5px; border-top-right-radius: 5px; margin-top: 10px; margin-bottom: 10px; padding-left: 20px; }
}

@media screen and (max-width: 700px) {
    .stockists-sell .options-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: 7fr 6fr 7fr 6fr 7fr 6fr 7fr 6fr 7fr 6fr; }

    .stockists-sell .white-section .ftext .link-option-example { margin-top: 5px; font-size: 0.8em; padding-left: 15px; padding-right: 15px; padding-top: 5px; align-self: center; }
    .stockists-sell .white-section .ftext .link-option { font-size: 0.8em; margin-top: 15px; margin-bottom: 5px; padding-left: 15px; padding-right: 15px; }
    .stockists-sell .white-section .ftext .wrapper { width: 100%; background-color: #3f8da6; border-top-left-radius: 5px; border-top-right-radius: 5px; margin-top: 10px; }
    .stockists-sell .white-section .ftext .wrapper-2 { width: 100%; background-color: #e3e3e3; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; margin-bottom: 10px; height: auto; }

    .icon-text { font-size: 1.4em; }
}

@media screen and (max-width: 600px) {
    .flex-table { font-size: 1.1em; }
    .flex-table .head, .flex-table .row { padding: 10px; }
    .outdoor-structures.banner.home { position: relative; background-image: url(images/love-your-garden/love-your-garden-ss-banner.jpg) !important; background-position: center top; }
    .outdoor-structures.banner.home #roundel { top: 90px; }
    .outdoor-structures.banner.home .inner .inner-text { max-width: 750px !important; }
    .outdoor-structures.banner.home .alan { position: absolute; left: 50%; bottom: 0px; z-index: 7; transform: translateX(40px); width: 220px; height: auto; }
    .outdoor-structures.banner.home .lyg-logo { display: none; }
    .inner .inner-text--link { margin-top: 15px; transform: translateY(15px); }
    .outdoor-structures.banner.home .header-buttons { transform: none; left: 0px; width: 50%; bottom: 30px; z-index: 6; }
    .outdoor-structures.banner.home .btn { margin-top: 15px; margin-left: 0px; }
    .roundel .circle { height: 105px; width: 105px; }
    .roundel .circle span { font-size: 9px !important; }
    .split.images .overlay h3 { font-size: 1.2em; }
    .roundel { top: 32%; right: 0; z-index: 9999; }
    .roundel.novid { top: auto; right: 0; bottom: 15px; z-index: 9999; }
    .item .thumbnails .view-more { bottom: 40px; left: 6px; }
    .item .thumbnails .view-icon { left: 25px; top: 30px; }
    .grey-form.brochure h2 { font-size: 1.2em; }
    .grey-form.brochure .btn.aqua { margin-top: 35px; width: 250px; }
    .grey-form .editor-label label { font-size: 0.9em; }
    .product-model .surround, .product-type .surround { font-size: 0.9em; }
    .call-to-action h2 { font-size: 1.4em; }
    .btn { width: 100%; }
    .head-top .title { font-size: 1em !important; }
}

@media screen and (max-width: 550px) {

    .inner .inner-text h1 { width: auto; }
    .stockists-sell .product-listing .description { height: 38px; }
    .outdoor-structures.banner.home .alan { position: absolute; left: 50%; bottom: 0px; z-index: 7; transform: translateX(10px); width: 220px; height: auto; }

    .inner .inner-text { top: 100px; width: 100%; max-width: 345px; }
    #roundel { top: auto; right: auto; z-index: 5; bottom: 15px; }
    .grey-form .editor-label label { font-size: 0.9em; }
    .product-model .surround, .product-type .surround { font-size: 0.8em; }
    .optional-extras .editor-label { margin: 20px; }

    .inner-text.home--offer--h1 { transform: translateY(51px); }
    .inner-text.home--offer--h1 .offer { font-size: 1.2em !important; }
    .inner-text.home--offer--h1 h1 { width: auto; font-size: 1.8em !important; }
    .inner-text.home--offer--h1 .detail { line-height: 25px; font-size: 1.1em; }

    .home-faqs .faq-question h3 { font-size: 1.4em; }

    .stockists-sell .product-listing .btn { line-height: 20px; }
    .bespoke-points .point .content .dim-diag .width { top: 40%; left: 30%; }
}

@media screen and (max-width: 500px) {
    .outdoor-structures { height: 544px; }
    .home-banner .banner-txt { font-size: 6vw; }
    .stockists-sell .product-listing .description { font-size: 0.8em; overflow-wrap: break-word; }
    #theform h3 { margin: 5px 0px; }
    .ab-img-right .image-round { width: 180px; height: 180px; position: static; top: 50%; right: 0px; transform: none; background-color: #fff; border-radius: 100%; }
}

@media screen and (max-width: 470px) {
    #sampleform .editor-field .dw-xs-4 { padding: 0 5px; }
    .head-top .title span { display: none; }
    .item .grey-box.compact .item-price .dw-xs-6 { width: 100%; }
}

@media screen and (max-width: 430px) {
    .outdoor-structures.banner.home .alan { position: absolute; left: 50%; bottom: 0px; z-index: 7; transform: translateX(-10px); width: 220px; height: auto; }
    .review-selector .selection { width: 100%; float: none; }
    .formel.dw-xs-4, .homevisit .dw-xs-6, .formel.dw-xs-6 { width: 100%; padding: 0 10px; }
    .inner-text.home--offer--h1 .detail { line-height: 25px; font-size: 1.0em; max-width: 185px; }

    .prod-cards .prod-card { width: calc(100% ); padding: 8px; float: none; }

    #quote-request-modal .enquiry-options { flex-direction: column; align-items: flex-start; }
}

@media screen and (max-width: 400px) {
    .banner.bespoke .inner-text { font-size: 0.85em; }
    .banneroverlay { height: 400px; }
    .ranges-grid .ranges-buttons { flex-direction: column; text-align: center; }
}

@media screen and (max-width: 375px) {
    .home-banner { background-image: url(images/banners/homebanner-xs.webp) !important; }
    .product-model .surround span, .product-type .surround label span { height: auto; line-height: 14px; padding: 10px 3px 10px 3px; }
    .request-quote .head-top { width: 80%; left: 9%; }
    .inner .inner-text--link.vid { min-width: 200px; transform: translateX(-20px); }
    .stockists-sell .product-listing .btn span { font-size: 0.82em; }
    .bespoke-points .point .content .dim-diag .inner { transform: translateX(-40px); }
}

@media screen and (max-width: 320px) {
    .inner .inner-text { max-width: 290px; top: 15%; }
    .split.images .overlay { max-width: 240px !important; left: 15px; }
    .container.videoapsire { margin-top: 87.6%; }
    .item .thumbnails .view-more { bottom: 37px; font-size: 1em; }
    .item .thumbnails .view-icon { left: 15px; top: 18px; }
    #headerright .esta { right: 28%; }
}

.masthead { background-color: #fff; }

.masthead #call { text-align: center; color: #fff; font-weight: 1.2em; font-size: 1.6em; }
.masthead #call a { color: #303030; }
.header-grid .esta { display: flex; align-items: center; justify-content: flex-end; }

@media screen and (min-width:992px) {

    .offers-btn { background-color: #f68b1f; color: #fff !important; margin: 10px 0px; height: fit-content !important; padding: 1rem 3rem; border-radius: 0.5rem; font-size: 1.1rem !important; }
    .offers-btn:hover { background-color: #3f8da6; }

    .nav { padding: 0; margin-top: 0px; margin-bottom: 0px; font-family: 'Work Sans', sans-serif; font-size: 1.15em; position: relative; list-style: none; display: flex; justify-content: space-between; }
    .nav li div.innerdrop { box-shadow: 0px 15px 20px #00000029; position: absolute; visibility: hidden; z-index: 598; background-color: #fff; display: block; left: 0; width: 100%; }
    .nav > li:hover { background-color: #3f8da6; }
    .nav li.drop.offers:hover { background-color: transparent; }
    .nav li.drop:hover { background-color: #3f8da6; }
    .nav li.drop:hover .title { color: #fff; }
    .nav li.drop:hover i.fa.fa-angle-down { color: #fff; transform: rotate(180deg); }
    .nav li a i { display: none; }
    .nav li.drop i.fa.fa-angle-down { font-size: 1.5em; text-align: center; width: 30px; color: #1f1f1f; display: inline-block; vertical-align: top; line-height: 50px; }
    .nav li span { }
    .nav li div ul.top { border-top: 5px solid #3f8da6; display: block; }
    .nav li div ul { padding: 10px; margin: 0; }

    .nav li div ul, .nav li div ul li { text-align: left; display: flex; flex-wrap: wrap; }

    li div ul.bigger li { justify-content: space-around; }

    .nav li div ul li { height: auto; line-height: normal; display: block; float: left; margin: 10px 10px 20px 10px; }
    .nav li div ul.awnings li { margin-bottom: 35px; }
    .nav li div .sunspacesnav li { width: 15%; }
  
    .nav li div .case li { width: 25%; margin: 0px auto 15px; }



    .nav li div .biggerv1 li { width: 20%; margin: 0px; }
    .nav li div li.last { margin-right: 0; }
    .nav li div .rooms li { width: 15%; }
    .nav li div .awnings li { width: 31.6%; }
    .nav li div .awnings.top.fifty li { width: 48%; justify-content: space-around; }
    .nav li div .showrooms li { width: 48%; }
    .nav li div .about li.first { width: calc((100% / 5) * 2); margin: 10px auto; }
    .nav li div .about li.second { width: calc((100% / 5) * 2); margin: 10px auto; }
    .nav li div .about li.third { width: calc((100% / 5) * 1); margin: 10px auto; }

    .nav li div .about li.first.only { width: 100%; margin: 10px auto; }



    .nav li div.innerdrop { min-height: 249px; }

    .nav li .innerdrop.first { width: 50%; }
    .nav li .innerdrop.second { width: 50%; }
    .nav li div .showrooms li.hours { background-color: #3f8da6; color: #fff; height: 215px; padding: 15px; }
    .nav li div .showrooms li.hours a { height: auto; color: #fff; }
    .nav li div ul li a { height: auto; color: #666; display: block; position: relative; }
    .nav li div ul li a div { padding-left: 0; font-size: 1em; color: #666666; text-align: center; margin: 15px auto 0; display: block; position: static; }
    .nav li div ul li a div .sub { color: #3f8da6; font-size: 0.9em; font-family: 'Work Sans', sans-serif; margin: 10px auto; font-weight: 500; }
    .nav li div ul li img { margin: 0 auto; display: block;}
    .nav ul li.drop div.innerdrop ul li { float: left; }
    .nav li .innerdrop i { display: none; }
    .innerdrop ul { padding: 8px 0 5px 8px; }
    .nav li .innerdrop .bottom-link { position: absolute; bottom: 0px; transform: translateY(100%); width: 100%; color: #fff; }
    .nav li .innerdrop .bottom-link:hover, .nav li .innerdrop .bottom-link-double:hover { color: #f68b1e; }
    .nav li .innerdrop .bottom-link span { color: #fff; height: auto; }
    .nav li .innerdrop .bottom-link:hover span { color: #f68b1e; }


    .nav li .innerdrop .bottom-link div { width: 100%; height: 50px; left: 0; font-family: 'Work Sans', sans-serif; background-color: #3f8da6; font-weight: 500; font-size: 1.2em; display: flex; align-items: center; justify-content: center; }
    .nav li .innerdrop .bottom-link-double { position: initial; width: 50%; color: #fff; }
    .nav li .innerdrop .bottom-link-double div { width: 100%; background-color: #3f8da6; left: auto; font-family: 'Work Sans', sans-serif; }
    .nav li .innerdrop .bottom-link-double.left, .nav li .innerdrop .bottom-link-double.left div { float: left; }
    .nav li .innerdrop .bottom-link-double.right, .nav li .innerdrop .bottom-link-double.right div { float: right; }
    .nav li .innerdrop .bottom-link-tripple { display: block; background-color: #3f8da6; width: calc(100% / 3); float: left; display: flex; align-items: center; justify-content: center; color: #fff; }
    .nav li .innerdrop .bottom-link-tripple > div { display: flex; align-items: center; }
    .nav li .innerdrop .bottom-link-tripple > div span { margin-left: 10px; height: auto; color: #fff; }
    .nav li .innerdrop .bottom-link-tripple:hover { color: #f68b1e; }


    .nav li.orange { font-weight: 600; }
    .nav li .innerdrop .first span { color: #3f8da6; padding: 10px; cursor: unset; font-family: 'Work Sans', sans-serif; font-size: 1.2em; height: auto; }
    .nav li .innerdrop .second span { color: #3f8da6; padding: 10px; cursor: unset; font-family: 'Work Sans', sans-serif; font-size: 1.2em; height: auto; }
    .nav li .innerdrop .third span { color: #3f8da6; padding: 10px; cursor: unset; font-family: 'Work Sans', sans-serif; font-size: 1.2em; height: auto; }
    .nav li .innerdrop .subcategory { position: initial; left: auto; }
    .nav li div .about li .subcategory ul li { float: none; width: 50%; margin: 15px 0px; padding: 0px; }
    .nav li .innerdrop .third ul li { width: 100% !important; }
    .nav li .innerdrop .subcategory li { height: auto; padding: 0px 10px; }
    .nav li .innerdrop .subcategory a:hover { color: #3f8da6; }
    .nav li:hover div.innerdrop { visibility: visible; }
    .nav .drop:hover, .nav .title:hover { cursor: pointer; }
    .nav li { text-align: center; padding: 0px 10px; }
    .nav .med { }
    .nav li .ohours { padding-bottom: 15px; }

    .nav li div .about li.first.only .subcategory ul li { width: 25%; }

    .nav li a { color: #1f1f1f; display: flex; justify-content: center; height: 50px; align-items: center; }
    .nav li a.navbtn { padding: 0px 15px; font-weight: 400 !important; }
    .nav li a.navbtn.blue { background-color: #3f8da6; }
    .nav li a.navbtn.blue:hover { background-color: #666666; }
    .nav li a.navbtn.orange { background-color: #f68b1e; }
    .nav li a.navbtn.orange:hover { background-color: #666666; }
    .nav li a.navbtn.red { background-color: #af3f32; }
    .nav li a.navbtn.red:hover { background-color: #666666; }
    .nav li.btnli { background-color: transparent !important; }
    .nav li span { color: #1f1f1f; display: flex; font-weight: 500; align-items: center; font-size: 1.05em; height: 70px; }
    .nav li a.on { font-weight: bold; }
    .nav li a:hover { text-decoration: none; }
    .nav > li > a { height: 70px; font-weight: 500; font-size: 1.05em; }
}



@media screen and (max-width:991px) {
    .head-logo { max-width: 38%; }
    .esta img { max-height: 30px; width: auto; }

    .nav li div .case li img { display: none; }

    li.drop.nodrop a { width: 100%; }
}

@media screen and (max-width:549px) {
    .head-logo { max-width: 42%; }
    .esta img { max-height: 25px; width: auto; }
}

@media screen and (max-width: 440px) {
    .head-logo { max-width: 55%; }
    .esta img { max-height: 20px; width: auto; }
}
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.container { margin: 0 auto; padding: 0 15px; }
.section { margin: 0 -15px; }
.section.flx { display: flex; flex-wrap: wrap; }
.section.flx > div { float: none; }
.section.flx .clear { display: none; }
.container:before, .container:after, .section:before, .section:after { display: table; content: " "; }
.container:after, .section:after { clear: both; }
.clear { display: block; clear: both; }
@-ms-viewport { width: device-width; }

.section.sml-gap { margin: 0px -5px !important; display: flex; flex-wrap: wrap; }
.section.sml-gap > div { padding: 5px; float: none; }
.section.sml-gap .clear { display: none; }

.section.space-20 { margin: 0px -10px !important; display: flex; flex-wrap: wrap; }
.section.space-20 > div { padding: 10px; float: none; }
.section.space-20 .clear { display: none; }

.txt-left {text-align:left;}


.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); }
.fa-facebook:before { content: "\f09a"; }
.fa-google-plus:before { content: "\f0d5"; }
.fa-twitter:before { content: "\f099"; }
.fa-navicon:before { content: "\f0c9"; }
.fa-phone:before { content: "\f095"; }
.fa-angle-up:before { content: "\f106"; }
.fa-angle-down:before { content: "\f107"; }

.dw-xs-1, .dw-xs-2, .dw-xs-3, .dw-xs-4, .dw-xs-5, .dw-xs-6, .dw-xs-7, .dw-xs-8, .dw-xs-9, .dw-xs-10, .dw-xs-11, .dw-xs-12,
.dw-sm-1, .dw-sm-2, .dw-sm-3, .dw-sm-4, .dw-sm-5, .dw-sm-6, .dw-sm-7, .dw-sm-8, .dw-sm-9, .dw-sm-10, .dw-sm-11, .dw-sm-12,
.dw-md-1, .dw-md-2, .dw-md-3, .dw-md-4, .dw-md-5, .dw-md-6, .dw-md-7, .dw-md-8, .dw-md-9, .dw-md-10, .dw-md-11, .dw-md-12,
.dw-lg-1, .dw-lg-2, .dw-lg-3, .dw-lg-4, .dw-lg-5, .dw-lg-6, .dw-lg-7, .dw-lg-8, .dw-lg-9, .dw-lg-10, .dw-lg-11, .dw-lg-12 { position: relative; min-height: 1px; padding: 0 15px; }

.dw-xs-1, .dw-xs-2, .dw-xs-3, .dw-xs-4, .dw-xs-5, .dw-xs-6, .dw-xs-7, .dw-xs-8, .dw-xs-9, .dw-xs-10, .dw-xs-11 { float: left; }
.dw-xs-12 { width: 100%; }
.dw-xs-11 { width: 91.66666666666666%; }
.dw-xs-10 { width: 83.33333333333334%; }
.dw-xs-9 { width: 75%; }
.dw-xs-8 { width: 66.66666666666666%; }
.dw-xs-7 { width: 58.333333333333336%; }
.dw-xs-6 { width: 50%; }
.dw-xs-5 { width: 41.66666666666667%; }
.dw-xs-4 { width: 33.33333333333333%; }
.dw-xs-3 { width: 25%; }
.dw-xs-2 { width: 16.666666666666664%; }
.dw-xs-1 { width: 8.333333333333332%; }

.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }
.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { display: block !important; }

@media (max-width:767px) {
    .visible-xs, .visible-sm.visible-xs, .visible-md.visible-xs, .visible-lg.visible-xs { display: block !important; }
    .hidden-xs, .hidden-sm.hidden-xs, .hidden-md.hidden-xs, .hidden-lg.hidden-xs { display: none !important; }

    .mt-sm-20 { margin-top: 20px; }
}

@media (min-width:768px) {
    .dw-sm-1, .dw-sm-2, .dw-sm-3, .dw-sm-4, .dw-sm-5, .dw-sm-6, .dw-sm-7, .dw-sm-8, .dw-sm-9, .dw-sm-10, .dw-sm-11 { float: left; }
    .dw-sm-12 { width: 100%; }
    .dw-sm-11 { width: 91.66666666666666%; }
    .dw-sm-10 { width: 83.33333333333334%; }
    .dw-sm-9 { width: 75%; }
    .dw-sm-8 { width: 66.66666666666666%; }
    .dw-sm-7 { width: 58.333333333333336%; }
    .dw-sm-6 { width: 50%; }
    .dw-sm-5th { width: 20%; }
    .dw-sm-5 { width: 41.66666666666667%; }
    .dw-sm-4 { width: 33.33333333333333%; }
    .dw-sm-3 { width: 25%; }
    .dw-sm-2 { width: 16.666666666666664%; }
    .dw-sm-1 { width: 8.333333333333332%; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .container { width: 750px; }
    .visible-xs.visible-sm, .visible-sm, .visible-md.visible-sm, .visible-lg.visible-sm { display: block !important; }
    .hidden-xs.hidden-sm, .hidden-sm, .hidden-md.hidden-sm, .hidden-lg.hidden-sm { display: none !important; }
}

@media (min-width:992px) {
    .dw-md-1, .dw-md-2, .dw-md-3, .dw-md-4, .dw-md-5, .dw-md-6, .dw-md-7, .dw-md-8, .dw-md-9, .dw-md-10, .dw-md-11 { float: left; }
    .dw-md-12 { width: 100%; }
    .dw-md-11 { width: 91.66666666666666%; }
    .dw-md-10 { width: 83.33333333333334%; }
    .dw-md-9 { width: 75%; }
    .dw-md-8 { width: 66.66666666666666%; }
    .dw-md-7 { width: 58.333333333333336%; }
    .dw-md-6 { width: 50%; }
    .dw-md-5th { width: 20%; }
    .dw-md-5 { width: 41.66666666666667%; }
    .dw-md-4 { width: 33.33333333333333%; }
    .dw-md-3 { width: 25%; }
    .dw-md-2 { width: 16.666666666666664%; }
    .dw-md-1 { width: 8.333333333333332%; }
}

@media (min-width: 992px) and (max-width: 1229px) {
    .container { width: 970px; }
    .visible-xs.visible-md, .visible-sm.visible-md, .visible-md, .visible-lg.visible-md { display: block !important; }
    .hidden-xs.hidden-md, .hidden-sm.hidden-md, .hidden-md, .hidden-lg.hidden-md { display: none !important; }
}

@media (min-width: 1230px) {
    .container { width: 1230px; }
    .dw-lg-1, .dw-lg-2, .dw-lg-3, .dw-lg-4, .dw-lg-5, .dw-lg-6, .dw-lg-7, .dw-lg-8, .dw-lg-9, .dw-lg-10, .dw-lg-11 { float: left; }
    .dw-lg-12 { width: 100%; }
    .dw-lg-11 { width: 91.66666666666666%; }
    .dw-lg-10 { width: 83.33333333333334%; }
    .dw-lg-9 { width: 75%; }
    .dw-lg-8 { width: 66.66666666666666%; }
    .dw-lg-7 { width: 58.333333333333336%; }
    .dw-lg-6 { width: 50%; }
    .dw-lg-5 { width: 41.66666666666667%; }
    .dw-lg-4 { width: 33.33333333333333%; }
    .dw-lg-3 { width: 25%; }
    .dw-lg-2 { width: 16.666666666666664%; }
    .dw-lg-1 { width: 8.333333333333332%; }
    .visible-xs.visible-lg, .visible-sm.visible-lg, .visible-md.visible-lg, .visible-lg { display: block !important; }
    .hidden-xs.hidden-lg, .hidden-sm.hidden-lg, .hidden-md.hidden-lg, .hidden-lg { display: none !important; }
}

@media (min-width: 1360px) {
    .container.lg { width: calc(100% - 60px); margin: 0 auto; max-width: 1360px; }
}

@media (min-width: 1640px) {
    .container.wide { width: calc(100% - 60px); margin: 0 auto; max-width: 1640px; }
}



.carousel { position: relative; }
.carousel-inner { position: relative; width: 100%; overflow: hidden; }
.carousel-inner > .item { position: relative; display: none; -webkit-transition: .6s ease-in-out left; -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left; }
.carousel-inner > .item > img,
.carousel-inner > .item > a > img { line-height: 1; }

@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-inner > .item { -webkit-transition: -webkit-transform .6s ease-in-out; -o-transition: -o-transform .6s ease-in-out; transition: transform .6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px; }
    .carousel-inner > .item.next,
    .carousel-inner > .item.active.right { left: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
    .carousel-inner > .item.prev,
    .carousel-inner > .item.active.left { left: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
    .carousel-inner > .item.next.left,
    .carousel-inner > .item.prev.right,
    .carousel-inner > .item.active { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev { display: block; }
.carousel-inner > .active { left: 0; }
.carousel-inner > .next,
.carousel-inner > .prev { position: absolute; top: 0; width: 100%; }
.carousel-inner > .next { left: 100%; }
.carousel-inner > .prev { left: -100%; }
.carousel-inner > .next.left,
.carousel-inner > .prev.right { left: 0; }
.carousel-inner > .active.left { left: -100%; }
.carousel-inner > .active.right { left: 100%; }
.carousel-control { position: absolute; top: 0; bottom: 0; left: 0; width: 15%; font-size: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); background-color: rgba(0, 0, 0, 0); filter: alpha(opacity=50); opacity: .5; }
.carousel-control.left { }
.carousel-control.right { right: 0; left: auto; }
.carousel-control:hover,
.carousel-control:focus { color: #fff; text-decoration: none; filter: alpha(opacity=90); outline: 0; opacity: .9; }
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right { position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -10px; }
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left { left: 50%; margin-left: -10px; }
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right { right: 50%; margin-right: -10px; }
.carousel-control .icon-prev,
.carousel-control .icon-next { width: 20px; height: 20px; font-family: serif; line-height: 1; }
.carousel-control .icon-prev:before { content: '\2039'; }
.carousel-control .icon-next:before { content: '\203a'; }
.carousel-indicators { position: absolute; bottom: 10px; left: 50%; z-index: 15; width: 60%; padding-left: 0; margin-left: -30%; text-align: center; list-style: none; }
.carousel-indicators li { display: inline-block; width: 10px; height: 10px; margin: 1px; text-indent: -999px; cursor: pointer; background-color: #000 \9; background-color: rgba(0, 0, 0, 0); border: 1px solid #fff; border-radius: 10px; }
.carousel-indicators .active { width: 12px; height: 12px; margin: 0; background-color: #fff; }
.carousel-caption { position: absolute; right: 15%; bottom: 20px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.carousel-caption .btn { text-shadow: none; }

.vert-padd-30 { padding: 30px 0px; }

.max-w { max-width: 100% !important; }

.fnt-scale-08 { font-size: 0.8em; }
.fnt-scale-11 { font-size: 1.1em; }
.fnt-scale-12 { font-size: 1.2em; }
.fnt-scale-125 { font-size: 1.25em; }
.fnt-scale-13 { font-size: 1.3em; }
.fnt-scale-134 { font-size: 1.34em; }
.fnt-scale-14 { font-size: 1.4em; }
.fnt-scale-15 { font-size: 1.5em; }
.fnt-scale-17 { font-size: 1.6em; }
.fnt-scale-16 { font-size: 1.7em; }
.fnt-scale-18 { font-size: 1.8em; }
.fnt-scale-19 { font-size: 1.9em; }
.fnt-scale-20 { font-size: 2.0em; }
.fnt-scale-21 { font-size: 2.1em; }
.fnt-scale-22 { font-size: 2.2em; }
.fnt-scale-23 { font-size: 2.3em; }
.fnt-scale-25 { font-size: 2.5em; }
.fnt-scale-27 { font-size: 2.7em; }
.fnt-scale-28 { font-size: 2.7em; }
.fnt-scale-30 { font-size: 3.0em; }
.fnt-scale-32 { font-size: 3.2em; }
.fnt-scale-33 { font-size: 3.3em; }
.fnt-scale-34 { font-size: 3.4em; }
.fnt-scale-35 { font-size: 3.5em; }

.fw-3 { font-weight: 300; }
.fw-4 { font-weight: 400; }
.fw-5 { font-weight: 500; }
.fw-6 { font-weight: 600; }
.fw-7 { font-weight: 700; }


.min-w-160 { min-width: 160px; }
.min-w-200 { min-width: 200px; }
.max-w-10 { max-width: 10px }
.max-w-20 { max-width: 20px }
.max-w-30 { max-width: 30px }
.max-w-40 { max-width: 40px }
.max-w-50 { max-width: 50px }
.max-w-60 { max-width: 60px }
.max-w-70 { max-width: 70px }
.max-w-80 { max-width: 80px }
.max-w-90 { max-width: 90px }

.full-w { max-width: 100%; }

.max-w-100 { max-width: 100px }
.max-w-110 { max-width: 110px }
.max-w-120 { max-width: 120px }
.max-w-130 { max-width: 130px }
.max-w-140 { max-width: 140px }
.max-w-150 { max-width: 150px }
.max-w-160 { max-width: 160px }
.max-w-170 { max-width: 170px }
.max-w-180 { max-width: 180px }
.max-w-190 { max-width: 190px }
.max-w-200 { max-width: 200px }
.max-w-210 { max-width: 210px }
.max-w-220 { max-width: 220px }
.max-w-230 { max-width: 230px }
.max-w-240 { max-width: 240px }
.max-w-250 { max-width: 250px }
.max-w-260 { max-width: 260px }
.max-w-270 { max-width: 270px }
.max-w-280 { max-width: 280px }
.max-w-290 { max-width: 290px }
.max-w-300 { max-width: 300px }
.max-w-310 { max-width: 310px }
.max-w-320 { max-width: 320px }
.max-w-330 { max-width: 330px }
.max-w-340 { max-width: 340px }
.max-w-350 { max-width: 350px }
.max-w-360 { max-width: 360px }
.max-w-370 { max-width: 370px }
.max-w-380 { max-width: 380px }
.max-w-390 { max-width: 390px }
.max-w-400 { max-width: 400px }
.max-w-410 { max-width: 410px }
.max-w-420 { max-width: 420px }
.max-w-430 { max-width: 430px }
.max-w-440 { max-width: 440px }
.max-w-450 { max-width: 450px }
.max-w-460 { max-width: 460px }
.max-w-470 { max-width: 470px }
.max-w-480 { max-width: 480px }
.max-w-490 { max-width: 490px }
.max-w-500 { max-width: 500px }
.max-w-510 { max-width: 510px }
.max-w-520 { max-width: 520px }
.max-w-530 { max-width: 530px }
.max-w-540 { max-width: 540px }
.max-w-550 { max-width: 550px }
.max-w-560 { max-width: 560px }
.max-w-570 { max-width: 570px }
.max-w-580 { max-width: 580px }
.max-w-590 { max-width: 590px }
.max-w-600 { max-width: 600px }
.max-w-610 { max-width: 610px }
.max-w-620 { max-width: 620px }
.max-w-630 { max-width: 630px }
.max-w-640 { max-width: 640px }
.max-w-650 { max-width: 650px }
.max-w-660 { max-width: 660px }
.max-w-670 { max-width: 670px }
.max-w-680 { max-width: 680px }
.max-w-690 { max-width: 690px }
.max-w-700 { max-width: 700px }
.max-w-710 { max-width: 710px }
.max-w-720 { max-width: 720px }
.max-w-730 { max-width: 730px }
.max-w-740 { max-width: 740px }
.max-w-750 { max-width: 750px }
.max-w-760 { max-width: 760px }
.max-w-770 { max-width: 770px }
.max-w-780 { max-width: 780px }
.max-w-790 { max-width: 790px }
.max-w-800 { max-width: 800px }
.max-w-810 { max-width: 810px }
.max-w-820 { max-width: 820px }
.max-w-830 { max-width: 830px }
.max-w-840 { max-width: 840px }
.max-w-850 { max-width: 850px }
.max-w-860 { max-width: 860px }
.max-w-870 { max-width: 870px }
.max-w-880 { max-width: 880px }
.max-w-890 { max-width: 890px }
.max-w-900 { max-width: 900px }
.max-w-910 { max-width: 910px }
.max-w-920 { max-width: 920px }
.max-w-930 { max-width: 930px }
.max-w-940 { max-width: 940px }
.max-w-950 { max-width: 950px }
.max-w-960 { max-width: 960px }
.max-w-970 { max-width: 970px }
.max-w-980 { max-width: 980px }
.max-w-990 { max-width: 990px }
.max-w-1000 { max-width: 1000px }
.max-w-1010 { max-width: 1010px }
.max-w-1020 { max-width: 1020px }
.max-w-1030 { max-width: 1030px }
.max-w-1040 { max-width: 1040px }
.max-w-1050 { max-width: 1050px }
.max-w-1060 { max-width: 1060px }
.max-w-1070 { max-width: 1070px }
.max-w-1080 { max-width: 1080px }
.max-w-1090 { max-width: 1090px }
.max-w-1100 { max-width: 1100px }
.max-w-1110 { max-width: 1110px }
.max-w-1120 { max-width: 1120px }
.max-w-1130 { max-width: 1130px }
.max-w-1140 { max-width: 1140px }
.max-w-1150 { max-width: 1150px }
.max-w-1160 { max-width: 1160px }
.max-w-1170 { max-width: 1170px }
.max-w-1180 { max-width: 1180px }
.max-w-1190 { max-width: 1190px }
.max-w-1200 { max-width: 1200px }
.max-w-1210 { max-width: 1210px }
.max-w-1220 { max-width: 1220px }
.max-w-1230 { max-width: 1230px }
.max-w-1240 { max-width: 1240px }
.max-w-1250 { max-width: 1250px }
.max-w-1260 { max-width: 1260px }
.max-w-1270 { max-width: 1270px }
.max-w-1280 { max-width: 1280px }
.max-w-1290 { max-width: 1290px }
.max-w-1300 { max-width: 1300px }
.max-w-1310 { max-width: 1310px }
.max-w-1320 { max-width: 1320px }
.max-w-1330 { max-width: 1330px }
.max-w-1340 { max-width: 1340px }
.max-w-1350 { max-width: 1350px }
.max-w-1360 { max-width: 1360px }
.max-w-1370 { max-width: 1370px }
.max-w-1380 { max-width: 1380px }
.max-w-1390 { max-width: 1390px }
.max-w-1400 { max-width: 1400px }
.max-w-1410 { max-width: 1410px }
.max-w-1420 { max-width: 1420px }
.max-w-1430 { max-width: 1430px }
.max-w-1440 { max-width: 1440px }
.max-w-1450 { max-width: 1450px }
.max-w-1460 { max-width: 1460px }
.max-w-1470 { max-width: 1470px }
.max-w-1480 { max-width: 1480px }
.max-w-1490 { max-width: 1490px }
.max-w-1500 { max-width: 1500px }
.max-w-1510 { max-width: 1510px }
.max-w-1520 { max-width: 1520px }
.max-w-1530 { max-width: 1530px }
.max-w-1540 { max-width: 1540px }
.max-w-1550 { max-width: 1550px }
.max-w-1560 { max-width: 1560px }
.max-w-1570 { max-width: 1570px }
.max-w-1580 { max-width: 1580px }
.max-w-1590 { max-width: 1590px }
.max-w-1600 { max-width: 1600px }
.max-w-1610 { max-width: 1610px }
.max-w-1620 { max-width: 1620px }
.max-w-1630 { max-width: 1630px }
.max-w-1640 { max-width: 1640px }
.max-w-1650 { max-width: 1650px }
.max-w-1660 { max-width: 1660px }
.max-w-1670 { max-width: 1670px }
.max-w-1680 { max-width: 1680px }
.max-w-1690 { max-width: 1690px }
.max-w-1700 { max-width: 1700px }
.max-w-1710 { max-width: 1710px }
.max-w-1720 { max-width: 1720px }
.max-w-1730 { max-width: 1730px }
.max-w-1740 { max-width: 1740px }
.max-w-1750 { max-width: 1750px }
.max-w-1760 { max-width: 1760px }
.max-w-1770 { max-width: 1770px }
.max-w-1780 { max-width: 1780px }
.max-w-1790 { max-width: 1790px }
.max-w-1800 { max-width: 1800px }
.max-w-1810 { max-width: 1810px }
.max-w-1820 { max-width: 1820px }
.max-w-1830 { max-width: 1830px }
.max-w-1840 { max-width: 1840px }
.max-w-1850 { max-width: 1850px }
.max-w-1860 { max-width: 1860px }
.max-w-1870 { max-width: 1870px }
.max-w-1880 { max-width: 1880px }
.max-w-1890 { max-width: 1890px }
.max-w-1900 { max-width: 1900px }
.max-w-1910 { max-width: 1910px }
.max-w-1920 { max-width: 1920px }
.max-w-1930 { max-width: 1930px }
.max-w-1940 { max-width: 1940px }
.max-w-1950 { max-width: 1950px }
.max-w-1960 { max-width: 1960px }
.max-w-1970 { max-width: 1970px }
.max-w-1980 { max-width: 1980px }
.max-w-1990 { max-width: 1990px }
.max-w-2000 { max-width: 2000px }
.max-w-2010 { max-width: 2010px }
.max-w-2020 { max-width: 2020px }
.max-w-2030 { max-width: 2030px }
.max-w-2040 { max-width: 2040px }
.max-w-2050 { max-width: 2050px }
.max-w-2060 { max-width: 2060px }
.max-w-2070 { max-width: 2070px }
.max-w-2080 { max-width: 2080px }
.max-w-2090 { max-width: 2090px }
.min-h-1 { min-height: 1px; }
.min-h-2 { min-height: 2px; }
.min-h-10 { min-height: 10px }
.min-h-15 { min-height: 15px }
.min-h-20 { min-height: 20px }
.min-h-25 { min-height: 25px }
.min-h-30 { min-height: 30px }
.min-h-35 { min-height: 35px }
.min-h-40 { min-height: 40px }
.min-h-45 { min-height: 45px }
.min-h-50 { min-height: 50px }
.min-h-55 { min-height: 55px }
.min-h-60 { min-height: 60px }
.min-h-65 { min-height: 65px }
.min-h-70 { min-height: 70px }
.min-h-75 { min-height: 75px }
.min-h-80 { min-height: 80px }
.min-h-85 { min-height: 85px }
.min-h-20 { min-height: 20px; }
.min-h-100 { min-height: 100px; }
.min-h-110 { min-height: 110px; }
.min-h-120 { min-height: 120px; }
.min-h-130 { min-height: 130px; }
.min-h-150 { min-height: 150px; }
.min-h-190 { min-height: 190px; }
.min-h-210 { min-height: 210px; }
.min-h-220 { min-height: 220px; }
.min-h-230 { min-height: 230px; }
.min-h-250 { min-height: 250px; }
.min-h-270 { min-height: 270px; }
.min-h-500 { min-height: 500px; }

.flx-bx { display: flex; }
.flx-col { flex-direction: column; }
.fl-al-stretch { align-items: stretch; }
.fl-al-cent { align-items: center; }
.fl-al-end { align-items: flex-end; }
.fl-ju-cent { justify-content: center; }
.fl-ju-space { justify-content: space-between; }
.fl-ju-space-even { justify-content: space-evenly; }
.fl-ju-end { justify-content: end; }
.fl-wrap { flex-wrap: wrap; }
.fl-nowrap { flex-wrap: nowrap !important; }
.float-right { float: right; }
.gap-10 { grid-gap: 10px; }
.gap-15 { grid-gap: 15px; }
.gap-30 { grid-gap: 30px; }
.fnt-scale-11 { font-size: 1.1em; }
.fnt-scale-12 { font-size: 1.2em; }
.fnt-scale-125 { font-size: 1.25em; }
.fnt-scale-13 { font-size: 1.3em; }
.fnt-scale-14 { font-size: 1.4em; }
.fnt-scale-15 { font-size: 1.5em; }
.fnt-scale-17 { font-size: 1.6em; }
.fnt-scale-16 { font-size: 1.7em; }
.fnt-scale-18 { font-size: 1.8em; }
.fnt-scale-19 { font-size: 1.9em; }
.fnt-scale-20 { font-size: 2.0em; }
.fnt-scale-21 { font-size: 2.1em; }
.fnt-scale-22 { font-size: 2.2em; }
.fnt-scale-23 { font-size: 2.3em; }
.fnt-scale-25 { font-size: 2.5em; }
.fnt-scale-27 { font-size: 2.7em; }
.fnt-scale-30 { font-size: 3.0em; }
.fnt-scale-32 { font-size: 3.2em; }
.fnt-scale-33 { font-size: 3.3em; }
.fnt-scale-34 { font-size: 3.4em; }
.fnt-scale-35 { font-size: 3.5em; }

.fs-06 { font-size: 0.6rem; }
.fs-07 { font-size: 0.7rem; }
.fs-08 { font-size: 0.8rem; }
.fs-09 { font-size: 0.9rem; }
.fs-10 { font-size: 1rem; }
.fs-11 { font-size: 1.1rem; }
.fs-12 { font-size: 1.2rem; }
.fs-125 { font-size: 1.25rem; }
.fs-13 { font-size: 1.3rem; }
.fs-14 { font-size: 1.4rem; }
.fs-15 { font-size: 1.5rem; }
.fs-17 { font-size: 1.6rem; }
.fs-16 { font-size: 1.7rem; }
.fs-18 { font-size: 1.8rem; }
.fs-19 { font-size: 1.9rem; }
.fs-20 { font-size: 2.0rem; }
.fs-21 { font-size: 2.1rem; }
.fs-22 { font-size: 2.2rem; }
.fs-23 { font-size: 2.3rem; }
.fs-24 { font-size: 2.4rem; }
.fs-25 { font-size: 2.5rem; }
.fs-27 { font-size: 2.7rem; }
.fs-30 { font-size: 3.0rem; }
.fs-32 { font-size: 3.2rem; }
.fs-33 { font-size: 3.3rem; }
.fs-34 { font-size: 3.4rem; }
.fs-35 { font-size: 3.5rem; }

.lh-10{line-height:1.0;}
.lh-11{line-height:1.1;}
.lh-12{line-height:1.2;}
.lh-13{line-height:1.3;}
.lh-14{line-height:1.4;}

.p-y-5 { padding-top: 5px; padding-bottom: 5px; }
.p-y-10 { padding-top: 10px; padding-bottom: 10px; }
.p-y-15 { padding-top: 15px; padding-bottom: 15px; }
.p-y-20 { padding-top: 20px; padding-bottom: 20px; }
.p-y-30 { padding-top: 30px; padding-bottom: 30px; }
.p-y-45 { padding-top: 45px; padding-bottom: 45px; }
.p-y-60 { padding-top: 60px; padding-bottom: 60px; }
.p-x-5 { padding-left: 5px; padding-right: 5px; }
.p-x-10 { padding-left: 10px; padding-right: 10px; }
.p-x-15 { padding-left: 15px; padding-right: 15px; }
.p-x-20 { padding-left: 20px; padding-right: 20px; }
.p-x-30 { padding-left: 30px; padding-right: 30px; }
.p-x-45 { padding-left: 45px; padding-right: 45px; }
.p-x-60 { padding-left: 60px; padding-right: 60px; }

.m-y-5 { margin-top: 5px; margin-bottom: 5px; }
.m-y-10 { margin-top: 10px; margin-bottom: 10px; }
.m-y-15 { margin-top: 15px; margin-bottom: 15px; }
.m-y-20 { margin-top: 20px; margin-bottom: 20px; }
.m-y-30 { margin-top: 30px; margin-bottom: 30px; }
.m-y-45 { margin-top: 45px; margin-bottom: 45px; }
.m-y-60 { margin-top: 60px; margin-bottom: 60px; }
.m-x-5 { margin-left: 5px; margin-right: 5px; }
.m-x-10 { margin-left: 10px; margin-right: 10px; }
.m-x-15 { margin-left: 15px; margin-right: 15px; }
.m-x-20 { margin-left: 20px; margin-right: 20px; }
.m-x-30 { margin-left: 30px; margin-right: 30px; }
.m-x-45 { margin-left: 45px; margin-right: 45px; }
.m-x-60 { margin-left: 60px; margin-right: 60px; }
.m-x-a { margin-left: auto; margin-right: auto; }
.p-10 { padding: 10px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }
.p-30 { padding: 30px; }
.p-45 { padding: 45px; }
.p-60 { padding: 60px; }

.p-r-5 { padding-right: 5px; }
.p-r-15 { padding-right: 15px; }
.p-l-15 { padding-left: 15px; }

.m-t-10 { margin-top: 10px; }
.m-t-15 { margin-top: 15px; }
.m-t-30 { margin-top: 30px; }
.m-t-60 { margin-top: 60px; }

.m-b-10 { margin-bottom: 10px; }
.m-b-15 { margin-bottom: 15px; }
.m-b-30 { margin-bottom: 30px; }



.center-block { margin: 0 auto; }

.m-05 { margin: 0.5rem; }
.m-1 { margin: 1rem; }
.m-2 { margin: 2rem; }
.m-3 { margin: 3rem; }
.m-4 { margin: 4rem; }
.m-5 { margin: 5rem; }

.my-05 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-15 { margin-top: 1rem; margin-bottom: 1.5rem; }
.my-1 { margin-top: 1rem; margin-bottom: 1rem; }
.my-2 { margin-top: 2rem; margin-bottom: 2rem; }
.my-3 { margin-top: 3rem; margin-bottom: 3rem; }
.my-4 { margin-top: 4rem; margin-bottom: 4rem; }
.my-5 { margin-top: 5rem; margin-bottom: 5rem; }

.mx-05 { margin-right: 0.5rem; margin-left: 0.5rem; }
.mx-1 { margin-right: 1rem; margin-left: 1rem; }
.mx-2 { margin-right: 2rem; margin-left: 2rem; }
.mx-3 { margin-right: 3rem; margin-left: 3rem; }
.mx-4 { margin-right: 4rem; margin-left: 4rem; }
.mx-5 { margin-right: 5rem; margin-left: 5rem; }

.mt-05 { margin-top: 0.5rem; }
.mt-1 { margin-top: 1rem; }
.mt-15 { margin-top: 1.5rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }
.mt-5 { margin-top: 5rem; }

.mb-05 { margin-bottom: 0.5rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-15 { margin-bottom: 1.5rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 4rem; }
.mb-5 { margin-bottom: 5rem; }

.mr-05 { margin-right: 0.5rem; }
.mr-1 { margin-right: 1rem; }
.mr-2 { margin-right: 2rem; }
.mr-3 { margin-right: 3rem; }
.mr-4 { margin-right: 4rem; }
.mr-5 { margin-right: 5rem; }

.ml-05 { margin-left: 0.5rem; }
.ml-1 { margin-left: 1rem; }
.ml-2 { margin-left: 2rem; }
.ml-3 { margin-left: 3rem; }
.ml-4 { margin-left: 4rem; }
.ml-5 { margin-left: 5rem; }



.p-05 { padding: 0.5rem; }
.p-1 { padding: 1rem; }
.p-2 { padding: 2rem; }
.p-3 { padding: 3rem; }
.p-4 { padding: 4rem; }
.p-5 { padding: 5rem; }

.py-05 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-1 { padding-top: 1rem; padding-bottom: 1rem; }
.py-2 { padding-top: 2rem; padding-bottom: 2rem; }
.py-3 { padding-top: 3rem; padding-bottom: 3rem; }
.py-4 { padding-top: 4rem; padding-bottom: 4rem; }
.py-5 { padding-top: 5rem; padding-bottom: 5rem; }

.px-05 { padding-right: 0.5rem; padding-left: 0.5rem; }
.px-1 { padding-right: 1rem; padding-left: 1rem; }
.px-2 { padding-right: 2rem; padding-left: 2rem; }
.px-3 { padding-right: 3rem; padding-left: 3rem; }
.px-4 { padding-right: 4rem; padding-left: 4rem; }
.px-5 { padding-right: 5rem; padding-left: 5rem; }

.pt-05 { padding-top: 0.5rem; }
.pt-1 { padding-top: 1rem; }
.pt-2 { padding-top: 2rem; }
.pt-3 { padding-top: 3rem; }
.pt-4 { padding-top: 4rem; }
.pt-5 { padding-top: 5rem; }

.pb-05 { padding-bottom: 0.5rem; }
.pb-1 { padding-bottom: 1rem; }
.pb-15 { padding-bottom: 1.5rem; } 
.pb-2 { padding-bottom: 2rem; }
.pb-3 { padding-bottom: 3rem; }
.pb-4 { padding-bottom: 4rem; }
.pb-5 { padding-bottom: 5rem; }

.pr-05 { padding-right: 0.5rem; }
.pr-1 { padding-right: 1rem; }
.pr-2 { padding-right: 2rem; }
.pr-3 { padding-right: 3rem; }
.pr-4 { padding-right: 4rem; }
.pr-5 { padding-right: 5rem; }

.pl-05 { padding-left: 0.5rem; }
.pl-1 { padding-left: 1rem; }
.pl-2 { padding-left: 2rem; }
.pl-3 { padding-left: 3rem; }
.pl-4 { padding-left: 4rem; }
.pl-5 { padding-left: 5rem; }