@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Semi+Expanded:400,600,700,800');

          #content {
              position: relative;
              padding: 0;
              top: 30%;
              transform: translateY(100%);
              text-align: center;
              max-width: none;
          }
          .input, button {
              -webkit-appearance: none;
              border-radius: 0;
              outline: none;
              resize: none;
							font-family: 'Encode Sans Semi Expanded', sans-serif;
              -webkit-font-smoothing: antialiased
          }

          p.button .input{
              display: inline-block;
              background: #FFD800;
              border: 0;
              color: #000;
              line-height: 1em;
              font-weight: 400;
              text-transform: uppercase;
              cursor: pointer;
              -moz-transition: background 0.3s;
              -o-transition: background 0.3s;
              -webkit-transition: background 0.3s;
              transition: background 0.3s
          }
          p.button .input:hover {
              background: #FF9000
          }
          form {
              display: inline-block;
              margin-bottom: 31px
          }

          form .input {
              font: 300 18px/1em 'Encode Sans Semi Expanded', sans-serif;
              color: #000000
          }

          form .input[type=text] {
              background: #fff;
              line-height: 1em;
              border: 1px solid #d4d7da;
              height: 50px
          }

          #news-signup{
              position: fixed;
              width: 100%;
              visibility: hidden;
              z-index: 10002;
              top: 100px;
              opacity: 0;
              -webkit-transform: scale(0.5);
              transform: scale(0.5);
              -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
              transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
          }
          #news-signup .wrapper {
              /*background: #252b33;*/
              background: linear-gradient(to top right, #0A558F 30%, #333366 100%);
              position: relative;
              margin: 0 auto;
              text-align: center;
              -moz-border-radius: 3px;
              box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
              width: 98%
          }
          #news-signup_bg {
               visibility: hidden;
               position: fixed;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background-color: #ffffff;
               opacity: 0.4;
               z-index: 10001;
           }
          #news-signup_close {
              position: absolute;
              left: 98%;
              top:2%;
              margin: 7px 0 0 -30px;
              width: 30px;
              height: 30px;
              color: #000;
              opacity:0.8;
              background-color: #fff;
              /* width: auto; */
              /* height: auto; */
              cursor: pointer;
              border-radius:50%;
          }

          #news-signup_close::before {
              content: "x";
              font: 400 22px/1em 'Encode Sans Semi Expanded', sans-serif;
              /* color: #fff; */
          }

          #news-signup_close:hover {
              opacity:0.8;
          }

          #news-signup .newsletter-content {
              padding: 30px 3px;
              margin: 0 auto
          }
          #news-signup .newsletter-content h2 {
               font: 300 24px/1em 'Encode Sans Semi Expanded', sans-serif;

              color: #fff;
              text-align: center;
              margin: 0 auto 15px
          }
          #news-signup .newsletter-content p {
              margin: 0 auto 25px;
              font: 300 16px/1em 'Encode Sans Semi Expanded', sans-serif;

              color: #7e8890
          }
          #news-signup .newsletter-content form {
              margin: 0;
              padding: 0;
              width: 90%;
          }

          #news-signup .newsletter-content form p {
              margin: 0 auto 10px
          }

          #news-signup .newsletter-content form p:not(.button) {
              float: none;
              width: 100%;
          }

          #news-signup .newsletter-content form p:not(.button) .input {
              width: 100%;
              margin: 0;
              padding: 12px 15px !important;
              border-color: #d0d5d8
          }

          #news-signup .newsletter-content form .button {
              float: none;
              width: 100%
          }

          #news-signup .newsletter-content form .button .input {
              width: 100%;
              padding: 20px 25px 18px !important;
              font-size: 12px
          }

          #news-signup .newsletter-content p.footnote {
              filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
              opacity: 0.8;
              font: 100 11px 'Encode Sans Semi Expanded', sans-serif;
              color: #abb0b7;
              margin-bottom: 0
          }

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

              #news-signup .wrapper {
                  width: 800px;
                  margin: 7% auto;
              }
              #news-signup .newsletter-content form .button .input {
                  width: auto;
                  margin: 0
              }
              #news-signup .newsletter-content form .button {
                  float: left;
                  width: auto;
                  margin-left: 15px;
              }
              #news-signup .newsletter-content form {
                  width: auto
              }
              #news-signup .newsletter-content form p {
                  margin: 0 auto 15px
              }
              #news-signup .newsletter-content form p:not(.button) {
                  float: left;
                  width: auto
              }
              .newsletter-content form p:not(.button) .input {
                  width: 300px!important;
                  margin: 0 15px 0 0
              }
          }