.popup-wrapper {
  position: fixed;
  top: 10px;
  right: 10px;
  bottom: auto;
  left: auto;
  width: 300px;
  background-color: rgba(219, 228, 232, 0.9);
  z-index: 99999;
  display: block; }
  .popup-wrapper.hide {
    display: none; }
  .popup-wrapper .popup {
    position: relative;
    width: 100%;
    display: flex;
    flex-flow: column; }
    .popup-wrapper .popup .popup-img-wrap {
      display: block;
      width: 100%;
      height: 300px;
      background-size: cover;
      background-position: bottom left;
      z-index: 0; }
    .popup-wrapper .popup .popup-text {
      position: absolute;
      top: 132px;
      right: 0;
      bottom: auto;
      left: 0;
      padding: 0 20px;
      font-size: 16px;
      line-height: 24px;
      font-weight: 600;
      color: #ffffff;
      z-index: 20; }
    .popup-wrapper .popup .popup-title {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 300px;
      padding: 222px 10px 0;
      margin: 0;
      background-image: linear-gradient(0deg, #dff3fb, rgba(223, 243, 251, 0) 95%);
      z-index: 10; }
      .popup-wrapper .popup .popup-title .popup-title-two {
        display: block;
        font-weight: 700;
        text-align: center;
        font-size: 32px;
        line-height: 40px;
        color: #fd8141; }
      .popup-wrapper .popup .popup-title .popup-title-one {
        display: block;
        font-weight: 500;
        text-align: center;
        font-size: 30px;
        line-height: 38px;
        color: #0aa4de; }
    .popup-wrapper .popup .full-link {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 30; }
    .popup-wrapper .popup .close-popup {
      position: absolute;
      top: 10px;
      right: 10px;
      bottom: auto;
      left: auto;
      z-index: 30;
      background-color: #0f4868;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      height: 48px;
      width: 48px;
      font-size: 28px;
      font-weight: 700;
      color: #ffffff;
      text-align: center;
      line-height: 48px;
      padding: 2px 0 0;
      cursor: pointer; }

@media only screen and (max-width: 1200px) {
  .popup-wrapper {
    top: auto;
    right: auto;
    bottom: 10px;
    left: 10px; } }

@media only screen and (max-width: 900px) {
  .popup-wrapper {
    width: 240px; }
    .popup-wrapper .popup .popup-text {
      top: 120px;
      font-weight: 400; }
    .popup-wrapper .popup .popup-title {
      padding: 242px 10px 0; }
      .popup-wrapper .popup .popup-title .popup-title-two {
        font-size: 24px;
        line-height: 30px; }
      .popup-wrapper .popup .popup-title .popup-title-one {
        font-size: 22px;
        line-height: 28px; } }

@media only screen and (max-width: 768px) {
  .popup-wrapper {
    width: 200px; }
    .popup-wrapper .popup .popup-text {
      font-size: 15px;
      line-height: 22px; }
    .popup-wrapper .popup .popup-title .popup-title-two {
      font-size: 22px;
      line-height: 28px; }
    .popup-wrapper .popup .popup-title .popup-title-one {
      font-size: 20px;
      line-height: 26px; } }

@media only screen and (max-width: 500px) {
  .popup-wrapper {
    width: 180px; }
    .popup-wrapper .popup .popup-img-wrap {
      height: 240px; }
    .popup-wrapper .popup .popup-text {
      top: 90px;
      font-size: 14px;
      line-height: 20px; }
    .popup-wrapper .popup .popup-title {
      padding: 194px 10px 0;
      height: 240px; }
      .popup-wrapper .popup .popup-title .popup-title-two {
        font-size: 18px;
        line-height: 24px; }
      .popup-wrapper .popup .popup-title .popup-title-one {
        font-size: 16px;
        line-height: 22px; } }