.popupcontent {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  z-index: 99; }
  .popupcontent:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); }
  .popupcontent .popup__container {
    position: relative;
    margin: 0 auto;
    max-width: 420px;
    max-height: 95%;
    width: 90%;
    overflow: auto;
    white-space: normal; }
  .popupcontent .popup__container__header {
    min-height: 194px;
    padding-bottom: 74px;
    background-size: cover;
    background-position: center center; }
  .popupcontent .popup__container__title {
    margin: 0 auto;
    padding: 50px 9.97506234% 0 9.97506234%;
    color: #fff;
    text-align: center;
    font-size: 22px;
    font-weight: 100;
    line-height: 1.2962963; }
  .popupcontent .popup__content {
    margin: -60px 3.75% 13px 3.75%;
    padding: 17px 9.97506234%;
    background-color: #fff; }
  .popupcontent .popup__item {
    padding: 25px 0;
    border-top: 1px solid #cbcbcb; }
    .popupcontent .popup__item:first-child {
      padding: 0 0 25px 0;
      border-top: none; }
    .popupcontent .popup__item:last-of-type {
      padding-bottom: 0; }
    .popupcontent .popup__item > *:last-child {
      margin-bottom: 0; }
  .popupcontent .popup__item__img {
    display: inline-block;
    margin-bottom: 37px;
    text-align: center; }
  .popupcontent .popup__item__title {
    margin-bottom: 15px;
    color: #333333;
    font-size: 2.000rem;
    text-align: center;
    font-weight: 700;
    line-height: 1; }
  .popupcontent .popup__item__subtitle {
    margin-bottom: 15px;
    color: #333;
    font-size: 1.125rem;
    font-weight: 300;
    text-align: center; }
  .popupcontent .popup__item__desc {
    margin-bottom: 44px;
    color: #333;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.42857143; }
  .popupcontent .popup__item__desc ul {
    padding: 0 0 0 18px;
    margin: 0; }
  .popupcontent .popup__item__btn {
    margin-bottom: 28px;
    text-align: center; }
    .popupcontent .popup__item__btn .\+btn {
      width: 100%; }
      .popupcontent .popup__item__btn .\+btn.-yellow:hover, .popupcontent .popup__item__btn .\+btn.-yellow:focus, .popupcontent .popup__item__btn .\+btn.-yellow:active {
        color: #fff !important; }
  .popupcontent .popup__item__note {
    color: #333;
    font-size: 0.750rem;
    font-weight: 300;
    text-align: center; }
  .popupcontent .popup__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px; }
    .popupcontent .popup__close button {
      -webkit-appearance: none;
      background: none;
      border: none;
      cursor: pointer;
      height: 100%;
      width: 100%; }
      .popupcontent .popup__close button:hover, .popupcontent .popup__close button:focus {
        opacity: 0.6; }

@media only screen and (min-width: 479px) {
  .popupcontent .popup__item__btn .btn {
    width: auto; } }

@media only screen and (min-width: 992px) {
  .popupcontent .popup__content {
    margin: -48px 3.75% 13px 3.75%;
    padding: 39px 9.97506234%; }
  .popupcontent .popup__container__title {
    font-size: 27px; }
  .popupcontent .popup__item__title {
    font-size: 2.000rem; }
  .popupcontent .popup__item__btn .btn {
    width: auto; } }

.fade-in {
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
  animation-fill-mode: forwards; }

.fade-out {
  animation: fadeOut ease 1s;
  -webkit-animation: fadeOut ease 1s;
  -moz-animation: fadeOut ease 1s;
  -o-animation: fadeOut ease 1s;
  -ms-animation: fadeOut ease 1s;
  animation-fill-mode: forwards; }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }