@charset "UTF-8";
/*! CSS by Ascender Design Ltd */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden], template {
    display: none
}

a {
    background-color: transparent
}

a:active, a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b, strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

/*h1 {*/
    /*font-size: 2em;*/
    /*margin: .67em 0*/
/*}*/

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em
}
/*
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled], html input[disabled] {
    cursor: default
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}
*/
input {
    line-height: normal;
    color: :#535355;
    font-family: "微软雅黑", Open Sans, Helvetica Neue, Arial, sans-serif;
}

input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td, th {
    padding: 0
}

/*blockquote, caption, dd, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, legend, ol, p, pre, table, td, th, ul {*/
    /*margin: 0;*/
    /*padding: 0*/
/*}*/

abbr[title], dfn[title] {
    cursor: help
}

ins, u {
    text-decoration: none
}

ins {
    border-bottom: 1px solid
}

/*img {*/
    /*font-style: italic*/
/*}*/

button, input, label, option, select, textarea {
    cursor: pointer
}

.text-input:active, .text-input:focus, textarea:active, textarea:focus {
    cursor: text;
    outline: none
}

html {
    box-sizing: border-box
}

*, :after, :before {
    box-sizing: inherit
}

::-moz-selection {
    background: rgba(118, 185, 0, .45);
    text-shadow: none;
    color: #fff
}

::selection {
    background: rgba(118, 185, 0, .45);
    text-shadow: none;
    color: #fff
}

:focus {
    outline: none
}

html {
    font-family: "微软雅黑",Open Sans, Helvetica Neue, Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 100%;
    line-height: 1.5;
    color: #646464;
    overflow-y: scroll;
    background-color: #eff1f2
}

/*body {*/
    /*/!*max-width: 1680px;*!/*/
    /*margin: 0 auto;*/
    /*background-color: #fff;*/
    /*position: relative;*/
    /*margin-bottom: -400px*/
/*}*/

@media only screen and (max-width: 1169px) {
    body {
       /* overflow: hidden*/
    }
}

main {
    background-color: #fff
}

a {
    /*color: #414042;*/
    text-decoration: none;
    border: none;
    /*border-color: #76b900*/
}

a, a:focus, a:hover {
    transition: all .2s ease-in-out
}

a:focus, a:hover {
    color:#028244;
    /*border-bottom: 1px solid #76b900*/
}

/*.beta, .feature-callout, .gamma, .h1, .h2, .h3, .h4, .h5 .alpha, h1, h2, h3, h4, h5 {*/
    /*color: #323232;*/
    /*font-family: Arial, sans-serif;*/
    /*font-weight: 200;*/
    /*/!*margin-bottom: 20px*!/*/
/*}*/

/*@media only screen and (min-width: 1480px) {*/
    /*.beta, .feature-callout, .gamma, .h1, .h2, .h3, .h4, .h5 .alpha, h1, h2, h3, h4, h5 {*/
        /*margin-bottom: 30px*/
    /*}*/
/*}*/

/*.beta.underline:after, .gamma.underline:after, .h1.underline:after, .h2.underline:after, .h3.underline:after, .h4.underline:after, .h5 .alpha.underline:after, .underline.feature-callout:after, h1.underline:after, h2.underline:after, h3.underline:after, h4.underline:after, h5.underline:after {*/
    /*content: "";*/
    /*display: block;*/
    /*width: 100px;*/
    /*height: 1px;*/
    /*background: #c0c1c2;*/
    /*margin: 30px auto 75px*/
/*}*/

.alpha, .beta, .feature-callout, .gamma {
    font-weight: 400
}

/*.h1, h1 {*/
    /*font-size: 24px;*/
    /*line-height: 35px;*/
    /*letter-spacing: -.02em;*/
    /*color: #000000*/
/*}*/

/*@media only screen and (min-width: 480px) {*/
    /*.h1, h1 {*/
        /*font-size: 24px;*/
        /*line-height: 40px*/
    /*}*/
/*}*/

/*@media only screen and (min-width: 768px) {*/
    /*.h1, h1 {*/
        /*font-size: 26px;*/
        /*line-height: 60px*/
    /*}*/
/*}*/

/*@media only screen and (min-width: 1025px) {*/
    /*.h1, h1 {*/
        /*font-size: 28px;*/
        /*line-height: 55px*/
    /*}*/
/*}*/

/*@media only screen and (min-width: 1480px) {*/
    /*.h1, h1 {*/
        /*font-size: 32px;*/
        /*line-height: 60px*/
    /*}*/
/*}*/

/*.h1 span, h1 span {*/
    /*color: #b0b7bc*/
/*}*/

/*.h1 sup, h1 sup {*/
    /*font-size: 25%*/
/*}*/

/*.h2, h2 {*/
    /*font-size: 25px;*/
    /*line-height: 30px;*/
    /*letter-spacing: -.02em*/
/*}*/

/*@media only screen and (min-width: 768px) {*/
    /*.h2, h2 {*/
        /*font-size: 35px;*/
        /*line-height: 40px*/
    /*}*/
/*}*/

/*@media only screen and (min-width: 1480px) {*/
    /*.h2, h2 {*/
        /*font-size: 40px;*/
        /*line-height: 45px*/
    /*}*/
/*}*/

/*.h3, h3 {*/
    /*font-size: 18px;*/
    /*line-height: 25px;*/
    /*margin-bottom: 30px*/
/*}*/

/*@media only screen and (min-width: 480px) {*/
    /*.h3, h3 {*/
        /*font-size: 20px;*/
        /*line-height: 30px*/
    /*}*/
/*}*/

/*@media only screen and (min-width: 768px) {*/
    /*.h3, h3 {*/
        /*font-size: 25px;*/
        /*line-height: 35px*/
    /*}*/
/*}*/

/*@media only screen and (min-width: 1025px) {*/
    /*.h3, h3 {*/
        /*font-size: 30px;*/
        /*line-height: 35px*/
    /*}*/
/*}*/

/*.h4, h4 {*/
    /*font-size: 16px;*/
    /*line-height: 25px;*/
    /*font-weight: 400*/
/*}*/

/*@media only screen and (min-width: 480px) {*/
    /*.h4, h4 {*/
        /*font-size: 18px*/
    /*}*/
/*}*/

/*@media only screen and (min-width: 768px) {*/
    /*.h4, h4 {*/
        /*font-size: 20px;*/
        /*line-height: 30px*/
    /*}*/
/*}*/

/*@media only screen and (min-width: 1025px) {*/
    /*.h4, h4 {*/
        /*font-size: 25px;*/
        /*line-height: 35px*/
    /*}*/
/*}*/

/*.h5, h5 {*/
    /*font-size: 16px;*/
    /*line-height: 20px;*/
    /*font-weight: 700;*/
    /*letter-spacing: .1em;*/
    /*text-transform: uppercase;*/
    /*color: #b0b7bc*/
/*}*/

/*@media only screen and (min-width: 480px) {*/
    /*.h5, h5 {*/
        /*font-size: 18px;*/
        /*line-height: 25px*/
    /*}*/
/*}*/

/*@media only screen and (min-width: 1480px) {*/
    /*.h5, h5 {*/
        /*letter-spacing: .2em*/
    /*}*/
/*}*/

.alpha, .beta, .feature-callout, .gamma {
    font-size: 35px;
    line-height: 40px
}

@media only screen and (min-width: 480px) {
    .alpha {
        font-size: 45px;
        line-height: 45px
    }
}

@media only screen and (min-width: 768px) {
    .alpha {
        font-size: 65px;
        line-height: 70px
    }
}

@media only screen and (min-width: 1025px) {
    .alpha {
        font-size: 70px;
        line-height: 75px;
        letter-spacing: -.02em
    }
}

@media only screen and (min-width: 1480px) {
    .alpha {
        font-size: 80px;
        line-height: 85px;
        letter-spacing: -.03em
    }
}

@media only screen and (min-width: 768px) {
    .beta {
        font-size: 60px;
        line-height: 70px
    }
}

@media only screen and (min-width: 1025px) {
    .beta {
        font-size: 70px;
        line-height: 80px
    }
}

@media only screen and (min-width: 1480px) {
    .beta {
        font-size: 75px;
        line-height: 85px
    }
}

@media only screen and (min-width: 1480px) and (max-height: 1000px) {
    .beta {
        font-size: 80px;
        line-height: 80px
    }
}

h1.beta:after {
    display: none
}

.feature-callout, .gamma {
    text-transform: uppercase;
    color: #414042;
    font-size: 12px;
    line-height: 15px
}

@media only screen and (min-width: 1025px) {
    .feature-callout, .gamma {
        font-size: 15px;
        line-height: 20px
    }
}

@media only screen and (min-width: 1480px) {
    .feature-callout, .gamma {
        font-size: 16px;
        line-height: 20px
    }
}

h1.feature-callout:after, h1.gamma:after {
    display: none
}

small {
    font-size: 12px;
    color: #b0b7bc
}

small, small sup {
    line-height: 20px
}

small a {
    color: #808285
}

.smallprint {
    text-align: center
}

.smallprint small {
    display: block
}

sup {
    line-height: 1;
    top: 0;
    vertical-align: top;
    font-size: 50%
}

.para, p {
    font-size: 14px;
    line-height: 22.5px;
  /*  margin-bottom: 30px*/
}

@media only screen and (min-width: 480px) {
    .para, p {
        font-size: 22px;
        line-height: 27.5px
    }
}

@media only screen and (min-width: 1480px) {
    .para, p {
        font-size: 22px
    }
}

.para sup, p sup {
    font-size: 65%;
    top: .25em
}

.para.narrow, p.narrow {
    line-height: 20px
}

@media only screen and (min-width: 480px) {
    .para.narrow, p.narrow {
        line-height: 22.5px
    }
}

.subtitle {
    /*font-size: 24px;*/
    line-height: 60px;
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: #808285;
    margin-bottom: 20px;
    white-space: normal
}

h2{
    /*font-weight: normal;*/
}

@media only screen and (max-width: 400px) {
    .subtitle {
        /*font-size: 20px;*/
        line-height: 60px
    }
}


@media only screen and (min-width: 480px) {
    .subtitle {
        /*font-size: 24px;*/
        line-height: 60px
    }
}

@media only screen and (min-width: 768px) {
    .subtitle {
        /*font-size: 40px;*/
        line-height: 20px;
        margin-bottom: 30px
    }
}

.subtitle {
    font-weight: normal;
    /*letter-spacing: 10px;*/
    font-size: 20px;
}

@media only screen and (min-width: 1480px) {
    .subtitle {
        /*font-size: 20px;*/
        line-height: 25px;
        margin-bottom: 40px
    }
}

@media only screen and (min-width: 1025px) {
    .h3 + .subtitle, h3 + .subtitle {
        font-size: 18px;
        line-height: 25px;
        margin-top: -10px
    }
}

.browserupgrade {
    background: #ef7d00;
    color: #fff;
    padding: 20px 60px;
    width: 100%
}

.browserupgrade a {
    color: #fff !important;
    text-decoration: underline;
    border: none !important
}

li > ol, li > ul {
    margin-bottom: 0
}

/*input[type=email], input[type=input], input[type=number], input[type=password], input[type=search], input[type=submit], input[type=tel], input[type=text], input[type=url], select, textarea {*/
    /*border-radius: 0*/
/*}*/

/*input[type=email], input[type=input], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {*/
    /*border: 1px solid #d8dbde;*/
    /*padding: 10px;*/
    /*font-family: Open Sans, Helvetica Neue, Arial, sans-serif;*/
    /*font-weight: 300;*/
    /*font-size: 16px;*/
    /*color: #414042;*/
    /*margin-bottom: 20px;*/
    /*background: transparent*/
/*}*/

/*input[type=email]:focus, input[type=input]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=url]:focus, select:focus, textarea:focus {*/
    /*background-color: hsla(0, 0%, 100%, .5)*/
/*}*/

/*input[type=email], input[type=input], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select {*/
    /*height: 40px;*/
    /*margin-bottom: 20px*/
/*}*/

/*@media only screen and (min-width: 768px) {*/
    /*input[type=email], input[type=input], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select {*/
        /*height: auto;*/
        /*min-height: 50px*/
    /*}*/
/*}*/

::-webkit-input-placeholder {
    color: #414042
}

::-moz-placeholder {
    color: #414042
}

:-ms-input-placeholder {
    color: #414042
}

input:-moz-placeholder {
    color: #414042
}

/*img {*/
    /*max-width: 100%;*/
    /*vertical-align: middle*/
/*}*/

.align-right, img.align-right {
    float: right;
    margin-bottom: 30px;
    margin-left: 30px
}

.align-left, img.align-left {
    float: left;
    margin-right: 30px;
    margin-bottom: 30px
}

.align-center, img.align-center {
    display: block;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto
}

figure > img {
    display: block
}

img.fullwidth {
    width: 100%
}

figure, img.fullwidth {
    margin: 0;
    padding: 0
}

q {
    quotes: "‘" "’" "" ""
}

q:before {
    content: "\2018";
    content: open-quote
}

q:after {
    content: "\2019";
    content: close-quote
}

q q:before {
    content: "\201C";
    content: open-quote
}

q q:after {
    content: "\201D";
    content: close-quote
}

/*blockquote {*/
    /*font-family: Scene W01, Helvetica Neue, Arial, sans-serif;*/
    /*text-indent: 0;*/
    /*color: #808285;*/
    /*margin: 50px 0;*/
    /*padding: 30px;*/
    /*font-weight: 700*/
/*}*/

/*@media only screen and (min-width: 1025px) {*/
    /*blockquote {*/
        /*padding: 30px 60px*/
    /*}*/
/*}*/

/*blockquote:before {*/
    /*content: "\201C";*/
    /*font-size: 80px;*/
    /*line-height: 0;*/
    /*display: block;*/
    /*margin-bottom: 20px;*/
    /*color: #76b900*/
/*}*/

/*blockquote p {*/
    /*font-size: 16px;*/
    /*line-height: 25px;*/
    /*text-align: center !important*/
/*}*/

/*@media only screen and (min-width: 1025px) {*/
    /*blockquote p {*/
        /*font-size: 18px;*/
        /*line-height: 30px*/
    /*}*/
/*}*/

/*blockquote p:last-of-type {*/
    /*margin-bottom: 0*/
/*}*/

/*blockquote p.blockquote-credit {*/
    /*font-size: 16px;*/
    /*text-transform: uppercase;*/
    /*font-weight: 400;*/
    /*letter-spacing: .02em;*/
    /*color: #6aa700*/
/*}*/

/*blockquote p.blockquote-credit:before {*/
    /*content: "— "*/
/*}*/

/*blockquote cite {*/
    /*display: block;*/
    /*color: #808285;*/
    /*margin-top: 20px*/
/*}*/

/*blockquote cite:before {*/
    /*content: "\2014\2009"*/
/*}*/

.half {
    width: 50%
}

.grid-row {
    font-size: 0
}

@media only screen and (min-width: 1025px) {
    .grid-row {
        margin-left: -60px;
        /*padding: 0 60px*/
    }
}

.grid-row.gutterless {
    margin-left: 0
}

.grid-row.grid--full {
    margin-left: -120px;
    margin-right: -60px
}

.grid-col-1 {
    width: 100%;
    display: inline-block;
    font-size: 16px
}

@media only screen and (min-width: 1025px) {
    .grid-col-1 {
        padding-left: 60px;
        width: 16.6666666667%;
        vertical-align: top
    }
}

.grid-col-2 {
    width: 100%;
    display: inline-block;
    font-size: 16px
}

@media only screen and (min-width: 1025px) {
    .grid-col-2 {
        padding-left: 60px;
        width: 33.3333333333%;
        vertical-align: top
    }
}

.grid-col-3 {
    width: 100%;
    display: inline-block;
    font-size: 16px;font-family: Saurer,sans-serif
}

@media only screen and (min-width: 1025px) {
    .grid-col-3 {
        padding-left: 60px;
        width: 50%;
        vertical-align: top;font-family: Saurer,sans-serif
    }
}

.grid-col-4 {
    width: 100%;
    display: inline-block;
    font-size: 16px
}

@media only screen and (min-width: 1025px) {
    .grid-col-4 {
        padding-left: 60px;
        width: 66.6666666667%;
        vertical-align: top
    }
}

.grid-col-5 {
    width: 100%;
    display: inline-block;
    font-size: 16px
}

@media only screen and (min-width: 1025px) {
    .grid-col-5 {
        padding-left: 60px;
        width: 83.3333333333%;
        vertical-align: top
    }
}

.grid-col-6 {
    width: 100%;
    display: inline-block;
    font-size: 16px
}

@media only screen and (min-width: 1025px) {
    .grid-col-6 {
        padding-left: 60px;
        width: 100%;
        vertical-align: top
    }
}

.grid-col-quarter {
    width: 100%;
    display: inline-block;
    font-size: 16px
}

@media only screen and (min-width: 1025px) {
    .grid-col-quarter {
        padding-left: 60px;
        width: 25%;
        vertical-align: top
    }
}

.gutterless [class^=grid-col] {
    padding-left: 0
}

#page--fire-rated .section#overview .intro, .constrain, .cta .cta__content, .section__content {
    padding-left: 20px;
    padding-right: 20px
}

@media only screen and (min-width: 480px) {
    #page--fire-rated .section#overview .intro, .constrain, .cta .cta__content, .section__content {
        padding-left: 30px;
        padding-right: 30px
    }
}

@media only screen and (min-width: 768px) {
    #page--fire-rated .section#overview .intro, .constrain, .cta .cta__content, .section__content {
        max-width: 1180px;
        margin: 0 auto;
        padding-left: 60px;
        padding-right: 60px
    }
}

@media only screen and (min-width: 1480px) {
    #page--fire-rated .section#overview .intro, .constrain, .cta .cta__content, .section__content {
        max-width: 1280px
    }

    .constrain--wide {
        max-width: 1600px
    }
}

#page--fire-rated .section#overview, .pad, .section {
    padding-top: 60px;
    padding-bottom: 60px
}

#page--toughbay-circular .section#toughbay-range .range-overview, #page--toughbay-linear .section#application .application-one, .article, .article-list, .pad-top, .site-footer {
    padding-top: 60px
}

#page--skytile-sense .section#dip-switch .section__content ul.icon-list, #page--toughbay-linear .section#application .application-two, .article-list .article:last-of-type, .pad-btm, .site-footer .site-credits {
    padding-bottom: 60px
}

.article > img, .pad-lr, main > img {
    padding-left: 15px;
    padding-right: 15px
}

.pad-small, .sub-section, .subscribe {
    padding-top: 40px;
    padding-bottom: 40px
}

.intro, .pad-btm-small {
    padding-bottom: 40px
}

.cta, .pad-mini, .site-footer .site-meta, .sub-banner.page-section {
    padding-top: 20px;
    padding-bottom: 20px
}

@media only screen and (min-width: 480px) {
    .article > img, .pad-lr, main > img {
        padding-left: 30px;
        padding-right: 30px
    }
}

@media only screen and (min-width: 768px) {
    #page--fire-rated .section#overview, .pad, .section {
        padding-top: 60px;
        padding-bottom: 100px
    }

    #page--toughbay-circular .section#toughbay-range .range-overview, #page--toughbay-linear .section#application .application-one, .article, .article-list, .pad-top, .site-footer {
        padding-top: 50px
    }

    #page--skytile-sense .section#dip-switch .section__content ul.icon-list, #page--toughbay-linear .section#application .application-two, .article-list .article:last-of-type, .pad-btm, .site-footer .site-credits {
        padding-bottom: 50px
    }

    .cta, .pad-mini, .site-footer .site-meta, .sub-banner.page-section {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .pad-small, .sub-section, .subscribe {
        padding-top: 55px;
        padding-bottom: 75px
    }

    .intro, .pad-btm-small {
        padding-bottom: 75px
    }

    .article > img, .pad-lr, main > img {
        padding-left: 60px;
        padding-right: 60px
    }
}

@media only screen and (min-width: 1480px) {
    #page--fire-rated .section#overview, .pad, .section {
        padding-top: 70px;
        padding-bottom: 150px
    }

    #page--toughbay-circular .section#toughbay-range .range-overview, #page--toughbay-linear .section#application .application-one, .article, .article-list, .pad-top, .site-footer {
        padding-top: 70px
    }

    #page--skytile-sense .section#dip-switch .section__content ul.icon-list, #page--toughbay-linear .section#application .application-two, .article-list .article:last-of-type, .pad-btm, .site-footer .site-credits {
        padding-bottom: 60px
    }

    .pad-small, .sub-section, .subscribe {
        padding-top: 70px;
        padding-bottom: 100px
    }

    .intro, .pad-btm-small {
        padding-bottom: 100px
    }

    .cta, .pad-mini, .site-footer .site-meta, .sub-banner.page-section {
        padding-top: 50px;
        padding-bottom: 50px
    }
}

.bkg-blur {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px)
}

.logo {
    display: block;
    /*width: 300px*/
}

a.logo {
    border: none
}

a.logo:focus, a.logo:hover {
    opacity: .85
}

.inline-nav {
    float: right
}

.inline-nav > ul {
    list-style: none
}

.inline-nav > ul li {
    display: inline
}

.down-arrow {
    position: relative;
    overflow: visible !important
}

.down-arrow:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 30px solid #76b900;
    border-right: 45px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 45px solid transparent;
    bottom: -60px;
    left: 0;
    right: 0;
    margin: auto
}

.down-arrow.bkg-primary:after {
    border-top-color: #76b900
}

.down-arrow.bkg-secondary:after {
    border-top-color: #001d68
}

.down-arrow.bkg-grey-dark:after {
    border-top-color: #414042
}

.down-arrow.bkg-grey-mid:after {
    border-top-color: #808285
}

.down-arrow.bkg-grey-light:after {
    border-top-color: #b0b7bc
}

.down-arrow.bkg-black:after {
    border-top-color: #000
}

.down-arrow.bkg-white:after {
    border-top-color: #fff
}

/*.button, button {
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: #028244;
    cursor: pointer;
    display: table;
    margin: 50px 0;
    padding: 10px 25px;
    border: none;
    outline: none;
    transition: all .2s ease-in-out
}

.button:focus, .button:hover, button:focus, button:hover {
    color: #fff;
    background-color: #1a3477;
    border: none
}

.button:active, button:active {
    background-color: #263f7f;
    transition: none
}

.button--alt {
    font-size: 14px;
    line-height: 20px;
    background: transparent;
    border: 1px solid #9fce4d;
    color: #808285;
    text-align: center
}

.button--alt:focus, .button--alt:hover {
    background: transparent;
    color: #5a5b5d;
    border: 1px solid #91c733;
    background: #91c733
}

.button--play {
    position: relative;
    color: #fff;
    background: #76b900
}

.button--play:focus, .button--play:hover {
    background-color: #84c01a
}

.button--play:active {
    background-color: #8bc426
}

.button--cta {
    font-size: 18px;
    line-height: 25px;
    color: #808285;
    background: #eff1f2;
    padding: 17px 50px 15px 30px;
    max-width: 70%;
    min-height: 60px;
    position: relative;
    left: 30px
}

.button--cta:before {
    content: "";
    display: block;
    height: 60px;
    width: 60px;
    background-image: url(../images/location-icon-white.png);
    background-color: #001d68;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 20px 30px;
    top: 0;
    left: -60px
}

.button--cta:after, .button--cta:before {
    position: absolute;
    transition: all .2s ease-in-out
}

.button--cta:after {
    content: "\003E";
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    right: 30px
}

.button--cta:focus, .button--cta:hover {
    color: #808285;
    background: #dfe2e4
}

.button--cta:focus:before, .button--cta:hover:before {
    background-color: #002891
}

.button--cta:focus:after, .button--cta:hover:after {
    right: 27.5px
}

.button-group {
    margin-top: 25px
}

.button-group .button {
    display: inline-block;
    margin-top: 25px;
    margin-bottom: 0;
    margin-left: 10px !important;
    margin-right: 10px !important
}

@media only screen and (min-width: 480px) {
    .button--cta {
        font-size: 20px
    }
}

@media only screen and (min-width: 768px) {
    .button {
        font-size: 15px;
        line-height: 20px;
        padding: 15px 30px;
        margin: 50px 0;
        min-height: 50px
    }

    .button--alt {
        font-size: 16px;
        line-height: 25px;
        padding: 17px 50px 16px
    }

    .button--play {
        padding-left: 70px !important
    }

    .button--play:before {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        background: url(../images/arrow-right-icon-white.png) 50% no-repeat;
        background-size: 20px;
        position: absolute;
        left: 40px;
        top: 17.5px
    }

    .button--cta {
        font-size: 25px;
        line-height: 30px;
        padding: 23px 80px 22px 50px;
        min-height: 75px;
        left: 37.5px
    }

    .button--cta:before {
        height: 75px;
        width: 75px;
        background-size: 30px 45px;
        left: -75px
    }

    .button--cta:after {
        right: 50px
    }

    .button--cta:focus:after, .button--cta:hover:after {
        right: 45px
    }
}

@media only screen and (min-width: 1100px) {
    .button {
        font-size: 16px;
        padding: 15px 50px
    }
}*/

.loading:after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    background: url(../images/loader.gif);
    background-position: 50%;
    background-size: 10px;
    background-repeat: no-repeat
}

.excerpt {
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 50px
}

.read-more {
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    display: inline-block;
    font-size: 18px;
    line-height: 20px;
    margin: 30px 0 0;
    color: #001d68;
    font-weight: 400;
    cursor: pointer
}

.read-more:after {
    content: ">";
    padding-left: 5px;
    position: relative;
    top: 1px;
    transition: padding .2s ease-in-out
}

.read-more:focus, .read-more:hover {
    border: none;
    color: #001a5e
}

.read-more:focus:after, .read-more:hover:after {
    padding-left: 10px
}

@media only screen and (min-width: 1100px) {
    .read-more {
        font-size: 20px;
        line-height: 25px
    }
}

.caption, .tab-group__item__button {
    text-transform: uppercase;
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    color: #808285
}

.caption + img, .tab-group__item__button + img {
    margin-top: 50px
}

li .caption, li .tab-group__item__button {
    margin-bottom: 10px
}

.caption--alt {
    text-transform: none
}

@media only screen and (min-width: 1025px) {
    .caption--alt + .caption--alt:before {
        content: "";
        display: block;
        width: 80%;
        margin: 5px auto;
        height: 1px;
        background: hsla(216, 2%, 51%, .5)
    }
}

.caption--mini {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    margin: 15px 0 0;
    padding-left: 30px;
    display: table;
    position: relative;
    line-height: 20px;
    overflow: visible;
    text-align: left
}

.caption--mini:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: transparent url(../images/arrow-up-icon-green.png) 50% no-repeat;
    background-size: 20px;
    position: absolute;
    left: 0;
    top: 10%;
    top: calc(50% - 11px);
    overflow: visible
}

.caption--success {
    color: #76b900;
    padding-left: 30px;
    position: relative;
    display: inline-block
}

.caption--success:before {
    position: absolute;
    left: 0;
    top: 2px;
    content: "";
    display: inline-block;
    width: 19px;
    height: 15px;
    margin-right: 10px;
    background-image: url(../images/success-icon-green.png);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: 50%
}

.caption--failure {
    color: #df1a22;
    padding-left: 30px;
    position: relative;
    display: inline-block
}

.caption--failure:before {
    position: absolute;
    left: 0;
    top: 2px;
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../images/failure-icon-red.png);
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: 50%
}

.caption--bkg {
    display: block;
    background: hsla(0, 0%, 100%, .75);
    border: 2px solid hsla(0, 0%, 100%, .85);
    padding: 20px 30px;
    color: #001d68
}

@media only screen and (min-width: 1025px) {
    .caption:not(.caption--mini), .tab-group__item__button:not(.caption--mini) {
        font-size: 16px;
        line-height: 20px
    }

    .caption--failure:not(.caption--mini):before, .caption--success:not(.caption--mini):before {
        top: 2px
    }
}

.highlight {
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 700;
    color: #76b900;
    text-transform: uppercase
}

.article__label, .border-label {
    font-size: 16px;
    line-height: 25px;
    letter-spacing: 0;
    color: #9ea5a9;
    display: inline-block;
    margin: 0;
    padding: 10px 30px;
    border: 1px solid #d8dbde
}

.article__label:after, .border-label:after {
    display: none
}

.breadcrumbs {
    margin: 0;
    padding: 12px 30px;
    text-align: left;
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 200;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: .02em;
    border-top: 1px solid #d8dbde;
    border-bottom: 1px solid #d8dbde;
    color: #808285;
    white-space: pre-line
}

.breadcrumbs span {
    color: #b0b7bc;
    padding: 0 5px;
    font-weight: 400
}

.breadcrumbs a {
    border: none;
    color: #808285
}

.breadcrumbs a:focus, .breadcrumbs a:hover {
    color: #5e9400
}

.breadcrumbs b {
    white-space: nowrap
}

@media only screen and (min-width: 480px) {
    .breadcrumbs {
        font-size: 14px;
        line-height: 25px;
        text-align: center
    }
}

@media only screen and (min-width: 1100px) {
    .breadcrumbs {
        height: 50px
    }
}

/*.pagination {*/
    /*margin-top: 75px*/
/*}*/

/*.pagination ul {*/
    /*font-family: Scene W01, Helvetica Neue, Arial, sans-serif;*/
    /*font-weight: 400*/
/*}*/

/*.pagination ul li {*/
    /*display: inline-block;*/
    /*margin: 0 8px;*/
    /*padding: 0;*/
    /*width: 47px;*/
    /*height: 47px;*/
    /*border: 1px solid #d8dbde*/
/*}*/

/*.pagination ul li > span, .pagination ul li a {*/
    /*padding: 10px 0;*/
    /*display: block;*/
    /*font-size: 16px;*/
    /*line-height: 25px*/
/*}*/

/*.pagination ul li a {*/
    /*color: #8d9296;*/
    /*letter-spacing: 0;*/
    /*margin: 0;*/
    /*text-align: center;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*border: none*/
/*}*/

/*.pagination ul li a:focus, .pagination ul li a:hover {*/
    /*background: #eff1f2;*/
    /*color: #5e9400*/
/*}*/

/*.pagination ul li a.next, .pagination ul li a.prev {*/
    /*color: #76b900;*/
    /*font-weight: 400*/
/*}*/

/*.pagination ul li span {*/
    /*color: #b0b7bc*/
/*}*/

.inline-list {
    list-style: none
}

.inline-list > li {
    display: inline-block
}

.text-list > li {
    font-size: 18px;
    line-height: 30px;
    list-style: none;
    position: relative;
    left: 15px
}

.text-list > li:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    position: absolute;
    left: -15px;
    top: 12px;
    border-radius: 100%;
    background: #b0b7bc
}

.icon-list > li {
    list-style: none;
    position: relative;
    padding-left: 30px !important;
    padding-top: 5px;
    padding-bottom: 5px
}

@media only screen and (min-width: 480px) {
    .icon-list > li {
        padding-left: 40px !important
    }
}

.icon-list > li:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: transparent url(../images/arrow-right-icon-blue.png) 50% no-repeat;
    background-size: 20px;
    position: absolute;
    left: 0;
    top: 6px
}

.icon-list.color-primary > li:before {
    background-image: url(../images/arrow-right-icon-green.png)
}

.icon-list--check > li:before {
    background-image: url(../images/tick-icon-blue.png)
}

.icon-list--check.color-primary > li:before {
    background-image: url(../images/tick-icon-green.png)
}

.icon-list--failure > li:before {
    background-image: url(../images/cross-icon-red.png)
}

.simple-list {
    list-style: none;
    margin: 0 0 75px;
    padding: 0
}

.simple-list > li {
    margin: 0;
    padding: 0 0 5px
}

.simple-list__title {
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin-top: 40px;
    margin-bottom: 10px;
    color: #76b900
}

.ui-list, .ui-list li {
    border: 0 solid #d8dbde
}

.ui-list {
    list-style: none;
    margin: 0 0 50px;
    padding: 0;
    border-top-width: 1px;
    color: #001d68;
    font-weight: 400;
    font-size: 13px;
    line-height: 17.5px
}

@media only screen and (min-width: 1025px) {
    .ui-list {
        margin-bottom: 75px
    }
}

@media only screen and (min-width: 480px) {
    .ui-list {
        font-size: 14px;
        line-height: 20px
    }
}

@media only screen and (min-width: 1480px) {
    .ui-list {
        font-size: 16px;
        line-height: 25px
    }
}

.ui-list > li {
    margin: 0;
    padding: 15px 0;
    border-bottom-width: 1px
}

@media only screen and (min-width: 480px) {
    .ui-list > li {
        padding-left: 15px;
        padding-right: 20px
    }
}

.ui-list.icon-list > li:before {
    top: 14px
}

@media only screen and (min-width: 480px) {
    .ui-list.icon-list > li:before {
        top: 15px
    }
}

@media only screen and (min-width: 768px) {
    .ui-list.icon-list > li:before {
        top: 16px
    }
}

.ui-list__title {
    color: #001d68;
    letter-spacing: -.02em;
    margin-bottom: 15px;
    text-align: left !important;
    max-width: none !important
}

.ui-list__title + .ui-list:not(.split-list) {
    border: none
}

.ui-list__title + .ui-list:not(.split-list) li:last-of-type {
    border: none;
    padding-bottom: 0
}

.ui-list__title:after {
    display: none !important
}

.ui-list--slim {
    margin: 0
}

.ui-list--slim, .ui-list--slim li {
    padding-top: 8px !important;
    padding-bottom: 8px !important
}

.ui-list--slim li {
    font-size: 14px;
    font-weight: 400
}

.ui-list--slim li:before {
    top: 10px
}

.block-list {
    list-style: none;
    margin: 0 0 75px;
    padding: 0
}

.block-list > li {
    margin: 0;
    padding: 15px 50px 15px 0
}

.block-list.icon-list > li:before {
    top: 18px
}

.block-list__title {
    font-size: 35px;
    line-height: 40px;
    letter-spacing: -.02em;
    margin-bottom: 30px
}

.block-list--slim {
    margin: 0
}

.block-list--slim, .block-list--slim li {
    padding-top: 8px !important;
    padding-bottom: 8px !important
}

.block-list--slim li {
    font-size: 14px;
    font-weight: 400
}

.block-list--slim li:before {
    top: 10px
}

.step-list {
    font-size: 0;
    margin: 0;
    padding: 0;
    text-align: center
}

@media only screen and (min-width: 1025px) {
    .step-list {
        margin-left: -60px;
        padding: 0 60px
    }
}

.step-list img {
    display: block;
    margin: 0 auto;
    width: 100%
}

@media only screen and (max-width: 1025px) {
    .step-list img {
        max-width: 500px;
        margin: 0 auto
    }
}

.step-list p:not(.caption):not(.tab-group__item__button) {
    font-size: 16px;
    line-height: 25px
}

.step-list p {
    margin: 0 auto;
    padding: 10px 20px;
    max-width: 400px;
    background: #d6eab3
}

.step-list p + p {
    background: #eff1f2
}

@media only screen and (max-width: 1025px) {
    .step-list p + p {
        max-width: 500px !important;
        margin: 0 auto !important
    }
}

.step-list .step.step--third {
    width: 100%;
    display: inline-block;
    font-size: 16px
}

@media only screen and (min-width: 1025px) {
    .step-list .step.step--third {
        padding-left: 60px;
        width: 33.3333333333%;
        vertical-align: top
    }
}

.step-list .step.step--half {
    width: 100%;
    display: inline-block;
    font-size: 16px
}

@media only screen and (min-width: 1025px) {
    .step-list .step.step--half {
        padding-left: 60px;
        width: 50%;
        vertical-align: top
    }
}

.step-list p.caption, .step-list p.tab-group__item__button {
    color: #76b900
}

@media only screen and (max-width: 1025px) {
    .step-list p.caption, .step-list p.tab-group__item__button {
        max-width: 500px !important;
        margin: 0 auto !important
    }
}

.step-list + .button, .step-list + .button-group {
    margin-top: 0
}

@media only screen and (max-width: 1025px) {
    .step-list .step {
        margin-bottom: 50px
    }

    .step-list .step:last-of-type {
        margin-bottom: 0
    }
}

@media only screen and (min-width: 1025px) {
    .step-list {
        text-align: left
    }

    .step-list img {
        margin: 0 0 30px;
        width: auto
    }

    .step-list p, .step-list p + p {
        background: none;
        margin: 0;
        padding: 0;
        max-width: none
    }

    .step-list .caption, .step-list .tab-group__item__button {
        color: #76b900;
        margin: 0 0 5px
    }
}

.social-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0 !important
}

.social-list a, .social-list li {
    width: 36px;
    height: 36px
}

.social-list li {
    display: inline-block;
    margin-left: 20px;
    background-repeat: no-repeat
}

.social-list li:first-of-type {
    margin-left: 0
}

.social-list a {
    display: block;
    background-size: 36px;
    border: none
}

.social-list a:focus, .social-list a:hover {
    opacity: .85
}

.social-list .facebook a {
    background-image: url(../images/f1.png);
    background-repeat:no-repeat;
}

.social-list .twitter a {
    background-image: url(../images/f2.png);
    background-repeat:no-repeat;
}

.social-list .linkedin a {
    background-image: url(../images/f3.png);
    background-repeat:no-repeat;
}

.social-list .youtube a {
    background-image: url(../images/f4.png);
    background-repeat:no-repeat;
}

.social-list .gg a {
    background-image: url(../images/f5.png)
}

@media only screen and (min-width: 768px) and (max-width: 1099px) {
    .social-list a, .social-list li {
        width: 40px;
        height: 40px
    }

    .social-list li {
        margin-left: 10px
    }

    .social-list a {
        background-size: 40px
    }
}

@media only screen and (min-width: 1100px) {
    .social-list a, .social-list li {
        width: 70px;
        height: 70px
    }

    .social-list a {
        background-size: 70px
    }
}

.measure-list {
    margin-top: 75px;
    text-align: center
}

.measure-list li {
    list-style: none;
    width: 100%;
    margin: 0 auto
}

.measure-list li.measure--6 {
    width: 100%
}

.measure-list li.measure--5 {
    width: 83.33%
}

.measure-list li.measure--4 {
    width: 66.66%
}

.measure-list li h3 {
    color: #76b900
}

.measure-list li p {
    color: #414042;
    font-family: Scene W01;
    font-style: normal;
    font-weight: 200;
    font-size: 25px;
    line-height: 30px;
    text-align: center;
    margin: 0;
    max-width: none !important
}

@supports (display:-moz-flex) or (display:flex) {
    .measure-list li p {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-pack: center;
        justify-content: center
    }

    .measure-list li p:after, .measure-list li p:before {
        -ms-flex-positive: 1;
        flex-grow: 1;
        height: 15px;
        content: "\a0";
        border-color: #c0c1c2;
        border-style: solid;
        position: relative;
        top: 15px
    }

    .measure-list li p:before {
        border-width: 1px 0 0 1px;
        margin-right: 20px
    }

    .measure-list li p:after {
        border-width: 1px 1px 0 0;
        margin-left: 20px
    }
}

.measure-list li p > b {
    font-size: 16px;
    line-height: 35px;
    color: #414042;
    font-weight: 400
}

.measure-list li img {
    margin: 20px 0 0
}

@media only screen and (min-width: 768px) {
    .measure-list li p {
        font-size: 30px;
        line-height: 30px
    }

    .measure-list li p > b {
        font-size: 16px;
        line-height: 40px;
        color: #414042;
        font-weight: 400
    }
}

@media only screen and (min-width: 768px) {
    .split-list > li {
        width: 50%;
        float: left;
        clear: left;
        padding: 15px 20px 15px 0
    }

    .split-list > li:nth-of-type(odd):last-child {
        width: 100%;
        padding-right: calc(50% + 20px)
    }

    .split-list > li:nth-of-type(2n) {
        float: right;
        clear: none;
        padding: 15px 0 15px 30px
    }
}

@media only screen and (min-width: 1025px) {
    .split-list > li {
        padding-right: 20px
    }
}

.intro {
    text-align: center
}

.intro img {
    margin-top: 20px
}

@media only screen and (min-width: 768px) {
    .intro img {
        margin-top: 30px
    }
}

@media only screen and (min-width: 1480px) {
    .intro img {
        margin-top: 60px;
        margin-bottom: 0
    }
}

.intro .h1, .intro .h2, .intro h1, .intro h2 {
    margin-left: auto;
    margin-right: auto
}

@media only screen and (min-width: 768px) {
    .intro .h1, .intro .h2, .intro h1, .intro h2 {
        margin-bottom: 30px
    }
}

@media only screen and (min-width: 1480px) {
    .intro .h1, .intro .h2, .intro h1, .intro h2 {
        margin-bottom: 40px
    }
}

.intro .h1:after, .intro .h2:after, .intro h1:after, .intro h2:after {
    content: "";
    display: block;
    height: 1px;
    width: 300px;
    max-width: 50%;
    margin: 20px auto;
    background-color: #c0c1c2
}

@media only screen and (max-width: 768px) {
    .intro .h1:after, .intro .h2:after, .intro h1:after, .intro h2:after {
        margin-bottom: 0
    }
}

@media only screen and (min-width: 768px) {
    .intro .h1:after, .intro .h2:after, .intro h1:after, .intro h2:after {
        display: none
    }
}

.intro + .h2, .intro + h2 {
    color: #001d68;
    margin-top: -50px
}

.intro + .h2:before, .intro + h2:before {
    content: "";
    display: block;
    height: 1px;
    width: 300px;
    max-width: 50%;
    margin: 0 auto 50px;
    background-color: #c0c1c2
}

.intro .h1, .intro .h2, .intro .h3, .intro .h4, .intro h1, .intro h2, .intro h3, .intro h4, .intro p {
    max-width: none
}

.intro .subtitle {
    text-align: center;
    max-width: none; font-size:22px;
}

@media only screen and (min-width: 768px) {
    @supports (display:-moz-flex) or (display:flex) {
        .intro .subtitle {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: row;
            flex-direction: row;
            -ms-flex-pack: center;
            justify-content: center;text-transform:none;
        }

        .intro .subtitle:after, .intro .subtitle:before {
            content: "\a0";
            -ms-flex-positive: 1;
            flex-grow: 1;
            height: 1px;
            background-color: #c0c1c2;
            position: relative;
            top: 12px
        }

        .intro .subtitle:before {
            margin-right: 20px
        }

        .intro .subtitle:after {
            margin-left: 20px
        }
    }
}

.intro > :last-child {
    margin-bottom: 0
}

.intro--alt h2 {
    margin-bottom: 20px
}

.intro--alt .subtitle {
    display: block
}

.intro--alt .subtitle:after, .intro--alt .subtitle:before {
    display: none
}

@media only screen and (min-width: 768px) {
    .intro + h2 {
        margin-top: 0
    }

    .intro + h2:before {
        margin-bottom: 75px
    }

    .intro--alt {
        text-align: left
    }

    .intro--alt .subtitle {
        display: block;
        text-align: left
    }
}

.progress {
    color: #808285;
    text-align: left
}

.progress .h3, .progress .h4 {
    margin-bottom: 10px
}

.progress .h4 {
    color: #808285
}

@media only screen and (min-width: 1100px) {
    .progress .h4 {
        font-size: 20px
    }
}

.progress + .progress {
    margin-top: 30px
}

.progress__bar {
    height: 5px;
    overflow: hidden;
    border-radius: 0 5px 5px 0
}

#page--skypack .section#design #light-uniformity .caption + p, #page--skypack .section#design #light-uniformity .tab-group__item__button + p, .progress__subtitle, .progress__title {
    text-transform: uppercase;
    font-size: 14px;
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 700
}

.progress__title {
    margin-bottom: 10px !important
}

#page--skypack .section#design #light-uniformity .caption + p, #page--skypack .section#design #light-uniformity .tab-group__item__button + p, .progress__subtitle {
    margin: 10px 0 0
}

.progress__line {
    float: left;
    width: 0;
    border-radius: 0 5px 5px 0;
    color: #fff;
    background-color: #808285;
    box-sizing: border-box;
    animation: bg-move 1.2s linear infinite;
    height: 100%
}

.progress--primary {
    color: #76b900
}

.progress--primary .progress__line {
    background-color: #76b900
}

.progress--secondary {
    color: #001d68
}

.progress--secondary .progress__line {
    background-color: #001d68
}

.progress--info {
    color: #53b7e8
}

.progress--info .progress__line {
    background-color: #53b7e8
}

.progress--failure {
    color: #53b7e8
}

.progress--failure .progress__line {
    background-color: #53b7e8
}

.progress--success {
    color: #76b900
}

.progress--success .progress__line {
    background-color: #76b900
}

.progress--failure {
    color: #df1a22
}

.progress--failure .progress__line {
    background-color: #df1a22
}

.progress--warning {
    color: #ef7d00
}

.progress--warning .progress__line {
    background-color: #ef7d00
}

.feature-icons {
    text-align: center
}

@media only screen and (max-width: 480px) {
    .feature-icons {
        text-align: left;
        margin-left: 15%
    }
}

.feature-icons__icon {
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    text-transform: uppercase;
    text-align: left;
    list-style: none;
    margin: 0 30px 30px 0;
    padding: 0 0 0 60px;
    position: relative;
    left: 15px;
    display: inline-block;
    vertical-align: top
}

@media only screen and (max-width: 768px) {
    .feature-icons__icon:last-of-type {
        margin-bottom: 0
    }

    .feature-icons__icon:only-child {
        margin-bottom: 30px
    }
}

.feature-icons__icon > span {
    display: block;
    font-size: 14px;
    color: #76b900
}

.feature-icons__icon:before {
    content: "";
    display: block;
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    background-size: 35px;
    background-position: 50%;
    position: absolute;
    top: 0;
    left: 0
}

.feature-icons__icon.warranty:before {
    background-image: url(../images/warranty-icon-grey.png)
}

.feature-icons__icon.dimmable:before {
    background-image: url(../images/dimmable-icon-grey.png)
}

.feature-icons__icon.emergency:before {
    background-image: url(../images/emergency-icon-grey.png)
}

.feature-icons__icon.microwave:before, .feature-icons__icon.sensing:before {
    background-image: url(../images/sensing-icon-grey.png)
}

.feature-icons__icon.beam-angle:before {
    background-image: url(../images/beam-angle-icon-grey.png)
}

.feature-icons__icon.ip65:before {
    background-image: url(../images/ip-icon-grey.png)
}

.feature-icons__icon.rim:before {
    background-image: url(../images/rim-icon-grey.png)
}

.feature-icons__icon.to-order:before {
    background-image: url(../images/to-order-icon-grey.png)
}

.feature-icons__icon.lens:before {
    background-image: url(../images/lens-icon-grey.png)
}

@media only screen and (min-width: 1025px) {
    .offset-image {
        position: relative
    }

    .offset-image img {
        max-width: none;
        position: absolute;
        margin: 0 !important
    }
}

.concentric {
    width: 200px;
    height: 200px;
    margin: 40px auto 25px;
    background-color: transparent;
    background-image: url(../images/concentric-circles-yellow.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    text-align: center;
    display: table
}

.concentric__content {
    display: table-cell;
    vertical-align: middle
}

.concentric__content p {
    margin: 0
}

@media only screen and (max-width: 1025px) {
    .concentric__content p.beta {
        font-size: 50px;
        line-height: 40px
    }

    .concentric__content p:not(.beta) {
        font-size: 14px
    }
}

.concentric--yellow {
    background-image: url(../images/concentric-circles-yellow.png);
    border-color: #f9ba00
}

.concentric--orange {
    background-image: url(../images/concentric-circles-orange.png);
    border-color: #ef7d00
}

.concentric--red {
    background-image: url(../images/concentric-circles-red.png);
    border-color: #df1a22
}

.concentric--simple {
    background: none;
    border-width: 1px;
    border-style: solid;
    border-radius: 100%;
    border-color: #b0b7bc !important;
    background: linear-gradient(135deg, #fbfbfc 96%, #eff1f2)
}

@media only screen and (min-width: 1025px) {
    .concentric:not(.concentric--simple) {
        width: 100%;
        height: 300px;
        max-width: 100%;
        margin-top: 0
    }

    .concentric__content p.beta {
        line-height: 60px
    }
}

.slick-slide {
    outline: none
}

.slick-slider.slider-nav img {
    cursor: pointer
}

.slick-slide a {
    outline: none
}

@keyframes a {
    0% {
        transform: scale(.1);
        opacity: 0
    }
    50% {
        opacity: .7
    }
    to {
        transform: scale(1);
        opacity: 0
    }
}

.hotspots {
    position: relative;
    margin: 0 auto
}

.hotspots img {
    margin-bottom: 0
}

.hotspots .hotspot {
    position: absolute;
    width: 30px;
    height: 30px
}

.hotspots .hotspot .hotspot__inner {
    position: relative;
    width: 30px;
    height: 30px;
    padding: 1px 0 0;
    border-radius: 100%;
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    background: #fff;
    color: #76b900;
    z-index: 4;
    cursor: pointer;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, .25)
}

.hotspots .hotspot .hotspot__pulse {
    display: block;
    content: "";
    position: absolute;
    height: 60px;
    width: 60px;
    top: -15px;
    left: -15px;
    background: #76b900;
    border-radius: 100%;
    z-index: 1;
    animation: a 2s linear infinite
}

.hotspots .hotspot .hotspot__tooltip {
    opacity: 0;
    width: 300px;
    padding: 20px;
    text-align: left;
    background: #fff;
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, .2);
    position: relative;
    z-index: 3;
    overflow: visible !important;
    transition: all 1s ease-in-out
}

.hotspots .hotspot .hotspot__tooltip[data-tooltip-alignment=right] {
    top: -60px;
    right: -65px
}

.hotspots .hotspot .hotspot__tooltip[data-tooltip-alignment=right]:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent #fff transparent transparent;
    top: 30px;
    left: -15px;
    right: 0;
    margin: 0
}

.hotspots .hotspot .hotspot__tooltip[data-tooltip-alignment=left] {
    top: -60px;
    left: -335px
}

.hotspots .hotspot .hotspot__tooltip[data-tooltip-alignment=left]:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #fff;
    top: 30px;
    right: -15px;
    margin: 0
}

.hotspots .hotspot .hotspot__tooltip h3 {
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #76b900
}

.hotspots .hotspot .hotspot__tooltip h3:after {
    content: "";
    display: block;
    height: 1px;
    margin: 10px 0 0;
    background-color: hsla(216, 2%, 51%, .25)
}

.hotspots .hotspot .hotspot__tooltip p {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px
}

.hotspots .hotspot .hotspot__tooltip p:last-of-type {
    margin-bottom: 0
}

.hotspots .hotspot.hovered .hotspot__tooltip {
    opacity: 1;
    transition: all 1s ease-in-out;
    z-index: 5
}

.hotspots + .intro .h3, .hotspots + .intro h3 {
    color: #001d68
}

.hotspots + .intro .subtitle:after, .hotspots + .intro .subtitle:before {
    display: none
}

.hotspots + .intro:before {
    content: "";
    display: block;
    width: 200px;
    height: 1px;
    margin: 0 auto 75px;
    background: hsla(216, 2%, 51%, .5)
}

.hotspots--static .hotspot .hotspot__inner {
    cursor: default;
    width: 26px;
    height: 26px;
    border: 4px solid #76b900;
    box-sizing: initial;
    padding: 0
}

.hotspots--static .hotspot .hotspot__pulse {
    background: #fff;
    animation: none;
    opacity: .8;
    height: 42px;
    width: 42px;
    top: -4px;
    left: -4px
}

.r-table {
    position: relative;
    top: 1px;
    left: 1px
}

.r-table h3 {
    display: inline;
    color: #414042 !important;
    font-size: 14px;
    line-height: 15px;
    font-weight: 700;
    margin: 0 !important
}

.r-table-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.r-table-row:last-of-type .r-table-cell:not(.r-table-cell--download), .r-table-row:last-of-type .r-table__accordion {
    border-bottom: none
}

.r-table-cell {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    list-style: none;
    background: #e7e9eb;
    border-bottom: 1px solid #fff;
    padding: 10px 25px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.r-table-cell a, .r-table-cell p {
    margin: 0;
    font-size: 14px;
    line-height: 15px;
    border: none;
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 400;
    margin: 0 !important
}

.r-table-cell p {
    color: #414042
}

.r-table-cell a {
    font-size: 12px;
    color: #808285;
    padding: 5px
}

.r-table-cell a.loading, .r-table-cell a:focus, .r-table-cell a:hover {
    color: #fff;
    background: #91c733;
    cursor: pointer
}

.r-table-cell .r-table-cell-title {
    font-weight: 700;
    color: #414042;
    text-transform: uppercase
}

.r-table-cell .dropdown-button {
    cursor: pointer;
    float: right;
    position: relative;
    border-radius: 5px;
    font-size: 12px;
    line-height: 26px;
    padding: 0 10px;
    background-color: #fff;
    color: #808285
}

.r-table-cell .dropdown-button:focus, .r-table-cell .dropdown-button:hover {
    background: #fff
}

.r-table-col--head--download + .r-table-col--head--download h3 {
    display: none
}

.r-table-col--head--discontinued {
    background: transparent;
    text-align: center;
    cursor: pointer
}

.r-table-row--discontinued {
    display: none
}

.r-table-row--discontinued.visible {
    display: -ms-flexbox;
    display: flex
}

.r-table-col--downloads {
    text-align: right
}

.r-table-cell--dropdown {
    overflow: visible;
    display: none
}

.r-table-cell--download {
    background: #eff1f2;
    padding: 0
}

.r-table-cell--download a {
    padding: 12px 25px 10px;
    width: 100%;
    display: block
}

.dropdown {
    position: relative;
    overflow: visible
}

.dropdown-container {
    display: inline-block;
    position: relative;
    text-align: center
}

.dropdown-description {
    float: left;
    padding-right: 1em
}

.dropdown-button:after {
    display: block;
    position: absolute
}

.dropdown-menu {
    list-style: none;
    cursor: pointer;
    overflow: show;
    position: absolute;
    text-align: left;
    top: 30px;
    width: 150px;
    z-index: 99999;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    color: #444;
    display: none;
    line-height: 1.4;
    margin: 2px 0 0;
    max-width: 200px;
    min-width: 100px;
    transition: opacity .2s, visibility .2s;
    left: auto;
    right: 0
}

.dropdown-menu span {
    display: block
}

.dropdown-menu span a {
    display: block;
    width: 100%;
    padding: 10px
}

.dropdown-menu span:first-of-type a {
    border-radius: 5px 5px 0 0
}

.dropdown-menu span:last-child a {
    border-radius: 0 0 5px 5px
}

.dropdown-menu:after {
    content: "";
    height: 0;
    position: absolute;
    width: 0;
    display: block;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    top: 0;
    border-bottom: 10px solid #fff;
    margin: -10px 0 0 -9px;
    left: auto;
    right: 12px
}

.show-menu {
    display: block
}

.r-table__accordion {
    width: 100%;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    left: -1px;
    transition: background .2s ease-in-out;
    background: #dfe2e4;
    color: #808285;
    margin: 0;
    border: none;
    border-bottom: 1px solid #f7f8f8;
    position: relative;
    top: -1px;
    padding: 10px 25px
}

.r-table__accordion h3 span {
    font-weight: 200;
    text-transform: none
}

.r-table__accordion:focus, .r-table__accordion:hover {
    outline: none;
    background: none;
    border: none;
    border-bottom: 1px solid #eff1f2;
    background: #d8dbde;
    color: #414042
}

.r-table__accordion[aria-selected=true] {
    margin-bottom: 0;
    background: #d0d4d7;
    border-bottom-width: 0
}

.r-table__accordion:before {
    content: "+";
    display: inline-block;
    width: 30px
}

.r-table__accordion[aria-selected=true]:before {
    content: "–";
    display: inline-block;
    width: 30px
}

@media (min-width: 1100px) {
    .r-table-row {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
    }

    .r-table-cell {
        width: auto;
        padding: 10px 20px;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1.5;
        flex-grow: 1.5
    }

    .r-table-cell--download {
        display: none
    }

    .r-table-cell--dropdown {
        display: block
    }

    .r-table-cell--short {
        -ms-flex-positive: .5;
        flex-grow: .5
    }

    .r-table-cell--long {
        -ms-flex-positive: 2;
        flex-grow: 2
    }

    .r-table-col--head {
        display: block;
        background: #91c733;
        padding-top: 12.5px;
        padding-bottom: 12.5px
    }

    .r-table-col--head h3 {
        font-weight: 400;
        color: #fff !important;
        text-transform: uppercase
    }

    .r-table-col--head--discontinued {
        background: #d0d4d7;
        text-align: center;
        cursor: pointer
    }

    .r-table-col--head--discontinued h3:after {
        content: "";
        display: inline-block;
        margin-left: 10px;
        width: 15px;
        height: 10px;
        background: url(../images/navigatedown.png);
        background-size: 15px;
        background-repeat: no-repeat
    }

    .r-table-col--head--discontinued.clicked h3:after {
        background-image: url(../images/navigateup.png)
    }

    .r-table-col--head--download {
        background: #9fce4d
    }

    .r-table-cell-title {
        display: none
    }
}

@media (max-width: 1100px) {
    .r-table--collapse {
        display: block
    }

    .r-table--collapse > .r-table-cell {
        width: 100% !important
    }

    .hidden-small, .r-table-cell--empty, .r-table-col--head, .r-table-row--head {
        display: none
    }

    .r-table-col--head--discontinued {
        display: block
    }

    .r-table-row--head + .r-table-cell {
        border-top-width: 0
    }
}

@media (min-width: 1100px) {
    .r-table__accordion {
        display: none
    }
}

.js-r-tableaccordions {
    min-width: 240px
}

.ie9 .r-table__accordion {
    display: table
}

.ie9 .r-table-row {
    display: block
}

.ie9 .r-table-cell {
    width: 100%;
    display: block;
    padding: 10px 25px
}

.ie9 .hidden-small, .ie9 .r-table-cell--empty, .ie9 .r-table-cell-title, .ie9 .r-table-col--head, .ie9 .r-table-row--head {
    display: none
}

.ie9 .r-table-row--head + .r-table-cell {
    border-top-width: 0
}

.ie9 .r-table--collapse {
    display: block
}

.ie9 .r-table--collapse > .r-table-cell {
    width: 100% !important
}

.accordion {
    list-style: none;
    width: 100%;height: 50px
}

.accordion .is-expanded {
    display: block
}

.accordion .is-expanded > .accordion__trigger {
    margin-bottom: 0;
    background: #d0d4d7
}

.accordion .is-expanded > .accordion__trigger:before {
    content: "–";
    display: inline-block;
    width: 30px
}

.accordion__content {
    display: none;
    background: #e7e9eb;
    border-top: 1px solid #fff;
    padding: 15px 25px
}

.accordion__content p {
    font-size: 16px;
    margin-bottom: 15px
}

.accordion__content > :last-child {
    margin-bottom: 0
}

.accordion__item:first-of-type .accordion__trigger {
    border-top: none
}

.accordion__trigger {
    display: block;
    width: 100%;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease-in-out;
    background: #dfe2e4;
    margin: 0;
    border: none;
    border-top: 10px solid #f7f8f8;
    padding: 15px 25px;
    font-size: 16px;
    font-weight: 400;
    color: #001d68
}

.accordion__trigger:focus, .accordion__trigger:hover {
    outline: none;
    background: none;
    border: none;
    border-top: 10px solid #eff1f2;
    background: #d8dbde;
    color: #001a5e
}

.accordion__trigger:before {
    content: "+";
    display: inline-block;
    width: 30px
}

.tabs {
    padding: 0
}

.tabs .tabs__item {
    list-style: none
}

@media only screen and (min-width: 768px) {
    .tabs .tabs__item {
        display: inline
    }
}

.tabs .tabs__label {
    display: block;
    text-decoration: none;
    border: none;
    padding: 10px 20px;
    background-color: #e7e9eb;
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 700
}

@media only screen and (min-width: 768px) {
    .tabs .tabs__label {
        display: inline-block
    }
}

.tabs .tabs__label:active, .tabs .tabs__label:focus, .tabs .tabs__label:hover {
    outline: none;
    border: none
}

.tabs .tabs__label.is-active {
    border-bottom: 0;
    background-color: #91c733
}

.tabs .tabs__content {
    display: none;
    width: 100%
}

.tabs .tabs__content .r-table {
    position: static
}

@media only screen and (min-width: 768px) {
    .tabs .tabs__content {
        float: left
    }
}

.tab-group {
    padding: 0;
    text-align: center
}

.tab-group__controls {
    margin-bottom: 60px
}

.tab-group__item__button {
    display: block;
    padding: 0 15px;
    text-decoration: none
}

.tab-group__item__button.is-active {
    color: #76b900
}

.tab-group__item__button:focus, .tab-group__item__button:hover {
    border: none
}

@media only screen and (min-width: 768px) {
    .tab-group__item__button {
        display: inline
    }
}

.tab-group__tabs {
    position: relative
}

.tab-group__item {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    width: 100%;
    list-style: none;
    transition: opacity .75s ease-in-out
}

.tab-group__item.is-open {
    position: relative;
    z-index: 3;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=1)
}

.hint {
    display: inline-block;
    font-size: 25px;
    font-weight: 300;
    color: #808285;
    border: none !important;
    transition: .6s ease-in-out;
    margin: 0 auto
}

.hint:after {
    content: "";
    display: block;
    width: 25px;
    height: 25px;
    background-image: url(../images/down-arrow-icon-blue.png);
    background-size: 25px;
    background-position: 50%;
    background-repeat: no-repeat;
    margin: 20px auto 0;
    transition: .2s ease-in-out;
    position: relative;
    top: 0
}

.hint:focus, .hint:hover {
    cursor: pointer;
    color: #6c6e70
}

.hint:focus:after, .hint:hover:after {
    top: 10px
}

.hint--above {
    margin: 0 auto 20px
}

.hint--above:before {
    background-image: url(../images/up-arrow-icon-blue.png)
}

.hint--above:after {
    display: none
}

.image-divider {
    height: 0;
    overflow: hidden;
    margin-bottom: 50px
}

@media only screen and (min-width: 768px) {
    .image-divider {
        height: 100px;
        width: auto;
        overflow: visible;
        display: block;
        margin: 75px 0
    }

    .image-divider img {
        max-width: none;
        height: 100px;
        width: auto;
        margin: 0
    }

    @supports (display:-moz-flex) or (display:flex) {
        .image-divider {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: row;
            flex-direction: row;
            -ms-flex-pack: center;
            justify-content: center
        }

        .image-divider:after, .image-divider:before {
            -ms-flex-positive: 1;
            flex-grow: 1;
            height: 1px;
            content: "\a0";
            background-color: #c0c1c2;
            position: relative;
            top: 50%
        }

        .image-divider:before {
            margin-right: 20px
        }

        .image-divider:after {
            margin-left: 20px
        }
    }.image-divider--narrow, .image-divider--narrow img {
         height: 40px
     }

    .image-divider--mini {
        width: 400px;
        height: 70px;
        margin-left: auto;
        margin-right: auto
    }

    .image-divider--mini img {
        height: 70px
    }
}

.large-icon {
    display: block;
    height: 100px;
    width: auto;
    max-width: none
}

.end {
    display: block;
    width: 100px;
    height: 1px;
    margin: 75px auto 100px;
    background: #d8dbde
}

.prev-next {
    width: 100%
}

.prev-next a {
    display: table;
    width: 50%;
    /*height: 150px;*/
    float: left;
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 200;
    text-align: center;
    font-size: 14px;
    line-height: 25px;
    padding: 20px;
    /*background: #c0c5c9;*/
    color: #fff
}

.prev-next .mt1 a{
	background: #c0c5c9 url(../images/left.png) no-repeat;
	background-position: 85%;
}

.prev-next .mt1 a:hover{
	background: #028244 url(../images/left.png) no-repeat;
	background-position: 85%;
}

.prev-next .mt2 a{
	background: #c0c5c9 url(../images/right.png) no-repeat;
	background-position: 15%;
}

.prev-next .mt2 a:hover{
	background: #028244 url(../images/right.png) no-repeat;
	background-position: 15%;
}



.prev-next a + a {
    border-left: 1px solid #eff1f2
}

.prev-next a span {
    display: table-cell;
    vertical-align: middle
}

.prev-next a i {
    font-style: normal;
    color: #c8e399
}

.prev-next a:focus, .prev-next a:hover {
    background: #a4dbeb;
    border-bottom: none
}

.prev-next a:only-child {
    width: 100%
}

@media only screen and (min-width: 768px) {
    .prev-next a {
        font-size: 16px;
        line-height: 25px;
        padding: 30px
    }
}

@media only screen and (min-width: 1025px) {
    .prev-next a {
        font-size: 18px;
        line-height: 30px;
        padding: 30px 60px
    }
}

.feature-callout {
    color: #b0b7bc;
    text-align: center;
    display: block;
    margin: 0 auto 30px;
    max-width: 100% !important;
    box-sizing: border-box
}

.feature-callout .feature-callout__text > b, .feature-callout > b {
    font-weight: 200;
    font-size: 50px;
    line-height: 1;
    color: #53b7e8;
    display: block;
    letter-spacing: -.05em;
    word-spacing: .02em
}

.feature-callout .feature-callout__text > b > span, .feature-callout > b > span {
    font-weight: 400;
    font-size: 25px;
    letter-spacing: 0
}

.feature-callout > b {
    margin: 5px 0;
    white-space: nowrap
}

.feature-callout .feature-callout__text > b {
    margin: 0
}

.feature-callout-container {
    margin: 0 0 50px
}

@media only screen and (min-width: 768px) {
    .feature-callout {
        text-align: left;
        margin: 0;
        padding: 0;
        border: none
    }

    .feature-callout--small {
        font-size: 18px
    }

    .feature-callout--small > b {
        font-size: 50px
    }

    .feature-callout--boxed {
        text-align: center;
        padding: 30px 0;
        border: 1px solid #d8dbde
    }

    .feature-callout-container {
        margin-bottom: 100px
    }

    .feature-callout-container .feature-callout {
        width: 50%;
        float: left
    }

    .feature-callout-container .feature-callout--boxed {
        width: auto;
        width: calc(50% - 15px)
    }

    .feature-callout-container .feature-callout--boxed:first-of-type {
        margin-right: 15px
    }

    .feature-callout-container .feature-callout--boxed:last-of-type {
        margin-left: 15px
    }
}

@media only screen and (min-width: 1480px) {
    .feature-callout {
        line-height: 25px
    }

    .feature-callout > b {
        font-size: 60px
    }

    .feature-callout > b > span {
        font-size: 25px
    }

    .feature-callout--small {
        font-size: 18px
    }

    .feature-callout--small > b {
        font-size: 50px
    }
}

@media only screen and (max-width: 768px) {
    .key-stats [class^=grid-col]:last-child .feature-callout {
        margin-bottom: 0
    }
}

.split-comparison {
    margin: 50px 0;
    position: relative
}

.split-comparison img {
    margin: 20px 0 0
}

.split-comparison p {
    color: #001d68;
    font-size: 20px;
    margin: 0 0 20px;
    max-width: none
}

.split-comparison .split__right {
    margin-top: 40px
}

@media only screen and (min-width: 768px) {
    .split-comparison {
        margin: 100px 0 50px
    }

    .split-comparison img {
        max-width: none;
        margin-top: 50px
    }

    .split-comparison p {
        font-size: 30px;
        margin-bottom: 0
    }

    .split-comparison .split__left {
        float: left;
        text-align: right;
        padding-right: 100px
    }

    .split-comparison .split__left img {
        float: right;
        position: relative;
        left: 60px
    }

    .split-comparison .split__right {
        margin-top: 0;
        float: right;
        padding-left: 100px
    }

    .split-comparison .split__right img {
        float: left;
        position: relative;
        right: 60px
    }

    .split-comparison .split__left, .split-comparison .split__right {
        width: 50%
    }
}

.subscribe-form {
    margin: 50px 0 0 !important
}

.subscribe-form input:not([type=submit]) {
    border: none;
    display: block
}

.subscribe-form input[type=submit] {
    margin-top: 30px
}

.hero-image {
    display: none;
    content: "";
    display: block;
    width: 100%;
    height: 150px;
    text-align: center;
    background: transparent url(../images/skytile-hero.jpg) no-repeat;
    background-position: 50%;
    background-size: cover;
    position: relative;
    z-index: -1
}

@media only screen and (min-width: 480px) {
    .hero-image {
        height: 200px
    }
}

@media only screen and (max-width: 1025px) {
    .hero-image {
        background-position-y: center !important
    }
}

@media only screen and (min-width: 768px) {
    .hero-image {
        height: 250px
    }
}

@media only screen and (min-width: 1025px) {
    .hero-image {
        height: 350px
    }
}

@media only screen and (min-width: 1480px) {
    .hero-image {
        height: 700px
    }
}

@media only screen and (min-width: 1480px) and (max-height: 1000px) {
    .hero-image {
        height: 550px
    }
}

.hero-image--title {
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 20px;
    line-height: 25px
}

.hero-image--strapline, .hero-image--title {
    color: #fff;
    font-weight: 700;
    margin-bottom: 0
}

.hero-image--strapline {
    font-size: 40px;
    line-height: 45px
}

.hero-image--strapline sup {
    font-size: 50%;
    font-weight: 400
}

.hero-image--8-3 {
    width: 100%;
    padding-bottom: 37.5%;
    height: auto !important
}

.page-overlay {
    max-width: 1680px;
    margin: 0 auto;
    position: absolute;
    z-index: 2;
    height: 100%;
    width: 100%;
    top: 80px;
    left: 0;
    background-color: rgba(65, 64, 66, .5);
    visibility: hidden;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: opacity .3s 0s, visibility 0s .3s, transform .3s 0s
}

.page-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s 0s, visibility 0s 0s, transform .3s 0s
}

@media only screen and (max-width: 1169px) {
    .page-overlay.is-visible {
        transform: translateX(-250px)
    }

    .page-overlay.is-visible.search-is-visible {
        transform: translateX(0)
    }
}

@media only screen and (min-width: 1480px) {
    .page-overlay {
        top: 120px;
        max-width: 1680px
    }
}

.label {
    height: 30px;
    width: 240px;
    border-radius: 0 0 10px 10px;
    color: #fff;
    background: #999b9d;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1
}

.label, .label p {
    text-align: center
}

.label p {
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 30px;
    text-transform: uppercase
}

.label--new {
    background: #91c733
}

.label--discontinued {
    background: #e5484e
}

.label--clearance {
    background: #fac833
}

@media only screen and (min-width: 768px) {
    .label p {
        font-size: 14px;
        line-height: 30px
    }
}

/*! Lity - v2.2.0 - 2016-10-08
* http://sorgalla.com/lity/
* Copyright (c) 2015-2016 Jan Sorgalla; Licensed MIT */
.lity {
    z-index: 9990;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    white-space: nowrap;
    background: #0b0b0b;
    background: rgba(0, 0, 0, .9);
    outline: none !important;
    opacity: 0;
    transition: opacity .3s ease
}

.lity.lity-opened {
    opacity: 1
}

.lity.lity-closed {
    opacity: 0
}

.lity * {
    box-sizing: border-box
}

.lity-wrap {
    z-index: 9990;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    outline: none !important
}

.lity-wrap:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -.25em
}

.lity-loader {
    z-index: 9991;
    color: #fff;
    position: absolute;
    top: 50%;
    margin-top: -.8em;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    opacity: 0;
    transition: opacity .3s ease
}

.lity-loading .lity-loader {
    opacity: 1
}

.lity-container {
    z-index: 9992;
    position: relative;
    text-align: left;
    vertical-align: middle;
    display: inline-block;
    white-space: normal;
    max-width: 100%;
    max-height: 100%;
    outline: none !important
}

.lity-content {
    z-index: 9993;
    width: 100%;
    transform: scale(1);
    transition: transform .3s ease
}

.lity-closed .lity-content, .lity-loading .lity-content {
    transform: scale(.8)
}

.lity-content:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, .6)
}

.lity-close {
    z-index: 9994;
    width: 35px;
    height: 35px;
    position: fixed;
    right: 0;
    top: 0;
    -webkit-appearance: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    padding: 0;
    color: #fff;
    font-style: normal;
    font-size: 35px;
    font-family: Arial, Baskerville, monospace;
    line-height: 35px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    border: 0;
    background: none;
    outline: none;
    box-shadow: none
}

.lity-close::-moz-focus-inner {
    border: 0;
    padding: 0
}

.lity-close:active, .lity-close:focus, .lity-close:hover, .lity-close:visited {
    text-decoration: none;
    text-align: center;
    padding: 0;
    color: #fff;
    font-style: normal;
    font-size: 35px;
    font-family: Arial, Baskerville, monospace;
    line-height: 35px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    border: 0;
    background: none;
    outline: none;
    box-shadow: none
}

.lity-close:active {
    top: 1px
}

.lity-image img {
    max-width: 100%;
    display: block;
    line-height: 0;
    border: 0
}

.lity-facebookvideo .lity-container, .lity-googlemaps .lity-container, .lity-iframe .lity-container, .lity-vimeo .lity-container, .lity-youtube .lity-container {
    width: 100%;
    max-width: 1680px
}

.lity-iframe-container {
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    overflow: auto;
    pointer-events: auto;
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch
}

.lity-iframe-container iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, .6);
    background: #000
}

.lity-hide {
    display: none
}

