/* CSS Document */
      .layout-canvas-a {
        background-color: #FFFFFF;
        border: none;
        box-sizing: border-box;
        padding: 0px;
        width: 100%;
        max-width: 900px;
        margin: 0px auto;
      }
      .layout-canvas-a > .header, .layout-canvas-a > .section, .layout-canvas-a > .footer {
        position: relative;
        overflow: hidden;
        width: 100%;
        overflow-wrap: break-word;
      }
      .layout-canvas-a > .section {
        margin: 10px 0px;
      }
      .layout-canvas-a > .section > .columns {
        box-sizing: border-box;
        overflow-wrap: break-word;
      }
      body {
        color: #000000;
        font-family: Helvetica-Neue, Helvetica, Arial, sans-serif;
        font-size: 15px;
        margin: 0px;
      }
      *:focus {
        outline: 2px dotted #53555c;
        border: none;
      }
      #lutronFooter *:focus {
        outline: 2px dotted #ffffff;
        border: none;
      }
      * {
        box-sizing: border-box;
      }
      body {
        padding: 0px;
        margin: 0px;
        background: #ffffff;
        color: #000000;
        font-family: Helvetica-Neue, Helvetica, Arial, sans-serif;
        font-size: 15px;
      }
      h1, h2, h3, h4 {
        color: #000000;
        font-family: Helvetica-Neue, Helvetica, Arial, sans-serif;
        margin: 0px 0px 0px 0px;
      }
      h1 {
        font-size: 250%;
        margin: 0px 0px 20px 0px;
      }
      h2 {
        font-size: 200%;
        margin: 0px 0px 30px 0px;
      }
      h3 {
        font-size: 125%;
        margin: 0px 0px 15px 0px;
      }
      h4 {
        font-size: 18px;
      }
      p, ol, ul, li {
        color: #000000;
        font-family: Helvetica-Neue, Helvetica, Arial, sans-serif;
        font-size: 15px;
        margin: 0px 0px 20px 0px;
        line-height: 1.5;
        color: #000000;
      }
      p {
        margin: 0px 0px 5px 0px;
      }
      ul, ol {
        margin: 0px 0px 20px 0px;
        padding-left: 20px;
      }
      p a {
        text-decoration: none;
        color: #1a73e8;
        padding: 0px;
        transition: .5s;
      }
      sup {
        vertical-align: 2px;
      }
      a:hover {
        text-decoration: none;
        padding: 0px 0px 3px 0px;
      }
      a img {
        border: none;
      }
      .wrapper {
        width: 100%;
        max-width: 1200px;
        margin: 0px auto;
        box-sizing: border-box;
        overflow:hidden;
      }
       .wrapperRepDisclaimer {
        width: 100%;
        max-width: 700px;
        margin: 0px auto;
        box-sizing: border-box;
        overflow:hidden;
      }
      .wrapper div {
        padding: 0px;
      }
      .clearFix:after {
        content: "";
        display: table;
        clear: both;
      }
      /* 0 - GLOBAL */
      .col2-4 {
        width: 50%;
        float: left;
        padding-right: 50px;
      }
      .col1-4 {
        width: 25%;
        float: left;
      }
      .col3-4 {
        width: 75%;
        float: right;
      }
      #one {
        float:left;
        margin:auto;
        width:50%;
      }
      #two {
        overflow:hidden;
        margin:auto;
      }
      #columnone {
        float:left;
        margin:auto;
        width:350px;
        text-align:right;
      }
      #columntwo {
        overflow:hidden;
        margin:auto;
        width:350px;
        text-align:right;
      }
      #pref {
        height:65px;
      }
      #prefone {
        float:left;
        margin:auto;
        width:350px;
      }
      #preftwo {
        overflow:hidden;
        margin:auto;
        width:350px;
      }
       #three {
        margin-right:10px;
        margin-left:10px;
        width:75%;
      }
      #one3 {
        float:left;
        margin-right:10px;
        margin-left:10px;
        width:30%;
        padding-left:60px;
        padding-top:3px;
      }
      #two3 {
        margin-right:10px;
        margin-left:10px;
        width:30%;
        float:left;
      }
       #three3 {
        margin-right:10px;
        margin-left:10px;
        padding-right: 60px;
        padding-top: 3px;
        
      }
      #mobilecenter { 
        width: 55%;
        padding: 0px 40px;
        }
      #mobilehidden {
        display: block;
      }
      #desktophidden {
        display: none;
      }
      /* FORM ELEMENTS */
      label {
        display: inline-block;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 10px 40px;
        position: relative;
        cursor: pointer;
        vertical-align: middle;
        line-height: 18px;
        font-size: 15px;
      }
      label.text {
        font-size: 15px;
        border: 0px;
        vertical-align: baseline;
      }
      label.text:before {
        font-size: 15px;
        border: 0px;
        vertical-align: baseline;
      }
      label.text2 {
        font-size: 15px;
        padding: 0px 0px 0px 0px;
        border: 0px;
        vertical-align: baseline;
        padding-top:15px;
      }
      label.text2:before {
        font-size: 15px;
        border: 0px;
        vertical-align: baseline;
      }
      /*label:last-of-type {
      margin: 0px;
      }*/
      label:before {
        content: '';
        position: absolute;
        top: 2px;
        left: 10px;
        height: 18px;
        width: 18px;
        border: 1px solid #888;
        vertical-align: middle;
        border-radius: 2px;
      }
      .remitConnect:before {
        background: #53555c;
      }
      input[type="checkbox"]:disabled + label:before {
        opacity: .5;
        content: '';
        position: absolute;
        top: 2px;
        left: 10px;
        height: 18px;
        width: 18px;
        background-color: rgb(26,115,232 .5);
        background-image: url("https://image.sfmc.lutron.com/lib/fe3211727364047f701677/m/1/233a195e-7923-4d4e-9e12-6cfc75a685dc.png");
        background-size: 14px auto;
        background-repeat: no-repeat;
        background-position: 1px center;
        border: 1px .5 #1a73e8;
        border-radius: 2px;
}
      input[type="checkbox"]:checked + label:before {
        content: '';
        position: absolute;
        top: 2px;
        left: 10px;
        height: 18px;
        width: 18px;
        background-color: #1a73e8;
        background-image: url("https://image.sfmc.lutron.com/lib/fe3211727364047f701677/m/1/233a195e-7923-4d4e-9e12-6cfc75a685dc.png");
        background-size: 14px auto;
        background-repeat: no-repeat;
        background-position: 1px center;
        border: 1px solid #1a73e8;
        border-radius: 2px;
      }
      input[type="checkbox"] {
        display: none;
        padding: 0px 0px 0px 0px;
      }
      label.radio:before {
        content: '';
        position: absolute;
        top: 0px;
        left: 10px;
        height: 18px;
        width: 18px;
        border: 2px solid #888;
        vertical-align: middle;
        border-radius:100%;
      }
      input[type="radio"]:checked + label:before {
        content: '';
        position: absolute;
        top: 0px;
        left: 10px;
        height: 18px;
        width: 18px;
        background-color: #1a73e8;
        background-size: 12px auto;
        background-repeat: no-repeat;
        background-position: 1px center;
        border: 2px solid #888;
        border-radius:100%;
        box-shadow: inset 0 0 0 2px whitesmoke;
      }
      input[type="radio"] {
        display: none;
        padding: 0px 0px 0px 0px;
      }
      select{
        background-color: #f9f9f9;
        border: none;
        border-bottom: 1px solid #888;
        padding: 4px 10px;
        width: 175px;
        font-size:13px;
        border-radius: 2px;
      }
      input[type="text"]{
        background-color: #f9f9f9;
        border: 1px solid #888;
        padding: 4px 10px;
        width: 175px;
        font-size:13px;
        border-radius: 2px;
      }
      input[type="email"]{
        background-color: #f9f9f9;
        border: 1px solid #888;
        padding: 4px 10px;
        width: 175px;
        font-size:13px;
        border-radius: 2px;
      }
      input:hover, input:focus, select:hover, select:focus, textarea:hover, textarea:focus{
        background-color: rgb(26 115 232 / 20%);
        border-bottom: 1px solid #033982;
      }
      .infoWrapper {
        display: inline-block;
        position: relative;
      }
      .infoBubble {
        display: inline-block;
        margin: 0px 0px 15px 3px;
        background: #88aca6;
        width: 20px;
        height: 20px;
        border-radius: 30px;
        text-align: center;
        color: #ffffff;
        font-weight: 900;
        font-size: 12px;
        line-height: 20px;
        font-family: Arial;
        vertical-align: middle;
        cursor: pointer;
      }
      .infoCallout {
        position: absolute;
        left: 40px;
        top: -50px;
        border: 1px solid #007aa3;
        background: #ffffff;
        padding: 20px;
        box-shadow: 0px 0px 20px #cccccc;
        width: 220px;
        height: 120px;
        display: table;
        z-index: 800;
      }
      .infoCallout:before {
        content: '';
        position: absolute;
        left: -11px;
        top: 50%;
        background: #ffffff;
        border-left: 1px solid #cce3f2;
        border-bottom: 1px solid #cce3f2;
        width: 20px;
        height: 20px;
        z-index: 800;
        transform: translate(0%, -50%) rotate(45deg);
      }
      .infoCalloutCenter {
        display: table-cell;
        vertical-align: middle;
      }
      .infoCalloutCenter p {
        font-size: 75%;
        line-height: 1.3;
        margin: 0px;
        vertical-align: middle;
      }
      /* 1 - HEADER */
      #lutronHeader {
        background: #ffffff;
        padding: 30px;
        max-width: 900px;
        margin: 0px auto;
      }
      #lutronHeader {
        padding: 30px;
      }
      #lutronHeader img {
        max-width: 300px;
        width: 100%;
        display: block;
        padding: 100px 0px 80px 0px;
        margin:auto;
      }
      /* 2 - INTRO */
      #lutronIntro {
        padding: 0px 30px;
        max-width: 900px;
        margin: 0px auto;
      }
      #lutronIntro .wrapper {
        padding: 15px 0px 0px 0px;
      }
      #lutronIntro .savedWrapper {
        padding: 0px 0px 0px 0px;
      }
      #lutronIntro a {
        margin: 0px 10px;
      }
      #lutronIntro a:first-of-type {
        margin-left: 0px;
      }
      #lutronIntro a:last-of-type {
        margin-right: 0px;
      }
      /* 3 - PREFERENCES */
      #lutronPreferences {
        padding: 0px 30px;
        max-width: 900px;
        margin: 0px auto;
      }
      #lutronPreferences .wrapper {
        padding: 0px 0px;
      }
      #lutronPreferences h3 {
        padding: 0px 0px 0px 60px;
        position: relative;
        line-height: 50px;
      }
      #lutronPreferences h3:before {
        content: '';
        height: 50px;
        width: 50px;
        position: absolute;
        left: 0;
        top: 0;
        background-position: center center;
        background-size: 100% auto;
        background-repeat: no-repeat;
      }
      .preferencesGroup {
        margin: 0px 0px 25px 0px;
      }
      .preferencesGroup:last-of-type {
        margin-bottom: 0px;
      }
      .remitConnect {
        margin-bottom: 5px !important;
        pointer-events: none;
      }
      .remitConnect + p {
        margin: 0px 0px 0px 60px;
        font-style: italic;
        font-size: 75%;
        line-height: 1.2;
      }
      /* 4 - UNSUBSCRIBE  or RESUBSCRIBE */
      #lutronUnsubscribe  {
        padding: 0px 30px;
        margin: 0px auto;
      }
      #lutronUnsubscribe .wrapper {
        padding: 25px 30px 0px 0px;
      }
      #lutronUnsubscribe input[type="submit"] {
        display: block;
        border: 2px solid #62b7ed;
        border-radius: 3px;
        background: #FFFFFF;
        padding: 10px 15px;
        box-sizing: border-box;
        min-width: 280px;
        max-width: 280px;
        font-size: 14px;
        font-family: Helvetica Neue, Helvetica, Arial, sans serif;
        font-weight: 700;
        color: #62b7ed !important;
        cursor: pointer;
        transition: all .1s;
        ease
      }
      #lutronResubcribe {
        background: #ffffff;
        width: 100%;
        padding: 0px 30px;
      }
      #lutronResubcribe .wrapper {
        padding: 25px 30px 0px 0px;
      }
      #lutronResubcribe input[type="submit"] {
        display: block;
        border: 2px solid #62b7ed;
        border-radius: 3px;
        background: #62b7ed;
        padding: 10px 15px;
        min-width: 280px;
        max-width: 280px;
        box-sizing: border-box;
        font-size: 14px;
        font-family: Helvetica Neue, Helvetica, Arial, sans serif;
        font-weight: 700;
        color: #ffffff !important;
        cursor: pointer;
        transition: all .1s;
        ease
      }
      #lutronResubcribe input[type="button"]:hover {
        background: #62b7ed;
      }
      /* 5 - SAVE */
      #lutronSave {
        background: #ffffff;
        width: 100%;
        padding: 0px 30px;
      }
      #lutronSave .wrapper {
        padding: 30px 0px 80px 0px;
      }
      #lutronSave input[type="submit"] {
        display: block;
        text-align:center;
        border: 1px solid #1A73E8;
        border-radius: 5px;
        background: #1A73E8;
        padding: 10px 15px;
        min-width: 200px;
        max-width: 200px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        font-size: 14px;
        font-family: Helvetica Neue, Helvetica, Arial, sans serif;
        font-weight: 700;
        color: #FFFFFF !important;
        cursor: pointer;
        transition: all .1s;
        ease
      }
      #lutronSave input[type="button"]:hover {
        background: #62b7ed;
      }
      /* LAPTOP ------------------------------------------------------*/  
      @media only screen and (max-width: 1100px) {
        /*  0 - GLOBAL */
        .wrapper {
          max-width: 1000px;
        }
        /* 3 - PREFERENCES */
        .col2-4 {
          width: 100%;
          padding: 0px 0px 30px 0px;
        }
        .col2-4:last-of-type {
          padding: 0px;
        }
        /* 6 - FOOTER */
        .col1-4 {
          width: 100%;
        }
        .col3-4 {
          width: 100%;
        }
        .lutronFooterLinks {
          padding: 20px 0px 0px 0px;
        }
        #lutronFooter .wrapper .col3-4 {
          padding-left: 0px;
        }
        .lutronFooterLinks ul li {
          display: block;
          margin: 0px auto 5px auto;
          border: none;
        }
      }
      /* TABLET ------------------------------------------------------*/  
      @media only screen and (max-width: 799px) {
        /*  0 - GLOBAL */
        body {
          font-size: 15px;
        }
        .wrapper {
          max-width: 480px;
        }
        .infoCallout {
          left: -174px;
          right: auto;
          top: -136px;
          border: 1px solid #007aa3;
          background: #ffffff;
          padding: 20px;
          box-shadow: 0px 0px 20px #cccccc;
          width: 220px;
          height: 120px;
          display: table;
          z-index: 800;
        }
        .infoCallout:before {
          left: auto;
          right: 20px;
          top: auto;
          bottom: -12px;
          transform: translate(0%, -1px) rotate(315deg);
        }
        #one {
        float:none;
        margin:auto;
      }
        #two {
        float:none;
        margin:auto;
      }
      #columnone {
        float:none;
        margin:auto;
        width:50%;
        text-align:center;
      }
      #columntwo {
        overflow:none;
        margin:auto;
        width:50%;
        float:none;
        text-align:center;
      }
        #prefone {
        width:100%;
        float:none;
        margin-right:10px;
        margin-left:10px;
      }
        #preftwo {
        width:100%;
        float:none;
        margin-right:10px;
        margin-left:10px;
      }
        #three {
        margin-right:10px;
        margin-left:10px;
        width:75%;
      }
      #one3 {
        float:none;
        margin-right:10px;
        margin-left:10px;
        width:auto;
        padding-left: 0px;
         padding-top: 0px;
      }
      #two3 {
        margin-right:10px;
        margin-left:10px;
        width:85%;
        float: none;
        overflow:hidden;
                 padding-right: 0px;
         padding-top: 0px;
      }
       #three3 {
        margin-right:10px;
        margin-left:10px;
         float: none;
        overflow:hidden;
         width:85%; 
         padding-right: 0px;
         padding-top: 0px;
      }
        #mobilecenter { 
        width: 55%;
        }
        #mobilehidden {
        display: none;
      }
        #pref {
        height:auto;
      }
      #desktophidden {
        display: block;
      }
        input[type="text"]{
        background-color: #f9f9f9;
        border: 1px solid #4D8BE0;
        padding: 4px 10px;

        font-size:13px;
        border-radius: 2px;
      }
        input[type="email"]{
        background-color: #f9f9f9;
        border: 1px solid #4D8BE0;
        padding: 4px 10px;

        font-size:13px;
        border-radius: 2px;
      }
        select{
        background-color: #f9f9f9;
        border: none;
        border-bottom: 1px solid #4D8BE0;
        padding: 4px 10px;

        font-size:13px;
        border-radius: 2px;
      }
      }
      /* MOBILE ------------------------------------------------------*/  
      @media only screen and (max-width: 480px) {
        /* 0 - GLOBAL */
        body {
          font-size: 13px;
        }
        h1 {
          font-size: 250%;
        }
        h2 {
          font-size: 175%;
        }
        #mobilecenter {
         width: 70%; 
          padding: 0px 0px;
        }
        #lutronPreferences h3:before {
          width: 30px;
          height: 30px;
        }
        #lutronPreferences h3 {
          line-height: 30px;
          padding: 0px 0px 0px 40px;
        }
        #one {
          float: none;
          margin: auto;
          width:auto;
        }
         #two {
          float: none;
          margin: auto;
          width:auto;
        }
        #pref {
        height:auto;
      }
      #columnone {
        float:none;
        margin:0px;
        width:auto;
        text-align:center;
      }
      #columntwo {
        overflow:none;
        margin:0px;
        width:auto;
        float:none;
        text-align:center;
      }
        #prefone {
          float: none;
          margin: 0px;
          width:auto;
        }
         #preftwo {
          float: none;
          margin: 0px;
          width:auto;
        }
       #three {
        width:100%;
      }
        #one3 {
        float: none;
        width:auto;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;
      }
      #two3 {
        overflow:hidden;
        margin-right:10px;
        margin-left:10px;
        float:none;
      }
       #three3 {
        overflow:hidden;
        margin-right:10px;
        margin-left:10px;
         float:none;
         padding-right: 0px;
         padding-top: 0px;
      }
        #mobilehidden {
        display: none;
      }
      #desktophidden {
        display: block;
      }
        input[type="text"]{
        background-color: #f9f9f9;
        border: 1px solid #4D8BE0;
        padding: 4px 10px;
        width: 75% !important;
        font-size:13px;
        border-radius: 2px;
      }
        input[type="email"]{
        background-color: #f9f9f9;
        border: 1px solid #4D8BE0;
        padding: 4px 10px;
        width: 75%;
        font-size:13px;
        border-radius: 2px;
      }
        select{
        background-color: #f9f9f9;
        border: none;
        border-bottom: 1px solid #4D8BE0;
        padding: 4px 10px;
        width: 75%;
        font-size:13px;
        border-radius: 2px;
      }
      }
      }