@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.ttf?ryy1bd') format('truetype'),
    url('fonts/icomoon.woff?ryy1bd') format('woff'),
    url('fonts/icomoon.svg?ryy1bd#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body,
html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;

  font-size: 16px;
  font-family: 'Lato', sans-serif;
}

.ff-georgia {
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.fw-300 {
  font-weight: 300;
}
.fw-400 {
  font-weight: 400;
}
.fw-700 {
  font-weight: 700;
}

/* Iconfont */

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-edit:before {
  content: '';
  display: block;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='128' height='128' viewBox='0 0 128 128' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg style='mix-blend-mode:multiply'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.7452 18.7452C30.7475 6.74285 47.0261 0 64 0C80.9739 0 97.2525 6.74285 109.255 18.7452C121.257 30.7475 128 47.0261 128 64C128 80.9739 121.257 97.2525 109.255 109.255C97.2525 121.257 80.9739 128 64 128C47.0261 128 30.7475 121.257 18.7452 109.255C6.74285 97.2525 0 80.9739 0 64C0 47.0261 6.74285 30.7475 18.7452 18.7452ZM85.0999 54.44L71.9099 41.21L38.51 74.65L51.7 87.84L85.0999 54.44ZM89.19 32.15L95.1199 38.03H95.08C95.4987 38.448 95.8309 38.9444 96.0576 39.491C96.2843 40.0375 96.401 40.6233 96.401 41.215C96.401 41.8067 96.2843 42.3926 96.0576 42.9391C95.8309 43.4856 95.4987 43.982 95.08 44.4L88.5 50.98L75.2999 37.78L80.94 32.15C81.4814 31.6079 82.1244 31.1778 82.8322 30.8844C83.54 30.5909 84.2987 30.4399 85.065 30.4399C85.8312 30.4399 86.5899 30.5909 87.2977 30.8844C88.0055 31.1778 88.6485 31.6079 89.19 32.15ZM31.6274 93.9214C31.5546 93.6773 31.5451 93.4187 31.5999 93.17L34.94 78.24L48.13 91.44L33.4199 94.95C33.1725 95.0103 32.9138 95.0066 32.6682 94.9393C32.4225 94.8719 32.1981 94.7431 32.016 94.565C31.8339 94.387 31.7002 94.1655 31.6274 93.9214Z' fill='%235267AE'/%3E%3C/g%3E%3C/svg%3E");
  height: 128px;
  width: 128px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.icon-lock:before {
  content: '\e904';
}
.icon-login:before {
  content: '\e902';
}
.icon-spunta:before {
  content: '\e903';
}
.icon-chevron-up:before {
  content: '\e900';
}
.icon-upload-to-cloud:before {
  content: '\e901';
}
.icon-social-yt:before {
  content: '\ea1c';
}
.icon-social-facebook:before {
  content: '\ea90';
}
.icon-social-linkedin:before {
  content: '\eaca';
}
.icon-yt:before {
  content: '\ea1c';
}
.icon-facebook:before {
  content: '\ea90';
}
.icon-linkedin:before {
  content: '\eaca';
}

@media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
  .icon-edit:before {
    height: 60px;
    width: 60px;
  }
}

/* Container */
.container {
  height: 100%;
  position: relative;

  background-image: url('./nsa-background.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.container__icon {
  position: absolute;
  z-index: 3;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: -25px;

  color: #fff;
  font-size: 100px;
  line-height: 1;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
  .container__lineRight {
    display: none;
  }
}

/* Navigation bar */
.nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100px;
  padding: 0 60px 0 145px;

  background-color: rgba(32%, 40%, 68%, 0.8);
  color: #ffffff;

  width: 100%;
  position: fixed;
  z-index: 5;
  top: 0;
}

.nav__brand {
  width: 190px;
}
.nav__brand > img {
  width: 100%;
  height: auto;
}

.nav__links {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.nav__menu {
  margin: 0;
  padding: 0;
  list-style: none;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
}

.nav__menuItem {
  padding: 0 40px;
}
.nav__menuItem:first-child {
  border-right: 1px solid #f5f6fa;
}
.nav__menuItem:last-child {
  padding-right: 0;
}

.nav__link {
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
}
.nav__link:hover {
  color: #ffffff;
}

.nav__social {
  font-size: 18px;
}
.nav__social > .nav__link {
  color: #d7deed;
  vertical-align: bottom;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
  .nav {
    padding: 8px 10px;
    height: auto;
  }

  .nav__brand {
    width: 120px;
    margin: 0 auto;
    margin-bottom: 4px;
  }

  .nav,
  .nav__links {
    display: block;
  }

  .nav__menu {
    font-size: 12px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .nav__menuItem {
    padding: 0 12px;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    text-align: center;
  }
  .nav__menuItem:first-child {
    text-align: left;
    border: none;
  }
  .nav__menuItem:last-child {
    text-align: right;
  }
}

/* Grid */
.gr-container {
  width: 100%;
  max-width: 1140px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* Main */
.main {
  padding-top: 100px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.main__box {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 30px;
  padding: 90px 70px 70px;
  position: relative;
  z-index: 1;
}

.main__wrapper {
  min-width: 430px;
}

.main__icon {
  position: absolute;
  top: -66px;
  font-size: 128px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  color: #5267ae;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
  .main__box {
    margin: 40px 0 20px;
    padding: 22px;
    border-radius: 12px;
    width: 90%;
  }

  .main__icon {
    font-size: 60px;
    top: -34px;
  }

  .main__payoff {
    display: none;
  }

  .main__wrapper {
    min-width: auto;
  }
}

#api {
  position: relative;
}

.main__title {
  margin: 0 0 5px;
  color: #475ca5;
  font-size: 60px;
  letter-spacing: 2px;
  text-align: justify;

  text-shadow: 2px 2px 2px rgba(150, 150, 150, 1);
}

/* Form */
.buttons button {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 36px;
  font-weight: 300;
  font-style: italic;
  text-transform: capitalize;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;

  color: #fff;
  background-color: #2b5bb8;
  border: none;
  border-radius: 10px;
  padding: 20px 10px;
  width: 100%;
}
.buttons button:disabled,
button[disabled] {
  background-color: #696969;
  cursor: auto;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
  .buttons button {
    font-size: 22px;
    border-radius: 6px;
    padding: 12px 8px;
  }
}

.entry input:focus,
.attrEntry input:focus {
  outline: 0;
}
.entry input,
.attrEntry input {
  width: 100%;
  font-size: 14px;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: none;
  border-radius: 10px;
  display: block;
  padding: 10px;
  margin: 34px 0;
}

.intro,
label {
  display: none;
}

label#email_ver_input_label {
  display: none !important;
}

label {
  text-transform: uppercase;
}

input#email_ver_input {
  margin-top: 0 !important;
}

.attrEntry .error {
  display: none;
  color: #ec6839;
  font-style: italic;
  font-size: 15px;
  text-align: center;
}

.attrEntry.validate .error.itemLevel.show,
.attrEntry.validate .helpText.show,
.helpText.show {
  display: block;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
  .entry input,
  .attrEntry input {
    margin: 18px 0;
  }
}

#api ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.buttons.verify button {
  font-size: 18px;
  width: auto;
  padding: 8px 10px;
}

.helpLink.tiny {
  display: none;
}

/* Footer */
.footer {
  position: relative;
  z-index: 2;
  min-height: 380px;
  background-color: #313535;
  color: #ffffff;
}

.footer__wrapper {
  padding: 80px 60px 20px 145px;
}

.footer__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
/* .footer__row:first-child {
  border-bottom: 1px solid #65696a;
} */

.footer__column {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 22%;
          flex: 0 0 22%;
}
.footer__column:last-child {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 34%;
          flex: 0 0 34%;
}
.footer__column.copyright {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-align: right;
}

.footer__title {
  height: 32px;
  font-weight: normal;
  margin: 0 0 15px;
  font-size: 20px;
  letter-spacing: 2px;
  border-bottom: 1px solid #65696a;
}
.footer__title.chevron {
  text-align: right;
  color: #a8a9aa;
  font-size: 22px;
}

.footer__content {
  color: #c0c4c7;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.footer__content a {
  color: #c0c4c7;
  text-decoration: none;
}
.footer__content a:hover {
  color: #c0c4c7;
}

.footer__content b {
  color: #ffffff;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
  .footer__wrapper {
    padding: 20px;
  }

  .footer__row {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .footer__column,
  .footer__column:last-child {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
  }
}

/* Checkbox */
.custom-checkbox {
  position: relative;
  min-height: 20px;
  padding-left: 28px;
}
.custom-checkbox input[type='checkbox'] {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.custom-checkbox-label {
  display: inline-block;
  line-height: 20px;
}
.custom-checkbox-label:after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  content: '';
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70% 70%;
}
.custom-checkbox-label:before {
  border-radius: 0.25rem;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  pointer-events: none;
  content: '';
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #ffffff;
}
.custom-checkbox .custom-checkbox-input:checked ~ .custom-checkbox-label:before {
  background-color: #ffffff;
}
.custom-checkbox .custom-checkbox-input:checked ~ .custom-checkbox-label:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='1024' height='1024' viewBox='0 0 1024 1024'%3E%3Cpath fill='%235267ae' d='M433.211 874.305l-433.21-433.317 133.607-133.713 299.603 299.497 457.183-457.077 133.607 133.713z'%3E%3C/path%3E%3C/svg%3E");
}