.overlay {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.overlay:focus, .overlay:hover {
    border: none;
    background: hsla(0, 0%, 100%, .05)
}

.boxed {
    background-color: #fff;
    padding: 40px 20px;
    overflow: hidden;
    font-size: 0
}

.boxed + .boxed {
    margin-top: 50px
}

.boxed .h1 h2, .boxed .h2, .boxed .h3, .boxed h1, .boxed h3 {
    color: #414042
}

.boxed img {
    position: relative;
    max-width: 400px
}

.boxed .subtitle {
    display: block;
    text-align: left;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0
}

.boxed .subtitle:after, .boxed .subtitle:before {
    display: none
}

@media only screen and (max-width: 1024px) {
    .boxed p {
        font-size: 16px
    }
}

@media only screen and (max-width: 1099px) {
    .boxed .h1 h2:after, .boxed .h2:after, .boxed .h3:after, .boxed h1:after, .boxed h3:after {
        width: 100%
    }

    .boxed ol, .boxed ul {
        font-size: 14px
    }

    .boxed ol li, .boxed ul li {
        padding-top: 10px;
        padding-bottom: 10px
    }

    .boxed ol li:before, .boxed ul li:before {
        top: 12px
    }
}

@media only screen and (min-width: 768px) {
    .boxed__2, .boxed__4 {
        vertical-align: top;
        display: inline-block;
        font-size: 16px
    }

    .boxed__2 {
        width: 33.3333333333%
    }

    .boxed__4 {
        width: 66.6666666667%;
        padding-right: 20px
    }
}

@media only screen and (min-width: 768px) and (max-width: 1099px) {
    .boxed {
        padding: 50px 60px
    }

    .boxed [class^=grid-col] {
        width: 100%
    }

    .boxed .h1:after, .boxed h1:after {
        display: block
    }
}

@media only screen and (min-width: 480px) {
    .boxed {
        padding: 50px 30px
    }
}

@media only screen and (min-width: 768px) {
    .boxed {
        padding: 50px 60px
    }

    .boxed + .boxed {
        margin-top: 75px
    }

    .boxed__4 {
        padding-right: 40px
    }
}

@media only screen and (min-width: 1100px) {
    .boxed img {
        max-width: 100%
    }

    .boxed__4 {
        padding-right: 50px
    }
}

.feature-boxes .feature-boxes__box {
    margin-bottom: 50px
}

@media only screen and (max-width: 1099px) {
    .feature-boxes .grid-row:last-of-type .grid-col-3:last-of-type .feature-boxes__box {
        margin-bottom: 0
    }

    .feature-boxes [class^=grid-col] {
        width: 100% !important
    }
}

@media only screen and (min-width: 1100px) {
    .feature-boxes .grid-row:last-of-type .feature-boxes__box {
        margin-bottom: 0
    }
}

.feature-boxes__box {
    background: #d8dbde;
    padding: 40px 20px;
    text-align: center;
    background-size: cover;
    background-position: 50%;
    overflow: hidden;
    position: relative
}

.feature-boxes__box h3 {
    margin-bottom: 10px
}

.feature-boxes__box h3.caption, .feature-boxes__box h3.tab-group__item__button {
    color: #001d68;
    margin-bottom: 30px
}

.feature-boxes__box p {
    line-height: 25px
}

.feature-boxes__box img {
    display: block;
    margin-top: 30px
}

.feature-boxes__box :last-child {
    margin-bottom: 0
}

.feature-boxes__icon {
    width: 150px;
    margin-bottom: 30px
}

@media only screen and (min-width: 480px) {
    .feature-boxes__box {
        padding: 50px 30px
    }
}

@media only screen and (min-width: 768px) {
    .feature-boxes__box {
        padding: 50px 60px
    }
}

.banner {
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    position: relative;
    min-height: 250px;
    text-align: center
}

@media only screen and (max-width: 1025px) {
    .banner {
        background-position-y: center !important
    }
}

@media only screen and (min-width: 1025px) {
    .banner {
        min-height: 300px
    }
}

@media only screen and (min-width: 1480px) {
    .banner {
        min-height: 400px
    }
}

.video-banner {
    padding: 37.5% 0 0;
    position: relative;
    border-bottom: 10px solid #76b900
}

.video-banner__cover-all, .video-banner__wrapper {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.video-banner__cover-all {
    z-index: 5
}

.media-grid {
    text-align: center
}

.media-grid .button, .media-grid a:not(.overlay) {
    position: relative;
    z-index: 3;
    border: none
}

@media only screen and (max-width: 1480px) {
    .media-grid p {
        font-size: 16px
    }
}

.media-grid__row .media-grid__item {
    height: 350px;
    padding-bottom: 50px;
    padding-left: 60px;
    padding-right: 60px;
    margin-bottom: 60px;
    position: relative;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top
}

.media-grid__row .media-grid__item:hover .text-block{
    background: red;
}

.media-grid__row .media-grid__item:hover .h4{
    color: #ffffff;
}

.media-grid__row .media-grid__item:hover .text-block p{
    color: #ffffff;
}

.media-grid__row .media-grid__item:hover .text-block p:last-child:after{
    color: #ffffff;
}

@media only screen and (max-width: 1025px) {
    .media-grid__row .media-grid__item {
        background-size: cover
    }
}

.media-grid__row .media-grid__item .text-block {
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    padding: 20px 30px;
    width: 100%;
    background: #e7e9eb
}


.media-grid__row .media-grid__item .text-block h2 {
    margin-bottom: 5px;
    font-weight: 200
}

.media-grid__row .media-grid__item .text-block p {
    color: #414042;
    line-height: 25px;
    margin-bottom: 0
}

.media-grid__row .media-grid__item .text-block p:last-child:after {
    content: ">";
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    padding-left: 10px;
    color: #646464;
    font-weight: 400
}

.media-grid__row .media-grid__item .text-block a {
    color: #76b900;
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-size: 16px
}

.media-grid__row .media-grid__item .text-block a:after {
    content: ">";
    padding-left: 5px
}

.media-grid__row .media-grid__item .text-block :last-child {
    margin-bottom: 0
}

@media only screen and (max-width: 1025px) {
    .media-grid__row:last-of-type .media-grid__item:last-child {
        margin-bottom: 0
    }
}

@media only screen and (min-width: 1025px) {
    .media-grid__row:last-of-type .media-grid__item {
        margin-bottom: 0
    }
}

.media-label {
    position: absolute;
    top: 0;
    right: 0;
    margin: auto;
    background: #76b900;
    text-align: center;
    padding: 10px 30px
}

.media-label p {
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 0;
    color: #fff
}

@media only screen and (min-width: 480px) {
    .media-grid__row .media-grid__item {
        height: 450px
    }
}

@media only screen and (min-width: 768px) {
    .media-grid__row .media-grid__item {
        width: 50%;
        vertical-align: bottom;
        float: left;
        height: 400px;
        font-size: 16px;
        background-position: top
    }

    .media-grid__row .media-grid__item .text-block {
        padding: 20px 60px 30px
    }

    .media-grid__row .media-grid__item .text-block p {
        margin-bottom: 10px
    }

    .media-grid__row .media-grid__item:first-of-type {
        border-right: 30px solid #fff
    }

    .media-grid__row .media-grid__item:last-of-type {
        border-left: 30px solid #fff
    }

    .media-grid__row--full {
        text-align: left
    }

    .media-grid__row--full .media-grid__item {
        width: 100%;
        height: 900px;
        padding-left: 120px;
        padding-right: 120px;
        border-left: none !important;
        border-right: none !important
    }
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {
    .media-grid__row .media-grid__item {
        height: 300px
    }

    .media-grid__row .media-grid__item .text-block {
        padding-bottom: 20px !important
    }

    .media-grid__row .media-grid__item .text-block h2 {
        margin-bottom: 0
    }

    .media-grid__row .media-grid__item .text-block h2:after {
        content: ">";
        padding-left: 10px;
        color: #76b900;
        font-weight: 400
    }

    .media-grid__row .media-grid__item .text-block p {
        display: none
    }
}

@media only screen and (min-width: 1480px) {
    .media-grid__row .media-grid__item {
        height: 450px
    }
}

.page-title {
    text-align: center;
    padding: 20px 50px
}

.page-title .subtitle, .page-title h1 {
    margin: 0
}

.page-title .subtitle:before, .page-title h1:before {
    display: none !important
}

.page-title .subtitle, .page-title h1.h5 {
    color: #545355
}

.page-title .subtitle {
    margin-top: 10px
}

.page-title .subtitle:after, .page-title .subtitle:before {
    display: none
}

@media only screen and (min-width: 768px) {
    .page-title {
        padding: 30px 50px
    }

    .page-title .subtitle {
        margin-top: 20px
    }
}

@media only screen and (min-width: 1480px) {
    .page-title {
        padding: 50px
    }
}

@media only screen and (max-width: 1480px) {
    .page-title h1:after {
        display: none !important
    }
}

.site-header {
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 400;
    z-index: 3;
    height: 120px
}

.site-header .logo {
    padding: 12px 0 10px;
    float: left;
    /*width: 150px;*/
    margin-left: 30px
}

@media only screen and (max-width: 400px) {
    .site-header .logo {
        width: 150px;
        padding: 28px 0 10px
    }



}

@media only screen and (max-width: 300px) {
    .site-header .logo {
        width: 100px;
        padding: 30px 0 10px
    }
}

@media only screen and (min-width: 1025px) {
    .site-header .logo {
        margin-left: 30px
    }
}

@media only screen and (min-width: 1480px) {
    .site-header {
        height: 120px
    }

    .site-header .logo {
        padding: 13px 0 10px;
        width: 300px;
        margin-left: 60px
    }
}

.site-footer {
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    text-align: center
}

.site-footer .logo {
    margin: 0 auto 25px
}

.site-footer p, .site-footer ul {
    font-size: 16px;
    line-height: 30px
}

.site-footer .social-list {
    margin-bottom: 30px
}

.site-footer p.address {
    font-size: 18px;
    margin-bottom: 50px;
    color: #828282;font-family: Saurer,sans-serif
}

.site-footer p.address strong {
    font-weight: bold;
    color: #212121;
    font-size: 20px;
}

.site-footer p.tel {
    font-size: 35px;
    line-height: 30px;
    font-weight: 700;
    color: #028244;
    /*margin-top: 20px;*/
    margin-bottom: 30px;
    font-weight: "Arial";
    font-weight:bold;

}

.site-footer p.email {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    margin-bottom: 30px;
}

.site-footer .site-meta {
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
    border-top: 1px solid #d8dbde;
    color: #8a8b90;
}

.site-footer .site-meta p{
    font-size: 14px;
}

.site-footer .site-meta p a{
    color: #8a8b90;
}

.site-footer .site-meta small:before {
    content: "|";
    display: inline-block;
    margin: 0 11px;
    color: #d8dbde
}

.site-footer .site-meta br + small:before, .site-footer .site-meta small:first-of-type:before {
    content: "";
    display: none;
    margin: 0
}

.versioned .site-footer .site-meta small:before {
    color: #bbdc80
}

@media only screen and (max-width: 479px) {
    .site-footer .logo {
        padding-left: 20px;
        padding-right: 20px
    }
}

@media only screen and (min-width: 480px) {
    .site-footer .logo {
        margin-bottom: 50px
    }

    .site-footer p.email {
        font-size: 16px;
        line-height: 25px
    }
}

@media only screen and (min-width: 768px) {
    .site-footer {
        text-align: left
    }

    .site-footer .logo {
        margin-bottom: 60px
    }

    .site-footer .social-list {
        margin-bottom: 0;
        text-align: right; margin-top:30px;
    }

    .site-footer p, .site-footer ul {
        font-size: 18px;
        line-height: 30px
    }

    .site-footer p.about {
        text-align: right;font-family: Saurer,sans-serif
    }

    .site-footer .site-credits {
        padding-left: 60px;
        padding-right: 60px
    }
}

@media only screen and (max-width: 1025px) {
    .site-meta small {
        font-size: 12px;
        line-height: 25px
    }
    .site-footer p.about {
        text-align: center;
    }

}

@media only screen and (min-width: 1025px) {
    .site-footer p.email {
        font-size: 18px;
        line-height: 20px

    }

    .site-footer p.tel {
        font-size: 35px
    }
}

.section {
    background: #fff;
    z-index: 1
}

.section img {
    margin-left: auto;
    margin-right: auto
}

.sub-section {
    margin-bottom: 60px;
    margin-left: 0;
    margin-right: 0;
    background-size: cover;
    background-position: 50%
}

@media only screen and (min-width: 768px) {
    .sub-section {
        margin-left: 60px;
        margin-right: 60px
    }
}

@media only screen and (min-width: 1100px) {
    .sub-section {
        margin-left: 120px;
        margin-right: 120px
    }
}

.sub-section .boxed {
    background-color: hsla(0, 0%, 100%, .95)
}

.section__content .grid-row {
    font-size: 0;
    padding: 0
}

@media only screen and (min-width: 1025px) {
    .section__content .grid-row {
        margin-left: -60px;
        /*padding: 0 60px*/
    }
}

.section__content .button {
    margin-left: auto;
    margin-right: auto
}

.section__content .button:last-child {
    margin-bottom: 0
}

.article .section__content .article__body:first-child :first-child, .section__content .article .article__body:first-child :first-child, .section__content .content-box:first-child :first-child {
    margin-top: 0 !important
}

.article .section__content .article__body:last-child :last-child, .section__content .article .article__body:last-child :last-child, .section__content .content-box:last-child :last-child {
    margin-bottom: 0 !important
}

.section__content .h1, .section__content .h2, .section__content .h3, .section__content .h4, .section__content h1, .section__content h2, .section__content h3, .section__content h4, .section__content p {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (min-width: 1480px) {
    .section__content .h1, .section__content .h2, .section__content .h3, .section__content .h4, .section__content h1, .section__content h2, .section__content h3, .section__content h4, .section__content p {
        max-width: 800px
    }
}

.section__content .video {
    margin-left: 60px;
    margin-right: 60px
}

.section__content > :last-child {
    margin-bottom: 0 !important
}

@media only screen and (min-width: 768px) {
    .section__content > :last-child:not(div) {
        margin-bottom: 0
    }
}

@media only screen and (min-width: 1100px) {
    .section__content .grid-row {
        padding: 0 60px
    }

    .section__content > .ui-list {
        margin-left: 60px;
        margin-right: 60px
    }
}

.triggers {
    position: absolute;
    top: 58px;
    right: 5%
}

.triggers, .triggers li {
    display: inline-block
}

.trigger__primary-nav, .trigger__primary-search {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    white-space: nowrap;
    z-index: 3;
    color: transparent;
    border: none
}

.trigger__primary-nav:focus, .trigger__primary-nav:hover, .trigger__primary-search:focus, .trigger__primary-search:hover {
    color: transparent;
    border: none
}

.trigger__primary-search:after, .trigger__primary-search:before {
    content: "";
    position: absolute;
    transition: opacity .3s;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.trigger__primary-search:before {
    top: 14px;
    left: 15px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid #028244
}

.trigger__primary-search:after {
    height: 3px;
    width: 8px;
    background: #028244;
    bottom: 16px;
    right: 14px;
    transform: rotate(45deg)
}

.trigger__primary-search span {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0
}

.trigger__primary-search span:after, .trigger__primary-search span:before {
    content: "";
    position: absolute;
    display: inline-block;
    height: 3px;
    width: 22px;
    top: 50%;
    margin-top: -2px;
    left: 50%;
    margin-left: -11px;
    /*background: #76b900;*/
    opacity: 0;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /*transition: opacity .3s, transform .3s*/
}

.trigger__primary-search span:before {
    transform: rotate(45deg)
}

.trigger__primary-search span:after {
    transform: rotate(-45deg)
}

.trigger__primary-search.search-is-visible:after, .trigger__primary-search.search-is-visible:before {
    opacity: 0
}

.trigger__primary-search.search-is-visible span:after, .trigger__primary-search.search-is-visible span:before {
    opacity: 1
}

.trigger__primary-search.search-is-visible span:before {
    transform: rotate(135deg)
}

.trigger__primary-search.search-is-visible span:after {
    transform: rotate(45deg)
}

.trigger__primary-nav span, .trigger__primary-nav span:after, .trigger__primary-nav span:before {
    position: absolute;
    display: inline-block;
    height: 3px;
    width: 24px;
    background: #028244;
}

.trigger__primary-nav span {
    position: absolute;
    top: 50%;
    right: 13px;
    margin-top: -2px;
    transition: background .3s .3s
}

.trigger__primary-nav span:after, .trigger__primary-nav span:before {
    content: "";
    right: 0;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-origin: 0 50%;
    transition: transform .3s .3s
}

.trigger__primary-nav span:before {
    top: -6px
}

.trigger__primary-nav span:after {
    top: 6px
}

.trigger__primary-nav.nav-is-visible span {
    background: rgba(46, 50, 51, 0)
}

.trigger__primary-nav.nav-is-visible span:after, .trigger__primary-nav.nav-is-visible span:before {
    background: #76b900
}

.trigger__primary-nav.nav-is-visible span:before {
    transform: translateX(4px) translateY(-3px) rotate(45deg)
}

.trigger__primary-nav.nav-is-visible span:after {
    transform: translateX(4px) translateY(2px) rotate(-45deg)
}

@media only screen and (min-width: 1170px) {
    .triggers {
        right: 50px
    }

    .trigger__primary-nav {
        display: none
    }

    .trigger__primary-search:before {
        top: 9px;
        left: 15px
    }

    .trigger__primary-search:after {
        bottom: 21px;
        right: 14px
    }

    .trigger__primary-search span:after, .trigger__primary-search span:before {
        top: 43%
    }
}

@media only screen and (min-width: 1480px) {
    .triggers {
        top: 63px;
        right: 45px
    }
}

/*#main, .site-header, .sub-nav {
    transform: translateZ(0);
    will-change: transform;
    position: relative;
    transition: transform .3s
}*/

#main {
    z-index: 2
}

.primary-nav {
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 200
}

.primary-nav ul {
    list-style: none
}

.primary-nav__parent, .primary-nav__parent ul {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    max-width: 1680px;
    background: #414042;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    transform: translateZ(0);
    transform: translateX(0);
    transition: transform .3s
}

@media only screen and (max-width: 1169px) {
    .primary-nav__parent, .primary-nav__parent ul {
        width: 250px
    }
}

.primary-nav__parent a, .primary-nav__parent ul a {
    display: block;
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid hsla(205, 8%, 71%, .2);
    transform: translateZ(0);
    will-change: transform, opacity;
    transition: transform .3s, opacity .3s
}

.primary-nav__parent.is-hidden, .primary-nav__parent ul.is-hidden {
    transform: translateX(100%)
}

.primary-nav__parent.moves-out > li > a, .primary-nav__parent ul.moves-out > li > a {
    transform: translateX(-100%);
    opacity: 0
}

.primary-nav__parent .see-all a {
    color: #76b900
}

.go-back a, .has-children > a {
    position: relative
}

.go-back a:after, .go-back a:before, .has-children > a:after, .has-children > a:before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -1px;
    display: inline-block;
    height: 2px;
    width: 10px;
    background: #76b900;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.go-back a:before, .has-children > a:before {
    transform: rotate(45deg)
}

.go-back a:after, .has-children > a:after {
    transform: rotate(-45deg)
}

.has-children > a {
    padding-right: 40px
}

.has-children > a:after, .has-children > a:before {
    right: 20px;
    transform-origin: 9px 50%
}

.primary-nav__parent .go-back a {
    padding-left: 40px
}

.primary-nav__parent .go-back a:after, .primary-nav__parent .go-back a:before {
    left: 20px;
    transform-origin: 1px 50%
}

.primary-nav__description {
    display: none
}

.primary-nav__child .has-children__tiles li {
    width: 16.2%;
    display: inline-block;
    transition: opacity .5s .1s
}

.primary-nav__child .has-children__tiles li a {
    display: block;
    text-align: center;
    color: #a2a2a2;
    outline: none;
    padding: 2em 1em 1em;
    height: auto;
    line-height: normal
}

.primary-nav__child .has-children__tiles li a span {
    display: block;
    min-height: 3em;
    margin-top: .4em
}

.primary-nav__child .has-children__tiles li a .menu-thumb__wrap {
    height: 160px;
    width: 160px;
    vertical-align: middle;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media only screen and (max-width: 1169px) {
    #main.nav-is-visible, .site-header.nav-is-visible, .sub-nav.nav-is-visible {
        transform: translateX(-250px)
    }

    .site-header, .sub-nav {
        background: #fff;
        z-index: 3
    }

    .primary-nav__parent {
        visibility: hidden;
        transition: visibility 0s .3s
    }

    .primary-nav__parent.nav-is-visible {
        visibility: visible;
        transition: visibility 0s 0s
    }
}

@media only screen and (min-width: 1170px) {
    .primary-nav {
        font-weight: 400
    }

    .primary-nav ul a {
        color: #808285
    }

    .primary-nav__child {
        max-width: 1280px
    }

    .primary-nav__parent {
        position: static;
        padding: 0 85px 0 0;
        height: auto;
        width: auto;
        float: right;
        overflow: visible;
        background: transparent
    }

    .primary-nav__parent:after {
        clear: both;
        content: "";
        display: table
    }

    .primary-nav__parent.moves-out > li > a {
        transform: translateX(0);
        opacity: 1
    }

    .primary-nav__parent ul {
        position: static;
        height: auto;
        background: transparent;
        overflow: visible;
        z-index: 3
    }

    .primary-nav__parent ul.is-hidden {
        transform: translateX(0)
    }

    .primary-nav__parent ul.moves-out > li > a {
        transform: translateX(0);
        opacity: 1
    }

    .primary-nav__parent > li {
        float: left;
        margin-left: 0
    }

    .primary-nav__parent > li > a {
        position: relative;
        display: inline-block;
        height: 80px;
        line-height: 80px;
        padding: 0 15px;
        color: #808285;
        font-size: 16px;
        overflow: visible;
        border-bottom: none;
        transition: color .3s, background .3s
    }
}

@media only screen and (min-width: 1170px) and (min-width: 1480px) {
    .primary-nav__parent > li > a {
        height: 120px;
        line-height: 120px;
        font-size: 18px
    }
}

@media only screen and (min-width: 1170px) {
    .primary-nav__parent > li > a:focus, .primary-nav__parent > li > a:hover {
        color: #414042
    }

    .primary-nav__parent > li > a.selected {
        color: #66686a;
        background: #f7f8f8
    }

    .primary-nav__parent > li > a.selected:focus, .primary-nav__parent > li > a.selected:hover {
        color: #414042
    }

    .primary-nav__parent .go-back, .primary-nav__parent .see-all {
        display: none
    }

    .primary-nav__parent .see-all {
        width: 100% !important;
        margin: 0 !important
    }

    .primary-nav__parent .primary-nav__child {
        position: absolute;
        top: 80px;
        background: #fff;
        padding: 50px 60px 100px;
        border-top: 1px solid #d8dbde;
        border-bottom: 5px solid #84c01a;
        background: linear-gradient(180deg, #fff 0, #eff1f2);
        transform: translateX(0);
        transition: opacity .3s 0s, visibility 0s 0s
    }

    .primary-nav__parent .primary-nav__child:after {
        clear: both;
        content: "";
        display: table
    }

    .primary-nav__parent .primary-nav__child.is-hidden {
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s 0s, visibility 0s .3s
    }

    .primary-nav__parent .primary-nav__child > .see-all {
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 60px;
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        border-top: 1px solid #d8dbde
    }

    .primary-nav__parent .primary-nav__child > .see-all a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-align: center;
        border-bottom: none;
        margin: 0;
        padding: 0;
        line-height: 60px;
        transition: color .2s, background .2s, border .2s;
        letter-spacing: .05em
    }

    .primary-nav__parent .primary-nav__child > .see-all a:focus, .primary-nav__parent .primary-nav__child > .see-all a:hover {
        background: hsla(0, 0%, 100%, .2);
        color: #76b900;
        cursor: pointer !important
    }
}

@media only screen and (min-width: 1170px) and (min-width: 1480px) {
    .primary-nav__parent .primary-nav__child.multi-column {
        padding: 50px 120px 100px
    }
}

@media only screen and (min-width: 1170px) {
    .primary-nav__parent .primary-nav__child.multi-column > li {
        width: 25%;
        float: left;
        overflow: hidden;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch
    }

    .primary-nav__parent .primary-nav__child.multi-column > li:after {
        content: "";
        display: table;
        clear: both
    }

    .primary-nav__parent .primary-nav__child.multi-column > li {
        width: 50%
    }

    .primary-nav__parent .primary-nav__child.multi-column > li > ul {
        column-count: 2;
        column-gap: 60px
    }

    .primary-nav__parent .primary-nav__child.multi-column > li:nth-child(3) {
        padding-right: 60px
    }

    .primary-nav__parent .primary-nav__child.multi-column > li:nth-child(4) {
        padding-left: 60px;
        border-left: 1px solid #d8dbde
    }

    .primary-nav__parent li.single-column__parent {
        position: relative
    }

    .primary-nav__parent .primary-nav__child.single-column {
        max-width: none;
        width: auto;
        left: 0;
        right: auto;
        padding: 0
    }

    .primary-nav__parent .primary-nav__child.single-column > li {
        border-bottom: 1px solid #d8dbde;
        padding: 10px 50px
    }

    .primary-nav__parent .primary-nav__child.single-column > li:last-of-type {
        border-bottom: none
    }

    .primary-nav__parent .primary-nav__child > li > a.has-children__heading, .primary-nav__parent .primary-nav__child > li > a.has-children__heading:focus, .primary-nav__parent .primary-nav__child > li > a.has-children__heading:hover {
        color: #414042;
        letter-spacing: .05em;
        text-transform: uppercase;
        font-size: 16px;
        line-height: 20px;
        height: auto !important;
        font-weight: 700;
        margin-bottom: 0;
        cursor: default;
        pointer-events: none
    }

    .primary-nav__parent .primary-nav__child > li.see-all > a {
        pointer-events: auto;
        font-size: 16px;
        font-weight: 400;
        text-transform: uppercase
    }

    .primary-nav__parent .primary-nav__child a {
        height: 25px;
        color: #808285;
        border-bottom: none;
        padding: 0;
        font-size: 16px;
        line-height: 25px;
        font-weight: 200
    }

    .primary-nav__parent .primary-nav__child a:focus, .primary-nav__parent .primary-nav__child a:hover {
        color: #414042
    }

    .primary-nav__parent .primary-nav__child ul {
        transform: translateZ(0)
    }

    .primary-nav__parent .primary-nav__child ul ul {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%
    }

    .primary-nav__parent .primary-nav__child ul ul.is-hidden {
        transform: translateX(100%)
    }

    .primary-nav__parent .primary-nav__child ul ul .go-back {
        display: block
    }

    .primary-nav__parent .primary-nav__child ul ul .go-back a {
        color: transparent
    }

    .primary-nav__parent .primary-nav__child ul ul .see-all {
        display: block
    }

    .primary-nav__parent .primary-nav__child .moves-out > li > a {
        transform: translateX(-100%)
    }

    .go-back a:after, .go-back a:before, .has-children > a:after, .has-children > a:before {
        background: #c8cdd0
    }

    .has-children > a:after, .has-children > a:before {
        right: 15%
    }

    .primary-nav__parent > .has-children > a {
        padding-right: 40px !important
    }

    .primary-nav__parent > .has-children > a:after, .primary-nav__parent > .has-children > a:before {
        width: 9px;
        transform-origin: 50% 50%;
        background: #c9cbc4;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transition: width .3s, transform .3s
    }

    .primary-nav__parent > .has-children > a:before {
        right: 22px
    }

    .primary-nav__parent > .has-children > a:after {
        right: 17px
    }

    .primary-nav__parent > .has-children > a.selected:after, .primary-nav__parent > .has-children > a.selected:before {
        width: 14px
    }

    .primary-nav__parent > .has-children > a.selected:before {
        transform: translateX(5px) rotate(-45deg)
    }

    .primary-nav__parent > .has-children > a.selected:after {
        transform: rotate(45deg)
    }

    .primary-nav__child > .has-children > a:after, .primary-nav__child > .has-children > a:before {
        display: none
    }

    .primary-nav__parent .go-back a {
        padding-left: 20px
    }

    .primary-nav__parent .go-back a:after, .primary-nav__parent .go-back a:before {
        left: 1px
    }

    .primary-nav__description {
        display: block;
        font-size: 14px;
        margin-bottom: 20px;
        color: #b0b7bc;
        font-family: Open Sans, Helvetica Neue, Arial, sans-serif;
        font-weight: 300
    }
}

@media only screen and (min-width: 1480px) {
    .primary-nav__parent {
        padding: 0 103px 0 0
    }

    .primary-nav__parent .primary-nav__child {
        top: 120px;
        max-width: 1680px
    }

    .primary-nav__parent .primary-nav__child a {
        height: 30px;
        line-height: 30px;
        font-size: 18px
    }

    .primary-nav__parent .primary-nav__child a.alt {
        text-transform: uppercase;
        font-size: 13px;
        line-height: 34px;
        font-weight: 400;
        letter-spacing: .02em
    }

    .primary-nav__parent .primary-nav__child a.alt:before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 5px;
        background-image: url(../images/tag-icon-grey.png);
        background-size: 10px;
        background-position: 50%;
        background-repeat: no-repeat
    }
}

.no-js .primary-nav__parent {
    position: relative;
    height: auto;
    width: 100%;
    overflow: visible;
    visibility: visible;
    z-index: 2
}

.no-js .primary-search {
    position: relative;
    top: 0;
    opacity: 1;
    visibility: visible
}

@media only screen and (min-width: 1170px) {
    .no-js .primary-nav__parent {
        position: absolute;
        z-index: 3;
        display: inline-block;
        width: auto;
        top: 0;
        right: 150px;
        padding: 0
    }
}

.sub-nav {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 400;
    border-bottom: 5px solid #84c01a;
    background-color: #fff
}

@media only screen and (min-width: 768px) {
    .sub-nav {
        border-top: 1px solid #d8dbde
    }
}

.sub-nav .constrain {
    padding: 0
}

.sub-nav nav {
    float: none;
    font-size: 0
}

.sub-nav nav > ul {
    overflow: hidden
}

.sub-nav nav > ul li {
    transition: .2s ease-in-out
}

.sub-nav nav > ul li:focus, .sub-nav nav > ul li:hover {
    background-color: #eff1f2
}

.sub-nav nav > ul li a {
    display: inline-block;
    font-size: 12px;
    padding: 18px 15px;
    line-height: 1;
    color: #808285;
    border: none;
    position: relative
}

@media only screen and (min-width: 768px) {
    .sub-nav nav > ul li a {
        font-size: 13px
    }
}

@media only screen and (min-width: 1025px) {
    .sub-nav nav > ul li a {
        font-size: 14px
    }
}

@media only screen and (min-width: 1100px) {
    .sub-nav nav > ul li a {
        padding: 18px 25px
    }
}

@media only screen and (min-width: 1480px) {
    .sub-nav nav > ul li a {
        text-transform: uppercase;
        letter-spacing: .1em
    }
}

@media only screen and (max-width: 767px) {
    .sub-nav nav > ul li a:before {
        display: block;
        content: "";
        border-top: 1px solid #d8dbde;
        position: absolute;
        top: 0;
        width: 500%;
        right: -250%
    }
}

.sub-nav nav > ul li a:focus, .sub-nav nav > ul li a:hover {
    color: #4d4e50
}

.sub-nav nav > ul li:last-child:not(.no-highlight) a {
    color: #6aa700;
    border-left: 1px solid #d8dbde;
    border-right: 1px solid #d8dbde;
    font-weight: 700
}

.sub-nav nav > ul li:last-child:not(.no-highlight):focus, .sub-nav nav > ul li:last-child:not(.no-highlight):hover {
    background-color: #f7f8f8
}

.sub-nav nav > ul li:last-child:not(.no-highlight):focus a, .sub-nav nav > ul li:last-child:not(.no-highlight):hover a {
    color: #538200
}

.sub-nav nav > ul li .active, .sub-nav nav > ul li.active:last-child {
    background-color: #d6eab3;
    color: #5a5b5d
}

.sub-nav nav > ul li.active:last-child a, .sub-nav nav > ul li .active a {
    color: #5a5b5d
}

.sub-nav nav > ul li .active:focus, .sub-nav nav > ul li .active:hover, .sub-nav nav > ul li.active:last-child:focus, .sub-nav nav > ul li.active:last-child:hover {
    background-color: #bbdc80
}

.sub-nav nav > ul li .active:focus a, .sub-nav nav > ul li .active:hover a, .sub-nav nav > ul li.active:last-child:focus a, .sub-nav nav > ul li.active:last-child:hover a {
    color: #585c5e
}

@media only screen and (min-width: 768px) {
    .sub-nav.fixed {
        position: fixed;
        top: 0;
        z-index: 999;
        max-width: 100%;
        width: 1680px
    }
}

@media only screen and (max-width: 1325px) {
    .sub-nav nav > ul li:last-child a {
        border: none
    }
}

.primary-search {
    max-width: 1680px;
    margin: 0 auto;
    position: absolute;
    height: 80px;
    width: 100%;
    top: 80px;
    left: 0;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    border-top: 1px solid #d8dbde;
    border-bottom: 1px solid #d8dbde;
    transition: opacity .3s 0s, visibility 0s .3s;
    background: linear-gradient(180deg, #fff 0, #eff1f2)
}

.primary-search.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s 0s, visibility 0s 0s
}

.primary-search form {
    height: 100%;
    width: 660px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    position: relative
}

.primary-search form input[type=search]::-ms-clear {
    display: none
}

.primary-search form input[type=search]::-webkit-search-cancel-button, .primary-search form input[type=search]::-webkit-search-decoration, .primary-search form input[type=search]::-webkit-search-results-button, .primary-search form input[type=search]::-webkit-search-results-decoration {
    display: none
}

.primary-search form input {
    border-radius: 0;
    border: none;
    height: 100%;
    width: 100%;
    padding: 0 20px;
    font-size: 30px;
    color: #808285;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: transparent !important
}

.primary-search form input:focus {
    outline: none
}

.primary-search form input::-webkit-input-placeholder {
    color: #b0b7bc
}

.primary-search form input:-moz-placeholder, .primary-search form input::-moz-placeholder {
    color: #b0b7bc
}

.primary-search form input:-ms-input-placeholder {
    color: #b0b7bc
}

.primary-search form label {
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    white-space: nowrap;
    z-index: 3;
    color: transparent;
    border: none;
    top: 78px;
    left: -65px
}

.primary-search form label:after, .primary-search form label:before {
    content: "";
    position: absolute;
    transition: opacity .3s;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.primary-search form label:before {
    top: 14px;
    left: 14px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid #76b900
}

.primary-search form label:after {
    height: 3px;
    width: 8px;
    background: #76b900;
    bottom: 17px;
    right: 14px;
    transform: rotate(45deg)
}

.primary-search form button {
    background: transparent;
    position: absolute;
    height: 50px;
    width: 50px;
    margin: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    color: transparent;
    top: 78px;
    right: -65px
}

.primary-search form button:after, .primary-search form button:before {
    content: "";
    position: absolute;
    display: inline-block;
    height: 3px;
    width: 22px;
    top: 50%;
    margin-top: -2px;
    left: 50%;
    margin-left: -11px;
    background: #76b900;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: opacity .3s, transform .3s
}

.primary-search form button:before {
    transform: rotate(45deg)
}

.primary-search form button:after {
    transform: rotate(-45deg)
}

.primary-search .primary-search__inst {
    position: relative;
    top: 1px
}

.primary-search p {
    display: none;
    margin: 150px auto 300px;
    text-align: center;
    font-size: 20px;
    line-height: 25px;
    color: #fff;
    position: relative
}

.primary-search p span, .primary-search p span:after, .primary-search p span:before {
    content: "";
    display: inline-block;
    background: #c8cdd0;
    position: absolute;
    margin: auto;
    transition: background .3s .3s
}

.primary-search p span {
    top: -36px;
    height: 22px;
    width: 3px;
    left: 1.5px;
    right: 0
}

.primary-search p span:after, .primary-search p span:before {
    width: 3px;
    height: 16px
}

.primary-search p span:before {
    transform: rotate(45deg);
    right: 5px;
    top: -5px
}

.primary-search p span:after {
    transform: rotate(135deg);
    left: 5px;
    top: -5px
}

@media only screen and (min-width: 768px) {
    .primary-search {
        height: 200px
    }

    .primary-search input {
        padding: 0
    }
}

@media only screen and (min-width: 1025px) {
    .primary-search {
        border-bottom: 5px solid #84c01a
    }
}

@media only screen and (min-width: 1480px) {
    .primary-search {
        top: 120px
    }

    .primary-search input {
        padding: 0 50px;
        font-size: 16px
    }
}

.article > img, main > img {
    width: 1280px;
    margin: 0 auto;
    display: block;
    margin-bottom: 100px
}

.feature-banner {
    background-color: #eff1f2;
    height: auto;
    padding-top: 25px;
    padding-bottom: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    overflow: hidden;
    position: relative
}

@media only screen and (min-width: 1100px) {
    .feature-banner {
        padding-top: 0;
        height: 600px !important;
        padding-bottom: 0 !important
    }
}

@media only screen and (max-width: 1099px) {
    .feature-banner .constrain {
        padding: 0
    }
}

.feature-banner:after {
    content: "";
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    margin: auto
}

.feature-banner__text {
    margin: auto;
    padding: 50px
}

@media only screen and (min-width: 480px) {
    .feature-banner__text {
        padding-top: 50px;
        padding-left: 60px;
        padding-right: 60px
    }
}

@media only screen and (min-width: 1025px) {
    .feature-banner__text {
        padding: 0 60px
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner__text {
        text-align: left;
        margin: 0;
        padding-left: 0;
        padding-bottom: 0;
        position: absolute;
        bottom: 100px;
        width: 65%;
        overflow: visible
    }
}

@media only screen and (min-width: 768px) and (max-width: 1099px) {
    .feature-banner__text .button-group .button:last-child {
        margin-right: 0
    }
}

.feature-banner__text br {
    display: none
}

@media only screen and (min-width: 1100px) {
    .feature-banner__text br {
        display: block
    }
}

.feature-banner__text__inner {
    display: inline-block;
    padding: 0;
    max-width: 100%;
    position: relative;
    overflow: visible
}

@media only screen and (min-width: 1025px) {
    .feature-banner__text__inner {
        padding: 50px 0
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner__text__inner {
        display: block;
        padding: 0;
        max-width: 100%;
        position: relative;
        overflow: visible
    }
}

.feature-banner__text__inner h1 {
    font-size: 50px;
    line-height: 50px;
    letter-spacing: .005em;
    font-weight: 400;
    position: relative;
    left: 8px
}

@media only screen and (min-width: 480px) {
    .feature-banner__text__inner h1 {
        font-size: 60px;
        line-height: 60px
    }
}

@media only screen and (min-width: 768px) {
    .feature-banner__text__inner h1 {
        font-size: 80px;
        line-height: 80px
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner__text__inner h1 {
        font-size: 90px;
        line-height: 90px;
        position: relative;
        left: -5px;
        position: static
    }
}

@media only screen and (min-width: 1480px) {
    .feature-banner__text__inner h1 {
        margin-bottom: 20px
    }
}

.feature-banner__text__inner h1 sup {
    font-weight: 200
}

.feature-banner__text__inner h1:after {
    position: relative;
    left: -8px
}

@media only screen and (min-width: 1100px) {
    .feature-banner__text__inner h1:after {
        position: static
    }
}

.feature-banner__text__inner h1 span {
    color: #808285
}

.feature-banner__text__inner span.introducing {
    display: block;
    color: #91c733;
    font-size: 25px;
    line-height: 25px;
    margin-bottom: 10px;
    font-weight: 200;
    letter-spacing: 0
}

@media only screen and (min-width: 480px) {
    .feature-banner__text__inner span.introducing {
        font-size: 30px;
        line-height: 30px
    }
}

@media only screen and (min-width: 768px) {
    .feature-banner__text__inner span.introducing {
        font-size: 45px;
        line-height: 45px
    }
}

@media only screen and (min-width: 1025px) {
    .feature-banner__text__inner span.introducing {
        font-size: 60px;
        line-height: 60px
    }
}

.feature-banner__text__inner .caption, .feature-banner__text__inner .tab-group__item__button {
    letter-spacing: .1em;
    font-size: 14px;
    line-height: 20px
}

@media only screen and (min-width: 480px) {
    .feature-banner__text__inner .caption, .feature-banner__text__inner .tab-group__item__button {
        max-width: none;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto
    }
}

@media only screen and (min-width: 768px) {
    .feature-banner__text__inner .caption, .feature-banner__text__inner .tab-group__item__button {
        font-size: 16px;
        line-height: 20px;
        max-width: none
    }
}

@media only screen and (min-width: 1025px) {
    .feature-banner__text__inner .caption, .feature-banner__text__inner .tab-group__item__button {
        font-size: 18px;
        line-height: 25px;
        max-width: none
    }
}

.feature-banner__text__inner .subtitle {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    display: block
}

@media only screen and (min-width: 1025px) {
    .feature-banner__text__inner .subtitle {
        text-align: center;
        display: inline-block;
        max-width: 75%
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner__text__inner .subtitle {
        text-align: left;
        font-weight: 400;
        font-size: 50px;
        line-height: 30px
    }
}

.feature-banner__text__inner .subtitle:after, .feature-banner__text__inner .subtitle:before {
    display: none !important
}

.feature-banner__text__inner .subtitle + p {
    margin-top: 10px;
    margin-bottom: 0 !important
}

@media only screen and (min-width: 1100px) {
    .feature-banner__text__inner .subtitle + p {
        max-width: 65%;
        font-size: 16px;
        line-height: 25px
    }
}

@media only screen and (min-width: 1480px) {
    .feature-banner__text__inner .subtitle + p {
        max-width: none
    }
}

.feature-banner__caption {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: hsla(0, 0%, 100%, .1);
    color: #fff;
    padding: 5px;
    font-size: 10px
}

.feature-banner.catalogue-31 {
    background-color: #414042;
    background-position: bottom;
    background-image: url(../images/banner-bkg-cat-31-small.jpg)
}

@media only screen and (min-width: 1100px) {
    .feature-banner.catalogue-31 {
        background-position: 50%;
        background-image: url(../images/banner-bkg-cat-31.jpg)
    }
}

.feature-banner.catalogue-31 h1 {
    color: #fff
}

@media only screen and (min-width: 1100px) {
    .feature-banner.catalogue-31 h1 {
        font-size: 90px;
        line-height: 100px;
        letter-spacing: -.01em
    }
}

.feature-banner.catalogue-31 .subtitle {
    color: #fff
}

@media only screen and (min-width: 1280px) {
    .feature-banner.catalogue-31 .subtitle {
        max-width: 55%
    }
}

.feature-banner.catalogue-31 .subtitle + p {
    color: #dfe2e4
}

.feature-banner.v50 {
    background-image: url(../images/banner-bkg-v50.jpg);
    background-position: 70%;
    background-color: #d8dbde;
    padding-bottom: 260px
}

@media only screen and (min-width: 768px) {
    .feature-banner.v50 {
        padding-bottom: 320px
    }
}

@media only screen and (min-width: 1280px) {
    .feature-banner.v50 .subtitle {
        max-width: 55%
    }
}

.feature-banner.v50:after {
    background-image: url(../images/banner-product-v50.png);
    background-position: bottom;
    width: 85%;
    height: 300px;
    left: 0;
    right: 0;
    bottom: 80px
}

@media only screen and (min-width: 480px) {
    .feature-banner.v50:after {
        width: 70%;
        height: 210px
    }
}

@media only screen and (min-width: 768px) {
    .feature-banner.v50:after {
        width: 480px;
        height: 300px
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.v50:after {
        width: 40%;
        height: 580px;
        left: auto;
        bottom: auto;
        right: 9%;
        background-position: 50%
    }
}

@media only screen and (min-width: 1480px) {
    .feature-banner.v50:after {
        width: 580px;
        height: 580px;
        right: 12%
    }
}

.feature-banner.skytile-direct-indirect {
    background-image: url(../images/banner-bkg-skytile-di.jpg);
    background-color: #d8dbde;
    background-position: 50%;
    padding-bottom: 250px
}

/*.feature-banner.skytile-direct-indirect:after {*/
    /*width: 700px;*/
    /*height: 280px;*/
    /*background-image: url(../images/banner-product-skytile-di.png);*/
    /*right: auto;*/
    /*bottom: 0;*/
    /*left: 10%*/
/*}*/

@media only screen and (min-width: 480px) {
    .feature-banner.skytile-direct-indirect:after {
        height: 230px;
        width: 90%;
        right: 0;
        left: 0
    }
}

@media only screen and (min-width: 768px) {
    .feature-banner.skytile-direct-indirect:after {
        height: 50%;
        width: 700px;
        bottom: 100px;
        background-position: bottom
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.skytile-direct-indirect:after {
        background-position: 0;
        width: 900px;
        top: 0;
        right: -450px;
        bottom: 0;
        left: auto;
        height: 600px
    }
}

@media only screen and (min-width: 1200px) {
    .feature-banner.skytile-direct-indirect:after {
        width: 1000px;
        right: -500px
    }
}

@media only screen and (min-width: 1480px) {
    .feature-banner.skytile-direct-indirect:after {
        width: 1400px;
        right: -700px
    }
}

.feature-banner.skytile-direct-indirect h1 {
    word-spacing: -10px;
    color: #fff
}

@media only screen and (min-width: 1100px) {
    .feature-banner.skytile-direct-indirect h1 {
        font-size: 90px;
        line-height: 100px;
        letter-spacing: -.01em
    }
}

.feature-banner.skytile-direct-indirect h1 sup {
    top: 10px
}

@media only screen and (min-width: 768px) {
    .feature-banner.skytile-direct-indirect h1 sup {
        bottom: -9px
    }
    /*h2{*/
        /*margin-bottom: 30px;*/
    /*}*/

}

.feature-banner.skytile-direct-indirect h1 span {
    color: #fff;
    font-weight: 200;
    font-size: 40px;
    line-height: 40px;
    white-space: wrap;
    display: inline-block;
    word-spacing: 0
}

@media only screen and (min-width: 1480px) {
    .feature-banner.skytile-direct-indirect h1 span {
        font-size: 50px;
        line-height: 50px
    }



}


.feature-banner.skytile-direct-indirect .subtitle, .feature-banner.skytile-direct-indirect .subtitle + p {
    color: #fff
}

@media only screen and (min-width: 768px) and (max-width: 1025px) {
    .feature-banner.skytile-direct-indirect .subtitle {
        text-align: center
        font-size: 30px;
    }
}

@media only screen and (min-width: 1280px) {
    .feature-banner.skytile-direct-indirect .subtitle {
        max-width: 60%;
        font-size: 50px;
    }

}

@media only screen and (min-width: 1480px) {
    .feature-banner.skytile-direct-indirect .subtitle {
        max-width: 60%;
        font-size: 60px;
    }

}




.feature-banner.skypack-quick-release {
    background-image: url(../images/banner-bkg-skypack-qr.jpg);
    background-color: #d8dbde;
    background-position: 50%;
    padding-bottom: 250px
}

.feature-banner.skypack-quick-release:after {
    width: 700px;
    height: 280px;
    background-image: url(../images/banner-product-skypack-qr.png);
    bottom: 0;
    left: 20px;
    background-position: 0 100%
}

@media only screen and (min-width: 480px) {
    .feature-banner.skypack-quick-release:after {
        background-position: 100% 100%;
        left: auto;
        right: -40%
    }
}

@media only screen and (min-width: 630px) {
    .feature-banner.skypack-quick-release:after {
        right: -10%
    }
}

@media only screen and (min-width: 880px) {
    .feature-banner.skypack-quick-release:after {
        right: 0;
        width: 950px;
        height: 350px;
        bottom: -80px
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.skypack-quick-release:after {
        background-position: left 150px;
        width: 1000px;
        top: 0;
        right: -500px;
        bottom: 0;
        left: auto;
        height: 600px
    }
}

@media only screen and (min-width: 1200px) {
    .feature-banner.skypack-quick-release:after {
        width: 1100px;
        right: -550px;
        background-position: left 100px
    }
}

@media only screen and (min-width: 1480px) {
    .feature-banner.skypack-quick-release:after {
        width: 1400px;
        right: -700px;
        background-position: left 50px
    }
}

.feature-banner.skypack-quick-release h1 {
    word-spacing: -10px
}

@media only screen and (min-width: 1100px) {
    .feature-banner.skypack-quick-release h1 {
        font-size: 90px;
        line-height: 100px;
        letter-spacing: -.01em
    }
}

.feature-banner.skypack-quick-release h1 sup {
    top: 10px
}

@media only screen and (min-width: 768px) {
    .feature-banner.skypack-quick-release h1 sup {
        bottom: -9px
    }
}

.feature-banner.skypack-quick-release h1 span {
    font-weight: 200;
    font-size: 40px;
    line-height: 40px;
    white-space: wrap;
    display: inline-block;
    word-spacing: 0
}

@media only screen and (min-width: 1480px) {
    .feature-banner.skypack-quick-release h1 span {
        font-size: 50px;
        line-height: 50px
    }
}

@media only screen and (min-width: 768px) and (max-width: 1025px) {
    .feature-banner.skypack-quick-release .subtitle {
        text-align: center
    }
}

@media only screen and (min-width: 1280px) {
    .feature-banner.skypack-quick-release .subtitle {
        max-width: 60%
    }
}

.feature-banner.led-floodlight {
    background-image: url(../images/banner-bkg-led-floodlight.jpg);
    background-position: 70%;
    background-color: #414042;
    padding-bottom: 280px
}

@media only screen and (min-width: 480px) {
    .feature-banner.led-floodlight {
        padding-bottom: 300px
    }
}

@media only screen and (min-width: 768px) {
    .feature-banner.led-floodlight {
        padding-bottom: 320px
    }
}

/*.feature-banner.led-floodlight:after {*/
    /*width: 260px;*/
    /*height: 260px;*/
    /*background-image: url(../images/banner-product-led-floodlight.png);*/
    /*right: 0;*/
    /*bottom: 25px;*/
    /*left: 0*/
/*}*/

@media only screen and (min-width: 768px) {
    .feature-banner.led-floodlight:after {
        width: 320px;
        height: 320px;
        bottom: 0
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.led-floodlight:after {
        width: 33%;
        height: 400px;
        left: auto;
        right: 60px;
        bottom: 85px;
        background-position: bottom
    }
}

@media only screen and (min-width: 1480px) {
    .feature-banner.led-floodlight:after {
        width: 30%;
        right: 11%;
        bottom: 60px;
        height: 470px
    }
}

.feature-banner.led-floodlight h1 {
    color: #fff
}

@media only screen and (min-width: 1100px) {
    .feature-banner.led-floodlight h1 {
        font-size: 90px;
        line-height: 100px;
        letter-spacing: -.01em
    }
}

@media only screen and (min-width: 1480px) {
    .feature-banner.led-floodlight h1 {
        font-size: 100px;
        line-height: 110px
    }
}

.feature-banner.led-floodlight .button-group .button:first-child {
    background-color: #334a86
}

.feature-banner.led-floodlight .subtitle {
    color: #fff
}

@media only screen and (min-width: 1280px) {
    .feature-banner.led-floodlight .subtitle {
        max-width: 55%
    }
}

.feature-banner.led-floodlight .subtitle + p {
    color: #dfe2e4
}

.feature-banner.architectural-exterior {
    background-color: #414042;
    background-position: top;
    /*background-image: url(../images/banner-bkg-architectural-exterior-small.jpg)*/
    background-image: url(../images/banner-bkg-architectural-exterior.jpg);
}

@media only screen and (min-width: 650px) {
    .feature-banner.architectural-exterior {
        background-position: center 70%
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.architectural-exterior {
        background-position: 100% 0;
        background-image: url(../images/banner-bkg-architectural-exterior.jpg)
    }
}

.feature-banner.architectural-exterior h1 {
    color: #fff
}


@media only screen and (min-width: 1100px) {
    .feature-banner.architectural-exterior h1 {
        font-size: 90px;
        line-height: 100px;
        letter-spacing: -.01em
    }

    
}

.feature-banner.architectural-exterior .subtitle {
    color: #fff
}

.feature-banner.architectural-exterior .subtitle + p {
    color: #dfe2e4
}

@media only screen and (min-width: 1280px) {
    .feature-banner.architectural-exterior .subtitle + p {
        max-width: 55%
    }
}

.feature-banner.linear-wall-bars {
    background-position: top;
    background-color: #414042;
    background-image: url(../images/banner-bkg-linear-wall-bars-small.jpg)
}

@media only screen and (min-width: 650px) {
    .feature-banner.linear-wall-bars {
        background-position: center 70%
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.linear-wall-bars {
        background-position: 73%;
        background-image: url(../images/banner-bkg-linear-wall-bars.jpg)
    }
}

@media only screen and (min-width: 1480px) {
    .feature-banner.linear-wall-bars {
        background-position: 100%
    }
}

.feature-banner.linear-wall-bars h1 {
    color: #fff
}

@media only screen and (min-width: 1100px) {
    .feature-banner.linear-wall-bars h1 {
        font-size: 90px;
        line-height: 100px;
        letter-spacing: -.01em
    }
}

.feature-banner.linear-wall-bars .subtitle {
    color: #fff
}

.feature-banner.linear-wall-bars .subtitle + p {
    color: #dfe2e4
}

@media only screen and (min-width: 1280px) {
    .feature-banner.linear-wall-bars .subtitle + p {
        max-width: 55%
    }
}

.feature-banner.glass-lanterns {
    background-position: top;
    background-color: #414042;
    background-image: url(../images/banner-bkg-glass-lanterns-small.jpg)
}

@media only screen and (min-width: 600px) {
    .feature-banner.glass-lanterns {
        background-position: center 70%
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.glass-lanterns {
        background-image: url(../images/banner-bkg-glass-lanterns.jpg);
        background-position: 100% 0
    }
}

.feature-banner.glass-lanterns h1 {
    color: #fff
}

@media only screen and (min-width: 1100px) {
    .feature-banner.glass-lanterns h1 {
        font-size: 90px;
        line-height: 100px;
        letter-spacing: -.01em
    }
}

.feature-banner.glass-lanterns .subtitle {
    color: #fff
}

.feature-banner.glass-lanterns .subtitle + p {
    color: #dfe2e4
}

@media only screen and (min-width: 1280px) {
    .feature-banner.glass-lanterns .subtitle + p {
        max-width: 55%
    }
}

.feature-banner.new-bollards {
    background-position: top;
    background-color: #414042;
    background-image: url(../images/banner-bkg-new-bollards-small.jpg)
}

@media only screen and (min-width: 600px) {
    .feature-banner.new-bollards {
        background-position: center 75%
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.new-bollards {
        background-image: url(../images/banner-bkg-new-bollards.jpg);
        background-position: 100% 0
    }
}

.feature-banner.new-bollards h1 {
    color: #fff
}

.feature-banner.new-bollards h1 span {
    color: #d5b889
}

@media only screen and (min-width: 1100px) {
    .feature-banner.new-bollards h1 {
        font-size: 90px;
        line-height: 100px;
        letter-spacing: -.01em
    }
}

.feature-banner.new-bollards .subtitle {
    color: #fff
}

.feature-banner.new-bollards .subtitle + p {
    color: #dfe2e4
}

@media only screen and (min-width: 1280px) {
    .feature-banner.new-bollards .subtitle + p {
        max-width: 55%
    }
}

.feature-banner.hybrid-9 {
    background-image: url(../images/banner-bkg-hybrid9.jpg);
    background-position: 70%;
    background-color: #d8dbde
}

@media only screen and (min-width: 768px) {
    .feature-banner.hybrid-9 {
        padding-bottom: 320px
    }
}

.feature-banner.hybrid-9:after {
    width: 300px;
    height: 300px;
    background-image: url(../images/banner-product-hybrid9.png);
    right: 0;
    bottom: 0;
    left: 10%
}

@media only screen and (min-width: 768px) {
    .feature-banner.hybrid-9:after {
        width: 320px;
        height: 320px
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.hybrid-9:after {
        width: 35%;
        height: 450px;
        left: auto;
        right: 120px;
        background-position: bottom
    }
}

@media only screen and (min-width: 1480px) {
    .feature-banner.hybrid-9:after {
        width: 30%;
        right: 240px;
        height: 500px
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.hybrid-9 h1 {
        font-size: 100px;
        line-height: 110px;
        word-spacing: -25px;
        letter-spacing: -.01em
    }
}

.feature-banner.hybrid-7 {
    background-image: url(../images/banner-bkg-hybrid7.jpg);
    background-position: 70%;
    background-color: #d8dbde;
    padding-bottom: 260px
}

@media only screen and (min-width: 768px) {
    .feature-banner.hybrid-7 {
        padding-bottom: 320px
    }
}

.feature-banner.hybrid-7:after {
    width: 300px;
    height: 300px;
    background-image: url(../images/hybrid7-product-hero.png);
    right: 15px;
    bottom: 0;
    left: 10%
}

@media only screen and (min-width: 768px) {
    .feature-banner.hybrid-7:after {
        width: 320px;
        height: 320px;
        left: 5%
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.hybrid-7:after {
        width: 40%;
        height: 500px;
        right: 60px;
        bottom: 30px;
        left: auto;
        background-position: bottom
    }
}

@media only screen and (min-width: 1480px) {
    .feature-banner.hybrid-7:after {
        width: 34%;
        right: 15%;
        bottom: 0
    }
}

.feature-banner.toughbay-circular {
    background-image: url(../images/banner-bkg-toughbay-c-2.jpg);
    background-color: #414042;
    background-position: 50%
}

.feature-banner.toughbay-circular:after {
    width: 90%;
    max-width: 380px;
    height: 340px;
    background-image: url(../images/banner-product-toughbay-circular-new-alt.png);
    background-position: bottom;
    right: 0;
    bottom: 10%;
    left: 0
}

@media only screen and (min-width: 480px) {
    .feature-banner.toughbay-circular:after {
        height: 330px
    }
}

@media only screen and (min-width: 1025px) {
    .feature-banner.toughbay-circular:after {
        max-width: none;
        height: 300px
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.toughbay-circular:after {
        background-image: url(../images/banner-product-toughbay-circular-new.png);
        width: 65%;
        top: -160px;
        right: -180px;
        height: 600px;
        background-size: 100%;
        background-position: 100% 100%;
        margin-right: 0
    }
}

@media only screen and (min-width: 1480px) {
    .feature-banner.toughbay-circular:after {
        width: 60%;
        right: -75px;
        top: -70px
    }
}

.feature-banner.toughbay-circular h1 {
    color: #fff
}

@media only screen and (min-width: 1100px) {
    .feature-banner.toughbay-circular h1 {
        word-spacing: -25px;
        font-size: 100px;
        line-height: 110px;
        letter-spacing: -.01em;
        position: relative;
        left: -5px
    }
}

.feature-banner.toughbay-circular h1 span {
    color: #b0b7bc
}

@media only screen and (min-width: 768px) {
    .feature-banner.toughbay-circular h1 span {
        font-size: 70px;
        line-height: 90px;
        letter-spacing: -.01em;
        display: block
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.toughbay-circular h1 span {
        font-size: 30px;
        line-height: 40px;
        display: inline
    }
}

.feature-banner.toughbay-circular h1 sup {
    top: auto;
    bottom: -5px;
    vertical-align: baseline
}

@media only screen and (min-width: 768px) {
    .feature-banner.toughbay-circular h1 sup {
        bottom: -9px
    }
}

.feature-banner.toughbay-circular .subtitle {
    color: #fff
}

.feature-banner.toughbay-circular .subtitle + p {
    color: #dfe2e4
}

@media only screen and (min-width: 1280px) {
    .feature-banner.toughbay-circular .subtitle + p {
        max-width: 51%
    }
}

@media only screen and (min-width: 1480px) {
    .feature-banner.toughbay-circular .subtitle + p {
        max-width: 44%
    }
}

.feature-banner.skytile-ugr {
    background-image: url(../images/banner-bkg-skytile-ugr.jpg);
    background-color: #d8dbde;
    background-position: 50%;
    padding-bottom: 250px
}

.feature-banner.skytile-ugr:after {
    width: 700px;
    height: 280px;
    background-image: url(../images/banner-product-skytile.png);
    right: auto;
    bottom: 0;
    left: 10%
}

@media only screen and (min-width: 480px) {
    .feature-banner.skytile-ugr:after {
        height: 230px;
        width: 90%;
        right: 0;
        left: 0
    }
}

@media only screen and (min-width: 768px) {
    .feature-banner.skytile-ugr:after {
        height: 50%;
        width: 700px;
        bottom: 100px;
        background-position: bottom
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.skytile-ugr:after {
        background-position: 0;
        width: 900px;
        top: 0;
        right: -450px;
        bottom: 0;
        left: auto
    }
}

@media only screen and (min-width: 1200px) {
    .feature-banner.skytile-ugr:after {
        width: 1000px;
        right: -500px
    }
}

@media only screen and (min-width: 1480px) {
    .feature-banner.skytile-ugr:after {
        width: 1500px;
        right: -750px
    }
}

.feature-banner.skytile-ugr h1 {
    word-spacing: -10px
}

@media only screen and (min-width: 1100px) {
    .feature-banner.skytile-ugr h1 {
        font-size: 100px;
        line-height: 110px;
        letter-spacing: -.01em;
        position: relative;
        left: -5px
    }
}

.feature-banner.skytile-ugr h1 sup {
    top: auto;
    bottom: -5px;
    vertical-align: baseline
}

@media only screen and (min-width: 768px) {
    .feature-banner.skytile-ugr h1 sup {
        bottom: -9px
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.skytile-ugr h1 span {
        font-size: 30px;
        line-height: 40px;
        display: inline
    }
}

.feature-banner.skytile-ugr .subtitle, .feature-banner.skytile-ugr .subtitle + p {
    color: #414042
}

@media only screen and (min-width: 768px) and (max-width: 1025px) {
    .feature-banner.skytile-ugr .subtitle {
        text-align: center
    }
}

.feature-banner.oxford-led {
    background-image: url(../images/banner-bkg-oxford.jpg);
    background-color: #d8dbde;
    background-position: center 26%;
    padding-bottom: 250px
}

.feature-banner.oxford-led:after {
    width: 90%;
    height: 350px;
    background-image: url(../images/banner-product-oxford.png);
    background-size: 160%;
    background-position: left 50px;
    right: 0;
    bottom: 0
}

@media only screen and (min-width: 480px) {
    .feature-banner.oxford-led:after {
        height: 350px;
        background-size: 120%;
        background-position: 0 100%
    }
}

@media only screen and (min-width: 600px) {
    .feature-banner.oxford-led:after {
        height: 330px;
        width: 85%;
        background-size: 100%
    }
}

@media only screen and (min-width: 768px) {
    .feature-banner.oxford-led:after {
        width: 82%;
        height: 340px;
        background-position: 0 0
    }
}

@media only screen and (min-width: 1025px) {
    .feature-banner.oxford-led:after {
        width: 75%
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.oxford-led:after {
        width: 85%;
        height: 600px;
        background-size: 100%;
        background-position: center 50px;
        top: auto;
        right: -35%;
        bottom: 0
    }
}

@media only screen and (min-width: 1480px) {
    .feature-banner.oxford-led:after {
        width: 65%;
        right: -16%
    }
}

.feature-banner.oxford-led h1 {
    word-spacing: -10px
}

@media only screen and (min-width: 1100px) {
    .feature-banner.oxford-led h1 {
        font-size: 100px;
        line-height: 110px;
        letter-spacing: -.01em;
        position: relative;
        left: -5px
    }
}

.feature-banner.oxford-led h1 sup {
    top: auto;
    bottom: -5px;
    vertical-align: baseline
}

@media only screen and (min-width: 768px) {
    .feature-banner.oxford-led h1 sup {
        bottom: -9px
    }
}

@media only screen and (min-width: 768px) {
    .feature-banner.oxford-led h1 span {
        font-size: 70px;
        line-height: 90px;
        letter-spacing: -.01em;
        display: block
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.oxford-led h1 span {
        font-size: 30px;
        line-height: 40px;
        display: inline
    }
}

.feature-banner.oxford-led .subtitle, .feature-banner.oxford-led .subtitle + p {
    color: #414042
}

.feature-banner.toughflood {
    background-image: url(../images/banner-bkg-toughflood.jpg);
    background-position: 70%;
    background-color: #414042;
    padding-bottom: 280px
}

@media only screen and (min-width: 480px) {
    .feature-banner.toughflood {
        padding-bottom: 300px
    }
}

@media only screen and (min-width: 768px) {
    .feature-banner.toughflood {
        padding-bottom: 320px
    }
}

.feature-banner.toughflood:after {
    width: 260px;
    height: 260px;
    background-image: url(../images/banner-product-toughflood.png);
    right: 0;
    bottom: 25px;
    left: 0
}

@media only screen and (min-width: 768px) {
    .feature-banner.toughflood:after {
        width: 320px;
        height: 320px
    }
}

@media only screen and (min-width: 1100px) {
    .feature-banner.toughflood:after {
        width: 33%;
        height: 400px;
        left: auto;
        right: 90px;
        bottom: 85px;
        background-position: bottom
    }
}

@media only screen and (min-width: 1480px) {
    .feature-banner.toughflood:after {
        width: 30%;
        right: 250px;
        bottom: 50px;
        height: 470px
    }
}

.feature-banner.toughflood h1 {
    color: #b0b7bc
}

@media only screen and (min-width: 1100px) {
    .feature-banner.toughflood h1 {
        font-size: 100px;
        line-height: 110px;
        word-spacing: -25px;
        letter-spacing: -.01em;
        position: relative;
        left: -5px
    }
}

.feature-banner.toughflood h1 sup {
    top: auto;
    bottom: -5px;
    vertical-align: baseline
}

@media only screen and (min-width: 768px) {
    .feature-banner.toughflood h1 sup {
        bottom: -9px
    }
}

.feature-banner.toughflood .button-group .button:first-child {
    background-color: #334a86
}

.feature-banner.toughflood .subtitle {
    color: #fff
}

.feature-banner.toughflood .subtitle + p {
    color: #dfe2e4
}

.feature-banner.skytile {
    background-image: url(../images/banner-bkg-skytile.jpg);
    background-color: #d8dbde;
    background-position: 50%
}

.feature-banner.skytile:after {
    width: 250px;
    height: 250px;
    background-image: url(../images/banner-product-skytile.png);
    right: 15px;
    top: 0;
    left: 0
}

.hero {
    text-align: center
}

.hero .intro {
    background: #fff
}

.hero .intro img {
    width: 800px
}

.hero .intro .intro__video {
    position: relative;
    text-align: center
}

.hero .intro .intro__video .intro__video__button {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
    width: 120px;
    height: 85px;
    border: none;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    background: url(../images/youtube-play-icon.png);
    background-size: 120px;
    background-position: 50%;
    background-repeat: no-repeat;
    -webkit-filter: drop-shadow(0 0 30px rgba(0, 0, 0, .6));
    filter: drop-shadow(0 0 30px rgba(0, 0, 0, .6))
}

.hero .intro .intro__video .intro__video__button:hover {
    opacity: .9
}

.hero .ui-list {
    text-align: left
}

.hero .feature-callout {
    text-align: center
}

.hero .h2, .hero .h3, .hero h2, .hero h3 {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto
}

.hero .h3, .hero h3 {
    margin-top: 50px
}

@media only screen and (min-width: 768px) {
    .hero .h1, .hero h1 {
        max-width: 900px
    }
}

@media only screen and (min-width: 1025px) {
    .hero--offset .intro {
        margin-top: -250px;
        margin-left: -60px;
        margin-right: -60px;
        padding-top: 75px;
        padding-left: 60px;
        padding-right: 60px
    }

    .hero .h3, .hero h3 {
        margin-top: 75px
    }
}

@media only screen and (min-width: 1480px) {
    .hero--offset .intro {
        margin-top: -450px;
        padding-top: 100px
    }
}

.cta {
    display: block;
    background: #ececec;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat
}

.cta:focus, .cta:hover {
    border: none !important
}

.cta .cta__content h3 {
    color: #414042;
    display: inline-block;
    position: relative;
    border: none;
    right: 5px;
    margin: 0
}

.cta .cta__content h3:after {
    content: "\003E";
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    position: absolute;
    top: 3px;
    right: -20px;
    transition: all .2s ease-in-out
}

.cta .cta__content h3:focus:after, .cta .cta__content h3:hover:after {
    right: -22.5px;
    color: #76b900
}

@media only screen and (max-width: 1024px) {
    .cta--map {
        background-image: url(../images/map-overlay-graphic-small.png);
        background-size: contain;
        background-position: 50%
    }
}

@media only screen and (min-width: 1025px) {
    .cta {
        text-align: left
    }

    .cta .cta__content h3 {
        margin-left: 90px
    }

    .cta .cta__content h3:after {
        right: -30px
    }

    .cta .cta__content h3:focus:after, .cta .cta__content h3:hover:after {
        right: -32.5px
    }

    .cta--map {
        background-image: url(../images/map-overlay-graphic.png);
        background-position: 120%;
        background-size: 850px
    }
}

@media only screen and (min-width: 1480px) {
    .cta .cta__content h3 {
        font-size: 35px
    }

    .cta--map {
        background-image: url(../images/map-overlay-graphic.png);
        background-position: 88%;
        background-size: 850px
    }
}

.form-box {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto
}

.gform_wrapper, .gform_wrapper .gfield_html.gfield_no_follows_desc {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important
}

.gform_wrapper .input-text, .gform_wrapper input[type=email], .gform_wrapper input[type=input], .gform_wrapper input[type=number], .gform_wrapper input[type=password], .gform_wrapper input[type=search], .gform_wrapper input[type=tel], .gform_wrapper input[type=text], .gform_wrapper input[type=url], .gform_wrapper select, .gform_wrapper textarea {
    border: 1px solid #d8dbde !important;
    padding: 10px !important;
    /*font-family: Open Sans, Helvetica Neue, Arial, sans-serif !important;*/
    font-weight: 300 !important;
    font-size: 16px !important;
    color: #414042 !important;
    margin-bottom: 20px !important;
    background: transparent !important
}

.gform_wrapper input[type=email]:focus, .gform_wrapper input[type=input]:focus, .gform_wrapper input[type=number]:focus, .gform_wrapper input[type=password]:focus, .gform_wrapper input[type=search]:focus, .gform_wrapper input[type=tel]:focus, .gform_wrapper input[type=text]:focus, .gform_wrapper input[type=url]:focus, .gform_wrapper select:focus, .gform_wrapper textarea:focus {
    background-color: hsla(0, 0%, 100%, .5) !important
}

.gform_wrapper input[type=email], .gform_wrapper input[type=input], .gform_wrapper input[type=number], .gform_wrapper input[type=password], .gform_wrapper input[type=search], .gform_wrapper input[type=tel], .gform_wrapper input[type=text], .gform_wrapper input[type=url], .gform_wrapper select {
    height: 50px !important;
    margin-bottom: 20px !important
}

.gform_wrapper ::-webkit-input-placeholder {
    color: #414042 !important
}

.gform_wrapper ::-moz-placeholder {
    color: #414042 !important
}

.gform_wrapper :-ms-input-placeholder {
    color: #414042 !important
}

.gform_wrapper input:-moz-placeholder {
    color: #414042 !important
}

.gform_wrapper ol li:before, .gform_wrapper ul li:before {
    display: none !important
}

.gform_wrapper ol li.gfield, .gform_wrapper ul li.gfield {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important
}

.gform_wrapper h2:after {
    display: none !important
}

.gform_wrapper h2 > strong {
    font-weight: 400 !important
}

.gform_wrapper .gform_confirmation_message, .gform_wrapper h2, .gform_wrapper h2:last-child {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 20px !important;
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 200 !important;
    color: #808285 !important;
    font-size: 24px !important;
    line-height: 30px !important;
    margin: 50px 0 !important;
    background: #eff1f2 !important
}

.gform_wrapper .gform_confirmation_message {
    padding: 50px !important
}

.gform_wrapper .gform_footer {
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important
}

.gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=submit] {
    margin-bottom: 0 !important;
    padding: 15px 50px !important;
    background: #028244;
    display: inline-block !important;
    /*font-family: Scene W01, Helvetica Neue, Arial, sans-serif !important;*/
    font-style: normal !important;
    /*text-transform: uppercase !important;*/
    font-weight: bold;
    color: #fff !important;
    font-size: 18px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    min-height: 1px !important;
    line-height: 20px !important
}

.tijiao{
	
}


.gform_wrapper .gfield_html {
    margin-bottom: 30px !important
}

.gform_wrapper label {
    font-weight: 400 !important;
    font-size: 13px !important
}

.gform_wrapper input[type=email] + label, .gform_wrapper input[type=input] + label, .gform_wrapper input[type=number] + label, .gform_wrapper input[type=password] + label, .gform_wrapper input[type=search] + label, .gform_wrapper input[type=tel] + label, .gform_wrapper input[type=text] + label, .gform_wrapper input[type=url] + label, .gform_wrapper select + label, .gform_wrapper textarea + label {
    display: inline-block !important;
    margin-bottom: 20px !important
}

.gform_wrapper input[type=checkbox], .gform_wrapper input[type=radio] {
    margin-top: 0 !important
}

.gform_wrapper .gfield_label {
    font-weight: 700 !important;
    font-size: 15px !important
}

.gform_wrapper .gfield_date_day input, .gform_wrapper .gfield_date_month input, .gform_wrapper .gfield_date_year input, .gform_wrapper .gfield_time_hour input, .gform_wrapper .gfield_time_minute input {
    min-width: 75px !important;
    padding: 10px !important
}

.gform_wrapper .gfield_date_year input {
    min-width: 100px !important
}

.gform_wrapper .top_label li.gfield.gf_left_half {
    width: 47.5% !important;
    margin-right: 2.5% !important
}

.gform_wrapper .top_label li.gfield.gf_right_half {
    width: 47.5% !important;
    margin-left: 2.5% !important
}

.gform_wrapper .gfield_checkbox {
    padding-bottom: 25px !important;
    margin-bottom: 0 !important
}

.gform_wrapper .gfield_date_day, .gform_wrapper .gfield_date_month {
    width: 6em !important
}

.gform_wrapper .gfield_date_year {
    width: 9em !important
}

.gform_wrapper .gfield_html a {
    display: inline-block !important;
    margin-bottom: 30px !important
}

.gform_wrapper .gfield_html a:focus, .gform_wrapper .gfield_html a:hover {
    border: none !important;
    color: #76b900 !important
}

.gform_wrapper .gfield_checkbox label {
    margin-left: 10px
}

.gform_wrapper .ginput_container_fileupload {
    margin-bottom: 50px
}

.gform_wrapper .ginput_container_date {
    margin-top: 10px
}

.gform_wrapper .ui-datepicker {
    margin-top: 0
}

.gform_wrapper .ui-datepicker .ui-datepicker-trigger {
    margin: 0
}

.gform_wrapper .ui-datepicker .ui-datepicker-header {
    background: #76b900
}

.gform_wrapper .ui-datepicker select {
    color: #fff;
    font-weight: 700;
    margin: 10px 5px
}

.gform_wrapper .ginput_left {
    width: 47.5% !important;
    margin-right: 2.5% !important;
    padding-right: 0 !important
}

.gform_wrapper .ginput_right {
    width: 47.5% !important;
    margin-left: 2.5% !important;
    padding-right: 0 !important
}

@media only screen and (max-width: 768px) {
    .gform_wrapper .top_label li.gfield.gf_left_half, .gform_wrapper .top_label li.gfield.gf_right_half {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important
    }
}

.mini-image-list {
    text-align: center
}

.mini-image-list li {
    width: 160px
}

@media only screen and (max-width: 480px) {
    .mini-image-list li {
        width: auto;
        display: block;
        margin-bottom: 25px
    }
}

.mini-image-list img {
    width: 80px;
    margin: 20px auto 0
}

/*.slick-slider {
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list, .slick-slider {
    position: relative;
    display: block
}

.slick-list {
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: none
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list, .slick-slider .slick-track {
    transform: translateZ(0)
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block
}

.slick-track:after, .slick-track:before {
    display: table;
    content: ""
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.slick-loading .slick-list {
    background: #fff url(../images/ajax-loader.gif) 50% no-repeat
}

.slick-next, .slick-prev {
    font-size: 0;
    line-height: 0;
    border-radius: 0;
    z-index: 10;
    position: absolute;
    top: 50%;
    top: calc(50% - 25px);
    display: block;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    background-color: hsla(0, 0%, 100%, .2);
    cursor: pointer;
    border: none;
    outline: none;
    box-shadow: 0 0 120px 0 rgba(0, 0, 0, .3)
}

.slick-next:active, .slick-next:focus, .slick-next:hover, .slick-prev:active, .slick-prev:focus, .slick-prev:hover {
    background-color: hsla(0, 0%, 100%, .3);
    box-shadow: 0 0 120px 0 rgba(0, 0, 0, .4)
}

.slick-next:before, .slick-prev:before {
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-weight: 200;
    color: #b0b7bc;
    font-size: 30px;
    line-height: 1;
    transition: all .2s ease-in-out;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.slick-next:focus, .slick-next:hover, .slick-prev:focus, .slick-prev:hover {
    outline: none
}

.slick-next:active:before, .slick-next:hover:before, .slick-prev:hover:before {
    color: #b0b7bc
}

.slick-prev {
    left: 0
}

[dir=rtl] .slick-prev {
    right: 0;
    left: auto
}

.slick-prev:before {
    content: "\3C"
}

[dir=rtl] .slick-prev:before {
    content: "\3E"
}

.slick-next {
    right: 0
}

[dir=rtl] .slick-next {
    right: auto;
    left: 0
}

.slick-next:before {
    content: "\3E"
}

[dir=rtl] .slick-next:before {
    content: "\3C"
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center
}

.slick-dots li {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    padding: 0
}

.slick-dots li, .slick-dots li button {
    width: 20px;
    height: 20px;
    cursor: pointer
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    padding: 5px;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent
}

.slick-dots li button:focus, .slick-dots li button:hover {
    outline: none
}

.slick-dots li button:focus:before, .slick-dots li button:hover:before {
    opacity: 1
}

.slick-dots li button:before {
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: "\149";
    text-align: 3 enter;
    opacity: .25;
    color: blak;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: #000
}

.slick-dots {
    position: static
}

.slick-dots li {
    height: auto
}

.slick-dots li button {
    background: #d0d4d7 !important;
    border-radius: 100% !important;
    width: 10px !important;
    height: 10px !important;
    margin: 0
}

.slick-dots li button:before {
    display: none !important
}

.slick-dots li.slick-active button {
    background: #b8bec3 !important
}

a.slick-slide:hover {
    border: none !important
}*/

@media {
    .featherlight {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2147483647;
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
        background: #333;
        background: transparent
    }

    .featherlight:last-of-type {
        background: rgba(0, 0, 0, .8)
    }

    .featherlight:before {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle
    }

    .featherlight .featherlight-content {
        position: relative;
        text-align: left;
        vertical-align: middle;
        display: inline-block;
        overflow: hidden;
        padding: 25px 25px 0;
        border-bottom: 25px solid transparent;
        margin-left: 5%;
        margin-right: 5%;
        max-height: 95%;
        background: #fff;
        cursor: auto;
        white-space: normal
    }

    .featherlight .featherlight-inner {
        display: block
    }

    .featherlight link.featherlight-inner, .featherlight script.featherlight-inner, .featherlight style.featherlight-inner {
        display: none
    }

    .featherlight .featherlight-close-icon {
        position: absolute;
        z-index: 9999;
        top: 0;
        right: 0;
        margin-top: 5px;
        line-height: 25px;
        width: 25px;
        cursor: pointer;
        text-align: center;
        font-family: Arial, sans-serif;
        background: #fff;
        background: hsla(0, 0%, 100%, .3);
        color: #000;
        border: none;
        padding: 0
    }

    .featherlight .featherlight-close-icon::-moz-focus-inner {
        border: 0;
        padding: 0
    }

    .featherlight .featherlight-image {
        width: 100%
    }

    .featherlight-iframe .featherlight-content {
        border-bottom: 0;
        padding: 0;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll
    }

    .featherlight iframe {
        border: none
    }

    .featherlight * {
        box-sizing: border-box
    }
}

@media only screen and (max-width: 1024px) {
    .featherlight .featherlight-content {
        margin-left: 0;
        margin-right: 0;
        max-height: 98%;
        padding: 10px 10px 0;
        border-bottom: 10px solid transparent
    }
}

@media {
    .featherlight-next, .featherlight-previous {
        display: block;
        position: absolute;
        top: 25px;
        right: 25px;
        bottom: 0;
        left: 80%;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background: transparent
    }

    .featherlight-previous {
        left: 25px;
        right: 80%
    }

    .featherlight-next:hover, .featherlight-previous:hover {
        background: hsla(0, 0%, 100%, .25)
    }

    .featherlight-next span, .featherlight-previous span {
        display: none;
        position: absolute;
        top: 50%;
        left: 5%;
        width: 82%;
        text-align: center;
        font-size: 80px;
        line-height: 80px;
        margin-top: -40px;
        text-shadow: 0 0 5px #fff;
        color: #76b900;
        font-style: normal;
        font-weight: 400
    }

    .featherlight-next span {
        right: 5%;
        left: auto
    }

    .featherlight-next:hover span, .featherlight-previous:hover span {
        display: inline-block
    }

    .featherlight-first-slide.featherlight-last-slide .featherlight-next, .featherlight-first-slide.featherlight-last-slide .featherlight-previous, .featherlight-loading .featherlight-next, .featherlight-loading .featherlight-previous, .featherlight-swipe-aware .featherlight-next, .featherlight-swipe-aware .featherlight-previous {
        display: none
    }
}

@media only screen and (max-device-width: 1024px) {
    .featherlight-next:hover, .featherlight-previous:hover {
        background: none
    }

    .featherlight-next span, .featherlight-previous span {
        display: block
    }
}

@media only screen and (max-width: 1024px) {
    .featherlight-next, .featherlight-previous {
        top: 10px;
        right: 10px;
        left: 85%
    }

    .featherlight-previous {
        left: 10px;
        right: 85%
    }

    .featherlight-next span, .featherlight-previous span {
        margin-top: -30px;
        font-size: 40px
    }
}

.featured-products {
    font-size: 0
}

@media only screen and (min-width: 1025px) {
    .featured-products {
        margin-left: -60px;
        padding: 0 60px
    }
}

.featured-products__product {
    width: 100%;
    display: inline-block;
    font-size: 16px;
    position: relative;
    overflow: hidden
}

@media only screen and (min-width: 1025px) {
    .featured-products__product {
        padding-left: 60px;
        width: 50%;
        vertical-align: top
    }
}

.featured-products__product a {
    border: none;
    text-align: center
}

.featured-products__product a:hover img {
    opacity: .9
}

.featured-products__product a:hover h3 {
    color: #1a3477
}

.featured-products__product img {
    margin-bottom: 25px;
    transition: opacity .2s ease-in-out;
    -webkit-backface-visibility: hidden
}

.featured-products__product .label {
    left: auto;
    right: -50px;
    top: -50px;
    margin: auto;
    height: 100px;
    width: 100px;
    border-radius: 0;
    transform: rotate(45deg)
}

.featured-products__product .label p {
    font-size: 12px;
    position: relative;
    top: 72px
}

.featured-products__product h3 {
    margin-bottom: 10px;
    color: #001d68
}

.featured-products__product p {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 0
}

.featured-products__product p.price {
    font-size: 30px;
    line-height: 40px;
    text-transform: uppercase;
    color: #76b900;
    margin-top: 20px
}

.featured-products__product p.price, .featured-products__product p.saving {
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    font-style: normal;
    font-weight: 700
}

.featured-products__product p.saving {
    font-size: 25px;
    line-height: 30px;
    color: #414042;
    margin-bottom: 20px
}

.featured-products__product .button {
    margin-top: 30px
}

@media only screen and (max-width: 1024px) {
    .featured-products {
        margin: 0;
        padding: 0
    }

    .featured-products__product {
        padding: 0;
        width: 400px;
        max-width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto
    }

    .featured-products__product + .featured-products__product {
        margin-top: 50px
    }
}

@media only screen and (min-width: 1025px) {
    .featured-products, .featured-products:last-child {
        margin-bottom: -60px !important
    }

    .featured-products__product {
        margin-bottom: 60px
    }

    .featured-products__product h3 {
        font-size: 20px;
        line-height: 25px
    }
}

@media only screen and (min-width: 1025px) {
    .featured-products__product {
        width: 33.3333333333%
    }

    .featured-products__product a:not(.button) {
        display: block
    }
}

.products-carousel .boxed {
    padding: 0;
    position: relative;
    border-right: 1px solid #eff1f2
}

.products-carousel .boxed .grid-row {
    padding: 0;
    margin-left: 0
}

.products-carousel .boxed .grid-col-3 {
    position: relative
}

.products-carousel .boxed .products-carousel__text {
    padding: 60px 0 60px 60px
}

.products-carousel .boxed .products-carousel__text .subtitle {
    -ms-flex-pack: start;
    justify-content: flex-start;
    color: #76b900;
    margin-bottom: 30px
}

.products-carousel .boxed .products-carousel__text .subtitle:before {
    display: none
}

.products-carousel .boxed h3 {
    color: #001d68
}

.products-carousel .boxed img {
    margin: 0
}

.products-carousel .boxed .caption, .products-carousel .boxed .tab-group__item__button {
    margin-bottom: 60px
}

.products-carousel .boxed + .boxed {
    margin-top: 0
}

@media only screen and (min-width: 768px) {
    .products-carousel .boxed.hybrid7 img, .products-carousel .boxed.levlink img {
        margin-top: 30px
    }

    .products-carousel .boxed.skytile img {
        margin-top: 60px
    }

    .products-carousel .boxed.fgled3 img, .products-carousel .boxed.fgled6 img, .products-carousel .boxed.fgled10 img {
        width: 490px;
        margin-right: 10px
    }

    .products-carousel .boxed.skytile-surface img {
        margin-top: 100px
    }

    .products-carousel .boxed.toughbay-linear img {
        margin-top: 60px
    }

    .products-carousel .boxed.skypack img {
        margin-top: 40px
    }
}

.products-carousel .slick-next, .products-carousel .slick-prev {
    box-shadow: none;
    background-color: #fff
}

.products-carousel .slick-next:focus:before, .products-carousel .slick-next:hover:before, .products-carousel .slick-prev:focus:before, .products-carousel .slick-prev:hover:before {
    color: #808285
}

.products-carousel .slick-prev {
    left: -100px
}

@media only screen and (max-width: 1479px) {
    .products-carousel .slick-prev {
        display: none !important
    }
}

.products-carousel .slick-next {
    right: -99px
}

@media only screen and (max-width: 1479px) {
    .products-carousel .slick-next {
        display: none !important
    }
}

.subscribe {
    border-top: 10px solid #028244
}

.subscribe .intro {
    margin-bottom: 0;
    padding-bottom: 0
}

.subscribe .subscribe-form .gfield_label, .subscribe .subscribe-form label {
    display: inline-block !important;
    width: 50px !important;
    height: 50px !important;
    background-color: #fff !important;
    background-position: 50% !important;
    background-repeat: no-repeat !important;
    font-size: 0 !important;
    float: left !important;
    margin-top: 0 !important
}

.subscribe .subscribe-form .email label, .subscribe .subscribe-form label[for=mce-EMAIL] {
    background-image: url(../images/email-icon-green.png) !important;
    /*background-size: 15px 11.5px !important*/
}

.subscribe .subscribe-form .first-name label, .subscribe .subscribe-form .last-name label, .subscribe .subscribe-form label[for=mce-FNAME], .subscribe .subscribe-form label[for=mce-LNAME] {
    background-image: url(../images/user-icon-green.png) !important;
    /*background-size: 15px 16.5px !important*/
}

.subscribe .subscribe-form .last-name label, .subscribe .subscribe-form .last-name label, .subscribe .subscribe-form label[for=mce-FNAME], .subscribe .subscribe-form label[for=mce-LNAME] {
    background-image: url(../images/user-icon-green-tel.png) !important;
    /*background-size: 15px 16.5px !important*/
}

.subscribe .subscribe-form .mycontent label, .subscribe .subscribe-form .mycontent label, .subscribe .subscribe-form label[for=mce-FNAME], .subscribe .subscribe-form label[for=mce-LNAME] {
    background-image: url(../images/mycontent.png) !important;
    /*background-size: 15px 16.5px !important*/
}


.subscribe .subscribe-form input:not([type=submit]) {
    float: left;
    background: #d8dbde !important;
    border: none !important;
    width: 60% !important;
    width: calc(100% - 50px) !important;
    margin: 0 0 30px !important
}

.subscribe .subscribe-form input:not([type=submit]):focus {
    background: #dfe2e4 !important
}

.subscribe .subscribe-form input[type=submit]:hover {
    background: #016c38 !important
}

.subscribe .subscribe-form .form-field, .subscribe .subscribe-form .gfield, .subscribe .subscribe-form .mc-field-group {
    margin-bottom: 30px !important;
    clear: none !important
}

.subscribe .subscribe-form p.errors {
    text-align: left !important;
    font-weight: 700 !important;
    text-transform: uppercase !important
}

.subscribe .subscribe-form div.submit {
    clear: both !important
}

.subscribe .subscribe-form .validation_error, .subscribe .subscribe-form .validation_message, .subscribe .subscribe-form .validation_success {
    margin: 0 0 50px;
    padding: 0;
    color: #414042;
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    border: none
}

.subscribe .subscribe-form .validation_success {
    background: #add566;
    color: #fff;
    min-height: 50px;
    padding: 12.5px 20px;
    font-weight: 700;
    text-align: center
}

.subscribe .subscribe-form .validation_error {
    background: #f5b166;
    color: #fff;
    min-height: 50px;
    padding: 12.5px 20px;
    font-weight: 700;
    text-align: center
}

.subscribe .subscribe-form .validation_message {
    background: none;
    padding: 0;
    color: #f9ba00;
    padding-top: 10px;
    font-weight: 400
}

.subscribe .subscribe-form .gfield_error {
    max-width: 100% !important;
    background-color: transparent !important;
    margin-bottom: inherit !important;
    border-top: none !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    box-sizing: border-box !important
}

.subscribe .subscribe-form .gfield_error input {
    margin-bottom: 0 !important
}

.subscribe .subscribe-form .top_label div.ginput_container {
    margin-top: 0 !important
}

.subscribe .gform_wrapper.gform_validation_error .gform_body ul li.gfield.gfield_error:not(.gf_left_half):not(.gf_right_half) {
    max-width: 100% !important
}

@media only screen and (min-width: 768px) {
    .subscribe .subscribe-form .gfield.first-name, .subscribe .subscribe-form .gfield.last-name, .subscribe .subscribe-form .gfield_error.first-name, .subscribe .subscribe-form .gfield_error.last-name, .subscribe .subscribe-form .mc-field-group.first-name, .subscribe .subscribe-form .mc-field-group.last-name {
        width: 50% !important;
        float: left !important
    }

    .subscribe .subscribe-form .gfield.first-name, .subscribe .subscribe-form .gfield_error.first-name, .subscribe .subscribe-form .mc-field-group.first-name {
        padding-right: 20px !important
    }

    .subscribe .subscribe-form .gfield.last-name, .subscribe .subscribe-form .gfield_error.last-name, .subscribe .subscribe-form .mc-field-group.last-name {
        padding-left: 20px !important
    }

    .subscribe .subscribe-form .gfield.email, .subscribe .subscribe-form .gfield_error.email, .subscribe .subscribe-form .mc-field-group.email {
        width: 100% !important;
        float: left !important
    }

    .subscribe .subscribe-form .gfield_error input {
        margin-bottom: 50px !important
    }

    .subscribe .subscribe-form input:not([type=submit]) {
        margin-bottom: 0 !important
    }
}

@media only screen and (min-width: 1025px) {
    .subscribe .subscribe-form .gfield, .subscribe .subscribe-form .gfield_error, .subscribe .subscribe-form .mc-field-group {
        margin: 0 0 50px !important
    }

    .subscribe .subscribe-form .gfield.first-name, .subscribe .subscribe-form .gfield.last-name, .subscribe .subscribe-form .gfield_error.first-name, .subscribe .subscribe-form .gfield_error.last-name, .subscribe .subscribe-form .mc-field-group.first-name, .subscribe .subscribe-form .mc-field-group.last-name {
        width: 25% !important;
        padding-right: 20px !important;
        float: left
    }

    .subscribe .subscribe-form .gfield.first-name, .subscribe .subscribe-form .gfield_error.first-name, .subscribe .subscribe-form .mc-field-group.first-name {
        padding-right: 20px !important
    }

    .subscribe .subscribe-form .gfield.last-name, .subscribe .subscribe-form .gfield_error.last-name, .subscribe .subscribe-form .mc-field-group.last-name {
        padding-left: 20px !important
    }

    .subscribe .subscribe-form .gfield.email, .subscribe .subscribe-form .gfield_error.email, .subscribe .subscribe-form .mc-field-group.email {
        width: 50% !important;
        padding-left: 20px !important;
        float: left !important
    }
}

.section--page-teaser {
    background-color: #d8dbde;
    background-size: cover
}

.section--page-teaser .intro {
    margin-bottom: 0;
    padding-bottom: 0
}

.section--page-teaser.dark h2, .section--page-teaser.dark p.lead, .section--page-teaser.dark p.subtitle {
    color: #414042
}

.section--page-teaser.dark p.subtitle:after, .section--page-teaser.dark p.subtitle:before {
    background-color: #414042
}

.section--page-teaser.light h2, .section--page-teaser.light p.lead, .section--page-teaser.light p.subtitle {
    color: #fff
}

.section--page-teaser.light p.subtitle:after, .section--page-teaser.light p.subtitle:before {
    background-color: #fff
}

@media only screen and (min-width: 1025px) {
    .section--page-teaser p.lead {
        font-size: 20px;
        line-height: 30px;
        color: #808285
    }
}

.product-slider ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.product-slider a {
    border: none
}

.product-slider .caption, .product-slider .tab-group__item__button {
    margin: 15px auto 0
}

.product-slider .slick-next, .product-slider .slick-prev {
    background: transparent;
    box-shadow: none
}

.product-slider .slick-next:after, .product-slider .slick-next:before, .product-slider .slick-prev:after, .product-slider .slick-prev:before {
    font-size: 50px
}

@media only screen and (max-width: 767px) {
    .product-slider .slick-next, .product-slider .slick-prev {
        top: 0
    }

    .product-slider .slick-next:after, .product-slider .slick-next:before, .product-slider .slick-prev:after, .product-slider .slick-prev:before {
        font-size: 30px
    }
}

.product-slider .slick-prev {
    left: -60px
}

@media only screen and (max-width: 767px) {
    .product-slider .slick-prev {
        left: 35%
    }
}

.product-slider .slick-next {
    right: -60px
}

@media only screen and (max-width: 767px) {
    .product-slider .slick-next {
        right: 35%
    }
}

.product-slider__image {
    position: relative
}

.product-slider__image img {
    margin: 0
}

.product-slider__trigger {
    margin-left: -10px;
    margin-right: -10px
}

.product-slider__trigger .product-slider__image {
    float: left;
    position: relative;
    width: 200px;
    cursor: pointer;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #d8dbde
}

.product-slider__trigger .product-slider__image img {
    margin: 0;
    padding: 0
}

#product .hero .intro {
    padding-bottom: 0
}

#product .hero img {
    width: 100%;
    margin-top: 50px
}

@media only screen and (min-width: 480px) {
    #product .hero img {
        width: 500px
    }
}

@media only screen and (min-width: 1025px) {
    #product .hero img {
        width: 550px
    }
}

@media only screen and (min-width: 1480px) {
    #product .hero img {
        width: 650px
    }
}

#product .hero img.tall {
    width: auto;
    height: 300px;
    max-width: none
}

@media only screen and (min-width: 480px) {
    #product .hero img.tall {
        height: 350px
    }
}

@media only screen and (min-width: 1025px) {
    #product .hero img.tall {
        height: 400px
    }
}

@media only screen and (min-width: 1480px) {
    #product .hero img.tall {
        height: 500px
    }
}

@media only screen and (min-width: 480px) {
    #product .hero img.wide {
        width: 600px
    }
}

@media only screen and (min-width: 1025px) {
    #product .hero img.wide {
        width: 700px
    }
}

@media only screen and (min-width: 1480px) {
    #product .hero img.wide {
        width: 850px
    }
}

#product #overview .ui-list {
    margin-top: 75px
}

#product #overview .ui-list li {
    font-size: 16px
}

#product .button--cta, #product .feature-icons {
    margin-top: 75px
}

#product small.para {
    display: block;
    margin-top: 75px;
    margin-bottom: 5px
}

#product small.para + small {
    margin-bottom: 0
}

#product .section__content > .r-table, #product .section__content > .tabs {
    margin-bottom: 100px
}

#product .product-specs .grid-col-3:after, #product .section__content > .r-table:after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    margin: 50px auto;
    background-color: #d8dbde
}

#product .product-specs .grid-row:last-of-type .grid-col-3:after {
    display: none
}

#product .product-specs p {
    margin-bottom: 10px;
    line-height: 25px
}

#product .product-specs p.finish, #product .product-specs p b {
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif;
    text-transform: uppercase
}

#product .product-specs p.finish {
    color: #b0b7bc;
    letter-spacing: .02em;
    font-size: 21px
}

#product .product-specs p.note {
    margin-top: 30px
}

#product .product-specs .button {
    margin: 0
}

#product.postid-976 .intro img {
    width: auto;
    height: 500px;
    max-width: none
}

@media only screen and (min-width: 768px) {
    #product .hero .button-group .button {
        margin-top: 0
    }

    #product .r-table:after {
        margin-top: 100px
    }

    #product .product-specs .grid-col-3:after {
        display: none
    }

    #product .product-specs .grid-col-3:nth-child(1n) {
        padding-right: 60px
    }

    #product .product-specs .grid-col-3:nth-child(2n) {
        border-left: 1px solid #d8dbde
    }

    #product .product-specs .grid-row + .grid-row:before {
        content: "";
        display: block;
        height: 1px;
        width: 100%;
        width: calc(100% + 60px);
        margin: 50px auto;
        background-color: #d8dbde
    }
}

.product-listings {
    text-align: center
}

.product-listings h1 {
    margin: 0
}

.product-listings__list img {
    border: 1px solid #d8dbde
}

.download img {
    margin: 0 !important;
    width: 250px
}

.download .button, .download .caption, .download .tab-group__item__button {
    margin-top: 20px
}

.download-list {
    text-align: center
}

.download-list .download {
    width: 100%;
    display: inline-block;
    font-size: 16px
}

@media only screen and (min-width: 1025px) {
    .download-list .download {
        padding-left: 60px;
        width: 33.3333333333%;
        vertical-align: top
    }
}

.download-list .grid-row .download {
    margin-bottom: 50px
}

.download-list .grid-row:last-of-type .download:last-of-type {
    margin-bottom: 0
}

.download-list h2 {
    color: #001d68 !important
}

@media only screen and (min-width: 1025px) {
    .download-list .grid-row {
        margin-bottom: 75px
    }

    .download-list .grid-row .download, .download-list .grid-row:last-of-type {
        margin-bottom: 0
    }
}

.article .article__body, .content-box {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto
}

.article .article__body p{
    /*font-size: 14px;*/
    margin-bottom: 30px;
}

.article .article__body .button, .content-box .button {
    margin-top: 50px;
    margin-bottom: 50px
}

.article .article__body .h3, .article .article__body h3, .content-box .h3, .content-box h3 {
    color: #76b900
}

.article .article__body ol:not([class*=list]), .article .article__body ul:not([class*=list]), .content-box ol:not([class*=list]), .content-box ul:not([class*=list]) {
    text-align: left;
    font-size: 16px;
    line-height: 25px;
    margin-right: 30px;
    margin-bottom: 30px;
    padding: 0;
    list-style: none
}

.article .article__body ol:not([class*=list]) li, .article .article__body ul:not([class*=list]) li, .content-box ol:not([class*=list]) li, .content-box ul:not([class*=list]) li {
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative
}

.article .article__body ol:not([class*=list]) li:before, .article .article__body ul:not([class*=list]) li:before, .content-box ol:not([class*=list]) li:before, .content-box ul:not([class*=list]) li:before {
    content: "";
    display: block;
    background-color: #76b900;
    float: left;
    margin: 10px 0 0 -20px;
    height: 5px;
    width: 5px;
    border-radius: 100%
}

.article .article__body ol:not([class*=list]), .article .article__body ul:not([class*=list]), .content-box ol:not([class*=list]), .content-box ul:not([class*=list]) {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (min-width: 1480px) {
    .article .article__body ol:not([class*=list]), .article .article__body ul:not([class*=list]), .content-box ol:not([class*=list]), .content-box ul:not([class*=list]) {
        max-width: 800px
    }
}

.article .article__body ol ol, .article .article__body ol ul, .article .article__body ul ol, .article .article__body ul ul, .content-box ol ol, .content-box ol ul, .content-box ul ol, .content-box ul ul {
    margin-bottom: 0
}

.article .article__body .split-list, .content-box .split-list {
    margin-left: 0;
    margin-right: 0
}

.no-results {
    text-align: center
}

.no-results > h2 {
    margin-bottom: 20px
}

.no-results > p {
    margin-bottom: 40px
}

.article {
    text-align: center
}

.article h1 {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto
}

.article h1 + .button {
    margin: 0 auto
}

.article .h2, .article .h3, .article .h4, .article .h5, .article h2, .article h3, .article h4, .article h5 {
    margin-top: 50px
}

.article .video {
    margin-top: 75px;
    margin-bottom: 75px
}

.article .article__body {
    max-width: 700px
}

.article .article__body .h1, .article .article__body .h2, .article .article__body .h3, .article .article__body .h4, .article .article__body .h5, .article .article__body h1, .article .article__body h2, .article .article__body h3, .article .article__body h4, .article .article__body h5, .article .article__body ol, .article .article__body p, .article .article__body ul {
    text-align: left
}

.article .article__body h2:after {
    content: "";
    display: block;
    height: 1px;
    width: 100px;
    margin: 50px 0 20px;
    background-color: #d8dbde
}

.article .article__body img {
    margin-top: 50px;
    margin-bottom: 50px
}

.article .article__body img + img {
    margin-top: 0
}

.article .article__thumb {
    margin-top: 50px;
    margin-bottom: 50px
}

.article .article__thumb img {
    margin-left: 0;
    margin-right: 0
}

.article--empty h1:after {
    content: "";
    display: block;
    height: 1px;
    width: 200px;
    max-width: 75%;
    margin: 50px auto;
    background: #d8dbde
}

.article__meta {
    color: #9ea5a9;
    display: inline-block;
    margin: 0;
    text-transform: uppercase;
    font-size: 14px
}

.article__meta:after {
    content: "";
    display: block;
    height: 1px;
    width: 200px;
    max-width: 75%;
    margin: 50px auto 75px;
    background: #d8dbde
}

.article__meta li:after {
    content: "\2022";
    color: #b0b7bc;
    margin: 0 10px
}

.article__meta li:last-of-type:after {
    display: none
}

.article__meta a {
    color: #0f5151
}

@media only screen and (max-width: 767px) {
    .article {
        padding-left: 20px;
        padding-right: 20px
    }
}

@media only screen and (min-width: 768px) {
    .article__body ol, .article__body ul {
        font-size: 18px;
        line-height: 30px
    }

    .article__body ol li, .article__body ul li {
        margin-bottom: 20px;
        padding-left: 30px
    }

    .article__body ol li:before, .article__body ul li:before {
        margin-top: 15px;
        margin-left: -30px
    }
}

.article-list, .article-list h1 {
    text-align: center
}

.article-list h1 {
    padding-left: 20px;
    padding-right: 20px
}

.article-list .article__label {
    margin: 0 auto
}

.article-list .article:first-of-type {
    padding-top: 100px
}

.article-list .article__meta:after {
    margin: 50px auto
}

.article-list .article__body img {
    width: 100%
}

.article-list .article__body .button {
    margin-top: 50px;
    margin-bottom: 0
}

.article-list .article__thumb {
    margin-top: 50px;
    margin-bottom: 50px
}

.article-list .article__thumb img {
    margin: 0
}

@media only screen and (min-width: 480px) {
    .article-list h1 {
        padding-left: 30px;
        padding-right: 30px
    }
}

@media only screen and (min-width: 768px) {
    .article-list h1 {
        padding-left: 60px;
        padding-right: 60px
    }
}

/*.article .single-casestudy .article__body .video:first-child + p, .article .single-casestudy .article__body > p:first-child, .article .single-casestudy .article__body a:first-child + p, .article .single-casestudy .article__body img:first-child + p, .article .single-post .article__body .video:first-child + p, .article .single-post .article__body > p:first-child, .article .single-post .article__body a:first-child + p, .article .single-post .article__body img:first-child + p, .single-casestudy .article .article__body .video:first-child + p, .single-casestudy .article .article__body > p:first-child, .single-casestudy .article .article__body a:first-child + p, .single-casestudy .article .article__body img:first-child + p, .single-casestudy .content-box .video:first-child + p, .single-casestudy .content-box > p:first-child, .single-casestudy .content-box a:first-child + p, .single-casestudy .content-box img:first-child + p, .single-post .article .article__body .video:first-child + p, .single-post .article .article__body > p:first-child, .single-post .article .article__body a:first-child + p, .single-post .article .article__body img:first-child + p, .single-post .content-box .video:first-child + p, .single-post .content-box > p:first-child, .single-post .content-box a:first-child + p, .single-post .content-box img:first-child + p {*/
    /*font-size: 20px;*/
    /*line-height: 30px;*/
    /*color: #414042;*/
    /*margin-bottom: 20px*/
/*}*/

.article .single-casestudy .article__body > .video:first-child, .article .single-post .article__body > .video:first-child, .single-casestudy .article .article__body > .video:first-child, .single-casestudy .content-box > .video:first-child, .single-post .article .article__body > .video:first-child, .single-post .content-box > .video:first-child {
    margin-bottom: 100px;
    margin-left: -120px;
    margin-right: -120px
}

#case-study .article__label {
    margin-bottom: 50px
}

#case-study .image-carousel {
    margin-bottom: 100px
}

.dimmer-list {
    background: transparent url(../images/texture-background.jpg) no-repeat 50%;
    background-size: cover
}

.dimmer-list .grid-col-3 img {
    margin: 0 auto !important;
    position: relative;
    left: -22px
}

@media only screen and (max-width: 1024px) {
    .dimmer-list .grid-col-3 img {
        left: -11px;
        display: block;
        margin-bottom: 50px !important;
        max-width: 70%;
        position: relative
    }
}

@media only screen and (max-width: 768px) {
    .dimmer-list .grid-col-3 img {
        max-width: 80%
    }
}

@media only screen and (max-width: 480px) {
    .dimmer-list .grid-col-3 img {
        max-width: 70%;
        right: 3%
    }
}

.dimmer-list .grid-row > img {
    margin: 0 auto 50px !important;
    max-width: 360px;
    display: block;
    position: relative;
    right: -10px
}

@media only screen and (max-width: 768px) {
    .dimmer-list .grid-row > img {
        max-width: 80%
    }
}

@media only screen and (max-width: 480px) {
    .dimmer-list .grid-row > img {
        max-width: 70%;
        right: 3%
    }
}

.dimmer-list .ui-list__title {
    font-size: 15px;
    line-height: 20px;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 !important;
    padding: 10px 30px;
    letter-spacing: .1em;
    background: #fff
}

.dimmer-list .ui-list__title span {
    color: #808285;
    font-weight: 200
}

.dimmer-list .ui-list--slim {
    padding-left: 30px;
    background: #eff1f2
}

.dimmer-list .ui-list--slim li {
    color: #414042;
    padding-right: 20px
}

.dimmer-list .ui-list--slim li:nth-of-type(odd):last-child {
    padding-right: calc(50% + 20px)
}

@media only screen and (max-width: 1025px) {
    .dimmer-list .grid-col-3 {
        width: 100%
    }

    .dimmer-list img {
        width: 400px;
        margin-bottom: 50px
    }
}

#page main .section:not(#range) .h1, #page main .section:not(#range) .h2, #page main .section:not(#range) .h3, #page main .section:not(#range) .h4, #page main .section:not(#range) .h5, #page main .section:not(#range) h1, #page main .section:not(#range) h2, #page main .section:not(#range) h3, #page main .section:not(#range) h4, #page main .section:not(#range) h5 {
    text-align: center
}

#page main .section:not(#range) h2, #page main .section:not(#range) h3, #page main .section:not(#range) h4, #page main .section:not(#range) h5 {
    margin-top: 50px
}

#page main .section:not(#range) h2:after {
    content: "";
    display: block;
    height: 1px;
    width: 100px;
    margin: 20px auto;
    background-color: #d8dbde
}

@media only screen and (min-width: 768px) {
    #page main .section:not(#range) h2:after {
        margin: 30px auto 20px
    }
}

@media only screen and (min-width: 1025px) {
    #page main .section:not(#range) h2:after {
        margin: 50px auto 20px
    }
}

#page main .section:not(#range) .intro :first-child {
    margin-top: 0
}

#page main .section:not(#range) img {
    margin: 75px auto
}

#page main .section:not(#range) img:only-child {
    margin: 0 auto
}

#home .hero-image {
    background-image: url(../images/levlink-banner-image.jpg);
    background-position: 50%;
    background-size: cover
}

#home .hero-image .hero-image--title {
    position: absolute;
    top: 21.5%;
    width: 100%;
    text-align: center
}

#home .hero-image .hero-image--strapline {
    position: absolute;
    bottom: 16.5%;
    width: 100%;
    text-align: center
}

#home .hero-image + .button {
    display: block;
    width: 100%;
    margin: 0;
    text-align: center
}

@media only screen and (max-width: 1024px) {
    #home .hero-image {
        padding-bottom: 50%
    }

    #home .hero-image .hero-image--title {
        font-size: 14px;
        line-height: 20px;
        top: 23%
    }

    #home .hero-image .hero-image--strapline {
        font-size: 25px;
        line-height: 30px;
        bottom: 20%
    }
}

@media only screen and (max-width: 767px) {
    #home .hero-image .hero-image--title {
        font-size: 12px;
        line-height: 15px;
        top: 22%
    }

    #home .hero-image .hero-image--strapline {
        font-size: 20px;
        line-height: 25px;
        bottom: 18%
    }
}

@media only screen and (max-width: 479px) {
    #home .hero-image .hero-image--title {
        font-size: 10px;
        letter-spacing: .075em;
        line-height: 15px;
        top: 19.5%
    }

    #home .hero-image .hero-image--strapline {
        font-size: 18px;
        line-height: 20px;
        bottom: 15%
    }
}

@media only screen and (min-width: 1100px) {
    #home .feature-banner .button-group .button {
        margin-left: 0 !important
    }
}

#page--skytile .hero-image {
    background-image: url(../images/skytile-banner-image.jpg);
    background-position: center 58%
}

#page--skytile .hero .intro img {
    width: 900px
}

#page--skytile .section#design {
    padding-bottom: 100px
}

#page--skytile .section#design img {
    margin-bottom: 0
}

#page--skytile .section#design .hotspot.one {
    top: 45.8%;
    left: 14%
}

#page--skytile .section#design .hotspot.two {
    top: 80%;
    left: 25.9%
}

#page--skytile .section#design .hotspot.three {
    top: 53.2%;
    left: 58.6%
}

#page--skytile .section#design .hotspot.four {
    top: 40%;
    left: 40.8%
}

#page--skytile .section#design .hotspot.five {
    top: 64%;
    left: 91.4%
}

#page--skytile .section#protection {
    background: transparent url(../images/protection-background.jpg) no-repeat 50%;
    background-size: cover
}

#page--skytile .section#colour-temperature .intro, #page--skytile .section#protection .intro {
    padding-bottom: 0
}

#page--skytile .section#colour-temperature .button {
    margin-bottom: 0
}

#page--skytile .section#colour-temperature, #page--skytile .section#finishes {
    padding-bottom: 0
}

#page--skytile .section#colour-temperature img, #page--skytile .section#finishes img, #page--skytile .section#refinement .split-comparison {
    margin-bottom: 0
}

#page--skytile .section#light-distribution p.lead + img {
    margin-top: 50px
}

#page--skytile .section#light-distribution .panel-comparison {
    text-align: center
}

#page--skytile .section#light-distribution .panel-comparison p {
    margin-bottom: 40px
}

#page--skytile .section#light-distribution .panel-comparison img {
    margin: 0 auto;
    width: 500px
}

#page--skytile .section#light-distribution .panel-comparison .grid-col-4 img {
    float: left;
    width: 50%
}

#page--skytile .section#light-distribution .panel-comparison .grid-col-4 img:first-of-type {
    padding-right: 30px
}

#page--skytile .section#light-distribution .panel-comparison .grid-col-4 img:last-of-type {
    padding-left: 30px
}

@media only screen and (max-width: 1025px) {
    #page--skytile .section#light-distribution .panel-comparison .grid-col-4 {
        margin-bottom: 50px
    }

    #page--skytile .section#light-distribution .panel-comparison .grid-col-4 figure img:first-of-type {
        float: left;
        padding-right: 15px
    }

    #page--skytile .section#light-distribution .panel-comparison .grid-col-4 figure img:last-of-type {
        float: right;
        padding-left: 15px
    }
}

#page--skytile .section#warranty {
    background: transparent url(../images/warranty-background.jpg) no-repeat 50%;
    background-size: cover
}

#page--skytile .section#warranty img {
    display: block;
    margin: 75px auto 0;
    width: 300px
}

@media only screen and (min-width: 1025px) {
    #page--skytile .section#warranty img {
        margin-top: 0
    }
}

#page--skytile .section#warranty .section__content p.subtitle {
    margin-bottom: 40px
}

#page--skytile .section#warranty .section__content p.subtitle:before {
    display: none
}

@media only screen and (min-width: 1025px) {
    #page--skytile .section#warranty img {
        width: auto
    }

    #page--skytile .section#warranty .section__content .subtitle, #page--skytile .section#warranty .section__content h2 {
        margin-left: 60px;
        margin-right: 60px
    }

    #page--skytile .section#warranty .section__content .button {
        margin-left: 0;
        margin-right: 0
    }
}

#page--skytile-ugr .hero-image {
    background-image: url(../images/skytile-ugr-header.jpg);
    background-position: center 50%
}

#page--skytile-ugr .hero .intro img {
    width: 900px
}

#page--skytile-ugr .section#design {
    background: #d7dbde;
    padding-bottom: 0
}

#page--skytile-ugr .section#design img {
    margin-bottom: 0
}

#page--skytile-ugr .section#design .caption, #page--skytile-ugr .section#design .tab-group__item__button {
    margin: 40px 0 10px
}

#page--skytile-ugr .section#design .hotspot.one {
    top: 41%;
    left: 14%
}

#page--skytile-ugr .section#design .hotspot.two {
    top: 61%;
    left: 26%
}

#page--skytile-ugr .section#design .hotspot.three {
    top: 35%;
    left: 41%
}

#page--skytile-ugr .section#design .hotspot.four {
    top: 42%;
    left: 61%
}

#page--skytile-ugr .section#design .hotspot.five {
    top: 55%;
    left: 92%
}

#page--skytile-ugr .section#ugr-explained {
    background-color: #0c0f1a
}

#page--skytile-ugr .section#ugr-explained .tab-group img {
    max-width: 75%
}

#page--skytile-ugr .section#ugr-explained .tab-group .tab-group__item__button {
    color: #b0b7bc
}

#page--skytile-ugr .section#ugr-explained .tab-group .tab-group__item__button:focus, #page--skytile-ugr .section#ugr-explained .tab-group .tab-group__item__button:hover {
    color: #9ea5a9
}

#page--skytile-ugr .section#ugr-explained .tab-group .tab-group__item__button.is-active {
    color: #76b900
}

#page--skytile-ugr .section#ugr-explained .tab-group .tab-group__item__button.is-active:focus, #page--skytile-ugr .section#ugr-explained .tab-group .tab-group__item__button.is-active:hover {
    color: #6aa700
}

#page--skytile-ugr .section#ugr-explained .tab-group__item.one .hotspot.one {
    top: 20%;
    left: 46%
}

#page--skytile-ugr .section#ugr-explained .tab-group__item.one .hotspot.two {
    top: 40%;
    left: 29.2%
}

#page--skytile-ugr .section#ugr-explained .tab-group__item.one .hotspot.three {
    top: 43%;
    left: 51%
}

#page--skytile-ugr .section#ugr-explained .tab-group__item.two .hotspot.one {
    top: 23%;
    left: 43%
}

#page--skytile-ugr .section#ugr-explained .tab-group__item.two .hotspot.two {
    top: 40%;
    left: 29.2%
}

#page--skytile-ugr .section#ugr-explained .tab-group__item.two .hotspot.three {
    top: 60%;
    left: 53%
}

#page--skytile-ugr .section#compliance {
    background: transparent url(../images/office-environment.jpg) no-repeat 50%;
    background-size: cover
}

#page--skytile-ugr .section#compliance .intro {
    padding-bottom: 0
}

#page--skytile-ugr .section#skytile-features .feature-boxes__box {
    background: #f7f8f8
}

#page--skytile-ugr .section#skytile-features .feature-boxes__box .caption, #page--skytile-ugr .section#skytile-features .feature-boxes__box .tab-group__item__button {
    margin-bottom: 20px
}

#page--skytile-ugr .section#skytile-features .feature-boxes__box img {
    margin-top: 10px
}

#page--skytile-ugr .section#warranty {
    background: transparent url(../images/warranty-background.jpg) no-repeat 50%;
    background-size: cover
}

#page--skytile-ugr .section#warranty img {
    display: block;
    margin: 75px auto 0;
    width: 300px
}

@media only screen and (min-width: 1025px) {
    #page--skytile-ugr .section#warranty img {
        margin-top: 0
    }
}

#page--skytile-ugr .section#warranty .section__content p.subtitle {
    margin-bottom: 40px
}

#page--skytile-ugr .section#warranty .section__content p.subtitle:before {
    display: none
}

@media only screen and (min-width: 1025px) {
    #page--skytile-ugr .section#warranty img {
        width: auto
    }

    #page--skytile-ugr .section#warranty .section__content .subtitle, #page--skytile-ugr .section#warranty .section__content h2 {
        margin-left: 60px;
        margin-right: 60px
    }

    #page--skytile-ugr .section#warranty .section__content .button {
        margin-left: 0;
        margin-right: 0
    }
}

#page--skytile-sense .hero-image {
    background-image: url(../images/skytile-sense-banner-image.jpg);
    background-size: cover;
    background-position: right -100px
}

@media only screen and (min-width: 768px) {
    #page--skytile-sense .hero .intro img {
        width: 500px
    }
}

@media only screen and (min-width: 1025px) {
    #page--skytile-sense .hero .intro img {
        width: 700px
    }
}

@media only screen and (min-width: 1480px) {
    #page--skytile-sense .hero .intro img {
        width: 900px
    }
}

#page--skytile-sense .section#integratedsensor {
    padding-bottom: 0
}

#page--skytile-sense .section#integratedsensor .hotspot.one {
    top: 20%;
    left: 50%
}

#page--skytile-sense .section#integratedsensor .hotspot.two {
    top: 45%;
    left: 55%
}

#page--skytile-sense .section#integratedsensor .hotspot.three {
    top: 70%;
    left: 40%
}

#page--skytile-sense .section#integratedsensor .hotspot.four {
    top: 55%;
    left: 80%
}

#page--skytile-sense .section#dip-switch {
    position: relative
}

#page--skytile-sense .section#dip-switch .section__content {
    z-index: 10
}

#page--skytile-sense .section#dip-switch .section__content h2, #page--skytile-sense .section#dip-switch .section__content p {
    max-width: 600px;
    margin-left: 0;
    margin-right: 0
}

#page--skytile-sense .section#dip-switch .section__content p.subtitle {
    text-align: left;
    display: block
}

#page--skytile-sense .section#dip-switch .section__content p.subtitle:after, #page--skytile-sense .section#dip-switch .section__content p.subtitle:before {
    display: none
}

#page--skytile-sense .section#dip-switch .section__content ul.icon-list > li:before {
    background-image: url(../images/arrow-right-icon-green.png)
}

#page--skytile-sense .section#dip-switch .section__content img.dip-switch {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    max-width: 49%
}

@media only screen and (max-width: 1480px) {
    #page--skytile-sense .section#dip-switch .section__content img.dip-switch {
        max-width: 40%
    }
}

@media only screen and (max-width: 768px) {
    #page--skytile-sense .section#dip-switch .section__content img.dip-switch {
        position: static;
        max-width: 100%;
        margin-top: 60px
    }
}

#page--skytile-sense .section#dip-switch .section__content .accordion {
    margin: 55px 0 75px
}

#page--skytile-sense .section#dip-switch .section__content .accordion .accordion__content p {
    line-height: 36px
}

#page--skytile-sense .section#dip-switch .section__content .accordion .accordion__content img {
    display: inline-block;
    margin-right: 15px;
    float: left
}

#page--skytile-sense .section#dip-switch .section__content .accordion .accordion__content img.dip-1 {
    width: 18.5px
}

#page--skytile-sense .section#dip-switch .section__content .accordion .accordion__content img.dip-2 {
    width: 42px
}

#page--skytile-sense .section#dip-switch .section__content .accordion .accordion__content img.dip-3 {
    width: 65.5px
}

#page--skytile-sense .section#energysaving {
    text-align: center
}

#page--skytile-sense .section#energysaving .feature-callout, #page--skytile-sense .section#energysaving .feature-callout b {
    color: #76b900;
    border-color: #76b900
}

@media only screen and (max-width: 768px) {
    #page--skytile-sense .section#energysaving .feature-callout:first-of-type {
        margin-top: 75px
    }

    #page--skytile-sense .section#energysaving .feature-callout:last-of-type {
        margin-bottom: 25px
    }
}

#page--skytile-sense .section#warranty {
    background: transparent url(../images/skytile-sense-office-blurred.jpg) no-repeat 50%;
    background-size: cover
}

#page--skytile-sense .section#warranty .section__content p.subtitle {
    margin-bottom: 40px
}

#page--skytile-sense .section#warranty .section__content h2, #page--skytile-sense .section#warranty .section__content p {
    max-width: 600px;
    margin-left: 0;
    margin-right: 0
}

#page--skytile-sense .section#warranty .section__content p.subtitle {
    text-align: left;
    display: block
}

#page--skytile-sense .section#warranty .section__content p.subtitle:after, #page--skytile-sense .section#warranty .section__content p.subtitle:before {
    display: none
}

#page--skytile-sense .section#warranty .section__content .button {
    margin-left: 0;
    margin-right: 0
}

#page--skytile-sense .section#warranty .section__content img {
    margin-top: 40px
}

@media only screen and (max-width: 768px) {
    #page--skytile-sense .section#warranty .section__content img {
        max-width: 200px
    }
}

#page--skytile-sense .section#microwave-detection .block-list li {
    color: #b0b7bc
}

@media only screen and (min-width: 1025px) {
    #page--skytile-sense .section#microwave-detection #presence-detection-graphic img {
        max-width: 75%
    }
}

#page--skytile-sense .section#microwave-detection .hotspot.one {
    top: 20%;
    left: 50%
}

#page--skytile-sense .section#microwave-detection .hotspot.two {
    top: 70%;
    left: 40%
}

#page--skytile-sense .section#microwave-detection .hotspot.three {
    top: 45%;
    left: 55%
}

#page--skytile-sense .section#microwave-detection .hotspot.four {
    top: 55%;
    left: 80%
}

#page--skytile-sense .section#banks {
    background-color: #121212
}

#page--skytile-sense .section#banks .section__content h2, #page--skytile-sense .section#banks .section__content p {
    max-width: 600px;
    margin-left: 0;
    margin-right: 0
}

#page--skytile-sense .section#banks .section__content p.subtitle {
    text-align: left;
    display: block
}

#page--skytile-sense .section#banks .section__content p.subtitle:after, #page--skytile-sense .section#banks .section__content p.subtitle:before {
    display: none
}

@media only screen and (min-width: 768px) {
    #page--skytile-sense .section#banks {
        overflow: hidden
    }

    #page--skytile-sense .section#banks .section__content .grid-col-2 {
        position: relative
    }

    #page--skytile-sense .section#banks .section__content img {
        max-width: 200%
    }

    #page--skytile-sense .section#banks .section__content :last-child {
        margin-bottom: 0
    }
}

@media only screen and (min-width: 1100px) {
    #page--skytile-sense .section#banks .section__content img {
        max-width: 180%;
        position: absolute;
        top: 0;
        left: 30px
    }
}

@media only screen and (min-width: 1480px) {
    #page--skytile-sense .section#banks .section__content img {
        max-width: 200%;
        top: -75px;
        left: 30px
    }
}

#page--skytile-sense .section#variable-detection .hotspot.one {
    top: 13%;
    left: 51%
}

#page--skytile-sense .section#variable-detection .hotspot.two {
    top: 60%;
    left: 49%
}

#page--skytile-sense .section#variable-detection .hotspot.three {
    top: 62%;
    left: 67%
}

#page--skytile-sense .section#variable-detection .hotspot.four {
    top: 74%;
    left: 15%
}

#page--skytile-sense .section#daylight-harvesting .block-list li {
    color: #414042
}

@media only screen and (min-width: 1025px) {
    #page--skytile-sense .section#daylight-harvesting #daylight-harvesting-graphic img {
        max-width: 75%
    }
}

#page--skytile-sense .section#daylight-harvesting .hotspot.one {
    top: 20%;
    left: 50%
}

#page--skytile-sense .section#daylight-harvesting .hotspot.two {
    top: 70%;
    left: 40%
}

#page--skytile-sense .section#daylight-harvesting .hotspot.three {
    top: 45%;
    left: 55%
}

#page--skytile-sense .section#daylight-harvesting .hotspot.four {
    top: 55%;
    left: 80%
}

#page--skytile-surface .hero-image {
    background-image: url(../images/skytile-surface-banner-image.jpg);
    background-position: center 45%
}

#page--skytile-surface .hero .intro img {
    width: 900px
}

#page--skytile-surface .section#overview .image-divider img {
    position: relative;
    top: 13px
}

#page--skytile-surface .section#design {
    padding-bottom: 0
}

#page--skytile-surface .section#design .hotspots img {
    margin-top: 0;
    padding-right: 30px
}

@media only screen and (min-width: 768px) {
    #page--skytile-surface .section#design .hotspots img {
        padding-right: 120px
    }
}

#page--skytile-surface .section#design .hotspot.one {
    top: 75%;
    left: 25%
}

#page--skytile-surface .section#design .hotspot.two {
    top: 67%;
    left: 43%
}

#page--skytile-surface .section#design .hotspot.three {
    top: 71%;
    left: 54%
}

#page--skytile-surface .section#design .hotspot.four {
    top: 71%;
    left: 73.6%
}

#page--skytile-surface .section#design .hotspot.five {
    top: 65.7%;
    left: 82.4%
}

@media only screen and (min-width: 1025px) {
    #page--skytile-surface .section#installation .step-list .step:first-of-type, #page--skytile-surface .section#installation .step-list .step:nth-of-type(2) {
        margin-bottom: 50px
    }
}

#page--skytile-surface .section#sensing .feature-callout {
    color: #808285
}

#page--skytile-surface .section#sensing .feature-callout > b {
    color: #001d68
}

#page--skytile-surface .section#sensing .offset-image img {
    top: -430px;
    left: -96px
}

#page--fgled3 .hero-image {
    background-image: url(../images/fgled3-banner-image.jpg);
    background-position: center 60%
}

#page--fgled3 .hero .intro img {
    width: 600px
}

#page--fgled3 .section#features {
    padding-bottom: 0;
    text-align: center
}

#page--fgled3 .section#features img {
    position: relative;
    left: -27px;
    margin-top: -15px;
    margin-bottom: 0
}

#page--fgled3 .section#dimmable {
    background: transparent url(../images/texture-background.jpg) no-repeat 50%;
    background-size: cover;
    text-align: center
}

#page--fgled3 .section#dimmable img {
    width: 440px;
    margin: 0 auto;
    position: relative;
    left: -22px
}

@media only screen and (max-width: 768px) {
    #page--fgled3 .section#dimmable img {
        width: 220px;
        left: -11px
    }
}

#page--fgled3 .section#fire-rated {
    background: transparent url(../images/fire-rated-background.jpg) no-repeat 50%;
    background-size: cover
}

#page--fgled3 .section#energysaving, #page--fgled3 .section#energysaving .halogen-comparison .grid-row, #page--fgled3 .section#fire-rated .grid-row {
    text-align: center
}

#page--fgled3 .section#energysaving .halogen-comparison .grid-col-2 + .grid-col-2 {
    margin-top: 50px
}

#page--fgled3 .section#energysaving .halogen-comparison .image-divider {
    display: none
}

#page--fgled3 .section#energysaving .halogen-comparison .image-divider + p {
    margin-bottom: 75px
}

#page--fgled3 .section#energysaving .halogen-comparison .large-icon {
    margin: 0 auto 30px
}

@media only screen and (min-width: 768px) {
    @supports (display:-moz-flex) or (display:flex) {
        #page--fgled3 .section#energysaving .halogen-comparison .image-divider {
            display: -ms-flexbox;
            display: flex
        }
    }#page--fgled3 .section#energysaving .halogen-comparison .grid-col-2 {
    padding-top: 25px;
    padding-bottom: 25px;
    position: relative
}

    #page--fgled3 .section#energysaving .halogen-comparison .grid-col-2 + .grid-col-2 {
        margin-top: 0
    }

    #page--fgled3 .section#energysaving .halogen-comparison .grid-col-2:first-of-type:after {
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        right: -30px;
        border-right: 1px solid hsla(216, 2%, 51%, .5)
    }
}

#page--fgled3 .section#energysaving .feature-callout, #page--fgled3 .section#energysaving .feature-callout b {
    color: #76b900;
    border-color: #76b900
}

@media only screen and (max-width: 768px) {
    #page--fgled3 .section#energysaving .feature-callout:first-of-type {
        margin-top: 75px
    }

    #page--fgled3 .section#energysaving .feature-callout:last-of-type {
        margin-bottom: 25px
    }
}

#page--fgled3 .section#reliability .grid-row {
    text-align: center
}

#page--fgled3 .section#reliability img {
    margin-top: 0;
    width: 351px
}

@media only screen and (max-width: 768px) {
    #page--fgled3 .section#reliability img {
        margin-bottom: 50px
    }
}

#page--fgled3 .section#reliability ul {
    text-align: left;
    display: inline-block;
    margin: 0 auto
}

#page--fgled3 .section#reliability p.beta {
    margin-bottom: 10px
}

#page--fgled3 .section#reliability p.feature-callout, #page--fgled3 .section#reliability p.gamma {
    margin-bottom: 75px
}

#page--fgled3 .section#design {
    background-color: #d8d8d8
}

#page--fgled3 .section#design .intro {
    margin-bottom: 100px
}

@media only screen and (max-width: 768px) {
    #page--fgled3 .section#design .intro {
        margin-bottom: 75px
    }
}

#page--fgled3 .section#design .hotspot.one {
    top: 54%;
    left: 28.2%
}

#page--fgled3 .section#design .hotspot.two {
    top: 44%;
    left: 38%
}

#page--fgled3 .section#design .hotspot.three {
    top: 20%;
    left: 62%
}

#page--fgled3 .section#design .hotspot.four {
    top: 64%;
    left: 56.2%
}

#page--fgled3 .section#innovation {
    background: transparent url(../images/innovation-background.jpg) no-repeat 50%;
    background-size: cover;
    background-position: 50%
}

#page--fgled3 .section#innovation .hotspots {
    max-width: 511px;
    margin: 0 auto 100px
}

#page--fgled3 .section#innovation .hotspots img {
    margin: 0
}

#page--fgled3 .section#innovation .hotspot.one {
    top: 32%;
    left: 29%
}

#page--fgled3 .section#innovation .hotspot.two {
    top: 20%;
    left: 48%
}

#page--fgled3 .section#innovation .hotspot.three {
    top: 12%;
    left: 60%
}

#page--fgled3 .section#innovation .hotspot.four {
    top: 7.5%;
    left: 32.5%
}

#page--fgled3 .section#innovation .hotspots + .intro {
    padding-bottom: 0
}

#page--fgled3 .section#innovation .hotspots + .intro :last-child {
    margin-bottom: 0
}

#page--fgled3 .section#finishes {
    background: transparent url(../images/texture-background.jpg) no-repeat 50%;
    background-size: cover;
    padding-bottom: 0;
    text-align: center
}

#page--fgled3 .section#finishes .mini-image-list + img {
    width: 545px;
    margin: 0;
    position: relative;
    right: 32px
}

@media only screen and (max-width: 480px) {
    #page--fgled3 .section#finishes .mini-image-list + img {
        right: 36px
    }
}

#page--fgled6 .hero-image {
    background-image: url(../images/fgled6-banner-image1.jpg);
    background-position: center 63%
}

#page--fgled6 .hero .intro img {
    width: 600px
}

#page--fgled6 .section#fire-safety .grid-row {
    text-align: center
}

@media only screen and (min-width: 768px) {
    #page--fgled6 .section#fire-safety .intro {
        margin-bottom: 50px
    }
}

#page--fgled6 .section#fire-safety #fire-safety-diagram {
    position: relative
}

#page--fgled6 .section#fire-safety #fire-safety-diagram img {
    margin-top: 0;
    margin-bottom: 25px
}

#page--fgled6 .section#fire-safety #fire-safety-diagram .hotspots {
    max-width: 400px
}

#page--fgled6 .section#fire-safety #fire-safety-diagram .hotspots.first .hotspot.one {
    top: 24.5%;
    left: 50%
}

#page--fgled6 .section#fire-safety #fire-safety-diagram .hotspots.last .hotspot.one {
    top: 24.5%;
    left: 60%
}

#page--fgled6 .section#fire-safety #fire-safety-diagram .hotspots.last .hotspot.two {
    top: 70%;
    left: 11%
}

#page--fgled6 .section#installation .button-group {
    text-align: center
}

@media only screen and (min-width: 768px) {
    #page--fgled6 .section#installation #ceiling-entry {
        margin-top: 150px;
        text-align: right
    }
}

#page--fgled6 .section#installation #ceiling-entry .intro {
    margin-bottom: 0
}

#page--fgled6 .section#installation #ceiling-entry img {
    margin: 0;
    max-width: 600px;
    left: 60px;
    top: 50px
}

@media only screen and (max-width: 1100px) {
    #page--fgled6 .section#installation #ceiling-entry img {
        max-width: 500px
    }
}

@media only screen and (max-width: 768px) {
    #page--fgled6 .section#installation #ceiling-entry img {
        margin-bottom: 75px;
        width: 400px;
        max-width: 100%;
        display: block;
        margin: 0 auto 50px
    }
}

#page--fgled6 .section#installation #ceiling-entry h2:before {
    content: "";
    display: block;
    width: 200px;
    height: 1px;
    margin-bottom: 75px;
    background: #c0c1c2
}

@media only screen and (max-width: 768px) {
    #page--fgled6 .section#installation #ceiling-entry h2:before {
        margin-left: auto;
        margin-right: auto
    }
}

#page--fgled6 #fgled6-dimmerlist img {
    max-width: 360px;
    margin-top: 0 !important;
    margin-bottom: 50px !important;
    display: block
}

#page--fgled6 .section#fire-rated {
    background: transparent url(../images/fire-rated-background.jpg) no-repeat 50%;
    background-size: cover
}

#page--fgled6 .section#fire-rated .grid-row {
    text-align: center
}

#page--fgled6 .section#design .hotspots img {
    margin-top: 0;
    margin-bottom: 0
}

#page--fgled6 .section#design .hotspot.one {
    top: 75%;
    left: 13%
}

#page--fgled6 .section#design .hotspot.two {
    top: 52%;
    left: 27.2%
}

#page--fgled6 .section#design .hotspot.three {
    top: 49%;
    left: 34%
}

#page--fgled6 .section#design .hotspot.four {
    top: 38%;
    left: 46%
}

#page--fgled6 .section#design .hotspot.five {
    top: 39%;
    left: 59%
}

#page--fgled6 .section#design .hotspot.six {
    top: 40%;
    left: 72%
}

#page--fgled6 .section#design .hotspot.seven {
    top: 56%;
    left: 69%
}

#page--fgled6 .section#design #driver-comparison img {
    margin-top: 0;
    margin-bottom: 50px
}

#page--fgled6 .section#design #driver-comparison p:last-child {
    margin-bottom: 0
}

#page--fgled6 .section#thermal-management {
    background: #dbdbdb;
    padding-bottom: 0
}

#page--fgled6 .section#thermal-management .hotspot.one {
    top: 56%;
    left: 45%
}

#page--fgled6 .section#thermal-management .hotspot.two {
    top: 44%;
    left: 46.5%
}

#page--fgled6 .section#thermal-management .hotspot.three {
    top: 32%;
    left: 52%
}

#page--fgled6 .section#thermal-management .hotspot.four {
    top: 25%;
    left: 55%
}

#page--fgled6 .section#thermal-management img {
    margin-bottom: 0
}

@media only screen and (max-width: 1025px) {
    #page--fgled6 .section#thermal-management .hotspots img {
        margin-top: 0;
        width: 200%;
        position: relative;
        right: 50%;
        max-width: none
    }
}

#page--fgled6 .section#lens {
    background: #b9bbbe
}

#page--fgled6 .section#lens img {
    position: relative;
    width: 700px
}

@media only screen and (max-width: 1025px) {
    #page--fgled6 .section#lens img {
        margin: 0;
        position: relative;
        left: 5%
    }
}

#page--fgled6 .section#lens .grid-row, #page--fgled6 .section#lens .grid-row :last-child, #page--fgled6 .section#lens .intro, #page--fgled6 .section#lens .intro :last-child {
    margin-bottom: 0
}

#page--fgled10 .hero-image {
    background-image: url(../images/fgled10-banner-image1.jpg);
    background-position: center 96%
}

#page--fgled10 .hero .intro img {
    width: 600px
}

#page--fgled10 .section#comparison img {
    margin-top: 100px
}

#page--fgled10 .section#design {
    text-align: center
}

#page--fgled10 .section#design .hotspots img {
    width: 620px;
    margin-top: 0;
    margin-bottom: 0
}

#page--fgled10 .section#design .hotspot.one {
    top: 85%;
    left: 60%
}

#page--fgled10 .section#design .hotspot.two {
    top: 70%;
    left: 56%
}

#page--fgled10 .section#design .hotspot.three {
    top: 62%;
    left: 52%
}

#page--fgled10 .section#design .hotspot.four {
    top: 54%;
    left: 58%
}

#page--fgled10 .section#design .hotspot.five {
    top: 42%;
    left: 48%
}

#page--fgled10 .section#design .hotspot.six {
    top: 33%;
    left: 68%
}

#page--fgled10 .section#design .hotspot.seven {
    top: 32%;
    left: 49%
}

#page--fgled10 .section#design .hotspot.eight {
    top: 7%;
    left: 52%
}

#page--fgled10 #fgled10-dimmerlist img {
    max-width: 360px;
    margin-top: 0 !important;
    margin-bottom: 50px !important;
    display: block
}

#page--fgled10 .section#cleaner-ceilings {
    text-align: center
}

@media only screen and (min-width: 768px) {
    #page--fgled10 .section#cleaner-ceilings > img {
        margin-bottom: -50px;
        margin-left: -100px;
        margin-right: -100px
    }
}

#page--fgled10 .section#cleaner-ceilings .feature-callout-container {
    position: relative;
    display: inline-block;
    margin-bottom: 50px
}

#page--fgled10 .section#cleaner-ceilings .feature-callout-container .feature-callout {
    width: 250px;
    float: none;
    display: inline-block;
    margin: 0;
    color: #76b900;
    border-color: #76b900
}

#page--fgled10 .section#cleaner-ceilings .feature-callout-container .feature-callout b {
    color: #76b900
}

#page--fgled10 .section#cleaner-ceilings .feature-callout-container .feature-callout:first-of-type {
    margin-bottom: 100px
}

@media only screen and (min-width: 768px) {
    #page--fgled10 .section#cleaner-ceilings .feature-callout-container .feature-callout:first-of-type {
        margin-bottom: 0;
        margin-right: 50px
    }

    #page--fgled10 .section#cleaner-ceilings .feature-callout-container .feature-callout:last-of-type {
        margin-left: 50px
    }
}

#page--fgled10 .section#cleaner-ceilings .feature-callout-container .feature-callout__plus {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    width: 100px;
    overflow: visible;
    margin: auto;
    line-height: 1
}

#page--fgled10 .section#cleaner-ceilings .feature-callout-container .feature-callout__plus:after {
    display: none !important
}

#page--fgled10 .section#fire-rated {
    background: transparent url(../images/fire-rated-background.jpg) no-repeat 50%;
    background-size: cover
}

#page--fgled10 .section#fire-rated .grid-row {
    text-align: center
}

#page--fgled10 .section#composite-lenses {
    padding-bottom: 0;
    text-align: center
}

#page--fgled10 .section#composite-lenses img {
    width: 800px
}

#page--fgled10 .section#installation .button-group {
    text-align: center
}

@media only screen and (min-width: 768px) {
    #page--fgled10 .section#installation #ceiling-entry {
        margin-top: 150px;
        text-align: right
    }
}

#page--fgled10 .section#installation #ceiling-entry .intro {
    margin-bottom: 0
}

#page--fgled10 .section#installation #ceiling-entry img {
    margin: 0;
    max-width: 600px;
    right: 0;
    top: 0
}

@media only screen and (max-width: 1100px) {
    #page--fgled10 .section#installation #ceiling-entry img {
        max-width: 500px
    }
}

@media only screen and (max-width: 768px) {
    #page--fgled10 .section#installation #ceiling-entry img {
        margin-bottom: 75px;
        width: 400px;
        max-width: 100%;
        display: block;
        margin: 0 auto 50px
    }
}

#page--fgled10 .section#installation #ceiling-entry h2:before {
    content: "";
    display: block;
    width: 200px;
    height: 1px;
    margin-bottom: 75px;
    background: #c0c1c2
}

@media only screen and (max-width: 768px) {
    #page--fgled10 .section#installation #ceiling-entry h2:before {
        margin-left: auto;
        margin-right: auto
    }
}

#page--fgled10 .section#dimmable {
    background: transparent url(../images/texture-background.jpg) no-repeat 50%;
    background-size: cover;
    text-align: center
}

#page--fgled10 .section#dimmable img {
    width: 440px;
    margin: 0 auto;
    position: relative;
    left: -22px
}

@media only screen and (max-width: 768px) {
    #page--fgled10 .section#dimmable img {
        width: 220px;
        left: -11px
    }
}

#page--fgled10 .section#thermal-management {
    background-color: #b5b5b5;
    padding-bottom: 0;
    text-align: center
}

#page--fgled10 .section#thermal-management .intro, #page--fgled10 .section#thermal-management .intro p.lead {
    margin-bottom: 0
}

#page--fgled10 .section#thermal-management .hotspot.one {
    top: 53%;
    left: 49%
}

#page--fgled10 .section#thermal-management .hotspot.two {
    top: 30%;
    left: 42.5%
}

#page--fgled10 .section#thermal-management .hotspot.three {
    top: 54%;
    left: 37.3%
}

#page--fgled10 .section#thermal-management .hotspot.four {
    top: 34%;
    left: 36%
}

#page--fgled10 .section#thermal-management img {
    margin-bottom: 0;
    width: 100%
}

#page--fgled10 .section#bezel-options .color-square {
    width: 500px;
    height: 500px;
    max-width: 100%;
    margin: 0 auto;
    background-size: cover;
    position: relative
}

@media only screen and (min-width: 768px) {
    #page--fgled10 .section#bezel-options .color-square {
        width: 200px;
        height: 200px
    }
}

@media only screen and (min-width: 1025px) {
    #page--fgled10 .section#bezel-options .color-square {
        width: 300px;
        height: 250px
    }
}

@media only screen and (min-width: 1480px) {
    #page--fgled10 .section#bezel-options .color-square {
        width: 350px;
        height: 300px
    }
}

#page--fgled10 .section#bezel-options .color-square .color-square__content {
    position: absolute;
    bottom: 25px;
    left: 25px
}

#page--fgled10 .section#bezel-options .color-square .h2, #page--fgled10 .section#bezel-options .color-square p {
    margin: 0;
    color: #fff;
    line-height: 1
}

#page--fgled10 .section#bezel-options .color-square--chrome {
    background-image: url(../images/fgled10-bezel-chrome.jpg);
    background-position: 50%
}

#page--fgled10 .section#bezel-options .color-square--brushed-nickel {
    background-image: url(../images/fgled10-bezel-brushed-nickel.jpg);
    background-position: 50%
}

#page--fgled10 .section#bezel-options .color-square--white {
    background-image: url(../images/fgled10-bezel-white.jpg);
    background-position: 50%
}

#page--fgled10 .section#bezel-options .color-square--white .h2, #page--fgled10 .section#bezel-options .color-square--white p {
    color: #808285
}

#page--radialed .hero-image {
    background-image: url(../images/radialed-banner-image.jpg);
    background-position: center 65%
}

#page--radialed .hero .intro img {
    width: 950px
}

#page--radialed .section#overview .image-divider img {
    height: 117px
}

#page--radialed .section#design {
    padding-bottom: 0;
    text-align: center
}

#page--radialed .section#design .hotspots {
    margin: 0 auto 100px
}

#page--radialed .section#design .hotspots img {
    width: 750px
}

#page--radialed .section#design .hotspots .hotspot.one {
    top: 86%;
    left: 28.2%
}

#page--radialed .section#design .hotspots .hotspot.two {
    top: 66%;
    left: 53%
}

#page--radialed .section#design .hotspots .hotspot.three {
    top: 46%;
    left: 75%
}

#page--radialed .section#design .hotspots .hotspot.four {
    top: 27%;
    left: 56.2%
}

#page--radialed .section#design img {
    margin: 0
}

#page--radialed .section#light-distribution {
    background-image: url(../images/light-distribution-bkg.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    text-align: center
}

@media only screen and (max-width: 768px) {
    #page--radialed .section#light-distribution {
        padding-bottom: 150px
    }
}

#page--radialed .section#light-distribution .caption + img, #page--radialed .section#light-distribution .tab-group__item__button + img {
    margin-top: 10px;
    width: 340px
}

@media only screen and (max-width: 768px) {
    #page--radialed .section#light-distribution .caption + img, #page--radialed .section#light-distribution .tab-group__item__button + img {
        margin-bottom: 0
    }
}

#page--radialed .section#emergency-unit {
    text-align: center
}

#page--radialed .section#emergency-unit .caption + img, #page--radialed .section#emergency-unit .tab-group__item__button + img {
    width: 374px;
    margin-bottom: 0
}

@media only screen and (max-width: 768px) {
    #page--radialed .section#emergency-unit .grid-col-3 + .grid-col-3 .caption, #page--radialed .section#emergency-unit .grid-col-3 + .grid-col-3 .tab-group__item__button {
        margin-top: 50px
    }
}

#page--radialed .section#emergency-unit .feature-callout-container {
    max-width: 300px;
    margin: 30px auto 0
}

#page--radialed .section#emergency-unit .feature-callout {
    text-align: center
}

#page--radialed .section#emergency-unit .feature-callout > b {
    color: #001d68
}

#page--radialed .section#performance h2.h3 + .subtitle {
    display: block;
    text-align: left
}

#page--radialed .section#performance h2.h3 + .subtitle:after, #page--radialed .section#performance h2.h3 + .subtitle:before {
    display: none
}

#page--radialed .section#performance img {
    margin-bottom: 0
}

@media only screen and (max-width: 768px) {
    #page--radialed .section#performance .grid-row {
        text-align: center
    }

    #page--radialed .section#performance .grid-row .subtitle {
        text-align: center !important
    }
}

#page--radialed .section#lifespan {
    text-align: center
}

#page--radialed .section#lifespan .feature-callout {
    text-align: center;
    margin: 0 auto
}

#page--radialed .section#lifespan img {
    margin-bottom: 50px
}

#page--v50 .hero-image {
    background-image: url(../images/v50-banner-img.jpg);
    background-position: center 18%
}

#page--v50 .section#overview .intro img {
    width: 600px;
    margin-top: 20px;
    margin-bottom: -40px;
    margin-right: -18%
}

@media only screen and (min-width: 1025px) {
    #page--v50 .section#overview .intro img {
        margin-right: -8%
    }
}

#page--v50 .section#colour-temperature .colour-temp-comparison {
    position: relative
}

#page--v50 .section#colour-temperature .colour-temp-comparison img.v50-switch {
    display: block;
    width: 483px;
    margin: 0 auto;
    z-index: 999;
    position: relative
}

@media only screen and (max-width: 768px) {
    #page--v50 .section#colour-temperature .colour-temp-comparison img.v50-switch {
        width: 300px
    }
}

#page--v50 .section#colour-temperature .colour-temp-comparison img.v50-switch + img {
    margin-top: -120px
}

@media only screen and (max-width: 768px) {
    #page--v50 .section#colour-temperature .colour-temp-comparison img.v50-switch + img {
        margin-top: -80px
    }
}

#page--v50 .section#colour-temperature .colour-temp-comparison .caption.warm-white, #page--v50 .section#colour-temperature .colour-temp-comparison .warm-white.tab-group__item__button {
    position: absolute;
    left: 50px;
    bottom: 50px
}

@media only screen and (max-width: 768px) {
    #page--v50 .section#colour-temperature .colour-temp-comparison .caption.warm-white, #page--v50 .section#colour-temperature .colour-temp-comparison .warm-white.tab-group__item__button {
        font-size: 12px;
        padding: 10px;
        left: 20px;
        bottom: 30px
    }
}

#page--v50 .section#colour-temperature .colour-temp-comparison .caption.cool-white, #page--v50 .section#colour-temperature .colour-temp-comparison .cool-white.tab-group__item__button {
    position: absolute;
    right: 50px;
    bottom: 50px
}

@media only screen and (max-width: 768px) {
    #page--v50 .section#colour-temperature .colour-temp-comparison .caption.cool-white, #page--v50 .section#colour-temperature .colour-temp-comparison .cool-white.tab-group__item__button {
        font-size: 12px;
        padding: 10px;
        right: 20px;
        bottom: 30px
    }
}

#page--v50 .section#colour-temperature .colour-temp-comparison p.narrow {
    margin-top: 5px
}

#page--v50 .section#colour-temperature .colour-temp-comparison .colour-temp-comparison__annotation {
    display: block;
    width: 200px;
    position: absolute;
    top: 210px;
    left: 13%
}

@media only screen and (max-width: 1200px) {
    #page--v50 .section#colour-temperature .colour-temp-comparison .colour-temp-comparison__annotation {
        top: 270px
    }
}

@media only screen and (max-width: 768px) {
    #page--v50 .section#colour-temperature .colour-temp-comparison .colour-temp-comparison__annotation {
        display: none
    }
}

@media only screen and (min-width: 1025px) {
    #page--v50 .section#colour-temperature .colour-temp-comparison .colour-temp-comparison__annotation:before {
        content: "";
        display: block;
        width: 60px;
        height: 60px;
        background: url(../images/ip65-icon.png);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 60px;
        position: absolute;
        left: -80px
    }
}

#page--v50 .section#low-profile {
    padding-bottom: 0
}

#page--v50 .section#low-profile .intro {
    padding-bottom: 50px
}

#page--v50 .section#low-profile .hotspots {
    position: relative;
    top: 50px
}

@media only screen and (min-width: 1025px) {
    #page--v50 .section#low-profile .hotspots {
        top: 100px
    }
}

#page--v50 .section#low-profile .hotspots .hotspot.one {
    top: 6%;
    left: 58%
}

#page--v50 .section#low-profile .hotspots .hotspot.two {
    top: 60%;
    left: 78%
}

#page--v50 .section#bezels {
    background-image: url(../images/texture-background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    padding-bottom: 0
}

#page--v50 .section#bezels .intro {
    padding-top: 50px
}

@media only screen and (min-width: 1025px) {
    #page--v50 .section#bezels .intro {
        padding-top: 100px
    }
}

#page--v50 .section#bezels table.bezel-captions {
    width: 1120px;
    max-width: 83vw;
    margin: 0 auto 20px;
    text-align: center
}

#page--v50 .section#bezels table.bezel-captions td {
    width: 20%
}

@media only screen and (max-width: 768px) {
    #page--v50 .section#bezels table.bezel-captions td p.caption, #page--v50 .section#bezels table.bezel-captions td p.tab-group__item__button {
        font-size: 12px;
        line-height: 12.5px
    }
}

#page--v50 .section#bezels > img {
    width: 1200px;
    max-width: 90%;
    display: block;
    margin: 0 auto;
    position: relative;
    right: -15px
}

@media only screen and (max-width: 768px) {
    #page--v50 .section#bezels > img {
        right: -8px
    }
}

#page--v50 .section#fire-rated {
    background: transparent url(../images/fire-rated-background.jpg) no-repeat 50%;
    background-size: cover
}

#page--v50 .section#fire-rated .grid-row {
    text-align: center
}

#page--hybrid9 .hero-image {
    background-image: url(../images/hybrid9-banner-image.jpg);
    background-position: center 65%
}

#page--hybrid9 .section#overview .intro img {
    width: 476px;
    margin-bottom: 0
}

#page--hybrid9 .section#interchangeable .mini-image-list {
    display: inline-block;
    margin: 50px auto 0
}

@media only screen and (min-width: 1100px) {
    #page--hybrid9 .section#interchangeable .mini-image-list + .mini-image-list li:first-child {
        border-left: 1px solid #d8dbde
    }
}

#page--hybrid9 .section#interchangeable .boxed {
    position: relative
}

@media only screen and (min-width: 768px) {
    #page--hybrid9 .section#interchangeable .boxed + .boxed {
        margin-top: 75px
    }

    #page--hybrid9 .section#interchangeable .boxed + .boxed .grid-col-2 img {
        right: 0
    }
}

@media only screen and (min-width: 768px) {
    #page--hybrid9 .section#interchangeable .boxed__2 img {
        width: 33.333%;
        vertical-align: bottom;
        position: absolute;
        bottom: 0;
        right: 0
    }
}

#page--hybrid9 .section#design {
    padding-bottom: 0
}

#page--hybrid9 .section#design .hotspots {
    margin-top: -75px
}

#page--hybrid9 .section#design .hotspots img {
    margin-top: 75px;
    margin-bottom: 0;
    width: 85%;
    float: right
}

#page--hybrid9 .section#design .hotspots .hotspot.one {
    top: 34%;
    left: 30%
}

#page--hybrid9 .section#design .hotspots .hotspot.two {
    top: 40%;
    left: 45%
}

#page--hybrid9 .section#design .hotspots .hotspot.three {
    top: 50%;
    left: 51%
}

#page--hybrid9 .section#design .hotspots .hotspot.four {
    top: 35%;
    left: 50%
}

#page--hybrid9 .section#design .hotspots .hotspot.five {
    top: 14%;
    left: 68%
}

#page--hybrid9 .section#design .hotspots .hotspot.six {
    top: 35%;
    left: 71%
}

#page--hybrid9 .section#design .hotspots .hotspot.seven {
    top: 17%;
    left: 81%
}

#page--hybrid9 .section#design .hotspots .hotspot.eight {
    top: 59%;
    left: 82%
}

#page--hybrid9 .section#design .hotspots .hotspot.nine {
    top: 67%;
    left: 69%
}

#page--hybrid9 .section#thermal-management .offset-image img {
    width: 700px
}

@media only screen and (min-width: 1100px) {
    #page--hybrid9 .section#thermal-management .offset-image img {
        width: 150%;
        top: -60px
    }
}

#page--hybrid9 .section#thermal-management .hotspots .hotspot.one {
    top: 9%;
    left: 58.2%
}

#page--hybrid9 .section#thermal-management .hotspots .hotspot.two {
    top: 43%;
    left: 49%
}

#page--hybrid9 .section#thermal-management .hotspots img {
    margin-top: 0
}

#page--hybrid9 .section#thermal-management #thermal-dissipation:before {
    content: "";
    display: block;
    width: 200px;
    height: 1px;
    margin: 30px auto 100px;
    background: hsla(216, 2%, 51%, .5)
}

#page--hybrid9 .section#performance .intro img {
    width: 658px;
    margin-top: 0
}

#page--hybrid9 .section#performance .grid-col-3 .subtitle {
    text-align: left;
    display: block
}

#page--hybrid9 .section#performance .grid-col-3 .subtitle:after, #page--hybrid9 .section#performance .grid-col-3 .subtitle:before {
    display: none
}

@media only screen and (max-width: 1025px) {
    #page--hybrid9 .section#performance .grid-col-3 img {
        display: block;
        width: 400px;
        margin-left: auto;
        margin-right: auto
    }
}

#page--hybrid9 .section#performance .grid-col-3 .button {
    margin-left: 0;
    margin-right: 0
}

@media only screen and (max-width: 1025px) {
    #page--hybrid9 .section#performance .feature-callout {
        margin-bottom: 50px;
        text-align: center
    }
}

#page--hybrid9 .section#fire-rated {
    background: transparent url(../images/fire-rated-background.jpg) no-repeat 50%;
    background-size: cover;
    text-align: center
}

#page--hybrid9 .section#technology {
    background: #b0adad;
    padding-bottom: 0
}

#page--hybrid9 .section#technology h2 {
    max-width: 900px
}

#page--hybrid9 .section#technology .hotspots img {
    margin-top: 30px;
    margin-bottom: 0
}

#page--hybrid9 .section#technology .hotspots .hotspot.one {
    top: 14%;
    left: 45%
}

#page--hybrid9 .section#technology .hotspots .hotspot.two {
    top: 33%;
    left: 68%
}

#page--hybrid9 .section#installation .step-list {
    margin-bottom: 50px
}

#page--hybrid9 .section#levlink {
    text-align: center
}

#page--hybrid9 .section#levlink img {
    width: 900px;
    margin-top: 0
}

@media only screen and (min-width: 768px) {
    #page--hybrid9 .section#levlink .caption, #page--hybrid9 .section#levlink .tab-group__item__button {
        position: relative;
        top: -50px;
        left: 100px;
        margin-left: auto;
        margin-right: auto
    }
}

#page--hybrid7 .hero-image {
    background-image: url(../images/hybrid7-banner-image.jpg);
    background-position: center 31%
}

#page--hybrid7 .hero .intro img {
    width: 476px
}

@media only screen and (min-width: 768px) {
    #page--hybrid7 .section#overview .ui-list {
        margin-top: -50px
    }
}

#page--hybrid7 .section#interchangeable .mini-image-list > li {
    text-align: center
}

@media only screen and (max-width: 580px) {
    #page--hybrid7 .section#interchangeable .mini-image-list {
        display: inline-block;
        margin: 50px 0 0;
        text-align: left;
        width: 100%
    }

    #page--hybrid7 .section#interchangeable .mini-image-list img {
        width: 50px
    }

    #page--hybrid7 .section#interchangeable .mini-image-list > li {
        width: 100%;
        margin-bottom: 25px
    }
}

@media only screen and (min-width: 581px) and (max-width: 1479px) {
    #page--hybrid7 .section#interchangeable .mini-image-list {
        text-align: left;
        margin-top: 25px
    }

    #page--hybrid7 .section#interchangeable .mini-image-list img {
        width: 75px
    }

    #page--hybrid7 .section#interchangeable .mini-image-list > li {
        width: 150px;
        margin-top: 25px
    }
}

@media only screen and (min-width: 1480px) {
    #page--hybrid7 .section#interchangeable .mini-image-list {
        display: inline-block;
        margin: 50px auto 0
    }

    #page--hybrid7 .section#interchangeable .mini-image-list + .mini-image-list li:first-child {
        border-left: 1px solid #d8dbde
    }
}

#page--hybrid7 .section#interchangeable .boxed {
    position: relative
}

@media only screen and (min-width: 768px) {
    #page--hybrid7 .section#interchangeable .boxed + .boxed {
        margin-top: 75px
    }

    #page--hybrid7 .section#interchangeable .boxed + .boxed .grid-col-2 img {
        right: 0
    }
}

@media only screen and (min-width: 768px) {
    #page--hybrid7 .section#interchangeable .boxed__2 img {
        width: 33.333%;
        vertical-align: bottom;
        position: absolute;
        bottom: 0;
        right: 0
    }
}

#page--hybrid7 .section#design {
    text-align: center;
    padding-bottom: 0
}

#page--hybrid7 .section#design .hotspots img {
    margin: 100px auto 0;
    width: 864px
}

#page--hybrid7 .section#design .hotspots .hotspot.one {
    top: 43%;
    left: 29%
}

#page--hybrid7 .section#design .hotspots .hotspot.two {
    top: 56%;
    left: 33%
}

#page--hybrid7 .section#design .hotspots .hotspot.three {
    top: 44%;
    left: 42%
}

#page--hybrid7 .section#design .hotspots .hotspot.four {
    top: 45%;
    left: 48%
}

#page--hybrid7 .section#design .hotspots .hotspot.five {
    top: 15%;
    left: 57%
}

#page--hybrid7 .section#design .hotspots .hotspot.six {
    top: 42%;
    left: 70%
}

#page--hybrid7 .section#lens {
    background-color: #000
}

@media only screen and (max-width: 1025px) {
    #page--hybrid7 .section#lens {
        text-align: center
    }

    #page--hybrid7 .section#lens .intro, #page--hybrid7 .section#lens p:last-child {
        margin-bottom: 0
    }

    #page--hybrid7 .section#lens .grid-row {
        padding-right: 0
    }

    #page--hybrid7 .section#lens .grid-col-3 {
        width: 100%;
        padding-left: 0
    }
}

@media only screen and (min-width: 1025px) {
    #page--hybrid7 .section#lens {
        background: transparent url(../images/hybrid7-lens-bkg.jpg) no-repeat 50%;
        background-size: cover
    }
}

#page--hybrid7 .section#technology {
    background: #dbddde;
    padding-bottom: 0
}

#page--hybrid7 .section#thermal-management {
    text-align: center;
    overflow: hidden
}

#page--hybrid7 .section#thermal-management .feature-callout {
    text-align: center
}

#page--hybrid7 .section#thermal-management .feature-callout > b {
    color: #001d68
}

#page--hybrid7 .section#thermal-management img {
    position: relative;
    margin-top: 50px;
    margin-bottom: 30px
}

@media only screen and (min-width: 768px) {
    #page--hybrid7 .section#thermal-management img {
        margin-top: 75px
    }
}

#page--hybrid7 .section#thermal-management img#hybrid-7-thermal {
    width: 490px;
    left: 5%
}

#page--hybrid7 .section#thermal-management img#typical-led-lamp {
    width: 60%;
    left: 4%
}

#page--hybrid7 .section#performance .grid-col-3 .subtitle {
    text-align: left;
    display: block
}

#page--hybrid7 .section#performance .grid-col-3 .subtitle:after, #page--hybrid7 .section#performance .grid-col-3 .subtitle:before {
    display: none
}

#page--hybrid7 .section#performance .grid-col-3 .button {
    margin-left: 0;
    margin-right: 0
}

#page--hybrid7 .section#performance .grid-col-3 .feature-callout {
    text-align: left;
    margin-left: 0
}

#page--hybrid7 .section#performance img {
    margin-top: 100px
}

#page--hybrid7 .section#fire-rated {
    background: transparent url(../images/fire-rated-background.jpg) no-repeat 50%;
    background-size: cover;
    text-align: center
}

#page--hybrid7 .section#overbezel {
    text-align: center
}

#page--hybrid7 .section#overbezel .intro + img {
    width: 500px;
    margin-bottom: 100px
}

#page--hybrid7 .section#overbezel .intro + img + .intro h2:before {
    content: "";
    display: block;
    height: 1px;
    width: 300px;
    max-width: 50%;
    margin: 0 auto 75px;
    background-color: #c0c1c2
}

#page--hybrid7 .section#overbezel .intro + img + .intro h2 + .subtitle {
    display: block
}

#page--hybrid7 .section#overbezel .intro + img + .intro h2 + .subtitle:after, #page--hybrid7 .section#overbezel .intro + img + .intro h2 + .subtitle:before {
    display: none
}

#page--hybrid7 .section#overbezel .step-list {
    margin-top: 0
}

#page--hybrid7 .section#levlink {
    padding-bottom: 0
}

#page--hybrid7 .section#levlink .ui-list, #page--hybrid7 .section#levlink .ui-list li {
    border-color: #c0c1c2
}

#page--hybrid7 .section#levlink .hotspots img {
    margin-top: 100px;
    margin-bottom: -200px
}

@media only screen and (max-width: 768px) {
    #page--hybrid7 .section#levlink .hotspots img {
        margin-top: 75px
    }
}

#page--hybrid7 .section#levlink .hotspots .hotspot.one {
    top: 14%;
    left: 45%
}

#page--hybrid7 .section#levlink .hotspots .hotspot.two {
    top: 33%;
    left: 68%
}

#page--hybrid7 .section#first-fix {
    padding-top: 300px
}

#page--hybrid7 .section#first-fix .ui-list {
    font-size: 16px
}

@media only screen and (min-width: 768px) {
    #page--hybrid7 .section#tool-less .step {
        margin-bottom: 0
    }
}

#page--hybrid7 .section#t-splitter {
    text-align: center
}

#page--hybrid7 .section#t-splitter img {
    width: 696px
}

@media only screen and (min-width: 768px) {
    #page--hybrid7 .section#t-splitter img {
        margin-top: -30px
    }
}

#page--levlink .hero-image {
    background-image: url(../images/levlink-banner-image.jpg);
    background-position: 50%;
    background-size: cover;
    position: relative
}

#page--levlink .hero-image .hero-image--title {
    position: absolute;
    top: 21.5%;
    width: 100%;
    text-align: center
}

#page--levlink .hero-image .hero-image--strapline {
    position: absolute;
    bottom: 16.5%;
    width: 100%;
    text-align: center
}

@media only screen and (max-width: 1479px) {
    #page--levlink .hero-image .hero-image--title {
        font-size: 16px;
        line-height: 25px;
        top: 19%
    }

    #page--levlink .hero-image .hero-image--strapline {
        font-size: 30px;
        line-height: 35px;
        bottom: 15%
    }
}

@media only screen and (max-width: 1024px) {
    #page--levlink .hero-image {
        padding-bottom: 50%
    }

    #page--levlink .hero-image .hero-image--title {
        font-size: 14px;
        line-height: 20px;
        top: 23%
    }

    #page--levlink .hero-image .hero-image--strapline {
        font-size: 25px;
        line-height: 30px;
        bottom: 20%
    }
}

@media only screen and (max-width: 767px) {
    #page--levlink .hero-image .hero-image--title {
        font-size: 12px;
        line-height: 15px;
        top: 22%
    }

    #page--levlink .hero-image .hero-image--strapline {
        font-size: 20px;
        line-height: 25px;
        bottom: 18%
    }
}

@media only screen and (max-width: 479px) {
    #page--levlink .hero-image .hero-image--title {
        font-size: 10px;
        letter-spacing: .075em;
        line-height: 15px;
        top: 19.5%
    }

    #page--levlink .hero-image .hero-image--strapline {
        font-size: 18px;
        line-height: 20px;
        bottom: 15%
    }
}

#page--levlink .section#overview .intro img {
    width: 647px;
    margin-bottom: 0
}

#page--levlink .section#overview .image-divider img {
    position: relative;
    top: 13px
}

#page--levlink .section#standard-connector .intro + img, #page--levlink .section#switched-live-connector .intro + img {
    width: 647px;
    display: block;
    margin: -40px auto 50px
}

#page--levlink .section#standard-connector .levlink-comparison h2, #page--levlink .section#switched-live-connector .levlink-comparison h2 {
    margin-top: 75px
}

#page--levlink .section#standard-connector .levlink-comparison .subtitle:after, #page--levlink .section#standard-connector .levlink-comparison .subtitle:before, #page--levlink .section#switched-live-connector .levlink-comparison .subtitle:after, #page--levlink .section#switched-live-connector .levlink-comparison .subtitle:before {
    display: none
}

#page--levlink .section#standard-connector .levlink-comparison .feature-callout, #page--levlink .section#switched-live-connector .levlink-comparison .feature-callout {
    text-align: right;
    max-width: 500px !important;
    margin: 50px auto;
    padding: 0;
    position: relative;
    border: 1px solid #d8dbde !important
}

#page--levlink .section#standard-connector .levlink-comparison .feature-callout img, #page--levlink .section#switched-live-connector .levlink-comparison .feature-callout img {
    margin: 0
}

#page--levlink .section#standard-connector .levlink-comparison .feature-callout__text, #page--levlink .section#switched-live-connector .levlink-comparison .feature-callout__text {
    position: absolute;
    bottom: 30px;
    right: 30px
}

#page--levlink .section#standard-connector .levlink-comparison .feature-callout__text b, #page--levlink .section#switched-live-connector .levlink-comparison .feature-callout__text b {
    line-height: .2;
    font-size: 60px
}

@media only screen and (max-width: 1024px) {
    #page--levlink .section#standard-connector .levlink-comparison .feature-callout__text, #page--levlink .section#switched-live-connector .levlink-comparison .feature-callout__text {
        line-height: 20px;
        bottom: 15px;
        right: 15px
    }

    #page--levlink .section#standard-connector .levlink-comparison .feature-callout__text b, #page--levlink .section#switched-live-connector .levlink-comparison .feature-callout__text b {
        font-size: 40px
    }
}

#page--levlink .section#standard-connector .levlink-comparison .feature-callout + h4, #page--levlink .section#switched-live-connector .levlink-comparison .feature-callout + h4 {
    margin-top: 50px;
    margin-bottom: 30px
}

@media only screen and (max-width: 1025px) {
    #page--levlink .section#standard-connector .levlink-comparison .feature-callout + h4, #page--levlink .section#switched-live-connector .levlink-comparison .feature-callout + h4 {
        text-align: center;
        margin-bottom: 0
    }
}

#page--levlink .section#standard-connector .levlink-comparison ul, #page--levlink .section#switched-live-connector .levlink-comparison ul {
    color: #b0b7bc !important
}

@media only screen and (max-width: 1025px) {
    #page--levlink .section#standard-connector .levlink-comparison ul, #page--levlink .section#switched-live-connector .levlink-comparison ul {
        white-space: pre-line;
        text-align: center
    }

    #page--levlink .section#standard-connector .levlink-comparison ul li, #page--levlink .section#switched-live-connector .levlink-comparison ul li {
        display: inline-block
    }
}

@media only screen and (max-width: 767px) {
    #page--levlink .section#standard-connector .levlink-comparison .grid-col-3:first-of-type, #page--levlink .section#switched-live-connector .levlink-comparison .grid-col-3:first-of-type {
        margin-bottom: 50px
    }
}

#page--levlink .section#first-fix {
    background: transparent url(../images/levlink-firstfix.png) no-repeat 50%;
    background-size: cover
}

#page--levlink .section#first-fix .ui-list {
    font-size: 16px
}

@media only screen and (max-width: 767px) {
    #page--levlink .section#first-fix {
        background: #eff1f2
    }

    #page--levlink .section#first-fix ul {
        text-align: left
    }
}

#page--levlink .section#switched-live-system {
    background: linear-gradient(45deg, hsla(205, 8%, 71%, .7), hsla(205, 8%, 71%, .3));
    position: relative;
    padding-top: 43%
}

@media only screen and (max-width: 1024px) {
    #page--levlink .section#switched-live-system {
        padding-top: 0
    }
}

#page--levlink .section#switched-live-system img {
    top: -150px;
    position: absolute;
    margin: 0 auto
}

@media only screen and (max-width: 1024px) {
    #page--levlink .section#switched-live-system img {
        position: static;
        margin-top: -100px
    }
}

#page--levlink .section#switched-live-system .section__content {
    z-index: 999
}

#page--levlink .section#switched-live-system .section__content .intro {
    text-align: left;
    margin: 50px 0 0
}

#page--levlink .section#switched-live-system .section__content .intro h2 {
    margin-bottom: 20px
}

#page--levlink .section#switched-live-system .section__content .intro .subtitle {
    display: block;
    text-align: left;
    margin-bottom: 30px
}

#page--levlink .section#switched-live-system .section__content .intro .subtitle:after, #page--levlink .section#switched-live-system .section__content .intro .subtitle:before {
    display: none
}

#page--levlink .section#switched-live-system .section__content .ui-list {
    border-color: #eff1f2;
    color: #808285;
    font-size: 14px
}

#page--levlink .section#switched-live-system .section__content .ui-list li {
    border-color: #eff1f2
}

#page--levlink .section#switched-live-system .section__content :last-child {
    margin-bottom: 0
}

@media only screen and (max-width: 1024px) {
    #page--levlink .section#switched-live-system .section__content .grid-col-3 {
        width: 100%
    }

    #page--levlink .section#switched-live-system .section__content .section__content {
        text-align: center
    }
}

#page--levlink .section#hybrid-with-levlink .intro + img {
    width: 647px;
    display: block;
    margin: 0 auto
}

#page--levlink .section#hybrid-switched-live {
    position: relative
}

@media only screen and (max-width: 1024px) {
    #page--levlink .section#hybrid-switched-live {
        padding-bottom: 50%;
        text-align: center
    }
}

@media only screen and (min-width: 1025px) {
    #page--levlink .section#hybrid-switched-live .intro {
        text-align: left
    }

    #page--levlink .section#hybrid-switched-live .subtitle {
        display: block;
        text-align: left
    }

    #page--levlink .section#hybrid-switched-live .subtitle:after, #page--levlink .section#hybrid-switched-live .subtitle:before {
        display: none
    }
}

#page--levlink .section#hybrid-switched-live p {
    background: #d0d4d7
}

#page--levlink .section#hybrid-switched-live img {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    width: 900px;
    max-width: none;
    z-index: -1
}

@media only screen and (max-width: 1700px) {
    #page--levlink .section#hybrid-switched-live img {
        width: 750px
    }
}

@media only screen and (max-width: 1480px) {
    #page--levlink .section#hybrid-switched-live img {
        width: 650px
    }
}

@media only screen and (max-width: 1100px) {
    #page--levlink .section#hybrid-switched-live img {
        width: 550px
    }
}

@media only screen and (max-width: 1024px) {
    #page--levlink .section#hybrid-switched-live img {
        width: 75%
    }
}

#page--toughbay-circular .hero-image {
    background-image: url(../images/toughbay-c-banner-image-2.jpg);
    background-position: center 20%
}

#page--toughbay-circular .hero .intro img {
    width: 820px
}

#page--toughbay-circular .section#overview .image-divider img {
    height: 130px;
    position: relative;
    right: 7px;
    bottom: 5px
}

#page--toughbay-circular .section#toughbay-range {
    padding-top: 0;
    padding-bottom: 0
}

#page--toughbay-circular .section#toughbay-range .range-overview {
    padding-bottom: 100px;
    background-image: url(../images/toughbay-c-banner-image-faded.jpg);
    background-size: cover;
    background-position: top
}

@media only screen and (max-width: 768px) {
    #page--toughbay-circular .section#toughbay-range .range-overview {
        padding-bottom: 50px
    }
}

#page--toughbay-circular .section#toughbay-range .boxed.one img {
    max-width: 80%;
    margin: 20px auto 0;
    display: block
}

@media only screen and (min-width: 768px) {
    #page--toughbay-circular .section#toughbay-range .boxed.one img {
        margin: 0;
        max-width: 200%;
        top: 20px;
        right: -20px
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    #page--toughbay-circular .section#toughbay-range .boxed.one img {
        top: 60px
    }
}

#page--toughbay-circular .section#toughbay-range .boxed.two img {
    max-width: 80%;
    margin: 20px auto 0;
    display: block
}

@media only screen and (min-width: 768px) {
    #page--toughbay-circular .section#toughbay-range .boxed.two img {
        margin: 0;
        top: -256px;
        max-width: 191%;
        right: -6%;
        margin-bottom: -256px
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    #page--toughbay-circular .section#toughbay-range .boxed.two img {
        top: -156px
    }
}

#page--toughbay-circular .section#toughbay-range .boxed.three img {
    max-width: 80%;
    margin: 20px auto 0;
    display: block
}

@media only screen and (min-width: 768px) {
    #page--toughbay-circular .section#toughbay-range .boxed.three img {
        margin: 0;
        max-width: 200%;
        top: 30px;
        right: 20px
    }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
    #page--toughbay-circular .section#toughbay-range .boxed.three img {
        top: 70px
    }
}

#page--toughbay-circular .section#warranty {
    background: transparent url(../images/warranty-bkg-toughbay-circular.jpg) no-repeat 50%;
    background-size: cover
}

#page--toughbay-circular .section#warranty .section__content p.subtitle {
    margin-bottom: 40px;
    text-align: left;
    display: block
}

#page--toughbay-circular .section#warranty .section__content p.subtitle:after, #page--toughbay-circular .section#warranty .section__content p.subtitle:before {
    display: none
}

#page--toughbay-circular .section#warranty .section__content p {
    max-width: 600px
}

#page--toughbay-circular .section#warranty .section__content .button, #page--toughbay-circular .section#warranty .section__content h2, #page--toughbay-circular .section#warranty .section__content p {
    margin-left: 0;
    margin-right: 0
}

#page--toughbay-circular .section#warranty .section__content .grid-row {
    position: relative
}

#page--toughbay-circular .section#warranty .section__content img {
    display: none
}

@media only screen and (min-width: 1025px) {
    #page--toughbay-circular .section#warranty .section__content img {
        display: block;
        width: 480px;
        max-width: 30%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        margin: auto;
        -webkit-filter: drop-shadow(20px 0 40px rgba(0, 0, 0, .75));
        filter: drop-shadow(20px 0 40px rgba(0, 0, 0, .75))
    }
}

@media only screen and (min-width: 1480px) {
    #page--toughbay-circular .section#warranty .section__content img {
        max-width: 40%;
        right: -5%
    }
}

#page--toughbay-circular .section#warranty .section__content .button-group {
    position: relative;
    left: -10px
}

#page--toughbay-circular .section#lighting-design {
    background-image: url(../images/lighting-design-bkg.jpg)
}

#page--toughbay-circular .section#lighting-design .intro {
    padding-bottom: 0
}

#page--toughbay-circular .section#lighting-design .intro :last-child {
    margin-bottom: 0
}

#page--toughbay-circular .section#design {
    text-align: center
}

#page--toughbay-circular .section#design .hotspots img {
    width: 1200px;
    margin: 0
}

#page--toughbay-circular .section#design .hotspots .hotspot.one {
    top: 35%;
    left: 5%
}

#page--toughbay-circular .section#design .hotspots .hotspot.two {
    top: 38%;
    left: 16%
}

#page--toughbay-circular .section#design .hotspots .hotspot.three {
    top: 32%;
    left: 28%
}

#page--toughbay-circular .section#design .hotspots .hotspot.four {
    top: 24%;
    left: 59%
}

#page--toughbay-circular .section#design .hotspots .hotspot.five {
    top: 30%;
    left: 78%
}

#page--toughbay-circular .section#design .hotspots .hotspot.six {
    top: 22%;
    left: 92%
}

#page--toughbay-circular .section#design p.caption, #page--toughbay-circular .section#design p.tab-group__item__button {
    margin: 30px auto 100px
}

#page--toughbay-circular .section#design .feature-boxes__box.operating-temperatures {
    background-image: url(../images/op-temp-bkg.jpg)
}

#page--toughbay-circular .section#design .feature-boxes__box.colour-temperature {
    background-image: url(../images/col-temp-bkg.jpg)
}

#page--toughbay-circular .section#design .feature-boxes__box.ip65 {
    background-image: url(../images/ip65-bkg.jpg)
}

#page--toughbay-circular .section#design .feature-boxes__box.ik10 {
    background-image: url(../images/ik10-bkg.jpg)
}

#page--toughbay-circular .section#performance {
    text-align: center;
    padding-bottom: 0
}

#page--toughbay-circular .section#performance img {
    width: 565px;
    margin-bottom: -245px !important
}

#page--toughbay-circular .section#longer-life {
    padding-top: 350px
}

#page--toughbay-circular .section#energy-saving .halogen-comparison, #page--toughbay-circular .section#energy-saving .halogen-comparison .grid-row {
    text-align: center
}

#page--toughbay-circular .section#energy-saving .halogen-comparison .grid-col-2 + .grid-col-2 {
    margin-top: 50px
}

#page--toughbay-circular .section#energy-saving .halogen-comparison .image-divider {
    display: none;
    margin-top: 0
}

#page--toughbay-circular .section#energy-saving .halogen-comparison .image-divider + p {
    margin-bottom: 75px
}

#page--toughbay-circular .section#energy-saving .halogen-comparison .large-icon {
    margin: 0 auto 30px
}

@media only screen and (min-width: 768px) {
    @supports (display:-moz-flex) or (display:flex) {
        #page--toughbay-circular .section#energy-saving .halogen-comparison .image-divider {
            display: -ms-flexbox;
            display: flex
        }
    }#page--toughbay-circular .section#energy-saving .halogen-comparison .grid-col-2 {
    padding-top: 25px;
    padding-bottom: 25px;
    position: relative
}

    #page--toughbay-circular .section#energy-saving .halogen-comparison .grid-col-2 + .grid-col-2 {
        margin-top: 0
    }

    #page--toughbay-circular .section#energy-saving .halogen-comparison .grid-col-2:first-of-type:after {
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        right: -30px;
        border-right: 1px solid hsla(216, 2%, 51%, .5)
    }
}

#page--toughbay-circular .section#cost-saving .feature-callout-container {
    margin-bottom: 0
}

@media only screen and (min-width: 1100px) {
    #page--toughbay-circular .section#cost-saving .feature-callout-container {
        border-right: 50px solid #fff;
        border-left: 50px solid #fff
    }
}

#page--toughbay-circular .section#cost-saving .feature-callout {
    color: #fff;
    border: none;
    padding: 75px 20px 10px;
    margin-bottom: 15px;
    text-align: left;
    line-height: 20px
}

@media only screen and (min-width: 768px) {
    #page--toughbay-circular .section#cost-saving .feature-callout {
        width: 25%;
        margin: 0;
        font-size: 14px;
        line-height: 15px
    }

    #page--toughbay-circular .section#cost-saving .feature-callout b {
        margin-top: 10px;
        font-size: 25px;
        line-height: 25px
    }

    #page--toughbay-circular .section#cost-saving .feature-callout b span {
        font-size: 15px
    }
}

@media only screen and (min-width: 1025px) {
    #page--toughbay-circular .section#cost-saving .feature-callout {
        font-size: 16px;
        line-height: 20px
    }

    #page--toughbay-circular .section#cost-saving .feature-callout b {
        margin-top: 10px;
        font-size: 35px;
        line-height: 35px
    }

    #page--toughbay-circular .section#cost-saving .feature-callout b span {
        font-size: 20px
    }
}

@media only screen and (min-width: 1100px) {
    #page--toughbay-circular .section#cost-saving .feature-callout {
        border-right: 10px solid #fff;
        border-left: 10px solid #fff
    }
}

@media only screen and (min-width: 1480px) {
    #page--toughbay-circular .section#cost-saving .feature-callout {
        font-size: 18px
    }

    #page--toughbay-circular .section#cost-saving .feature-callout b {
        font-size: 50px;
        line-height: 50px
    }
}

#page--toughbay-circular .section#cost-saving .feature-callout b, #page--toughbay-circular .section#cost-saving .feature-callout p, #page--toughbay-circular .section#cost-saving .feature-callout span {
    color: #fff
}

#page--toughbay-circular .section#cost-saving .feature-callout.annual-cost {
    background: #b0b7bc
}

#page--toughbay-circular .section#cost-saving .feature-callout.lifetime-cost {
    background: #808285
}

#page--toughbay-circular .section#cost-saving .feature-callout.lifetime-co2 {
    background: #414042
}

#page--toughbay-circular .section#cost-saving .feature-callout.ext-warranty {
    background: #76b900
}

#page--toughbay-linear .hero-image {
    background-image: url(../images/toughbay-l-banner-image.jpg);
    background-position: 50%
}

#page--toughbay-linear .hero .intro img {
    width: 800px
}

#page--toughbay-linear .section#overview .image-divider img {
    height: 130px;
    position: relative;
    right: 7px;
    bottom: 5px
}

#page--toughbay-linear .section#application {
    padding-top: 0;
    padding-bottom: 0
}

#page--toughbay-linear .section#application .application-one {
    padding-bottom: 100px;
    background-image: url(../images/toughbay-l-app-1.jpg);
    background-size: cover;
    background-position: top
}

@media only screen and (max-width: 768px) {
    #page--toughbay-linear .section#application .application-one {
        padding-bottom: 50px
    }
}

#page--toughbay-linear .section#application .application-two {
    background-image: url(../images/toughbay-l-app-2.jpg);
    background-size: cover;
    margin-bottom: 0;
    padding-top: 100px
}

@media only screen and (max-width: 768px) {
    #page--toughbay-linear .section#application .application-two {
        padding-top: 50px
    }
}

#page--toughbay-linear .section#application .boxed img {
    max-width: none;
    width: 1200px;
    margin: 130px 0 0
}

#page--toughbay-linear .section#application .boxed.toughbay-linear-75w img {
    width: 625px
}

#page--toughbay-linear .section#accessories .feature-boxes__box.reflectors {
    background-color: #9ea0a3;
    padding-bottom: 10px
}

#page--toughbay-linear .section#accessories .feature-boxes__box.reflectors img {
    margin-top: 20px;
    width: 90%;
    position: relative;
    right: 7%
}

#page--toughbay-linear .section#accessories .feature-boxes__box.surface-mount {
    background-color: #525558;
    padding-bottom: 0
}

@media only screen and (min-width: 768px) {
    #page--toughbay-linear .section#accessories .feature-boxes__box.surface-mount img {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 70%
    }
}

@media only screen and (min-width: 1480px) {
    #page--toughbay-linear .section#accessories .feature-boxes__box.surface-mount img {
        width: 90%
    }
}

#page--toughbay-linear .section#accessories .feature-boxes__box.ip67-connector {
    background-color: #4e5054;
    padding-bottom: 0
}

#page--toughbay-linear .section#accessories .feature-boxes__box.ip67-connector img {
    max-width: 110%;
    position: relative;
    right: 15%
}

@media only screen and (min-width: 768px) {
    #page--toughbay-linear .section#accessories .feature-boxes__box.ip67-connector img {
        margin-top: 50px
    }
}

#page--toughbay-linear .section#accessories .feature-boxes__box.leviton-sensor {
    background-color: #1c1a1f
}

@media only screen and (min-width: 768px) {
    #page--toughbay-linear .section#accessories .feature-boxes__box.leviton-sensor {
        padding-bottom: 0
    }
}

@media only screen and (min-width: 1480px) {
    #page--toughbay-linear .section#accessories .feature-boxes__box.leviton-sensor img {
        position: absolute;
        bottom: 30px;
        right: 0;
        margin: auto;
        width: 85%
    }
}

#page--toughbay-linear .section#lighting-design {
    background-image: url(../images/lighting-design-bkg.jpg)
}

#page--toughbay-linear .section#lighting-design .intro {
    padding-bottom: 0
}

#page--toughbay-linear .section#lighting-design .intro :last-child {
    margin-bottom: 0
}

#page--toughbay-linear .section#design {
    text-align: center
}

#page--toughbay-linear .section#design .hotspots img {
    width: 1200px;
    margin: 0 0 100px
}

#page--toughbay-linear .section#design .hotspots .hotspot.one {
    top: 40%;
    left: 10%
}

#page--toughbay-linear .section#design .hotspots .hotspot.two {
    top: 80%;
    left: 26%
}

#page--toughbay-linear .section#design .hotspots .hotspot.three {
    top: 55%;
    left: 49%
}

#page--toughbay-linear .section#design .hotspots .hotspot.four {
    top: 58%;
    left: 80%
}

#page--toughbay-linear .section#design .hotspots .hotspot.five {
    top: 20%;
    left: 68%
}

#page--toughbay-linear .section#design .hotspots .hotspot.six {
    top: 2%;
    left: 52%
}

#page--toughbay-linear .section#design .feature-boxes__box.operating-temperatures {
    background-image: url(../images/op-temp-bkg.jpg)
}

#page--toughbay-linear .section#design .feature-boxes__box.colour-temperature {
    background-image: url(../images/col-temp-bkg.jpg)
}

#page--toughbay-linear .section#design .feature-boxes__box.ip65 {
    background-image: url(../images/ip65-bkg.jpg)
}

#page--toughbay-linear .section#design .feature-boxes__box.ik10 {
    background-image: url(../images/ik10-bkg.jpg)
}

#page--toughbay-linear .section#replacement {
    text-align: center
}

#page--toughbay-linear .section#replacement img {
    width: 1000px
}

@media only screen and (min-width: 1480px) {
    #page--toughbay-linear .section#replacement img {
        margin-top: -30px;
        margin-bottom: -20px
    }
}

#page--toughbay-linear .section#performance {
    text-align: center
}

#page--toughbay-linear .section#performance .intro + h2 {
    margin-bottom: 75px
}

#page--toughbay-linear .section#energy-saving .halogen-comparison, #page--toughbay-linear .section#energy-saving .halogen-comparison .grid-row {
    text-align: center
}

#page--toughbay-linear .section#energy-saving .halogen-comparison .grid-col-2 + .grid-col-2 {
    margin-top: 50px
}

#page--toughbay-linear .section#energy-saving .halogen-comparison .image-divider {
    display: none
}

#page--toughbay-linear .section#energy-saving .halogen-comparison .image-divider + p {
    margin-bottom: 75px
}

#page--toughbay-linear .section#energy-saving .halogen-comparison .large-icon {
    margin: 0 auto 30px
}

@media only screen and (min-width: 768px) {
    @supports (display:-moz-flex) or (display:flex) {
        #page--toughbay-linear .section#energy-saving .halogen-comparison .image-divider {
            display: -ms-flexbox;
            display: flex
        }
    }#page--toughbay-linear .section#energy-saving .halogen-comparison .grid-col-2 {
    padding-top: 25px;
    padding-bottom: 25px;
    position: relative
}

    #page--toughbay-linear .section#energy-saving .halogen-comparison .grid-col-2 + .grid-col-2 {
        margin-top: 0
    }

    #page--toughbay-linear .section#energy-saving .halogen-comparison .grid-col-2:first-of-type:after {
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        right: -30px;
        border-right: 1px solid hsla(216, 2%, 51%, .5)
    }
}

#page--toughbay-linear .section#cost-saving .feature-callout-container {
    margin-bottom: 0
}

@media only screen and (min-width: 1100px) {
    #page--toughbay-linear .section#cost-saving .feature-callout-container {
        border-right: 50px solid #fff;
        border-left: 50px solid #fff
    }
}

#page--toughbay-linear .section#cost-saving .feature-callout {
    color: #fff;
    border: none;
    padding: 75px 20px 10px;
    margin-bottom: 15px;
    text-align: left;
    line-height: 20px
}

@media only screen and (min-width: 768px) {
    #page--toughbay-linear .section#cost-saving .feature-callout {
        width: 25%;
        margin: 0;
        font-size: 14px;
        line-height: 15px
    }

    #page--toughbay-linear .section#cost-saving .feature-callout b {
        margin-top: 10px;
        font-size: 25px;
        line-height: 25px
    }

    #page--toughbay-linear .section#cost-saving .feature-callout b span {
        font-size: 15px
    }
}

@media only screen and (min-width: 1025px) {
    #page--toughbay-linear .section#cost-saving .feature-callout {
        font-size: 16px;
        line-height: 20px
    }

    #page--toughbay-linear .section#cost-saving .feature-callout b {
        margin-top: 10px;
        font-size: 35px;
        line-height: 35px
    }

    #page--toughbay-linear .section#cost-saving .feature-callout b span {
        font-size: 20px
    }
}

@media only screen and (min-width: 1100px) {
    #page--toughbay-linear .section#cost-saving .feature-callout {
        border-right: 10px solid #fff;
        border-left: 10px solid #fff
    }
}

@media only screen and (min-width: 1480px) {
    #page--toughbay-linear .section#cost-saving .feature-callout {
        font-size: 18px
    }

    #page--toughbay-linear .section#cost-saving .feature-callout b {
        font-size: 50px;
        line-height: 50px
    }
}

#page--toughbay-linear .section#cost-saving .feature-callout b, #page--toughbay-linear .section#cost-saving .feature-callout p, #page--toughbay-linear .section#cost-saving .feature-callout span {
    color: #fff
}

#page--toughbay-linear .section#cost-saving .feature-callout.annual-cost {
    background: #b0b7bc
}

#page--toughbay-linear .section#cost-saving .feature-callout.lifetime-cost {
    background: #808285
}

#page--toughbay-linear .section#cost-saving .feature-callout.lifetime-co2 {
    background: #414042
}

#page--toughbay-linear .section#cost-saving .feature-callout.ext-warranty {
    background: #76b900
}

#page--niteflood .hero-image {
    background-image: url(../images/niteflood-banner-image.jpg);
    background-position: center 93%
}

#page--niteflood .hero .intro img {
    width: 320px
}

#page--niteflood .section#overview .image-divider img {
    position: relative;
    top: -8px
}

#page--niteflood .section#performance .lifelong-lumens {
    text-align: left
}

#page--niteflood .section#performance .lifelong-lumens .subtitle {
    display: block;
    text-align: left
}

#page--niteflood .section#performance .lifelong-lumens .subtitle:after, #page--niteflood .section#performance .lifelong-lumens .subtitle:before {
    display: none
}

#page--niteflood .section#performance .halogen-comparison, #page--niteflood .section#performance .halogen-comparison .grid-row {
    text-align: center
}

#page--niteflood .section#performance .halogen-comparison .grid-col-2 + .grid-col-2 {
    margin-top: 50px
}

#page--niteflood .section#performance .halogen-comparison .image-divider {
    display: none
}

#page--niteflood .section#performance .halogen-comparison .image-divider:after, #page--niteflood .section#performance .halogen-comparison .image-divider:before {
    background-color: #fff
}

#page--niteflood .section#performance .halogen-comparison .intro .subtitle:after, #page--niteflood .section#performance .halogen-comparison .intro .subtitle:before {
    display: none !important
}

#page--niteflood .section#performance .halogen-comparison .large-icon {
    margin: 0 auto 30px
}

@media only screen and (min-width: 768px) {
    @supports (display:-moz-flex) or (display:flex) {
        #page--niteflood .section#performance .halogen-comparison .image-divider {
            display: -ms-flexbox;
            display: flex
        }
    }#page--niteflood .section#performance .halogen-comparison .grid-col-2 {
    padding-top: 25px;
    padding-bottom: 25px;
    position: relative
}

    #page--niteflood .section#performance .halogen-comparison .grid-col-2 + .grid-col-2 {
        margin-top: 0
    }

    #page--niteflood .section#performance .halogen-comparison .grid-col-2:first-of-type:after {
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        right: -30px;
        border-right: 1px solid hsla(216, 2%, 51%, .5)
    }
}

#page--niteflood .section#design img {
    width: 1219px;
    float: right;
    margin-bottom: -30px;
    max-width: 73%;
    margin-top: 10px
}

@media only screen and (min-width: 768px) and (max-width: 1480px) {
    #page--niteflood .section#design img {
        margin-top: 30px
    }
}

#page--niteflood .section#design .feature-callout {
    color: #76b900;
    border: 1px solid #76b900 !important;
    width: 200px;
    text-align: left;
    padding: 50px 20px 20px;
    margin: 0 auto
}

@media only screen and (max-width: 768px) {
    #page--niteflood .section#design .feature-callout {
        margin-bottom: 50px
    }
}

#page--niteflood .section#design .feature-callout span {
    text-transform: none;
    color: #76b900
}

#page--niteflood .section#design .feature-callout span:after {
    display: none !important
}

#page--niteflood .section#pir {
    padding-top: 0;
    text-align: center
}

#page--niteflood .section#pir .section__content > img:first-child {
    margin: 0 0 20px;
    width: 825px
}

#page--niteflood .section#pir .grid-row {
    text-align: left
}

#page--niteflood .section#pir .grid-row + .intro {
    margin-top: 150px
}

#page--niteflood .section#pir .grid-row .pir-diagram img {
    margin-bottom: 50px;
    width: 475px;
    margin-left: auto;
    margin-right: auto;
    display: block
}

@media only screen and (min-width: 480px) and (max-width: 768px) {
    #page--niteflood .section#pir .grid-row .pir-diagram img {
        max-width: 75%
    }
}

#page--niteflood .section#pir .grid-row .pir-diagram .caption, #page--niteflood .section#pir .grid-row .pir-diagram .tab-group__item__button {
    margin-bottom: 20px
}

@media only screen and (min-width: 768px) {
    #page--niteflood .section#pir .grid-row .pir-diagram:first-of-type img {
        margin-top: 69px
    }
}

@media only screen and (max-width: 768px) {
    #page--niteflood .section#pir .grid-row .pir-diagram p.caption, #page--niteflood .section#pir .grid-row .pir-diagram p.tab-group__item__button, #page--niteflood .section#pir .grid-row .pir-diagram ul {
        max-width: 500px;
        margin: 0 auto;
        display: block
    }

    #page--niteflood .section#pir .grid-row .pir-diagram:first-of-type {
        margin-bottom: 75px
    }
}

#page--niteflood .section#pir .intro + img {
    width: 475px
}

#page--niteflood .section#versatility {
    padding-bottom: 0;
    text-align: center
}

#page--niteflood .section#versatility > img {
    margin: 150px auto 0;
    width: 1150px;
    max-width: 80%
}

@media only screen and (max-width: 768px) {
    #page--niteflood .section#versatility > img {
        margin-top: 50px
    }
}

#page--niteflood .section#versatility .feature-boxes {
    margin-bottom: 100px
}

#page--niteflood .section#versatility .feature-boxes__box {
    background: #808285
}

#page--niteflood .section#versatility .feature-boxes__box img {
    margin-top: 50px;
    margin-bottom: 20px
}

#page--niteflood .section#versatility .feature-boxes__box.rotatable img {
    width: 375px
}

#page--niteflood .section#versatility .feature-boxes__box.tiltable img {
    width: 261px;
    position: relative;
    left: 10%
}

@media only screen and (max-width: 768px) {
    #page--niteflood .section#versatility .bracket-boxes__box {
        margin-bottom: 50px
    }
}

#page--niteflood .section#versatility .bracket-boxes__box img {
    width: 285px
}

#page--niteflood .section#extreme-conditions .feature-boxes__box, #page--niteflood .section#extreme-conditions .feature-boxes__box .caption, #page--niteflood .section#extreme-conditions .feature-boxes__box .tab-group__item__button {
    color: #fff
}

#page--niteflood .section#extreme-conditions .feature-boxes__box.ip65 {
    background-image: url(../images/ip65-bkg.jpg)
}

#page--niteflood .section#extreme-conditions .feature-boxes__box.anti-humidity {
    background-image: url(../images/anti-humidity-bkg.jpg)
}

#page--skypack .hero-image {
    background-image: url(../images/skypack-banner-image.jpg);
    background-position: bottom
}

#page--skypack .hero .intro img {
    width: 600px
}

#page--skypack .hero .image-divider img {
    height: 150px
}

#page--skypack .section#design .section__content:first-child .intro {
    padding-bottom: 0
}

#page--skypack .section#design .hotspots img {
    margin-top: -50px;
    margin-bottom: 50px
}

#page--skypack .section#design .hotspot.one {
    top: 38%;
    left: 44%
}

#page--skypack .section#design .hotspot.two {
    top: 51%;
    left: 65%
}

#page--skypack .section#design .hotspot.three {
    top: 55%;
    left: 53%
}

#page--skypack .section#design .hotspot.four {
    top: 61%;
    left: 76%
}

#page--skypack .section#design #light-uniformity img {
    margin: 0
}

@media only screen and (max-width: 768px) {
    #page--skypack .section#design #light-uniformity .grid-col-3:last-child img {
        margin-top: 50px
    }
}

#page--skypack .section#design #light-uniformity .caption + p, #page--skypack .section#design #light-uniformity .tab-group__item__button + p {
    margin: 0 0 30px
}

#page--skypack .section#design #light-uniformity .caption + p + p, #page--skypack .section#design #light-uniformity .tab-group__item__button + p + p {
    margin: 0
}

@media only screen and (min-width: 1100px) {
    #page--skypack .section#design #light-uniformity .caption + p + p, #page--skypack .section#design #light-uniformity .tab-group__item__button + p + p {
        max-width: 70%
    }
}

@media only screen and (max-width: 768px) {
    #page--skypack .section#wiring-options .step-list p.caption, #page--skypack .section#wiring-options .step-list p.tab-group__item__button {
        color: #76b900 !important
    }
}

@media only screen and (min-width: 768px) {
    #page--skypack .section#wiring-options .step {
        margin-bottom: 0
    }
}

#page--skypack .section#performance {
    background-image: url(../images/skypack-performance-bkg.jpg);
    background-size: cover
}

#page--skypack .section#performance .boxed {
    padding: 50px;
    text-align: center
}

@media only screen and (max-width: 768px) {
    #page--skypack .section#performance .boxed.skypack-plus {
        margin-top: 50px
    }

    #page--skypack .section#performance .boxed h3 {
        font-size: 30px;
        line-height: 40px
    }
}

#page--skypack .section#performance .boxed .subtitle {
    display: block;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 0
}

#page--skypack .section#performance .boxed h4 {
    font-size: 18px;
    line-height: 25px;
    color: #b0b7bc
}

#page--skypack .section#performance .boxed img {
    margin: 0 auto 50px;
    max-width: 100%
}

#page--skypack .section#performance .boxed .product-data p {
    color: #b0b7bc;
    letter-spacing: .02em;
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-family: Scene W01, Helvetica Neue, Arial, sans-serif
}

#page--skypack .section#performance .boxed .product-data p span {
    color: #001d68;
    font-weight: 700
}

#page--skypack .section#performance .boxed .product-data + .product-data:before {
    content: "";
    display: block;
    width: 100px;
    height: 1px;
    margin: 40px auto;
    background: #c0c1c2
}

@media only screen and (max-width: 768px) {
    #page--skypack .section#performance .boxed .product-data + .product-data:before {
        margin-left: auto;
        margin-right: auto
    }
}

#page--oxford .hero-image {
    background-image: url(../images/oxford-banner-image.jpg);
    background-position: top
}

#page--oxford .hero .image-divider img {
    height: 26px
}

#page--oxford .section#installation {
    background: linear-gradient(20deg, #c3c8cc, #9ca0a3);
    text-align: center
}

#page--oxford .section#installation .intro {
    padding-bottom: 0
}

#page--oxford .section#installation .intro :last-child {
    margin-bottom: 0
}

#page--oxford .section#installation .intro + img {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto
}

#page--oxford .section#installation .hotspots {
    text-align: center
}

#page--oxford .section#installation .hotspots img {
    width: 100%;
    margin-top: 50px
}

#page--oxford .section#installation .hotspots + h2 {
    margin-top: 50px
}

