@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
@import url('font-awesome/css/font-awesome.min.css');
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; }
/* CSS Document */
body { line-height: 1.45em; font-size: 0.9375rem; font-size: 100%; font-family: 'Roboto', sans-serif, Arial, Helvetica, sans-serif; font-weight: 400;/* background-color:#c71633;*/ }
h1 { font-size: 1.5em; font-weight: 400; color: #000 }
h2 { font-size: 2.4em; font-weight: 700; color: #000; margin: 5% auto; }
h3, h4 { font-size: 1.125em; font-weight: 400; color: #000 }
h5, h6 { font-size: 1.125em; font-weight: 400 }
h1, h2, h3, h4, h5, h6 { display: block; margin: 0 auto 0.5rem auto }
h1, h2, h3, h4, h5, h6 { line-height: 1.25em }
p { color: #333; line-height: 1.5em; font-weight: 500 }
a { text-decoration: none; -moz-transition: color 0.25s ease, opacity 0.25s ease; -o-transition: color 0.25s ease, opacity 0.25s ease; -webkit-transition: color 0.25s ease, opacity 0.25s ease; transition: color 0.25s ease, opacity 0.25s ease }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a img { border: none; }
article a { word-wrap: break-word; word-break: keep-all; }
strong { font-weight: 700; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.txt-white { color: #fff; }
.txt-orange { color: #fe9900!important; }
.txt-green { color: #89a831 !important; }
.wrapper { width: 100%; max-width: 1680px; display: block; margin: auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/**brand-wrap****/
.banner { width: 100%; margin: 0px auto auto auto; display: -webkit-flex; display: flex; flex-wrap: wrap;  text-align: center; line-height: 2.5em;vertical-align: top; }
.banner-box-left { width: 100%; min-height: auto; margin: 0; padding:0; display: block; }
.banner-box-right { width: 100%;  margin: 0; padding:0; display: block; vertical-align:top; }
.grid { position: relative; clear: both; margin-top:0px; padding:0; list-style: none; text-align: center; }
/* Common style */
.grid figure { position: relative; float: left; overflow: hidden; margin:0px;  width: 50%; height:auto; background: #3085a3; text-align: center; cursor: pointer; vertical-align:top; }
.grid figure img { position: relative; display: block; height:auto;  width: 100%; opacity: 0.8; }
.grid figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; }
.grid figure figcaption, .grid figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.grid figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; }
/* For some effects it will show as a button */
.grid figure h2 span { font-weight: 700; }
.grid figure h2, .grid figure p { margin: 0; }
.grid figure p { letter-spacing:.3px; font-size: 50%; }

/***** Julia *****/
figure.effect-julia { background: #2f3238; vertical-align:top; }
figure.effect-julia img { max-width: none;  -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-backface-visibility: hidden; backface-visibility: hidden; vertical-align:top; }
figure.effect-julia figcaption { text-align: left; }
figure.effect-julia h2 { position: relative; padding:0em 2em 0em 0em; color:#fff;   word-spacing: -0.15em; font-size:1em; font-weight:400;}
figure.effect-julia p { display: inline-block; margin: 0 ; padding: .2em .4em; background: rgba(255,255,255,0.9); color: #2f3238; text-transform: none; font-weight: 500; font-size:65%; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-420px, 0, 0); transform: translate3d(-420px, 0, 0); }
figure.effect-julia p:first-child { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; }
figure.effect-julia:hover p:first-child { -webkit-transition-delay: 0s; transition-delay: 0s; }
figure.effect-julia:hover img { opacity: 0.4; -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); }
figure.effect-julia:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }



.depiction { width: 100%; display: block; margin: auto; padding: 5% 0 2%; }
.depiction p strong { color: #db0f31; font-weight: 500; }
.depiction-txt { width: 90%; display: block; margin: 1% auto auto auto; padding: 2% 0 0 0; vertical-align: top; }
.depiction-txt p, .depiction-wrap p { font-size: 1em; line-height: 1.75em; margin-bottom: 1.5em; color: #999; }
/**depiction-wrap****/
.depiction-wrap { width: 100%; margin: 2% auto; padding: 3% 0; display: -webkit-flex; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; vertical-align: top; justify-content: center; flex-wrap: wrap; }
.depiction-wrap h2, .news-box h2 { width: 96%; display: block; margin: 2% auto 1% auto; font-size: 2.5em; font-weight: 700; }
/*icon-set*/
a span.lamp, a span.tube, a span.industrial, a span.downlight, a span.panel, a span.desk, a span.street { background-image: url(../images/icon-list.svg); background-color: transparent; background-repeat: no-repeat; }
.series-icons { width: 90%; margin: 2% auto; display: -webkit-flex; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; vertical-align: top; justify-content: center; flex-wrap: wrap; }
.series-icons li { display: inline-block; margin: 1% auto; padding: 0; width: auto; font-weight: 700; text-align: -webkit-center;}
.series-icons li a { color: #717274; }
.series-icons li a span { display: block; width: 100px; height: 100px; margin-bottom: 10px; transition: all 0.3s ease 0s; background-color: transparent; border: solid 1px #e8e8e8; }
.series-icons li a span:hover { background-color: transparent; border: solid 1px #4ba82e; }
a span.lamp { background-position: -10px -26px; }
a span.lamp:hover { background-position: -10px -160px; }
a span.tube { background-position: -145px -26px; }
a span.tube:hover { background-position: -145px -170px; }
a span.industrial { background-position: -286px -26px; }
a span.industrial:hover { background-position: -286px -170px; }
a span.downlight { background-position: -444px -36px; }
a span.downlight:hover { background-position: -444px -170px; }
a span.panel { background-position: -594px -30px; }
a span.panel:hover { background-position: -594px -165px; }
a span.desk { background-position: -742px -30px; }
a span.desk:hover { background-position: -742px -170px; }
a span.street { background-position: -890px -28px; }
a span.street:hover { background-position: -890px -168px; }
/**brand-wrap****/
.brand-wrap { width: 100%; display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center; line-height: 2.5em; }
.brand-link { width: 100%; min-height: auto; margin: 0; padding: 100px 10%; display: block; background: url(../images/index/intro-1.jpg) no-repeat right top #f5f4f0; background-size: cover; }
.brand-link2 { width: 100%; min-height: auto; margin: 0; padding: 100px 10%; display: block; background: url(../images/index/intro-2.jpg) no-repeat left top #f5f4f0; background-size: cover; }
.brand-wrap h3 { font-size: 2.5em; font-weight: 700; color: #fff; }
.brand-wrap p { font-size: 1em; font-weight: 500; color: #fff; margin: 10px auto; }
.brand-link a, .brand-link2 a { color: #fff; }
.brand-link a:hover { color: #ff9900; }
/**News products*/
.intro { width: 100%; margin: 0px auto 3% auto; padding-top: 5%; vertical-align: top; display: -webkit-flex; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; background-image: linear-gradient(to top, #fff 50%, #f1f1ef 80%, #f1f1ef 100%); }
.promo { width: 100%; max-width: 1680px; margin: 5% auto; padding: 2% 0px; display: block; }
.promo div { width: 100%; margin: auto; clear: none; display: block; vertical-align: top; text-align: left; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; }
.promo div img { width: 45%; display: inline-block; margin: auto; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; }
.promo h3 { width: 100%; display: block; min-height: 4vh; color: #3c4545; font-weight: 500; word-wrap: break-word; word-break: keep-all; }
.promo div a h3:hover { color: #000; }
.promo span { display: inline-block; width: 50%; font-size: .9em; line-height: 1.5em; font-weight: 500; vertical-align: top; z-index: 999; }
.promo span p { color: #535959; min-height: 10vh; }
/***Hot News*/
.news-box { width: 100%; margin: 2% auto 0px; padding-top: 2%; display: block; vertical-align: top; }
.news-wrap { width: 100%; display: block; margin: 5% auto; padding: 0px; background: #f0f0f0; }
.news-wrap li { width: 100%; height: auto; display: block; margin: 0px auto; padding: 0px; display: block; overflow: hidden; }
.news-wrap li figure { margin: auto; padding:5px; width: 100%; height: auto; display: block; text-align: right; line-height: 0; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; }
.news-wrap li figure img { width: 100%; display: block; margin: 0 auto; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; }
.news-wrap li figure:hover img { background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); }
.inner { margin: 5% auto 1% 5%; width: 100%; display: block; vertical-align: top; }
.inner h3 { margin: 0 auto 5% auto; font-size: 1.65em; color: #333; text-align: left; font-weight: 700; }
.inner p { padding:1% 2%; font-size: 1em; line-height: 1.5em; color: #333; }
.inner a h3:hover, .inner a p:hover { color: #3187bc; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; }
.inner span { font-size: .8em; color: #999; }
/***title-wrap***/
.title { display: block; margin: 0 auto 1% auto; padding: 0px 0px 1% 0px; width: 100%; text-align: center; color: #000; font-weight: 700; }
.title::after { content: ""; display: block; width: 3%; height: 2px; margin: 30px auto auto auto; background: #000; }
@media (min-width:760px) {
h1 { font-size: 2.827em; }
.news-wrap li figure{width: 50%;display: inline-block; }
.inner {width: 40%; display: inline-block;}
}
@media (min-width: 1002px) {
.intro { font-size: 100%; }
.depiction-txt { width: 50%; }
.series-icons { width: 70%; }
.brand-link, .brand-link2 { width: 50%; min-height: 400px; display: inline-block; }
.pic { width: 100%; }
.banner-box-left, .banner-box-right { width: 50%; display: inline-block; }
figure.effect-julia h2 { padding:.5em 0em .5em 0em; font-size:1.35em; }
}
 @media (min-width: 1024px) {
 .news-wrap li figure {  width: 40%; }
.inner { margin:2% auto auto 5%; width: 50%; font-size:.9em; }

}
 @media (min-width: 1360px) {
  figure.effect-julia h2 {  padding:2em 2em .5em .5em; font-size:1.8em; }
.inner p { padding:1% 2%; font-size:1em; }

}

/* button --- */
.animate, .btn, .btn-border:before, .btn-border:after { -webkit-transition: all 0.3s; transition: all 0.3s; }
.btn { display: inline-block; line-height: 35px; margin: 8px; padding: 0 15px; font-size: 15px; position: relative; opacity: .999; border-radius: 3px; }
.btn-border { background-color: transparent; border: 2px solid #fff; color: #fff; font-weight: 500; }
.btn-border:before, .btn-border:after { content: ''; border-style: solid; border-color: #fede43; color: #000; position: absolute; z-index: 5; border-radius: 3px; box-sizing: content-box; }
.btn-border:before { width: 0; height: 100%; border-width: 2px 0 2px 0; top: -2px; left: 0; -webkit-transition-delay: 0.05s; transition-delay: 0.05s; }
.btn-border:after { width: 100%; height: 0; border-width: 0 2px 0 2px; top: 0; left: -2px; }
.btn-border:hover { background-color: transparent; }
.btn-border:hover:before { width: 100%; }
.btn-border:hover:after { height: 100%; }
.btn-border.btn-yellow:before, .btn-border.btn-yellow:after { border-color: #fff; }
.btn-border.btn-yellow:hover { color: #fff; }
.bigrounded { -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; }
.medium { font-size: 1.1em !important; padding: .5em 3em; width: 35%; margin: 0px 2%; }
.small { font-size: 1em !important; padding: 10px 18px; width: 25%; }
.black { background: #000; color: #5D7C89; margin-right: 15px; margin-bottom: 15px; padding: 5px 20px; font-size: 14px; line-height: 28px; border-radius: 30px; }
.black:hover { color: #fff; font-weight: 400; }
.btn-white { color: #fff; border: solid 1px rgba(255,255,255,1); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; }
.btn-white:hover { opacity: .5; }
.btn-white:active { color: #9a692d; background: #fff; }
.btn-orange { color: #fff; background: #ff9934; border: solid 1px #ff9934; font-weight: 700; }
.btn-orange:hover { background: #4ba82e; border: solid 1px #4ba82e; box-shadow: 0px 1px 6px rgba(51,153,51,.3); -webkit-transform: translateY(-5px); transform: translateY(-5px); }
.btn-orange:active { color: #000; }
.btn-green { color: #fff; background: #89a831; border: solid 1px #89a831; font-weight: 700; }
.btn-green:hover { background: #4ba82e; border: solid 1px #4ba82e; box-shadow: 0px 1px 6px rgba(51,153,51,.3); -webkit-transform: translateY(-5px); transform: translateY(-5px); }
.btn-green:active { color: #000; }
/* video */
.video-container {display: flex;justify-content: center;}
@media (min-width: 992px) {
.video-container {position: relative;padding-bottom: 50.25%;padding-top: 20px;height: 0;overflow: hidden;top: -8px;}
.video-container iframe, .video-container object, .video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
}
/* width size*/
.row { margin-right: -15px; margin-left: -15px; }
.row .columns-padding { padding: 0 !important; }
.columns { display: inline-block; vertical-align: top; }
.col-1 { width: 8.333333333%; }
.col-2 { width: 16.666666667%; }
.col-3 { width: 24%; }
.col-4 { width: 33.333333333%; }
.col-5 { width: 41.666666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.333333333%; }
.col-8 { width: 66.666666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.333333333%; }
.col-11 { width: 91.666666667%; }
.col-12 { width: 100%; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }