/*Aquarium Slider Page */
    #input-aq::-webkit-slider-runnable-track {
      background: blue;
      background: linear-gradient(90deg, #cccccc, blue);
    }
    #input-aq::-moz-range-track {
      background:blue;
      background: linear-gradient(90deg, #cccccc, blue);
    }
    
    #input-aq::-ms-fill-upper {
      background: blue;
      background: linear-gradient(90deg, #cccccc, blue);
    }
    
    #input-aq:focus::-ms-fill-lower {
      background: blue;
      background: linear-gradient(90deg, #cccccc, blue);
    }
    /*END Aquarium Slider Page */

/*High CRI Page */


        .homebg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-position: 50%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50% 0px;
                background-image: url(/img/hp_banner.jpg);
        }
         .genericCover {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-position: 50%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50% 0px;
        }       
        .hh {
            position:absolute;color:white;top:45%;left:0;right:0;
        }
        .rgb .hh {
            position:absolute;color:white;top:75%;left:0;right:0;
        }
        #filmbg {
            position: relative;
            display:block;
            background-image: url(/img/filmbg.jpg);
            
        }
        .lux24 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-position: 50%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50% 0px;
                background-image: url(/img/24lux.jpg);
        }
        .circadianwhite {
                        position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-position: 50%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50% 0px;
                background-image: url(/img/circadianwhite.jpg);
            
            
        }
        .abs1 {
            
            
            font-weight:900;font-size:150px;margin-bottom:0px;margin-left:18px;margin-right:8px;
        }
        .line1 {
            font-weight:1500;font-size:145px;margin-bottom:0px;margin-left:10%;
            
        }
        
        .line2 {
            margin-top:-24px;
            margin-bottom:0px;
            font-size:75px;margin-left:10%;
            
        }
        
        .line3 {
            margin-top:4px;
            font-size:25px;
            margin-left:10%;
            
        }
        .stripbg .hh .line1 {
            font-weight:1500;font-size:90px;margin-bottom:0px;margin-left:10%;
            
        }
        
        .stripbg .hh .line2 {
            margin-top:-24px;
            margin-bottom:0px;
            font-size:30px;margin-left:10%;
            
        }        
        @media(max-width:1200px) {
            
                .line1, .abs1 {
                    font-weight:1500;font-size:125px;margin-bottom:0px;margin-left:10%;
            
                }

                .line2 {
                    margin-top:-24px;
                    margin-bottom:0px;
                    font-size:65px;margin-left:10%;

                }

                .line3 {
                    margin-top:4px;
                    font-size:20px;
                    margin-left:10%;

                }
                
                

        }
        
        
        @media(max-width:960px) {
            
                .line1, .abs1 {
                    font-weight:1500;font-size:105px;margin-bottom:0px;margin-left:10%;
            
                }

                .line2 {
                    margin-top:-24px;
                    margin-bottom:0px;
                    font-size:55px;margin-left:10%;

                }

                .line3 {
                    margin-top:4px;
                    font-size:16px;
                    margin-left:10%;

                }
                
               .stripbg .hh .line1 {
                    font-weight:1500;font-size:105px;margin-bottom:0px;margin-left:10%;
            
                }

                .stripbg .hh .line2 {
                    margin-top:-24px;
                    margin-bottom:0px;
                    font-size:55px;margin-left:10%;

                }
        }
        
          @media(max-width:825px) {
            
                .line1, .abs1 {
                    font-weight:1500;font-size:65px;margin-bottom:0px;margin-left:10%;
            
                }

                .line2 {
                    margin-top:-18px;
                    margin-bottom:0px;
                    font-size:35px;margin-left:10%;

                }

                .line3 {
                    margin-top:4px;
                    font-size:14px;
                    margin-left:10%;

                }
                
                .stripbg .hh .line1 {
                    font-weight:1500;font-size:65px;margin-bottom:0px;margin-left:10%;
            
                }

                .stripbg .hh .line2 {
                    margin-top:-18px;
                    margin-bottom:0px;
                    font-size:35px;margin-left:10%;

                }

        }      
        
        @media(max-width:540px) {
            
                .line1, .abs1 {
                    font-weight:1500;font-size:45px;margin-bottom:0px;margin-left:4%;
            
                }

                .line2 {
                    margin-top:-14px;
                    margin-bottom:0px;
                    font-size:25px;margin-left:4%;

                }

                .line3 {
                    margin-top:4px;
                    font-size:12px;
                    margin-left:4%;

                }
                .hh {
                    bottom:10%;
                }
                
                .stripbg .hh .line1 {
                    font-weight:1500;font-size:45px;margin-bottom:0px;margin-left:4%;
            
                }

                .stripbg .hh .line2 {
                    margin-top:-14px;
                    margin-bottom:0px;
                    font-size:25px;margin-left:4%;

                }
        }
    .bg-hi {

            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-position: 50%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50% 0px;
            background-image: url(/img/rainbow-smoke-low-1920.jpg);
    }
    
    .bg-hi2 {

            position: absolute;
            top: 50px;
            left: 0;
            width: 100%;
            height: 100vh;
            background-position: 50%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50% 0px;
            background-image: url(/img/rainbow-abstract-3.jpg);
    }    
    .cribg2 .introPage {
        font-size:80px;
        background-position: 90% 0px;
    }
    .jewelrybg {

            background-image: url(/img/jewelry-1900.jpg);
    }
    .fsbg {
          position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-position: 50%;
            background-size: 100% 10%;
            background-repeat: no-repeat;
            background-color:black;
    }
    
    .stripbg {

            background-image: url(/img/HIGH-CRI-LED-STRIP-TOP.jpg);
    }
    .stripbg .introPage {
        color:black;
    }
    .stripbg .line1 {
/*        font-size:105px;*/
    }
    .jewelrybg .cri {
        position:absolute;color:black;top:40%;left:0;right:0;text-align:left;
    }
    .jewelrybg .cri .head {
        font-weight:900;font-size:35px;margin-bottom:0px;margin-left:10%;margin-right:8px;
    }
    .jewelrybg .cri .para {
        margin-top:4px;margin-left:10%;
    }
    .blackHeader {
                    position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            
             background-color:black;
    }
    .homeHeader {
        background:white;
        z-index:-1;
        background: linear-gradient(0deg, #e55d87, #5fc3e4);
        background-size: 400% 400%;
        animation: Gradient 4s linear infinite;
        height:70vh;
    }
    #bulb {
            position: absolute;
            top: 0;
            bottom: 0;
            right:4%;
            margin: auto;
            width:28%;
    }
    #line1, #line2 {
        font-size:200px;
    }

    #line5, #line6 {
        font-size:120px;
    }
    #line7, #line8 {
        display:none;
    }

    .desktopHeader {
        display:block;
    }

    .dtHeader {
        display:table;
    }
    @media(max-width:680px) {
    .dtHeader {
        display:none;
    }        
    }
    #line4, #line3 {
        display:none;
    }
    .mobileHeader {
         display:none;
    }
    @media(max-width:1366px) {
        #line1, #line2, #line7, #line8{
            display:none;
        }
        #line4, #line3 {
            display:block;
            font-size:160px;
        }

    }
    @media(max-width:960px) {
        
        .jewelrybg {

                background-image: url(/img/jewelry-960.jpg);
        }
        .jewelrybg .cri {
            position:absolute;color:black;top:20%;left:0;right:0;text-align:center;
        }
        .jewelrybg .cri .head {
            font-weight:900;font-size:35px;margin-bottom:0px;margin-left:8px;margin-right:8px;
        }
        .jewelrybg .cri .para {
            margin-top:4px;margin-left:8px;
        }
    }
    @media(max-width:680px) {
        #bulb {
            position: absolute;
            top: 10%;
            bottom: unset;
            right:0;
            left:0;
            margin: auto;
            width:50%;
        }
        .desktopHeader {
           display:none;
        }
        
        #line4, #line3 {
            display:none;
        
        }
        .mobileHeader {
            display:block;
        }
/*        svg text {
            text-anchor: middle;
        }
        */
        .cribg {

                background-image: url(/img/rainbow-smoke-low-600.jpg);
        }
        
        .cribg2 {

                background-image: url(/img/rainbow-abstract-mobile.jpg);
        }
        .cribg2 .introPage {
            font-size:40px;
        }
        .stripbg {

                background-image: url(/img/HIGH-CRI-LED-STRIP-TOP-600.jpg);
        }        

    }
    @media(max-width:425px) {
        #bulb {
            position: absolute;
            top: 15%;
            bottom: unset;
            right:0;
            left:0;
            margin: auto;
            width:80%;
        }
        #line5, #line6 {
        font-size:90px;
        }
/*        svg text {
            text-anchor: middle;
        }*/
        .cribg {

                background-image: url(/img/rainbow-smoke-low-450.jpg);
        }
        .stripbg {

                background-image: url(/img/HIGH-CRI-LED-STRIP-TOP-600.jpg);
        } 
}
    @media(min-width:600px) and (orientation: portrait) {
        #line4, #line3 {
            display:none;
            
        }
        #line7, #line8 {
            display:block;
            font-size:90px;
        }
    }
/*    svg {
    width: 100%;
    height: 100%;
    position:absolute;
    }
    svg text {
        text-anchor: left;
    }
    svg mask rect {
        fill: rgba(255, 255, 255, 1);
    }
    svg > rect {
        fill: white;
        -webkit-mask: url(#mask);
        mask: url(#mask);
    }*/
    .homeBody {

    }
    @keyframes Gradient {
        0%{background-position:50% 0%}
        50%{background-position:50% 100%}
        100%{background-position:50% 0%}
    }
    .bg-about {
        background-image: url(/img/about-header.jpg);
    }
    .bg-filmgrade {
        background-image: url(/img/led-strip-zoom-2x-3.jpg);
    }
        #categories{
          overflow:hidden;
          width:90%;
          margin:0 auto;
          -webkit-padding-start: 0px;
        }
        .clr:after{
          content:"";
          display:block;
          clear:both;
        }
        #categories li{
          position:relative;
          list-style-type:none;
          width:27.85714285714286%; /* = (100-2.5) / 3.5 */
          padding-bottom: 32.16760145166612%; /* =  width /0.866 */
          float:left;
          overflow:hidden;
          visibility:hidden;
          margin-bottom:0px;
          -webkit-transform: rotate(-60deg) skewY(30deg);
          -ms-transform: rotate(-60deg) skewY(30deg);
          transform: rotate(-60deg) skewY(30deg);
        }
        #categories li:nth-child(3n+2){
          margin:0 1%;
        }
        #categories li:nth-child(6n+4){
          margin-left:0.5%;
        }
        #categories li:nth-child(6n+4), #categories li:nth-child(6n+5), #categories li:nth-child(6n+6) {
                margin-top: -6.9285714285%;
          margin-bottom: -6.9285714285%;

          -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
          -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
          transform: translateX(50%) rotate(-60deg) skewY(30deg);
        }
        #categories li:nth-child(6n+4):last-child, #categories li:nth-child(6n+5):last-child, #categories li:nth-child(6n+6):last-child{
          margin-bottom:0%;
        }
        #categories li *{
          position:absolute;
          visibility:visible;
        }
        #categories li > div{
          width:100%;
          height:100%;
          text-align:center;
          color:#fff;
          overflow:hidden;

          -webkit-transform: skewY(-30deg) rotate(60deg);
          -ms-transform: skewY(-30deg) rotate(60deg);
          transform: skewY(-30deg) rotate(60deg);

                -webkit-backface-visibility:hidden;

        }

        /* HEX CONTENT */
        #categories li img{
          left:-100%; right:-100%;
          width: auto; height:100%;
          margin:0 auto;   
        }

        #categories div h1, #categories div p{
          width:90%;
          padding:0 5%;
          background-color:#008080; background-color: rgba(0, 128, 128, 0.8);
          font-family: 'Raleway', sans-serif;

          -webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
          -ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
          transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
        }
        #categories li h1{
          bottom:110%;
          font-style:italic;
          font-weight:normal;
          font-size:1.5em;
          padding-top:100%;
          padding-bottom:100%;
        }
        #categories li h1:after{
                content:'';
          display:block;
          position:absolute;
          bottom:-1px; left:45%;
          width:10%;
          text-align:center;
          z-index:1;
          border-bottom:2px solid #fff;
        }
        #categories li p{
                padding-top:50%;
                top:110%;
                padding-bottom:50%;
        }


        /* HOVER EFFECT  */

        #categories li div:hover h1 {
          bottom:50%;
          padding-bottom:10%;
        }

        #categories li div:hover p{
          top:50%;
          padding-top:10%;
        }
        #fork{
          position:fixed;
          top:0;
          left:0;
          color:#000;
          text-decoration:none;
          border:1px solid #000;
          padding:.5em .7em;
          margin:1%;
          transition: color .5s;
          overflow:hidden;
        }
        #fork:before {
          content: '';
          position: absolute;
          top: 0; left: 0;
          width: 130%; height: 100%;
          background: #000;
          z-index: -1;
          transform-origin:0 0 ;
          transform:translateX(-100%) skewX(-45deg);
          transition: transform .5s;
        }
        #fork:hover {
          color: #fff;
        }
        #fork:hover:before {
          transform: translateX(0) skewX(-45deg);
        }

        .skills {
          width: 70%;
          max-width: 960px;
          height: 550px;
          margin:0 auto;
          position: relative;
        }

        .lines {
          height: 100%;
          position: relative;
        }
        .line {
          height: inherit;
          width: 2px;
          position: absolute;
          background: rgba(238, 238, 238, 0.6);
        }
        .line.l--0 {
          left: 0;
        }
        .line.l--25 {
          left: 25%;
        }
        .line.l--50 {
          left: 50%;
        }
        .line.l--75 {
          left: 75%;
        }
        .line.l--100 {
          left: calc(100% - 1px);
        }
        .line__label {
          display: block;
          width: 100px;
          text-align: center;
          position: absolute;
          bottom: -60px;
          right: -50px;
        }
        .line__label.title {
          text-transform: uppercase;
          font-weight: bold;
        }
        .charts {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 10;
        }
        .chart {
          margin: 30px 0 0;
        }
        .chart:first-child {
          margin: 0;
        }
        #chart__title {
          display: block;
          margin: 0 auto;
          padding:20px;
          font-weight: bold;
          opacity: 0;
          animation: 1s anim-lightspeed-in ease forwards;
        }
        .chart--prod #chart__title {
          animation-delay: 3.3s;
        }
        .chart--design #chart__title {
          animation-delay: 4.5s;
        }
        .chart--horiz {
          overflow: hidden;
          -webkit-padding-start: 0px;
        }
        .chart__bar {
          height: 30px;
          margin-bottom: 4px;
          
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
          opacity: 0;
          animation: 1s anim-lightspeed-in ease forwards;
        }

        .chart--dev .chart__bar:nth-of-type(15) {
          animation-delay: 3.5s;
        }
        .chart--dev .chart__bar:nth-of-type(14) {
          animation-delay: 3.3s;
        }
        .chart--dev .chart__bar:nth-of-type(13) {
          animation-delay: 3.1s;
        }
        .chart--dev .chart__bar:nth-of-type(12) {
          animation-delay: 2.9s;
        }
        .chart--dev .chart__bar:nth-of-type(11) {
          animation-delay: 2.7s;
        }
        .chart--dev .chart__bar:nth-of-type(10) {
          animation-delay: 2.5s;
        }
        .chart--dev .chart__bar:nth-of-type(9) {
          animation-delay: 2.3s;
        }
        .chart--dev .chart__bar:nth-of-type(8) {
          animation-delay: 2.1s;
        }
        .chart--dev .chart__bar:nth-of-type(7) {
          animation-delay: 1.9s;
        }
        .chart--dev .chart__bar:nth-of-type(6) {
          animation-delay: 1.7s;
        }
        .chart--dev .chart__bar:nth-of-type(5) {
          animation-delay: 1.5s;
        }
        .chart--dev .chart__bar:nth-of-type(4) {
          animation-delay: 1.3s;
        }
        .chart--dev .chart__bar:nth-of-type(3) {
          animation-delay: 1.1s;
        }
        .chart--dev .chart__bar:nth-of-type(2) {
          animation-delay: 0.9s;
        }
        .chart--dev .chart__bar:nth-of-type(1) {
          animation-delay: 0.7s;
        }
        .chart__label {
          padding-left: 10px;
          line-height: 30px;
          color: black;
        }
        
        @media(max-width:650px) {
                .skills {
                  height:220px;
                } 
                .chart__bar {
                  height: 14px;
                  margin-bottom: 2px;
                  margin-top:2px;
                }
                .chart__label {
                  padding-left: 10px;
                  font-size:8px;
                  line-height: 10px;
                  color: black;
                  vertical-align:top;
                }
        }
        @keyframes anim-lightspeed-in {
          0% {
            transform: translateX(-200%);
            opacity: 1;
          }
          100% {
            transform: translateX(0);
            opacity: 1;
          }
        }
        .introPage {
            /*-webkit-animation:colorchange 4s 1 alternate;*/
            
    }

    @-webkit-keyframes colorchange {
      0% {
        
        color: black;
      }
      

      
      100% {
        
        color: white;
      }
    }
    
    

    
    
    .noColorLink {
        color:black;
        text-decoration:none;
    }
        .blog-card {
          transition: height 0.3s ease;
          -webkit-transition: height 0.3s ease;
          background: #fff;
          border-radius: 3px;
          box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
          margin: 0 auto 1.6%;
          overflow: hidden;
          position: relative;
          font-size: 14px;
          line-height: 1.45em;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        .blog-card:hover .details {
          left: 0;
        }
        .blog-card:hover.alt .details {
          right: 0;
        }
        .blog-card.alt .details {
          right: -100%;
          left: inherit;
        }
        .blog-card .photo {
          height: 200px;
          position: relative;
        }
        .blog-card .photo.photo1 {
          background: url("/img/photography.jpg") center no-repeat;
          background-size: cover;
        }
        .blog-card .photo.photo2 {
          background: url("/img/horticulture.jpg") center no-repeat;
          background-size: cover;
        }
        .blog-card .photo.photo3 {
          background: url("/img/painting.jpg") center no-repeat;
          background-size: cover;
        }
        .blog-card .photo.photo4 {
          background: url("/img/aquarium.jpg") center no-repeat;
          background-size: cover;
        }
        .blog-card .photo.photo6 {
          background: url("/img/jewelry-display.jpg") center no-repeat;
          background-size: cover;
        }
        .blog-card .photo.photo5 {
          background: url("/img/home-residential.jpg") center no-repeat;
          background-size: cover;
        }
  
        .blog-card .details {
          transition: all 0.3s ease;
          -webkit-transition: all 0.3s ease;
          background: rgba(0, 0, 0, 0.6);
          box-sizing: border-box;
          color: #fff;
          font-family: "Open Sans";
          list-style: none;
          margin: 0;
          padding: 10px 15px;
          height: 200px;
          /*POSITION*/
          position: absolute;
          top: 0;
          left: -100%;
        }
        .blog-card .details > li {
          padding: 3px 0;
        }
        .blog-card .details li:before, .blog-card .details .tags ul:before {
          font-family: "Open Sans";
          margin-right: 10px;
          vertical-align: middle;
        }
        .blog-card .details .author:before {
          content: "\f007";
        }
        .blog-card .details .date:before {
          content: "\f133";
        }
        .blog-card .details .tags ul {
          list-style: none;
          margin: 0;
          padding: 0;
        }
        .blog-card .details .tags ul:before {
          content: "\f02b";
        }
        .blog-card .details .tags li {
          display: inline-block;
          margin-right: 3px;
        }
        .blog-card .details a {
          color: inherit;
          border-bottom: 1px dotted;
        }
        .blog-card .details a:hover {
          /*color: #75d13b;*/
        }
        .blog-card .description {
          padding: 10px;
          box-sizing: border-box;
          position: relative;
        }
        .blog-card .description h1 {
          font-family: "Open Sans";
          line-height: 1em;
          margin: 0 0 10px 0;
        }
/*        .blog-card .description h2 {
          color: #9b9b9b;
          font-family: "Open Sans";
          line-height: 1.2em;
          text-transform: uppercase;
          font-size: 1em;
          font-weight: 400;
          margin: 1.2% 0;
        }*/
        .blog-card .description p {
          position: relative;
          margin: 0;
          padding-top: 20px;
        }
        .blog-card .description p:after {
          content: "";
         
          height: 6px;
          width: 40px;
          /*POSITION*/
          position: absolute;
          top: 6px;
          left: 0;
        }
        .blog-card .description a {
   
          margin-bottom: 10px;
          float: right;
        }
/*        .blog-card .description a:after {
          transition: all 0.3s ease;
          -webkit-transition: all 0.3s ease;
          content: "\f061";
          font-family: FontAwesome;
          margin-left: -10px;
          opacity: 0;
          vertical-align: middle;
        }
        .blog-card .description a:hover:after {
          margin-left: 5px;
          opacity: 1;
        }*/
        @media screen and (min-width: 1660px) {
          .blog-card {
            height: 220px;
            max-width: 600px;
          }
          .blog-card:hover .photo {
            transform: rotate(5deg) scale(1.3);
          }
          .blog-card:hover.alt .photo {
            transform: rotate(-5deg) scale(1.3);
          }
          .blog-card.alt .details {
            padding-left: 30px;
          }
          .blog-card.alt .description {
            float: right;
          }
          .blog-card.alt .description:before {
            transform: skewX(5deg);
            right: -15px;
            left: inherit;
          }
          .blog-card.alt .photo {
            float: right;
          }
          .blog-card .photo {
            transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            float: left;
            height: 100%;
            width: 40%;
          }
          .blog-card .details {
            width: 40%;
          }
          .blog-card .description {
            float: left;
            width: 60%;
            z-index: 0;
          }
          .blog-card .description:before {
            transform: skewX(-5deg);
            content: "";
            background: #fff;
            width: 100%;
            z-index: -1;
            /*POSITION*/
            position: absolute;
            left: -15px;
            top: 0;
            bottom: 0;
          }
        }
        
        
        
        
        .button-wrap {
          position: relative;
          text-align: center;
          top: 50%;
          margin-top: -2.5em;
        }
        @media (max-width: 40em) {
          .button-wrap {
            margin-top: -1.5em;
          }
        }

        .button-label {
          display: inline-block;
          width:40%;
          padding: 10px;
          margin: 0.5em;
          cursor: pointer;
          color: white;
          border-radius: 0.25em;
          background: black;
/*          -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
                  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);*/
          -webkit-transition: 0.3s;
          transition: 0.3s;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
            border-color: white;
            border-width: 1px;
            border-style: solid;
        }
        @media (max-width:960px) {
            .button-label {
                width:60%;
            }
        }
        @media (max-width:650px) {
            .button-label {
                width:80%;
            }
        }
        .button-label:hover {
          background: white;
          color: black;
/*          -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32);
                  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32);*/
        }
        .button-label:active {
          -webkit-transform: translateY(2px);
                  transform: translateY(2px);
/*          -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);
                  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);*/
        }
        @media (max-width: 40em) {
          .button-label {
            padding: 0em 1em 3px;
            margin: 0.25em;
          }
        }

        .hidden:checked + .button-label {
          background: white;
          color: black;
        }
        .button-label:hover {
          background: white;
          color: black;
        }


        .hidden {
          display: none;
        }

        
        
        
        
     
        .button-labelBlack {
          display: inline-block;
          width:40%;
          padding: 10px;
          margin: 0.5em;
          cursor: pointer;
          color: black;
          border-radius: 0.25em;
          background: white;
/*          -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
                  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);*/
          -webkit-transition: 0.3s;
          transition: 0.3s;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
            border-color: black;
            border-width: 1px;
            border-style: solid;
        }
        @media (max-width:960px) {
            .button-labelBlack {
                width:60%;
            }
        }
        @media (max-width:650px) {
            .button-labelBlack {
                width:80%;
            }
        }
        .button-labelBlack:hover {
          background: black;
          color: white;
/*          -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32);
                  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32);*/
        }
        .button-labelBlack:active {
          -webkit-transform: translateY(2px);
                  transform: translateY(2px);
/*          -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);
                  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);*/
        }
        @media (max-width: 40em) {
          .button-labelBlack {
            padding: 0em 1em 3px;
            margin: 0.25em;
          }
        }

        .hiddenBlack:checked + .button-labelBlack {
          background: black;
          color: white;
        }
        .button-labelBlack:hover {
          background: black;
          color: white;
        }


        .hiddenBlack {
          display: none;
        }

    /* END High CRI Page */
    
/* Testimonials blockquote */


.containerS {
  background: #fff;
 
  max-width: 480px;
padding-top:0px;
padding-bottom:0px;
  margin: 2em auto 0;
  padding: 1.5em;
      font-size: 150%;
    color: grey;
}

p { margin-bottom: 1.5em; }
p:last-child { margin-bottom: 0; }

blockquote {
  display: block;
  border-width: 2px 0;
  border-style: solid;
  border-color: #eee;
  padding: 1.5em 0 0.5em;
  margin: 1.5em 0;
  position: relative;
}
blockquote:before {
  content: '\201C';
  position: absolute;
  top: 0em;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 3rem;
  height: 2rem;
  font: 6em/1.08em 'PT Sans', sans-serif;
  color: #666;
  text-align: center;
}
blockquote:after {
  content: "\2013 \2003" attr(cite);
  display: block;
  text-align: right;
  font-size: 12px;
  color: #e74c3c;
}


/* END Testimonials blockquote */

#avian {
    background-image:url('/img/bird-blue-tit-cute-34096.jpg');
}


#uvh1 {font-size:95px;font-weight:900;margin-bottom:0px;margin-left:8px;margin-right:8px;}
@media(max-width:600px) {
    #uvh1 {font-size:25px;}
    #uvh2 {font-size:10px;}
}
#uv {
    background-image:url('/img/realUV.jpg');
}

#northlux {
    background-image:url('/img/northlux-cover.jpg');
}