.registration {
  min-width: 330px; }
  .registration section {
    background-image: url(../../images/signin-background-img.png);
    position: relative;
    background-size: cover;
    background-repeat: no-repeat; }
    @media (min-width: 992px) {
      .registration section {
        margin: 0;
        background-size: 100%; } }
    .registration section .registration-container {
      width: 100%;
      margin: 54px 0; }
      .registration section .registration-container .registration-wrapper {
        height: auto;
        border-radius: 3px;
        background-color: #fff;
        width: 100%;
        padding: 0 18px; }
        @media (min-width: 992px) {
          .registration section .registration-container .registration-wrapper {
            height: 520px;
            border-radius: 8px; } }
        @media (min-width: 1281px) {
          .registration section .registration-container .registration-wrapper {
            height: 100%; } }
        .registration section .registration-container .registration-wrapper .registration-p-wrapper {
          margin-top: 24px;
          width: auto; }
          @media (min-width: 992px) {
            .registration section .registration-container .registration-wrapper .registration-p-wrapper {
              margin-top: 53px; } }
          .registration section .registration-container .registration-wrapper .registration-p-wrapper .registration-head {
            font-size: 3rem;
            font-weight: 500;
            font-style: normal;
            font-stretch: normal;
            line-height: normal;
            letter-spacing: normal;
            color: #4e5665;
            text-align: center; }
            @media (min-width: 992px) {
              .registration section .registration-container .registration-wrapper .registration-p-wrapper .registration-head {
                font-size: 6.2rem; } }
          .registration section .registration-container .registration-wrapper .registration-p-wrapper .registration-p {
            font-size: 1.6rem;
            font-weight: normal;
            font-style: normal;
            font-stretch: normal;
            line-height: 1.25;
            letter-spacing: normal;
            color: #4e5665;
            text-align: center;
            margin-bottom: 0;
            max-width: 300px; }
            @media (min-width: 992px) {
              .registration section .registration-container .registration-wrapper .registration-p-wrapper .registration-p {
                line-height: 1.75;
                max-width: 100%; } }
        .registration section .registration-container .registration-wrapper .registration-form-wrapper {
          width: 100%;
          margin-top: 18px; }
          @media (min-width: 992px) {
            .registration section .registration-container .registration-wrapper .registration-form-wrapper {
              margin-top: 20px;
              max-width: 880px; } }
          .registration section .registration-container .registration-wrapper .registration-form-wrapper .form-group {
            width: 100%;
            margin-bottom: 0; }
          .registration section .registration-container .registration-wrapper .registration-form-wrapper input {
            width: 100%;
            height: 43px;
            font-size: 1.5rem;
            font-weight: normal;
            font-style: normal;
            font-stretch: normal;
            line-height: normal;
            letter-spacing: 0.5px;
            color: #6a768a;
            padding: 0px 0 0 25px; }
            @media (min-width: 992px) {
              .registration section .registration-container .registration-wrapper .registration-form-wrapper input {
                height: 50px; } }
          .registration section .registration-container .registration-wrapper .registration-form-wrapper .name, .registration section .registration-container .registration-wrapper .registration-form-wrapper .email, .registration section .registration-container .registration-wrapper .registration-form-wrapper .email-confirm, .registration section .registration-container .registration-wrapper .registration-form-wrapper .form-group-password, .registration section .registration-container .registration-wrapper .registration-form-wrapper .password-confirm {
            position: relative; }
            .registration section .registration-container .registration-wrapper .registration-form-wrapper .name .input-bullet, .registration section .registration-container .registration-wrapper .registration-form-wrapper .email .input-bullet, .registration section .registration-container .registration-wrapper .registration-form-wrapper .email-confirm .input-bullet, .registration section .registration-container .registration-wrapper .registration-form-wrapper .form-group-password .input-bullet, .registration section .registration-container .registration-wrapper .registration-form-wrapper .password-confirm .input-bullet {
              position: absolute;
              width: 6px;
              height: 6px;
              background-color: #0a7bb6;
              border-radius: 50%;
              left: 7px;
              right: auto;
              top: 10px;
              margin: -3px 0 0 0; }
              .registration section .registration-container .registration-wrapper .registration-form-wrapper .name .input-bullet + label, .registration section .registration-container .registration-wrapper .registration-form-wrapper .email .input-bullet + label, .registration section .registration-container .registration-wrapper .registration-form-wrapper .email-confirm .input-bullet + label, .registration section .registration-container .registration-wrapper .registration-form-wrapper .form-group-password .input-bullet + label, .registration section .registration-container .registration-wrapper .registration-form-wrapper .password-confirm .input-bullet + label {
                margin-left: 20px; }
          .registration section .registration-container .registration-wrapper .registration-form-wrapper .first-name {
            margin: 0 0 25px 0; }
            @media (min-width: 992px) {
              .registration section .registration-container .registration-wrapper .registration-form-wrapper .first-name {
                margin: 0 10px 0 0; } }
          .registration section .registration-container .registration-wrapper .registration-form-wrapper .language {
            position: relative; }
            .registration section .registration-container .registration-wrapper .registration-form-wrapper .language .blue-arrow {
              width: 9px;
              height: 9px;
              position: absolute;
              border: solid #0a7bb6;
              border-width: 0 0 1.5px 1.5px;
              display: inline-block;
              transform: rotate(-45deg);
              -webkit-transform: rotate(-45deg);
              pointer-events: none;
              top: 45px;
              right: 17px;
              left: auto;
              margin-top: -3px; }
              @media (min-width: 992px) {
                .registration section .registration-container .registration-wrapper .registration-form-wrapper .language .blue-arrow {
                  margin-top: 0; } }
            .registration section .registration-container .registration-wrapper .registration-form-wrapper .language .input-bullet {
              position: absolute;
              width: 6px;
              height: 6px;
              background-color: #0a7bb6;
              border-radius: 50%;
              left: 11px;
              right: auto;
              top: 50%;
              margin: -3px 0 0 0; }
            .registration section .registration-container .registration-wrapper .registration-form-wrapper .language select {
              width: 100%;
              height: 43px;
              font-size: 1.5rem;
              font-weight: normal;
              font-style: normal;
              font-stretch: normal;
              line-height: normal;
              letter-spacing: 0.5px;
              color: rgba(106, 118, 138, 0.8);
              -webkit-appearance: none;
              -moz-appearance: none;
              padding: 0 0 0 25px; }
              @media (min-width: 992px) {
                .registration section .registration-container .registration-wrapper .registration-form-wrapper .language select {
                  height: 50px; } }
              .registration section .registration-container .registration-wrapper .registration-form-wrapper .language select::-ms-expand {
                display: none; }
          .registration section .registration-container .registration-wrapper .registration-form-wrapper .name-lng-wrapper, .registration section .registration-container .registration-wrapper .registration-form-wrapper .email-wrapper {
            width: 100%; }
            @media (min-width: 992px) {
              .registration section .registration-container .registration-wrapper .registration-form-wrapper .name-lng-wrapper, .registration section .registration-container .registration-wrapper .registration-form-wrapper .email-wrapper {
                margin: 0 0 25px 0; } }
          .registration section .registration-container .registration-wrapper .registration-form-wrapper .password-wrapper {
            margin: 0 0 30px 0; }
            @media (min-width: 992px) {
              .registration section .registration-container .registration-wrapper .registration-form-wrapper .password-wrapper {
                margin: 0 0 25px 0; } }
            .registration section .registration-container .registration-wrapper .registration-form-wrapper .password-wrapper input {
              padding: 0 0 0 25px; }
              @media (min-width: 992px) {
                .registration section .registration-container .registration-wrapper .registration-form-wrapper .password-wrapper input {
                  padding: 3px 0 0 25px; } }
            .registration section .registration-container .registration-wrapper .registration-form-wrapper .password-wrapper .password-eye {
              top: calc(50% + 12px) !important; }
          .registration section .registration-container .registration-wrapper .registration-form-wrapper .name, .registration section .registration-container .registration-wrapper .registration-form-wrapper .email, .registration section .registration-container .registration-wrapper .registration-form-wrapper .form-group-password {
            margin: 0 0 25px 0; }
            @media (min-width: 992px) {
              .registration section .registration-container .registration-wrapper .registration-form-wrapper .name, .registration section .registration-container .registration-wrapper .registration-form-wrapper .email, .registration section .registration-container .registration-wrapper .registration-form-wrapper .form-group-password {
                margin: 0 20px 0 0; } }
          .registration section .registration-container .registration-wrapper .registration-form-wrapper .language, .registration section .registration-container .registration-wrapper .registration-form-wrapper .email-confirm {
            margin: 0 0 25px 0; }
            @media (min-width: 992px) {
              .registration section .registration-container .registration-wrapper .registration-form-wrapper .language, .registration section .registration-container .registration-wrapper .registration-form-wrapper .email-confirm {
                margin: 0; } }
          .registration section .registration-container .registration-wrapper .registration-form-wrapper .password-confirm {
            margin: 0; }
            @media (min-width: 992px) {
              .registration section .registration-container .registration-wrapper .registration-form-wrapper .password-confirm {
                margin: inharit; } }
        .registration section .registration-container .registration-wrapper .registration-button {
          width: 100%;
          margin: 15px 0 45px 0; }
          @media (min-width: 992px) {
            .registration section .registration-container .registration-wrapper .registration-button {
              width: auto; } }
          .registration section .registration-container .registration-wrapper .registration-button button {
            width: 100%;
            height: 50px;
            border-radius: 3px;
            background-color: #0a7bb6;
            box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.1);
            font-size: 2rem;
            font-weight: 500;
            font-style: normal;
            font-stretch: normal;
            line-height: normal;
            letter-spacing: 0.5px;
            text-align: center;
            color: #fff; }
            .registration section .registration-container .registration-wrapper .registration-button button:active, .registration section .registration-container .registration-wrapper .registration-button button:focus {
              background-color: #1c6897;
              color: #0a7bb6;
              border: 0; }
            @media (min-width: 992px) {
              .registration section .registration-container .registration-wrapper .registration-button button {
                width: 330px; } }
  .registration footer {
    margin: 0;
    border: 0; }
    .registration footer .footer-nav-wrapper {
      margin: 70px 0;
      padding: 0;
      border: 0; }
      @media (min-width: 992px) {
        .registration footer .footer-nav-wrapper {
          margin: 0; } }

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* The actual popup */
  /* Popup arrow */
  /* Toggle this class - hide and show the popup */ }
  .popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    right: 50%;
    margin-right: -80px; }
  .popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 50%;
    margin-right: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent; }
  .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s; }

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }