.popup-newsletter {
  position        : fixed;
  top             : 20%;
  left            : 50%;
  transform       : translate(-50%, -20%);
  background-color: #fff;
  min-width       : 310px;
  max-width       : 500px;
  box-shadow      : 0px 0px 3px 1px rgba(#000, 0.3);
  z-index         : 2;
  padding         : 20px 10px;
  border-radius   : 4px;
  overflow        : hidden;
  display         : none;
  &.show {
    display  : block;
    // _animation.scss
    animation: newsletterPopup 0.2s linear;
  }

  .newsletter-header {
    // position: relative;
    .newsletter-close {
      position        : absolute;
      width           : 30px;
      height          : 30px;
      display         : flex;
      justify-content : center;
      align-items     : center;
      position        : absolute;
      top             : 0px;
      right           : 0px;
      background-color: $highlight-color-red;
      color           : #fff;
      cursor          : pointer;
      border-radius   : 0px 0px 0px 4px;
      transition      : all 0.3s;
      &:hover {
        background-color: $main-color;
      }
    }
    .logo {
      text-align: center;
      img {
        max-width: 150px;
      }
    }
    .title {
      text-align: center;
      margin-bottom: 10px;
    }
  }

  .newsletter-body {
    .newsletter-form {
      text-align: center;
      input {
        display      : inline-block;
        width        : 220px;
        padding      : 8px;
        border       : 1px solid $gray-color1;
        border-radius: 4px;
        &:focus {
          border-color: $main-color;
        }
      }

      .newsletter-registration {
        display         : block;
        width           : 100%;
        padding         : 8px;
        margin-top      : 8px;
        border          : 0;
        background-color: $gray-color1;
        cursor          : pointer;
        transition      : all 0.3s;
        &:hover {
          border-radius   : 4px;
          color           : #fff;
          background-color: $main-color;
        }
      }
    }
    .newsletter-message {
      margin: 8px 0 0 0;
    }
  }

}