#page--oxford .section#installation .hotspots + h2:before {
    content: "";
    display: block;
    height: 1px;
    width: 300px;
    max-width: 50%;
    margin: 0 auto 50px;
    background-color: hsla(0, 0%, 100%, .5)
}

#page--oxford .section#installation .hotspots + h2 + .subtitle:after, #page--oxford .section#installation .hotspots + h2 + .subtitle:before {
    display: none
}

#page--oxford .section#installation .hotspot.one {
    top: 21%;
    left: 28%
}

#page--oxford .section#installation .hotspot.two {
    top: 58%;
    left: 38%
}

#page--oxford .section#installation .hotspot.three {
    top: 53%;
    left: 50%
}

#page--oxford .section#installation .hotspot.four {
    top: 75%;
    left: 65%
}

#page--oxford .section#installation img.mounting-graphic {
    display: block;
    width: 700px;
    margin: 50px auto 30px
}

#page--oxford .section#hinge-mechanism .button-group {
    text-align: center
}

#page--oxford .section#hinge-mechanism .step-list {
    margin-bottom: 20px
}

@media only screen and (min-width: 1025px) {
    #page--oxford .section#hinge-mechanism .step-list {
        margin-bottom: 0
    }

    #page--oxford .section#hinge-mechanism .step-list .step {
        margin-bottom: 50px
    }

    #page--oxford .section#hinge-mechanism .button {
        margin-top: 0
    }
}

#page--oxford .section#light-distribution {
    background: #000;
    background: linear-gradient(180deg, #000 0, #231f20);
    padding-bottom: 0;
    text-align: center;
    overflow: hidden
}

#page--oxford .section#light-distribution .intro {
    margin-bottom: 0;
    z-index: 0;
    position: relative
}

#page--oxford .section#light-distribution .intro :last-child {
    margin-bottom: 0
}

#page--oxford .section#light-distribution img {
    margin-top: -12%;
    z-index: -1
}

@media only screen and (min-width: 1025px) {
    #page--oxford .section#light-distribution img {
        margin-top: -15%
    }
}

#page--oxford .section#energysaving {
    text-align: center
}

#page--oxford .section#energysaving :last-child {
    margin-bottom: 0
}

#page--oxford .section#energysaving .feature-callout, #page--oxford .section#energysaving .feature-callout b {
    color: #76b900;
    border-color: #76b900
}

@media only screen and (max-width: 1025px) {
    #page--oxford .section#energysaving .feature-callout-container {
        margin-top: 50px
    }
}

@media only screen and (max-width: 768px) {
    #page--oxford .section#energysaving .feature-callout:first-of-type {
        margin-top: 75px
    }

    #page--oxford .section#energysaving .feature-callout:last-of-type {
        margin-bottom: 25px
    }
}

#page--oxford .section#endurance h2.h3 + .subtitle {
    display: block;
    text-align: left
}

#page--oxford .section#endurance h2.h3 + .subtitle:after, #page--oxford .section#endurance h2.h3 + .subtitle:before {
    display: none
}

#page--oxford .section#endurance img {
    margin-bottom: 0
}

@media only screen and (max-width: 768px) {
    #page--oxford .section#endurance .grid-row {
        text-align: center
    }

    #page--oxford .section#endurance .grid-row .subtitle {
        text-align: center !important
    }
}

#page--architectural-exterior .hero-image {
    background-image: url(../images/architectural-exterior-banner.jpg);
    background-position: top
}

#page--architectural-exterior .hero .intro img {
    width: 1040px
}

#page--architectural-exterior .section#overview .feature-images {
    margin-top: 75px
}

#page--architectural-exterior .section#overview .feature-images img {
    margin-bottom: 30px
}

@media only screen and (max-width: 1025px) {
    #page--architectural-exterior .section#overview .feature-images .caption, #page--architectural-exterior .section#overview .feature-images .tab-group__item__button {
        margin-bottom: 50px
    }
}

@media only screen and (max-width: 1025px) {
    #page--architectural-exterior .section#overview .feature-images .grid-col-2:last-child .caption, #page--architectural-exterior .section#overview .feature-images .grid-col-2:last-child .tab-group__item__button {
        margin-bottom: 0
    }
}

#page--architectural-exterior .section#overview .feature-images + .button {
    margin-top: 75px
}

#page--fire-rated .section#overview {
    text-align: center;
    background-image: url(../images/fire-rated-background.jpg);
    background-position: top;
    background-size: 100%;
    background-repeat: no-repeat;
    height: auto
}

#page--fire-rated .section#overview img {
    width: 500px;
    margin-left: auto;
    margin-right: auto
}

#page--fire-rated .section#overview img + .caption, #page--fire-rated .section#overview img + .tab-group__item__button {
    margin-bottom: 100px
}

#page--fire-rated .section#overview p:not(.feature-callout) {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (min-width: 1480px) {
    #page--fire-rated .section#overview p:not(.feature-callout) {
        max-width: 800px
    }
}

#page--fire-rated .hero .intro {
    background: transparent
}

#page--fire-rated .hero .feature-callout {
    color: #b0b7bc
}

#page--fire-rated .hero h3 {
    color: #001d68
}

#page--fire-rated .section--testimonial {
    text-align: center
}

#page--fire-rated .section--testimonial blockquote {
    margin-top: 40px;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: #fff
}

#page--fire-rated .section#testimonial-1 {
    background-image: url(../images/ceiling-smoke-alarm.jpg);
    background-position: 50%;
    background-size: cover
}

#page--fire-rated .section#ceilingrating {
    text-align: center
}

#page--fire-rated .section#ceilingrating img {
    width: 600px
}

#page--fire-rated .section#ceilingrating img + .caption--alt {
    margin-top: 30px
}

@media only screen and (min-width: 1025px) {
    #page--fire-rated .section#ceilingrating .ceiling-30, #page--fire-rated .section#ceilingrating .ceiling-90 {
        float: right
    }

    #page--fire-rated .section#ceilingrating .ceiling-60 {
        float: left
    }
}

#page--fire-rated .section#ceilingrating .ratinglevels {
    margin-bottom: 30px
}

@media only screen and (min-width: 1025px) {
    #page--fire-rated .section#ceilingrating .ratinglevels {
        margin-bottom: 100px
    }
}

#page--fire-rated .section#ceilingrating .ratinglevels .grid-row {
    padding-bottom: 30px
}

@media only screen and (min-width: 1025px) {
    #page--fire-rated .section#ceilingrating .ratinglevels .grid-row {
        padding-top: 60px !important;
        padding-bottom: 60px !important
    }
}

#page--fire-rated .section#ceilingrating .ratinglevels .grid-row:first-child {
    padding-top: 0 !important
}

#page--fire-rated .section#ceilingrating .ratinglevels + .intro {
    padding-bottom: 0
}

#page--fire-rated .section#ceilingrating .ratinglevels + .intro h2:before {
    content: "";
    display: block;
    width: 200px;
    height: 1px;
    margin-bottom: 75px;
    background: #c0c1c2;
    margin-left: auto;
    margin-right: auto
}

#page--fire-rated .section#ceilingrating .ratinglevels + .intro :last-child {
    margin-bottom: 0
}

#page--fire-rated .section#components .hotspots .hotspot.one {
    top: 24%;
    left: 57%
}

#page--fire-rated .section#components .hotspots .hotspot.two {
    top: 82%;
    left: 65%
}

#page--fire-rated .section#components .hotspots .hotspot.three {
    top: 70%;
    left: 19%
}

#page--fire-rated .section#components .hotspots .hotspot.four {
    top: 50.5%;
    left: 30%
}

#page--fire-rated .section#testimonial-2 {
    background-image: url(../images/ceiling-smoke-alarm.jpg);
    background-position: 50%;
    background-size: cover
}

#page--fire-rated .section#testimonial-2 .button {
    margin-bottom: 0
}

#page.page-stockists #wpsl-result-list {
    display: none !important
}

@media only screen and (min-width: 768px) and (max-width: 1025px) {
    #downloads .button--alt {
        padding-left: 30px;
        padding-right: 30px;
        font-size: 14px
    }
}

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2014 Daniel Eden
*/
.animated, .feature-banner:after {
    animation-duration: 1s;
    animation-fill-mode: both
}

.animated.infinite, .infinite.feature-banner:after {
    animation-iteration-count: infinite
}

.animated.hinge, .hinge.feature-banner:after {
    animation-duration: 2s
}

@keyframes b {
    0%, 20%, 53%, 80%, to {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translateZ(0)
    }
    40%, 43% {
        transition-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -30px, 0)
    }
    70% {
        transition-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -15px, 0)
    }
    90% {
        transform: translate3d(0, -4px, 0)
    }
}

.bounce {
    animation-name: b;
    transform-origin: center bottom
}

@keyframes c {
    0%, 50%, to {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

.flash {
    animation-name: c
}

@keyframes d {
    0% {
        transform: scaleX(1)
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05)
    }
    to {
        transform: scaleX(1)
    }
}

.pulse {
    animation-name: d
}

@keyframes e {
    0% {
        transform: scaleX(1)
    }
    30% {
        transform: scale3d(1.25, .75, 1)
    }
    40% {
        transform: scale3d(.75, 1.25, 1)
    }
    50% {
        transform: scale3d(1.15, .85, 1)
    }
    65% {
        transform: scale3d(.95, 1.05, 1)
    }
    75% {
        transform: scale3d(1.05, .95, 1)
    }
    to {
        transform: scaleX(1)
    }
}

.rubberBand {
    animation-name: e
}

@keyframes f {
    0%, to {
        transform: translateZ(0)
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translate3d(-10px, 0, 0)
    }
    20%, 40%, 60%, 80% {
        transform: translate3d(10px, 0, 0)
    }
}

.shake {
    animation-name: f
}

@keyframes g {
    20% {
        transform: rotate(15deg)
    }
    40% {
        transform: rotate(-10deg)
    }
    60% {
        transform: rotate(5deg)
    }
    80% {
        transform: rotate(-5deg)
    }
    to {
        transform: rotate(0deg)
    }
}

.swing {
    transform-origin: top center;
    animation-name: g
}

@keyframes h {
    0% {
        transform: scaleX(1)
    }
    10%, 20% {
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }
    to {
        transform: scaleX(1)
    }
}

.tada {
    animation-name: h
}

@keyframes i {
    0% {
        transform: none
    }
    15% {
        transform: translate3d(-25%, 0, 0) rotate(-5deg)
    }
    30% {
        transform: translate3d(20%, 0, 0) rotate(3deg)
    }
    45% {
        transform: translate3d(-15%, 0, 0) rotate(-3deg)
    }
    60% {
        transform: translate3d(10%, 0, 0) rotate(2deg)
    }
    75% {
        transform: translate3d(-5%, 0, 0) rotate(-1deg)
    }
    to {
        transform: none
    }
}

.wobble {
    animation-name: i
}

@keyframes j {
    0%, 20%, 40%, 60%, 80%, to {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        transform: scale3d(.9, .9, .9)
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        transform: scale3d(.97, .97, .97)
    }
    to {
        opacity: 1;
        transform: scaleX(1)
    }
}

.bounceIn {
    animation-name: j;
    animation-duration: .75s
}

@keyframes k {
    0%, 60%, 75%, 90%, to {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0)
    }
    75% {
        transform: translate3d(0, -10px, 0)
    }
    90% {
        transform: translate3d(0, 5px, 0)
    }
    to {
        transform: none
    }
}

.bounceInDown {
    animation-name: k
}

@keyframes l {
    0%, 60%, 75%, 90%, to {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }
    75% {
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        transform: translate3d(5px, 0, 0)
    }
    to {
        transform: none
    }
}

.bounceInLeft {
    animation-name: l
}

@keyframes m {
    0%, 60%, 75%, 90%, to {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        transform: translate3d(10px, 0, 0)
    }
    90% {
        transform: translate3d(-5px, 0, 0)
    }
    to {
        transform: none
    }
}

.bounceInRight {
    animation-name: m
}

@keyframes n {
    0%, 60%, 75%, 90%, to {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }
    75% {
        transform: translate3d(0, 10px, 0)
    }
    90% {
        transform: translate3d(0, -5px, 0)
    }
    to {
        transform: translateZ(0)
    }
}

.bounceInUp {
    animation-name: n
}

@keyframes o {
    20% {
        transform: scale3d(.9, .9, .9)
    }
    50%, 55% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1)
    }
    to {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
}

.bounceOut {
    animation-name: o;
    animation-duration: .75s
}

@keyframes p {
    20% {
        transform: translate3d(0, 10px, 0)
    }
    40%, 45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

.bounceOutDown {
    animation-name: p
}

@keyframes q {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

.bounceOutLeft {
    animation-name: q
}

@keyframes r {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

.bounceOutRight {
    animation-name: r
}

@keyframes s {
    20% {
        transform: translate3d(0, -10px, 0)
    }
    40%, 45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0)
    }
    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

.bounceOutUp {
    animation-name: s
}

@keyframes t {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.fadeIn, .feature-banner:after {
    animation-name: t
}

@keyframes u {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInDown {
    animation-name: u
}

@keyframes v {
    0% {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInDownBig {
    animation-name: v
}

@keyframes w {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInLeft {
    animation-name: w
}

@keyframes x {
    0% {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInLeftBig {
    animation-name: x
}

@keyframes y {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInRight {
    animation-name: y
}

@keyframes z {
    0% {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInRightBig {
    animation-name: z
}

@keyframes A {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInUp {
    animation-name: A
}

@keyframes B {
    0% {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.fadeInUpBig {
    animation-name: B
}

@keyframes C {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.fadeOut {
    animation-name: C
}

@keyframes D {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
}

.fadeOutDown {
    animation-name: D
}

@keyframes E {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

.fadeOutDownBig {
    animation-name: E
}

@keyframes F {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }
}

.fadeOutLeft {
    animation-name: F
}

@keyframes G {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

.fadeOutLeftBig {
    animation-name: G
}

@keyframes H {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
}

.fadeOutRight {
    animation-name: H
}

@keyframes I {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

.fadeOutRightBig {
    animation-name: I
}

@keyframes J {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }
}

.fadeOutUp {
    animation-name: J
}

@keyframes K {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

.fadeOutUpBig {
    animation-name: K
}

@keyframes L {
    0% {
        transform: perspective(400px) rotateY(-1turn);
        animation-timing-function: ease-out
    }
    40% {
        transform: perspective(400px) translateZ(150px) rotateY(-190deg);
        animation-timing-function: ease-out
    }
    50% {
        transform: perspective(400px) translateZ(150px) rotateY(-170deg);
        animation-timing-function: ease-in
    }
    80% {
        transform: perspective(400px) scale3d(.95, .95, .95);
        animation-timing-function: ease-in
    }
    to {
        transform: perspective(400px);
        animation-timing-function: ease-in
    }
}

.animated.flip, .flip.feature-banner:after {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    animation-name: L
}

@keyframes M {
    0% {
        transform: perspective(400px) rotateX(90deg);
        transition-timing-function: ease-in;
        opacity: 0
    }
    40% {
        transform: perspective(400px) rotateX(-20deg);
        transition-timing-function: ease-in
    }
    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }
    80% {
        transform: perspective(400px) rotateX(-5deg)
    }
    to {
        transform: perspective(400px)
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: M
}

@keyframes N {
    0% {
        transform: perspective(400px) rotateY(90deg);
        transition-timing-function: ease-in;
        opacity: 0
    }
    40% {
        transform: perspective(400px) rotateY(-20deg);
        transition-timing-function: ease-in
    }
    60% {
        transform: perspective(400px) rotateY(10deg);
        opacity: 1
    }
    80% {
        transform: perspective(400px) rotateY(-5deg)
    }
    to {
        transform: perspective(400px)
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: N
}

@keyframes O {
    0% {
        transform: perspective(400px)
    }
    30% {
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1
    }
    to {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.flipOutX {
    animation-name: O;
    animation-duration: .75s;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important
}

@keyframes P {
    0% {
        transform: perspective(400px)
    }
    30% {
        transform: perspective(400px) rotateY(-15deg);
        opacity: 1
    }
    to {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

.flipOutY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: P;
    animation-duration: .75s
}

@keyframes Q {
    0% {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }
    60% {
        transform: skewX(20deg);
        opacity: 1
    }
    80% {
        transform: skewX(-5deg);
        opacity: 1
    }
    to {
        transform: none;
        opacity: 1
    }
}

.lightSpeedIn {
    animation-name: Q;
    animation-timing-function: ease-out
}

@keyframes R {
    0% {
        opacity: 1
    }
    to {
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0
    }
}

.lightSpeedOut {
    animation-name: R;
    animation-timing-function: ease-in
}

@keyframes S {
    0% {
        transform-origin: center;
        transform: rotate(-200deg);
        opacity: 0
    }
    to {
        transform-origin: center;
        transform: none;
        opacity: 1
    }
}

.rotateIn {
    animation-name: S
}

@keyframes T {
    0% {
        transform-origin: left bottom;
        transform: rotate(-45deg);
        opacity: 0
    }
    to {
        transform-origin: left bottom;
        transform: none;
        opacity: 1
    }
}

.rotateInDownLeft {
    animation-name: T
}

@keyframes U {
    0% {
        transform-origin: right bottom;
        transform: rotate(45deg);
        opacity: 0
    }
    to {
        transform-origin: right bottom;
        transform: none;
        opacity: 1
    }
}

.rotateInDownRight {
    animation-name: U
}

@keyframes V {
    0% {
        transform-origin: left bottom;
        transform: rotate(45deg);
        opacity: 0
    }
    to {
        transform-origin: left bottom;
        transform: none;
        opacity: 1
    }
}

.rotateInUpLeft {
    animation-name: V
}

@keyframes W {
    0% {
        transform-origin: right bottom;
        transform: rotate(-90deg);
        opacity: 0
    }
    to {
        transform-origin: right bottom;
        transform: none;
        opacity: 1
    }
}

.rotateInUpRight {
    animation-name: W
}

@keyframes X {
    0% {
        transform-origin: center;
        opacity: 1
    }
    to {
        transform-origin: center;
        transform: rotate(200deg);
        opacity: 0
    }
}

.rotateOut {
    animation-name: X
}

@keyframes Y {
    0% {
        transform-origin: left bottom;
        opacity: 1
    }
    to {
        transform-origin: left bottom;
        transform: rotate(45deg);
        opacity: 0
    }
}

.rotateOutDownLeft {
    animation-name: Y
}

@keyframes Z {
    0% {
        transform-origin: right bottom;
        opacity: 1
    }
    to {
        transform-origin: right bottom;
        transform: rotate(-45deg);
        opacity: 0
    }
}

.rotateOutDownRight {
    animation-name: Z
}

@keyframes ab {
    0% {
        transform-origin: left bottom;
        opacity: 1
    }
    to {
        transform-origin: left bottom;
        transform: rotate(-45deg);
        opacity: 0
    }
}

.rotateOutUpLeft {
    animation-name: ab
}

@keyframes bb {
    0% {
        transform-origin: right bottom;
        opacity: 1
    }
    to {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0
    }
}

.rotateOutUpRight {
    animation-name: bb
}

@keyframes cb {
    0% {
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }
    20%, 60% {
        transform: rotate(80deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }
    40%, 80% {
        transform: rotate(60deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
        opacity: 1
    }
    to {
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

.hinge {
    animation-name: cb
}

@keyframes db {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate(-120deg)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.rollIn {
    animation-name: db
}

@keyframes eb {
    0% {
        opacity: 1
    }
    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0) rotate(120deg)
    }
}

.rollOut {
    animation-name: eb
}

@keyframes fb {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

.zoomIn {
    animation-name: fb
}

@keyframes gb {
    0% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInDown {
    animation-name: gb
}

@keyframes hb {
    0% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInLeft {
    animation-name: hb
}

@keyframes ib {
    0% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInRight {
    animation-name: ib
}

@keyframes jb {
    0% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInUp {
    animation-name: jb
}

@keyframes kb {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    to {
        opacity: 0
    }
}

.zoomOut {
    animation-name: kb
}

@keyframes lb {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    to {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomOutDown {
    animation-name: lb
}

@keyframes mb {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
    }
    to {
        opacity: 0;
        transform: scale(.1) translate3d(-2000px, 0, 0);
        transform-origin: left center
    }
}

.zoomOutLeft {
    animation-name: mb
}

@keyframes nb {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }
    to {
        opacity: 0;
        transform: scale(.1) translate3d(2000px, 0, 0);
        transform-origin: right center
    }
}

.zoomOutRight {
    animation-name: nb
}

@keyframes ob {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    to {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomOutUp {
    animation-name: ob
}

@keyframes pb {
    0% {
        transform: translateY(-100%);
        visibility: visible
    }
    to {
        transform: translateY(0)
    }
}

.slideInDown {
    animation-name: pb
}

@keyframes qb {
    0% {
        transform: translateX(-100%);
        visibility: visible
    }
    to {
        transform: translateX(0)
    }
}

.slideInLeft {
    animation-name: qb
}

@keyframes rb {
    0% {
        transform: translateX(100%);
        visibility: visible
    }
    to {
        transform: translateX(0)
    }
}

.slideInRight {
    animation-name: rb
}

@keyframes sb {
    0% {
        transform: translateY(100%);
        visibility: visible
    }
    to {
        transform: translateY(0)
    }
}

.slideInUp {
    animation-name: sb
}

@keyframes tb {
    0% {
        transform: translateY(0)
    }
    to {
        visibility: hidden;
        transform: translateY(100%)
    }
}

.slideOutDown {
    animation-name: tb
}

@keyframes ub {
    0% {
        transform: translateX(0)
    }
    to {
        visibility: hidden;
        transform: translateX(-100%)
    }
}

.slideOutLeft {
    animation-name: ub
}

@keyframes vb {
    0% {
        transform: translateX(0)
    }
    to {
        visibility: hidden;
        transform: translateX(100%)
    }
}

.slideOutRight {
    animation-name: vb
}

@keyframes wb {
    0% {
        transform: translateY(0)
    }
    to {
        visibility: hidden;
        transform: translateY(-100%)
    }
}

.slideOutUp {
    animation-name: wb
}

#page--hybrid7 .section#design:after, #page--hybrid9 .section#design .hotspots:after, #page--hybrid9 .section#design:after, #page--niteflood .section#design:after, #page--radialed .section#emergency-unit .feature-callout-container:after, #page--v50 .section#colour-temperature .colour-temp-comparison .colour-temp-comparison__annotation:after, .breadcrumbs:after, .clearfix:after, .media-grid__row .media-grid__item:after, .media-grid__row:after, .prev-next:after, .site-header:after, .split-comparison:after, .split-list:after, .sub-nav:after, .subscribe-form .mc-field-group:after, .subscribe-form:after, .subscribe .subscribe-form div.submit:after, .tab-group:after, .tabs:after {
    content: "";
    display: table;
    clear: both
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.text-left {
    text-align: left
}

img.aligncenter {
    margin-right: auto;
    margin-left: auto;
    display: block;
    clear: both
}

@media only screen and (min-width: 768px) {
    img.alignleft {
        margin-right: 60px;
        display: inline;
        float: left
    }

    img.alignright {
        margin-left: 60px;
        display: inline;
        float: right
    }
}

.float-left {
    float: left
}

.float-center {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto
}

.float-right {
    float: right
}

.center {
    margin: 0 auto
}

.no-margin-top {
    margin-top: 0
}

.no-margin-bottom {
    margin-bottom: 0
}

.margin-top {
    margin-top: 30px
}

.margin-bottom {
    margin-bottom: 30px
}

.margin-bottom-small {
    margin-bottom: calc-em(8px)
}

.margin-bottom-large {
    margin-bottom: calc-em(32px)
}

.no-padding-top {
    padding-top: 0
}

.no-padding-bottom {
    padding-bottom: 0
}

.padding-top {
    padding-top: 30px
}

.padding-top-small {
    padding-top: calc-em(8px)
}

.padding-top-large {
    padding-top: calc-em(32px)
}

.padding-bottom {
    padding-bottom: 30px
}

.padding-bottom-small {
    padding-bottom: calc-em(8px)
}

.padding-bottom-large {
    padding-bottom: calc-em(32px)
}

.break, .site-footer p.email {
    overflow-wrap: break-word;
    word-wrap: break-word;
    color: #808285;
}

.break, .site-footer p.email a{
    color: #808285;
    font-weight: bold;
}

.screen-reader {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.screen-reader-focusable:active, .screen-reader-focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto
}

[hidden] {
    display: none;
    visibility: hidden
}

.color-primary {
    color: #76b900 !important
}

.color-secondary {
    color: #001d68 !important
}

.color-black {
    color: #000 !important
}

.color-white {
    color: #fff !important
}

.color-grey-primary {
    color: #b0b7bc !important
}

.color-grey-secondary {
    color: #808285 !important
}

.color-grey-dark {
    color: #414042 !important
}

.color-info {
    color: #53b7e8 !important
}

.color-success {
    color: #76b900 !important
}

.color-attention {
    color: #f9ba00 !important
}

.color-warning {
    color: #ef7d00 !important
}

.color-failure {
    color: #df1a22 !important
}

.color-magenta {
    color: #f0f !important
}

.inverse .h1, .inverse .h2, .inverse .h3, .inverse .h4, .inverse .h5, .inverse h1, .inverse h2, .inverse h3, .inverse h4, .inverse h5, .inverse ol, .inverse p, .inverse ul {
    color: #fff
}

.inverse .h1:after, .inverse h1:after {
    background-color: #fff
}

.inverse p.subtitle:after, .inverse p.subtitle:before {
    background-color: hsla(0, 0%, 100%, .5)
}

.inverse .hotspots p {
    color: #808285
}

.light .h1, .light .h2, .light .h3, .light .h4, .light .h5, .light h1, .light h2, .light h3, .light h4, .light h5, .light ol, .light p, .light ul {
    color: #b0b7bc
}

.light .h1:after, .light .intro + .h2:before, .light .intro + h2 :before, .light h1:after {
    background-color: #b0b7bc
}

.light p.subtitle:after, .light p.subtitle:before {
    background-color: hsla(205, 8%, 71%, .5)
}

.light .hotspots p {
    color: #808285
}

.dark .h1, .dark .h2, .dark .h3, .dark .h4, .dark .h5, .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark ol, .dark p, .dark ul {
    color: #414042
}

.dark .h1:after, .dark .intro + .h2:before, .dark .intro + h2 :before, .dark h1:after {
    background-color: #414042
}

.dark p.subtitle:after, .dark p.subtitle:before {
    background-color: rgba(65, 64, 66, .5)
}

.dark .hotspots p {
    color: #808285
}

.dark .intro + .h2:before, .dark .intro + h2 :before, .white .h1, .white .h2, .white .h3, .white .h4, .white .h5, .white h1, .white h2, .white h3, .white h4, .white h5, .white li, .white ol, .white p, .white ul {
    color: #fff
}

.white .h1:after, .white .intro + .h2:before, .white .intro + h2:before, .white h1:after {
    background-color: #fff
}

.white p.subtitle:after, .white p.subtitle:before {
    background-color: hsla(0, 0%, 100%, .5)
}

.white .hotspots p {
    color: #808285
}

.white li, .white ul {
    border-color: hsla(0, 0%, 100%, .5)
}

.colour-primary {
    background-color: #76b900
}

.colour-secondary {
    background-color: #001d68
}

.colour-grey {
    background-color: hsla(205, 8%, 71%, .3)
}

.colour-grey .h1, .colour-grey .h2, .colour-grey .h3, .colour-grey .h4, .colour-grey .h5, .colour-grey h1, .colour-grey h2, .colour-grey h3, .colour-grey h4, .colour-grey h5, .colour-grey li, .colour-grey ol, .colour-grey p, .colour-grey ul {
    color: #414042
}

.colour-grey p.subtitle:after, .colour-grey p.subtitle:before {
    background-color: rgba(65, 64, 66, .5)
}

.colour-grey .hotspots p {
    color: #808285
}

.bkg-primary {
    background-color: #76b900;
    color: #fff
}

.bkg-primary .h1, .bkg-primary .h2, .bkg-primary .h3, .bkg-primary .h4, .bkg-primary .h5, .bkg-primary h1, .bkg-primary h2, .bkg-primary h3, .bkg-primary h4, .bkg-primary h5, .bkg-primary ol, .bkg-primary p, .bkg-primary ul {
    color: #fff
}

.bkg-primary .ui-list li {
    border-color: hsla(0, 0%, 100%, .5)
}

.bkg-primary .icon-list li:before {
    background-image: url(../images/arrow-right-icon-white.png)
}

.bkg-primary.button:focus, .bkg-primary.button:hover {
    background-color: #84c01a
}

.bkg-primary.button:active {
    background-color: #8bc426;
    transition: none
}

.bkg-secondary {
    background-color: #001d68
}

.bkg-grey-dark {
    background-color: #414042
}

.bkg-grey-mid {
    background-color: #808285
}

.bkg-grey-light {
    background-color: #b0b7bc
}

#page--hybrid7 .section#performance, #page--hybrid9 .section#performance, #page--oxford .section#endurance, #page--radialed .section#light-distribution, #page--radialed .section#performance, .bkg-black {
    background-color: #000
}

.bkg-white {
    background-color: #fff
}

.bkg-tint-1 {
    background-color: #f7f8f8
}

#page--fgled3 .section#features, #page--fgled6 .section#design, #page--fgled6 .section#fire-safety, #page--fgled10 .section#design, #page--levlink .section#hybrid-with-levlink, #page--radialed .section#design, #page--skypack .section#design, #page--skytile-surface .section#design, #page--skytile .section#design, .bkg-tint-2, .page-title, .subscribe {
    background-color: #eff1f2
}

.bkg-tint-3 {
    background-color: #e7e9eb
}

.bkg-tint-4 {
    background-color: #dfe2e4
}

.bkg-tint-5 {
    background-color: #d8dbde
}

#page--levlink .section#hybrid-switched-live, .bkg-tint-6 {
    background-color: #d0d4d7
}

.bkg-tint-7 {
    background-color: #c8cdd0
}

.bkg-tint-8 {
    background-color: #c0c5c9
}

.bkg-tint-9 {
    background-color: #b8bec3
}

#page--fgled3 .section#reliability, #page--radialed .section#emergency-unit, #page--skytile .section#colour-temperature, #page--skytile .section#installation, #page--skytile .section#refinement, .bkg-gradient-1 {
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, #e0e2e4);
    background-size: 50%;
    background-repeat: repeat-x;
    background-position: 0 100%
}

#page--skytile-surface .section#installation, .bkg-gradient-2 {
    background-image: linear-gradient(180deg, #e0e2e4 0, hsla(0, 0%, 100%, 0)), linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, #e0e2e4);
    background-size: 50%;
    background-repeat: repeat-x;
    background-position: 0 0, 0 100%
}

.bkg-gradient-3 {
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, #e0e2e4);
    background-size: 250px;
    background-repeat: repeat-x;
    background-position: 0 100%
}

#page--hybrid7 .section#levlink, #page--hybrid9 .section#levlink, .bkg-gradient-4 {
    background-image: linear-gradient(180deg, #bcbcbc 0, hsla(0, 0%, 100%, 0)), linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, #bcbcbc);
    background-position: 0 0, 0 100%;
    background-size: 1000px;
    background-repeat: repeat-x
}

#page--levlink .section#standard-connector, #page--levlink .section#switched-live-connector, .bkg-gradient-5 {
    background: linear-gradient(180deg, #e0e2e4 0, hsla(0, 0%, 100%, 0));
    background-size: 250px;
    background-repeat: repeat-x;
    background-position: 100% 0
}

.bkg-gradient-6 {
    background: linear-gradient(180deg, #e0e2e4 0, hsla(0, 0%, 100%, 0));
    background-size: 100%;
    background-repeat: repeat-x;
    background-position: 0 100%
}

/*body {*/
    /*box-shadow: 0 0 300px -30px rgba(0, 0, 0, .21)*/
/*}*/

[class^=grid-col] .demo-block {
    font-size: 12px;
    padding: 30px;
    background: #f7f8f8;
    border: 1px solid hsla(205, 8%, 71%, .3);
    margin-bottom: 30px
}

.demo-title {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    margin: 100px 0;
    padding: 30px;
    border-top: 1px solid hsla(205, 8%, 71%, .3);
    border-bottom: 1px solid hsla(205, 8%, 71%, .3)
}

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important
    }

    a, a:visited {
        text-decoration: underline
    }

    a[href]:after {
        content: " (" attr(href) ")"
    }

    abbr[title]:after {
        content: " (" attr(title) ")"
    }

    .ir a:after, a[href^="#"]:after, a[href^="javascript:"]:after {
        content: ""
    }

    blockquote, pre {
        border: 1px solid #999;
        page-break-inside: avoid
    }

    thead {
        display: table-header-group
    }

    img, tr {
        page-break-inside: avoid
    }

    img {
        max-width: 100% !important
    }

    @page {
        margin: .5cm
    }

    h2, h3, p {
        orphans: 3;
        widows: 3
    }

    h2, h3 {
        page-break-after: avoid
    }
}
/*# sourceMappingURL=maps/main.min.css.map */

.zztop{
    width: 100%;
    height: 10px;
    background: #028244;
}

.tijiao{
    width: 166px;height: 50px;margin: 0 auto;line-height: 50px;text-align: center;color: #ffffff;cursor: pointer;position: relative;top:30px;border:0;
}



@media  screen and (max-width:480px) {
    .tijiao{
        top: 0;
    }
}

a:hover{
    text-decoration: none !important;
}



.mydl{
    margin-top: 10px;
    float: right;
    margin-right: 100px;
}

.mydl dl dt{
    float: left;
    width: 130px;
    text-align: center;
    line-height: 32px;
}

.mydl dl dt a{
    color: #000000;
}

.en{
    float: right;
    margin-right: 65px;
    margin-top: 15px;
}


.en  a img{
    /*display: inline-block;*/
    width: 25px;
    height: 25px;
}

.fidt{
    display: none;
}

.dlclose{
    display: none;
}

.dlen{
    display: none;
}

.mydl{
    display: block;
}

@media screen and (max-width: 1170px){
    .mydl{
        display: none;
        margin: 0;
        /*float: none;*/
        width: 100%;
        /*padding-top: 120px;*/
        position:absolute;
        top: 0px;
        background-color:rgba(215,40,65,1);
        /*height: 100000px;*/
        z-index: 999999;
        /*padding-top: 50%;*/
        /*padding-top: 50%;*/
    }

    .dlclose{
        display: block;
        padding-top: 100px;
        position: relative;
        text-align: right;
        padding-bottom: 50px;
    }

    .fidt{
        display:block;
        margin-bottom: 20px;
    }

    .dlen{
        display: block;
    }


    .en{
        display: none;
    }
    .mydl dl dt{
        width: 100%;
        text-align: center;
        line-height: 36px;
    }

    .mydl dl dt a{
        color: #ffffff;
    }

    .triggers{
        top: 40px;
    }

}


@media screen and (min-width: 1170px) and (max-width: 1480px){
    .mydl dl dt{
        width: 110px;
    }

    .triggers{
        top: 63px;
    }


}





#fancybox-loading { position: fixed; top: 50%; left: 50%; width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; cursor: pointer; overflow: hidden; z-index: 1104; display: none; }
#fancybox-loading div { position: absolute; top: 0; left: 0; width: 40px; height: 480px; background-image: url(../images/fancybox.png); }
#fancybox-overlay { position: absolute; top: 0; left: 0; width: 100%; z-index: 1100; display: none; }
#fancybox-tmp { padding: 0; margin: 0; border: 0; overflow: auto; display: none; }
#fancybox-wrap { position: absolute; top: 0; left: 0; padding: 20px; z-index: 1101; outline: none; display: none; }
#fancybox-outer { position: relative; width: 100%; height: 100%; background: #fff; }
#fancybox-content { width: 0; height: 0; padding: 0; outline: none; position: relative; overflow: hidden; z-index: 1102; border: 0px solid #fff; }
#fancybox-hide-sel-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 1101; }
#fancybox-close { position: absolute; top: -15px; right: -25px; width: 30px; height: 30px; background: transparent url(../images/fancybox.png) -40px 0px; cursor: pointer; z-index: 1103; display: none; }
#fancybox-error { color: #444; font: normal 12px/20px Arial; padding: 14px; margin: 0; }
#fancybox-img { width: 100%; height: 100%; padding: 0; margin: 0; border: none; outline: none; line-height: 0; vertical-align: top; }
#fancybox-frame { width: 100%; height: 100%; border: none; display: block; }
#fancybox-left, #fancybox-right { position: absolute; bottom: 0px; height: 100%; width: 35%; cursor: pointer; outline: none; background: transparent url(../images/blank.gif); z-index: 1102; display: none; }
#fancybox-left { left: 0px; }
#fancybox-right { right: 0px; }
#fancybox-left-ico, #fancybox-right-ico { position: absolute; top: 50%; left: -9999px; width: 30px; height: 30px; margin-top: -15px; cursor: pointer; z-index: 1102; display: block; }
#fancybox-left-ico { background-image: url(../images/fancybox.png); background-position: -40px -30px; }
#fancybox-right-ico { background-image: url(../images/fancybox.png); background-position: -40px -60px; }
#fancybox-left:hover, #fancybox-right:hover { visibility: visible; /* IE6 */ }
#fancybox-left:hover span { left: 20px; }
#fancybox-right:hover span { left: auto; right: 20px; }
.fancybox-bg { position: absolute; padding: 0; margin: 0; border: 0; width: 20px; height: 20px; z-index: 1001; }
#fancybox-bg-n { top: -20px; left: 0; width: 100%; background-image: url(../images/fancybox-x.png); }
#fancybox-bg-ne { top: -20px; right: -20px; background-image:(../images/fancybox.png);
    background-position: -40px -162px; }
#fancybox-bg-e { top: 0; right: -20px; height: 100%; background-image: url(../images/fancybox-y.png); background-position: -20px 0px; }
#fancybox-bg-se { bottom: -20px; right: -20px; background-image: url(../images/fancybox.png); background-position: -40px -182px; }
#fancybox-bg-s { bottom: -20px; left: 0; width: 100%; background-image: url(../images/fancybox-x.png); background-position: 0px -20px; }
#fancybox-bg-sw { bottom: -20px; left: -20px; background-image: (../images/fancybox.png);
    background-position: -40px -142px; }
#fancybox-bg-w { top: 0; left: -20px; height: 100%; background-image: url(../images/fancybox-y.png); }
#fancybox-bg-nw { top: -20px; left: -20px; background-image: (../images/fancybox.png);
    background-position: -40px -122px; }
#fancybox-title { font-family: Helvetica; font-size: 12px; z-index: 1102; }
.fancybox-title-inside { padding-bottom: 10px; text-align: center; color: #333; background: #fff; position: relative; }
.fancybox-title-outside { padding-top: 10px; color: #fff; }
.fancybox-title-over { position: absolute; bottom: 0; left: 0; color: #FFF; text-align: left; }
#fancybox-title-over { padding: 10px; background-image: url(../images/fancy_title_over.png); display: block; }
.fancybox-title-float { position: absolute; left: 0; bottom: -20px; height: 32px; }
#fancybox-title-float-wrap { border: none; border-collapse: collapse; width: auto; }
#fancybox-title-float-wrap td { border: none; white-space: nowrap; }
#fancybox-title-float-left { padding: 0 0 0 15px; background: (../images/fancybox.png) -40px -90px no-repeat;
}
#fancybox-title-float-main { color: #FFF; line-height: 29px; font-weight: bold; padding: 0 0 3px 0; background: url(../images/fancybox-x.png) 0px -40px; }
#fancybox-title-float-right { padding: 0 0 0 15px; background: (../images/fancybox.png) -55px -90px no-repeat;
}