.newsletter-modal {
  padding: 0;
}
.newsletter-modal .wrapper {
  display: flex;
}
.newsletter-modal .wrapper > aside.photo {
  width: 44%;
}
.newsletter-modal .wrapper > aside.photo img{
  width: 100%;
}
.newsletter-modal .wrapper > aside.content {
  width: 66%;
  padding: 0 20px;
}
.newsletter-modal .wrapper > aside.content .remodal-close {
  left: initial;
  right: 0;
}
.newsletter-modal .wrapper > aside.content h2 {
  font-size: 26px;
  margin-bottom: 20px;
}
.newsletter-modal .wrapper > aside.content h2:first-letter {
  font-size: 34px;
}
.newsletter-modal .wrapper > aside.content form {
  margin-top: 40px;
}
.newsletter-modal .wrapper > aside.content form [type="text"] {
  border: none;
  border-bottom: 2px solid #BBB;
  border-radius: 0;
  height: 51px;
  outline: 0;
  padding: 16px 0;
  transition: all 0.2s ease;
}
.newsletter-modal .wrapper > aside.content form [type="text"]:focus {
  border-bottom: 2px solid #777;
}
.newsletter-modal .wrapper > aside.content .newsletter-social {
  text-align: center;
  margin-top: 40px;
  font-size: 24px;
  overflow: hidden;
}
.newsletter-modal .wrapper > aside.content .newsletter-social a {
  color: #BBB;
  transition: all 0.2s ease;
}
.newsletter-modal .wrapper > aside.content .newsletter-social a:hover,
.newsletter-modal .wrapper > aside.content .newsletter-social a:focus {
  color: #777;
}
.newsletter-modal .wrapper > aside.content .error-summary {
  color: #a94442;
  text-align: center;
  font-size: 20px;
  margin-top: 20px;
}
.newsletter-modal .wrapper > aside.content .success-message {
  margin-top: 130px;
}

@media only screen and (min-width: 641px) {
  .newsletter-modal {
    max-width: 800px;
  }

}

@media only screen and (max-width: 730px) {
  .newsletter-modal .wrapper > aside.photo {
    display: none;
  }
  .newsletter-modal .wrapper > aside.content {
    width: 100%;
  }
  .newsletter-modal .wrapper > aside.content form [type="text"] {
    width: 100%;
  }
}

@media only screen and (max-width: 640px) {
  .newsletter-modal .wrapper > aside.content form {
    margin-top: 0;
  }
  .newsletter-modal .wrapper > aside.content form [type="text"] {
    margin-bottom: 20px;
    width: 90%;
  }
}

@media only screen and (max-width: 420px) {
  .newsletter-modal .wrapper > aside.content form > div {
    width: 100%;
  }
}