* {
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box
          }

html{
  width:100%;
    height:100%;
}
   body{
       margin:0;
       margin-top:20px;
       font: 100 16px/1em 'Roboto Slab', serif;
       color:#fff;background: #F1F2B5; 
       background: -webkit-linear-gradient(to left, #F1F2B5 , #135058); 
       background: linear-gradient(to left, #F1F2B5 , #135058); 
      }
#content {
    position: relative;
    padding: 0;
    top: 50%;
    transform: translateY(100%);
    text-align: center;
    max-width: none;
}
          input, button {
              -webkit-appearance: none;
              border-radius: 0;
              outline: none;
              resize: none;
               font-family: 'Roboto Slab', 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 'Roboto Slab', 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: #948E99; 
              background: -webkit-linear-gradient(to left, #252b33 , #2E1437);
              background: linear-gradient(to left, #252b33 , #2E1437);
              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: 100%;
              margin: 7px 0 0 -30px;
              width: 20px;
              height: 20px;
              color: #fff;
              opacity:0.3;
              cursor: pointer;
          }

          #news-signup_close::before {
              content: "×";
              font: 400 26px/1em 'Roboto Slab', serif;
          }

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

          #news-signup .newsletter-content {
              padding: 100px 3px;
              margin: 0 auto
          }
          #news-signup .newsletter-content h2 {
               font: 300 24px/1em 'Roboto Slab', serif;
              color: #fff;
              text-align: center;
              margin: 0 auto 15px
          }
          #news-signup .newsletter-content p {
              margin: 0 auto 25px;
              font: 300 16px/1em 'Roboto Slab', 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 'Roboto Slab', 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
              }
          }