.unsubscribe,
.subscribe {
  width: 100%;
  height: calc(100% - 4rem);
  overflow: hidden;
  position: fixed;
  top: 4rem;
  left: 0;
  z-index: 8;
  background-color: white;
  visibility: visible;
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(0.455, 0, 0.2, 0.955), visibility 0s 0s;
}

.unsubscribe--loading .unsubscribe_form,
.unsubscribe--loading .tags,
.subscribe--loading .subscribe_form,
.subscribe--loading .tags {
  pointer-events: none;
}

.unsubscribe--closed,
.subscribe--closed {
  visibility: hidden;
  transform: translateY(-100%);
  transition-delay: 0s, 0.5s;
}

.unsubscribe_form,
.subscribe_form {
  width: calc(60% - 5rem);
  max-height: 14rem;
  margin: 4rem auto;
  overflow: hidden;
  position: relative;
  transition: max-height 0.3s ease-in-out;
}

.unsubscribe_form--done,
.subscribe_form--done {
  max-height: 4rem;
}

.unsubscribe_form:after,
.subscribe_form:after {
  content: "";
  display: table;
  clear: both;
}

.unsubscribe_form div,
.subscribe_form div {
  position: relative;
}

.unsubscribe_form input,
.subscribe_form input {
  width: 100%;
  padding: 0 1rem;
  color: white;
  font-family: 'TO Record';
  font-size: 2rem;
  line-height: 4rem;
  background-color: transparent;
  border: none;
}

.unsubscribe_form input:focus,
.subscribe_form input:focus {
  outline: none;
  background-color: black;
}

.unsubscribe_form label,
.subscribe_form label {
  width: 100%;
  height: 100%;
  padding: 0 1rem;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  font-family: 'TO Record';
  font-size: 2rem;
  line-height: 4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
}

.unsubscribe_form-infos:after,
.subscribe_form-infos:after {
  content: "";
  display: table;
  clear: both;
}

.unsubscribe_form-infos input#title,
.subscribe_form-infos input#title {
  display: none;
}

.unsubscribe_form-infos > div,
.subscribe_form-infos > div {
  float: left;
  width: calc(33.333% - 1rem);
  height: 4rem;
  margin: 0 0.5rem 1rem;
  background-color: hsl(0, 0%, 25%);
}

.unsubscribe_form-infos > .unsubscribe_form-email {
  width: calc(100% - 1rem);
}

.unsubscribe_form-infos > div:hover,
.subscribe_form-infos > div:hover {
  background-color: black;
}

.unsubscribe_form-infos > div > input:invalid,
.subscribe_form-infos > div > input:invalid {
  color: hsl(0, 0%, 25%);
}

.unsubscribe_form-infos > div:hover > input:invalid,
.subscribe_form-infos > div:hover > input:invalid {
  background-color: black;
}

.unsubscribe_form-infos > div > input:focus:invalid,
.subscribe_form-infos > div > input:focus:invalid {
  color: white;
}

.unsubscribe_form-infos > div > input:not(.empty):valid + label,
.subscribe_form-infos > div > input:not(.empty):valid + label,
.unsubscribe_form-infos > div > input:focus + label,
.subscribe_form-infos > div > input:focus + label {
  display: none;
}

.unsubscribe_form-infos > div > label,
.subscribe_form-infos > div > label {
  cursor: text;
}

.unsubscribe_form-disclamer,
.subscribe_form-disclamer {
  margin: 0 0.5rem 1rem;
}

.unsubscribe_form-submit,
.subscribe_form-submit {
  width: calc(100% - 1rem);
  height: 4rem;
  margin: 0 0.5rem;
  background-color: hsl(0, 0%, 50%);
  cursor: pointer;
}

.unsubscribe_form-submit input,
.subscribe_form-submit input {
  cursor: pointer;
}

.unsubscribe_form-submit:hover,
.subscribe_form-submit:hover {
  background-color: black;
}

.unsubscribe_form-close,
.subscribe_form-close {
  display: none;
  width: calc(100% - 1rem);
  height: 4rem;
  margin: 0 0.5rem;
  padding: 0 1rem;
  overflow: hidden;
  bottom: 0;
  left: 0;
  background-color: hsl(0, 0%, 50%);
  color: white;
  font-family: 'TO Record';
  font-size: 2rem;
  line-height: 4rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.unsubscribe_form .unsubscribe_form-close,
.subscribe_form .subscribe_form-close {
  position: absolute;
}

.unsubscribe_form--done .unsubscribe_form-close,
.subscribe_form--done .subscribe_form-close {
  display: block;
}

@media (max-width: 1440px) {
  .unsubscribe_form,
  .subscribe_form {
    width: calc(100% - 7rem);
    margin: 4rem 3.5rem;
  }
}

@media (max-width: 768px) {
  .unsubscribe_form,
  .subscribe_form {
    max-height: 21rem;
  }

  .unsubscribe_form-infos > div,
  .subscribe_form-infos > div {
    width: calc(100% - 1rem);
  }
}